/* =========================================================================
   Anand Niketan Bharuch — design tokens + coded header/footer
   Derived from Figma file OtlxTsWIPQFJ41dA8LsBQT ("Website Design").
   Layout of page bodies is authored in Elementor; this file owns the
   global system so every Elementor section inherits the same scale.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */
:root {
	/* Brand */
	--anb-lime:            #afca05;
	--anb-lime-dark:       #97ae04;
	--anb-blue:            #0084c9;
	--anb-blue-dark:       #006ba3;
	--anb-sky:             #ccedff;   /* hero / section wash            */
	--anb-sky-soft:        #ecf8fe;   /* header bar                     */
	--anb-green-dark:      #0c463c;
	--anb-green-light:     #ddf0ed;
	--anb-green-light-alt: #b8e0d9;
	--anb-yellow:          #ffb84c;
	--anb-pink-light:      #fef0f7;

	/* Neutrals */
	--anb-black:      #000000;
	--anb-ink:        #252525;
	/* Figma specifies #808080 for secondary text, which measures 3.95:1 on
	   white and 3.75:1 on the #f9f9f9 wash -- both below the 4.5:1 that
	   WCAG AA requires for body copy. #737373 is the lightest grey that
	   clears 4.5:1 on BOTH backgrounds, so the design intent survives and
	   the text becomes readable. */
	--anb-muted:      #737373;
	--anb-line:       #e6e6e6;
	--anb-white:      #ffffff;
	--anb-white-soft: #f9f9f9;

	/* Text-safe variants of the brand colours.
	   The brand blue and lime are fine as large display type or as fills,
	   but as small text on white they measure 4.08:1 and 1.86:1. These are
	   the minimum darkenings that reach 4.5:1; use them for body-sized text
	   and links, and keep the brand values for headings and backgrounds. */
	--anb-blue-text:  #007cbc;
	--anb-lime-text:  #6c7d03;

	/* Typography */
	--anb-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
	--anb-font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Fluid type — floor is the mobile size, ceiling the Figma desktop size */
	--anb-fs-display: clamp(2rem, 1.09rem + 4.05vw, 3.75rem);   /* 32 → 60 */
	--anb-fs-h2:      clamp(1.75rem, 1.36rem + 1.74vw, 3rem);   /* 28 → 48 */
	--anb-fs-h3:      clamp(1.375rem, 1.18rem + 0.87vw, 2.25rem);
	--anb-fs-h4:      clamp(1.125rem, 1.03rem + 0.43vw, 1.5rem);
	--anb-fs-lead:    clamp(0.9375rem, 0.9rem + 0.22vw, 1rem);
	--anb-fs-body:    1rem;
	--anb-fs-sm:      0.875rem;
	--anb-fs-xs:      0.75rem;

	/* Layout */
	--anb-container:  1140px;
	--anb-gutter:     20px;
	--anb-header-h:   96px;
	--anb-radius:     7px;
	--anb-radius-lg:  16px;
	--anb-radius-pill: 100px;

	/* Rhythm — section padding scales with viewport */
	--anb-section-y:  clamp(48px, 3.5vw + 24px, 96px);

	--anb-shadow-sm: 0 2px 12px rgba(0, 0, 0, .05);
	--anb-shadow-md: 0 8px 30px rgba(0, 0, 0, .08);

	--anb-ease: cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	font-family: var(--anb-font-body);
	font-size: var(--anb-fs-body);
	font-weight: 400;
	line-height: 1.7;
	color: var(--anb-ink);
	background: var(--anb-white);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--anb-font-display);
	font-weight: 400;
	color: var(--anb-black);
	line-height: 1.15;
	margin: 0 0 .5em;
}
h1 { font-size: var(--anb-fs-display); letter-spacing: .02em; }
h2 { font-size: var(--anb-fs-h2); }
h3 { font-size: var(--anb-fs-h3); }
h4 { font-size: var(--anb-fs-h4); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--anb-blue); text-decoration: none; transition: color .2s var(--anb-ease); }
a:hover { color: var(--anb-blue-dark); }

