/*
Theme Name:  BackTaxesUSA
Theme URI:
Author:
Description: One-page theme for BackTaxesUSA — back tax filing service. Phone numbers, YouTube video ID, and contact form shortcode are all editable under Appearance → Customize → BackTaxesUSA Settings.
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: btusa
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --paper:      #FBFAF7;
  --paper-2:    #F2F0E9;
  --sage:       #E6EDE6;
  --pine:       #4eaa59;
  --pine-deep:  #0E2C27;
  --ink:        #1B211E;
  --slate:      #4C564F;
  --amber:      #D9882B;
  --amber-deep: #B96F1C;
  --line:       #D9D6CC;
  --radius:     14px;
  --pad:        clamp(28px, 8vw, 160px);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: 'Manrope', system-ui, sans-serif;
  background:  var(--paper);
  color:       var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family:     'Montserrat', sans-serif;
  line-height:     1.05;
  letter-spacing:  -0.02em;
  font-weight:     700;
}
.mono { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.wrap { padding: 0 var(--pad); }
a     { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline:        3px solid var(--amber);
  outline-offset: 3px;
  border-radius:  6px;
}

/* ============================================================
   HEADER
   ============================================================ */
header.site {
  position:       sticky;
  top:            0;
  z-index:        50;
  background:     rgba(251,250,247,.9);
  backdrop-filter: blur(8px);
  border-bottom:  1px solid var(--line);
}
.bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          74px;
  gap:             20px;
}
/* Text logo (fallback when no image uploaded) */
.logo {
  display:         flex;
  align-items:     center;
  gap:             2px;
  font-family:     'Montserrat';
  font-weight:     800;
  font-size:       1.42rem;
  letter-spacing:  -0.03em;
  color:           #163F38;
  text-decoration: none;
}
.logo span { color: var(--amber); }

/* Image logo (uploaded via Customize → Site Identity) */
.logo--img { display: flex; align-items: center; }
.logo--img .custom-logo-link { display: flex; align-items: center; text-decoration: none; }
.logo--img .custom-logo      { max-height: 30px; width: auto; display: block; }

