/*
Theme Name:  tapcontact (Divi child)
Theme URI:   https://tapcontact.ai
Description: Brand child theme for tapcontact.ai — design tokens, self-hosted Archivo, Divi overrides. Brand source of truth: nfc-cards repo, docs/brand/.
Author:      Martins & Moscoso, Lda.
Template:    Divi
Version:     1.0.0
*/

/* Tokens are enqueued separately (tokens.css) so the app and the site share
   the exact same file. This stylesheet holds only Divi-specific overrides. */

/* ── Self-hosted Archivo variable (NO Google Fonts requests) ─────────────── */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin-wdth-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin-ext-wdth-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Base mapping: tokens → site ─────────────────────────────────────────── */
body,
#main-content,
.et_pb_module {
  font-family: var(--tc-font);
  color: var(--tc-text);
}
body { background: var(--tc-bg); font-size: var(--tc-text-base); line-height: var(--tc-leading-doc); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tc-font);
  color: var(--tc-text);
  letter-spacing: var(--tc-tracking-display);
  line-height: var(--tc-leading-tight);
  font-weight: 700;
  font-stretch: var(--tc-display-stretch); /* 78% — marketing display voice */
}

a { color: var(--tc-text); text-decoration-color: var(--tc-accent); text-decoration-thickness: 2px; }
a:hover { color: var(--tc-text-2); }

/* ── Buttons: citron primary ALWAYS carries graphite ink (a11y rule) ─────── */
.et_pb_button,
.et_pb_contact_submit {
  display: inline-block;
  width: auto;
  background: var(--tc-text) !important;
  color: var(--tc-bg) !important;
  border: none !important;
  border-radius: var(--tc-radius-sm) !important;
  font-weight: 600;
  font-size: 15px !important;
  padding: 14px 28px !important;
  letter-spacing: 0.01em;
  text-transform: none;
}
.et_pb_button:hover { background: var(--tc-accent) !important; color: var(--tc-accent-ink) !important; padding: 14px 28px !important; }
.et_pb_button:after, .et_pb_button:before { display: none !important; }
/* Citron variant — add class tc-btn-citron to the Button module */
.tc-btn-citron .et_pb_button, .et_pb_button.tc-btn-citron {
  background: var(--tc-accent) !important;
  color: var(--tc-accent-ink) !important;
}
.tc-btn-citron .et_pb_button:hover, .et_pb_button.tc-btn-citron:hover {
  background: var(--tc-text) !important; color: var(--tc-bg) !important;
}

/* Secondary button variant — add CSS class "tc-btn-secondary" in Divi */
.tc-btn-secondary .et_pb_button,
.et_pb_button.tc-btn-secondary {
  background: transparent !important;
  color: var(--tc-text) !important;
  box-shadow: inset 0 0 0 2px var(--tc-text) !important;
}

