/**
 * SITE LAYOUT - STRUCTURAL & APPEARANCE CSS
 * Site-specific layout, navigation, and structural patterns
 * This is the visual identity and structure of the site
 */

/* ========================================================================
   PAGE STRUCTURE
   ======================================================================== */

#outerFrame {
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--surface-base);
    box-shadow: var(--shadow-lg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ========================================================================
   HEADER
   ======================================================================== */

header {
    background: linear-gradient(
        160deg,
        #071F15 0%,
        #0E3B28 40%,
        #112E20 70%,
        #050E09 100%
    );
    border-bottom: 1px solid #1A4A34;
    position: relative;
    /* Above nav's stacking context (z-index:20) so the tagline's project-term
       tooltip, which spills down out of the header, paints over the nav bar
       instead of behind it. Nav dropdowns open downward (away from the header)
       so this never covers them. */
    z-index: 30;
    color: var(--white);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
}

/* Header inner layout */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) 0;
}

.site-tagline {
    color: var(--secondary-accent);
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.85;
}

/* Header Logo — horizontal banner format */
.header-logo {
    max-width: 350px;
    max-height: 75px;
    width: auto;
    height: auto;
    margin-bottom: var(--spacing-sm);
}

@media (max-width: 768px) {
    .header-logo {
        max-width: 280px;
        max-height: 60px;
    }
}

/* ========================================================================
   NAVIGATION STRUCTURE
   ======================================================================== */

nav {
    background-color: var(--bg-base);
    padding: var(--spacing-md) var(--spacing-lg);
    position: relative;
    z-index: 20;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
    display: block;
    text-decoration: none;
    color: var(--text-on-dark-accent);
}

.nav-link:hover {
    background-color: var(--primary);
    color: var(--white);
    text-decoration: none;
}

.nav-link.active {
    background-color: var(--secondary);
    color: var(--white);
}

/* ========================================================================
   DROPDOWN MENUS
   ======================================================================== */

.nav-item.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-base);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-normal);
    z-index: 1000;
    list-style: none;
    padding: var(--spacing-sm) 0;
    margin: 0;
}

.nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-item {
    color: var(--text-on-dark-accent);
    padding: 0.75rem 1.25rem;
    display: block;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.dropdown-item:hover {
    background-color: var(--primary);
    color: var(--white);
    text-decoration: none;
}

.dropdown-item.active {
    background-color: var(--secondary);
    color: var(--white);
}

/* Dropdown arrow indicator */
.nav-item.dropdown > .nav-link::after {
    content: ' ▼';
    font-size: 0.8rem;
    margin-left: var(--spacing-sm);
    transition: transform var(--transition-normal);
}

.nav-item.dropdown:hover > .nav-link::after {
    transform: rotate(180deg);
}

/* ========================================================================
   INSTAGRAM LINK (Site-Specific)
   ======================================================================== */

.instagram-link {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
    text-decoration: none;
}

.instagram-link:hover {
    background-color: var(--hover-lighten);
    text-decoration: none;
}

.instagram-link:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s;
}

/* ========================================================================
   CONTENT SECTIONS (Site-Specific Styling)
   ======================================================================== */

.content-section {
    background: var(--surface-base);
    padding: 1.4rem var(--spacing-lg) var(--spacing-md);
    margin: var(--spacing-xl) 0;
    border-radius: var(--radius-md);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section .section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
    padding: 0 var(--spacing-lg);
}

.content-section fieldset {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-light);
}

.content-section fieldset legend {
    font-weight: 600;
    color: var(--text-on-dark-accent);
    padding: 0 var(--spacing-md);
    background: var(--surface-light);
}

/* ========================================================================
   RESPONSIVE - MOBILE FIRST
   ======================================================================== */

