/*
Theme Name:   Stewalker Child
Theme URI:    https://www.stewalkerphotography.com
Description:  Child theme for Stewalker — brand refresh applying the Investment page design system globally.
Author:       Stephen Walker Photography
Template:     stewalker
Version:      1.0
*/

/* ============================================================
   STEPHEN WALKER PHOTOGRAPHY — BRAND DESIGN SYSTEM
   Mirrors the design language established in page-investment.php
   ============================================================ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@200;300;400&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  --navy:    #0F1B2D;
  --navy2:   #162236;
  --navy3:   #1C2D42;
  --plat:    #B8A98A;
  --platlt:  #CEC0A6;
  --ivory:   #F4EADE;
  --muted:   rgba(244, 234, 222, 0.55);
  --border:  rgba(184, 169, 138, 0.18);
  --serif:   'Playfair Display', Georgia, serif;
  --sans:    'Inter', system-ui, sans-serif;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */

html,
body {
  background: var(--navy) !important;
  color: var(--ivory) !important;
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  padding: 0 !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── LINKS ── */
a {
  color: var(--plat) !important;
  text-decoration: none !important;
  transition: color 0.25s ease, opacity 0.25s ease;
}

a:hover,
a:focus {
  color: var(--platlt) !important;
  opacity: 0.85;
}

/* ── SELECTION ── */
::selection {
  background: var(--plat);
  color: var(--navy);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.5rem) !important; }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem) !important; }
h3 { font-size: clamp(1.3rem, 2vw, 1.8rem) !important; }
h4 { font-size: 1.2rem !important; }

h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
}

p {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  line-height: 1.8 !important;
  background: none !important;
  background-color: transparent !important;
  text-transform: none !important;
}

/* ── CAPS LABEL ── */
.swp-cap,
.eyebrow,
.label-cap {
  font-family: var(--sans) !important;
  font-size: 0.55rem !important;
  font-weight: 200 !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase !important;
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
  display: block;
}

blockquote {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem) !important;
  color: rgba(244, 234, 222, 0.72) !important;
  -webkit-text-fill-color: rgba(244, 234, 222, 0.72) !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  line-height: 1.75 !important;
  margin: 0 0 1.5rem !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* Top bar / nav wrapper */
nav,
.top-bar,
#top-bar,
.nav-wrapper,
.site-header,
header.site-header,
#masthead {
  background: var(--navy) !important;
  background-color: var(--navy) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Nav links */
nav a,
.top-bar a,
.nav-wrapper a,
#masthead a,
.site-header a,
.menu a,
.nav-menu a {
  font-family: var(--sans) !important;
  font-size: 0.55rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: rgba(244, 234, 222, 0.6) !important;
  -webkit-text-fill-color: rgba(244, 234, 222, 0.6) !important;
  transition: color 0.25s ease !important;
  background: transparent !important;
}

nav a:hover,
.top-bar a:hover,
.menu a:hover,
.nav-menu a:hover {
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
}

/* Active nav item */
nav .current-menu-item > a,
.top-bar .active > a,
.menu .current-menu-item > a {
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
}

/* Dropdown menus */
nav .dropdown,
.top-bar .dropdown-menu,
nav ul ul,
.top-bar ul ul {
  background: var(--navy2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4) !important;
}

nav ul ul a,
.top-bar ul ul a {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
}

nav ul ul a:hover,
.top-bar ul ul a:hover {
  background: var(--navy3) !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
}

/* ── LOGO ── */
.site-logo,
.logo,
#logo,
.site-title,
.site-title a {
  font-family: var(--serif) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
}

/* ============================================================
   LAYOUT & CONTAINERS
   ============================================================ */

.row,
.container,
.wrap,
main,
#main,
.site-content,
#content,
.content-area {
  background: transparent !important;
  color: var(--ivory) !important;
}

/* ============================================================
   BUTTONS & CTAs
   ============================================================ */

.button,
.btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
a.button,
a.btn {
  font-family: var(--sans) !important;
  font-size: 0.56rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.38em !important;
  text-transform: uppercase !important;
  background: var(--plat) !important;
  border: 1px solid var(--plat) !important;
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
  padding: 1.1rem 2.8rem !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  -webkit-appearance: none !important;
  text-decoration: none !important;
}

.button:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
a.button:hover,
a.btn:hover {
  background: transparent !important;
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
}

/* Outline variant */
.button.outline,
.btn-outline,
a.button.outline {
  background: transparent !important;
  border-color: var(--plat) !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
}

.button.outline:hover,
.btn-outline:hover {
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
}

/* ── GRAVITY FORMS submit ── */
.gform_footer input[type="submit"],
.gform_wrapper input[type="submit"],
#gform_submit_button_1,
[id^="gform_submit_button"] {
  font-family: var(--sans) !important;
  font-size: 0.56rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.38em !important;
  text-transform: uppercase !important;
  background: var(--plat) !important;
  border: 1px solid var(--plat) !important;
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
  padding: 1.1rem 2.8rem !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  -webkit-appearance: none !important;
}

.gform_footer input[type="submit"]:hover,
[id^="gform_submit_button"]:hover {
  background: transparent !important;
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
}

/* ── Custom button wrapper from functions.php ── */
.button-wrapper .button-outer .button {
  background: var(--plat) !important;
  border-color: var(--plat) !important;
  color: var(--navy) !important;
}

