/* ==========================================================================
   THE HOSKINS PHOTOGRAPHY — CUSTOM STYLES
   Genesis Framework
   ------------------------------------------------------------------------
   HOW TO INSTALL:
   WordPress Admin > Appearance > Customize > Additional CSS
   Paste this entire file in, then click Publish.

   If you have FTP/file access instead, this can go in your Genesis
   child theme's style.css at the bottom.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FONTS + COLOR VARIABLES
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Jost:wght@300;400;500&display=swap');

body {
  background-color: #f2ede4;
  font-family: 'Jost', sans-serif;
  color: #3c352d;
}


/* --------------------------------------------------------------------------
   2. HEADER + STICKY NAV
   -------------------------------------------------------------------------- */
/*
   NOTE: Sticky nav on scroll removed from here since you already have
   this working via your own theme/plugin. Adding "position: sticky" on
   top of that likely conflicted with its layout calculations, which is
   probably what caused the header/image to collapse. Just styling colors
   and type below, not touching positioning/layout behavior.
*/

/* ============ HEADER ============ */
/* Interior pages (everything except the homepage): clean solid light-olive
   header, no photo dependency, dark text. This sidesteps the whole
   contrast problem of varying per-page header photos entirely. */
body:not(.home) .site-header {
  background-color: #f2ede4 !important;
  background-image: none !important;
  border-bottom: 1px solid #d9d0c1;
  position: relative;
}

body:not(.home) .site-header::before {
  content: none !important;
}

/* Homepage: keeps its full photo hero with a dark scrim for contrast */
body.home .site-header {
  border-bottom: 1px solid #d9d0c1;
  position: relative;
}

body.home .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 10, 0.4);
  pointer-events: none;
  z-index: 1;
}

.site-header .title-area {
  position: relative;
  z-index: 2;
}

/* Wordmark — dark ink on interior pages' light olive header,
   light cream (with shadow) on the homepage's photo hero.
   .custom-header/.title-area prefixes beat the theme's own
   higher-specificity color rule (confirmed via inspector). */
body:not(.home) .custom-header .title-area .site-title,
body:not(.home) .custom-header .title-area .site-title a,
body:not(.home) .site-title,
body:not(.home) .site-title a {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 6px !important;
  font-size: 44px !important;
  color: #3c352d !important;
  text-shadow: none !important;
}

body:not(.home) .custom-header .title-area .site-description,
body:not(.home) .site-description {
  font-family: 'Jost', sans-serif !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #5f5a4a !important;
  text-shadow: none !important;
}

body.home .custom-header .title-area .site-title,
body.home .custom-header .title-area .site-title a,
body.home .site-title,
body.home .site-title a {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 6px !important;
  font-size: 44px !important;
  color: #f2ede4 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.65), 0 1px 4px rgba(0,0,0,0.5) !important;
}

body.home .custom-header .title-area .site-description,
body.home .site-description {
  font-family: 'Jost', sans-serif !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(242,237,228,0.85) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}

.nav-primary .genesis-nav-menu a {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #3c352d;
}

.nav-primary .genesis-nav-menu a:hover {
  color: #7c7c5e;
}

/* Dropdown submenu (Info > About Aaron / Pricing / Client Love) */
.nav-primary .sub-menu {
  background-color: #f2ede4;
  border: 1px solid #d9d0c1;
}

.nav-primary .sub-menu a {
  color: #3c352d;
}


/* --------------------------------------------------------------------------
   3. WHAT I BELIEVE SECTION
   -------------------------------------------------------------------------- */

.home-content {
  background-color: #f2ede4 !important;
  padding: 100px 60px 60px;
  text-align: center;
  position: relative;
}

.home-content::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: #d9d0c1;
  margin: 50px auto 0;
}

.home-content h1 {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  letter-spacing: 3px;
  font-size: 15px;
  text-transform: uppercase;
  color: #7c7c5e;
  margin-bottom: 14px;
}

.home-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  letter-spacing: 3px;
  font-size: 34px;
  margin-bottom: 40px;
}

.home-content p {
  max-width: 720px;
  margin: 0 auto 26px;
  font-size: 16px;
  line-height: 1.9;
  color: #3c352d;
}

.home-content em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}


/* --------------------------------------------------------------------------
   4. FAVORITES GALLERY SECTION
   -------------------------------------------------------------------------- */
/*
   This is a JS masonry grid (each .item.masonry-brick is positioned by
   script based on the photo's natural height, which is why crops look
   inconsistent). Forcing every image into the same aspect ratio via CSS
   (below) makes each tile render at a uniform height, which the masonry
   script will pack correctly since it measures rendered size, not the
   original image dimensions.

   NOTE ON PINTEREST BUTTON: that red "Save" button isn't part of your
   site's code at all — it's the Pinterest browser extension, which adds
   that button to any image on any site if the viewer has the extension
   installed. Nothing to fix here.
*/

