/* ============================================================
   ALEX AURÓ — alexaurophoto.com
   Custom CSS for Format, Meridian theme
   Last updated: August 2026

   WHERE THIS LIVES
   Format Design editor → Code Editor → User Stylesheet CSS.
   Paste as raw CSS, no <style> tags.

   COMPANION SCRIPT — REQUIRED
   Site Settings → Custom <head> Include holds a small script that
   adds html.nav-solid once the page is scrolled past 120px. Without
   it the desktop nav never turns solid white on scroll (Section 3).
   That field also holds the Google Analytics tag — don't overwrite it.

   ------------------------------------------------------------
   MAGIC VALUES — what they mean and how to re-derive them
   ------------------------------------------------------------
   page_14526658   Format's internal body class for the hero page.
                   Scopes Sections 2, 3, 6 and parts of 7 so they
                   can't leak onto other pages. If that page is ever
                   rebuilt the ID changes and those rules go silently
                   dead. Re-check on the page itself with:
                     console.log(document.body.className)

   asset-302930351 Format-generated ID for the one image excluded
                   from the hover zoom (Section 7). Changes if that
                   image is deleted and re-added. Re-check by
                   right-clicking the image → Inspect and reading the
                   breadcrumb at the bottom of the Elements panel.

   768px           A conventional desktop/mobile breakpoint, chosen
                   here — NOT one of Meridian's. If the theme swaps to
                   its hamburger header at a different width, there's
                   a band where the two disagree. To find Meridian's
                   real breakpoint, run this and narrow the window;
                   the width where the burger stops being 'none' is it:
                     function probe() {
                       const b = document.querySelector('.mobile-menu-open-button');
                       console.log(window.innerWidth, b ? getComputedStyle(b).display : 'absent');
                     }
                     window.addEventListener('resize', probe); probe();
                   If it isn't 768, change every 767/768 below to match.

   75px            Height of the desktop header. Used in Section 1 to
                   give non-hero pages back the space the fixed nav no
                   longer occupies. Measure via Inspect → box model.

   open-mobile-menu  Class Meridian puts on <html> while the mobile
                     menu panel is open (Section 6).

   nav-solid         Class the head-include script puts on <html>
                     past 120px of scroll (Section 3).

   ------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------
   1  Nav — all pages, desktop: fixed position, centred width
   2  Hero slideshow — base rules, 16:9 (all widths)
   3  Hero nav overlay — desktop, incl. scroll-to-solid state
   4  Image zoom on hover — desktop
   5  Footer social icons — desktop, shrink + fade
   6  Hero — mobile: 3:4 slideshow, nav overlay, open-menu state
   7  Misc — applies at all widths

   Note on order: Section 7 comes last on purpose. Its
   .container.loaded rule must sit outside any media query — that
   was the fix for the image dropping below the bar between
   breakpoints.
   ============================================================ */


/* ============================================================
   SECTION 1 — Nav, all pages (desktop only)
   ============================================================ */

@media (min-width: 768px) {

  #menu_container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
  }

  /* Pulls the logo and nav links in from the window edges.
     Lower the max-width to tighten, raise it to spread out. */
  #menu_container .menu_padding {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* A fixed nav takes up no space in the flow, so every page EXCEPT
     the hero needs that height back — otherwise the first image or
     line of text hides behind the bar. 75px = header height. */
  body:not(.page_14526658) #content {
    padding-top: 75px !important;
  }

}


/* ============================================================
   SECTION 2 — Hero slideshow: full-width 16:9

   Deliberately NOT inside a media query. These are the base rules;
   Section 6 overrides only the aspect-ratio below 768px.

   The tns-* classes are Tiny Slider, the library Format's slideshow
   is built on. Those wrappers need an explicit height or the 16:9
   box on .format-slideshow never reaches the image.
   ============================================================ */