/* ============================================================
   FORMS (Gravity Forms & standard WP)
   ============================================================ */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: var(--navy2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--ivory) !important;
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 0.9rem !important;
  padding: 0.9rem 1rem !important;
  transition: border-color 0.25s ease !important;
  width: 100% !important;
  -webkit-appearance: none !important;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--plat) !important;
}

.gform_wrapper label,
.gform_wrapper .gfield_label,
label {
  font-family: var(--sans) !important;
  font-size: 0.52rem !important;
  font-weight: 200 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
}

/* ============================================================
   GALLERY / PORTFOLIO
   ============================================================ */

/* Gallery container */
.gallery,
#portfolio,
.portfolio-wrap,
.isotope,
.gallery-wrap {
  background: var(--navy) !important;
}

/* Gallery item hover overlay */
.gallery-item::after,
.portfolio-item::after,
.gallery-item .overlay,
.portfolio-item .overlay {
  background: rgba(15, 27, 45, 0.75) !important;
}

/* Gallery captions */
.gallery-caption,
.wp-caption-text {
  font-family: var(--sans) !important;
  font-size: 0.7rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.15em !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
}

/* ── Portfolio nav (pagination from functions.php) ── */
#portfolio-nav a {
  font-family: var(--sans) !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
  border: 1px solid var(--border) !important;
  padding: 0.7rem 1.6rem !important;
  transition: all 0.25s ease !important;
}

#portfolio-nav a:hover {
  border-color: var(--plat) !important;
  background: transparent !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

footer,
.site-footer,
#colophon {
  background: var(--navy2) !important;
  border-top: 1px solid var(--border) !important;
  padding: 4rem 3rem !important;
  text-align: center !important;
}

footer a,
.site-footer a,
#colophon a {
  font-family: var(--sans) !important;
  font-size: 0.46rem !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(244, 234, 222, 0.25) !important;
  -webkit-text-fill-color: rgba(244, 234, 222, 0.25) !important;
  transition: color 0.25s !important;
}

footer a:hover,
.site-footer a:hover {
  color: var(--platlt) !important;
  -webkit-text-fill-color: var(--platlt) !important;
}

footer small,
.site-footer small,
#colophon small,
footer p,
.site-footer .copyright {
  font-family: var(--sans) !important;
  font-size: 0.46rem !important;
  letter-spacing: 0.2em !important;
  color: rgba(244, 234, 222, 0.15) !important;
  -webkit-text-fill-color: rgba(244, 234, 222, 0.15) !important;
}

/* ============================================================
   SECTIONS & CONTENT BLOCKS
   ============================================================ */

section,
article,
.section,
.content-block,
.page-section {
  background: transparent !important;
}

/* Dividers */
hr {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 4rem 0 !important;
}

/* ── Thin platinum rule (decorative accent used in investment page) ── */
.swp-rule {
  width: 32px;
  height: 1px;
  background: var(--plat);
  opacity: 0.5;
  margin-bottom: 1.8rem;
  display: block;
}

/* ============================================================
   PAGE HERO (generic — non-investment pages)
   ============================================================ */

.page-hero,
.hero,
.hero-banner,
.page-header,
.entry-header {
  position: relative;
  background: var(--navy) !important;
  border-bottom: 1px solid var(--border);
  padding: 5rem 3rem 4rem;
}

.page-hero h1,
.hero h1,
.page-header h1,
.entry-header h1 {
  font-size: clamp(2.4rem, 5vw, 4.5rem) !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  max-width: 820px;
}

/* ============================================================
   CARDS & PANELS
   ============================================================ */

.card,
.panel,
.widget,
aside,
.sidebar .widget {
  background: var(--navy2) !important;
  border: 1px solid var(--border) !important;
  padding: 2rem !important;
}

.widget-title,
.widgettitle {
  font-family: var(--serif) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  letter-spacing: 0.05em;
  margin-bottom: 1rem !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
  width: 6px;
  background: var(--navy);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--plat);
}

/* ============================================================
   ADMIN BAR
   ============================================================ */

#wpadminbar {
  background: var(--navy2) !important;
}

/* ============================================================
   ANIMATIONS — global fade-in utility
   ============================================================ */

.swp-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.swp-fade.swp-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@keyframes swpFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  footer,
  .site-footer {
    padding: 3rem 1.5rem !important;
  }
}

@media (max-width: 640px) {
  h1 { font-size: 2.2rem !important; }
  h2 { font-size: 1.7rem !important; }

  nav a,
  .menu a {
    font-size: 0.7rem !important;
    letter-spacing: 0.2em !important;
  }
}


/* ============================================================
   PATCH 1 — REMOVE TRIANGLE / LINE DIVIDERS
   ============================================================ */

/* The decorative hr with triangle pseudo-element used site-wide */
hr,
.section-divider,
[class*="divider"],
[class*="separator"] {
  display: none !important;
}

/* Triangle shape specifically (::before / ::after on hr) */
hr::before,
hr::after,
.divider::before,
.divider::after {
  display: none !important;
}


/* ============================================================
   PATCH 2 — BLOG POST TITLES OVER IMAGES
   ============================================================ */

/* Reduce font size of post titles overlaid on thumbnails */
.post-thumbnail h2,
.post-thumbnail h3,
.post-thumbnail .entry-title,
.blog-post-title,
.post-title,
article .entry-title,
.isotope-item .entry-title,
.gallery-item .entry-title,
.post h2.entry-title,
.hentry .entry-title {
  font-size: clamp(0.9rem, 1.5vw, 1.2rem) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  font-weight: 400 !important;
}

