/*
Theme Name: A Cat Named Boots (GeneratePress Child)
Template: generatepress
Description: Child theme built on GeneratePress with the site's custom colors, fonts, page sections, and scroll animations.
Version: 2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: boots
*/

:root{
  --bh-ink:#2B2115;
  --bh-text-2:#6B5F4E;
  --bh-cream:#FFF8EB;
  --bh-teal-tint:#EAF6F2;
  --bh-coral-tint:#FFEFEA;
  --bh-card:#FFFFFF;
  --bh-marigold:#F4941E;
  --bh-marigold-deep:#D9740A;
  --bh-teal:#1E9484;
  --bh-coral:#FF6F5E;
  --bh-line: rgba(43,33,21,0.1);
  --bh-logo-height: 52px;
}
body{background:var(--bh-cream); color:var(--bh-ink); font-family:'Nunito', sans-serif;}
.bh-wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
h1,h2,h3{font-family:'Fredoka', sans-serif; font-weight:700;}

/* Logo sizing (works alongside GeneratePress's own logo width setting) */
.site-logo img, .custom-logo{max-height:var(--bh-logo-height) !important; height:var(--bh-logo-height) !important; width:auto !important;}

/* ===== HERO ===== */
.bh-hero{background:var(--bh-marigold); padding:56px 32px 0;}
.bh-hero-inner{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.bh-stamp{display:inline-flex; align-items:center; gap:8px; background:var(--bh-ink); color:var(--bh-cream); font-family:'Fredoka', sans-serif; font-weight:600; font-size:13px; padding:9px 18px 9px 14px; border-radius:100px; transform:rotate(-4deg); margin-bottom:22px; transition:transform .2s ease;}
.bh-hero-inner:hover .bh-stamp{transform:rotate(-4deg) scale(1.05);}
.bh-hero-title{font-family:'Fredoka', sans-serif; font-weight:700; font-size:clamp(38px, 6.4vw, 82px); line-height:0.98; margin:0 0 18px; color:var(--bh-ink);}
.bh-hero-sub{font-size:19px; color:#4A3B24; max-width:440px; margin:0 0 30px; font-weight:600;}
.bh-hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.bh-btn{display:inline-block; padding:15px 28px; border-radius:100px; font-size:15px; font-weight:700; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;}
.bh-btn-primary{background:var(--bh-ink); color:var(--bh-cream); box-shadow:5px 5px 0 rgba(0,0,0,0.15);}
.bh-btn-primary:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(0,0,0,0.18); color:var(--bh-cream);}
.bh-btn-outline{background:var(--bh-cream); color:var(--bh-ink); box-shadow:5px 5px 0 rgba(0,0,0,0.15);}
.bh-btn-outline:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(0,0,0,0.18); color:var(--bh-ink);}
@keyframes bh-float{ 0%, 100%{ transform:rotate(3deg) translateY(0); } 50%{ transform:rotate(3deg) translateY(-10px); } }
.bh-hero-photo img{width:100%; border-radius:18px; display:block; border:6px solid var(--bh-cream); box-shadow:0 16px 0 rgba(0,0,0,0.08); animation:bh-float 4.5s ease-in-out infinite;}

/* ===== INTRO ===== */
.bh-intro{padding:64px 0 24px; text-align:center;}
.bh-intro blockquote{font-family:'Fredoka', sans-serif; font-weight:600; font-size:clamp(22px, 3vw, 34px); line-height:1.35; margin:0 auto 20px; max-width:760px; color:var(--bh-ink);}
.bh-intro p{font-size:16.5px; color:var(--bh-text-2); max-width:600px; margin:0 auto 12px; font-weight:600;}

