/* Component-level styles built on the tokens in tokens.css. No gradients,
   metallics, drop shadows, gloss, or rounded corners anywhere — flat warm
   surfaces and hairline rules only, per the client's colour amendment. */

.site-header {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--colour-line);
}

/* Fixed-height slot: a text wordmark today, an <img>/<svg> logo later,
   with no layout change either way. */
.brand-mark {
    display: inline-flex;
    align-items: center;
    height: 28px;
    text-decoration: none;
}

.brand-mark img,
.brand-mark svg { height: 100%; width: auto; display: block; }

.brand-mark img.logo-mobile-only { display: none; }

.wordmark {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 1.125rem;
    color: var(--colour-text);
}

.site-footer {
    background: var(--colour-footer-bg);
    color: var(--colour-footer-text);
    padding: var(--space-7) 0 var(--space-6);
    margin-top: var(--space-9);
}

.site-footer a { color: var(--colour-footer-text); opacity: 0.85; }
.site-footer a:hover { opacity: 1; }
.site-footer .brand-mark .wordmark { color: var(--colour-footer-text); }

.btn {
    display: inline-block;
    height: 52px;
    line-height: 52px;
    padding: 0 var(--space-5);
    background: var(--colour-text);
    color: var(--colour-white);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--colour-text);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 200ms ease-out;
}

.btn:hover { background: #2d221c; }

.btn-secondary {
    background: transparent;
    color: var(--colour-text);
    border: 1px solid var(--colour-accent);
}
.btn-secondary:hover { background: var(--colour-accent); color: var(--colour-white); }

.field {
    display: block;
    margin-bottom: var(--space-4);
}

.field label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
    color: var(--colour-text-soft);
}

.field input {
    width: 100%;
    min-height: 56px;
    border: 1px solid var(--colour-line);
    border-radius: var(--radius);
    padding: 0 var(--space-3);
    font-family: var(--font-ui);
    font-size: 1rem;
    background: var(--colour-white);
    color: var(--colour-text);
}

.field input:focus,
.btn:focus,
a:focus {
    outline: 2px solid var(--colour-text);
    outline-offset: 2px;
}

.notice {
    padding: var(--space-3);
    border: 1px solid var(--colour-line);
    background: var(--colour-surface);
    margin-bottom: var(--space-4);
    font-size: 0.9rem;
    color: var(--colour-text);
}

.notice-error { border-color: #8a2e22; color: #8a2e22; }

.admin-shell {
    display: flex;
    min-height: 100vh;
    background: var(--colour-background);
}

.admin-nav {
    width: 220px;
    padding: var(--space-4);
    border-right: 1px solid var(--colour-line);
    background: var(--colour-surface);
}

.admin-nav a {
    display: block;
    padding: var(--space-2) 0;
    text-decoration: none;
    font-size: 0.875rem;
    color: var(--colour-text);
}

.admin-main {
    flex: 1;
    padding: var(--space-5);
}

.status-pass { color: #2f5c3f; }
.status-warning { color: #8a5a1f; }
.status-fail { color: #8a2e22; }

.error-page {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
}

/* Phase 1 — product editor */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-4); }
.form-grid .field-full { grid-column:1 / -1; }
.form-section { margin-bottom:var(--space-6); padding-bottom:var(--space-5); border-bottom:1px solid var(--colour-line); }
.form-section h3 { margin-bottom:var(--space-3); }
.field textarea { width:100%; min-height:80px; border:1px solid var(--colour-line); border-radius:var(--radius); padding:var(--space-2) var(--space-3); font-family:var(--font-ui); font-size:1rem; background:var(--colour-white); color:var(--colour-text); }
.field select { width:100%; min-height:56px; border:1px solid var(--colour-line); border-radius:var(--radius); padding:0 var(--space-3); font-family:var(--font-ui); font-size:1rem; background:var(--colour-white); color:var(--colour-text); }
.checkbox-list label { display:inline-flex; align-items:center; gap:var(--space-2); margin-right:var(--space-4); font-size:0.9rem; }
.media-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:var(--space-3); margin:var(--space-4) 0; }
.media-grid figure { margin:0; border:1px solid var(--colour-line); background:var(--colour-white); }
.media-grid img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.media-grid figcaption { padding:var(--space-2); font-size:0.75rem; color:var(--colour-text-soft); display:flex; justify-content:space-between; align-items:center; }

/* Mobile navigation — hamburger toggle + dropdown panel, per brief §10/§11.
   nav-desktop's own display/layout lives here, in the class, deliberately —
   an inline style on that element would outrank this file's media query
   entirely (inline styles beat any external stylesheet selector regardless
   of specificity), which is exactly what broke this the first time. */
.nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
}

