/* ── Self-hosted variable fonts ──────────────────────────────── */
/* Acumin Variable Concept — Adobe Original, self-hosted in wp-content/fonts/.
 * variation-settings axes: wght (100–900), wdth (condensed–extended).
 * Hero heading uses wght 800, Condensed style (wdth ~75). */
@font-face {
  font-family: 'Acumin Variable Concept';
  src: url('/wp-content/fonts/AcuminVariableConcept.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/*
Theme Name:   Baseball in the Attic
Theme URI:    https://baseballintheattic.com
Description:  Child theme of Hello Elementor for Baseball in the Attic.
Author:       Baseball in the Attic
Author URI:   https://baseballintheattic.com
Template:     hello-elementor
Version:      1.0.0
Text Domain:  bita-child
*/

/* ── Design tokens (from figma/design-tokens.json) ───────────── */
:root {
  /* Colors */
  --bita-cream:        #fffaec; /* page background */
  --bita-cream-card:   #f4efe2; /* card backgrounds, nav logo box */
  --bita-hero-cream:   #eae0c8; /* hero right panel */
  --bita-dark:         #1d1f1f; /* primary text, borders, nav BG, top bar BG */
  --bita-dark-foot:    #37393a; /* footer brand text + footer bar BG */
  --bita-banner-bg:    #86a9ba; /* site-wide banner strip */
  --bita-muted:        #bebaaf; /* muted / subtext */
  --bita-photo-card:   #faf6ed; /* photo stack background card */

  /* Typography — Hoefler Text is macOS/iOS system font; Palatino covers Windows */
  --bita-f-head:   'Hoefler Text', Palatino, 'Book Antiqua', Georgia, serif;
  --bita-f-serif:  'Merriweather', Georgia, serif;
  --bita-f-btn:    'Lexend', sans-serif;
  --bita-f-ui:     'Poppins', sans-serif;
  --bita-f-hero:   'Acumin Variable Concept', 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;

  /* Borders */
  --bita-border:   3px solid var(--bita-dark);

  /* Spacing */
  --bita-page-x:   124px;
  --bita-section-gap: 120px;
}

/* ── Global resets ───────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  background:   var(--bita-cream);
  color:        var(--bita-dark);
  font-family:  var(--bita-f-serif);
  margin:       0;
  padding:      0;
  overflow-x:   hidden;
}

img  { display: block; max-width: 100%; }
a    { color: inherit; text-decoration: none; }

/* Hello Elementor removes default margin — keep our bg visible */
.elementor-page { background: var(--bita-cream); }

/* ── Page border wrapper ─────────────────────────────────────── */
.bita-page-border {
  border:   var(--bita-border);
  margin:   0 20px;
  overflow: hidden;
}

/* ── Top bar (fallback — Elementor Pro header replaces this) ─── */
.bita-topbar {
  background:      var(--bita-dark);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 53px;
  font-family:     var(--bita-f-serif);
  font-size:       16px;
  letter-spacing:  -0.03em;
  line-height:     1.3;
  gap:             20px;
}
.bita-topbar em                    { font-style: italic; font-weight: 900; }
.bita-topbar a                     { color: #fff; }
.bita-topbar a:hover               { text-decoration: underline; }
.bita-topbar__right                { display: flex; align-items: center; gap: 28px; }
.bita-topbar__right img            { height: 26px; }

/* ── Site nav (fallback — Elementor Pro header replaces this) ── */
.bita-site-nav {
  background:           var(--bita-dark);
  display:              grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:          end;
  padding:              0 135px 17px;
  position:             relative;
  z-index:              20;
}

.bita-nav-links {
  display:         flex;
  gap:             60px;
  font-family:     var(--bita-f-serif);
  font-size:       16px;
  color:           #fff;
  letter-spacing:  -0.03em;
  white-space:     nowrap;
  line-height:     1.3;
  padding-bottom:  4px;
}
.bita-nav-links a            { color: #fff; }
.bita-nav-links a:hover      { opacity: 0.7; }
.bita-nav-links--right       { justify-content: flex-end; }

.bita-nav-logo-wrap          { display: flex; justify-content: center; }
.bita-nav-logo-box {
  background:       var(--bita-cream-card);
  border:           var(--bita-border);
  width:            312px;
  height:           221px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          19px 34px;
  position:         relative;
  z-index:          25;
  margin-top:       -20px;
  margin-bottom:    -110px;
}
.bita-nav-logo-box img,
.bita-nav-logo-box .custom-logo { width: 244px; height: 174px; object-fit: contain; }
.bita-nav-site-name {
  font-family:  var(--bita-f-head);
  font-size:    20px;
  color:        var(--bita-dark);
  text-align:   center;
  line-height:  1.2;
}

/* ── Site banner ─────────────────────────────────────────────── */
.bita-site-banner {
  background:      var(--bita-banner-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             40px;
  height:          40px;
  font-family:     var(--bita-f-serif);
  font-size:       20px;
  color:           var(--bita-dark);
  letter-spacing:  -0.03em;
  position:        relative;
  z-index:         10;
}
.bita-banner-dot {
  width:         8px;
  height:        8px;
  background:    var(--bita-dark);
  border-radius: 50%;
  flex-shrink:   0;
}

/* ── Global utility classes (available to Elementor custom CSS) ─ */
.btn-pill {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          72px;
  padding:         10px 60px;
  border:          var(--bita-border);
  border-radius:   37.5px;
  background:      #fff;
  font-family:     var(--bita-f-btn);
  font-size:       24px;
  font-weight:     700;
  color:           var(--bita-dark);
  letter-spacing:  -0.03em;
  text-transform:  uppercase;
  cursor:          pointer;
  white-space:     nowrap;
}
.btn-pill:hover  { background: var(--bita-cream-card); }

.sec-heading {
  font-family:    var(--bita-f-head);
  font-size:      clamp(36px, 4.2vw, 80px);
  letter-spacing: -0.03em;
  line-height:    1.16;
  color:          var(--bita-dark);
}

.sec-body {
  font-family:  var(--bita-f-serif);
  font-size:    24px;
  line-height:  1.83;
  color:        var(--bita-dark);
}

hr.bita-rule { border: none; border-top: var(--bita-border); }

/* ── Elementor header components ─────────────────────────────── */

/* Top bar: left contact block */
.bita-el-topbar-contact {
  font-family:    var(--bita-f-serif);
  font-size:      16px;
  color:          #fff;
  letter-spacing: -0.03em;
  line-height:    1.3;
}
.bita-el-topbar-contact em { font-style: italic; font-weight: 700; }

/* Top bar: right "Follow us" + social icons */
.bita-el-topbar-right {
  display:         flex;
  align-items:     center;
  gap:             28px;
  justify-content: flex-end;
  white-space:     nowrap;
  font-family:     var(--bita-f-serif);
  font-size:       16px;
  color:           #fff;
}
.bita-el-topbar-right img { height: 26px; }

/* Nav: link groups */
.bita-el-nav {
  display:        flex;
  gap:            40px;
  font-family:    var(--bita-f-serif);
  font-size:      16px;
  color:          #fff;
  letter-spacing: -0.03em;
  align-items:    center;
  padding:        24px 0;
}
.bita-el-nav a            { color: #fff; }
.bita-el-nav a:hover      { opacity: 0.7; }
.bita-el-nav--right       { justify-content: flex-end; }

/* Nav: logo box
 * Extends ~73px below the dark nav section (1/3 of total box height ~218px)
 * so the dark background ends at 2/3 of the logo height.
 * Requires overflow: visible on the Elementor section/column (see overrides below). */
.bita-el-logo-box {
  background:      var(--bita-cream-card);
  border:          var(--bita-border);
  padding:         19px 34px;
  display:         flex;
  justify-content: center;
  align-items:     center;
  margin:          0 auto;
  margin-bottom:   -73px;
  position:        relative;
  z-index:         30;
}
.bita-el-logo-box img {
  width:       244px;
  height:      174px;
  object-fit:  contain;
}

/* Allow logo box to visually overflow out of its Elementor column/section */
.elementor-location-header .elementor-widget-wrap,
.elementor-location-header .elementor-column,
.elementor-location-header .elementor-section { overflow: visible; }

/* ── Hello Elementor footer wrapper reset ────────────────────── */
/* Hello Elementor adds padding to .site-footer by default */
.site-footer { padding: 0 !important; margin: 0 !important; }

/* ── Elementor footer components ─────────────────────────────── */

/* Footer: brand heading "Baseball in the Attic" */
.bita-footer-brand {
  font-family:    var(--bita-f-head);
  font-size:      128px;
  letter-spacing: -0.02em;
  line-height:    1;
  color:          var(--bita-dark-foot);
  text-align:     center;
  font-weight:    400;
  margin:         0;
}

/* Footer: nav links row */
.bita-el-footer-links {
  display:         flex;
  gap:             60px;
  justify-content: center;
  flex-wrap:       wrap;
  font-family:     var(--bita-f-serif);
  font-size:       20px;
  font-weight:     400;
  letter-spacing:  0.01em;
  color:           var(--bita-dark-foot);
}
.bita-el-footer-links a { color: var(--bita-dark-foot); }
.bita-el-footer-links a:hover { text-decoration: underline; }

/* Footer: contact row */
.bita-el-footer-contact {
  display:         flex;
  gap:             60px;
  justify-content: center;
  flex-wrap:       wrap;
  font-family:     var(--bita-f-serif);
  font-size:       20px;
  font-weight:     400;
  letter-spacing:  0.01em;
  color:           var(--bita-dark-foot);
}

/* Footer dark bar: flex row wrapper */
.bita-el-footer-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  width:           100%;
  line-height:     1; /* prevent inherited line-height from misaligning children */
}

/* Footer bar: copyright — Poppins 500, 20px, white (matches Figma node 1:1073) */
.bita-el-footer-bar-copy {
  font-family:    var(--bita-f-ui);
  font-weight:    500;
  font-size:      20px;
  letter-spacing: 0.2px;
  line-height:    1;
  color:          #fff;
  margin:         0;
  padding:        0;
}

/* Footer bar: policy links — Poppins 500, 20px, white (matches Figma node 1:1074) */
.bita-el-footer-bar-policy {
  display:        flex;
  align-items:    center;
  gap:            4px;
  font-family:    var(--bita-f-ui);
  font-weight:    500;
  font-size:      20px;
  letter-spacing: 0.2px;
  line-height:    1;
  color:          #fff;
  white-space:    nowrap;
}
.bita-el-footer-bar-policy a          { color: #fff; text-decoration: none; line-height: 1; }
.bita-el-footer-bar-policy a:hover    { text-decoration: underline; }
.bita-el-footer-bar-policy .sep       { color: #fff; line-height: 1; }

/* Footer bar: social icons row — individual linked SVG icons (Figma Frame 219, node 1:1075) */
.bita-el-footer-bar-social {
  display:     flex;
  align-items: center;
  gap:         24px;
  flex-shrink: 0;
}
.bita-el-footer-bar-social a {
  display:     flex;
  align-items: center;
  line-height: 1;
  opacity:     1;
  transition:  opacity 0.15s ease;
}
.bita-el-footer-bar-social a:hover { opacity: 0.7; }
.bita-el-footer-bar-social svg      { display: block; width: 24px; height: 24px; }

/* ── Hero section ─────────────────────────────────────────────── */
/*
 * Layout logic (mirrors Figma node 1:17, 1776px tall):
 *   - padding: 250px top + 900px bottom keeps total height ~1776px
 *   - dark/cream split panels (absolute, 876px, bottom-anchored) sit
 *     below the content, which ends at ~y:878 within the div
 *   - heading sits on per-line white strips (box-decoration-break: clone)
 *   - rotated memorabilia image is absolute on the right side
 *   - Elementor section has no built-in padding (all managed here)
 */

/* Strip inner Elementor column padding so hero controls its own spacing */
.bita-hero-section .elementor-widget-wrap,
.bita-hero-section .elementor-column-wrap { padding: 0 !important; }

/* Hero outer container */
.bita-hero {
  position:   relative;
  padding:    250px var(--bita-page-x) 900px;
  overflow:   hidden;
}

/* ── Split background panels (absolute, bottom 876px) ─── */
.bita-hero-panels {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 876px;
  display: flex;
  pointer-events: none;
  z-index: 0;
}
.bita-hero-panel-dark  { flex: 1;        background: #1d1f1f; }
.bita-hero-panel-cream { width: 605px; flex-shrink: 0; background: #eae0c8; }

/* ── Paper texture overlay (top of hero) ─── */
.bita-hero-texture {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 500px;
  pointer-events: none;
  z-index: 1;
}
.bita-hero-texture img {
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.6;
  display: block;
}

/* ── Right-side rotated memorabilia image ─── */
.bita-hero-img {
  position: absolute;
  right: -6%; top: 50%;
  transform: translateY(-50%) rotate(19deg);
  width: 53%;
  pointer-events: none;
  z-index: 2;
}
.bita-hero-img img {
  width: 100%; height: auto; display: block;
  filter:
    drop-shadow(0px 8px 18px rgba(0,0,0,0.39))
    drop-shadow(0px 33px 33px rgba(0,0,0,0.34))
    drop-shadow(0px 75px 45px rgba(0,0,0,0.20));
}

/* ── Content ─── */
.bita-hero-content {
  position: relative;
  z-index: 3;
  max-width: 1144px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Heading: white paper-strip per line via box-decoration-break.
 * !important overrides Elementor's global h1 typography settings.
 * line-height must be >= 1 to prevent descender clipping. */
.bita-hero-heading-wrap { display: block; }
.bita-hero-section h1.bita-hero-heading,
.bita-hero-heading {
  font-family:             var(--bita-f-hero) !important;
  font-weight:             800 !important;
  font-variation-settings: 'wght' 800, 'wdth' 75 !important; /* Condensed Black */
  font-size:               117px !important;
  line-height:             1.1 !important;
  letter-spacing:          -0.03em !important;
  text-transform:          uppercase !important;
  color:          #1d1f1f !important;
  margin:         0 !important;
  /* Each wrapped line gets its own white background strip */
  display:                      inline !important;
  background-color:             #fff !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break:         clone !important;
  padding:                      0 !important;
}

/* Subtext: Merriweather on cream background */
.bita-hero-sub {
  font-family:  var(--bita-f-serif);
  font-weight:  400;
  font-size:    28px;
  line-height:  1.83;
  color:        #1d1f1f;
  margin:       0;
  max-width:    860px;
}

/* CTA row: button + credential badge */
.bita-hero-actions {
  display:     flex;
  align-items: center;
  gap:         32px;
}

/* Pill CTA button */
.bita-hero-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          72px;
  padding:         0 60px;
  background:      #fff;
  border:          3px solid #1d1f1f;
  border-radius:   37.5px;
  font-family:     var(--bita-f-btn);
  font-weight:     700;
  font-size:       24px;
  letter-spacing:  -0.03em;
  color:           #1d1f1f;
  text-transform:  uppercase;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background 0.2s ease, color 0.2s ease;
}
.bita-hero-btn:hover { background: #1d1f1f; color: #fff; }

/* ISA credential badge — same height as CTA button (72px) */
.bita-hero-badge img { height: 72px !important; width: auto !important; display: block; }

/* ── Responsive: nav fallback ────────────────────────────────── */
@media (max-width: 1200px) {
  .bita-site-nav   { padding: 0 40px 17px; }
  .bita-nav-links  { gap: 30px; }
}
@media (max-width: 900px) {
  .bita-page-border {
    margin: 0;
    border-left:  none;
    border-right: none;
  }
  .bita-site-nav {
    grid-template-columns: 1fr;
    padding: 16px 24px;
    gap: 12px;
  }
  .bita-nav-logo-wrap         { display: none; }
  .bita-nav-links--right      { justify-content: flex-start; }
  .bita-nav-links             { gap: 20px; flex-wrap: wrap; }
  .bita-topbar                { flex-direction: column; text-align: center; padding: 12px 20px; }
  .bita-site-banner           { font-size: 14px; gap: 16px; height: auto; padding: 10px; flex-wrap: wrap; }
  .btn-pill                   { height: 56px; padding: 10px 40px; font-size: 18px; }
}
@media (max-width: 600px) {
  .bita-site-banner { font-size: 13px; }
  .sec-body         { font-size: 18px; }
}