/*
Theme Name:   PT Expat (Divi Child)
Theme URI:    https://ptexpat.com
Description:  Divi child theme for the ptexpat.com Squarespace-to-WordPress migration. Self-hosts the site's original typefaces (Epilogue + Anton) and carries the base typographic system forward. Built to sit on top of the Divi 5 parent theme.
Author:       PT Expat
Template:     Divi
Version:      1.4.0
Text Domain:  ptexpat-divi-child
*/

/* ==========================================================================
   Self-hosted fonts — confirmed from the live Squarespace site (Phase 1 audit):
   Epilogue for body/UI text, Anton for display/headline treatment.
   Self-hosted here (rather than linked from Google Fonts) so the browser
   never makes an external request for them — one less render-blocking
   third-party connection, which is part of the Phase 2 performance plan.
   Only the "latin" subset is included: no Vietnamese-diacritic characters
   appear in the site's actual copy (place names are used in their
   anglicized form — "Da Nang", not "Đà Nẵng"). Add the "vietnamese" subset
   later if that ever changes.
   ========================================================================== */

@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/epilogue-variable-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/epilogue-variable-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Epilogue';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/epilogue-variable-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Epilogue';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/epilogue-variable-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/anton-400-normal.woff2') format('woff2');
}

/* ==========================================================================
   Base typography
   Matches the live site: Epilogue for body copy and UI chrome, Anton for
   the condensed, all-caps display treatment used on hero headlines and
   emphasis text (e.g. "START YOUR EASY MODE LIFE IN DA NANG!").
   ========================================================================== */

body, .et_pb_module {
  font-family: 'Epilogue', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.et_pb_button {
  font-family: 'Anton', 'Epilogue', sans-serif;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Color tokens — confirmed real values, extracted from the live site's own
   compiled stylesheet (site.css), not guessed. Squarespace computes these
   at runtime from HSL custom properties that never appear in the page's
   HTML source (that's why Phase 1 couldn't find them there) — they only
   show up in the separately-hosted, versioned site.css file.
   These are provided here for reference/CSS overrides. The primary way
   to use them in Divi Builder itself is via Divi's own Global Colors
   feature — see the Phase 5 report for exact setup steps.
   ========================================================================== */

:root {
  --pt-white: #FAFAF9;        /* hsl(60, 9.09%, 97.84%) — page background */
  --pt-black: #0D0D0D;        /* hsl(0, 0%, 5.1%) — dark section background / body text */
  --pt-accent: #FF6123;       /* hsl(16.91, 100%, 56.86%) — the site's actual accent: a vivid orange, not the muted earthy tone auto-detected from photos */
  --pt-light-accent: #FACF9F; /* hsl(31.65, 90.1%, 80.2%) — soft peach, used for lighter accent moments */
  --pt-dark-accent: #191A1A;  /* hsl(180, 1.96%, 10%) — near-black neutral, negligible hue */
}

/* ==========================================================================
   Header CTA — the persistent "Book your discovery call" item appended to
   the primary menu by functions.php. Styled as a solid button so it reads
   as the header's main call to action, matching the live site.
   ========================================================================== */

.ptexpat-header-cta > a {
  background-color: var(--pt-accent);
  color: var(--pt-white) !important;
  padding: 0.6em 1.3em;
  border-radius: 3px;
}

/* ==========================================================================
   Global footer — output via the wp_footer hook in functions.php rather
   than Divi Theme Builder. Deliberately sparse: just the tagline and an
   email link, matching the live site's minimal footer exactly (no columns,
   no social icons, no copyright line).
   ========================================================================== */

.ptexpat-footer {
  background-color: var(--pt-black);
  padding: 2.5em 5vw;
}

.ptexpat-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.ptexpat-footer-tagline {
  color: var(--pt-white);
  font-family: 'Anton', 'Epilogue', sans-serif;
  text-transform: lowercase;
}

.ptexpat-footer-email {
  color: var(--pt-accent) !important;
  text-decoration: none;
}
.ptexpat-footer-email:hover {
  text-decoration: underline;
}