/*
Theme Name: Hazrat-e-Fatima (SA) Child V5
Template: hello-elementor
Description: V5 — installs alongside the earlier versions rather than over them; switch between them under Appearance → Themes. Carries everything from V4: a chapter page can be given its own featured article, chosen on the article's own edit screen, and the site has its own not-found page. Custom child theme for the Lady Fatima Zahra (SA) editorial site. Header, footer and the Home / Category / Article shells live here; every designed section is an Elementor widget shipped in the "Fatima Zahra Elementor Widgets" plugin, so pages are assembled in Elementor and content stays driven by real articles.
Version: 1.15.0-v5
Text Domain: hazrat-e-fatima
*/

/* ==========================================================================
   DESIGN TOKENS
   Every colour, font, size and spacing value used anywhere in this theme
   is defined once here and referenced everywhere else with var(). Do not
   hard-code a colour or a size outside of this block.
   ========================================================================== */
:root {

  /* ---- Color: named palette (from Figma global styles) ---- */
  --color-white: #ffffff;
  --color-deep-plum: #3c1a33;
  --color-royal-mauve: #a84574;
  --color-soft-gold: #e48e52;
  --color-dove-taupe: #fddcc6;
  --color-gray-1: #302e2f;
  --color-gray-2: #5c545a;
  --color-gray-3: #aa9da7;
  --color-gray-4: #f8ece1;
  --color-dark: #120e11;

  /* ---- Color: semantic roles ---- */
  --color-heading: var(--color-deep-plum);
  --color-body-on-light: var(--color-gray-1);
  --color-body-muted: var(--color-gray-2);
  --color-body-on-dark: var(--color-gray-3);
  --color-accent: var(--color-royal-mauve);
  --color-eyebrow: var(--color-soft-gold);
  --color-divider: var(--color-gray-4);
  --color-surface: var(--color-white);
  --color-surface-dark: var(--color-dark);

  /* ---- Color: gradients ---- */
  --gradient-accent-text: linear-gradient(90deg, #be3979 0%, #e48e52 100%);
  /* The button's gradient is built from its two stops rather than written as a
     finished image, because a gradient cannot be transitioned but a colour can.
     See the @property block in components.css. */
  --color-plum-deep: #7c2350;
  --gradient-button: linear-gradient(90deg, #7c2350 0%, #a84574 100%);
  --gradient-soft-card: linear-gradient(135deg, #feeff1 0%, #ffe4d0 100%);
  --gradient-hero-vignette: radial-gradient(circle at 50% 35%, rgba(162, 63, 63, 0) 59%, #d02678 89%);
  --gradient-hero-fade: radial-gradient(circle at 50% 35%, #ffffff 15%, rgba(255, 255, 255, 0) 93%);

  /* The sky behind the top of the article page, the category page and the
     clouds section — three layers, read bottom-up:

       1. the colour, laid along the horizontal: mauve at the left, a warm
          bloom left of centre, blush, then periwinkle at the right
       2. white poured down over it, so the colour is gone by 78% of the way
          down and the page below it is plain
       3. the warm bloom the light source puts into the upper left of centre

     Written as a gradient rather than shipped as a picture. It was a
     photograph once; now that it is a flat wash there is nothing a file can do
     that the browser cannot do better — the browser draws it at whatever
     resolution the screen actually has, so it never softens on a retina or 4K
     display the way a 1920px file does, and it costs no request. */
  --gradient-sky: radial-gradient(62% 55% at 32% 24%,
      rgba(255, 250, 242, 0.75) 0%,
      rgba(255, 250, 242, 0.633) 25%,
      rgba(255, 250, 242, 0.375) 50%,
      rgba(255, 250, 242, 0.117) 75%,
      rgba(255, 250, 242, 0) 100%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.156) 19.5%,
      rgba(255, 255, 255, 0.5) 39%,
      rgba(255, 255, 255, 0.844) 58.5%,
      #ffffff 78%),
    linear-gradient(to right,
      #e2bac3 0%,
      #f2d3cf 12%,
      #fdf0e2 30%,
      #fefaf7 46%,
      #f0d9dd 62%,
      #d3c6dc 80%,
      #a5a7cc 100%);

  /* The picture the wash replaced was 1920 × 1021, drawn at the full width of
     the page. A gradient has no size of its own, so the band it fills is given
     that same proportion of the viewport width — otherwise it would stretch to
     whatever height the article happened to be. */
  --gradient-sky-height: 53.18vw;

  /* On a phone that same proportion comes to barely 200px — far shorter than
     the title block standing in front of it — so the band gets a height of its
     own instead. The width is deliberately wider than the screen: squeezed into
     390px the full mauve-to-periwinkle sweep turns garish, so the tile is laid
     out wider than the viewport and centred, and only its calmer middle shows. */
  --gradient-sky-height-mobile: 128vw;
  --gradient-sky-width-mobile: 170%;

  /* ---- Fonts ----
     Point 3 (client instruction): Inter everywhere Poppins would otherwise
     have gone. "TBJ Siromi lite" file has not been supplied yet — fallback
     serif stack is in place until it is; swap --font-heading only. */
  --font-heading: "TBJ Siromi lite", "Playfair Display", Georgia, serif;
  --font-editorial: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-arabic: "AL Quran Ali", "Cormorant Garamond", serif;

  /* ---- Type scale: size / line-height / letter-spacing / weight ----
     Values are exact figures pulled from the Figma file's named text
     styles (Display, H1-H3, Body, etc.) at the 1920px reference width. */
  --text-display-size: 4.4rem;      /* 85px  desktop */
  --text-display-lh: 1.1;
  --text-display-ls: -0.02em;
  --text-display-weight: 400;

  --text-h1-size: 3.125rem;         /* 60px */
  --text-h1-lh: 1.2;
  --text-h1-ls: -0.01em;
  --text-h1-weight: 400;

  --text-h2-size: 2.6rem;           /* 50px */
  --text-h2-lh: 1.2;
  --text-h2-ls: -0.01em;
  --text-h2-weight: 400;

  --text-h3-size: 2.08rem;          /* 40px */
  --text-h3-lh: 1.3;
  --text-h3-ls: 0;
  --text-h3-weight: 400;

  --text-h4-size: 1.5rem;           /* 29px — not used on Home; confirm exact spec when building Article page */
  --text-h4-lh: 1.35;
  --text-h4-ls: 0;
  --text-h4-weight: 500;

  --text-quote-size: 3.65rem;       /* 70px — large slider quote */
  --text-quote-lh: 1.3;
  --text-quote-ls: -0.01em;
  --text-quote-weight: 600;

  --text-testimonial-size: 2.34rem; /* 45px */
  --text-testimonial-lh: 1.3;
  --text-testimonial-ls: -0.01em;
  --text-testimonial-weight: 600;

  --text-attribution-size: 1.3rem;  /* 25px */
  --text-attribution-lh: 1.7;
  --text-attribution-weight: 500;

  --text-category-size: 1.15rem;    /* 22px */
  --text-category-lh: 1.5;
  --text-category-ls: -0.01em;
  --text-category-weight: 600;

  --text-eyebrow-size: 1.67rem;     /* 32px — "NEW ARTICLES" / "HER NAMES & TITLES" kicker */
  --text-eyebrow-lh: 1.3;
  --text-eyebrow-ls: 0.1em;
  --text-eyebrow-weight: 400;

  --text-tag-size: 0.688rem;        /* 11px — "CHAPTER 01" nav labels */
  --text-tag-lh: 1.3;
  --text-tag-ls: 0.04em;
  --text-tag-weight: 500;

  /* 16px on the 1920 canvas, easing down to 13px so the six chapter links
     stay on one line on an ordinary laptop instead of wrapping. */
  --text-nav-size: clamp(0.8125rem, 0.84vw, 1rem);
  --text-nav-lh: 1.3;
  --text-nav-weight: 500;

  --text-body-lg-size: 1.25rem;     /* 20px */
  --text-body-lg-lh: 1.6;
  --text-body-lg-weight: 400;

  /* ---- Plain page copy ----
     A page such as Terms or About is read like an article but carries none of
     its furniture, so its headings step down from the article scale. */
  --page-h2-size: clamp(1.5rem, 2.2vw, 2.08rem);
  --page-h3-size: clamp(1.25rem, 1.6vw, 1.5rem);

  --text-body-size: 1.0625rem;      /* 17px */
  --text-body-lh: 1.6;
  --text-body-weight: 400;

  --text-small-size: 0.875rem;      /* 14px */
  --text-small-lh: 1.6;
  --text-small-weight: 500;

  --text-button-size: 1rem;         /* 16px */
  --text-button-lh: 1.5;
  --text-button-weight: 600;

  --text-arabic-size: 1.5rem;       /* 24px */
  --text-arabic-lh: 1.2;
  --text-arabic-ls: -0.01em;

  /* ---- Layout / grid ----
     Figma canvas: 1920px, 120px side margins, 12 columns, 30px gutter.

     Prefixed `--hef-` on purpose — keep these names out of Elementor's.
     Elementor calls its own container variables `--container-max-width` and
     `--container-padding*`: the Kit writes `.e-con { --container-max-width }`
     from Site Settings → Layout → Content Width, and its atomic elements reset
     the padding names. CSS variables inherit, so under the old unprefixed names
     any .container sitting inside an Elementor container quietly took
     Elementor's value instead of these. That is what pulled the homepage hero
     out of line with the header on a site whose Content Width is set, while a
     site where it is not looked fine. */
  --hef-container-max-width: 1680px;
  /* 120px on the 1920 canvas, easing back to 64px on smaller desktops so the
     gutters stay in proportion rather than eating the content column. */
  --hef-container-padding: clamp(4rem, 6.25vw, 7.5rem);
  --hef-container-padding-tablet: 64px;
  --hef-container-padding-mobile: 20px;
  --gap-card: 1.875rem;   /* 30px */
  --gap-section: 6rem;    /* section-to-section vertical rhythm, desktop */

  /* ---- Radius ---- */
  --radius-card: 2rem;              /* 32px */
  --radius-nav-link: 0.75rem;       /* 12px */
  --radius-circle: 9999px;
  --radius-button: 20px 30px 30px 20px; /* exact asymmetric shape from Figma — not a uniform pill */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --marquee-duration: 60s;

  /* ---- Breakpoints (for reference in comments; media queries hard-code
     the px value since custom properties cannot be used inside @media) ----
     desktop: > 1024px | tablet: 768–1024px | mobile: < 768px */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --marquee-duration: 0s;
  }
}