/* obstech.cl - the shared chrome and the document layout.

   Colours: the ObsTech chart is linked by base.html (obstech-colors.css,
   every --obs-* name) and this site is something a visitor READS, so its
   accent is the brand green - --obs-accent for rules, fills and text on the
   dark chrome, --obs-accent-text on white. The per-subdomain --theme-*
   variables served from config/themes.yaml carry the chart's values under
   the page's own names; no hex lives in this file.

   Type: Barlow for text, Barlow Condensed for titles and the navigation
   (base.html loads them). One family, two widths.

   Two kinds of <main>: a page of the public site sets main_class="doc" and
   gets the report layout below (side headings in a rail, a measured
   column, tables); every other page (weather, intranet, the 3D visit)
   keeps the flex canvas it was written for. */

:root {
    --font-text: 'Barlow', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
    --measure: 66ch;                      /* a line of body text */
    --page: 72rem;                        /* the widest the content goes */
    --gutter: clamp(1rem, 4vw, 3rem);
    --rail: 12rem;                        /* the side-heading column */
    --bar: 3.5rem;                        /* the header bar */
    --step-0: 1.0625rem;                  /* 17 px body */
    --step-1: 1.3125rem;                  /* 21 */
    --step-2: 1.75rem;                    /* 28 */
    --step-3: 2.25rem;                    /* 36 */
    --step-4: 3.25rem;                    /* 52 */
    --step-5: 4.5rem;                     /* 72 */
}

* { box-sizing: border-box; }

html, body {
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-text);
    font-size: var(--step-0);
    line-height: 1.5;
    color: var(--obs-ink);
    background: var(--theme-page_bg);   /* the key themes.yaml serves */
    -webkit-font-smoothing: antialiased;
}
html:has(main.doc) body { background: var(--obs-paper); }

header, nav, main { width: 100%; max-width: 100%; min-width: 100%; }
main {
    flex: 1;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    position: relative;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
}

:focus-visible { outline: 2px solid var(--obs-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- the header bar ---------------------------------------------------- */

header.bar {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: var(--gutter);
    height: var(--bar);
    padding: 0 var(--gutter);
    background: var(--theme-bg);
    color: var(--theme-fg);
    position: relative;
    z-index: 100;
}
.brand { display: flex; align-items: center; }
.brand img { height: 1.6rem; width: auto; display: block; }

nav { margin-left: auto; display: flex; }
nav ul { padding: 0; margin: 0; list-style: none; }
nav > ul { display: flex; height: 100%; }
nav > ul > li {
    position: relative;
    display: flex;
    align-items: center;
}
nav > ul > li > span {
    display: block;
    padding: 0 0.9rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: var(--bar);
    cursor: default;
    border-bottom: 3px solid transparent;
}
nav > ul > li:hover > span,
nav > ul > li:focus-within > span { border-bottom-color: var(--obs-accent); color: var(--theme-fg_accent); }

nav > ul > li > ul {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0.15s;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 13rem;
    padding: 0.4rem 0;
    background: var(--theme-bg);
    border-top: 3px solid var(--obs-accent);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--obs-ink) 30%, transparent);
}
nav > ul > li:hover > ul,
nav > ul > li:focus-within > ul { visibility: visible; opacity: 1; }
nav a {
    display: block;
    padding: 0.45rem 1rem;
    color: var(--theme-fg);
    text-decoration: none;
    font-size: 1rem;
    white-space: nowrap;
}
nav a:hover, nav a:focus-visible { background: var(--theme-bg_accent); color: var(--theme-fg_accent); outline: none; }

.menu-toggle, .hamburger { display: none; }

/* --- a page of the site: the report layout ---------------------------- */