/* ── Dark sections — add CSS class "tc-dark" to a Divi section ───────────── */
.tc-dark { background: #17181A; }
.tc-dark, .tc-dark h1, .tc-dark h2, .tc-dark h3, .tc-dark p { color: var(--tc-dark-text, #EDEDEB); }
.tc-dark .et_pb_text { color: #A6A8AC; }

/* ── Quiet chrome ────────────────────────────────────────────────────────── */
#main-header, #top-header { box-shadow: none; border-bottom: 1px solid var(--tc-border); }
#main-footer { background: #17181A; color: #A6A8AC; }
#main-footer a { color: #EDEDEB; }

/* Focus visible — keyboard users get citron on graphite, graphite on light */
:focus-visible { outline: 2px solid var(--tc-text); outline-offset: 2px; }
.tc-dark :focus-visible { outline-color: var(--tc-accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   Home v2 layout system — classes referenced by the Divi 5 page blocks.
   Rhythm and specialty patterns live here (deterministic, brand-wide);
   text, colors and content stay VB-editable in the modules themselves.
   ═══════════════════════════════════════════════════════════════════════ */

/* Section rhythm */
.tc-section.et_pb_section { padding: 96px 64px !important; }
.tc-section--flush.et_pb_section { padding: 0 !important; }
.tc-section--hero.et_pb_section { padding: 84px 64px 0 !important; }
.tc-section--close.et_pb_section { padding: 110px 64px !important; }
.tc-rule.et_pb_section { border-top: 1px solid var(--tc-text); }
@media (max-width: 980px) {
  .tc-section.et_pb_section { padding: 44px 22px !important; }
  .tc-section--hero.et_pb_section { padding: 44px 22px 0 !important; }
  .tc-section--close.et_pb_section { padding: 56px 22px !important; }
}

/* Display voice — Archivo condensed */
.tc-display, .tc-display h1, .tc-display h2, .tc-display h3 {
  font-family: var(--tc-font);
  font-weight: 750;
  font-stretch: 78%;
  letter-spacing: -0.015em;
  line-height: 0.92;
}
.tc-hero-h1 h1 { font-size: clamp(76px, 12vw, 168px); line-height: 0.9; margin: 0; }
.tc-h2 h2 { font-size: clamp(34px, 5vw, 64px); }
.tc-h3 h2, .tc-h3 h3 { font-size: clamp(30px, 4vw, 52px); }

/* Mono + meta */
.tc-mono, .tc-mono p { font-family: var(--tc-font-mono); }
.tc-eyebrow p {
  font-family: var(--tc-font-mono); font-size: 12px;
  color: #6B6862; margin-bottom: 0;
}
.tc-dark .tc-eyebrow p { color: var(--tc-dark, #A6A8AC); color: #A6A8AC; }

/* Citron dot (inline, after display text) */
.tc-dot {
  display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%;
  background: var(--tc-accent); vertical-align: baseline; margin-left: 0.05em;
}

/* Facts bar */
.tc-facts { display: flex; flex-wrap: wrap; font-family: var(--tc-font-mono); font-size: 13px; }
.tc-facts span { flex: 1 1 0; min-width: 150px; padding: 14px 4px; text-align: center; border-right: 1px solid var(--tc-border); }
.tc-facts span:last-child { border-right: none; }
.tc-facts .tc-accent-cell { background: var(--tc-accent); color: var(--tc-accent-ink); font-weight: 500; }
@media (max-width: 767px) {
  .tc-facts span { flex: 1 1 50%; border-bottom: 1px solid var(--tc-border); }
}

/* Spec sheet (privacy) */
.tc-spec { font-family: var(--tc-font-mono); font-size: 14px; }
.tc-spec .row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid #D6D7D4; }
.tc-spec .row:first-child { border-top: 1px solid var(--tc-text); }
.tc-spec .row:last-child { border-bottom: 1px solid var(--tc-text); }
.tc-spec .k { color: var(--tc-text-2); }
.tc-spec .v { font-weight: 500; }
.tc-spec .v.tc-hit { background: var(--tc-accent); color: var(--tc-accent-ink); padding: 0 8px; }

/* Numbered editorial steps */
.tc-steps .step { display: flex; gap: 28px; padding: 26px 0; border-top: 1px solid var(--tc-border); }
.tc-steps .step:first-child { border-top: 1px solid var(--tc-text); }
.tc-steps .step:last-child { border-bottom: 1px solid var(--tc-text); }
.tc-steps .n { font-family: var(--tc-font-mono); font-size: 13px; color: #6B6862; width: 34px; flex-shrink: 0; padding-top: 6px; }
.tc-steps h3 { font-size: 28px; font-weight: 700; font-stretch: 78%; margin: 0 0 6px; }
.tc-steps p { font-size: 15px; color: var(--tc-text-2); line-height: 1.55; max-width: 420px; margin: 0; }

/* Organizations ledger (dark) */
.tc-ledger { border: 1px solid #33353A; padding: 22px 26px; font-size: 13.5px; color: #EDEDEB; }
.tc-ledger .head { display: flex; justify-content: space-between; padding-bottom: 14px; font-family: var(--tc-font-mono); font-size: 11.5px; color: #A6A8AC; }
.tc-ledger .cols, .tc-ledger .r { display: flex; gap: 14px; align-items: center; }
.tc-ledger .cols { font-family: var(--tc-font-mono); font-size: 11px; color: #A6A8AC; border-bottom: 1px solid #33353A; padding-bottom: 7px; }
.tc-ledger .r { border-bottom: 1px solid #212226; padding: 10px 0; }
.tc-ledger .r:last-child { border-bottom: none; }
.tc-ledger .c1 { flex: 2; font-weight: 600; }
.tc-ledger .c2 { flex: 2; color: #A6A8AC; }
.tc-ledger .c3 { flex: 1; text-align: right; font-family: var(--tc-font-mono); font-size: 12.5px; }
.tc-ledger .c4 { width: 70px; font-size: 11.5px; font-weight: 600; }
.tc-ledger .is-live { color: var(--tc-accent); }
.tc-ledger .is-exp { color: #D9A63C; }
.tc-ledger .is-rev { color: #A6A8AC; }
.tc-ledger .r.revoked { color: #6E7076; }
.tc-ledger .r.revoked .c1 { text-decoration: line-through; }
.tc-ledger .r.revoked .c2 { color: #6E7076; }

/* Feature list a/b/c (dark) */
.tc-abc .item { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid #33353A; }
.tc-abc .item:last-child { border-bottom: 1px solid #33353A; }
.tc-abc .l { font-family: var(--tc-font-mono); font-size: 12px; color: var(--tc-accent); padding-top: 3px; }
.tc-abc h3 { font-size: 17px; font-weight: 600; color: #EDEDEB; margin: 0 0 3px; font-stretch: 100%; }
.tc-abc p { font-size: 13.5px; color: #A6A8AC; line-height: 1.5; margin: 0; }

/* Pricing — hairline columns, no boxes */
.tc-price-col { border-top: 1px solid var(--tc-text); padding: 26px 28px 26px 0; }
.tc-price-col.featured { border-top: 4px solid var(--tc-accent); background: var(--tc-surface); padding: 24px 28px; margin-top: -1px; }
.tc-price-col .tier { font-family: var(--tc-font-mono); font-size: 12px; color: #6B6862; }
.tc-price-col.featured .tier { color: var(--tc-text-2); }
.tc-price-col .tier b { color: var(--tc-text); font-weight: 500; }
.tc-price-col h3 { font-size: 34px; font-weight: 750; font-stretch: 78%; margin: 10px 0 8px; }
.tc-price-col p { font-size: 14px; color: var(--tc-text-2); line-height: 1.55; }

/* FAQ — native details/summary, CSS only */
.tc-faq details { border-top: 1px solid var(--tc-border); }
.tc-faq details:first-child { border-top: 1px solid var(--tc-text); }
.tc-faq details:last-child { border-bottom: 1px solid var(--tc-text); }
.tc-faq summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.tc-faq summary::-webkit-details-marker { display: none; }
.tc-faq summary::after { content: '+'; font-family: var(--tc-font-mono); font-size: 16px; color: #6B6862; }
.tc-faq details[open] summary::after { content: '−'; }
.tc-faq .a { padding: 0 0 18px; font-size: 15px; color: var(--tc-text-2); line-height: 1.55; max-width: 560px; }

/* Closing */
.tc-close-h h2 { font-size: clamp(52px, 8vw, 110px); line-height: 0.94; }
.tc-underline { border-bottom: 0.055em solid var(--tc-accent); }

/* Secondary link-button */
.tc-linkbtn a, a.tc-linkbtn {
  font-size: 15px; font-weight: 600; color: var(--tc-text);
  text-decoration: none; border-bottom: 2px solid var(--tc-accent); padding-bottom: 2px;
}

/* Dark section helpers (extends tc-dark from base) */
.tc-dark .tc-display h2 { color: #EDEDEB; }
.tc-dark p { color: #A6A8AC; }

/* Editorial 2-col: label column sticky-ish width handled by Divi columns */
.tc-label-col .tc-eyebrow p { margin-bottom: 12px; }

/* ── Round 2 fixes + Theme Builder header/footer ───────────────────────── */
.tc-facts-wrap.et_pb_section { border-bottom: 1px solid var(--tc-text); }
.tc-section .et_pb_row, .tc-section--hero .et_pb_row, .tc-section--close .et_pb_row { max-width: 1280px; width: 100%; }

/* Header (Theme Builder) */
.tc-header.et_pb_section { padding: 18px 64px !important; border-bottom: 1px solid var(--tc-text); background: var(--tc-bg); }
.tc-header .et_pb_row { max-width: 100%; width: 100%; display: flex; align-items: center; }
.tc-header .et_pb_column { display: flex !important; flex-direction: row !important; align-items: center !important; }
.tc-header .tc-col-logo { flex: 1 1 0 !important; justify-content: flex-start !important; }
.tc-header .tc-col-nav { flex: 0 0 auto !important; justify-content: flex-end !important; gap: 30px; }
.tc-header .tc-logo svg { display: block; height: 26px; width: auto; }
.tc-nav p { margin: 0; display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 500; }
.tc-nav a { color: var(--tc-text); text-decoration: none; border-bottom: none; }
.tc-nav a:hover { color: var(--tc-text-2); }
.tc-nav .tc-lang { font-family: var(--tc-font-mono); font-size: 12px; color: #6B6862; }
.tc-nav .tc-lang b { color: var(--tc-accent); font-weight: 400; }
.tc-header .et_pb_button { padding: 10px 20px !important; font-size: 13.5px !important; }
.tc-header .et_pb_button:hover { padding: 10px 20px !important; }
@media (max-width: 980px) {
  .tc-header.et_pb_section { padding: 12px 22px !important; }
  .tc-header .et_pb_column { flex-wrap: wrap; }
  .tc-nav p { gap: 14px; font-size: 13px; flex-wrap: wrap; }
}

/* Footer (Theme Builder) */
.tc-footer.et_pb_section { padding: 44px 64px 0 !important; border-top: 1px solid var(--tc-text); background: var(--tc-bg); }
.tc-footer .et_pb_row { max-width: 1280px; width: 100%; }
.tc-footer-brand .tc-logo svg { height: 22px; width: auto; }
.tc-footer-brand p { margin: 8px 0 0; font-family: var(--tc-font-mono); font-size: 12px; color: #6B6862; }
.tc-footer-links { display: flex; gap: 72px; font-size: 13.5px; flex-wrap: wrap; }
.tc-footer-links .g { display: flex; flex-direction: column; gap: 8px; }
.tc-footer-links .h { font-family: var(--tc-font-mono); font-size: 11.5px; color: #6B6862; }
.tc-footer-links a { color: var(--tc-text); text-decoration: none; }
.tc-footer-links a:hover { color: var(--tc-text-2); }
.tc-footer-bottom { border-top: 1px solid var(--tc-border); padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: #6B6862; flex-wrap: wrap; }
.tc-footer-bottom p { margin: 0; }
.tc-wordmark-strip { height: 96px; overflow: hidden; display: flex; justify-content: center; }
.tc-wordmark-strip span { font-family: var(--tc-font); font-weight: 750; font-stretch: 108%; font-size: 220px; letter-spacing: -0.03em; line-height: 0.8; color: var(--tc-surface-2); white-space: nowrap; }
.tc-wordmark-strip .d { color: var(--tc-accent); opacity: 0.35; }
@media (max-width: 980px) {
  .tc-footer.et_pb_section { padding: 32px 22px 0 !important; }
  .tc-footer-links { gap: 32px; }
  .tc-wordmark-strip { height: 40px; }
  .tc-wordmark-strip span { font-size: 88px; }
}

/* Hide WP default header/footer leftovers if any render before TB kicks in */
#main-header, #main-footer { display: none; }

/* ── Mobile stacking (≤980px): editorial columns collapse, header reorders ── */
@media (max-width: 980px) {
  .tc-section .et_pb_row, .tc-section--hero .et_pb_row { flex-wrap: wrap; }
  .tc-section .et_pb_column, .tc-section--hero .et_pb_column {
    flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important;
  }
  .tc-label-col { margin-bottom: 8px; }
  .tc-hero-phone-col { justify-content: center; margin-top: 24px; }
  .tc-header .et_pb_row { flex-wrap: wrap; row-gap: 10px; }
  .tc-header .tc-col-logo { order: 1; flex: 1 1 auto !important; }
  .tc-header .tc-col-nav { order: 2; flex: 0 0 auto !important; flex-wrap: wrap; gap: 12px; justify-content: flex-end !important; }
  .tc-footer .et_pb_row { flex-wrap: wrap; }
  .tc-footer .et_pb_column { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; margin-bottom: 20px; }
}

/* ── Full-width (Pedro, 14 ago): rows fill the section; the 64px section
     padding IS the gutter. Content breathes on wide screens via the grid,
     not via a boxed max-width. ─────────────────────────────────────────── */
.tc-section .et_pb_row,
.tc-section--hero .et_pb_row,
.tc-section--close .et_pb_row,
.tc-footer .et_pb_row {
  max-width: 100% !important;
  width: 100% !important;
}

/* Hero mockup: bigger, optically centered, real shadow */
.tc-hero-phone-col { justify-content: center !important; align-items: center !important; }
.tc-hero-phone svg { width: min(360px, 80%); height: auto; filter: drop-shadow(0 32px 60px rgba(23,24,26,.25)); }

/* ── Motion (subtle, CSS-only, zero JS) ──────────────────────────────────
     Honors prefers-reduced-motion. Scroll-driven reveals only where the
     browser supports animation-timeline; everything degrades to static. */
a, .et_pb_button, .tc-linkbtn { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.et_pb_button { transition: background-color .18s ease, transform .12s ease; }
.et_pb_button:active { transform: translateY(1px); }
.tc-price-col { transition: background-color .25s ease; }
.tc-price-col:hover { background: var(--tc-surface); }
.tc-price-col.featured:hover { background: #EFEFED; }
.tc-faq summary { transition: color .15s ease; }
.tc-faq summary:hover { color: var(--tc-text-2); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tc-section > .et_pb_row,
    .tc-section--close > .et_pb_row {
      animation: tc-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
  @keyframes tc-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }
  .tc-dot { animation: tc-dot-in .5s ease .2s backwards; }
  @keyframes tc-dot-in { from { transform: scale(0); } to { transform: scale(1); } }
}