/* ============================================================
   DESIGN TOKENS
   Type scale and colors, per the Figma mockups. Sizes are in pt-equivalent
   px (1pt = ~1.333px is for print; on screen we use the pt values directly
   as px, matching how the brief specified them).
   ============================================================ */
:root {
    --font: 'Roboto', Helvetica, Arial, sans-serif;

    --size-h1: 48px;    /* large headers */
    --size-h2: 32px;    /* smaller headers */
    --size-nav: 40px;   /* nav / hamburger overlay links */
    --size-body: 24px;  /* body paragraphs, project page blurbs */
    --size-button: 16px;
    --size-caption: 16px;

    --color-text: #1a1a1a;
    --color-text-on-dark: #f5f5f5;
    --color-bg: #ffffff;
    --color-accent: #e8d999; /* yellow label color, sampled from the mockup */
    --color-header-bg: rgba(255, 255, 255, 0.5);
    --color-overlay: rgba(0, 0, 0, 0.75); /* 75% black hover/lock overlay, per brief */

    --header-height: 80px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-weight: 400;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
}

/* The header now floats over the page (see .site-header below) instead of
   taking up its own space, so every page's content needs top padding equal
   to the header's height to avoid starting out hidden underneath it.
   The homepage is the one exception — see main.home further down. */
