/*
Theme Name:   Becca Henry Branding v2 — Kadence Child
Theme URI:    https://beccahenryphotography.com
Description:  Kadence child theme — branding homepage with split two-image hero
Author:       Becca Henry Photography
Template:     kadence
Version:      2.0.0
Text Domain:  becca-henry-branding-v2
*/

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

/* ═══════════════════════════════════════════════════
   GLOBAL TOKENS
   ═══════════════════════════════════════════════════ */
:root {
  --bh-cream:       #F9F8F1;
  --bh-dark:        #4B443B;
  --bh-mid:         #7a6f65;
  --bh-faint:       #f0ede6;
  --bh-light:       #e8e4dc;
  --bh-ink:         #2a2520;
  --bh-line:        rgba(75,68,59,0.12);
  --bh-line-strong: rgba(75,68,59,0.22);
  --bh-muted:       rgba(75,68,59,0.58);
  --bh-font-serif:  'Cormorant Garamond', Georgia, serif;
  --bh-font-sans:   'Montserrat', sans-serif;
}

/* ── Kadence reset ────────────────────────────────── */
body.page-template-branding-homepage-v2 {
  background: var(--bh-cream);
  font-family: var(--bh-font-sans);
  color: var(--bh-dark);
}
body.page-template-branding-homepage-v2 .content-container,
body.page-template-branding-homepage-v2 .wp-block-group {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.page-template-branding-homepage-v2 .entry-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── NAV ──────────────────────────────────────────── */
.bh-nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 52px;
  background: rgba(249,248,241,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bh-line);
}
.bh-nav-links { display: flex; gap: 32px; }
.bh-nav-links a {
  font-size: 8.5px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--bh-muted); text-decoration: none; transition: color .3s;
  font-family: var(--bh-font-sans);
}
.bh-nav-links a:hover { color: var(--bh-dark); }
.bh-nav-logo { text-align: center; }
.bh-nav-logo-name {
  display: block; font-family: var(--bh-font-serif);
  font-size: 16px; letter-spacing: 8px; text-transform: uppercase;
  font-weight: 300; color: var(--bh-dark);
}
.bh-nav-logo-sub {
  display: block; font-size: 7px; letter-spacing: 5px;
  text-transform: uppercase; color: var(--bh-muted); margin-top: 3px;
  font-family: var(--bh-font-sans);
}
.bh-nav-cta {
  font-size: 8px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--bh-dark); border: 1px solid var(--bh-line-strong);
  padding: 10px 22px; text-decoration: none; transition: all .3s;
  font-family: var(--bh-font-sans);
}
.bh-nav-cta:hover { background: var(--bh-dark); color: var(--bh-cream); }

/* ════════════════════════════════════════════════════
   NEW HERO — two equal images side by side, NO fades,
   cream headline block sits below on the cream page bg
   ════════════════════════════════════════════════════ */
.bh-hero-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

/* Each image panel: tall, no overlay, pure image */
.bh-hero-v2-img {
  position: relative;
  height: 88vh;
  min-height: 560px;
  overflow: hidden;
}
.bh-hero-v2-img img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 10s ease;
}
.bh-hero-v2-img:hover img { transform: scale(1.03); }

/* Thin bottom gradient only — keeps images readable
   but NOT dark enough to overlay text — just a polish line */
.bh-hero-v2-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    rgba(249,248,241,0.18) 100%
  );
  pointer-events: none;
}

/* Cream headline block sits BELOW the two images */
.bh-hero-v2-content {
  grid-column: 1 / -1;          /* spans both columns */
  background: var(--bh-cream);
  padding: 64px 52px 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  border-bottom: 1px solid var(--bh-line);
}
.bh-hero-v2-headline {}
.bh-hero-eyebrow {
  font-size: 8px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--bh-muted); margin-bottom: 18px;
  font-family: var(--bh-font-sans);
}
.bh-hero-h1 {
  font-family: var(--bh-font-serif);
  font-size: clamp(48px, 6.5vw, 82px);
  font-weight: 300; line-height: 1.03; letter-spacing: .5px;
  color: var(--bh-ink); margin-bottom: 0;
}
.bh-hero-h1 em { font-style: italic; color: var(--bh-mid); }
.bh-hero-v2-sub {
  display: flex; flex-direction: column;
  justify-content: flex-end; gap: 24px;
}
.bh-hero-sub-text {
  font-size: 11px; letter-spacing: .3px;
  color: var(--bh-muted); line-height: 2;
  font-family: var(--bh-font-sans); max-width: 440px;
}
.bh-hero-sub-tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.bh-hero-sub-tag {
  font-size: 8px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--bh-muted); border: 1px solid var(--bh-line-strong);
  padding: 7px 16px; font-family: var(--bh-font-sans);
}

