/* ============================================================
   TOM JENSEN — Additional CSS (FOREST20 FINAL)
   Paste this entire block into:
   WP Admin → Appearance → Customize → Additional CSS
   ============================================================ */

/* ── HEADER: fully transparent at top, no border, no line ── */
/* These rules ensure the header stays transparent regardless of theme CSS */
html body header.site-header,
html body .site-header,
.site-header {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  border: none !important;
}
/* Scrolled state — solid forest green (JS adds .scrolled class) */
html body header.site-header.scrolled,
html body .site-header.scrolled {
  background: #062b2b !important;
  background-color: #062b2b !important;
  box-shadow: 0 2px 30px rgba(0,0,0,0.35) !important;
}

/* ── HERO OVERLAY: remove WP block editor default margin and fill full height ── */
.hero-overlay {
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
}

/* ── HERO INNER: two-column split layout with portrait ── */
html body .hero-inner,
html body .hero-section .hero-inner {
  padding-top: 160px !important;
  display: block !important;
}
html body .hero-inner.hero-inner--split,
html body .hero-section .hero-inner.hero-inner--split,
html body div.hero-inner--split {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 3rem !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  padding-bottom: 3rem !important;
  text-align: left !important;
}
html body .hero-inner--split .hero-content,
html body div.hero-inner--split > .hero-content {
  flex: 0 0 52% !important;
  max-width: 52% !important;
  text-align: left !important;
}

/* Portrait frame */
.hero-portrait {
  flex: 0 0 38% !important;
  max-width: 38% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: -80px !important;
}
.hero-portrait-frame {
  position: relative !important;
  width: 100% !important;
  max-width: 260px !important;
  border: 2px solid rgba(201,169,110,0.55) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), inset 0 0 0 4px rgba(6,43,43,0.25) !important;
  overflow: hidden !important;
}
.hero-portrait-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  filter: brightness(0.92) saturate(0.95) !important;
}
.hero-portrait-vignette {
  display: none !important;
}

