/* ===================================
   Site header / navigation
   ===================================

   Shared by the home page and the four category gallery pages, which is why
   this moved out of hero-fullbleed.css - a gallery page has no hero, and it
   was odd for it to be pulling its nav styling from a file named after one.

   Everything here overrides style.css, whose header is the Sydney template's:
   16px bold white links, each padded out to a 130px-wide centred block, and a
   brand sitting inside a centred Bootstrap .container. The reference Diana
   picked does the opposite on every count - a small, light, widely-tracked
   grey nav, and a mark hard against the left edge of the viewport.

   Reference measurements this is built from (taken off erikalmas.com at
   1920px): links 14px / weight 300 / 1px letter-spacing / uppercase /
   #8c8d8d, logo flush left at about x=20.

   The greys are lighter here than the reference's because this header sits
   over dark photography and a near-black bar rather than white. The
   relationship is what is being copied - muted by default, brighter on hover -
   not the literal hex.
====================================== */

/* ===================================
   The bar
====================================== */

/* style.css paints #home an opaque tan that would cut a band across the top of
   the hero photography. The id selector is what outranks it. */
header#home {
    background-color: transparent;
}

/* The bar carries no background at any scroll position - it floats over
   whatever is beneath it, the way it already did over the hero.

   It used to fill with rgba(11,11,13,.94) once script.js added .header-appear.
   Dropping that fill only works because the link colour now adapts: measured
   against the white cover section, light nav text on a transparent bar scores
   1.9 contrast and the white wordmark scores 1.0 - invisible. A part-way scrim
   is worse still, not better; at alpha .25-.35 the composite grey lands almost
   exactly on the link grey and contrast bottoms out at 1.07.

   So instead of tinting the bar, .nav-on-light flips the type. See
   nav-contrast.js for when it is applied. */
