/*
 * Design tokens — Easy Quran Classes.
 * Do not duplicate these values inline; reference the custom properties so
 * a palette/type change happens once.
 */

:root {
	/* Color */
	--eqc-green-900: #143126;
	--eqc-green-800: #1B3A2D;
	--eqc-green-700: #24503B;
	--eqc-brand-green: #006B3D;

	/* --eqc-gold-700 is the only gold dark enough to carry text on cream at
	   any size (6.3:1 on --eqc-cream-100; --eqc-gold-600 is 3.2:1, which
	   only clears AA as large text). Low-contrast gold should not carry
	   text on cream, so this extends the existing ramp rather than
	   introducing a new hue. */
	--eqc-gold-700: #6F551C;
	--eqc-gold-600: #A98235;
	--eqc-gold-500: #B9974C;
	--eqc-gold-300: #D9C48D;
	/* Channel triples for the same three golds. Ornaments carry their tint in
	   the paint's own alpha rather than element `opacity`, so a `drop-shadow`
	   on them renders at full strength — and an alpha colour cannot be
	   written as `var(--eqc-gold-500)`. Without these tokens the alpha
	   variants would be hand-typed as literals and can drift off the ramp.
	   Keep each triple in step with the hex above it. */
	--eqc-gold-600-rgb: 169 130 53;
	--eqc-gold-500-rgb: 185 151 76;
	--eqc-gold-300-rgb: 217 196 141;
	/* Two creams the ornament/section work needs by name rather than as a
	   literal: the pricing unit pill and the reviews band. */
	--eqc-cream-200: #F0E7D3;
	--eqc-cream-150: #F1EBDF;

	--eqc-bronze-700: #7A432A;
	--eqc-bronze-600: #925234;

	--eqc-cream-100: #F7F3EC;
	--eqc-cream-50: #FBF8F2;
	--eqc-surface: #FFFDF9;
	--eqc-white: #FFFFFF;

	/* WhatsApp's own brand green, used by the WhatsApp buttons so the channel
	   is recognisable on sight. Note the label on it is dark, not white:
	   white measures 1.98:1 here and fails WCAG 1.4.3 at any size. */
	--eqc-whatsapp-green: #25D366;
	--eqc-whatsapp-green-dark: #1EBE5A;

	--eqc-heading: #14231B;
	--eqc-text: #40483F;
	/* Darkened from the original #737A72 sample: that value fails WCAG AA
	   (3.99:1 on --eqc-cream-100, needs 4.5:1) — this passes with margin
	   on every background it's actually used against (5.19-6.04:1). */
	--eqc-muted: #616861;
	--eqc-border: #E5DCCB;
	--eqc-border-strong: #D4C5A7;
	/* The one red on the site: form validation errors. Deep rather than
	   bright so it sits with the cream and bronze instead of shouting over
	   them, and dark enough to stay readable on the cream surfaces it
	   appears on (7.4:1 on --eqc-cream-50). */
	--eqc-danger: #9B2226;

	--eqc-success: #2F6B4A;
	--eqc-error: #9F3B32;

	/* Typography */
	--eqc-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--eqc-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--eqc-font-arabic: 'Noto Naskh Arabic', 'Traditional Arabic', serif;

	/* ------------------------------------------------------------------
	 * THE REFERENCE UNIT
	 *
	 * The reference design is proportional: every dimension in the reference
	 * mockups is a fixed fraction of the viewport, not a fixed pixel size. So
	 * one unit here == one pixel on the reference SCREEN, and any measurement
	 * taken off a reference image is transcribed as
	 * `calc(<measured px> * var(--eqc-u))`.
	 *
	 * THE CANVAS IS 1307. Every measured value in this theme is a native
	 * pixel on the homepage reference's 1307px canvas -- --eqc-content-max
	 * is 1119u, the teachers split is 268u + 51u + 800u, the pricing
	 * benefits strip is 1119u -- so the unit has to stay on that canvas.
	 * Rebasing it to 1600 without rescaling all 82 horizontal transcriptions
	 * shrinks every section to 69.9% of the viewport, leaving 250px of dead
	 * margin on each side.
	 *
	 * The content column is anchored on the one reference that carries both
	 * the header bar and a content-width element on a single canvas: the
	 * homepage reference's bar is 1230/1307 = 94.1% and its hero content
	 * 1119/1307 = 85.6%, a content:chrome ratio of 0.910. The section
	 * references read 91-94.5% at face value, but they are crops at their
	 * own zoom levels and their fractions are not comparable.
	 *
	 * 0.07651vw is 100/1307. At 1307px wide -> 1.0; at 1600 -> 1.224; at
	 * 1920 -> 1.469; at 2112 -> 1.616 and held; at 915 and below -> the
	 * 0.70 floor.
	 *
	 * The floor and ceiling are the two places this design is NOT the
	 * reference, and both are deliberate: without a floor the design would
	 * collapse on a phone, and without a ceiling a 2560px display would read
	 * as zoomed in. The floor is held at its previous value so phone
	 * geometry does not move; it simply stops binding at 915px instead of
	 * 1120px.
	 *
	 * This unit governs LAYOUT ONLY. Type has its own compressed scale below:
	 * a heading and a caption cannot share one linear multiplier -- see the
	 * type block for why.
	 * ------------------------------------------------------------------ */
	--eqc-u: clamp(0.70px, 0.07651vw, 1.616px);

	/* ------------------------------------------------------------------
	 * TYPE SCALE — compressed, and floored at every width.
	 *
	 * Type does NOT ride the layout unit linearly in one shared step: each
	 * role gets its own clamp so a caption can be floored for legibility
	 * without dragging a heading down with it.
	 *
	 * The heading sizes here are MEASURED, one per section, not derived from
	 * a ratio: About 70.5u, Courses 60u, Pricing 51u, Testimonials 48.4u and
	 * Blog 46.1u (both bold sans), Teachers 40.6u. An earlier pass collapsed
	 * all six onto one token and compressed it to reach a 2.5-3:1
	 * heading:body ratio, which was an aesthetic rule imposed over the
	 * reference: measured on the pricing reference, the reference design
	 * sets a 51u heading over a 12.4u list, i.e. 4.1:1. Section height is
	 * recovered from SPACING, not by shrinking the headings.
	 *
	 * Every role is clamp(floor, unit-based, ceiling):
	 *   - the floor guarantees legibility at ANY width, continuously. This
	 *     replaces a fixed `@media (max-width:1100px)` floor block, which
	 *     left a 6px discontinuity at exactly 1100px (captions jumped
	 *     9.8px -> 14.0px across one pixel of viewport width) and gave the
	 *     entire 1101-1600 band — 1366, 1440, 1536, mainstream laptops — no
	 *     floor at all.
	 *   - the ceiling stops headings ballooning on wide displays.
	 *
	 * The middle term is px on the 1307 reference canvas, where --eqc-u is
	 * 1.0; multiply by 1.224 for the rendered size at a 1600px viewport.
	 *
	 * NOTHING may set font-size as a bare calc() on --eqc-u. 33 rules in
	 * components.css used to, which is how ten roles reached 7.6-9.4px on a
	 * 390px phone while every contrast check passed — contrast is not
	 * legibility. Use these tokens so a size cannot escape its floor.
	 * ------------------------------------------------------------------ */
	/* Display: the About section's heading, the largest type on the site. */
	--eqc-fs-display-xl: clamp(34px, calc(70.5 * var(--eqc-u)), 114px);
	--eqc-fs-h1: clamp(32px, calc(58 * var(--eqc-u)), 94px);      /* hero H1 */
	--eqc-fs-h2: clamp(28px, calc(51 * var(--eqc-u)), 82px);      /* section headings */
	/* Section headings that sit in a narrower column read smaller in the
	   references; this is the measured relationship, not a second guess. */
	/* The courses reference sets its heading larger than any other section;
	   the testimonial and blog headings are bold SANS and smaller (48.4u
	   and 46.1u measured -- one token at 47u, the 3% spread is inside the
	   measurement error of both). */
	--eqc-fs-h2-courses: clamp(30px, calc(60 * var(--eqc-u)), 97px);
	--eqc-fs-h2-sans: clamp(26px, calc(47 * var(--eqc-u)), 76px);
	--eqc-fs-h2-compact: clamp(24px, calc(39 * var(--eqc-u)), 63px);
	--eqc-fs-h3: clamp(19px, calc(17.97 * var(--eqc-u)), 26px);      /* course/blog card title */
	--eqc-fs-h4: clamp(17px, calc(14.7 * var(--eqc-u)), 20px);
	/* The course card title is DM Serif and measurably LARGER than the blog
	   card title, which is bold sans -- 24.6u against 17.97u on the courses
	   and blog references respectively. They shared --eqc-fs-h3 and so could not
	   both be right; the blog title was, so the course title gets its own.
	   The scalloped index badge carries the same relationship: 49u across
	   with a 26.4u numeral, where the numeral used to be a fixed 1.1rem and
	   did not scale with the design at all. */
	--eqc-fs-course-title: clamp(20px, calc(24.6 * var(--eqc-u)), 40px);
	--eqc-fs-card-index: clamp(16px, calc(26.4 * var(--eqc-u)), 43px);
	--eqc-fs-body-l: clamp(17px, calc(16.5 * var(--eqc-u)), 27px); /* hero + about body */
	--eqc-fs-body: clamp(15px, calc(12.66 * var(--eqc-u)), 17px);   /* tile titles, card body */
	--eqc-fs-small: clamp(14px, calc(11.84 * var(--eqc-u)), 16px);  /* captions, meta rows */
	--eqc-fs-xsmall: clamp(13px, calc(10.62 * var(--eqc-u)), 14px);   /* smallest label role */
	/* Uppercase, letterspaced section label. Caps read larger than their
	   point size, so this sits below body while looking like a peer, sized
	   for a consistent, slightly larger presence across section tags. */
	--eqc-fs-eyebrow: clamp(13px, calc(12.2 * var(--eqc-u)), 16px);
	--eqc-fs-button: clamp(15px, calc(12.25 * var(--eqc-u)), 17px);
	/* The large serif figure on a pricing card — a display role, not body. */
	--eqc-fs-price: clamp(30px, calc(31.04 * var(--eqc-u)), 44px);

	/* Layout
	 * --eqc-content-max is measured, not chosen. On the homepage reference's
	 * 1307px canvas the trust panel — a content-width element — spans
	 * x109–1212, i.e. 84.39% of the canvas, stable across rows 790/860/890.
	 * The header bar on that same canvas is 94.3%, so content is 0.895 x
	 * the chrome width. Against the chrome's own --eqc-chrome-max of 1810px
	 * that is a 1620px content column; .eqc-container is border-box with
	 * --eqc-gutter padding inside. The hero's own bounds are the tighter
	 * check and give 1644px (H1 left edge x105 to the arch's outer right
	 * edge x1224 = 1119 of 1307), so the token carries 1644 + 2x32 = 1708px;
	 * the 24px against the trust panel's 1620 is the panel's own inset.
	 * Only ratios measured WITHIN one reference file are meaningful — the
	 * section references are crops at different zoom levels. */
	/* The content column is a PROPORTION, not a px cap. Measured on the
	   homepage reference: the hero runs from the H1's left edge x105 to the
	   arch's outer right edge x1224 = 1119 of 1307 = 85.6%. As a px cap it
	   was correct only at 1920 and ran near full-bleed at 1307/1440. */
	--eqc-content-w: 85.6%;
	--eqc-content-max: calc(1119 * var(--eqc-u));
	--eqc-content-narrow: calc(558 * var(--eqc-u));
	/* Only consumer is the blog single-post body (single.php); a prose reading
	   column is a typographic concern, not one of the reference mockup's
	   decorative proportions, so it isn't tied to --eqc-u. A narrower cap
	   sits squeezed against the page's much wider chrome, visibly narrower
	   than the hero image and CTA banner above/below it, which run to the
	   page's full content column. This clamp ties the column to that width
	   instead of floating narrow in the middle of it, while keeping a
	   sensible cap so lines don't run past a comfortable reading measure. */
	--eqc-text-max: clamp(20rem, 72vw, 58rem);

	/* Site chrome — header bar and footer panels.
	 * These deliberately do NOT use --eqc-content-max. In the design
	 * reference the header bar and the footer panels are near-full-bleed
	 * frames — 1232/1307 of the homepage reference canvas and 1403/1489 of
	 * the footer reference, i.e. ~94% in both — while the page content
	 * inside them stays on the narrower content column.
	 * The bar height, mark size and panel radius are the same proportion
	 * of the canvas scaled fluidly, so the chrome keeps the reference's
	 * generous desktop presence without becoming oversized on a phone. */
	--eqc-chrome-width: 94%;
	--eqc-chrome-max: 1810px;
	/* The header is sticky, so its height is subtracted from EVERY screen for
	   the whole visit. At 1600 it was 197px at rest and 108px scrolled — 22%
	   of a 900px laptop screen for a nav whose text is 34px tall. Now ~120
	   at rest and ~76 scrolled, which hands ~32px of every screen back to
	   the content. The logo mark comes down with it so it still fits the bar. */
	--eqc-header-h: clamp(56px, 30px + 3.5vw, 96px);
	--eqc-logo-mark-size: clamp(36px, 18px + 2.9vw, 72px);
	--eqc-radius-chrome: clamp(18px, 0.8rem + 1.1vw, 34px);

	--eqc-section-space: calc(48 * var(--eqc-u));
	--eqc-gutter: calc(22 * var(--eqc-u));
	--eqc-grid-gap: calc(22 * var(--eqc-u));   /* feature-card gap, measured */
	--eqc-stack-gap: calc(14 * var(--eqc-u));

	/* Hero component boxes, measured on the homepage reference (native px):
	   eyebrow pill 251x44, feature card 126x58 gap 22, buttons 218x58 and
	   235x56 gap 13, avatars 40 diameter on a 36.75 pitch (8% overlap),
	   trust panel 1104x178 at x109. */
	--eqc-control-h: calc(58 * var(--eqc-u));
	--eqc-eyebrow-h: calc(44 * var(--eqc-u));
	--eqc-card-h: calc(58 * var(--eqc-u));
	--eqc-avatar: calc(40 * var(--eqc-u));
	--eqc-avatar-overlap: calc(-3.25 * var(--eqc-u));
	--eqc-icon-sm: calc(15 * var(--eqc-u));
	--eqc-icon-md: calc(21 * var(--eqc-u));
	--eqc-icon-lg: calc(30 * var(--eqc-u));

	/* Radius */
	--eqc-radius-control: calc(8 * var(--eqc-u));
	--eqc-radius-card: calc(12 * var(--eqc-u));
	--eqc-radius-panel: calc(19 * var(--eqc-u));
	--eqc-radius-media: calc(22 * var(--eqc-u));
	--eqc-radius-pill: 999px;

	/* Elevation */
	--eqc-shadow-card: 0 10px 28px rgba(32, 46, 37, 0.06);
	--eqc-shadow-card-hover: 0 16px 36px rgba(32, 46, 37, 0.10);
	/* Green back-plate (cards, tag cards, tiles). The two controls; the shadow
	   itself is assembled on each plated element in components.css, so
	   either can be overridden for one component as well as site-wide. */
	--eqc-plate-offset: 4px;
	--eqc-plate-color: var(--eqc-green-800);

	/* Layering. The rest of the chrome sets its z-index literally in
	   shell.css: header 100, hero arch 120, drawer scrim 150, drawer 151.
	   The floating call action deliberately sits under all of them. */
	--eqc-z-contact: 90;

	/* Motion */
	--eqc-motion-fast: 160ms;
	--eqc-motion-base: 260ms;
	--eqc-motion-reveal: 520ms;
	--eqc-motion-slow: 800ms;
	--eqc-motion-stagger: 70ms;
	--eqc-ease-standard: cubic-bezier(.22, 1, .36, 1);
	--eqc-ease-soft: cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 640px) {
	/* A thinner plate on phones, where cards are small. */
	:root { --eqc-plate-offset: 2px; }
}

/* ----------------------------------------------------------------------
 * Control minimums.
 *
 * This used to be an `@media (max-width: 1100px)` block holding both type
 * floors and control floors. Both are now expressed in the values
 * themselves — clamp() for type, max() for boxes — because a floor tied to a
 * breakpoint only holds on one side of it: the type floors left a 6px
 * discontinuity at exactly 1100px and no floor at all from 1101-1600, and
 * the button floor left every button at 40.6-44px across 1101-1213px.
 *
 * A 44px tap target and a legible font size are floors at EVERY width.
 * ---------------------------------------------------------------------- */
.eqc-hero-trust .eqc-avatar-stack img { --_avatar: max(38px, calc(40 * var(--eqc-u))); }
.eqc-chip--card { min-height: max(52px, calc(58 * var(--eqc-u))); }