/*
 * RVYield stylesheet. Implements docs/RVYield_Site_Design_Spec.md revision 3.
 *
 * The idea in one line: it should look like a schedule, not a brochure.
 * The product is a calendar of events with numbers attached, and the
 * nearest things in a host's actual world are event programs, campground
 * signage and equipment documentation -- typographic, tabular,
 * unglamorous. That is cheaper to build well than the RV-lifestyle look
 * every competitor already occupies, and it does not fall apart when a
 * photo slot is empty, which most of them are until Kellen shoots them.
 *
 * TWO DENSITIES, ON PURPOSE. Marketing pages are airy. The portal is the
 * opposite: tight rows, tabular figures, information above the fold. A
 * paying host wants a readout, not a pitch. Do not let the marketing
 * styles leak into .portal.
 */

/* ---- Tokens ------------------------------------------------------- */

:root {
    /* Pine is the dominant brand colour, not an accent. */
    --pine: #1E3A2E;
    --pine-lift: #2a4f3e;

    /* Signal amber is borrowed from event and highway signage and is
       reserved EXCLUSIVELY for event markers and dates. If amber appears
       on something that is not about an event, it has been misused.
       Rule: at most two amber elements per screenful. */
    --amber: #A86400;

    /* Neutrals carry a slight green bias so they sit with the pine
       rather than against it. Not pure grey, not cream. */
    --paper: #F5F5F1;
    --panel: #EBEBE4;
    --ink: #17201B;
    --ink-soft: #4E5A52;
    --rule: #D6D6CB;

    --warn-bg: #FBF1DE;
    --warn-line: var(--amber);

    /* 1.25 ratio. Hero sits at 41-52 desktop, 33 on a phone. */
    --t-sm: 0.94rem;   /* 15px  fine print */
    --t-base: 1.0625rem; /* 17px */
    --t-md: 1.3125rem; /* 21px */
    --t-lg: 1.625rem;  /* 26px */
    --t-xl: 2.0625rem; /* 33px */
    --t-2xl: 2.5625rem;/* 41px */
    --t-3xl: 3.25rem;  /* 52px */

    /* 8px base unit. */
    --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
    --s6: 48px; --s7: 56px; --s12: 96px;

    /* Prose measure. Text never goes full-bleed; photos always do. */
    --measure: 680px;

    /* The only shadow on the site, on the one thing that should look
       liftable. */
    --lift: 0 2px 10px rgba(23, 32, 27, 0.09);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: var(--t-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Wherever a digit sits above another digit. */
table, .mono, .band, .report { font-variant-numeric: tabular-nums; }

h1, h2, h3 {
    font-family: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--pine);
    margin: 0 0 var(--s3);
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p { margin: 0 0 var(--s3); max-width: var(--measure); }
a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 2px; }
strong { font-weight: 600; }

.mono {
    font-family: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- Chrome ------------------------------------------------------- */

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}
.brand {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--t-md);
    color: var(--pine);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.site-header nav { display: flex; gap: var(--s3); flex-wrap: wrap; }
.site-header nav a { font-size: var(--t-sm); text-decoration: none; color: var(--ink-soft); }
.site-header nav a:hover { color: var(--pine); text-decoration: underline; }

.container { max-width: var(--measure); margin: 0 auto; padding: var(--s6) var(--s3) var(--s12); }

.site-footer {
    border-top: 1px solid var(--rule);
    padding: var(--s6) var(--s3);
    color: var(--ink-soft);
    font-size: var(--t-sm);
    text-align: center;
}
.footer-links { display: flex; gap: var(--s3); justify-content: center; margin-bottom: var(--s2); }

/* ---- Landing rhythm ------------------------------------------------
   Prose on paper capped at the measure, then a full-bleed band edge to
   edge, then prose again. Three alternations is the entire layout
   system. ------------------------------------------------------------ */

.band { padding: var(--s12) var(--s3); }
.band-inner { max-width: var(--measure); margin: 0 auto; }
.band--panel { background: var(--panel); border-block: 1px solid var(--rule); }
.band--pine { background: var(--pine); color: var(--paper); }
.band--pine h1, .band--pine h2 { color: var(--paper); }
.band--pine p { color: #DCE4DE; }
.band--pine a { color: var(--paper); }

/* A photo slot with no photograph in it renders NOTHING.
 *
 * The spec says ship the slot empty rather than filled with stock, and
 * that is still right. But an empty slot that announces itself -- a
 * dashed box captioned "Photo A" -- tells every visitor the site is
 * unfinished, and one of those visitors is whoever reviews the domain
 * before payments are switched on. A text-led page with no image reads
 * as a design choice; a labelled gap reads as a building site.
 *
 * The shot each slot wants is recorded as a comment in the template, so
 * nothing is lost. Give .photo-slot a background-image and it appears. */
.photo-slot:not([style*="background-image"]) { display: none; }

.photo-slot {
    background:
        repeating-linear-gradient(
            135deg, transparent, transparent 11px,
            rgba(30, 58, 46, 0.045) 11px, rgba(30, 58, 46, 0.045) 22px
        ), var(--panel);
    border: 1px solid var(--rule);
    min-height: 220px;
    display: flex;
    align-items: flex-end;
    padding: var(--s2);
    color: var(--ink-soft);
    font-size: var(--t-sm);
}
.photo-slot--hero { min-height: 320px; }

/* A slot that HAS a photograph stops being a placeholder: it loses the
   hatch, the border and the padding, and takes the picture's own shape
   rather than a fixed height that would crop it to a letterbox. The
   viewport cap keeps a full-bleed band from swallowing a large screen. */
.photo-slot[style*="background-image"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    padding: 0;
    width: 100%;
    /* The ratio matches the photograph exactly, so background-size:
       cover scales it to the band and crops nothing. Change the photo
       and change this with it.

       No max-height here, deliberately. aspect-ratio combined with a
       max-height makes the box give up WIDTH to keep its ratio, which
       left a 288px strip of bare panel down the right of a 1280px
       viewport -- the exact opposite of the full-bleed band the spec
       asks for. Caught by screenshotting the page rather than by a
       test, which is the kind of thing only looking will catch. */
    aspect-ratio: 1600 / 729;
    min-height: 200px;
}

/* Photos go edge to edge; text never does. Design spec section 6 -- the
   alternation between prose capped at the measure and full-bleed image
   is the whole layout system, so a photo band drops the side padding
   its prose siblings need. */
.band--photo { padding: 0; }
.photo-slot span { font-family: 'IBM Plex Mono', monospace; opacity: 0.75; }

/* ---- Calls to action ----------------------------------------------
   One per page. Two calls to action is a page that has not decided what
   it wants. ---------------------------------------------------------- */

.cta, button, input[type="submit"] {
    display: inline-block;
    background: var(--pine);
    color: var(--paper);
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    font-size: var(--t-base);
    padding: 14px var(--s3);
    border: 1px solid var(--pine);
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease;
}
.cta:hover, button:hover { background: var(--pine-lift); }
.cta-quiet { display: inline-block; margin-top: var(--s2); font-size: var(--t-sm); color: var(--ink-soft); }

/* ---- The example report -------------------------------------------
   With the interactive tool cut, this is the single most important
   visual object on the site. It is a document reproduced on the page,
   not a marketing card, and it carries the site's only shadow.
   -------------------------------------------------------------------- */

.report {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--pine);
    box-shadow: var(--lift);
    padding: var(--s4);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-sm);
}
.report-meta {
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--s1);
    margin-bottom: var(--s3);
}
.report-event { font-size: var(--t-md); color: var(--pine); font-weight: 500; margin-bottom: 2px; }
.report-dates { color: var(--amber); margin-bottom: var(--s3); }