.nav-actions { display: flex; align-items: center; gap: 16px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             9px;
  font-weight:     600;
  text-decoration: none;
  border-radius:   999px;
  padding:         13px 24px;
  font-size:       .97rem;
  border:          1.5px solid transparent;
  cursor:          pointer;
  transition:      transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-amber       { background: var(--amber);     color: #fff; box-shadow: 0 6px 18px -8px rgba(185,111,28,.7); }
.btn-amber:hover { background: var(--amber-deep); }
.btn-pine        { background: var(--pine);      color: #fff; }
.btn-pine:hover  { background: var(--pine-deep); }
.btn-ghost       { background: transparent; color: #10221E; border-color: #10221E; }
.btn-ghost:hover { background: #10221E; color: #fff; }

/* Phone button in header */
.btn-phone        { background: transparent; color: #10221E; border-color: #10221E; font-family: 'IBM Plex Mono', monospace; letter-spacing: .02em; }
.btn-phone:hover  { background: #10221E; color: #fff; }
.btn-phone svg    { flex: none; }

.header-cta { display: inline-flex; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; padding: clamp(64px,8vw,110px) 0 clamp(64px,8vw,100px); }
.hero-grid {
  display:               grid;
  grid-template-columns: 1.15fr .85fr;
  gap:                   54px;
  align-items:           start;
}
.eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            9px;
  font-size:      .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight:    600;
  color:          var(--pine);
  background:     var(--sage);
  padding:        7px 14px;
  border-radius:  999px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

h1.hero-h { font-size: clamp(2.6rem,4.2vw,5.2rem); margin: 22px 0 0; color: #10221E; }
h1.hero-h em { font-style: normal; color: var(--amber); font-weight: 800; }

.hero-sub { font-size: clamp(1.05rem,1.4vw,1.35rem); color: var(--slate); max-width: 44ch; margin: 22px 0 30px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.video-link {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  font-weight:     600;
  color:           #10221E;
  text-decoration: none;
}
.video-link .play {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  background:    #fff;
  border:        1.5px solid var(--line);
  display:       grid;
  place-items:   center;
  transition:    transform .15s ease;
}
.video-link:hover .play { transform: scale(1.08); border-color: var(--amber); }

/* Promise card (hero right column — contains consultation form) */
.promise {
  background:    var(--pine);
  color:         #fff;
  border-radius: var(--radius);
/*   padding:       40px 32px 32px; */
  position:      relative;
  box-shadow:    0 24px 50px -28px rgba(14,44,39,.8);
}
.promise .stamp {
  position:       absolute;
  top:            -16px;
  right:          24px;
  background:     var(--amber);
  color:          #fff;
  font-family:    'Montserrat';
  font-weight:    800;
  font-size:      .78rem;
  letter-spacing: .04em;
  padding:        9px 16px;
  border-radius:  999px;
  transform:      rotate(3deg);
}
.promise h3      { font-size: 1.35rem; line-height: 1.2; margin-bottom: 6px; }
.promise-sub     { color: rgba(255,255,255,.8); font-size: .95rem; margin-bottom: 20px; }
.promise-form    { margin-top: 16px; }

/* HubSpot form fields inside the green promise box */
.promise .hs-form-frame,
.form .hs-form-frame { display: block; width: 100%; }

/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-section { background: var(--paper-2); padding: clamp(64px,8vw,110px) 0 clamp(72px,8vw,120px); }
.video-section-head { text-align: center; margin-bottom: 40px; }
.video-section-head .sec-title { margin: 10px auto 0; max-width: 50ch; }
.video-wrap {
  width:         80%;
  margin:        0 auto;
  aspect-ratio:  16/9;
  border-radius: 16px;
  overflow:      hidden;
  box-shadow:    0 28px 70px -24px rgba(0,0,0,.22);
}
.video-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.video-placeholder {
  width:           100%;
  height:          100%;
  background:      var(--pine-deep);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             20px;
  color:           #9fc0b5;
  text-align:      center;
  padding:         40px;
  aspect-ratio:    16/9;
}
.video-placeholder p { font-size: .95rem; line-height: 1.6; }
.video-placeholder strong { color: #cfe0d9; }

/* ============================================================
   VALUE PROMISE SECTION  (below video)
   ============================================================ */
.value-promise { background: var(--paper); }
.value-promise-inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         60px;
  align-items: center;
}
.value-promise-text .sec-title { margin-top: 10px; }
.value-features {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        20px;
}
.value-features li {
  display:     flex;
  gap:         14px;
  align-items: flex-start;
  font-size:   1.05rem;
  font-weight: 500;
  color:       var(--ink);
}
.value-features li svg { flex: none; margin-top: 2px; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust { background: var(--pine-deep); color: #dfeae5; }
.trust .wrap {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             14px 40px;
  padding:         20px var(--pad);
}
.trust span { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 500; }
.trust span b { font-family: 'Montserrat'; color: #fff; }
.trust .sep { color: var(--amber); }

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section.block { padding: clamp(72px,8vw,120px) 0; }
.sec-head      { max-width: 60ch; }
.sec-tag       { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--amber-deep); }
.sec-title     { font-size: clamp(2rem,3vw,3.6rem); margin: 12px 0 0; color: var(--pine-deep); }
.sec-intro     { color: var(--slate); font-size: clamp(1.05rem,1.3vw,1.25rem); margin-top: 16px; max-width: 58ch; }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.cards {
  display:               grid;
  grid-template-columns: repeat(2,1fr);
  gap:                   22px;
  margin-top:            46px;
}
.card {
  background:    #fff;
  border:        1px solid var(--line);
  border-radius: var(--radius);
  padding:       30px 28px;
  transition:    transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(22,63,56,.55); }
.card .num  { font-family: 'IBM Plex Mono'; font-size: .85rem; color: var(--amber-deep); font-weight: 600; }
.card h3    { font-size: 1.32rem; margin: 10px 0 10px; color: #10221E; }
.card p     { color: var(--slate); font-size: 1rem; }

/* ============================================================
   LEDGER (DO / DON'T)
   ============================================================ */
.ledger       { background: var(--sage); }
.ledger-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.col          { background: #fff; border-radius: var(--radius); padding: 30px 28px; border: 1px solid var(--line); }
.col.no       { background: var(--paper-2); }
.col h3       { display: flex; align-items: center; gap: 11px; font-size: 1.18rem; margin-bottom: 20px; color: var(--pine-deep); }
.col ul       { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.col li       { display: flex; gap: 13px; font-size: 1rem; color: var(--slate); }
.col li b     { color: var(--ink); font-weight: 600; }
.icon-ok      { flex: none; margin-top: 2px; color: var(--pine); }
.icon-no      { flex: none; margin-top: 2px; color: #b06a4f; }

/* ============================================================
   STEPS
   ============================================================ */
.steps {
  counter-reset:         step;
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   22px;
  margin-top:            46px;
}
.step    { position: relative; padding-top: 14px; }
.step .n {
  font-family:   'IBM Plex Mono';
  font-weight:   600;
  font-size:     .95rem;
  color:         #fff;
  background:    var(--amber);
  width:         34px;
  height:        34px;
  border-radius: 50%;
  display:       grid;
  place-items:   center;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.12rem; color: #10221E; margin-bottom: 8px; }
.step p  { color: var(--slate); font-size: .97rem; }

/* ============================================================
   REASSURANCE BAND
   ============================================================ */
.reassure          { background: var(--pine); color: #eaf2ee; }
.reassure .wrap    { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: clamp(64px,8vw,110px) var(--pad); }
.reassure h2       { font-size: clamp(2rem,3vw,3.4rem); color: #fff; }
.reassure p        { color: #cfe0d9; font-size: 1.08rem; margin-top: 18px; }
.reassure p + p    { margin-top: 14px; }

/* ============================================================
   FAQ
   ============================================================ */
details.faq         { border-bottom: 1px solid var(--line); padding: 22px 0; }
details.faq summary {
  font-family:     'Montserrat';
  font-weight:     600;
  font-size:       1.12rem;
  color:           var(--pine-deep);
  cursor:          pointer;
  list-style:      none;
  display:         flex;
  justify-content: space-between;
  gap:             20px;
  align-items:     center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .plus {
  flex:          none;
  width:         26px;
  height:        26px;
  border-radius: 50%;
  border:        1.5px solid var(--line);
  display:       grid;
  place-items:   center;
  font-size:     1.1rem;
  color:         var(--amber-deep);
  transition:    transform .2s ease;
}
details.faq[open] summary .plus { transform: rotate(45deg); }
details.faq p { color: var(--slate); margin-top: 14px; max-width: 70ch; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final      { padding: clamp(72px,8vw,120px) 0; }
.final-card {
  background:            var(--pine-deep);
  color:                 #fff;
  border-radius:         22px;
  padding:               56px 48px;
  display:               grid;
  grid-template-columns: 1.1fr .9fr;
  gap:                   48px;
  align-items:           center;
  overflow:              hidden;
  position:              relative;
}
.final-card h2 { font-size: clamp(2rem,3vw,3.6rem); }
.final-card p  { color: #cfe0d9; margin-top: 16px; font-size: 1.08rem; }
.final-phones  { margin-top: 26px; display: flex; flex-direction: column; gap: 6px; }
.final-phones a     { color: #fff; text-decoration: none; font-family: 'IBM Plex Mono'; font-weight: 600; font-size: 1.3rem; }
.final-phones small { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #9fc0b5; font-family: 'Manrope'; }

/* Contact form container */
.form { background: var(--pine); border-radius: var(--radius); padding: 28px; }
.form label {
  display:        block;
  font-size:      .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight:    600;
  color:          rgba(255,255,255,.75);
  margin:         0 0 6px;
}
.form .field { margin-bottom: 16px; }
.form input,
.form select {
  width:         100%;
  padding:       13px 14px;
  border:        1.5px solid rgba(255,255,255,.25);
  border-radius: 10px;
  font:          inherit;
  color:         var(--ink);
  background:    #fff;
}
.form input:focus,
.form select:focus { outline: none; border-color: var(--amber); }
.form .btn    { width: 100%; justify-content: center; margin-top: 4px; }
.form .tiny   { font-size: .8rem; color: rgba(255,255,255,.65); margin-top: 12px; text-align: center; }

/* CF7 / HubSpot form compatibility */
.form .wpcf7-form input[type="text"],
.form .wpcf7-form input[type="email"],
.form .wpcf7-form input[type="tel"],
.form .wpcf7-form textarea,
.form .wpcf7-form select,
.form .hbspt-form input[type="text"],
.form .hbspt-form input[type="email"],
.form .hbspt-form input[type="tel"],
.form .hbspt-form textarea,
.form .hbspt-form select {
  width:         100%;
  padding:       13px 14px;
  border:        1.5px solid rgba(255,255,255,.25);
  border-radius: 10px;
  font:          inherit;
  color:         var(--ink);
  background:    #fff;
  margin-bottom: 16px;
}
.form .wpcf7-form label,
.form .hbspt-form label {
  display:        block;
  font-size:      .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight:    600;
  color:          rgba(255,255,255,.75);
  margin-bottom:  6px;
}
.form .wpcf7-submit,
.form .hbspt-form input[type="submit"],
.form .hbspt-form button[type="submit"] {
  width:           100%;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-weight:     600;
  text-decoration: none;
  border-radius:   999px;
  padding:         13px 24px;
  font-size:       .97rem;
  border:          none;
  cursor:          pointer;
  background:      var(--amber);
  color:           #fff;
  box-shadow:      0 6px 18px -8px rgba(185,111,28,.7);
  transition:      transform .15s ease, background .15s ease;
  margin-top:      4px;
}
.form .wpcf7-submit:hover,
.form .hbspt-form input[type="submit"]:hover,
.form .hbspt-form button[type="submit"]:hover {
  background:  var(--amber-deep);
  transform:   translateY(-2px);
}

/* ============================================================
   VIDEO MODAL
   ============================================================ */
.modal-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.75);
  z-index:         200;
  align-items:     center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  position:      relative;
  width:         min(860px,92vw);
  aspect-ratio:  16/9;
  border-radius: 12px;
  overflow:      hidden;
  box-shadow:    0 32px 80px rgba(0,0,0,.5);
}
.modal-close {
  position:    absolute;
  top:         -40px;
  right:       0;
  background:  none;
  border:      none;
  color:       #fff;
  font-size:   1.8rem;
  cursor:      pointer;
  line-height: 1;
  padding:     4px 8px;
}
.modal-box iframe { width: 100%; height: 100%; border: none; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site {
  background: #10221E;
  color:      #9fb3ab;
  padding:    54px 0 36px;
  font-size:  .92rem;
}
footer.site .top {
  display:         flex;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             30px;
  padding-bottom:  28px;
  border-bottom:   1px solid rgba(255,255,255,.1);
}
footer.site .logo       { color: #fff; }
footer.site .logo span  { color: var(--amber); }
footer.site nav         { display: flex; gap: 26px; flex-wrap: wrap; }
footer.site nav a       { text-decoration: none; color: #cfe0d9; }
footer.site nav a:hover { color: #fff; }
.disclaimer {
  margin-top:  24px;
  font-size:   .8rem;
  line-height: 1.6;
  color:       #7e948c;
  max-width:   90ch;
}
.footer-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
  margin-top:      28px;
  padding-top:     20px;
  border-top:      1px solid rgba(255,255,255,.08);
}
.footer-copy { font-size: .8rem; color: #7e948c; }
.footer-legal-nav ul {
  list-style: none;
  display:    flex;
  gap:        24px;
  flex-wrap:  wrap;
}
.footer-legal-nav li { margin: 0; }
.footer-legal-nav a {
  font-size:       .8rem;
  color:           #9fb3ab;
  text-decoration: none;
}
.footer-legal-nav a:hover { color: #fff; }

/* ============================================================
   INNER PAGES  (page.php — Privacy Policy, About, etc.)
   ============================================================ */
.inner-page-header {
  background: var(--pine-deep);
  color:      #fff;
  padding:    52px 0 48px;
}
.inner-page-title {
  font-size:      clamp(1.9rem, 4vw, 2.8rem);
  color:          #fff;
  letter-spacing: -0.02em;
}
.inner-page-body {
  padding: 60px 24px 84px;
}
.inner-page-content {
  max-width: 74ch;
}
.inner-page-content p {
  margin-bottom:  1.3em;
  color:          var(--slate);
  line-height:    1.75;
}
.inner-page-content h2 {
  font-size:   clamp(1.3rem, 2.4vw, 1.75rem);
  color:       var(--pine-deep);
  margin:      2em 0 0.5em;
}
.inner-page-content h3 {
  font-size:   1.15rem;
  color:       var(--pine-deep);
  margin:      1.6em 0 0.4em;
}
.inner-page-content ul,
.inner-page-content ol {
  margin:      0 0 1.3em 1.5em;
  color:       var(--slate);
  line-height: 1.75;
}
.inner-page-content li       { margin-bottom: 0.45em; }
.inner-page-content a        { color: var(--pine); text-decoration: underline; }
.inner-page-content a:hover  { color: var(--pine-deep); }
.inner-page-content strong,
.inner-page-content b        { color: var(--ink); font-weight: 700; }
.inner-page-content hr       { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.inner-page-content blockquote {
  border-left: 3px solid var(--pine);
  margin:      1.5em 0;
  padding:     0.5em 1.2em;
  color:       var(--slate);
  font-style:  italic;
}

.inner-page-back {
  margin-top: 48px;
  font-size:  .95rem;
}
.inner-page-back a {
  color:           var(--pine);
  text-decoration: none;
  font-weight:     600;
}
.inner-page-back a:hover { text-decoration: underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid,
  .ledger-grid,
  .reassure .wrap,
  .final-card,
  .value-promise-inner { grid-template-columns: 1fr; }
  .cards, .steps { grid-template-columns: 1fr 1fr; }
  .header-cta { display: none; }
  .promise { order: -1; }
  .video-wrap { width: 95%; }
  .btn-phone { font-size: .84rem; padding: 10px 16px; }
}
@media (max-width: 560px) {
  .cards, .steps { grid-template-columns: 1fr; }
  .bar  { height: 64px; }
  .hero { padding: 54px 0 50px; }
  section.block { padding: 58px 0; }
  .video-wrap { width: 100%; border-radius: 10px; }
  .video-section { padding: 50px 0 60px; }
  .btn-phone { display: none; }
}
@media (min-width: 1440px) {
  .card h3       { font-size: 1.5rem; }
  .card p,
  .col li,
  .step p,
  .reassure p    { font-size: 1.12rem; }
  .step h3       { font-size: 1.25rem; }
  .value-features li { font-size: 1.15rem; }
  .final-phones a     { font-size: 1.55rem; }
  details.faq summary { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}