/*
Theme Name: ALT Digital Child
Theme URI: https://altcollectivedigital.com
Author: ALT Digital
Author URI: https://altcollectivedigital.com
Description: Custom Astra child theme for the ALT Digital homepage redesign. Renders a fully bespoke front page with Playfair Display + Poppins typography, forest-green / terracotta palette, and editorial studio-agency layout. Overrides Astra defaults that fight the custom design (link underlines, heading colors, container padding, etc.).
Version: 1.0.5
Template: astra
Text Domain: altcollectivedigital-child
*/

/* ═══════════════════════════════════════════════════════════════════
   ALT DIGITAL — child theme CSS
   Loaded after Astra parent style — overrides are intentional.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── DEFENSIVE RESPONSIVE BASELINE ─── */
html { scroll-behavior: smooth; overflow-x: hidden; font-size: 16px !important; }
html, body { max-width: 100vw; }
body.home {
  font-family: 'Poppins', system-ui, sans-serif !important;
  color: #111111;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.5;
}
body.home p { line-height: 1.6; }
body.home h1, body.home h2, body.home h3 { line-height: 1.15; }

/* ─── EXPLICIT SECTION PADDING — fallback in case Tailwind's custom spacing didn't generate ─── */
body.home .py-section { padding-top: 80px !important; padding-bottom: 80px !important; }
body.home .py-section-lg { padding-top: 96px !important; padding-bottom: 96px !important; }
@media (min-width: 768px) {
  body.home .md\:py-section { padding-top: 80px !important; padding-bottom: 80px !important; }
  body.home .md\:py-section-lg { padding-top: 120px !important; padding-bottom: 120px !important; }
}

/* Hero padding — ensures clean breathing room above + below hero block */
body.home header#top { padding-top: 96px; padding-bottom: 40px; }
@media (min-width: 768px) {
  body.home header#top { padding-top: 112px; padding-bottom: 48px; }
}