img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible {
	outline: 3px solid var(--anb-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.anb-skip-link:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--anb-blue); color: #fff;
	border-radius: var(--anb-radius);
}

.anb-container {
	width: 100%;
	max-width: calc(var(--anb-container) + var(--anb-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--anb-gutter);
}

/* -------------------------------------------------------------------------
   3. Buttons
   ---------------------------------------------------------------------- */
.anb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--anb-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.7;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--anb-radius);
	cursor: pointer;
	text-align: center;
	transition: background-color .2s var(--anb-ease), transform .2s var(--anb-ease), box-shadow .2s var(--anb-ease);
}
/* Figma puts white text on the lime button. That measures 1.77:1 -- so far
   below the 4.5:1 AA floor that it is hard to read on a phone in daylight,
   which is where most parents will see it. Keeping the brand lime and
   switching the label to ink gives 8.23:1 and preserves the colour the
   design is built around; darkening the lime instead would hit AA but turn
   the brand colour olive. Flagged as a deliberate deviation. */
.anb-btn--lime { background: var(--anb-lime); color: var(--anb-ink); }
.anb-btn--lime:hover { background: var(--anb-lime-dark); color: var(--anb-ink); transform: translateY(-2px); box-shadow: var(--anb-shadow-sm); }
/* White on #0084c9 is 4.08:1, just under AA; the existing dark blue is
   5.78:1 and visually all but identical. */
.anb-btn--blue { background: var(--anb-blue-dark); color: #fff; }
.anb-btn--blue:hover { background: #00587f; color: #fff; transform: translateY(-2px); }
.anb-btn--ghost { background: transparent; color: var(--anb-ink); border: 1px solid var(--anb-line); }

/* Pill label, e.g. "A New Approach to" */
.anb-pill {
	display: inline-flex;
	align-items: center;
	background: var(--anb-blue);
	color: #fff;
	font-size: var(--anb-fs-sm);
	font-weight: 500;
	line-height: 1.5;
	padding: 4px 14px;
	border-radius: var(--anb-radius-pill);
}

/* -------------------------------------------------------------------------
   4. Header
   Figma 655:725 — bg #ECF8FE, py 20, inner row 1140, space-between.
   ---------------------------------------------------------------------- */
.anb-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--anb-sky-soft);
	transition: box-shadow .25s var(--anb-ease);
}
.anb-header.is-stuck { box-shadow: var(--anb-shadow-sm); }

