/* ==========================================================================
   Site-wide restyle: fonts, nav, buttons, script headings, album grid

   NOTE: font-sizes here use px, not rem. WYSIWYG.css (loaded only on the
   homepage) sets html{font-size:62.5%}, making 1rem=10px there but 16px
   everywhere else - rem would render inconsistently between pages.
   ========================================================================== */

/* --- iOS Safari: default tap-highlight is a semi-transparent black
   overlay that can appear "stuck" on JS-toggled elements like the nav
   dropdown (a real device bug report - not reproducible in Chrome/
   Chromium, which is all the automated tools here can render) -----------*/
a, button, .navbar-toggle, .gallery-button {
    -webkit-tap-highlight-color: transparent;
}

/* --- Actual root cause of the black nav dropdown: bootstrap.min.css has
   been hand-edited (this isn't stock Bootstrap) with an unconditional
   ".navbar-nav { background-color: #000; color: white; }" - applies at
   every width, on every browser. Never showed up in testing because
   every previous check looked at .navbar-collapse (its parent) or the
   <a> (its child), never this element in between. */
.navbar-nav {
    background-color: transparent !important;
}

/* --- Homepage background is #000 (WYSIWYG.css), which is only ever meant
   to be seen for an instant behind the Ken Burns canvas. Using the
   theme's off-white instead of black means any sliver that does show
   through (see the 100dvh fix directly below, and the initial-load
   fix in scripts.js) reads as a soft edge rather than a jarring flash. */
body.fullscreen {
    background: #F7F6F5 !important;
}

/* --- Real fix for the block at the bottom of the homepage on mobile:
   galleries.css/WYSIWYG.css size #content and the gallery wrapper with
   `100vh`, which mobile Safari defines as the viewport with its address
   bar/tab bar toolbars HIDDEN (the larger, "as if fullscreen" number).
   scripts.js sizes the actual photo canvas to the window's CURRENT
   height, which - toolbars visible, as they are on first load - is
   smaller. That gap between the two is permanent (no resize ever
   happens to trigger a fix) and exactly toolbar-height, showing the
   background at the bottom. `100dvh` tracks the real current viewport
   instead, matching what the canvas is already sized to. Browsers
   without dvh support ignore this line and keep the 100vh above. */
body.fullscreen #content,
.fullscreen-gallery.gallery {
    height: 100dvh !important;
}