.inner-header.header-appear {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* style.css drops a 0 10px 10px -10px shadow under the sticky bar. That
       made sense under an opaque slab; under a transparent or near-white bar
       it reads as a smudge across whatever is scrolling beneath. */
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* ===================================
   Light-section nav

   Over the white cover grid and the white category pages. #8c8d8d is the
   reference's own nav colour, which it can use everywhere because its whole
   site is white; here it applies only where the ground actually is.

   A near-white scrim comes back on these sections, and it is not a
   half-measure - it is the only version that survives what is actually behind
   the bar. Fully transparent was tried and fails twice over: white text on
   white ground measures 1.0 contrast, and more importantly the cover grid's
   photographs scroll directly under the bar, so even correctly-flipped grey
   type lands on a football pitch or a mural and disappears.

   .88 keeps it reading as light and airy rather than as a solid toolbar, while
   holding #8c8d8d at ~3:1 against it - the WCAG floor for secondary UI text.
   The blur does the rest of the work over busy photographs.

   The dark sections need no equivalent: the hero carries its own top gradient
   (hero-fullbleed.css) and About and Contact are flat near-black with no
   imagery behind the bar.
====================================== */

.inner-header.nav-on-light,
.page-gallery .inner-header {
    background-color: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.inner-header.nav-on-light .navbar-brand.logo-text,
.page-gallery .inner-header .navbar-brand.logo-text {
    color: #16171a;
}

/* These have to mirror the full base selector
   (header .main-navigation nav .navbar-nav .nav-link, specificity 0-3-2) or
   they lose to it. A shorter `.inner-header.nav-on-light .nav-link` is only
   0-3-0 and silently does nothing - which it did, leaving the links light on
   white while the wordmark flipped correctly. */
.inner-header.nav-on-light .main-navigation nav .navbar-nav .nav-link,
.page-gallery .inner-header .main-navigation nav .navbar-nav .nav-link {
    color: #8c8d8d;
}

.inner-header.nav-on-light .main-navigation nav .navbar-nav .nav-link:hover,
.inner-header.nav-on-light .main-navigation nav .navbar-nav .nav-link:focus-visible,
.inner-header.nav-on-light .main-navigation nav .navbar-nav .nav-link.active,
.page-gallery .inner-header .main-navigation nav .navbar-nav .nav-link:hover,
.page-gallery .inner-header .main-navigation nav .navbar-nav .nav-link:focus-visible {
    color: #16171a;
}

.inner-header.nav-on-light .sidemenu_btn span,
.page-gallery .inner-header .sidemenu_btn span {
    background: #8c8d8d;
}

.inner-header.nav-on-light .sidemenu_btn:hover span,
.page-gallery .inner-header .sidemenu_btn:hover span {
    background: #16171a;
}

/* Category pages are white top to bottom, so they take the light treatment
   statically rather than waiting on the observer - see the rule above. */

header .main-navigation {
    padding: 22px 0;
}

/* Full-bleed instead of a centred .container, so the brand can sit hard left.
   25px matches the gallery's own outer inset, which lines the wordmark up with
   the left edge of the photographs below it. */
.main-navigation .container {
    max-width: 100%;
    width: 100%;
    padding-left: 25px;
    padding-right: 25px;
}

.main-navigation .row {
    margin-left: 0;
    margin-right: 0;
    align-items: center;
}

.main-navigation .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* ===================================
   Wordmark
====================================== */

.inner-header .navbar-brand {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.navbar-brand.logo-text {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 200;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    transition: opacity .25s ease;
}

.navbar-brand.logo-text:hover,
.navbar-brand.logo-text:focus-visible {
    color: #ffffff;
    opacity: .72;
}

/* Pinned to the same corner, at the same size and tracking, as the navbar's
   wordmark - 25px in and level with it - so opening the menu does not appear
   to move the brand. It was previously centred at the top of the panel and
   22px, which read as a different element entirely. */
.side-menu .navbar-brand.logo-text {
    position: absolute;
    top: 27px;
    left: 25px;
    z-index: 2;
    font-size: 15px;
    letter-spacing: 3px;
}

/* ===================================
   Links

   The template padded every link to min-width:130px and centred the text
   inside it, which is what made the old nav look like a row of buttons. Real
   spacing between real-width links instead.
====================================== */

header .main-navigation nav .navbar-nav .nav-link {
    min-width: 0;
    text-align: left;
    padding: 0;
    margin-left: 34px;
    color: #b8bcc4;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 200;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .25s ease;
}

header .main-navigation nav .navbar-nav .nav-link:hover,
header .main-navigation nav .navbar-nav .nav-link:focus-visible,
header .main-navigation nav .navbar-nav .nav-link.active {
    color: #ffffff;
}

/* Decorative caret the template parks next to the first link. The reference
   has no such ornament and it renders as a stray mark above "Inicio". */
.main-navigation .menu-line {
    display: none;
}

/* ===================================
   Hamburger

   Redundant on desktop: it opens a side menu listing the same four links
   already visible in the bar, and the reference has no burger at all. Kept
   below lg, where Bootstrap collapses the inline links and it becomes the
   only way to navigate.
====================================== */

/* Specificity, not source order, does the hiding here. The icon rules further
   down this file also set `display` on .sidemenu_btn, and at equal specificity
   the later rule would win and put the burger back on desktop - which is
   exactly what happened the first time. `.inner-header .sidemenu_btn` outranks
   a bare `.sidemenu_btn` wherever each one sits in the file. */
@media (min-width: 992px) {
    .inner-header .sidemenu_btn {
        display: none;
    }
}

/* Below lg the wordmark holds the left edge, so the burger moves to the right
   rather than sitting on top of it. */
@media (max-width: 991px) {
    .sidemenu_btn {
        left: auto;
        right: 20px;
        top: 22px;
        margin-right: 0;
    }

    .main-navigation .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ===================================
   Hamburger icon

   Rebuilt to the reference's own geometry, measured off it directly:

     container   60 x 60, top right
     three bars  40 x 2 each
     bar tops    15px apart (so a 13px gap between them)
     colour      #8c8d8d - the same grey as its nav links

   The template's was 36px wide with tighter spacing, which read as a chunkier,
   more conventional burger. The reference's is wider, thinner and airier.

   The colour is the one thing not copied literally: #8c8d8d is a mid grey
   chosen against white, and this bar sits on dark photography. It takes the
   nav link colour instead, so the burger and the links stay the same weight
   as each other - which is the relationship the reference actually has.
====================================== */

.sidemenu_btn {
    width: 60px;
    height: 60px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 13px;
}

/* The nth-child(2) selector is not decorative - style.css puts `margin: 4px 0`
   on the middle bar only, which both widened its gaps and knocked it out of
   line with the other two. Restating margin and alignment on all three keeps
   the stack even, so `gap` alone controls the 13px pitch. */
.sidemenu_btn span,
.sidemenu_btn span:nth-child(2) {
    width: 40px;
    height: 2px;
    margin: 0;
    align-self: flex-end;
    background: #b8bec4;
    display: block;
    transition: background-color .25s ease;
}

.sidemenu_btn:hover span,
.sidemenu_btn:focus-visible span {
    background: #ffffff;
}

/* style.css gives the first and last bar a hover translate to fan them apart.
   The reference's stays put. */
.sidemenu_btn:hover span:first-child,
.sidemenu_btn:hover span:last-child {
    width: 40px;
    transform: none;
}

/* ===================================
   Open menu overlay

   Reference: an 85%-black scrim over the page, the links right-aligned in
   16px / 300 / 1px uppercase, about 32px apart, and a thin X where the burger
   was. Diana's overlay keeps her contact details underneath, which the
   reference has no equivalent of - they earn their place on a phone, where
   this menu is the only nav.
====================================== */

/* Fades in, rather than sliding up from the bottom edge.

   style.css animates this panel on `transform: translate3d(0, 100%, 0)`, which
   parks it a full viewport below the fold while closed - and that parking is
   also what keeps a closed menu from swallowing every click on the page, since
   the panel is a fixed, full-screen layer. Trading the slide for a fade leaves
   it sitting over the page at all times, so `visibility` has to take over that
   job: opacity alone would fade the menu out of sight and keep it in front of
   everything underneath.

   Hence the two transitions rather than one. Going out, visibility is delayed
   by the length of the fade so the panel stays visible long enough to actually
   fade; coming in, it flips to visible immediately so there is something to
   fade in. Both states restate `transform: none` because style.css sets a
   transform on each of them separately.

   Note what is NOT faded here: this panel's own opacity. An element with
   opacity below 1 becomes a "backdrop root", and a backdrop root isolates the
   group so that a backdrop-filter inside it has nothing left to sample. Fading
   the panel as a whole therefore held the scrim's blur (below) inert for the
   entire animation, and then the moment opacity reached exactly 1 the backdrop
   root stopped existing and the blur appeared at full strength in one frame -
   the abrupt snap at the end of an otherwise smooth fade. So the panel itself
   only ever carries visibility, and the fade is done one level down, by the two
   children: the scrim animates its own alpha and blur, the content its opacity.
   Same .45s on all three, so they still read as one movement. */
.side-menu {
    transform: none;
    visibility: hidden;
    transition: visibility 0s linear .45s;
}

.side-menu.side-menu-active {
    transform: none;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

/* Thinner than before (was .72, and .95 before that), following the reference,
   which lets much more of what is behind the menu read through it. The blur is
   what keeps the links legible at this opacity - without it, type over a bright
   patch of a photograph loses its edges, and over the white portfolio section
   the menu and the covers underneath simply collide. The thinner the scrim, the
   more of that work the blur is doing, which is why it is not optional here.

   Both the colour and the blur are animated rather than simply applied, so the
   scrim darkens and the backdrop softens over the same .45s the content takes
   to fade in. blur(0px) rather than `none` as the resting value: a length
   interpolates to blur(14px) frame by frame, which is the whole point. */
.side-menu .bg-overlay {
    background-color: rgba(11, 11, 13, 0);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: background-color .45s ease,
                -webkit-backdrop-filter .45s ease,
                backdrop-filter .45s ease;
}

.side-menu.side-menu-active .bg-overlay {
    background-color: rgba(11, 11, 13, .45);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Wordmark, close control and links all live in .inner-wrapper, so one rule
   fades the lot - and it sits below the scrim's backdrop-filter rather than
   above it, so its opacity never isolates that filter (see the note above). */
.side-menu .inner-wrapper {
    opacity: 0;
    transition: opacity .45s ease;
}

.side-menu.side-menu-active .inner-wrapper {
    opacity: 1;
}

.side-menu .side-nav .navbar-nav {
    align-items: flex-end;
    width: 100%;
}

.side-menu .side-nav .nav-item {
    margin: 0;
}

.side-menu .side-nav .nav-link {
    color: #b8bec4;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 200;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: right;
    padding: 8px 0;
    transition: color .25s ease;
}

.side-menu .side-nav .nav-link:hover,
.side-menu .side-nav .nav-link:focus-visible {
    color: #ffffff;
}

/* Close control: two hairlines crossed, matching the bars they replace rather
   than the template's heavier glyph. */
/* `left: auto` is load-bearing: style.css pins this to `left: 40px`, and
   setting only `right` leaves both edges specified, where left wins - which
   parked the X on top of the wordmark in the opposite corner. */
.side-menu .btn-close {
    position: absolute;
    top: 28px;
    left: auto;
    right: 25px;
    width: 40px;
    height: 40px;
    opacity: 1;
    background: none;
}

/* style.css draws its own X on this element with ::before/::after. The markup
   also carries two <i> children, which the rule below turns into a second X on
   top of the first - two crosses, very slightly offset. Only one of them can
   be styled to match the burger's hairline weight, so the pseudo-element pair
   is switched off and the <i> pair kept. */
.side-menu .btn-close::before,
.side-menu .btn-close::after {
    display: none;
}

.side-menu .btn-close i {
    position: absolute;
    top: 50%;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: #b8bec4;
    transition: background-color .25s ease;
}

.side-menu .btn-close i:first-child {
    transform: rotate(45deg);
}

.side-menu .btn-close i:last-child {
    transform: rotate(-45deg);
}

.side-menu .btn-close:hover i {
    background-color: #ffffff;
}

/* Contact details under the links, quieted to sit below them in the hierarchy. */
.side-menu .side-footer,
.side-menu .side-footer a,
.side-menu .side-footer p {
    color: #7c818b;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 200;
    letter-spacing: 1px;
}

.side-menu .side-footer a:hover {
    color: #ffffff;
}

/* ===================================
   Footer

   Pinned to the bottom-right corner of the viewport with no background of its
   own, the way the reference parks its social icons - it sits over the page
   rather than ending it. Previously it was a Bootstrap row in normal flow with
   a solid fill, which disappeared entirely once About and Contact became
   full-height sections.

   The grey is a deliberate mid-tone. Because this is fixed, one line of type
   has to stay legible over everything that scrolls beneath it, and this page
   alternates near-black (hero, About, Contact) with white (the cover grid, and
   the category pages). #8b8f98 has enough contrast against both; a light or
   dark colour would vanish against one of them.

   z-index sits below the header (111) and well below the side menu (2032), so
   the open menu covers it rather than trapping it on top.
====================================== */

footer.site-footer {
    position: fixed;
    right: 25px;
    bottom: 18px;
    z-index: 100;
    margin: 0;
    padding: 0;
    background: none;
    pointer-events: none;
}

footer.site-footer .company-about {
    margin: 0;
    color: #8b8f98;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 200;
    letter-spacing: 1px;
}

@media (max-width: 767px) {
    footer.site-footer {
        right: 16px;
        bottom: 12px;
    }

    footer.site-footer .company-about {
        font-size: 11px;
    }
}