/* ── BUTTONS ──────────────────────────────────────── */
.bh-btn-dark {
  display: inline-block; font-size: 8px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--bh-cream) !important;
  background: var(--bh-dark); padding: 16px 44px;
  text-decoration: none; font-family: var(--bh-font-sans);
  transition: background .3s; border: none;
}
.bh-btn-dark:hover { background: var(--bh-ink); }
.bh-btn-outline {
  display: inline-block; font-size: 8px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--bh-dark) !important;
  border-bottom: 1px solid rgba(75,68,59,.35); padding-bottom: 4px;
  text-decoration: none; font-family: var(--bh-font-sans);
  transition: border-color .3s;
}
.bh-btn-outline:hover { border-color: var(--bh-dark); }

/* ── MARQUEE ──────────────────────────────────────── */
.bh-marquee-wrap {
  border-bottom: 1px solid var(--bh-line);
  padding: 13px 0; overflow: hidden;
  white-space: nowrap; background: var(--bh-faint);
}
.bh-marquee-track { display: inline-block; animation: bh-marquee 32s linear infinite; }
.bh-marquee-track span {
  font-size: 8px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--bh-muted); padding: 0 32px; font-family: var(--bh-font-sans);
}
.bh-marquee-track span.dot { color: rgba(75,68,59,.2); padding: 0 6px; }
@keyframes bh-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── SHARED SECTION STYLES ────────────────────────── */
.bh-section { padding: 100px 52px; border-bottom: 1px solid var(--bh-line); }
.bh-section-faint { background: var(--bh-faint); }
.bh-section-dark  { background: var(--bh-dark); color: var(--bh-cream); }

.bh-eyebrow {
  font-size: 8px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--bh-muted); margin-bottom: 18px; font-family: var(--bh-font-sans);
}
.bh-section-dark .bh-eyebrow { color: rgba(249,248,241,.4); }

.bh-h2 {
  font-family: var(--bh-font-serif);
  font-size: clamp(30px,3.8vw,52px); font-weight: 300;
  line-height: 1.15; color: var(--bh-ink); margin-bottom: 26px;
}
.bh-h2 em { font-style: italic; color: var(--bh-mid); }
.bh-section-dark .bh-h2 { color: var(--bh-cream); }
.bh-section-dark .bh-h2 em { color: rgba(249,248,241,.55); }

.bh-body {
  font-size: 11.5px; letter-spacing: .3px; color: var(--bh-muted);
  line-height: 2.1; margin-bottom: 24px; font-family: var(--bh-font-sans);
}
.bh-section-dark .bh-body { color: rgba(249,248,241,.6); }

/* ── INTRO (2-col text + image grid) ─────────────── */
.bh-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.bh-img-grid-2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 300px 300px; gap: 4px; }
.bh-img-grid-2 .bh-tall { grid-row: 1 / 3; }
.bh-ibox { overflow: hidden; }
.bh-ibox img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  display: block; transition: transform .8s ease;
}
.bh-ibox:hover img { transform: scale(1.04); }

/* ── WHAT IS BRANDING ─────────────────────────────── */
.bh-three-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 56px;
}
.bh-stat { padding: 40px; border-right: 1px solid rgba(255,255,255,.1); }
.bh-stat:last-child { border-right: none; }
.bh-stat-q {
  font-family: var(--bh-font-serif); font-size: 18px; font-weight: 300;
  font-style: italic; color: var(--bh-cream); margin-bottom: 14px; line-height: 1.3;
}
.bh-stat-a { font-size: 10.5px; letter-spacing: .3px; color: rgba(249,248,241,.5); line-height: 1.9; font-family: var(--bh-font-sans); }