main {
    padding-top: var(--header-height);
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3 {
    font-weight: 700;
    margin: 0;
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }

p {
    font-size: var(--size-body);
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 1em;
}

.caption {
    font-size: var(--size-caption);
    font-weight: 300;
    color: #666;
}

/* ============================================================
   HEADER / LOGO / HAMBURGER
   Fixed in place (always visible, never scrolls away), background is
   white at 50% opacity (per brief). Since a fixed element floats over
   the page instead of taking up its own space, every page compensates
   with top padding on <main> — except the homepage, which lets the
   hero image extend up underneath it instead (see main.home below).
   This markup is injected by assets/js/header-include.js from
   partials/header.html — these styles just target the resulting classes.
   ============================================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 32px;
    background: transparent;
    transition: background-color 0.25s ease, backdrop-filter 0.25s ease;
}

/* Added by JS (see header-include.js) once the page is scrolled down at
   all — the glass background is invisible at the very top of the page. */
.site-header.is-scrolled {
    background: var(--color-header-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.logo {
    display: inline-flex;
    color: #000; /* default: black, matches the original logo file */
}

.logo svg {
    height: 40px;
    width: 40px;
}

/* Homepage only: logo and hamburger turn white, since the header floats
   over the dark hero image there. Every other page keeps them black. */
.page-home .logo {
    color: #fff;
}

.page-home .hamburger span {
    background: #fff;
}

.hamburger {
    width: 32px;
    height: 24px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--color-text);
}

/* ============================================================
   NAV OVERLAY (hamburger menu)
   Full-screen, dark background. Hovering a link dims the others,
   per the mockup.
   ============================================================ */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(20, 24, 34, 0.97);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.nav-overlay__close {
    position: absolute;
    top: 24px;
    right: 32px;
    background: none;
    border: 0;
    color: var(--color-text-on-dark);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.nav-overlay__links {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav-overlay__links li {
    margin: 32px 0;
}

.nav-overlay__links a {
    display: inline-block;
    font-size: var(--size-nav);
    font-weight: 300;
    color: var(--color-text-on-dark);
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* When any link is hovered, dim all links, then bring the hovered one back to full opacity. */
.nav-overlay__links:hover a {
    opacity: 0.4;
}

.nav-overlay__links a:hover {
    opacity: 1;
}

/* ============================================================
   HOMEPAGE HERO
   Fixed-height frame so the hero image fills it edge to edge,
   regardless of the image's own dimensions. The homepage's <main> cancels
   out the default header-clearance padding so this hero starts right at
   the very top of the page, underneath the floating header.
   ============================================================ */
main.home {
    padding-top: 0;
}

.hero {
    position: relative;
    height: 789px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    text-align: center;
    background: #6594bf url('/assets/images/home/hero.webp');
    background-size: cover;
    background-position: center;
    color: #fff;
}

/* Invisible clickable area over the down-arrow baked into hero.jpg — clicking
   it scrolls down to the project tiles. Since the hero image is cropped
   responsively (background-size: cover), this is sized generously and
   anchored to the bottom of the frame rather than pinned to the arrow's
   exact pixel position, so it stays close to the arrow at most screen
   widths without needing to match it exactly. Nudge the "bottom" value
   below if it feels off once you've tested a few screen sizes. */
.hero__scroll-link {
    position: absolute;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    width: 100px;
    height: 92px; /* extra 32px of height, extending upward, so the click
                     target still covers the arrow even if browser resizing
                     shifts it slightly (bottom edge stays anchored) */
    cursor: pointer;
}

/* Invisible on screen, but still readable by search engines and screen
   readers. Used for the homepage's <h1> now that the name/title is baked
   into the hero image instead of being live text. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   HOMEPAGE PROJECT TILES
   2 tiles / 1 full-width tile / 2 tiles, each linking to a project page.
   Hover reveals title + role; the protected projects also show the
   "locked" copy as soon as the tile is hovered/focused.
   ============================================================ */
.tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 48px;
}

.tile {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #ccc; /* placeholder until the teaser image is dropped in */
    background-size: cover;
    background-position: center;
}

.tile--full {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 6;
}

.tile__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: var(--color-overlay);
    color: #fff;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.tile:hover .tile__overlay,
.tile:focus-within .tile__overlay {
    opacity: 1;
}

.tile__title {
    /* Intentionally smaller than the site's 8px type scale (24px instead
       of 32px) — a deliberate one-off for this component, not a change to
       the shared --size-h2 token used for headings elsewhere. */
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
}

.tile__role {
    font-size: 16px;
    font-weight: 300;
    margin: 0 0 24px;
}

.tile__lock-message {
    /* 12px is a deliberate one-off outside the 8px scale, per request. */
    font-size: 12px;
    font-weight: 300;
    margin: 0 0 16px;
}

/* ============================================================
   BUTTONS (Enter Password, Read More, etc.)
   ============================================================ */
.button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-size: var(--size-button);
    font-weight: 700;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    padding: 12px 20px;
    cursor: pointer;
}

.button:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   PASSWORD FORM (project pages, when locked)
   ============================================================ */
.password-gate {
    padding: 96px 24px;
    text-align: center;
}

/* Grays out the whole page — but only while the password form is still
   showing. password-gate.js sets the "hidden" attribute on .password-gate
   the moment the correct password is entered, so this automatically
   reverts to the normal white background right after unlocking, and
   never applies on pages that don't have a password gate at all. */
body:has(.password-gate:not([hidden])) {
    background: #f7f7f7;
}

.password-gate__inner {
    max-width: 420px;
    margin: 0 auto;
    transform: translateY(-100px);
}

.password-gate p {
    font-size: 16px;
}

.password-gate input[type="password"] {
    display: block;
    width: 100%;
    font-family: var(--font);
    font-size: var(--size-button);
    padding: 12px 16px;
    margin: 16px 0;
    border: 1px solid #999;
}

.password-gate__error {
    color: #b00020;
    font-size: var(--size-caption);
    display: none;
}

.password-gate__error.is-visible {
    display: block;
}

/* ============================================================
   PROJECT PAGE
   ============================================================ */
.project-header {
    text-align: center;
    padding: 64px 24px 40px;
}

.project-header__role {
    font-size: var(--size-caption);
}

/* Project Description (the one-liner under Role) */
.project-header p {
    font-size: 16px;
}

.project-hero {
    width: 100%;
    background: #eee;
}

.project-section {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px;
}

.project-section h2 {
    text-align: center;
    margin-bottom: 24px;
}

/* Body Copy — excludes .caption, which keeps its own smaller size */
.project-section p:not(.caption) {
    font-size: 16px;
}

.project-section--gray {
    background: #f7f7f7;
    max-width: none;
}

.project-section--gray > * {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.back-to-top {
    display: block;
    text-align: center;
    padding: 48px 24px;
    font-size: var(--size-caption);
    color: #999;
}

/* Pulls a .project-section 32px closer to whatever comes before it, by
   trimming its top padding instead of its bottom padding. Add this class
   alongside .project-section on whichever section needs it. */
.project-section--pull-up {
    padding-top: 32px;
}

/* Two images side by side within a .project-section (e.g. GeoPermits'
   collapsed/expanded staff card comparison). */
.image-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 720px) {
    .image-pair {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ALTERNATING TWO-COLUMN LAYOUT (e.g. GeoPermits "The Challenge")
   A wider, light-gray section made up of stacked rows. Each row is a
   card (heading + copy) next to an image, alternating which side the
   card is on. To alternate a row, just swap the order of
   .info-card and .split-row__media in that row's HTML — CSS doesn't
   need a "reverse" modifier, since the grid just lays out whatever
   order the two children are written in.
   ============================================================ */
.split-block {
    padding: 48px 24px;
    background: #f5f5f5;
}

.split-block > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Use when the surrounding page should stay white and the card itself
   carries the gray instead (see .info-card--gray below). */
.split-block--plain {
    background: #fff;
}

.split-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: center;
}

/* A narrower text column and a larger image column, for rows where the
   image should dominate (e.g. Liberty Mutual's Result section). */
.split-row--image-heavy {
    grid-template-columns: 0.8fr 2.3fr;
    gap: 32px;
}

/* Nudges the text column right, since it now sits in a narrower space
   next to the enlarged image. */
.split-row--image-heavy .info-card--plain {
    margin-left: 48px;
}

.split-row--image-heavy .split-row__media {
    transform: translateX(-75px);
}

.split-row + .split-row {
    margin-top: 64px;
}

.split-row__media img {
    width: 100%;
}

.split-row__media .caption {
    margin-top: 16px;
}

.info-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 32px;
}

.info-card h2 {
    text-align: left;
    margin: 0 0 16px;
}

.info-card p {
    font-size: 16px;
}

.info-card p:last-child {
    margin-bottom: 0;
}

/* Light gray card instead of white (e.g. Liberty Mutual "The Task") */
.info-card--gray {
    background: #f7f7f7;
}

/* Plain text, no card chrome — keeps the same heading/copy sizing as
   .info-card, just without the background, shadow, or padding. */
.info-card--plain {
    background: none;
    box-shadow: none;
    padding: 0;
}

/* An image that bleeds to the full width of the page, ignoring the usual
   960px/1200px content max-width (e.g. Liberty Mutual's yellow device
   mockup under the Result section). Use as a standalone <img>, not
   nested inside .project-section or .split-block. */
.full-bleed-image {
    width: 100%;
}

@media (max-width: 720px) {
    .split-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .split-row + .split-row {
        margin-top: 24px;
    }

    .info-card {
        padding: 32px;
    }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 96px 32px;
}

.about__bio {
    transform: translateY(-100px);
}

.about__bio h1 {
    margin-bottom: 32px;
}

.about__bio p {
    font-size: 20px;
}

/* ============================================================
   RESPONSIVE
   Mobile layout stacks the tiles and the about page into one column.
   Exact image crops for mobile come from the mobile mockups once
   those images are exported.
   ============================================================ */
@media (max-width: 720px) {
    :root {
        --size-h1: 32px;
        --size-h2: 24px;
    }

    .hero {
        height: auto;
        aspect-ratio: 862 / 1359; /* matches hero-mobile.webp's own proportions */
        padding: 24px;
        background-image: url('/assets/images/home/hero-mobile.webp');
    }

    .hero__scroll-link {
        height: 60px; /* keep the original (smaller) hit area on mobile */
    }

    .tiles {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }

    .tile,
    .tile--full {
        aspect-ratio: 4 / 5;
    }

    .about {
        grid-template-columns: 1fr;
        padding: 48px 24px;
    }
}