#favorites h1,
#favorites h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 3px !important;
  font-size: 34px !important;
  margin-bottom: 12px !important;
}

#favorites h3.section-subtitle {
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  color: #8a8175 !important;
  font-weight: 400 !important;
  margin-top: 0 !important;
  margin-bottom: 50px !important;
}

/* Force every tile to the same crop ratio */
.item.masonry-brick a {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.item.masonry-brick a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Caption: hidden by default, appears as a soft gradient on hover
   instead of sitting as a permanent white box under one photo */
.item.masonry-brick .overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 18px 16px;
  background: linear-gradient(0deg, rgba(20,15,10,0.6) 0%, rgba(20,15,10,0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.item.masonry-brick a:hover .overlay {
  opacity: 1;
}

.item.masonry-brick .overlay h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.5px;
  color: #fff !important;
  text-transform: none;
  margin: 0;
}


/* --------------------------------------------------------------------------
   5. BLOG BANNER SECTION
   -------------------------------------------------------------------------- */
/*
   This section (id="blog") uses a CSS background-image on the div itself
   rather than an  tag, so the dark wash below applies to the whole
   section automatically. I couldn't see the exact markup for the "Read
   the Blog" button/link inside it (it was collapsed in the inspector),
   so this targets the most common pattern for this kind of section —
   if it doesn't visually apply, send me an Inspect screenshot of that
   button specifically and I'll adjust the selector.
*/

#blog {
  position: relative;
  min-height: 480px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#blog::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 10, 0.18);
}

#blog h2,
#blog h2 a {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 18px 40px;
  background: rgba(242, 237, 228, 0.95);
  color: #3c352d !important;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #3c352d;
}


/* --------------------------------------------------------------------------
   6. CONTACT FORM (WPForms)
   -------------------------------------------------------------------------- */

#get-in-touch {
  padding: 100px 60px 90px;
  text-align: center;
}

#get-in-touch h1,
#get-in-touch h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 3px !important;
  font-size: 34px !important;
  margin-bottom: 12px !important;
}

#get-in-touch h3 {
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  color: #8a8175 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 60px !important;
}

.contact-form {
  display: flex !important;
  justify-content: center !important;
}

.wpforms-container {
  max-width: 640px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

.wpforms-container .wpforms-field-label {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #7c7c5e !important;
  font-weight: 400 !important;
}

.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=date],
.wpforms-container textarea {
  border: none !important;
  border-bottom: 1px solid #d9d0c1 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 8px 2px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 15px !important;
  color: #3c352d !important;
  box-shadow: none !important;
}

.wpforms-container input[type=text]:focus,
.wpforms-container input[type=email]:focus,
.wpforms-container input[type=date]:focus,
.wpforms-container textarea:focus {
  border-bottom-color: #3c352d !important;
  outline: none !important;
}

.wpforms-container .wpforms-submit-container {
  text-align: center;
  margin-top: 20px;
}

.wpforms-container button[type=submit] {
  background: transparent !important;
  border: 1px solid #3c352d !important;
  color: #3c352d !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 14px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  padding: 15px 46px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.wpforms-container button[type=submit]:hover {
  background: #3c352d !important;
  color: #f2ede4 !important;
}


/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */

.footer-widgets {
  background-color: #dfd9d2 !important;
  color: rgba(60, 53, 45, 0.8);
  padding-top: 80px;
}

.footer-widgets .widget-title {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(60, 53, 45, 0.6) !important;
}

.footer-widgets a {
  color: #3c352d !important;
}

.footer-widgets input[type=text],
.footer-widgets input[type=search] {
  background: transparent !important;
  border: 1px solid rgba(60, 53, 45, 0.35) !important;
  color: #3c352d !important;
  border-radius: 0 !important;
}

.site-footer {
  background-color: #dfd9d2 !important;
  color: rgba(60, 53, 45, 0.8);
}


/* --------------------------------------------------------------------------
   8. MOBILE ADJUSTMENTS
   -------------------------------------------------------------------------- */
/*
   Everything above was sized for desktop. This scales the biggest text
   down for narrow screens so nothing wraps awkwardly or crowds the edges.
   600px roughly covers phones in portrait orientation.
*/

@media (max-width: 600px) {

  .site-title,
  .site-title a {
    font-size: 26px !important;
    letter-spacing: 3px !important;
  }

  .site-description {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }

  .home-content,
  #favorites,
  #get-in-touch {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .home-content h2,
  #favorites h1,
  #favorites h2,
  #get-in-touch h1,
  #get-in-touch h2 {
    font-size: 24px !important;
    letter-spacing: 1.5px !important;
  }

  #blog {
    min-height: 320px !important;
  }

  #blog h2,
  #blog h2 a {
    padding: 14px 26px !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
  }

  .footer-widgets {
    padding-top: 50px !important;
  }

}