.anb-header__inner {
	width: 100%;
	max-width: calc(var(--anb-container) + var(--anb-gutter) * 2);
	margin-inline: auto;
	padding: 20px var(--anb-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.anb-header__logo { display: block; flex: 0 0 auto; }

/* Logo lockup: crest beside a stacked wordmark + sub-line, matching Figma
   655:727 where the three vectors are separate layers. */
.anb-logo { display: inline-flex; align-items: center; gap: 9px; }
.anb-logo .anb-logo__crest    { width: 40px;  height: auto; flex: 0 0 auto; }
.anb-logo .anb-logo__text     { display: flex; flex-direction: column; gap: 6px; }
.anb-logo .anb-logo__wordmark { width: 149px; height: auto; }
.anb-logo .anb-logo__sub      { width: 114px; height: auto; }

/* Footer lockup — Figma 655:362: crest 48x65, wordmark 177x22, sub 135x10.5.
   Sized per part; a single height on the wrapper would stretch the 8:1
   wordmark to ~530px wide. */
.anb-logo--lg .anb-logo__crest    { width: 48px; }
.anb-logo--lg .anb-logo__wordmark { width: 177px; }
.anb-logo--lg .anb-logo__sub      { width: 135px; }
.anb-logo--text {
	font-family: var(--anb-font-display);
	font-size: 22px;
	color: var(--anb-blue);
}

.anb-header__cta { flex: 0 0 auto; }

/* --- Primary navigation ------------------------------------------------ */
.anb-nav { flex: 1 1 auto; display: flex; justify-content: center; }

.anb-nav__list {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.anb-nav__item--top { position: relative; display: flex; align-items: center; }

.anb-nav__link {
	display: inline-flex;
	align-items: center;
	font-size: var(--anb-fs-sm);
	font-weight: 400;
	line-height: 1.5;
	color: var(--anb-ink);
	padding: 6px 0;
	white-space: nowrap;
}
/* No hover colour on the menu. The current-page and open states still
   colour, because those report where you are rather than where the cursor
   happens to be. */
.anb-nav__item--top.is-active > .anb-nav__link { color: var(--anb-blue-text); }

.anb-nav__item--top.is-active > .anb-nav__link { font-weight: 500; }

/* A parent item is a <button> that opens its dropdown and navigates nowhere,
   so it has to look exactly like the sibling links -- label plus caret, one
   hit area. The button reset is explicit because UA styles for <button>
   (font, background, border, padding) otherwise override the link styling. */
.anb-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 6px 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: var(--anb-fs-sm);
	font-weight: 400;
	line-height: 1.5;
	color: var(--anb-ink);
	cursor: pointer;
	white-space: nowrap;
	transition: color .2s var(--anb-ease);
}
.anb-nav__caret {
	width: 24px; height: 24px; flex: 0 0 auto;
	transition: transform .2s var(--anb-ease);
}
.anb-nav__item--top.is-open > .anb-nav__toggle { color: var(--anb-blue-text); }
.anb-nav__item--top.is-active > .anb-nav__toggle { color: var(--anb-blue-text); font-weight: 500; }
.anb-nav__toggle:focus-visible { outline: 2px solid var(--anb-blue); outline-offset: 3px; border-radius: 4px; }

/* Desktop dropdown */
@media (min-width: 1025px) {
	.anb-nav__submenu {
		position: absolute;
		top: calc(100% + 18px);
		left: -16px;
		min-width: 248px;
		margin: 0;
		padding: 10px;
		list-style: none;
		background: #fff;
		border-radius: var(--anb-radius-lg);
		box-shadow: var(--anb-shadow-md);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity .2s var(--anb-ease), transform .2s var(--anb-ease), visibility .2s;
	}
	/* Hover bridge so the pointer can travel to the panel */
	.anb-nav__item--top.has-children::after {
		content: "";
		position: absolute;
		inset: 100% -16px auto -16px;
		height: 18px;
	}
	.anb-nav__item--top:hover > .anb-nav__submenu,
	.anb-nav__item--top.is-open > .anb-nav__submenu,
	.anb-nav__item--top:focus-within > .anb-nav__submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.anb-nav__item--sub > .anb-nav__link {
		display: flex;
		align-items: center;
		min-height: 44px;                 /* WCAG 2.5.5 target size */
		width: 100%;
		padding: 9px 14px;
		border-radius: 8px;
		white-space: normal;
		line-height: 1.45;
	}
	/* Background tint only -- the row still shows which item is under the
	   cursor, without recolouring the label. */
	.anb-nav__item--sub > .anb-nav__link:hover { background: var(--anb-sky-soft); }
	.anb-nav__cta-mobile { display: none; }
}

/* --- Burger ------------------------------------------------------------ */
.anb-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
}
.anb-burger span {
	display: block;
	height: 2px;
	background: var(--anb-ink);
	border-radius: 2px;
	transition: transform .25s var(--anb-ease), opacity .2s var(--anb-ease);
}
.anb-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.anb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.anb-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.anb-nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 190;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .25s var(--anb-ease);
}
.anb-nav-scrim.is-open { opacity: 1; }

/* --- Laptop tightening ------------------------------------------------- */
@media (max-width: 1200px) {
	.anb-nav__list { gap: 8px; }
	.anb-nav__link { font-size: 13px; }
	.anb-header__cta { padding: 10px 18px; font-size: 14px; }
	.anb-logo .anb-logo__crest { width: 34px; }
	.anb-logo .anb-logo__wordmark { width: 126px; }
	.anb-logo .anb-logo__sub { width: 96px; }
}