/* Overlay containers — darken slightly so text is readable */
.post-thumbnail,
.entry-thumbnail,
.gallery-item,
.isotope-item {
  position: relative;
  overflow: hidden;
}

.post-thumbnail::after,
.entry-thumbnail::after,
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 27, 45, 0.72) 0%,
    rgba(15, 27, 45, 0.1) 50%,
    transparent 100%
  ) !important;
  pointer-events: none;
}


/* ============================================================
   PATCH 3 — REMOVE PALE BLUE / OLD BRAND BAR
   ============================================================ */

/* Target any remaining old-brand coloured bars or banners */
.top-bar,
.top-bar-section,
.contain-to-grid,
#top-bar,
.header-bar,
.site-header-bar,
[class*="top-bar"] {
  background: var(--navy) !important;
  background-color: var(--navy) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Kill any inline background colours set by Foundation/Reverie */
.top-bar .top-bar-section ul,
.top-bar .top-bar-section li,
.top-bar .top-bar-section a {
  background: transparent !important;
  background-color: transparent !important;
}

/* Remove any remaining blue/teal accent colours */
.top-bar .top-bar-section li.active > a,
.top-bar .top-bar-section ul li:hover:not(.has-form) > a {
  background: var(--navy2) !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
}



/* ============================================================
   PATCH 4 — PRECISE OLD-THEME OVERRIDES (from app.css audit)
   ============================================================ */

/* ── Old header/nav background (#575756 grey + #b9d6de blue logo) ── */
header#header,
header#header .nav-container,
header#header .nav-container #primary-navigation {
  background: var(--navy) !important;
  background-color: var(--navy) !important;
}

/* Kill the blue parallelogram logo shape */
header#header .nav-container #primary-navigation #header-logo,
#mobile-logo {
  background: transparent !important;
  background-color: transparent !important;
}

/* Nav links — replace grey with navy brand */
header#header .nav-container #primary-navigation .menu-main-menu-container ul li a {
  color: rgba(244, 234, 222, 0.6) !important;
  background: transparent !important;
  font-family: var(--sans) !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  transition: color 0.25s ease !important;
}
header#header .nav-container #primary-navigation .menu-main-menu-container ul li a:hover,
header#header .nav-container #primary-navigation .menu-main-menu-container ul li.active > a {
  color: var(--plat) !important;
  background: transparent !important;
}

/* Dropdown */
header#header .nav-container #primary-navigation ul#menu-main-menu > li > ul {
  background-color: var(--navy2) !important;
  border: 1px solid var(--border) !important;
}
header#header .nav-container #primary-navigation ul#menu-main-menu > li > ul > li > a {
  color: var(--muted) !important;
}
header#header .nav-container #primary-navigation ul#menu-main-menu > li > ul > li > a:hover {
  color: var(--ivory) !important;
}

/* Mobile navbar */
.navbar-header,
.navbar-collapse,
.navbar-collapse li a {
  background: var(--navy) !important;
  background-color: var(--navy) !important;
}
.navbar-collapse li a:hover,
.navbar-collapse li a:focus {
  background-color: var(--navy2) !important;
  color: var(--plat) !important;
}
.navbar-toggle .icon-bar {
  background: var(--ivory) !important;
}

/* ── Old footer (#575756 grey) ── */
footer#footer {
  background: var(--navy2) !important;
}
footer#footer #footer-logo-wrapper #footer-logo {
  background: transparent !important;
}
footer#footer #footer-contact .contact-details p,
footer#footer #footer-contact .contact-details p a {
  color: var(--muted) !important;
  font-family: var(--sans) !important;
}
footer#footer #footer-contact .contact-details p a:hover {
  color: var(--platlt) !important;
}
footer#footer #footer-contact .social-icons ul.social li a {
  background: var(--navy3) !important;
}
footer#footer #footer-contact .social-icons ul.social li a:hover {
  background: var(--plat) !important;
}
footer#footer #footer-contact .social-icons ul.social li a i {
  color: var(--ivory) !important;
}
footer#copyright {
  background: var(--navy2) !important;
}
footer#copyright ul li,
footer#copyright ul li a {
  color: rgba(244, 234, 222, 0.2) !important;
  font-family: var(--sans) !important;
}
footer#copyright ul li a:hover {
  color: var(--platlt) !important;
}

/* ── Old #banner — only override bg-color on non-homepage ── */
body:not(.page-template-page-templateshome-alt-php) #banner {
  background-color: var(--navy) !important;
}
#banner .titleholder {
  background: var(--navy2) !important;
}
#banner .titleholder h1.title a {
  color: var(--ivory) !important;
}

/* ── Blog featured post titles over images (.skew span) ── */
.featured-posts .medium-4 figure .skew span,
.featured-posts .medium-4 figure .skew span .deskew {
  font-family: var(--sans) !important;
  font-size: 70% !important;
  letter-spacing: 0.18em !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  background: rgba(15, 27, 45, 0.75) !important;
  color: var(--ivory) !important;
  padding: 8px 12px !important;
}

/* ── Old pink/blue/green brand colours — nuke them ── */
.pink-bg  { background: var(--navy2) !important; }
.blue-bg  { background: var(--navy3) !important; }
.green-bg { background: var(--navy)  !important; }
.grey-bg  { background: var(--navy)  !important; }
.blue     { color: var(--plat)   !important; }
.pink     { color: var(--platlt) !important; }
.green    { color: var(--muted)  !important; }

