/* ═══════════════════════════════════════════════════════
   HSC College Search — content template
   Used by the [hsc_college_search_with_content] shortcode.

   Reproduces the XI Class Admission Homepage design scheme
   (same colours, fonts, radius, shadow) so the heading and the
   "how to" steps read as part of that site. Everything is
   scoped to explicit `.hcs-cw*` classes — there is deliberately
   NO universal / bare-element reset here, so these rules can
   never cascade into the search UI (.hcs-wrap) nested inside
   the wrapper.
═══════════════════════════════════════════════════════ */

.hcs-cw{
	--cw-blue:#0080b9;
	--cw-blue-deep:#045c86;
	--cw-blue-darker:#033f5e;
	--cw-ink:#06283b;
	--cw-sky:#e6f3fb;
	--cw-sky-2:#d3ebf7;
	--cw-gold:#f5a623;
	--cw-gold-soft:#ffedcf;
	--cw-paper:#f4f8fb;
	--cw-line:#cfe3ef;
	--cw-muted:#5a7486;
	--cw-shadow-sm:0 8px 22px -14px rgba(4,60,90,.45);
	--cw-radius:18px;
	--cw-disp:"Bricolage Grotesque",sans-serif;
	--cw-body:"Inter",sans-serif;

	box-sizing:border-box;
	max-width:1120px;
	margin:0 auto 26px;
	font-family:var(--cw-body);
	color:var(--cw-ink);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

/* ── Heading (full width — no max-width constraint) ──── */
.hcs-cw-head{
	text-align:center;
	margin:0 0 24px;
	padding:4px 8px 0;
}
.hcs-cw-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:var(--cw-disp);
	font-weight:600;
	font-size:.72rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--cw-blue);
	background:var(--cw-sky);
	padding:6px 13px;
	border-radius:100px;
	border:1px solid var(--cw-line);
}
.hcs-cw-eyebrow .hcs-cw-dot{
	width:6px;height:6px;border-radius:50%;background:var(--cw-gold);
}
.hcs-cw-title{
	font-family:var(--cw-disp);
	font-size:clamp(1.7rem,3.5vw,2.3rem);
	line-height:1.14;
	letter-spacing:-.01em;
	font-weight:800;
	color:var(--cw-ink);
	margin:14px 0 10px;
}
.hcs-cw-sub{
	color:var(--cw-muted);
	font-size:1rem;
	line-height:1.6;
	margin:0;
}

/* ── Search zone ─────────────────────────────────────── */
.hcs-cw-search{margin:0 0 30px}

/* ── "How to" guide (3-column step grid) ─────────────── */
.hcs-cw-guide{
	background:#fff;
	border:1px solid var(--cw-line);
	border-radius:var(--cw-radius);
	box-shadow:var(--cw-shadow-sm);
	padding:26px 26px 22px;
}
.hcs-cw-guide-head{
	display:flex;
	flex-direction:column;
	gap:6px;
	margin-bottom:20px;
}
.hcs-cw-guide-eyebrow{
	font-family:var(--cw-disp);
	font-weight:700;
	font-size:.66rem;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--cw-blue);
}
.hcs-cw-guide-title{
	font-family:var(--cw-disp);
	font-size:1.35rem;
	font-weight:800;
	color:var(--cw-ink);
	line-height:1.2;
	margin:0;
}

/* Steps */
.hcs-cw-steps{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
}
.hcs-cw-step{
	display:flex;
	gap:13px;
	align-items:flex-start;
	background:var(--cw-paper);
	border:1px solid var(--cw-line);
	border-radius:14px;
	padding:16px 15px;
}
.hcs-cw-step-num{
	flex:none;
	width:34px;height:34px;
	border-radius:10px;
	display:grid;place-items:center;
	background:var(--cw-blue);
	color:#fff;
	font-family:var(--cw-disp);
	font-weight:800;
	font-size:1rem;
	box-shadow:0 8px 18px -10px rgba(0,128,185,.7);
}
.hcs-cw-step-body{min-width:0}
.hcs-cw-step-title{
	font-family:var(--cw-disp);
	font-size:1rem;
	font-weight:700;
	color:var(--cw-ink);
	margin:1px 0 5px;
	line-height:1.25;
}
.hcs-cw-step-text{
	font-size:.86rem;
	line-height:1.55;
	color:#39566a;
	margin:0;
}
.hcs-cw-step-text b{color:var(--cw-ink);font-weight:700}

/* Info note */
.hcs-cw-note{
	display:flex;
	gap:11px;
	align-items:flex-start;
	margin-top:18px;
	padding:12px 15px;
	border-radius:12px;
	background:linear-gradient(135deg,var(--cw-gold-soft),#fff6e6);
	border:1px solid #f2d9a8;
	font-size:.86rem;
	line-height:1.55;
	color:#6b4e17;
}
.hcs-cw-note svg{flex:none;width:18px;height:18px;margin-top:1px;color:#c78a1e}
.hcs-cw-note b{color:#5c4211;font-weight:700}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:860px){
	.hcs-cw-steps{grid-template-columns:1fr}
}
@media (max-width:520px){
	.hcs-cw-guide{padding:20px 16px 18px}
	.hcs-cw-title{margin-top:12px}
}