/* Theme overrides for the redesign. Loaded after main.css so these win.
   main.css ships the old blue-grey palette (body #2e3842, .wrapper.style1
   #2C2F39 with #c8ece9 text); everything below moves the site onto the warm
   near-black + gold scheme and fixes the header/banner to match. */

/* ---------- Palette ---------- */
body {
  background: #1b1f22;
}

.wrapper.style1,
.wrapper.style2,
.wrapper.style3 {
  background-color: #1b1f22;
  color: rgba(244,242,238,0.7);
}

/* One continuous ground, with hairlines instead of color blocks to separate
   sections (the old palette relied on alternating background colors). */
.wrapper.style1 + .wrapper.style1,
.wrapper.style2 + .wrapper.style2,
.pricing-section,
.wrapper.style2.special {
  border-top: 1px solid rgba(244,242,238,0.12);
}

.wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3,
.wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6,
.wrapper.style2 h1, .wrapper.style2 h2, .wrapper.style2 h3,
.wrapper.style2 h4, .wrapper.style2 h5, .wrapper.style2 h6 {
  color: #f4f2ee;
}

.wrapper.style1 strong, .wrapper.style1 b,
.wrapper.style2 strong, .wrapper.style2 b {
  color: #f4f2ee;
}

.wrapper.style1 header p,
.wrapper.style1 header.major p {
  color: rgba(244,242,238,0.7);
}

#footer {
  background-color: #1b1f22;
  border-top: 1px solid rgba(244,242,238,0.12);
  color: rgba(244,242,238,0.5);
}

/* ---------- Header ---------- */
#header {
  background: rgba(27,31,34,0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(244,242,238,0.1);
  height: 3.5em;
  line-height: 3.5em;
}

/* main.css hides the header entirely at the top of the landing page
   (#header.alt is opacity:0) — keep it visible so the nav is always reachable. */
#header.alt {
  background: rgba(27,31,34,0.55);
  opacity: 1;
}

/* The logo used to be every page's <h1>, leaving each page's real heading
   one level down; it's a <p> now, so this carries over what main.css's
   h1 / #header h1 rules gave it. */
#header .site-logo {
  position: absolute;
  top: 0;
  left: 1.25em;
  height: inherit;
  line-height: inherit;
  margin: 0;
}

#header .site-logo a {
  display: block;
  height: inherit;
  line-height: inherit;
  border: 0;
  text-decoration: none;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: #f4f2ee;
}

@media screen and (max-width: 736px) {
  #header .site-logo a {
    font-size: 0.8em;
  }
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.4em;
  margin-right: 1.4em;
}

.header-nav a {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,242,238,0.68);
  text-decoration: none;
  border-bottom: none;
}

.header-nav a:hover,
.header-nav a.current {
  color: #e8c16e;
}

@media screen and (max-width: 736px) {
  .header-nav {
    gap: 0.9em;
    margin-right: 0.9em;
  }
  /* 0.62em came out at 9px — too small to read or hit on a phone. */
  .header-nav a {
    font-size: 0.75em;
    letter-spacing: 0.1em;
    padding: 0 0.2em;
  }
  .igheader .iconheader {
    display: none;
  }
}

/* ---------- Banner ---------- */
/* The banner keeps main.css's full-screen 100vh height — the landing page
   opens on a full screen of photo and nothing else. */

/* Fade the banner into the section below, matching .pricing-banner-wrap::after
   on the outdoor/studio pages. main.css already uses #banner:after for its
   preload curtain, so the gradient goes on :before. */
#banner:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(27,31,34,0), #1b1f22);
  pointer-events: none;
  z-index: 0;
}

/* Keep the banner copy above the new gradient. */
#banner .inner {
  position: relative;
  z-index: 2;
}

/* The same for Learn More — but only the stacking, not the positioning:
   main.css pins it to the bottom of the banner with position:absolute, and
   as position:relative it fell into the flex flow and rode up and down with
   .mainpage's margin instead of staying put. */
#banner .more {
  z-index: 2;
}

/* main.css's preload curtain still fades from the old blue-grey. */
#banner:after {
  background: #1b1f22;
}

/* main.css lifts the banner copy off centre with .mainpage{margin-bottom:50vh}
   — half a viewport of offset put the title up near the header. Less of a
   lift leaves it high in the frame but not crowding the top. */
#banner .inner.mainpage {
  margin-bottom: 30vh;
}

/* The banner subtitle's second line is secondary information — break it onto
   its own line (main.css hides #banner br under 736px) and set it smaller. */
#banner .banner-location {
  display: block;
  font-size: 0.8em;
  opacity: 0.85;
  margin-top: 0.35em;
}

