/* =========================================
   Amaryllis — PRIVACY POLICY
   -----------------------------------------
   Built to Figma frame "Privacy page", 1440 x 5312.

   Every measurement below is that frame's, carried as a ratio of 1440
   so the page holds its proportions above the design width instead of
   stranding white space — the same approach the rest of the theme uses.

   Column arithmetic, straight from the frame:
       33  left inset
      429  sidebar card
       38  gap
      908  content card
       32  right inset
      ---
     1440
========================================= */

.privacy-page {
    /* Figma fills this frame #ffffff, not the #fdfdfd used elsewhere —
       the two cards are #fdfdfd and read as raised against it. */
    --pv-page: #ffffff;
    --pv-card: #fdfdfd;
    /* A 2.5px grey stroke on both cards. Heavier than anything else on
       the site; it is what the frame specifies. */
    --pv-border: #8a8a8a;
    --pv-border-w: 2.5px;
    --pv-radius: 20px;

    /* The frame sets its body copy and headings in pure black, where
       the rest of the site runs on #1f1f1f. Reproduced as drawn. */
    --pv-ink: #000000;
    --pv-nav-ink: #1f1f1f;

    background: var(--pv-page);
    padding-bottom: clamp(40px, 5vw, 80px);
}

/* =========================================
   1. BANNER
   Figma: Rectangle 106, x0 y100, 1440 x 548, image fill, full bleed.
========================================= */
.privacy-hero {
    position: relative;
    width: 100%;
    /* Figma draws this one 1440 x 548; it takes the shared banner
       height like every other page. */
    height: var(--hero-h);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #eef1f3;
}

.privacy-hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* The photograph is light on the left where the copy sits, so this is
   the faintest scrim on the site — just enough to hold the headline at
   a consistent contrast as the image scales. */
.privacy-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.20) 32%,
        rgba(255, 255, 255, 0) 56%
    );
    pointer-events: none;
}

/* Figma: the copy block starts at x=79 — 79/1440 = 5.49vw. */
.privacy-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 max(18px, 5.49vw);
}

/* Figma: 619 wide, three children on a 16px vertical gap. */
.privacy-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 619px;
}

/* Figma: Source Sans 3 w700 48 / lh 68.4 / #000000. */
.privacy-hero-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, calc(3.33vw - 2px), 44px);
    font-weight: 700;
    line-height: 1.425;
    color: var(--pv-ink);
}

/* Figma: Open Sans w600 24 / lh 32.7 / #000000. */
.privacy-hero-lead {
    font-family: var(--font-body);
    font-size: clamp(16px, calc(1.67vw - 2px), 20px);
    font-weight: 400;
    line-height: 1.36;
    color: var(--pv-ink);
}

/* Figma: Open Sans w400 20 / lh 27.2 / #000000, in the 619 column. */
.privacy-hero-sub {
    font-family: var(--font-body);
    font-size: clamp(14px, calc(1.39vw - 2px), 16px);
    font-weight: 400;
    line-height: 1.36;
    color: var(--pv-ink);
}

/* The same load-in the other page banners use. amaryllis-rise is
   declared in style.css, so this only schedules it. */
.has-js .privacy-hero-copy > * {
    opacity: 0;
    animation: amaryllis-rise 0.9s var(--ease) forwards;
}

.has-js .privacy-hero-copy > *:nth-child(1) { animation-delay: 0.15s; }
.has-js .privacy-hero-copy > *:nth-child(2) { animation-delay: 0.28s; }
.has-js .privacy-hero-copy > *:nth-child(3) { animation-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
    .has-js .privacy-hero-copy > * { opacity: 1; animation: none; }
}

/* =========================================
   2. THE TWO COLUMNS
   -----------------------------------------
   Figma: the banner ends at 648 and both cards start at 713 — 65px.
========================================= */
.privacy-body {
    display: grid;
    /* One column since the Quick Navigation sidebar was dropped. It was
       429fr 908fr; the document card now takes the row on its own and
       is capped so the measure does not run the full 1440. */
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    gap: 2.64vw;                       /* Figma: 38 of 1440 */
    align-items: start;
    padding: clamp(28px, 4.51vw, 65px) 2.22vw 0 2.29vw;   /* 32 right, 33 left */
}

/* Both cards share their shell. */
.privacy-nav,
.privacy-content {
    background: var(--pv-card);
    border: var(--pv-border-w) solid var(--pv-border);
    border-radius: var(--pv-radius);
}

/* =========================================
   3. QUICK NAVIGATION
   Figma: 429 x 699 card, inner block inset 35 left / 37 top,
   heading then a list on a 40px gap, rows 24px apart.
========================================= */
.privacy-nav {
    padding: clamp(20px, 2.57vw, 37px) clamp(18px, 2.43vw, 35px);
    /* Static in Figma, which draws it at the top of a 4,029px column —
       identical at rest, and reachable after that. */
    position: sticky;
    top: calc(var(--header-h) + 20px);
}

/* Figma: Source Sans 3 w700 32 / lh 45.6 / #1f1f1f. */
.privacy-nav h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, calc(2.22vw - 2px), 28px);
    font-weight: 700;
    line-height: 1.425;
    color: var(--pv-nav-ink);
    margin-bottom: clamp(22px, 2.78vw, 40px);   /* Figma: 40 */
}