/* --- Tablet + mobile drawer -------------------------------------------- */
@media (max-width: 1024px) {
	.anb-burger { display: flex; }
	.anb-header__cta { display: none; }

	.anb-nav {
		position: fixed;
		top: 0; right: 0; bottom: 0;
		z-index: 195;
		width: min(360px, 86vw);
		display: block;
		padding: 88px 24px 40px;
		background: #fff;
		box-shadow: -8px 0 40px rgba(0, 0, 0, .12);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		transition: transform .3s var(--anb-ease);
	}
	.anb-nav.is-open { transform: translateX(0); }

	.anb-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

	.anb-nav__item--top {
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 1px solid var(--anb-line);
	}
	.anb-nav__link { flex: 1 1 auto; font-size: 16px; padding: 14px 0; }
	.anb-nav__toggle {
		width: 100%; min-height: 44px; justify-content: space-between;
		font-size: 1rem;
	}
	.anb-nav__item--top.is-open > .anb-nav__toggle .anb-nav__caret { transform: rotate(180deg); }

	.anb-nav__submenu {
		flex: 1 0 100%;
		margin: 0;
		padding: 0 0 8px 12px;
		list-style: none;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .3s var(--anb-ease);
	}
	.anb-nav__item--top.is-open > .anb-nav__submenu { grid-template-rows: 1fr; }
	.anb-nav__submenu > * { overflow: hidden; }
	.anb-nav__item--sub { border: 0; }
	/* These measured 39px tall, under the 44px WCAG 2.5.5 target size (and
	   Lighthouse's 48px). On a phone the whole menu is thumb-driven, so the
	   row gets real height rather than a bigger font. */
	.anb-nav__item--sub > .anb-nav__link {
		font-size: 14px; padding: 13px 0; min-height: 44px;
		display: flex; align-items: center; color: var(--anb-muted);
	}

	.anb-nav__cta-mobile { display: inline-flex; width: 100%; margin-top: 24px; }

	body.anb-nav-open { overflow: hidden; }
}

@media (max-width: 767px) {
	.anb-header__inner { padding: 14px var(--anb-gutter); }
	.anb-logo { gap: 7px; }
	.anb-logo .anb-logo__crest { width: 30px; }
	.anb-logo .anb-logo__wordmark { width: 108px; }
	.anb-logo .anb-logo__sub { width: 82px; }
}

/* -------------------------------------------------------------------------
   5. Footer
   Figma 655:358 — three columns, 1px #E6E6E6 rule above the bottom bar.
   ---------------------------------------------------------------------- */
.anb-footer {
	background: var(--anb-white);
	padding-top: clamp(48px, 5vw, 96px);
	font-size: var(--anb-fs-sm);
}

.anb-footer__grid {
	display: grid;
	grid-template-columns: 310px 1fr 293px;
	gap: 40px;
	align-items: start;
	padding-bottom: clamp(40px, 4vw, 72px);
}

.anb-footer__logo { display: inline-block; }

.anb-footer__blurb {
	margin: 14px 0 0;
	font-size: 1rem;
	line-height: 30px;
	color: var(--anb-muted);
	max-width: 295px;
}

.anb-socials { display: flex; gap: 15px; margin: 24px 0 0; padding: 0; list-style: none; }
.anb-socials__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 8px padding round a 24px icon gives a 42px box -- two pixels under the
	   44px WCAG 2.5.5 target. 10px clears it without changing the look. */
	padding: 10px;
	min-width: 44px;
	min-height: 44px;
	background: var(--anb-sky);
	border: 1px solid var(--anb-blue);
	border-radius: 23px;
	backdrop-filter: blur(5px);
	transition: background-color .2s var(--anb-ease), transform .2s var(--anb-ease);
}
.anb-socials__link:hover { background: var(--anb-green-light); transform: translateY(-2px); }
.anb-socials__link img { width: 24px; height: 24px; }