@media (max-width: 768px) {
    #outerFrame {
        margin: 0;
        box-shadow: none;
    }
    
    header {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    nav {
        padding: var(--spacing-md);
    }
    
    .nav-menu {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .nav-container {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .instagram-link {
        align-self: flex-end;
        margin-top: var(--spacing-sm);
    }

    .content-section {
        padding: 1.2rem var(--spacing-md) var(--spacing-sm);
        margin: var(--spacing-lg) 0;
    }
}

/* ========================================================================
   CANADIAN MAPLE LEAF ICON
   Always Canadian red. Works inline (vertical-align) and inside flex
   <summary> rows (universal.css sizes summary SVGs to 2rem; the
   `summary .canada-leaf` override in universal.css scales it back down
   to a word-space accent).
   ======================================================================== */
.canada-leaf {
    flex-shrink: 0;
    width: 1.4em;
    height: 1.4em;
    vertical-align: middle;
    color: #D52B1E;
}

/* Inside headings the em unit scales with the heading's own font-size, so
   1.4em would be ~3.5rem inside an H1 (2.5rem × 1.4) — slightly taller than
   the 1.3 line-height. Negative bottom margin trims the margin box so the
   SVG no longer expands the line box, while the visual size stays the same. */
h1 .canada-leaf,
h2 .canada-leaf {
    margin-bottom: -0.2em;
}

@media (max-width: 480px) {
    .nav-link {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
}

/* ========================================================================
   NAV DROPDOWN CLOSE-ON-SELECT (mobile sticky :hover fix)
   Temporarily forces dropdown menus closed after a nav link is clicked,
   so the sticky hover state on touch devices releases cleanly.
   JS adds .nav-force-closed on click and removes it after 400ms.
   ======================================================================== */
nav.nav-force-closed .dropdown-menu,
nav.nav-force-closed .nav-item.dropdown:hover .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ========================================================================
   AUTO-SELECT NESTED FORMS
   When makeSmartNestedForm() is called with 'auto_select' => true,
   the select triggers submission on change via data-ajax-change.
   The submit button stays in the DOM as a progressive-enhancement fallback
   but is hidden since no manual click is needed.
   ======================================================================== */
.nested-form.auto-select button[type="submit"],
.nested-form.auto-select .form-actions {
    display: none;
}

/* ========================================================================
   CONTENT-SECTION VISUAL VARIETY (design pass 2026-07-25)
   Adds hierarchy and restrained brand-accent colour within the existing
   dark aesthetic. Token-only (no colour literals); element/class rules
   only, no inline styles. Lives here because this is FolioGraphic's visual
   identity layer, not the framework-shared universal.css.
   ======================================================================== */

/* Section headings get a short brand-accent underline so every section has a
   clear, coloured anchor instead of plain heading text on a flat card. */
.content-section > h2 {
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border);
    position: relative;
}

.content-section > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 3.5rem;
    height: 3px;
    border-radius: var(--radius-sm);
    background: var(--primary-accent);
}

/* Feature block: the sections we most want the eye to land on (positioning,
   cost) stand out from the uniform cards with a brand-accent left edge and a
   half-step-lighter surface. Modifier only — the base .content-section rule
   above still supplies padding, radius, and shadow. */
.content-section--feature {
    border-left: 4px solid var(--primary-accent);
    background: var(--surface-light);
}

/* Connect list: the "one connected system" bullets read as a flow — each item
   led by an accent arrow instead of a disc, reinforcing "this feeds into that".
   Class-scoped because only these specific lists carry that meaning. */
.connect-list {
    list-style: none;
    padding-left: 0;
}

.connect-list > li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: var(--spacing-sm);
}

.connect-list > li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-accent);
    font-weight: 700;
}

/* ────────────────────────────────────────────────────────────────────
   PROJECT TERM — the word "project" as an interactive, self-defining
   accent: a slow, INTERMITTENT chrome-glare shimmer (glint sweeps, then
   rests for a varying gap so it never reads as a casino loop), a
   hover/focus definition tooltip, and a link that scrolls to the
   "What is a project?" answer. Reusable: any term can adopt .project-term
   and point its word at its own definition. Colours are theme tokens;
   motion respects prefers-reduced-motion. Use on ONE or TWO prominent
   spots only — a page full of shimmering words would cheapen it.
   ──────────────────────────────────────────────────────────────── */
.project-term {
    position: relative;
    display: inline-block;
}

.project-term__word {
    font-weight: 800;
    text-decoration: none;
    /* Fallback colour for engines without background-clip:text — the word
       stays a solid, readable brand-green instead of vanishing. */
    color: var(--primary-accent);
    background-image: linear-gradient(
        100deg,
        var(--primary-accent) 0%,
        var(--primary-accent) 42%,
        var(--white) 50%,
        var(--primary-accent) 58%,
        var(--primary-accent) 100%
    );
    background-size: 250% 100%;
    background-position: 150% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: project-shine 18.8s linear infinite;
}

/* Specificity bump: universal.css's content-link rule
   (a:not(.button):not(.nav-link), specificity 0,2,1) forces 600 on any bare
   <a>. Mirror its :not() pattern to reach 0,3,0 and out-specify it regardless
   of stylesheet order, so the shimmer word renders genuinely BOLD. */
.project-term__word:not(.button):not(.nav-link) {
    font-weight: 800;
}

.project-term__word:hover,
.project-term__word:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* One glint per "play", parked off-screen during each gap. Direction
   alternates every play so the band never has to snap back across the
   text (which would flicker). Gap sequence ≈ 2s, 5s, 3s, 4s over an
   18.8s cycle (each play ≈ 1.2s). */