body.page_14526658 .format-slideshow {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.page_14526658 .format-slideshow__inner,
body.page_14526658 .format-slideshow__slide,
body.page_14526658 .format-slideshow__slide-image-wrapper,
body.page_14526658 .tns-outer,
body.page_14526658 .tns-inner {
  height: 100% !important;
}

body.page_14526658 .format-slideshow__slide-image {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
}


/* ============================================================
   SECTION 3 — Hero nav overlay (desktop only)

   Two states: transparent over the slideshow, then solid white once
   html.nav-solid appears past 120px of scroll. Positioning comes
   from Section 1; this section only handles appearance.
   ============================================================ */

@media (min-width: 768px) {

  /* Positioning context for the overlay */
  body.page_14526658 div.page {
    position: relative !important;
  }

  body.page_14526658 #menu_container {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    transition: background-color 0.35s ease !important;
  }

  /* Scrim: dark at the top, fading out below. Keeps white nav
     legible over bright slides without muddying the image.
     On a ::before rather than the container itself, so the text
     stays fully opaque. Lower 0.35 for a lighter tint. */
  body.page_14526658 #menu_container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0)) !important;
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 1 !important;
    transition: opacity 0.35s ease !important;
  }

  body.page_14526658 #menu_container a {
    color: #fff !important;
    transition: color 0.35s ease !important;
  }

  /* Social icons: the disc is the <path>, the glyph inherits from
     the <svg> root. Two separate handles — don't merge these. */
  body.page_14526658 #menu_container a svg {
    fill: #fff !important;
  }

  body.page_14526658 #menu_container a svg path {
    fill: #000 !important;
  }

  /* Meridian paints a white box behind nav links on hover, which
     makes white text vanish. Suppressed only while transparent —
     once solid, the theme's own hover behaviour is fine. */
  html:not(.nav-solid) body.page_14526658 #menu_container a.top_level_link:hover,
  html:not(.nav-solid) body.page_14526658 #menu_container li.item:hover,
  html:not(.nav-solid) body.page_14526658 #menu_container li.item:hover a {
    background: transparent !important;
    background-color: transparent !important;
    color: #000 !important;
  }

  /* --- Scrolled past 120px: solid white bar, black text --- */

  html.nav-solid body.page_14526658 #menu_container {
    background-color: #fff !important;
  }

  html.nav-solid body.page_14526658 #menu_container::before {
    opacity: 0 !important;
  }

  html.nav-solid body.page_14526658 #menu_container a {
    color: #000 !important;
  }

}


/* ============================================================
   SECTION 4 — Image zoom on hover (desktop only)

   Covers both image sources: Flex Block images
   (.flex-grid-asset__image) and linked gallery images
   (._4ORMAT_content_page_row a). Hero slideshow images are in
   neither group, so they're excluded by construction.

   Hover sits on the wrapper, not the image — otherwise the image
   scales out from under the cursor and flickers.
   ============================================================ */

@media (min-width: 768px) {

  /* Clip, so the image zooms inside its frame instead of
     pushing its neighbours around */
  .flex-grid-asset__image,
  .flex-grid-asset__image > div,
  ._4ORMAT_content_page_row a,
  ._4ORMAT_content_page_row a > div {
    overflow: hidden !important;
  }

  .flex-grid-asset__image img,
  ._4ORMAT_content_page_row a img {
    transition: transform 0.5s ease !important;
  }

  /* 1.04 = 4%. Anything past 1.08 starts to feel like a sales page. */
  .flex-grid-asset__image:hover img,
  ._4ORMAT_content_page_row a:hover img {
    transform: scale(1.04) !important;
  }

}


/* ============================================================
   SECTION 5 — Footer social icons (desktop only)

   Opposite behaviour to Section 4: these shrink and fade toward
   the white page background instead of zooming.

   Targeted by link destination rather than asset ID, so this keeps
   working if the footer is rebuilt or duplicated to another page.
   Outranks Section 4 on specificity regardless of order.
   ============================================================ */

@media (min-width: 768px) {

  .flex-grid-asset__image a[href*="instagram.com"] img,
  .flex-grid-asset__image a[href*="instagram.com"] svg,
  .flex-grid-asset__image a[href*="linkedin.com"] img,
  .flex-grid-asset__image a[href*="linkedin.com"] svg {
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }

  /* 0.9 = 10% smaller. 0.45 opacity puts black at about mid-grey
     on white; raise toward 0.6 for a subtler fade. */
  .flex-grid-asset__image a[href*="instagram.com"]:hover img,
  .flex-grid-asset__image a[href*="instagram.com"]:hover svg,
  .flex-grid-asset__image a[href*="linkedin.com"]:hover img,
  .flex-grid-asset__image a[href*="linkedin.com"]:hover svg {
    transform: scale(0.9) !important;
    opacity: 0.45 !important;
  }

}