/* ── .pinkbdr divider lines ── */
h2.pinkbdr::before,
h3.pinkbdr::before,
.pinkbdr::before {
  background-color: var(--border) !important;
  height: 1px !important;
}
h2.pinkbdr span,
h3.pinkbdr span {
  background: var(--navy) !important;
  color: var(--ivory) !important;
}

/* ── CTA block (skewed button shape) ── */
#cta #cta-wrap {
  background: var(--plat) !important;
}
#cta #cta-wrap #button-wrapper #button {
  background: var(--navy) !important;
}
#cta #cta-wrap #button-wrapper #button a {
  color: var(--ivory) !important;
}
#cta #cta-wrap #button-wrapper #button:hover {
  background: var(--navy2) !important;
}
#cta #cta-wrap #cta-content h4 {
  color: var(--navy) !important;
}

/* ── Button link divider ── */
.button-link::before {
  background-color: var(--border) !important;
}
.button-link a {
  background: var(--plat) !important;
  color: var(--navy) !important;
  font-family: var(--sans) !important;
}
.button-link a:hover {
  background: var(--navy2) !important;
  color: var(--ivory) !important;
}

/* ── Scroll-to button ── */
.scroll-to {
  background-color: var(--navy2) !important;
  border: 1px solid var(--border) !important;
}
.scroll-to:hover {
  background-color: var(--navy3) !important;
}

/* ── Pagination ── */
.pagination-centered ul.page-numbers li a {
  background: var(--navy2) !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
}
.pagination-centered ul.page-numbers li a:hover,
.pagination-centered ul.page-numbers li span.current {
  background: var(--plat) !important;
  color: var(--navy) !important;
}

/* ── Footer menu (outside footer#footer) ── */
#footer-menu .menu li a {
  color: var(--muted) !important;
  font-family: var(--sans) !important;
}
#footer-menu .menu li a:hover {
  color: var(--platlt) !important;
}

/* ── Gravity Forms section headings ── */
.gform_wrapper .gsection h2.gsection_title,
.gform_wrapper fieldset legend.gfieldset-legend {
  font-family: var(--serif) !important;
  color: var(--plat) !important;
}
.gform_wrapper .gsection h2.gsection_title::after,
.gform_wrapper fieldset legend.gfieldset-legend {
  background: var(--border) !important;
}



/* ============================================================
   PATCH 5 — SEARCH BUTTON & BANNER HERO
   ============================================================ */

/* ── Kill the search button (Foundation blue #008cba) ── */
input[type="submit"],
button[type="submit"],
.button,
button {
  background-color: transparent !important;
  border: 1px solid var(--plat) !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  font-family: var(--sans) !important;
  font-size: 0.56rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.38em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.4rem !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.button:hover,
button:hover {
  background-color: var(--plat) !important;
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
}

/* Specifically nuke Foundation's hardcoded blue */
.button,
.button:link,
.button:visited {
  background-color: transparent !important;
  border-color: var(--plat) !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
}
.button:hover,
.button:focus {
  background-color: var(--plat) !important;
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
}

/* Search form specifically */
.search-form input[type="submit"],
#searchsubmit,
.searchform input[type="submit"],
input[name="s"] + input[type="submit"] {
  background: var(--plat) !important;
  border: 1px solid var(--plat) !important;
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
}
.search-form input[type="submit"]:hover,
#searchsubmit:hover {
  background: transparent !important;
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
}

/* ── Hide old banner on all pages EXCEPT homepage ── */
body:not(.page-template-page-templateshome-alt-php) #banner {
  display: none !important;
}

/* ── Page hero — shown on all standard pages ── */
/* Applied via the .inv-hero classes already in page-investment.php */
/* For all other pages, create a consistent page-header hero */

.page-hero-swp {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy2);
  border-bottom: 1px solid var(--border);
}

.page-hero-swp::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 27, 45, 0.97) 0%,
    rgba(15, 27, 45, 0.4) 60%,
    transparent 100%
  );
}

.page-hero-swp-bg {
  position: absolute;
  inset: 0;
}

.page-hero-swp-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.4);
  animation: swpHeroIn 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes swpHeroIn {
  from { transform: scale(1.06); filter: brightness(0.15); }
  to   { transform: scale(1);    filter: brightness(0.4); }
}

.page-hero-swp-content {
  position: relative;
  z-index: 2;
  padding: 0 6rem 5rem;
  max-width: 1000px;
  width: 100%;
}

.page-hero-swp-content .swp-cap {
  margin-bottom: 1.2rem;
  opacity: 0;
  animation: swpFadeUp 1s 0.3s forwards;
}

.page-hero-swp-content h1 {
  font-size: clamp(2.6rem, 5vw, 5rem) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  margin-bottom: 0 !important;
  opacity: 0;
  animation: swpFadeUp 1s 0.5s forwards;
}

.page-hero-swp-content h1 em {
  font-style: italic;
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
}

@media (max-width: 768px) {
  .page-hero-swp-content {
    padding: 0 2rem 3.5rem;
  }
}



/* ============================================================
   PATCH 6 — NAV SIZE, SPACING & LOGO
   ============================================================ */

/* ── Nav container — more height and padding ── */
header#header .nav-container,
header#header .nav-container #primary-navigation {
  min-height: 90px !important;
}