/* ===== TAGS ===== */
.bh-tag{display:inline-block; font-family:'Fredoka', sans-serif; font-size:13px; font-weight:600; padding:6px 16px; border-radius:100px; margin-bottom:14px;}
.bh-tag-marigold{background:#FDECD2; color:var(--bh-marigold-deep);}
.bh-tag-teal{background:var(--bh-teal-tint); color:var(--bh-teal);}
.bh-tag-coral{background:var(--bh-coral-tint); color:#D6503F;}

/* ===== PHOTO OF THE DAY ===== */
.bh-potd{background:var(--bh-teal-tint); padding:64px 0;}
.bh-potd-card{background:var(--bh-card); border-radius:24px; display:grid; grid-template-columns:1.1fr 1fr; overflow:hidden; box-shadow:0 10px 0 rgba(43,33,21,0.08);}
.bh-potd-media img{width:100%; height:100%; object-fit:cover; display:block; min-height:280px;}
.bh-potd-body{padding:44px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;}
.bh-potd-body h2{font-size:28px; margin:0 0 14px;}
.bh-potd-body p{color:var(--bh-text-2); font-size:15.5px; margin:0 0 24px; max-width:320px; font-weight:600;}
.bh-thumbs{display:flex; gap:14px; margin-top:32px; overflow-x:auto; padding:8px 4px 10px;}
.bh-thumbs img{width:100px; height:100px; object-fit:cover; border-radius:14px; flex-shrink:0; border:4px solid #FFF; box-shadow:0 6px 0 rgba(43,33,21,0.08); transform:rotate(-2deg); transition:transform .2s ease;}
.bh-thumbs img:nth-child(even){transform:rotate(2deg);}
.bh-thumbs img:hover{transform:rotate(0deg) scale(1.08); z-index:2; position:relative;}
.bh-thumbs a.bh-more{width:100px; height:100px; flex-shrink:0; border-radius:14px; background:#FFF; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--bh-teal); text-align:center; padding:8px; text-decoration:none;}

/* ===== STORY CHAPTERS ===== */
.bh-story{padding:72px 0 8px;}
.bh-section-head{margin-bottom:44px; text-align:center;}
.bh-section-title{font-size:34px; margin:0; color:var(--bh-ink);}
.bh-chapter{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:48px 0;}
.bh-chapter.bh-rev .bh-chapter-media{order:2;}
.bh-chapter.bh-rev .bh-chapter-copy{order:1;}
.bh-chapter-media img{width:100%; border-radius:18px; display:block; border:6px solid #FFF; box-shadow:0 12px 0 rgba(43,33,21,0.08); transform:rotate(-2deg); transition:transform .3s ease;}
.bh-chapter.bh-rev .bh-chapter-media img{transform:rotate(2deg);}
.bh-chapter-media img:hover{transform:rotate(0deg) scale(1.02);}
.bh-chapter-media.bh-two-up{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.bh-chapter-media.bh-two-up img{height:100%; object-fit:cover;}
.bh-chapter-title{font-size:24px; margin:0 0 14px; color:var(--bh-ink);}
.bh-chapter-copy p{margin:0 0 14px; color:var(--bh-text-2); font-size:15.5px; font-weight:600;}

/* ===== EXPLORE CARDS ===== */
.bh-explore{padding:64px 0 80px; background:var(--bh-coral-tint);}
.bh-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;}
.bh-card{background:#FFF; border-radius:20px; padding:30px 26px; text-decoration:none; color:var(--bh-ink); display:flex; flex-direction:column; gap:12px; box-shadow:0 8px 0 rgba(43,33,21,0.08); transition:transform .15s ease;}
.bh-card:hover{transform:translateY(-5px); color:var(--bh-ink);}
.bh-card h3{font-size:19px; margin:0;}
.bh-card p{font-size:14px; color:var(--bh-text-2); margin:0; font-weight:600;}
.bh-card-link{display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:var(--bh-marigold-deep); transition:gap .2s ease;}
.bh-card:hover .bh-card-link{gap:8px;}

/* ===== GENERIC PAGE INTRO (Slideshow / Photo Albums / Contact) ===== */
.bh-page-intro{max-width:720px; margin:0 auto; padding:48px 24px 32px; text-align:center;}
.bh-page-intro h2{font-size:30px; margin:0 0 14px; color:var(--bh-ink);}
.bh-page-intro p{font-size:16px; color:var(--bh-text-2); margin:0 auto; max-width:520px; font-weight:600;}

/* Contact form styling (Contact Form 7) */
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea{
  border:2px solid var(--bh-line); border-radius:14px; padding:12px 16px;
  font-family:'Nunito',sans-serif; background:#FFFFFF; width:100%;
}
.wpcf7-form input[type="submit"]{
  background:var(--bh-ink); color:var(--bh-cream); border:none; border-radius:100px;
  padding:14px 28px; font-weight:700; box-shadow:5px 5px 0 rgba(0,0,0,0.15); cursor:pointer;
}

/* ===== SCROLL REVEAL ===== */
.bh-reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.bh-reveal.bh-visible{opacity:1; transform:translateY(0);}
.bh-cards .bh-card:nth-child(1){transition-delay:0s;}
.bh-cards .bh-card:nth-child(2){transition-delay:.1s;}
.bh-cards .bh-card:nth-child(3){transition-delay:.2s;}

@media (prefers-reduced-motion: reduce){
  .bh-reveal{opacity:1; transform:none; transition:none;}
  .bh-hero-photo img{animation:none;}
  .bh-stamp, .bh-chapter-media img, .bh-card-link, .bh-thumbs img{transition:none;}
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .bh-hero-inner{grid-template-columns:1fr;}
  .bh-potd-card{grid-template-columns:1fr;}
  .bh-chapter{grid-template-columns:1fr; gap:20px;}
  .bh-chapter.bh-rev .bh-chapter-media{order:1;}
  .bh-chapter.bh-rev .bh-chapter-copy{order:2;}
  .bh-cards{grid-template-columns:1fr;}
}

/* =========================================================
   CUSTOMIZER-DRIVEN HEADER / FOOTER / LOGO
   (values come from Customize -> Boots Design)
   ========================================================= */

/* --- Header --- */
.site-header, #masthead, .bh-site-header{
  background: var(--bh-header-bg, #FFF8EB) !important;
  border-bottom: 3px solid var(--bh-header-border, #2B2115);
  transition: padding .25s ease, box-shadow .25s ease;
}
.site-header .inside-header,
.bh-site-header .bh-nav-row{
  padding-top: var(--bh-header-pad, 18px) !important;
  padding-bottom: var(--bh-header-pad, 18px) !important;
  transition: padding .25s ease;
}

/* Shrink-on-scroll: header slims down once you scroll past the top */
body.bh-shrink-enabled .site-header.bh-scrolled .inside-header,
body.bh-shrink-enabled .bh-site-header.bh-scrolled .bh-nav-row{
  padding-top: calc(var(--bh-header-pad, 18px) * 0.45) !important;
  padding-bottom: calc(var(--bh-header-pad, 18px) * 0.45) !important;
}
body.bh-shrink-enabled .site-header.bh-scrolled,
body.bh-shrink-enabled .bh-site-header.bh-scrolled{
  box-shadow: 0 4px 14px rgba(43,33,21,0.10);
}
body.bh-shrink-enabled .site-header.bh-scrolled .site-logo img,
body.bh-shrink-enabled .site-header.bh-scrolled .custom-logo,
body.bh-shrink-enabled .bh-site-header.bh-scrolled .bh-wordmark img{
  height: calc(var(--bh-logo-height, 52px) * 0.72) !important;
  max-height: calc(var(--bh-logo-height, 52px) * 0.72) !important;
  transition: height .25s ease, max-height .25s ease;
}

/* --- Logo: desktop --- */
.site-logo img, .custom-logo, .bh-wordmark img{
  max-height: var(--bh-logo-height, 52px) !important;
  height: var(--bh-logo-height, 52px) !important;
  width: auto !important;
  transition: height .25s ease, max-height .25s ease;
}

/* --- Footer --- */
.site-footer, #colophon, .bh-site-footer{
  background: var(--bh-footer-bg, #2B2115) !important;
  color: var(--bh-footer-text, #D8CFC0) !important;
}
.site-footer a, #colophon a, .bh-site-footer a{
  color: var(--bh-footer-text, #D8CFC0);
}
.site-footer a:hover, #colophon a:hover, .bh-site-footer a:hover{
  color: var(--bh-footer-link, #F4941E);
}

/* =========================================================
   MOBILE REFINEMENTS
   ========================================================= */
@media (max-width: 768px){

  /* Separate, smaller logo size on phones */
  .site-logo img, .custom-logo, .bh-wordmark img{
    max-height: var(--bh-logo-height-mob, 36px) !important;
    height: var(--bh-logo-height-mob, 36px) !important;
  }

  /* Tighter header so it doesn't eat the screen */
  .site-header .inside-header,
  .bh-site-header .bh-nav-row{
    padding-top: var(--bh-header-pad-mob, 10px) !important;
    padding-bottom: var(--bh-header-pad-mob, 10px) !important;
  }

  .bh-wrap{padding:0 20px;}

  /* Hero */
  .bh-hero{padding:36px 20px 0;}
  .bh-hero-title{font-size:clamp(34px, 11vw, 52px);}
  .bh-hero-sub{font-size:16.5px; margin-bottom:24px;}
  .bh-hero-actions{gap:10px;}
  .bh-btn{padding:13px 22px; font-size:14.5px;}
  .bh-stamp{font-size:12px; padding:8px 15px; margin-bottom:18px;}

  /* Photo of the day */
  .bh-potd{padding:44px 0;}
  .bh-potd-body{padding:28px 24px;}
  .bh-potd-body h2{font-size:24px;}
  .bh-potd-media img{min-height:220px;}

  /* Story */
  .bh-story{padding:48px 0 8px;}
  .bh-section-title{font-size:27px;}
  .bh-chapter{padding:32px 0;}
  .bh-chapter-title{font-size:21px;}
  .bh-chapter-copy p{font-size:15px;}
  .bh-chapter-media.bh-two-up{gap:8px;}

  /* Explore */
  .bh-explore{padding:44px 0 56px;}

  /* Intro */
  .bh-intro{padding:44px 0 16px;}
  .bh-intro blockquote{font-size:clamp(20px, 5.6vw, 26px);}
  .bh-intro p{font-size:15.5px;}

  /* Page intros */
  .bh-page-intro{padding:32px 20px 24px;}
  .bh-page-intro h2{font-size:25px;}
}

/* Very small phones */
@media (max-width: 400px){
  .bh-hero-actions{flex-direction:column; align-items:flex-start;}
  .bh-btn{width:100%; text-align:center;}
  .bh-thumbs img, .bh-thumbs a.bh-more{width:88px; height:88px;}
}

/* =========================================================
   GENERATEPRESS CONTAINER FIXES
   Our sections are designed to run edge-to-edge. GeneratePress
   wraps page content in a centred, max-width container (plus
   padding and a possible sidebar), which squeezes them and can
   make everything look off-centre. These rules let the sections
   break out to full width again.
   ========================================================= */

/* Stop the breakout rules from causing sideways scroll */
html, body { overflow-x: hidden; }

/* Full-bleed sections: escape the content container */
.entry-content .bh-hero,
.entry-content .bh-potd,
.entry-content .bh-explore,
.entry-content .bh-story,
.entry-content .bh-intro,
.entry-content .bh-page-intro{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* The inner .bh-wrap re-centres the content at a sane width */
.bh-wrap{
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* Remove GeneratePress's article padding/margins so sections sit flush */
.page .inside-article,
.page .entry-content{
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}
.page .inside-article{ padding-top: 0; padding-bottom: 0; }

/* Full-width content area (in case a sidebar slot is reserved) */
.page .content-area,
.page #primary{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* Hide the page title GeneratePress prints above the content -
   our hero already acts as the page heading */
.page .entry-header .entry-title{ display: none; }

/* =========================================================
   NAVIGATION + CONTENT BACKGROUNDS
   GeneratePress gives the nav bar and each content block their
   own background (white by default), which clashes with the
   cream page background. These make them match the theme.
   ========================================================= */

/* --- Navigation bar --- */
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation .main-nav > ul,
.main-navigation ul li{
  background: var(--bh-header-bg, #FFF8EB) !important;
}

.main-navigation .main-nav ul li a,
.main-navigation a{
  color: var(--bh-nav-text, #2B2115) !important;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  border-radius: 100px;
  transition: background .15s ease, color .15s ease;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li a:hover{
  background: var(--bh-nav-hover-bg, #FFEFEA) !important;
  color: var(--bh-nav-hover-text, #D6503F) !important;
}

.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a{
  background: var(--bh-nav-active-bg, #2B2115) !important;
  color: var(--bh-nav-active-text, #FFF8EB) !important;
}

/* Dropdown submenus */
.main-navigation ul ul{
  background: var(--bh-card, #FFFFFF) !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(43,33,21,0.08);
}
.main-navigation ul ul li a{ border-radius: 0; }

/* Mobile menu panel */
.main-navigation.toggled .main-nav > ul,
.mobile-menu-control-wrapper{
  background: var(--bh-header-bg, #FFF8EB) !important;
}
.menu-toggle, .menu-toggle:hover{
  background: transparent !important;
  color: var(--bh-nav-text, #2B2115) !important;
}

/* --- Content containers --- */
/* Let the cream page background show through instead of white boxes
   (this is what was making the contact form area look washed out) */
.site-content,
.content-area,
.inside-article,
.entry-content,
.separate-containers .inside-article,
.separate-containers .site-main,
.one-container .site-content{
  background: transparent !important;
}

/* Give the contact form a bit of breathing room now that its
   white box is gone */
.page .wpcf7{
  max-width: 620px;
  margin: 0 auto 56px;
  padding: 0 24px;
}

/* =========================================================
   LOGO SIZING - GeneratePress specificity override
   GeneratePress names its logo ".header-image" (not the standard
   ".custom-logo") and styles it via ".site-header .header-image",
   which outranked our earlier rule. These selectors outrank GP's.
   ========================================================= */
.site-header img.header-image,
.site-header img.is-logo-image,
.site-header .site-logo img,
.site-logo img,
img.custom-logo,
.bh-wordmark img{
  height: var(--bh-logo-height, 52px) !important;
  max-height: var(--bh-logo-height, 52px) !important;
  width: auto !important;
  max-width: none !important;
  transition: height .25s ease, max-height .25s ease;
}

/* Shrunken state while scrolled */
body.bh-shrink-enabled .site-header.bh-scrolled img.header-image,
body.bh-shrink-enabled .site-header.bh-scrolled img.is-logo-image,
body.bh-shrink-enabled .site-header.bh-scrolled .site-logo img,
body.bh-shrink-enabled .bh-site-header.bh-scrolled .bh-wordmark img{
  height: calc(var(--bh-logo-height, 52px) * 0.72) !important;
  max-height: calc(var(--bh-logo-height, 52px) * 0.72) !important;
}

/* Mobile size */
@media (max-width: 768px){
  .site-header img.header-image,
  .site-header img.is-logo-image,
  .site-header .site-logo img,
  .site-logo img,
  img.custom-logo,
  .bh-wordmark img{
    height: var(--bh-logo-height-mob, 36px) !important;
    max-height: var(--bh-logo-height-mob, 36px) !important;
  }
}