/* ============================================================
   SECTION 6 — Hero on mobile

   Portrait 3:4 slideshow with the same overlay treatment, plus a
   black-text state for when the hamburger panel is open.
   ============================================================ */

@media (max-width: 767px) {

  /* Portrait crop — chosen over 4:3 despite cropping the buildings
     harder, because it fills a phone screen better */
  body.page_14526658 .format-slideshow {
    aspect-ratio: 3 / 4 !important;
  }

  body.page_14526658 div.page {
    position: relative !important;
  }

  /* fixed, not absolute — absolute alone didn't lift the bar out
     of the flow here, same as on desktop */
  body.page_14526658 #menu_container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
  }

  body.page_14526658 #menu_container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0)) !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  body.page_14526658 #menu_container a {
    color: #fff !important;
  }

  /* Hamburger icon white over the photo */
  body.page_14526658 .mobile-menu-open-button,
  body.page_14526658 .mobile-menu-trigger {
    color: #fff !important;
  }

  body.page_14526658 .mobile-menu-open-button svg,
  body.page_14526658 .mobile-menu-trigger svg {
    fill: #fff !important;
  }

  /* --- Menu panel open: switch to black so it reads on white --- */

  html.open-mobile-menu body.page_14526658 #menu_container a {
    color: #000 !important;
  }

  html.open-mobile-menu body.page_14526658 .mobile-menu-open-button svg,
  html.open-mobile-menu body.page_14526658 .mobile-menu-trigger svg {
    fill: #000 !important;
  }

  /* Scrim off while the panel is open — a dark gradient across a
     white panel looks like a rendering fault */
  html.open-mobile-menu body.page_14526658 #menu_container::before {
    opacity: 0 !important;
  }
  
    /* Hamburger bars aren't an SVG — they're drawn elements.
     Only white while the panel is closed; black once open. */
  html:not(.open-mobile-menu) body.page_14526658 .mobile-menu-open-button span,
  html:not(.open-mobile-menu) body.page_14526658 .mobile-menu-open-button div,
  html:not(.open-mobile-menu) body.page_14526658 .mobile-menu-trigger span,
  html:not(.open-mobile-menu) body.page_14526658 .mobile-menu-trigger div,
  html:not(.open-mobile-menu) body.page_14526658 .mobile-menu-open-button::before,
  html:not(.open-mobile-menu) body.page_14526658 .mobile-menu-open-button::after {
    background-color: #fff !important;
    border-color: #fff !important;
  }

}


/* ============================================================
   SECTION 7 — Misc, all widths
   ============================================================ */

/* Meridian reserves space above the content for its mobile header
   (91px when this was measured). The overlay never needs it.
   Must stay OUTSIDE any media query: when it was scoped to mobile
   only, the image dropped below the bar in the band between
   Meridian's own breakpoint and the 768px used here. */
body.page_14526658 .container.loaded {
  margin-top: 0 !important;
}

/* One image excluded from the Section 4 hover zoom.
   Format-generated ID — changes if that image is re-added. */
#asset-302930351:hover img {
  transform: none !important;
}

/* Hero slideshow crossfade length. Not exposed in Format's
   slideshow settings, which only control how long each slide
   holds. Around 2s starts to feel languid. */
body.page_14526658 .format-slideshow__slide {
  transition-duration: 1.5s !important;
}

/* Image sets fade the image on hover, which reads as a white wash
   against the white page background. Keep them opaque.
   The footer icons in Section 5 use a more specific selector, so
   their deliberate 0.45 fade still wins over this. */
._4ORMAT_content_page_row a:hover img {
  opacity: 1 !important;
}

/* The logo sits in an h1 with no padding while the nav links carry
   12.6px top and bottom, so their centres land 1px apart.
   A nudge, not a structural fix — matching the padding properly
   would change the header height and throw off the 75px above. */
#menu_container .header_container h1 {
  position: relative !important;
  top: 1px !important;
}