/* On a phone the banner is short and the page is a thumb-flick anyway, so
   Learn More is just something in front of the photo. (main.css hides it at
   this width too — this says so where the rest of the banner is styled.) */
@media screen and (max-width: 736px) {
  #banner .more {
    display: none;
  }

  /* main.css drops the banner to its content height here, which squeezed
     banner-mobile.jpg until the title landed on the model's head. Full
     screen on a phone too, with the copy up in the empty sky above her. */
  #banner {
    min-height: 100vh;
    min-height: 100svh;
    justify-content: flex-start;
    padding-top: 5.5em;
  }

  #banner .inner.mainpage {
    margin-bottom: 0;
  }

  /* Pull the intro up under the banners' fade instead of leaving a band of
     empty background between them. */
  .page-intro {
    padding-top: 1em;
  }
}

/* ---------- Gallery ---------- */
/* Fade the gallery's scrolling edge so a photo cut off at the side reads as
   "more this way" rather than a cropping mistake. galleries.js sets
   .at-start/.at-end so the fade goes away once there's nothing further. */
.gallery.style4 > .inner {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4em, #000 calc(100% - 4em), transparent);
  mask-image: linear-gradient(to right, transparent, #000 4em, #000 calc(100% - 4em), transparent);
}
.gallery.style4.at-start > .inner {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4em), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 4em), transparent);
}
.gallery.style4.at-end > .inner {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4em);
  mask-image: linear-gradient(to right, transparent, #000 4em);
}
.gallery.style4.at-start.at-end > .inner {
  -webkit-mask-image: none;
  mask-image: none;
}

/* On a phone the two 4em fades ate a third of the screen, and swiping
   already says "there's more". Same for main.css's hover-only
   .forward/.backward arrow strips: a tap leaves :hover stuck on, shading
   both sides (main.js only removes them in portrait). */
@media (hover: none), (max-width: 736px) {
  .gallery.style4 > .inner,
  .gallery.style4.at-start > .inner,
  .gallery.style4.at-end > .inner {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .gallery.style4 > .forward,
  .gallery.style4 > .backward {
    display: none;
  }
}

/* main.css's 50vh photo height, pinned in px by galleries.js so a mobile
   toolbar sliding in/out (Firefox) doesn't resize every photo; 50vh stays
   the fallback until the script runs. */
.gallery.style4 article .image img {
  height: var(--gallery-img-h, 50vh);
}

/* Lightbox previous/next (added by main.js). */
.gallery.lightbox .modal .modal-nav {
  position: absolute;
  top: 50%;
  width: 3.5rem;
  height: 5rem !important;
  margin-top: -2.5rem;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  z-index: 1;
  opacity: 0.7;
}
.gallery.lightbox .modal .modal-nav:hover {
  opacity: 1;
}
.gallery.lightbox .modal .modal-nav:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}
.gallery.lightbox .modal .modal-nav.prev {
  left: 0.5rem;
}
.gallery.lightbox .modal .modal-nav.prev:before {
  transform: translate(-30%, -50%) rotate(-45deg);
}
.gallery.lightbox .modal .modal-nav.next {
  right: 0.5rem;
}
.gallery.lightbox .modal .modal-nav.next:before {
  transform: translate(-70%, -50%) rotate(135deg);
}
.gallery.lightbox .modal.single .modal-nav {
  display: none;
}

/* ---------- Contact dock ---------- */
/* main.css gives every .button an inset 2px white ring and fixed 3.125em
   height, which fights the pill shape — reset both here. */
.dock .button {
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  height: auto;
  line-height: 1.5;
  padding: 0.85em 1.7em;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 30px;
}

/* Book Now is the gold pill, Questions? the dark one beside it. The ring
   goes with the dark pill, which needs an edge against the photo; the gold
   keeps the plain drop shadow from .dock .button. */
.dock .dock-book {
  background-color: #e8c16e;
  color: #1b1f22;
}

.dock .dock-book:hover {
  background-color: #f0ce82;
  color: #1b1f22;
}

.dock .dock-ask {
  background-color: rgba(27,31,34,0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(244,242,238,0.45), 0 6px 22px rgba(0,0,0,0.45);
  color: #f4f2ee;
}

.dock .dock-ask:hover {
  background-color: rgba(244,242,238,0.12);
  color: #f4f2ee;
}

#banner .inner p { margin-bottom: 1.2em; }
#banner h1 { max-width: 24em; }
@media screen and (max-width: 736px) {
  #banner { padding-left: 1.5em; padding-right: 1.5em; }
  #banner h1 { font-size: 1.25em; letter-spacing: 0.12em; line-height: 1.5; }
  #banner .inner p { font-size: 0.8em; letter-spacing: 0.12em; }
}
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #e8c16e;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}