/* ── FIVE CATEGORY PANELS ─────────────────────────── */
.bh-cats-head { padding: 80px 52px 48px; border-bottom: 1px solid var(--bh-line); }
.bh-cats-head-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.bh-cats-head-desc { font-size: 10.5px; letter-spacing: .3px; color: var(--bh-muted); line-height: 1.9; max-width: 360px; font-family: var(--bh-font-sans); }
.bh-cats { display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; border-bottom: 1px solid var(--bh-line); }
.bh-cat { position: relative; aspect-ratio: 2/3; overflow: hidden; cursor: pointer; }
.bh-cat img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .9s cubic-bezier(.25,.46,.45,.94); }
.bh-cat:hover img { transform: scale(1.06); }
.bh-cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(75,68,59,.92) 0%, rgba(75,68,59,.25) 50%, rgba(75,68,59,.05) 100%);
  transition: background .4s;
}
.bh-cat:hover .bh-cat-overlay { background: linear-gradient(to top, rgba(75,68,59,.97) 0%, rgba(75,68,59,.5) 55%, rgba(75,68,59,.1) 100%); }
.bh-cat-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 20px; z-index: 2; }
.bh-cat-num { font-size: 7.5px; letter-spacing: 3px; text-transform: uppercase; color: rgba(249,248,241,.35); margin-bottom: 8px; font-family: var(--bh-font-sans); }
.bh-cat-name { font-family: var(--bh-font-serif); font-size: 22px; font-weight: 300; color: var(--bh-cream); margin-bottom: 6px; line-height: 1.15; }
.bh-cat-sub { font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(249,248,241,.4); margin-bottom: 14px; font-family: var(--bh-font-sans); }
.bh-cat-link {
  display: inline-block; font-size: 7.5px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(249,248,241,.7); border-bottom: 1px solid rgba(249,248,241,.3);
  padding-bottom: 3px; text-decoration: none; font-family: var(--bh-font-sans);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.bh-cat:hover .bh-cat-link { opacity: 1; transform: translateY(0); }

/* ── PROCESS ──────────────────────────────────────── */
.bh-process-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 56px; }
.bh-proc-item { padding: 40px 36px; border-right: 1px solid var(--bh-line); }
.bh-proc-item:last-child { border-right: none; }
.bh-proc-num { font-family: var(--bh-font-serif); font-size: 56px; font-weight: 300; color: rgba(75,68,59,.08); line-height: 1; margin-bottom: -4px; }
.bh-proc-title { font-family: var(--bh-font-serif); font-size: 19px; font-weight: 300; color: var(--bh-ink); margin-bottom: 14px; }
.bh-proc-body { font-size: 10.5px; letter-spacing: .3px; color: var(--bh-muted); line-height: 1.95; font-family: var(--bh-font-sans); }

/* ── CLIENT LOGOS ─────────────────────────────────── */
.bh-clients { padding: 52px 52px; border-bottom: 1px solid var(--bh-line); }
.bh-clients-label { font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: var(--bh-muted); text-align: center; margin-bottom: 32px; font-family: var(--bh-font-sans); }
.bh-clients-logos { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: center; opacity: .32; filter: sepia(1) saturate(0); }
.bh-clients-logos img { height: 26px; width: auto; object-fit: contain; display: block; }

/* ── GALLERY STRIP ────────────────────────────────── */
.bh-gallery-strip { display: grid; grid-template-columns: repeat(6,1fr); gap: 3px; border-top: 1px solid var(--bh-line); }
.bh-gallery-strip-img { aspect-ratio: 3/4; overflow: hidden; }
.bh-gallery-strip-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .9s ease; }
.bh-gallery-strip-img:hover img { transform: scale(1.06); }

/* ── QUOTE ────────────────────────────────────────── */
.bh-quote-block { padding: 96px 52px; text-align: center; background: var(--bh-dark); }
.bh-quote-mark { font-family: var(--bh-font-serif); font-size: 80px; font-weight: 300; color: rgba(249,248,241,.08); line-height: .3; margin-bottom: 28px; }
.bh-quote-text { font-family: var(--bh-font-serif); font-size: clamp(20px,2.8vw,34px); font-weight: 300; font-style: italic; line-height: 1.55; color: rgba(249,248,241,.82); max-width: 800px; margin: 0 auto 24px; }
.bh-quote-attr { font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: rgba(249,248,241,.3); font-family: var(--bh-font-sans); }

/* ── WHO / CHECKLIST ──────────────────────────────── */
.bh-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.bh-who-imgs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 520px; }
.bh-who-imgs .bh-tall { grid-row: 1 / 3; }
.bh-checklist { list-style: none; margin-bottom: 36px; }
.bh-checklist li {
  font-size: 11px; letter-spacing: .3px; color: var(--bh-muted);
  padding: 15px 0; border-bottom: 1px solid var(--bh-line);
  display: flex; align-items: center; gap: 16px; font-family: var(--bh-font-sans);
}
.bh-checklist li::before { content: ''; display: block; width: 20px; height: 1px; background: rgba(75,68,59,.28); flex-shrink: 0; }