.hamburger { display: block; width: 22px; height: 15px; position: relative; }
.hamburger-line {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--colour-text);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease, top 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger-line:nth-child(1) { top: 0; }
.hamburger-line:nth-child(2) { top: 6.5px; }
.hamburger-line:nth-child(3) { top: 13px; }

/* Hamburger morphs into an X when open — driven off aria-expanded, which
   the toggle JS already sets, so no extra markup/JS is needed for this. */
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { top: 6.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { top: 6.5px; transform: rotate(-45deg); }

.mobile-menu {
    display: none;
}

@media (max-width: 860px) {
    .site-header { height: 72px; }
    .nav-desktop { display: none; }
    .nav-toggle { display: block; }

    /* Logo: height always switches to the mobile value via the CSS custom
       property set inline on .brand-mark (see the layout) — !important is
       needed for the same reason as footer-grid above: the desktop height
       is itself an inline style, which this has to be able to override.
       If a distinct mobile logo image was uploaded, its .logo-mobile-only
       <img> swaps in for .logo-desktop-only here; if not, only the one
       (desktop) <img> exists in the markup at all and these two rules are
       simply unused. */
    .brand-mark { height: var(--mobile-logo-h) !important; }
    .brand-mark img.logo-desktop-only { display: none; }
    .brand-mark img.logo-mobile-only { display: block; }

    /* Elegant dropdown — unfurls from under the header, rather than a
       full-screen takeover. max-height + opacity gives a smooth reveal
       without the layout jump a height:auto transition would cause. */
    .mobile-menu {
        display: block;
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: var(--colour-background);
        border-top: 1px solid var(--colour-line);
        box-shadow: 0 16px 32px rgba(17, 17, 17, 0.08);
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
        z-index: 1000;
    }
    .mobile-menu.is-open {
        max-height: calc(100vh - 72px);
        opacity: 1;
        overflow-y: auto;
    }
    .mobile-menu-inner { padding: var(--space-5); }
    .mobile-menu a {
        display: block;
        padding: var(--space-3) 0;
        font-size: 1.1rem;
        text-decoration: none;
        color: var(--colour-text);
        border-bottom: 1px solid var(--colour-line);
    }
}

/* Responsive layout classes — these replaced inline styles specifically
   so they CAN be overridden by a media query below (an inline style, like
   the nav bug, cannot be). */
.collection-layout { display: flex; gap: var(--space-7); align-items: flex-start; }
.collection-filters { width: 220px; flex-shrink: 0; }
.two-col-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); padding: var(--space-7) 0; }
.footer-grid { display: grid; gap: var(--space-6); }

@media (max-width: 860px) {
    .collection-layout { flex-direction: column; }
    .collection-filters { width: 100%; }
    .two-col-layout { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5) 0; }
    /* footer-grid's column-count is set inline per-page (3 or 4 columns,
       decided server-side by whether contact details exist) — !important
       here is a deliberate, narrow override of that inline value specifically
       for the mobile case, not a general habit. */
    .footer-grid { grid-template-columns: 1fr !important; gap: var(--space-7) var(--space-6); }
}

/* Product image gallery (PDP + Archive detail) — main image, thumbnail
   strip, and a full-screen lightbox. See app/View/partials/gallery.php
   and assets/js/gallery.js. */
.gallery-main {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-thumbs {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-1);
}
.gallery-thumb {
    flex: 0 0 auto;
    width: 68px;
    height: 85px; /* 4:5 */
    padding: 0;
    border: 1px solid var(--colour-line);
    background: var(--colour-white);
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 150ms ease, border-color 150ms ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: 0.9; }
.gallery-thumb.is-active { opacity: 1; border-color: var(--colour-text); }

#gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(17, 17, 17, 0.94);
    align-items: center;
    justify-content: center;
}
#gallery-lightbox.is-open { display: flex; }

.gallery-lightbox-image {
    max-width: 90vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    background: none;
    border: none;
    color: var(--colour-white);
    cursor: pointer;
    line-height: 1;
}
.gallery-lightbox-close {
    top: var(--space-4);
    right: var(--space-5);
    font-size: 2rem;
}
.gallery-lightbox-prev,
.gallery-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    padding: var(--space-3);
}
.gallery-lightbox-prev { left: var(--space-3); }
.gallery-lightbox-next { right: var(--space-3); }
.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover { opacity: 0.75; }

@media (max-width: 640px) {
    .gallery-lightbox-prev, .gallery-lightbox-next { font-size: 2.2rem; padding: var(--space-2); }
}

/* Archive pieces keep the gallery's structure but visually quieter, per
   the brief's reduced-contrast Archive treatment. */
.archive-gallery .gallery-main img,
.archive-gallery .gallery-thumb img { filter: saturate(0.85); }