/* ForeverAfter tree certificate — the keepsake for one planted tree.

   This is the half-sheet from the design system (8.5 x 5.5 in, landscape): warm
   paper for the dedication, a forest sidebar carrying the species facts and the
   QR back to this page. The PDF at templates/tree/certificate_pdf.html.twig is
   the same document laid out for Dompdf; keep the two in step.

   The palette is the certificate's own rather than the shared --ff-* tokens.
   The sheet is a printed artifact first: its greens are picked to sit on paper
   and to survive a home printer, and they are the same hex values the PDF uses,
   since Dompdf can't read custom properties.

   Sizing: every measurement below is the design's own pixel value scaled by
   --u, which is 1px when the sheet is at its full 816px width and shrinks with
   it. That keeps the sheet exactly proportional at any width down to the point
   where the sidebar stops being legible, where it stacks instead (see the
   narrow-screen block at the foot). */

.tc {
    --tc-paper: #f6f4ea;
    --tc-forest: #22402c;
    --tc-ink: #22301f;
    --tc-ink-name: #1d2b1f;
    --tc-ink-soft: #3c4a3d;
    --tc-ink-years: #4a5a4c;
    --tc-green: #3d6244;
    --tc-green-mid: #4a6b4f;
    --tc-green-pale: #9dc4a3;
    --tc-on-forest: #f2f6ee;
    --tc-on-forest-soft: #bcd4bd;
    --tc-rule: rgba(47, 93, 63, 0.28);

    /* The size container is this wrapper, not the sheet: an element cannot
       query its own size, and a self-declared container silently resolves cqw
       against the viewport instead — which scales the whole sheet wrong without
       looking broken. cqw measures a container's content box, so the max-width
       carries the gutters and leaves that box exactly 816px at full size, and
       exactly the sheet's width below it: 1cqw is 1% of the sheet either way. */
    container-type: inline-size;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 28px 24px;

    /* The sheet has the window to itself, so it is sized to fill it: as wide as
       1280px, but never so wide that its own height (the 816:528 proportion,
       hence x 0.647) plus the buttons under it would push the foot of the sheet
       off-screen. Someone opening a certificate should see all of it at once,
       without scrolling and without a scrollbar appearing.

       150px is the room kept below the sheet: 56 of vertical padding, 70 of
       button and its margin, and a little over for a button that wraps. The
       divisor is 0.68 rather than the proportion's own 0.647, so a sheet that
       does run deeper than 8.5 x 5.5 — a species with long common names, say —
       still lands inside the window instead of raising a scrollbar.

       The plain value first is the fallback for anything without dvh; the
       calc() then wins where it is supported. Both carry the 48px of gutter,
       because cqw measures the content box. */
    max-width: 1328px;
    max-width: calc(48px + min(1280px, (100dvh - 150px) / 0.68));

    /* Grid rather than flex to hold it in the middle of the window: grid rows
       size to their content, where flex items would let the sheet squash if it
       ever did outgrow the viewport. */
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    align-content: center;
}

/* The sheet has the page to itself, so the page gets a ground for it to sit
   on. This stylesheet loads on the certificate and nowhere else. */
body { background: var(--ff-surface-2) }

.tc-sheet {
    --u: 0.122549cqw; /* 100cqw / 816 — the design's px, made proportional */

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(268 * var(--u));
    /* The sheet's true proportion as a floor rather than a fixed ratio. At its
       size it is exactly 8.5 x 5.5 in; a name and a project name that are both
       unusually long push it taller instead of cropping the reference off the
       foot, which is the one thing on here that has to survive. (The PDF has no
       such give — it is one fixed page — so the type steps down far enough that
       the paper version always fits.) */
    min-height: calc(528 * var(--u));
    background: var(--tc-paper);
    color: var(--tc-ink);
    font-family: var(--ff-font-sans);
    border-radius: 3px;
    box-shadow: 0 18px 50px rgba(20, 34, 24, 0.15), 0 2px 6px rgba(20, 34, 24, 0.08);
    overflow: hidden;
}

/* ---- the paper side ---- */
.tc-main {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: calc(40 * var(--u)) calc(42 * var(--u));
}

/* Pushes the provenance to the foot of the sheet, so the masthead sits high
   and the two are separated by paper however short the project line runs. */
.tc-spacer { flex: 1 }

.tc-leaf {
    position: absolute;
    right: calc(-46 * var(--u));
    bottom: calc(-40 * var(--u));
    width: calc(250 * var(--u));
    height: calc(250 * var(--u));
    opacity: 0.07;
    pointer-events: none;
}

.tc-mark { display: flex; align-items: center; gap: calc(9 * var(--u)); position: relative; text-decoration: none }
.tc-mark:hover { opacity: 0.72 }
.tc-mark img { height: calc(22 * var(--u)); width: auto; display: block }
.tc-mark span { font-family: var(--ff-font-serif); font-size: calc(19 * var(--u)); letter-spacing: 0.01em; color: var(--tc-ink) }
.tc-mark b { font-weight: 600 }
.tc-mark i { font-style: normal; font-weight: 400; color: var(--tc-green-mid) }

.tc-eyebrow {
    position: relative;
    margin-top: calc(34 * var(--u));
    font-size: calc(12 * var(--u));
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tc-green);
}

.tc-name {
    position: relative;
    margin: calc(12 * var(--u)) 0 0;
    font-family: var(--ff-font-serif);
    font-weight: 500;
    font-size: calc(76 * var(--u));
    line-height: 1.02;
    letter-spacing: -0.012em;
    color: var(--tc-ink-name);
}