@keyframes project-shine {
    0%     { background-position: 150% 0; }   /* play 1 → */
    6.38%  { background-position: -50% 0; }
    17.02% { background-position: -50% 0; }    /* gap ~2s */
    23.40% { background-position: 150% 0; }    /* play 2 ← */
    50%    { background-position: 150% 0; }    /* gap ~5s */
    56.38% { background-position: -50% 0; }    /* play 3 → */
    72.34% { background-position: -50% 0; }    /* gap ~3s */
    78.72% { background-position: 150% 0; }    /* play 4 ← */
    100%   { background-position: 150% 0; }    /* gap ~4s */
}

@media (prefers-reduced-motion: reduce) {
    .project-term__word {
        animation: none;
        background-position: 150% 0;   /* rest = solid brand-green word */
    }
}

/* Definition tooltip — hidden until the word is hovered or focused. Has its
   own colours so the text-clip on the word never blanks it out. */
.project-term__tip {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.5rem);
    transform: translateX(-50%);
    z-index: 50;
    width: max-content;
    max-width: 18rem;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface-lighter);
    color: var(--surface-text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: var(--font-size-sm);
    font-weight: normal;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
    -webkit-text-fill-color: initial;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    pointer-events: none;
}

.project-term:hover .project-term__tip,
.project-term:focus-within .project-term__tip {
    opacity: 1;
    visibility: visible;
}

/* ════════════════════════════════════════════════════════════════════════
   HOME DE-DENSIFY PASS (2026-08-07) — same treatment as the FC/EAD passes:
   the copy stays, the delivery gains rhythm. Grid layouts for the module
   list and the real-world showcase, image slots for proof imagery, accent
   color on bold emphasis.
   ════════════════════════════════════════════════════════════════════════ */

/* Bold points carry the brand accent, not just weight. Zero specificity so
   components with their own pairings keep them. */
:where(strong, b) {
    color: var(--primary-accent);
}

::selection {
    background: var(--primary-accent);
    color: var(--primary-accent-text, var(--text-on-light));
}

/* ── Module grid: the 8 capability cards ──────────────────────────────
   Each card is the existing <details> (icon summary + expandable depth).
   Two columns on desktop so the list reads as a menu, not a wall; an open
   card only stretches its own row. */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--spacing-sm) var(--spacing-md);
    align-items: start;
    margin-top: var(--spacing-md);
}

.module-grid > details {
    margin-bottom: 0;
    border: 1px solid var(--border);
}

/* ── Real-world showcase: proof never hides in a dropdown ─────────────── */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--spacing-lg);
    align-items: start;
    margin-top: var(--spacing-md);
}

.showcase-card {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.showcase-card h3 {
    margin: var(--spacing-sm) 0 var(--spacing-xs);
    font-size: var(--font-size-lg);
}

.showcase-card__tag {
    font-size: var(--font-size-xs);
    color: var(--text-on-dark-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.showcase-card p {
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.showcase-card .button {
    margin-top: var(--spacing-xs);
}

/* ── Image slots (ported from the FanCraft content pass) ──────────────
   <figure class="img-slot" data-src="..."> renders a labeled placeholder
   (filename only, via img-slot.js data-file) until the image FILE exists;
   the loader mounts it automatically. Doubles as the shoot list. */
.img-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto var(--spacing-md);
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-layer-lighten);
    overflow: hidden;
}

.img-slot::after {
    content: 'Image coming soon  \00b7  ' attr(data-file);
    padding: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--text-on-dark-secondary);
    text-align: center;
    word-break: break-all;
}

.img-slot--wide     { aspect-ratio: 16 / 9; }
.img-slot--screen   { aspect-ratio: 16 / 10; }
.img-slot--square   { aspect-ratio: 1 / 1;  max-width: 22rem; }

.img-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.img-slot:has(img) {
    border: none;
    background: transparent;
}

.img-slot:has(img)::after {
    content: none;
}

/* ════════════════════════════════════════════════════════════════════════
   RECIPE STEPS & BLOCKS WORKSPACE + RUN CHECKLIST (production module)
   Pilot styling on FG — promote alongside the module when it ports x5.
   ════════════════════════════════════════════════════════════════════════ */

.block-workspace .step-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
}

.block-list,
.run-checklist {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0.5rem 0.5rem;
    /* Empty lists keep a drop zone for cross-step drags. */
    min-height: 1.5rem;
}

.block-row,
.run-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.35rem;
    background: var(--surface-base);
}

/* Inline editors open full-width beneath their row's controls. */
.block-row .inline-edit-slot {
    flex-basis: 100%;
}

.block-grip {
    cursor: grab;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--text-on-dark-secondary);
}

.sortable-dragging {
    opacity: 0.5;
}

.block-kind {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--surface-lighter);
    color: var(--text-on-dark-accent);
}

.block-label {
    flex: 1;
    min-width: 12rem;
}

.step-meta {
    font-size: var(--font-size-sm);
    color: var(--text-on-dark-secondary);
}

.run-block-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.run-block--done .run-block-label {
    text-decoration: line-through;
    opacity: 0.65;
}