/* Mobile: stack portrait below text */
@media (max-width: 900px) {
  html body .hero-inner.hero-inner--split,
  html body .hero-section .hero-inner.hero-inner--split,
  html body div.hero-inner--split {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    gap: 2rem !important;
    max-width: 100% !important;
  }
  html body .hero-inner--split .hero-content,
  html body div.hero-inner--split > .hero-content {
    flex: none !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .hero-portrait {
    display: flex !important;
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 0 !important;
  }
  .hero-portrait-frame {
    max-width: 280px !important;
  }
}

/* ── HERO: pure white text ── */
.hero-section, .hero-section * { color: #ffffff !important; }
.hero-eyebrow, .hero-eyebrow * { color: #c9a96e !important; }
.hero-title, .hero-title strong, .hero-title * { color: #ffffff !important; }
.hero-tagline { color: rgba(255,255,255,0.85) !important; }
.hero-roles, .hero-role-item { color: rgba(255,255,255,0.75) !important; }
.hero-stat-number { color: #ffffff !important; }
.hero-stat-label { color: rgba(255,255,255,0.6) !important; }
.hero-scroll, .hero-scroll * { color: rgba(255,255,255,0.5) !important; }

/* ── HERO BUTTONS ── */
/* Primary button — gold fill, FOREST GREEN text */
.hero-buttons .wp-block-button:first-child .wp-block-button__link,
.hero-buttons .wp-block-button:first-child .wp-element-button {
  background: #c9a96e !important;
  color: #062b2b !important;
  border: 2px solid #c9a96e !important;
  padding: 1.1rem 2.8rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}
.hero-buttons .wp-block-button:first-child .wp-block-button__link:hover,
.hero-buttons .wp-block-button:first-child .wp-element-button:hover {
  background: #b8935a !important;
  border-color: #b8935a !important;
  color: #062b2b !important;
}

/* Outline button — white border, white text */
.hero-buttons .btn-outline-custom .wp-block-button__link,
.hero-buttons .btn-outline-custom .wp-element-button {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.7) !important;
  padding: 1.1rem 2.8rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}
.hero-buttons .btn-outline-custom .wp-block-button__link:hover,
.hero-buttons .btn-outline-custom .wp-element-button:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ── NAV LINKS: pure white ── */
.nav-links a, .nav-links ul li a,
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation__container a {
  color: #ffffff !important;
  opacity: 1 !important;
}
.nav-links a:hover, .nav-links ul li a:hover,
.site-header .wp-block-navigation a:hover { color: #c9a96e !important; }
.nav-logo-name,
.wp-block-site-title,
.wp-block-site-title a,
.nav-logo-name a,
header .wp-block-site-title a,
html body header a.wp-block-site-title {
  color: rgba(247, 244, 237, 0.82) !important;
  font-size: 2.2rem !important;
  letter-spacing: 0.32em !important;
  font-weight: 400 !important;
  text-shadow: 0 0 24px rgba(6,43,43,0.7), 0 1px 4px rgba(0,0,0,0.45) !important;
  opacity: 1 !important;
}

/* ── GALLERY SECTION ── */
.gallery-section { background: #f7f4ed !important; }
.gallery-section h2, .gallery-section p { color: #1a1a1a !important; }
html body .gallery-section .section-label,
html body .gallery-section div.section-label {
  color: #c9a96e !important;
}
html body .gallery-section .section-label::before,
html body .gallery-section div.section-label::before {
  background-color: #c9a96e !important;
  background: #c9a96e !important;
}

/* ── BUSINESSES SECTION ── */
.businesses-section { background: #062b2b !important; }
.businesses-section h2, .businesses-section h3, .businesses-section p,
.businesses-section * { color: #ffffff !important; }
.businesses-section .section-label { color: #c9a96e !important; }
html body .businesses-section .section-label::before,
html body .businesses-section div.section-label::before {
  background-color: #c9a96e !important;
  background: #c9a96e !important;
}

/* Business card logo containers — SQUARE corners, white background */
.business-logo-wrap {
  border-radius: 0 !important;
  background: #ffffff !important;
}

/* Jensen Capital JC monogram — WHITE background, forest green text, SQUARE */
.business-logo-monogram {
  background: #ffffff !important;
  color: #062b2b !important;
  border-radius: 0 !important;
  border: none !important;
  opacity: 1 !important;
}

/* ── SOCIAL SECTION: IVORY background, dark text ── */
#social,
.social-section,
.social-section.wp-block-group {
  background: #f7f4ed !important;
  background-color: #f7f4ed !important;
}
.social-section h2, .social-section h3 { color: #1a1a1a !important; }
.social-section p { color: #3a3a3a !important; }
html body .social-section .section-label,
html body .social-section div.section-label,
html body #social .section-label {
  color: #c9a96e !important;
}
html body .social-section .section-label::before,
html body .social-section div.section-label::before,
html body #social .section-label::before {
  background-color: #c9a96e !important;
  background: #c9a96e !important;
}
/* Social cards: white with forest green border on hover */
.social-card {
  background: #ffffff !important;
  border: 1px solid rgba(6,43,43,0.12) !important;
}
.social-card:hover {
  border-color: #062b2b !important;
  background: #ffffff !important;
}
.social-icon { color: #062b2b !important; }
.social-name { color: #1a1a1a !important; }
.social-handle { color: #6a6a6a !important; }

/* ── CONTACT SECTION ── */
.contact-section { background: #062b2b !important; }
.contact-section h2, .contact-section p, .contact-section label,
.contact-section * { color: #ffffff !important; }
.contact-section .section-label { color: #c9a96e !important; }
.contact-section input, .contact-section textarea {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
}
.contact-section input::placeholder, .contact-section textarea::placeholder {
  color: rgba(255,255,255,0.45) !important;
}
.contact-section button[type="submit"],
#contactSubmit {
  background: #c9a96e !important;
  color: #062b2b !important;
  border: 2px solid #c9a96e !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}
.contact-section button[type="submit"]:hover,
#contactSubmit:hover {
  background: #b8935a !important;
  border-color: #b8935a !important;
  color: #062b2b !important;
}

/* ── FOOTER ── */
.site-footer { background: #062b2b !important; }
.site-footer * { color: #d8ccb2 !important; }
.site-footer p.footer-logo,
.site-footer .footer-name {
  color: rgba(247, 244, 237, 0.82) !important;
  font-size: 2.2rem !important;
  letter-spacing: 0.32em !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}
.site-footer .footer-col-title { color: #c9a96e !important; }
.site-footer a:hover { color: #c9a96e !important; }