main.doc {
    display: block;
    padding: 0 max(var(--gutter), calc((100% - var(--page)) / 2)) 3rem;
}
main.doc > h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-3);
    line-height: 1.08;
    max-width: 24ch;
    margin: 2rem 0 1.25rem;
    text-wrap: balance;
}
main.doc h2, main.doc h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
}
main.doc h2 { font-size: var(--step-2); }
main.doc h3 { font-size: var(--step-1); margin: 1.25rem 0 0.4rem; }
main.doc p { max-width: var(--measure); margin: 0 0 1em; }
main.doc a { color: var(--obs-accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
main.doc a:hover { text-decoration-thickness: 2px; }
main.doc em { font-style: italic; }
main.doc ul { padding-left: 1.2em; max-width: var(--measure); }
main.doc li { margin-bottom: 0.3em; }

/* a section: the heading in the left rail, the content beside it */
main.doc .row {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--gutter);
    row-gap: 0.5rem;
    padding: 2rem 0;
    border-top: 1px solid var(--obs-rule);
}
/* running text is justified; words are never split at the line end */
main.doc p, main.doc figcaption, main.doc .bio { text-align: justify; hyphens: manual; }
main.doc .row > h2 { grid-column: 1; grid-row: 1; padding-top: 0.15rem; }
main.doc .row > :not(h2) { grid-column: 2; }
main.doc .row > .lead { font-size: var(--step-1); line-height: 1.4; }

/* a data table: the site sheet, the plan, the prices */
main.doc table.sheet {
    border-collapse: collapse;
    width: 100%;
    max-width: 46rem;
    font-variant-numeric: tabular-nums;
    margin: 0.25rem 0 1rem;
}
main.doc table.sheet th, main.doc table.sheet td {
    text-align: left;
    vertical-align: top;
    padding: 0.55rem 1rem 0.55rem 0;
    border-top: 1px solid var(--obs-rule);
}
main.doc table.sheet th { font-weight: 500; color: var(--obs-mute); width: 13rem; }
main.doc table.sheet tr:first-child > * { border-top: 0; }
main.doc table.sheet td .unit { color: var(--obs-mute); }

/* the one strong call: a filled green block, ink text (7.4:1) */
main.doc .button {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    background: var(--obs-accent);
    color: var(--obs-ink);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
}
main.doc .button:hover, main.doc .button:focus-visible { background: var(--obs-green-dark); color: var(--obs-paper); }

/* a photograph: full width of the content column, captioned */
/* a row's text or table beside its photo (.split, the landing and the
   services pages); one column on a phone */
main.doc .split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
main.doc .split > figure { margin: 0; }
main.doc .split > table.sheet { margin: 0; }
main.doc .split figcaption { max-width: none; }
@media screen and (max-width: 820px) {
    main.doc .split { grid-template-columns: 1fr; }
}

main.doc figure { margin: 0; }
main.doc figure img { display: block; width: 100%; height: auto; border-radius: 3px; }
main.doc figcaption { font-size: 0.95rem; color: var(--obs-mute); margin-top: 0.5rem; max-width: var(--measure); }

main.doc footer {
    border-top: 1px solid var(--obs-rule);
    padding: 1.5rem 0 0;
    font-size: 0.95rem;
    color: var(--obs-mute);
}
main.doc footer p { margin: 0 0 0.3em; }

/* --- every other page keeps what it had ------------------------------- */

main:not(.doc) > h1 {
    width: 100%;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-3);
    line-height: 1.1;
    margin: 1.25rem 0 0.5rem;
    color: var(--theme-bg);
}
main:not(.doc) > footer { display: none; }
/* the cards stack from the top: a wrapping flex row would otherwise
   spread its lines over the page's height and open a gap under the title
   (seen on the climate and recent pages, tall on a phone) */
main:not(.doc) { align-content: flex-start; }
main:not(.doc) h3 {
    width: 100%;
    padding: 1ex;
    text-align: center;
    font-size: x-large;
    font-variant: small-caps;
    color: var(--theme-bg_accent);
}
main:not(.doc) p { padding: 0.5rem; text-align: justify; }
section { width: 100%; margin: 1.5rem; }
main.doc section { margin: 0; }
section.dark { background: var(--theme-bg); color: var(--theme-fg); border-radius: 8px; }
.dark a { color: var(--theme-fg); }
.dark a:hover { color: var(--theme-fg_accent); }
.left_image { width: 50%; margin: 1em; float: left; }
.centered {
    position: absolute; bottom: 50%; left: 50%; transform: translate(-50%, 50%);
    color: var(--obs-paper); font-size: 30px; font-family: serif; font-weight: bolder;
}

/* the 3D visit: a title row, then the canvas takes every remaining pixel */
main.model { display: flex; flex-direction: column; flex-wrap: nowrap; overflow: hidden; }
main.model > h1 { flex: 0 0 auto; font-size: var(--step-2); margin: 0.6rem 0 0.4rem; }
main.model > #canvasContainer { flex: 1 1 auto; min-height: 0; }

/* --- narrow screens ---------------------------------------------------- */

@media screen and (max-width: 820px) {
    .hamburger {
        display: block;
        margin-left: auto;
        align-self: center;
        cursor: pointer;
        font-size: 1.8rem;
        line-height: 1;
        color: var(--theme-fg);
        user-select: none;
    }
    .hamburger::before { content: "\2630"; }
    .menu-toggle:checked ~ header .hamburger::before { content: "\2715"; }

    nav {
        display: none;
        position: absolute;
        top: var(--bar);
        left: 0;
        right: 0;
        background: var(--theme-bg);
        border-top: 3px solid var(--obs-accent);
        margin: 0;
        max-height: calc(100vh - var(--bar));
        overflow-y: auto;
    }
    .menu-toggle:checked ~ header nav { display: block; }
    nav > ul { flex-direction: column; height: auto; }
    nav > ul > li { display: block; border-top: 1px solid color-mix(in srgb, var(--obs-paper) 12%, transparent); }
    nav > ul > li > span { line-height: 1.2; padding: 0.8rem 1rem; border: 0; }
    nav > ul > li > ul {
        position: static;
        visibility: visible;
        opacity: 1;
        box-shadow: none;
        border-top: 0;
        min-width: 0;
        padding: 0 0 0.5rem;
        background: color-mix(in srgb, var(--obs-ink) 20%, var(--theme-bg));
    }
    nav a { padding: 0.55rem 1rem 0.55rem 2rem; white-space: normal; }

    main.doc > h1 { font-size: var(--step-2); margin: 1.5rem 0 1rem; }
    main.doc .row { grid-template-columns: 1fr; padding: 1.5rem 0; }
    main.doc .row > h2 { grid-column: 1; margin-bottom: 0.25rem; }
    main.doc .row > :not(h2) { grid-column: 1; }
    main.doc table.sheet th { width: 9rem; }
}