.report-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s2);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--rule);
}
.report-row:last-child { border-bottom: 0; }
.report-label { color: var(--ink-soft); }
.report-value { font-size: var(--t-lg); font-weight: 500; color: var(--pine); text-align: right; }

/* The withheld lines sit in the same rhythm as the rest, in secondary
   ink. Not greyed into invisibility, and deliberately not blurred or
   teased -- making the gap visible turns the constraint into a feature
   rather than a hole. */
.report-row--withheld .report-value {
    font-size: var(--t-base);
    color: var(--ink-soft);
    font-style: italic;
    font-weight: 400;
}

/* ---- Ordinary content --------------------------------------------- */

.legal h1 { font-size: var(--t-xl); }
.legal h2 { font-size: var(--t-lg); margin-top: var(--s6); }
.fine-print { font-size: var(--t-sm); color: var(--ink-soft); }

ol, ul { max-width: var(--measure); padding-left: var(--s3); }
li { margin-bottom: var(--s2); }

label { display: block; margin-bottom: var(--s1); font-weight: 600; font-size: var(--t-sm); }
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
    width: 100%;
    max-width: 420px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: #fff;
    font: inherit;
    margin-bottom: var(--s3);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pine); outline-offset: 1px; }

table { border-collapse: collapse; width: 100%; margin-bottom: var(--s3); font-size: var(--t-sm); }
th, td { text-align: left; padding: 10px var(--s2); border-bottom: 1px solid var(--rule); }
th { font-weight: 600; color: var(--ink-soft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }

.notice { padding: var(--s2) var(--s3); border-left: 3px solid var(--amber); background: var(--warn-bg); margin-bottom: var(--s3); }
.error { padding: var(--s2) var(--s3); border-left: 3px solid #C0392B; background: #FBE9E7; margin-bottom: var(--s3); }

/* ---- Portal: the other density ------------------------------------ */

.portal { max-width: 1000px; }
.portal table { font-size: var(--t-sm); }
.portal td, .portal th { padding: var(--s1) var(--s2); }
.portal h1 { font-size: var(--t-lg); }
.copy-block {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-sm);
    background: var(--panel);
    border: 1px solid var(--rule);
    box-shadow: var(--lift);
    padding: var(--s3);
    white-space: pre-wrap;
}

/* ---- Phone --------------------------------------------------------- */

@media (max-width: 640px) {
    :root { --t-2xl: 2.0625rem; --t-3xl: 2.0625rem; }
    .band { padding: var(--s7) var(--s2); }
    /* The narrow-screen .band rule sits after .band--photo in this file,
       so without this the photo band picks its side padding back up and
       stops being full-bleed on a phone. Photos go edge to edge at every
       width; only text is capped. */
    .band--photo { padding: 0; }
    .container { padding: var(--s4) var(--s2) var(--s7); }
    .site-header { flex-direction: column; align-items: flex-start; gap: var(--s1); }
    .report { padding: var(--s3); }
    .report-row { flex-direction: column; gap: 2px; }
    .report-value { text-align: left; }
}