header#header .nav-container #primary-navigation .menu-main-menu-container ul li a {
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  padding: 36px 18px !important;
  font-weight: 300 !important;
}

/* ── Logo — bigger and properly spaced ── */
header#header .nav-container #primary-navigation #header-logo .logo-deskew img {
  max-width: 180px !important;
  width: 180px !important;
}

/* Remove the skew/parallelogram shape from logo area entirely */
header#header .nav-container #primary-navigation #header-logo {
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  margin-left: 0 !important;
  padding: 0 2rem 0 2rem !important;
  background: transparent !important;
}

header#header .nav-container #primary-navigation #header-logo .logo-deskew {
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  padding: 20px 20px 20px 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* ── Active/hover state ── */
header#header .nav-container #primary-navigation .menu-main-menu-container ul li a:hover,
header#header .nav-container #primary-navigation .menu-main-menu-container ul li.active > a {
  color: var(--plat) !important;
}

/* ── Bottom border on nav ── */
header#header {
  border-bottom: 1px solid var(--border) !important;
}

/* ── Mobile toggle size ── */
.navbar-toggle {
  margin-top: 28px !important;
}

/* ── Investment page & homepage — nav overlay on hero ── */
/* These pages have their own full-bleed hero so nav should float over it */
.page-template-page-investment .inv,
.page-template-page-homepage .hero {
  padding-top: 0 !important;
}



/* ============================================================
   PATCH 7 — HOMEPAGE HERO BACKGROUND & SEARCH REMOVAL
   ============================================================ */

/* ── Hide search button ── */
.search-wrap,
#search-wrap,
.search-container,
#searchform,
.searchform,
.search-form,
[class*="search"],
input[type="search"],
#search,
.header-search,
a[href*="search"],
button[aria-label*="search"],
button[aria-label*="Search"] {
  display: none !important;
}

/* Specifically the SEARCH button in the top bar */
header#header .nav-container .search-button,
header#header .nav-container #search,
header#header .nav-container .columns > a.button,
header#header .nav-container .columns > input,
header#header .columns .search,
.top-bar-section .search,
a.button[href*="search"],
.nav-search,
#nav-search,
.header-right .button,
.header-right a.button,
.medium-2.columns.right a,
.medium-2.columns.right input,
.medium-2 > a.button,
.medium-2 > input[type="submit"] {
  display: none !important;
}

/* ── Full-bleed hero background on homepage ── */
/* Wraps the entire header + title + video area in a dark photo bg */

.page-template-page-homepage body,
.page-template-home body,
.home body,
body.home,
body.page-template-page-homepage {
  background: var(--navy) !important;
}

/* The main wrapper that contains logo + nav + content on homepage */
body.page-template-page-homepage header#header,
body.home header#header {
  position: relative;
  z-index: 10;
  background: rgba(15, 27, 45, 0.72) !important;
  backdrop-filter: blur(0px);
}

/* Hero background image behind the whole top section */
body.page-template-page-homepage::before,
body.home::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background-image: url('https://www.stewalkerphotography.com/wp-content/uploads/2026/03/lake-como-wedding-photographer-stephen-walker62.jpg');
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.38);
  z-index: -1;
  animation: swpHeroIn 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Gradient overlay — dark at bottom, lighter at top */
body.page-template-page-homepage::after,
body.home::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    rgba(15, 27, 45, 0.45) 0%,
    rgba(15, 27, 45, 0.2) 40%,
    rgba(15, 27, 45, 0.85) 100%
  );
  z-index: -1;
}

/* ── "Wedding Photographer" title styling ── */
body.page-template-page-homepage #content h1,
body.home #content h1,
body.page-template-page-homepage .page-title,
body.home .page-title,
body.page-template-page-homepage h1.title,
body.home h1.title {
  font-family: var(--serif) !important;
  font-size: clamp(3rem, 6vw, 6rem) !important;
  font-weight: 400 !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  background: none !important;
  background-color: transparent !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  line-height: 1.05 !important;
}

/* Make the content area transparent so hero bg shows through */
body.page-template-page-homepage #content,
body.home #content,
body.page-template-page-homepage .row,
body.home .row,
body.page-template-page-homepage #main,
body.home #main {
  background: transparent !important;
}

/* ── Nav transparent on homepage so hero bleeds through ── */
body.page-template-page-homepage header#header,
body.home header#header {
  background: transparent !important;
  background-color: transparent !important;
}

body.page-template-page-homepage header#header .nav-container,
body.home header#header .nav-container {
  background: transparent !important;
  background-color: transparent !important;
}



/* ============================================================
   PATCH 7b — OLD HOMEPAGE TEMPLATE (page-template-home)
   Target the actual body class WordPress adds for the homepage
   ============================================================ */

/* WordPress adds .page-template-page-homepage-php or .page-template-page-homepage */
/* Also targets .page-template-swp-homepage-preview-php from template name */

/* ── Hide search from nav ── */
header#header .nav-container .medium-2,
header#header .nav-container .columns.medium-2,
header#header .nav-container .right.medium-2,
header#header .nav-container [class*="search"],
header#header .nav-container input,
header#header .nav-container .button:not(.navbar-toggle) {
  display: none !important;
}

/* ── Full-bleed hero: inject behind the entire page top ── */
/* The old homepage has: header#header + #content (with h1 + video) */
/* We wrap them visually with a background image via the body */