/* ── LOCATIONS ────────────────────────────────────── */
.bh-locs { padding: 72px 52px; border-bottom: 1px solid var(--bh-line); background: var(--bh-faint); }
.bh-locs-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 32px; }
.bh-locs-title { font-family: var(--bh-font-serif); font-size: clamp(24px,3vw,40px); font-weight: 300; color: var(--bh-ink); }
.bh-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-tag { font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: var(--bh-muted); border: 1px solid var(--bh-line-strong); padding: 9px 18px; transition: all .3s; cursor: default; font-family: var(--bh-font-sans); }
.bh-tag:hover { color: var(--bh-ink); border-color: var(--bh-dark); }

/* ── CTA ──────────────────────────────────────────── */
.bh-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.bh-cta-title { font-family: var(--bh-font-serif); font-size: clamp(40px,5.5vw,70px); font-weight: 300; line-height: 1.06; margin-bottom: 28px; color: var(--bh-ink); }
.bh-cta-title em { font-style: italic; color: var(--bh-mid); }
.bh-cta-body { font-size: 11.5px; letter-spacing: .3px; color: var(--bh-muted); line-height: 2.1; margin-bottom: 36px; font-family: var(--bh-font-sans); }
.bh-cta-contact { margin-top: 18px; font-size: 10px; letter-spacing: 1px; color: var(--bh-muted); font-family: var(--bh-font-sans); }
.bh-cta-contact a { color: var(--bh-dark); border-bottom: 1px solid var(--bh-line-strong); padding-bottom: 2px; text-decoration: none; }
.bh-cta-imgs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 540px; }
.bh-cta-imgs .bh-tall { grid-row: 1 / 3; }

/* ── FOOTER ───────────────────────────────────────── */
.bh-footer { padding: 32px 52px; background: var(--bh-dark); display: flex; justify-content: space-between; align-items: center; }
.bh-footer-logo { font-family: var(--bh-font-serif); font-size: 12px; letter-spacing: 5px; text-transform: uppercase; font-weight: 300; color: rgba(249,248,241,.38); }
.bh-footer-links { display: flex; gap: 24px; }
.bh-footer-links a { font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: rgba(249,248,241,.25); text-decoration: none; transition: color .3s; font-family: var(--bh-font-sans); }
.bh-footer-links a:hover { color: rgba(249,248,241,.65); }
.bh-footer-copy { font-size: 9px; color: rgba(249,248,241,.18); font-family: var(--bh-font-sans); }

/* ── HERO FADE-IN ANIMATION ───────────────────────── */
@keyframes bh-fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.bh-hero-v2-content > * { animation: bh-fadeUp .9s ease both; }
.bh-hero-eyebrow   { animation-delay: .1s; }
.bh-hero-h1        { animation-delay: .25s; }
.bh-hero-sub-text  { animation-delay: .4s; }
.bh-hero-sub-tags  { animation-delay: .5s; }
.bh-btn-dark       { animation-delay: .6s; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .bh-nav { padding: 16px 28px; }
  .bh-hero-v2-content { grid-template-columns: 1fr; gap: 32px; padding: 48px 28px 56px; }
  .bh-section { padding: 72px 28px; }
  .bh-intro-grid, .bh-who-grid, .bh-cta-grid { grid-template-columns: 1fr; gap: 40px; }
  .bh-cats { grid-template-columns: repeat(3,1fr); }
  .bh-three-stats { grid-template-columns: 1fr; }
  .bh-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .bh-process-grid { grid-template-columns: 1fr 1fr; }
  .bh-gallery-strip { grid-template-columns: repeat(3,1fr); }
  .bh-cats-head { padding: 56px 28px 36px; }
  .bh-cats-head-inner { flex-direction: column; gap: 24px; }
  .bh-locs { padding: 56px 28px; }
  .bh-locs-inner { flex-direction: column; align-items: flex-start; }
  .bh-footer { padding: 28px; flex-direction: column; gap: 20px; text-align: center; }
  .bh-clients { padding: 40px 28px; }
  .bh-quote-block { padding: 72px 28px; }
}
@media (max-width: 640px) {
  .bh-hero-v2 { grid-template-columns: 1fr; }
  .bh-hero-v2-img:last-of-type { display: none; }   /* show one image on mobile */
  .bh-hero-v2-img { height: 65vh; min-height: 400px; }
  .bh-cats { grid-template-columns: 1fr 1fr; }
  .bh-process-grid { grid-template-columns: 1fr; }
  .bh-gallery-strip { grid-template-columns: repeat(2,1fr); }
  .bh-nav-links { display: none; }
  .bh-img-grid-2, .bh-who-imgs, .bh-cta-imgs { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .bh-img-grid-2 .bh-tall, .bh-who-imgs .bh-tall, .bh-cta-imgs .bh-tall { grid-row: auto; }
  .bh-ibox { height: 280px; }
}