.privacy-nav-list {
    display: flex;
    flex-direction: column;
    gap: 24px;                          /* Figma: Navigation itemSpacing */
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.privacy-nav-list a {
    display: flex;
    align-items: baseline;
    gap: 16px;                          /* Figma: row itemSpacing */
    color: var(--pv-nav-ink);
    transition: color 0.25s var(--ease-out);
}

.privacy-nav-list a:hover,
.privacy-nav-list a:focus-visible {
    color: var(--c-brand);
}

/* Figma: both the number and the label are Open Sans w700 24 / lh 32.7,
   the number in a fixed 28px column so the labels align. Semi-bold (600)
   rather than bold, on request.

   Every font-size on this page sits 2px under its old desktop value, also
   on request: the preferred and maximum sizes drop by 2px, the floors do
   not, so phones - already right - are unchanged. */
.privacy-nav-no,
.privacy-nav-label {
    font-family: var(--font-body);
    font-size: clamp(15px, calc(1.67vw - 2px), 20px);
    font-weight: 600;
    line-height: 1.36;
}

.privacy-nav-no {
    flex: 0 0 auto;
    min-width: 28px;
    font-variant-numeric: tabular-nums;
}

/* =========================================
   4. CONTENT
   Figma: 908-wide card, inner column 822 inset 46 left / 53 top,
   sections on a 20px gap, each section heading-to-body 12px.
========================================= */
.privacy-content {
    padding: clamp(22px, 3.68vw, 53px) clamp(18px, 3.19vw, 46px);
}

.privacy-section + .privacy-section {
    margin-top: 20px;                   /* Figma: container itemSpacing */
}

/* Anchor targets land clear of the sticky header. */
.privacy-section {
    scroll-margin-top: calc(var(--header-h) + 24px);
}

/* Figma: Source Sans 3 w600 32 / lh 45.6 / #000000. Note w600 here
   against the sidebar heading's w700 — the design distinguishes them. */
.privacy-section h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, calc(2.22vw - 2px), 28px);
    font-weight: 600;
    line-height: 1.425;
    color: var(--pv-ink);
    margin-bottom: 12px;                /* Figma: section itemSpacing */
}

/* Figma: Open Sans w400 20 / lh 27.2 / #000000 across the 822 column. */
.privacy-content p,
.privacy-content li,
.privacy-content address {
    font-family: var(--font-body);
    font-size: clamp(14px, calc(1.39vw - 2px), 16px);
    font-weight: 400;
    line-height: 1.36;
    color: var(--pv-ink);
    font-style: normal;
}

/* Figma leaves a blank line between paragraphs inside a section, which
   at lh 27.2 is what this margin reproduces. */
.privacy-content p + p,
.privacy-content ul + p,
.privacy-content ol + p,
.privacy-content address + p,
.privacy-content p + ul,
.privacy-content p + ol,
.privacy-content p + address {
    margin-top: 27px;
}

/* The theme resets list-style globally, so it has to be switched back
   on. Figma types a filled circle at the copy's own size, which is what
   `disc` renders — the marker is not reduced. */
.privacy-content ul,
.privacy-content ol {
    margin: 0;
    padding-left: 1.15em;
    list-style: disc;
}

.privacy-content ol { list-style: decimal; }

.privacy-content li { padding-left: 4px; }

.privacy-content li + li { margin-top: 0; }

/* =========================================
   5. RESPONSIVE
   Figma supplied a desktop frame only; these are reductions of it.
========================================= */
@media (max-width: 1024px) {
    /* Below this the sidebar is under 300px and the numbered labels
       wrap onto two lines each. It moves above the content and stops
       being sticky — a 10-item panel pinned to the top of a phone
       screen would cover most of what you scrolled to read. */
    .privacy-body {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-inline: max(16px, 2.29vw);
    }

    .privacy-nav {
        position: static;
    }

    .privacy-nav-list {
        /* Two columns of five, so the panel does not run the height of
           a screen before the policy starts. */
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 24px;
    }
}

@media (max-width: 576px) {
    /* --- Phone: the banner carries its HEADLINE only ---------------
     * Client request, and the same rule on every page that has a
     * banner. At 375px the frame is too shallow for a headline and a
     * standfirst both; the headline alone sits comfortably on the
     * photograph, which is where the client wants it. Everything here
     * is back from 577px up.
     * ----------------------------------------------------------- */
    .privacy-hero-lead,
    .privacy-hero-sub {
        display: none;
    }

    .privacy-hero {
        padding: 40px 0;
    }

    .privacy-nav-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .privacy-nav,
    .privacy-content {
        border-width: 1.5px;
        border-radius: 14px;
    }

    .privacy-content p + p,
    .privacy-content ul + p,
    .privacy-content ol + p,
    .privacy-content address + p,
    .privacy-content p + ul,
    .privacy-content p + ol,
    .privacy-content p + address {
        margin-top: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .privacy-nav-list a { transition: none; }
}

/* =========================================
   PLACEHOLDERS STILL TO BE FILLED
   -----------------------------------------
   The supplied policy copy carries the client's own markers —
   [INSERT GSTIN], [INSERT APPROVED CITY AND STATE] and so on. Printed
   plainly they read as a typo; highlighted they read as the to-do they
   are, and cannot reach a live page unnoticed.

   <mark> rather than a coloured <span>, because that is exactly what
   the element is for and a screen reader announces it.
========================================= */
.policy-todo {
    padding: 1px 6px;
    border-radius: 3px;
    background: #fff3cd;
    color: #6b4e00;
    font-weight: 700;
    white-space: nowrap;
}