body.page-template-swp-homepage-preview::before,
body.page-template-page-homepage::before,
body.page-template-home::before,
body.home.page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url('https://www.stewalkerphotography.com/wp-content/uploads/2026/03/lake-como-wedding-photographer-stephen-walker62.jpg');
  background-size: cover;
  background-position: center 25%;
  filter: brightness(0.38);
  z-index: -2;
  animation: swpHeroIn 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.page-template-swp-homepage-preview::after,
body.page-template-page-homepage::after,
body.page-template-home::after,
body.home.page::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    rgba(15, 27, 45, 0.3) 0%,
    rgba(15, 27, 45, 0.15) 30%,
    rgba(15, 27, 45, 0.88) 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* ── Make all layers transparent so hero bleeds through ── */
body.page-template-swp-homepage-preview header#header,
body.page-template-swp-homepage-preview header#header .nav-container,
body.page-template-page-homepage header#header,
body.page-template-page-homepage header#header .nav-container,
body.home.page header#header,
body.home.page header#header .nav-container {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(184, 169, 138, 0.15) !important;
}

/* ── "Wedding Photographer" H1 — Investment-page style ── */
body.page-template-swp-homepage-preview #content h1,
body.page-template-page-homepage #content h1,
body.home.page #content h1,
.page-template-home #content h1 {
  font-family: var(--serif) !important;
  font-size: clamp(3.2rem, 6vw, 6.5rem) !important;
  font-weight: 400 !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  line-height: 1.05 !important;
  background: none !important;
  background-color: transparent !important;
  -webkit-background-clip: unset !important;
  text-align: left !important;
  margin-bottom: 2rem !important;
}

/* ── Content area transparent ── */
body.page-template-swp-homepage-preview #content,
body.page-template-swp-homepage-preview .row,
body.page-template-page-homepage #content,
body.page-template-page-homepage .row,
body.home.page #content,
body.home.page .row {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Body background stays navy for content below the fold ── */
body.page-template-swp-homepage-preview,
body.page-template-page-homepage,
body.home.page {
  background: var(--navy) !important;
}



/* ============================================================
   PATCH 8 — HOMEPAGE HERO (body.page-template-page-templateshome-alt-php)
   ============================================================ */

/* ── Make #banner full viewport height with dark overlay ── */
body.page-template-page-templateshome-alt-php #banner {
  display: block !important;
  min-height: 100vh !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center 25% !important;
  background-attachment: scroll !important;
}

/* Dark overlay on the banner */
body.page-template-page-templateshome-alt-php #banner::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(15, 27, 45, 0.35) 0%,
    rgba(15, 27, 45, 0.55) 60%,
    rgba(15, 27, 45, 0.92) 100%
  ) !important;
  z-index: 1 !important;
}

/* Ken Burns subtle zoom animation */
body.page-template-page-templateshome-alt-php #banner::after {
  content: none !important;
}

/* ── Nav sits over the hero — transparent ── */
body.page-template-page-templateshome-alt-php header#header {
  position: absolute !important;
  top: 32px !important; /* accounts for WP admin bar */
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
}

body.page-template-page-templateshome-alt-php header#header .nav-container {
  background: transparent !important;
  background-color: transparent !important;
}

/* Nav links brighter since they're over the image */
body.page-template-page-templateshome-alt-php header#header .nav-container #primary-navigation .menu-main-menu-container ul li a {
  color: rgba(244, 234, 222, 0.75) !important;
}
body.page-template-page-templateshome-alt-php header#header .nav-container #primary-navigation .menu-main-menu-container ul li a:hover {
  color: var(--plat) !important;
}

/* ── Push #content below the full-height banner ── */
body.page-template-page-templateshome-alt-php #content {
  position: relative !important;
  z-index: 10 !important;
  background: var(--navy) !important;
  padding-top: 60px !important;
}

/* ── "Wedding Photographer" h1 — styled and positioned over hero ── */
/* The h1 is inside #content which sits below the banner.
   We instead overlay text onto the banner using absolute positioning
   via a pseudo approach — but since the h1 is in #content we style it
   to look like the investment page hero title */

body.page-template-page-templateshome-alt-php #content .entry-content h1:first-child,
body.page-template-page-templateshome-alt-php #content h1:first-of-type {
  font-family: var(--serif) !important;
  font-size: clamp(3rem, 7vw, 7rem) !important;
  font-weight: 400 !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  text-transform: none !important;
  text-align: left !important;
  letter-spacing: 0.01em !important;
  line-height: 1.05 !important;
  background: none !important;
  background-color: transparent !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 20 !important;

  /* Pull it up visually to overlap the banner bottom */
  margin-top: -6rem !important;
  padding-bottom: 4rem !important;
}

/* ── Hide the "Hi, Stephen Walker" user greeting ── */
#wp-admin-bar-my-account .display-name,
#wp-admin-bar-top-secondary #wp-admin-bar-my-account > a > span.display-name {
  /* Leave admin bar intact — only hide the search */
}

/* ── Hide the SEARCH box in the admin bar top-right area ── */
#wp-admin-bar-search,
li#wp-admin-bar-search,
.admin-bar-search {
  display: none !important;
}

/* Also hide any search that appears IN the page header area (not admin bar) */
body.page-template-page-templateshome-alt-php header#header [class*="search"],
body.page-template-page-templateshome-alt-php header#header input[type="text"],
body.page-template-page-templateshome-alt-php header#header input[type="search"],
body.page-template-page-templateshome-alt-php header#header .medium-2.right,
body.page-template-page-templateshome-alt-php header#header .columns.right {
  display: none !important;
}