/* A long name steps down a size rather than wrapping. The panel is 464px of
   line at full size, which is about 12 characters of Cormorant at 76px — the
   steps below are each sized to hold their own length on one line. The
   controller picks the matching size for the PDF at exactly these lengths. */
.tc-name-long { font-size: calc(58 * var(--u)) }
.tc-name-longer { font-size: calc(46 * var(--u)); line-height: 1.06 }
.tc-name-longest { font-size: calc(38 * var(--u)); line-height: 1.1 }

.tc-years {
    position: relative;
    margin: calc(12 * var(--u)) 0 0;
    font-size: calc(16 * var(--u));
    letter-spacing: 0.13em;
    color: var(--tc-ink-years);
}

.tc-note {
    position: relative;
    margin: 0;
    max-width: 44ch;
    font-family: var(--ff-font-serif);
    font-style: italic;
    font-size: calc(21 * var(--u));
    line-height: 1.5;
    color: var(--tc-ink-soft);
}

.tc-rule { width: 100%; height: 1px; margin-top: calc(22 * var(--u)); background: var(--tc-rule) }

.tc-provenance { display: flex; gap: calc(44 * var(--u)); margin-top: calc(16 * var(--u)); position: relative }

/* ---- the forest side ---- */
.tc-aside {
    display: flex;
    flex-direction: column;
    /* 16 where the design has 20. Its sidebar holds four single-line facts;
       ours puts the common names under the binomial, and that one extra line
       takes the panel past the 528 the sheet is tall — which min-height then
       honours by making the whole sheet deeper than 8.5 x 5.5. Four points off
       each gap buys the line back and keeps the sheet its true proportion. */
    gap: calc(16 * var(--u));
    padding: calc(40 * var(--u)) calc(30 * var(--u));
    background: var(--tc-forest);
}

.tc-aside .tc-dl dt { color: var(--tc-green-pale) }
.tc-aside .tc-dl dd { color: var(--tc-on-forest) }

/* ---- the fact pairs, on either side ---- */
.tc-dl { display: grid; gap: calc(2 * var(--u)); margin: 0 }
.tc-dl dt {
    font-size: calc(12 * var(--u));
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tc-green);
}
.tc-dl dd {
    margin: 0;
    font-family: var(--ff-font-serif);
    font-size: calc(19 * var(--u));
    line-height: 1.25;
    color: var(--tc-ink);
}
.tc-dl .tc-species { font-style: italic }
.tc-dl .tc-common { display: block; font-style: normal; font-size: calc(14 * var(--u)); color: var(--tc-green-pale) }
.tc-ref { letter-spacing: 0.04em }
.tc-dl sub { font-size: 0.62em; line-height: 0; vertical-align: -0.18em }

/* ---- the code back to this page ---- */
.tc-qr {
    display: block;
    width: calc(104 * var(--u));
    height: calc(104 * var(--u));
    padding: calc(6 * var(--u));
    box-sizing: content-box;
    background: #fff;
    border-radius: 2px;
    image-rendering: pixelated;
}
.tc-qr-note { font-size: calc(11.5 * var(--u)); line-height: 1.45; letter-spacing: 0.01em; color: var(--tc-on-forest-soft) }

/* ---- page furniture, off the sheet ---- */
.tc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px }

/* Below this the sidebar's 12px labels would scale under about 8px, so the
   sheet stops being a sheet: it stacks, drops its fixed proportion, and takes
   plain type at a legible size. */
@media (max-width: 700px) {
    /* Stacked, the sheet is taller than the window, so there is nothing to
       centre and no reason to hold a viewport height. */
    .tc { padding: 28px 14px 60px; min-height: 0; display: block; max-width: none }

    .tc-sheet { grid-template-columns: 1fr; min-height: 0; border-radius: var(--ff-radius) }
    .tc-main { padding: 32px 24px 28px }
    .tc-aside { padding: 28px 24px; gap: 18px }
    .tc-spacer { display: none }

    .tc-mark img { height: 20px }
    .tc-mark span { font-size: 18px }
    .tc-mark { gap: 8px }
    .tc-eyebrow { font-size: 11px; margin-top: 26px }
    .tc-name, .tc-name-long, .tc-name-longer, .tc-name-longest { font-size: clamp(2rem, 10vw, 3.2rem); line-height: 1.05 }
    .tc-years { font-size: 14px; margin-top: 10px }
    .tc-note { font-size: 19px; margin-top: 26px; max-width: none }
    .tc-rule { margin-top: 20px }
    .tc-provenance { gap: 32px; flex-wrap: wrap; margin-top: 14px }
    .tc-dl dt { font-size: 11px }
    .tc-dl dd { font-size: 17px }
    .tc-dl .tc-common { font-size: 13px }
    .tc-qr { width: 96px; height: 96px; padding: 6px }
    .tc-qr-note { font-size: 12px }
}

/* Printing the web page directly should still produce the sheet, even though
   the PDF is the proper artefact — hence the exact paper size, and the colour
   adjustment that keeps the forest panel from being dropped as a background. */
@media print {
    @page { size: 8.5in 5.5in landscape; margin: 0 }

    body { background: #fff }
    .tc { padding: 0; max-width: none; min-height: 0; display: block }
    .tc-sheet { box-shadow: none; border-radius: 0; width: 8.5in; min-height: 5.5in }
    .tc-sheet, .tc-aside { -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .tc-actions { display: none }
}