/* --- Base typography ---------------------------------------------------- */
body, p, li, span, div, input, button, .navbar-custom .nav li a {
    font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.gallery-caption h3 {
    font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- Page titles (e.g. "Albums") - matches the in-album header style
   (e.g. "Ceremony Photos") for consistency: small uppercase label, no
   the underline divider Jekyll's page layout normally puts below it ---- */
.intro-header .site-heading h1,
.intro-header .page-heading h1 {
    font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 13px;
}

.intro-header .site-heading hr,
.intro-header .page-heading hr {
    display: none;
}

/* --- Homepage hero logo (replaces plain text heading) -------------------
   Sized off the viewport, not a percentage of .content-wrapper - that
   element has no explicit width (position:absolute, shrink-to-fit), so a
   plain "%" here resolved against an unpredictable, too-narrow box. ---- */
.hero-logo {
    max-width: 420px;
    width: 60vw;
    height: auto;
    margin: 0 auto 12px;
    display: block;
}

@media (max-width: 768px) {
    .hero-logo {
        width: 70vw;
    }

    /* Subtitle was outsizing the logo on small screens */
    .content-wrapper h2 {
        font-size: 20px;
    }
}

/* Homepage forces #content to height:100vh with overflow:hidden (see
   index.html/WYSIWYG.css), so on a short viewport - a phone rotated to
   landscape - the centered logo/subtitle/date/button stack can be
   taller than the screen and the button gets clipped off the bottom.
   This is a height problem, not a width one: landscape phones are
   often wider than 768px, so the max-width rule above never kicks in
   and it still renders at full desktop size on a cramped screen. */
@media (max-height: 500px) {
    .hero-logo {
        width: 30vw;
        max-width: 160px;
        margin-bottom: 4px;
    }

    .content-wrapper h2 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .content-wrapper .entry-summary {
        margin-top: 0;
        font-size: 12px;
    }

    .content-wrapper .gallery-button {
        margin-top: 8px;
        padding: 8px 24px;
        font-size: 13px;
    }
}

/* --- Nav links, styled exactly like the "Albums" outline button --------- */
.nav-clean {
    margin-right: 1em;
}

/* Selector matches main.css's ".navbar-custom .nav li a" specificity
   (font-size:12px/weight:800/color:active-green there) so this wins. */
.navbar-custom .nav-clean li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 4px 0;
    padding: 10px 24px;
    font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    color: #fff;
    background: transparent !important;
    border: 1px solid #fff;
    -webkit-tap-highlight-color: transparent;
}

.navbar-custom .nav-clean li a:hover,
.navbar-custom .nav-clean li a:focus,
.navbar-custom .nav-clean li a:active {
    /* !important: main.css's ".navbar-custom.is-fixed .nav li a:active"
       (an old green #6ec54d) is one class more specific than this rule */
    color: #000 !important;
    background-color: #fff;
    outline: none;
    text-decoration: none;
}

/* Bootstrap's own ".navbar-default .navbar-nav > .active > a" (a
   different rule to the one above - .active is the "current page"
   class, not the :active click-state) also colors this green and
   is more specific than the plain rule, hence the extra "li.active" */
.navbar-custom .nav-clean li.active a {
    color: #fff !important;
    background: transparent !important;
}

/* --- Always-burger nav (mobile AND desktop): just 3 white lines, no box --- */
/* Explicit, equal heights on both the logo link and the toggle button -
   centering one flex layer around the other kept computing a mysteriously
   inflated height for the <a> (something about the homepage's inherited
   font-size/line-height), so pin both to the same fixed height instead
   of leaving it to intrinsic sizing. */
.navbar-header {
    display: flex;
    align-items: center;
    height: 50px;
    /* viewport-fit=cover (head.html) lets the page draw under a phone's
       notch/rounded corners instead of leaving white margins there - but
       this bar sits flush against the left/right edges, so without this
       the logo or burger icon could now end up physically under one. */
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
    box-sizing: border-box;
}

.navbar-header a {
    order: 1;
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 0;
}

.navbar-header img {
    height: 28px;
    width: auto;
    /* WYSIWYG.css (homepage only) sets a blanket img{margin-top:5px;
       margin-bottom:2em} - that 2em became ~36px and, as a flex item's
       margin, pushed the visible logo well off-center within its 50px
       row. This is the actual fix for the alignment issue. */
    margin: 0;
}

.navbar-toggle {
    order: 2;
    float: none;
    border: none;
    background: transparent !important;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 10px;
    margin: 0 0 0 auto;
    height: 50px;
    display: flex;
    align-items: center;
}

.navbar-toggle .fa-bars {
    color: #fff;
    font-size: 19px;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    background-color: transparent !important;
    opacity: 0.7;
}

.navbar-collapse {
    background: transparent !important;
    border: none;
    box-shadow: none;
}

.navbar-collapse .nav-clean {
    margin-right: 0;
    text-align: right;
    /* display:grid with no explicit columns makes the single implicit
       column size to the widest item's content, and every <a> (now
       display:block; width:100%) stretches to match it - so "Home"
       and "Gallery" render as equal-width buttons instead of each
       hugging its own text. This also overrides Bootstrap's
       "float:left" on li at desktop widths, so items stack in both. */
    display: grid;
    justify-items: stretch;
}

@media (min-width: 768px) {
    /* Bootstrap normally hides the toggle and always shows the nav links
       from this width up - keep the burger everywhere instead */
    .navbar-toggle {
        display: block !important;
    }

    /* Bootstrap also shrink-wraps navbar-header to the logo at this width,
       which would push the toggle right next to the logo instead of the
       far right of the bar - keep it full-width like on mobile */
    .navbar-header {
        float: none;
        width: 100%;
    }

    .navbar-collapse.collapse {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .navbar-collapse.collapse.in {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 20px;
        width: auto;
        border-top: 0;
    }
}

/* --- Scroll-to-top control - plain white arrow, matching the theme ------ */
#topcontrol {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 21px;
    line-height: 1;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    /* No z-index of its own otherwise, so the album grid overlay
       (z-index:1100, gallery/index.html) - a later addition to the
       page than this button - would paint over it despite this being
       position:fixed too. Needs to sit above both gallery overlays. */
    z-index: 1300;
}

#topcontrol:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* --- Elegant outline button (homepage "Albums" button) ------------------ */
.gallery-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 32px;
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.gallery-button:hover,
.gallery-button:focus {
    background-color: #fff;
    color: #000;
    text-decoration: none;
}

/* ==========================================================================
   Album grid view (shown after selecting an album, before the carousel)
   ========================================================================== */
#album-grid-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #0b0b0b;
    z-index: 1100;
    overflow-y: auto;
    padding: 70px 20px 40px;
    box-sizing: border-box;
}

#album-grid-overlay.open {
    display: block;
}

.album-grid-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: rgba(11, 11, 11, 0.92);
    z-index: 1101;
}

.album-grid-header .back-link {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 13px;
    cursor: pointer;
}

.album-grid-header .back-link:hover {
    opacity: 0.7;
}

.album-grid-header h3 {
    color: #fff;
    margin: 0;
    font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
}

@media (max-width: 600px) {
    /* The h3 is centered across the full header width while back-link
       sits absolutely at the left - on narrow screens a longer album
       name (e.g. "CEREMONY PHOTOS") reaches far enough to overlap it.
       Stack them into two rows instead of fighting for one line. */
    .album-grid-header {
        flex-direction: column;
        gap: 6px;
        padding: 12px 16px 10px;
    }

    .album-grid-header .back-link {
        position: static;
        transform: none;
    }

    #album-grid-overlay {
        padding-top: 92px;
    }
}

.album-grid {
    column-count: 4;
    column-gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
}

.album-grid img {
    width: 100%;
    display: block;
    margin-bottom: 12px;
    cursor: pointer;
    break-inside: avoid;
    background: #1a1a1a;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.album-grid img.loaded {
    opacity: 1;
}

.album-grid img.loaded:hover {
    opacity: 0.85;
}

@media (max-width: 992px) {
    .album-grid { column-count: 3; }
}

@media (max-width: 600px) {
    .album-grid { column-count: 2; column-gap: 8px; }
    .album-grid img { margin-bottom: 8px; }
}