/* ============================================================
   PATCH 9 — HOMEPAGE BANNER IMAGE FIX
   ============================================================ */

/* The inline style on #banner sets background-image correctly.
   We just need to ensure it renders and the overlay sits on top properly. */

body.page-template-page-templateshome-alt-php #banner {
  display: block !important;
  min-height: 100vh !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
  /* Brightness filter to darken the image itself */
  filter: none !important;
  overflow: visible !important;
}

/* Fix: use a pseudo-element for the dark overlay so the bg image shows */
body.page-template-page-templateshome-alt-php #banner::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(15, 27, 45, 0.25) 0%,
    rgba(15, 27, 45, 0.45) 50%,
    rgba(15, 27, 45, 0.90) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Banner bg-color must stay transparent so inline background-image shows */

/* Ensure nothing inside banner is clipping the background */
body.page-template-page-templateshome-alt-php #banner .titleholder {
  display: none !important;
}

/* The image is set as an inline background-image on the element.
   Our previous patch was hiding it with background-color — remove that conflict */
body.page-template-page-templateshome-alt-php #banner {
  background-color: transparent !important;
}



/* ============================================================
   PATCH 9b — UNDO THE GLOBAL #banner HIDE ON HOMEPAGE
   ============================================================ */

/* Earlier patch hid ALL #banner elements — restore it for homepage only */
body.page-template-page-templateshome-alt-php #banner {
  display: block !important;
}



/* ============================================================
   PATCH 10 — FORCE BANNER IMAGE (override broken inline URL)
   ============================================================ */

body.page-template-page-templateshome-alt-php #banner {
  background-image: url('https://www.stewalkerphotography.com/wp-content/uploads/2026/03/lake-como-wedding-photographer-stephen-walker62.jpg') !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  min-height: 100vh !important;
  display: block !important;
  position: relative !important;
}



/* ============================================================
   PATCH 11 — HOMEPAGE HERO (no WordPress banner option needed)
   Injects full-bleed hero directly on the page wrapper
   ============================================================ */

/* Since the WordPress banner option is removed, we create the hero
   directly on the body using a pseudo-element */

body.page-template-page-templateshome-alt-php {
  background-image: url('https://www.stewalkerphotography.com/wp-content/uploads/2026/03/lake-como-wedding-photographer-stephen-walker62.jpg') !important;
  background-size: cover !important;
  background-position: center 25% !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Dark overlay via the html element so it sits above the body bg */
body.page-template-page-templateshome-alt-php::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(15, 27, 45, 0.3) 0%,
    rgba(15, 27, 45, 0.5) 50%,
    rgba(15, 27, 45, 0.92) 80%,
    rgba(15, 27, 45, 1) 100%
  ) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  height: 100vh !important;
}

/* Make sure header and content sit above the overlay */
body.page-template-page-templateshome-alt-php header#header {
  position: relative !important;
  z-index: 10 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(184, 169, 138, 0.15) !important;
}

body.page-template-page-templateshome-alt-php header#header .nav-container {
  background: transparent !important;
  background-color: transparent !important;
}

body.page-template-page-templateshome-alt-php #content {
  position: relative !important;
  z-index: 10 !important;
  background: transparent !important;
}

/* Content goes back to solid navy after the first viewport */
body.page-template-page-templateshome-alt-php .entry-content,
body.page-template-page-templateshome-alt-php .row {
  position: relative !important;
  z-index: 10 !important;
}



/* ============================================================
   PATCH 12 — HOMEPAGE HERO OVERLAY (injected div approach)
   ============================================================ */

/* ── Reset body background on homepage — let the div handle it ── */
body.page-template-page-templateshome-alt-php {
  background-image: none !important;
  background-attachment: scroll !important;
  background: var(--navy) !important;
}
body.page-template-page-templateshome-alt-php::before,
body.page-template-page-templateshome-alt-php::after {
  display: none !important;
}

/* ── The injected hero div ── */
.swp-hero-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

.swp-hero-overlay__img {
  position: absolute;
  inset: 0;
  background-image: url('https://www.stewalkerphotography.com/wp-content/uploads/2026/03/lake-como-wedding-photographer-stephen-walker62.jpg');
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  filter: brightness(0.42);
  animation: swpHeroIn 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.swp-hero-overlay__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 27, 45, 0.2) 0%,
    rgba(15, 27, 45, 0.3) 40%,
    rgba(15, 27, 45, 0.92) 85%,
    rgba(15, 27, 45, 1) 100%
  );
}

/* ── Nav sits over hero ── */
body.page-template-page-templateshome-alt-php header#header {
  position: relative;
  z-index: 10;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(184, 169, 138, 0.12) !important;
}
body.page-template-page-templateshome-alt-php header#header .nav-container {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Content layers above hero ── */
body.page-template-page-templateshome-alt-php #content {
  position: relative;
  z-index: 10;
  background: transparent !important;
  padding-top: 0 !important;
}

/* ── "Wedding Photographer" h1 big and Investment-style ── */
body.page-template-page-templateshome-alt-php #content h1:first-of-type {
  font-family: var(--serif) !important;
  font-size: clamp(3.5rem, 8vw, 8rem) !important;
  font-weight: 400 !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  text-transform: none !important;
  text-align: left !important;
  letter-spacing: 0.01em !important;
  line-height: 1.02 !important;
  background: none !important;
  background-color: transparent !important;
  padding: 0 0 3rem 3rem !important;
  margin: 0 !important;
}