.anb-footer__heading {
	font-family: var(--anb-font-display);
	font-size: 20px;
	line-height: 1.2;
	color: var(--anb-black);
	margin: 0 0 24px;
}

.anb-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.anb-footer__list a,
.anb-contact-list a {
	color: var(--anb-muted);
	font-size: var(--anb-fs-sm);
	line-height: 1.5;
}
/* Footer links measured ~20px tall on a phone -- fine to read, too small to
   hit. Keyed to width rather than (pointer: coarse): the pointer media query
   is not reported consistently by emulated browsers, so auditing it is
   unreliable, and width is what actually correlates with thumb use here.
   The desktop footer keeps its tighter rhythm. */
@media (max-width: 900px) {
	.anb-footer__list a,
	.anb-contact-list a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
	.anb-footer__list { gap: 0; }
}
.anb-footer__list a:hover,
.anb-contact-list a:hover { color: var(--anb-blue); }

.anb-contact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 24px; }
.anb-contact-list li { display: flex; align-items: center; gap: 14px; }
.anb-contact-list li img { width: 24px; height: 24px; flex: 0 0 24px; }
.anb-contact-list__address { align-items: flex-start; }
.anb-contact-list address {
	font-style: normal;
	color: var(--anb-muted);
	font-size: var(--anb-fs-sm);
	line-height: 1.5;
}

.anb-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 30px 0;
	border-top: 1px solid var(--anb-line);
}
.anb-footer__copy {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--anb-green-dark);
	font-size: var(--anb-fs-sm);
}
.anb-footer__copy img { width: 16px; height: 16px; }
.anb-footer__legal { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.anb-footer__legal a { color: var(--anb-green-dark); font-size: var(--anb-fs-sm); }
.anb-footer__legal a:hover { color: var(--anb-blue); }

@media (max-width: 1024px) {
	.anb-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
	.anb-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.anb-footer__grid { grid-template-columns: 1fr; }
	.anb-footer__bar { flex-direction: column; align-items: flex-start; gap: 14px; }
	.anb-footer__legal { gap: 20px; }
}

/* -------------------------------------------------------------------------
   6. Elementor harmonisation
   Elementor Free ships its own container widths and h-tag styles; align
   them with the Figma grid so page sections inherit the same rhythm.
   ---------------------------------------------------------------------- */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--anb-container); }

.elementor-widget-heading .elementor-heading-title { font-family: var(--anb-font-display); }
.elementor-widget-text-editor,
.elementor-widget-button { font-family: var(--anb-font-body); }

/* Section wash helpers, applied as Elementor CSS classes */
.anb-bg-sky      { background-color: var(--anb-sky); }
.anb-bg-sky-soft { background-color: var(--anb-sky-soft); }
.anb-bg-white    { background-color: var(--anb-white); }
.anb-bg-soft     { background-color: var(--anb-white-soft); }
.anb-bg-green    { background-color: var(--anb-green-light); }

.anb-section { padding-block: var(--anb-section-y); }

/* Centred section heading pattern used across the site */
.anb-section-title .elementor-heading-title {
	font-family: var(--anb-font-display);
	font-size: var(--anb-fs-h2);
	color: var(--anb-black);
	text-align: center;
}

/* Card pattern (Why Parents Trust Us, Academic Framework, Achievements) */
.anb-card {
	background: #fff;
	border: 1px solid var(--anb-line);
	border-radius: var(--anb-radius-lg);
	padding: 24px;
	height: 100%;
	transition: transform .25s var(--anb-ease), box-shadow .25s var(--anb-ease);
}
.anb-card:hover { transform: translateY(-4px); box-shadow: var(--anb-shadow-md); }

/* Decorative doodle layer — absolutely positioned art from the design.
   Hidden below 1024 so it never causes horizontal overflow on phones. */
.anb-doodle {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
@media (max-width: 1024px) { .anb-doodle { display: none; } }

/* Keep Elementor content above the doodle layer */
.elementor-section > .elementor-container { position: relative; z-index: 1; }