/* Differentiator banner — vertical breathing room */
body.home section.bg-\[\#f6f3f2\] { padding-top: 40px !important; padding-bottom: 40px !important; }
@media (min-width: 768px) { body.home section.bg-\[\#f6f3f2\] { padding-top: 48px !important; padding-bottom: 48px !important; } }

/* Hide Astra scroll-to-top button (the corner back-to-top arrow) */
body.home .ast-scroll-top,
body.home #ast-scroll-top,
body.home .ast-scroll-to-top-wrapper,
body.home #scroll-to-top,
body.home .ast-scroll-top-icon { display: none !important; }

/* ─── TAILWIND TEXT-SIZE OVERRIDES ───
   Force standard Tailwind font sizes — Astra's heading CSS variables would otherwise
   shrink h1/h2/h3 below their intended size. */
body.home .text-xs   { font-size: 12px !important; line-height: 1rem !important; }
body.home .text-sm   { font-size: 14px !important; line-height: 1.25rem !important; }
body.home .text-base { font-size: 16px !important; line-height: 1.5rem !important; }
body.home .text-lg   { font-size: 18px !important; line-height: 1.75rem !important; }
body.home .text-xl   { font-size: 20px !important; line-height: 1.75rem !important; }
body.home .text-2xl  { font-size: 24px !important; line-height: 2rem !important; }
body.home .text-3xl  { font-size: 30px !important; line-height: 2.25rem !important; }
body.home .text-4xl  { font-size: 36px !important; line-height: 2.5rem !important; }
body.home .text-5xl  { font-size: 48px !important; line-height: 1 !important; }
body.home .text-6xl  { font-size: 60px !important; line-height: 1 !important; }
@media (min-width: 768px) {
  body.home .md\:text-base { font-size: 16px !important; line-height: 1.5rem !important; }
  body.home .md\:text-lg   { font-size: 18px !important; line-height: 1.75rem !important; }
  body.home .md\:text-xl   { font-size: 20px !important; line-height: 1.75rem !important; }
  body.home .md\:text-2xl  { font-size: 24px !important; line-height: 2rem !important; }
  body.home .md\:text-3xl  { font-size: 30px !important; line-height: 2.25rem !important; }
  body.home .md\:text-4xl  { font-size: 36px !important; line-height: 2.5rem !important; }
  body.home .md\:text-5xl  { font-size: 48px !important; line-height: 1 !important; }
  body.home .md\:text-6xl  { font-size: 60px !important; line-height: 1 !important; }
}
/* Arbitrary pixel sizes used in hero h1 + stats — explicit !important to beat Astra h1 rules */
body.home .text-\[36px\]  { font-size: 36px !important; line-height: 1.06 !important; }
body.home .text-\[58px\]  { font-size: 58px !important; line-height: 1.05 !important; }
body.home .text-\[28px\]  { font-size: 28px !important; }
body.home .text-\[15px\]  { font-size: 15px !important; }
body.home .text-\[17px\]  { font-size: 17px !important; }
body.home .text-\[11px\]  { font-size: 11px !important; }
body.home .text-\[12px\]  { font-size: 12px !important; }
body.home .text-\[13px\]  { font-size: 13px !important; }
@media (min-width: 768px) {
  body.home .md\:text-\[58px\] { font-size: 58px !important; line-height: 1.05 !important; }
  body.home .md\:text-\[28px\] { font-size: 28px !important; }
  body.home .md\:text-\[17px\] { font-size: 17px !important; }
}
body.home img, body.home svg { max-width: 100%; height: auto; }
body.home p, body.home blockquote, body.home h1, body.home h2, body.home h3, body.home h4,
body.home li, body.home figcaption, body.home label {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
body.home .font-display { font-family: 'Playfair Display', serif !important; }

/* ─── ASTRA OVERRIDES — kill defaults that fight ALT Digital ─── */

/* Kill underlines on links — Astra adds them by default */
body.home a,
body.home a:hover,
body.home a:focus,
body.home .entry-content a,
body.home .entry-content a:hover,
body.home .entry-content a:focus {
  text-decoration: none !important;
  box-shadow: none !important;
}
body.home a { color: inherit; }

/* Force heading colors / fonts — Astra sets its own via --ast-global-color-X */
body.home h1, body.home h2, body.home h3, body.home h4, body.home h5, body.home h6,
body.home .entry-content :where(h1, h2, h3, h4, h5, h6) {
  font-family: 'Playfair Display', serif !important;
  color: inherit !important;
  margin: 0;
  padding: 0;
}

/* Allow Tailwind text-* classes to win for colour */
body.home .text-alt-green     { color: #216855 !important; }
body.home .text-alt-terracotta{ color: #c4714a !important; }
body.home .text-alt-text      { color: #111111 !important; }
body.home .text-white         { color: #ffffff !important; }
body.home .text-alt-muted     { color: #3f4945 !important; }
body.home .bg-alt-bg          { background-color: #ffffff !important; }
body.home .bg-alt-green       { background-color: #216855 !important; }
body.home .bg-alt-cta         { background-color: #216855 !important; }
body.home .bg-alt-text        { background-color: #111111 !important; }
body.home .bg-alt-terracotta  { background-color: #c4714a !important; }

/* The dark contact section — force white text everywhere */
body.home #contact,
body.home #contact h2,
body.home #contact p,
body.home #contact label,
body.home #contact .text-white {
  color: #ffffff !important;
}
body.home #contact .text-alt-terracotta { color: #c4714a !important; }
body.home #contact h2 .italic { color: #c4714a !important; }

/* Container resets — Astra wraps content in .entry-content / .ast-container with padding/max-width */
body.home .entry-content,
body.home .ast-container,
body.home .site-content,
body.home #primary,
body.home #main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
body.home .entry-content p { margin: 0; }
body.home figure { margin: 0; }

/* Tailwind display utilities — base versions WITHOUT !important so responsive
   variants (md:flex, md:hidden, etc.) can override them at higher breakpoints.
   The previous version used !important here which blocked desktop nav from showing. */
body.home .inline-flex { display: inline-flex; }
body.home .flex        { display: flex; }
body.home .block       { display: block; }
body.home .hidden      { display: none; }
body.home .grid        { display: grid; }

/* Responsive display utilities — !important so they win over both base utilities
   AND any Astra rules. Order matters: these are LAST in source. */
@media (min-width: 640px) {
  body.home .sm\:hidden     { display: none !important; }
  body.home .sm\:flex       { display: flex !important; }
  body.home .sm\:block      { display: block !important; }
  body.home .sm\:inline-flex{ display: inline-flex !important; }
  body.home .sm\:grid       { display: grid !important; }
}
@media (min-width: 768px) {
  body.home .md\:hidden     { display: none !important; }
  body.home .md\:flex       { display: flex !important; }
  body.home .md\:block      { display: block !important; }
  body.home .md\:inline-flex{ display: inline-flex !important; }
  body.home .md\:grid       { display: grid !important; }
}
@media (min-width: 1024px) {
  body.home .lg\:hidden     { display: none !important; }
  body.home .lg\:flex       { display: flex !important; }
  body.home .lg\:block      { display: block !important; }
}

/* ─── NICHE TOGGLE — radio-driven, no JS ─── */
body.home .niche-panel { display: none; }
body.home #niche-ecom:checked     ~ .niche-stack .panel-ecom     { display: block !important; }
body.home #niche-personal:checked ~ .niche-stack .panel-personal { display: block !important; }
body.home #niche-ecom:checked     ~ .niche-tabs label[for="niche-ecom"]     { background:#216855 !important; color:#fff !important; }
body.home #niche-personal:checked ~ .niche-tabs label[for="niche-personal"] { background:#216855 !important; color:#fff !important; }

/* ─── SLIDER ─── */
body.home .slider { overflow: hidden; width: 100%; }
body.home .slider-track {
  display: flex !important;
  transition: transform 480ms cubic-bezier(.22,.61,.36,1);
}
body.home .slider-card { flex: 0 0 100%; min-width: 0; display: block !important; }
@media (min-width: 768px) { body.home .slider-card { flex: 0 0 33.3333%; } }
body.home .slider-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.home .slider-card span.inline-flex {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
body.home .slider-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: #d4c5b0;
  transition: background 200ms, transform 200ms;
  border: 0; padding: 0; cursor: pointer;
}
body.home .slider-dot.active { background:#216855; transform: scale(1.4); }

/* Slider arrow buttons — hover state must be green, not Astra's default link blue */
body.home #slider-prev,
body.home #slider-next {
  background: transparent !important;
  color: inherit;
  transition: color 200ms, border-color 200ms;
}
body.home #slider-prev:hover,
body.home #slider-next:hover,
body.home #slider-prev:focus,
body.home #slider-next:focus {
  color: #216855 !important;
  border-color: #216855 !important;
  background: transparent !important;
}
body.home #slider-prev:hover svg,
body.home #slider-next:hover svg { color: #216855 !important; }

/* General button hover — kill Astra's link-blue hover on buttons across the page */
body.home button:hover { background-color: transparent; }
body.home .niche-tabs label:hover { color: #216855; }

/* ─── CTA HOVER STATES — green pill turns terracotta on hover ─── */
body.home a.bg-alt-cta:hover,
body.home a.bg-alt-cta:focus,
body.home .bg-alt-cta:hover,
body.home a.hover\:bg-alt-terracotta:hover,
body.home a.bg-alt-green:hover {
  background-color: #c4714a !important;
  color: #ffffff !important;
}
body.home a.bg-alt-cta:hover svg,
body.home a.bg-alt-cta:hover * { color: #ffffff !important; }

/* Light-button (form submit + sticky CTA) hover */
body.home button[type="submit"].bg-white:hover,
body.home #contact .wpforms-submit:hover {
  background-color: #c4714a !important;
  color: #ffffff !important;
}

/* Inline panel links — green → terracotta on hover */
body.home a.text-alt-green:hover,
body.home a.text-alt-green:focus { color: #c4714a !important; }
body.home a.text-alt-green:hover svg { color: #c4714a !important; }

/* ─── STICKY FLOATING CTA — fade-in after hero leaves viewport ─── */
body.home #sticky-cta {
  position: fixed;
  z-index: 40;
  bottom: 20px;
  right: 20px;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #216855 !important;
  color: #ffffff !important;
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 9999px;
  padding: 12px 20px;
  box-shadow: 0 10px 25px rgba(33, 104, 85, 0.25);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 300ms, transform 300ms, background-color 200ms;
}
body.home #sticky-cta svg { color: #ffffff; }
@media (min-width: 768px) {
  body.home #sticky-cta {
    bottom: 32px;
    right: 32px;
    font-size: 13px;
    padding: 14px 28px;
  }
}
body.home #sticky-cta.cta-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
body.home #sticky-cta:hover {
  background: #c4714a !important;
  color: #ffffff !important;
}

/* ─── FORM: minimal underline inputs on dark section ─── */
body.home .field { position: relative; }
body.home .field input, body.home .field textarea {
  width: 100% !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.5) !important;
  background: transparent !important;
  padding: 14px 0 8px !important;
  outline: none !important;
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-size: 16px !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 200ms !important;
}
body.home .field input:focus, body.home .field textarea:focus {
  border-bottom-color: #c4714a !important;
}
body.home .field textarea { resize: vertical; min-height: 110px; }
body.home .field label {
  position: absolute !important;
  left: 0; top: 14px;
  pointer-events: none;
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.7) !important;
  transition: transform 200ms, font-size 200ms, color 200ms;
}
body.home .field input:focus + label,
body.home .field input:not(:placeholder-shown) + label,
body.home .field textarea:focus + label,
body.home .field textarea:not(:placeholder-shown) + label {
  transform: translateY(-22px);
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c4714a !important;
}

/* ─── FORM: track selector (custom radio buttons) ─── */
body.home .track-group > .track-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
}
body.home .track-options { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) {
  body.home .track-options { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
}
body.home .track-option {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
}
body.home .track-option input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
  transition: border-color 200ms;
}
body.home .track-option input[type="radio"]:checked { border-color: #c4714a; }
body.home .track-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #c4714a;
  border-radius: 50%;
}
body.home .track-option input[type="radio"]:focus-visible {
  outline: 2px solid #c4714a;
  outline-offset: 2px;
}
body.home .track-option > span { font-size: 14px; color: rgba(255,255,255,0.85); }

/* ─── HERO STAT ROW ─── */
body.home .stat { border-left: 1px solid rgba(17,17,17,0.12); padding-left: 18px; }
body.home .stat:first-child { border-left: 0; padding-left: 0; }

/* ─── SELECTION ─── */
body.home ::selection { background:#216855; color:#fff; }

/* ─── WPForms OVERRIDES (if you use WPForms shortcode in the form section) ─── */
body.home #contact .wpforms-container { max-width: 100%; margin-top: 0.5rem; }
body.home #contact .wpforms-title,
body.home #contact .wpforms-description { display: none; }
body.home #contact .wpforms-form .wpforms-field {
  padding: 0 0 12px 0;
  margin-bottom: 20px;
}
body.home #contact .wpforms-field-label,
body.home #contact .wpforms-field legend.wpforms-field-label {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  margin-bottom: 10px !important;
  font-weight: 500 !important;
}
body.home #contact .wpforms-field input[type="text"],
body.home #contact .wpforms-field input[type="email"],
body.home #contact .wpforms-field input[type="url"],
body.home #contact .wpforms-field input[type="tel"],
body.home #contact .wpforms-field textarea {
  width: 100% !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.5) !important;
  background: transparent !important;
  padding: 12px 0 8px !important;
  outline: none !important;
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-size: 16px !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.home #contact .wpforms-field input:focus,
body.home #contact .wpforms-field textarea:focus {
  border-bottom-color: #c4714a !important;
  box-shadow: none !important;
}
body.home #contact .wpforms-field-radio ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
@media (min-width: 640px) {
  body.home #contact .wpforms-field-radio ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px 20px !important;
  }
}
body.home #contact .wpforms-field-radio li {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}
body.home #contact .wpforms-field-radio input[type="radio"] {
  appearance: none !important; -webkit-appearance: none !important;
  width: 18px !important; height: 18px !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
}
body.home #contact .wpforms-field-radio input[type="radio"]:checked { border-color: #c4714a !important; }
body.home #contact .wpforms-field-radio input[type="radio"]:checked::after {
  content: ''; position: absolute; inset: 3px;
  background: #c4714a; border-radius: 50%;
}
body.home #contact .wpforms-field-radio label {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.85) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
body.home #contact .wpforms-submit-container { margin-top: 32px; }
body.home #contact .wpforms-submit {
  background: #ffffff !important;
  color: #111111 !important;
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  border: 0 !important;
  border-radius: 9999px !important;
  padding: 16px 32px !important;
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
  box-shadow: none !important;
}
body.home #contact .wpforms-submit:hover {
  background: #c4714a !important;
  color: #ffffff !important;
}