/* Solid navy kicks in after first section */
body.page-template-page-templateshome-alt-php .featured-posts,
body.page-template-page-templateshome-alt-php #testimonials,
body.page-template-page-templateshome-alt-php footer#footer,
body.page-template-page-templateshome-alt-php #footer-menu,
body.page-template-page-templateshome-alt-php footer#copyright {
  position: relative;
  z-index: 10;
  background: var(--navy) !important;
}



/* ============================================================
   PATCH 13 — CLEAN HOMEPAGE BANNER ABOVE NAV
   ============================================================ */

/* ── Reset all previous homepage hero attempts ── */
body.page-template-page-templateshome-alt-php {
  background-image: none !important;
  background-attachment: scroll !important;
}
body.page-template-page-templateshome-alt-php::before,
body.page-template-page-templateshome-alt-php::after {
  display: none !important;
  content: none !important;
}
.swp-hero-overlay { display: none !important; }

body.page-template-page-templateshome-alt-php #content h1:first-of-type {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  padding: 3rem 0 1rem 0 !important;
  text-align: center !important;
}

/* ── The new banner ── */
.swp-home-banner {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 500px;
  overflow: hidden;
}

.swp-home-banner__img {
  position: absolute;
  inset: 0;
  background-image: url('https://www.stewalkerphotography.com/wp-content/uploads/2026/03/lake-como-wedding-photographer-stephen-walker62.jpg');
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.42);
  animation: swpHeroIn 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.swp-home-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 27, 45, 0.15) 0%,
    rgba(15, 27, 45, 0.3) 50%,
    rgba(15, 27, 45, 0.88) 100%
  );
}

.swp-home-banner__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 5rem 4rem;
  max-width: 900px;
}

.swp-home-banner__cap {
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 200;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--plat);
  display: block;
  margin-bottom: 1.2rem;
  opacity: 0;
  animation: swpFadeUp 1s 0.3s forwards;
}

.swp-home-banner__title {
  font-family: var(--serif) !important;
  font-size: clamp(2rem, 4vw, 4rem) !important;
  font-weight: 400 !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  text-transform: none !important;
  opacity: 0;
  animation: swpFadeUp 1s 0.5s forwards;
}

.swp-home-banner__title em {
  font-style: italic;
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
}

@media (max-width: 768px) {
  .swp-home-banner__content { padding: 0 2rem 3rem; }
  .swp-home-banner { height: 60vh; }
}



/* ============================================================
   PATCH 14 — FINAL HOMEPAGE BANNER RESET & STYLES
   ============================================================ */

/* ── Kill all previous homepage h1 overrides causing overlap ── */
body.page-template-page-templateshome-alt-php #content h1:first-of-type,
body.page-template-page-templateshome-alt-php #content .entry-content h1:first-child {
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  text-align: center !important;
  padding: 2rem 0 1rem !important;
  margin: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 1.5rem !important;
}

/* ── Banner sits at very top, full width ── */
.swp-home-banner {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 520px;
  overflow: hidden;
  display: block;
}

.swp-home-banner__img {
  position: absolute;
  inset: 0;
  background-image: url('https://www.stewalkerphotography.com/wp-content/uploads/2026/03/lake-como-wedding-photographer-stephen-walker62.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  filter: brightness(0.42);
}

.swp-home-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 27, 45, 0.1) 0%,
    rgba(15, 27, 45, 0.35) 55%,
    rgba(15, 27, 45, 0.95) 100%
  );
}

.swp-home-banner__content {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 0 5rem 4.5rem;
  max-width: 860px;
}

.swp-home-banner__cap {
  font-family: var(--sans) !important;
  font-size: 0.52rem !important;
  font-weight: 200 !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase !important;
  color: var(--plat) !important;
  display: block !important;
  margin-bottom: 1.2rem !important;
}

.swp-home-banner__title {
  font-family: var(--serif) !important;
  font-size: clamp(2.2rem, 4vw, 4rem) !important;
  font-weight: 400 !important;
  color: var(--ivory) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

.swp-home-banner__title em {
  font-style: italic !important;
  color: var(--plat) !important;
  -webkit-text-fill-color: var(--plat) !important;
}

@media (max-width: 768px) {
  .swp-home-banner { height: 55vh; min-height: 380px; }
  .swp-home-banner__content { padding: 0 2rem 3rem; }
}



/* ============================================================
   PATCH 15 — NAV OVERLAYS THE HOMEPAGE BANNER
   ============================================================ */

/* Make the banner full viewport and position it so nav overlays it */
body.page-template-page-templateshome-alt-php .swp-home-banner {
  margin-top: -170px !important; /* Pull banner up behind the nav */
  padding-top: 170px !important; /* Keep content pushed down */
  min-height: 100vh !important;
  box-sizing: border-box !important;
}

/* Nav becomes transparent and floats over the banner */
body.page-template-page-templateshome-alt-php header#header {
  position: relative !important;
  z-index: 20 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(184, 169, 138, 0.15) !important;
}

body.page-template-page-templateshome-alt-php header#header .nav-container {
  background: transparent !important;
  background-color: transparent !important;
}

body.page-template-page-templateshome-alt-php header#header .nav-container #primary-navigation .menu-main-menu-container ul li a {
  color: rgba(244, 234, 222, 0.8) !important;
}