/* ============================================================
   TDW — GLOBAL.CSS (tdw-site-core)
   ------------------------------------------------------------
   Scope: global design tokens + base styling + TT5 layout lock
          + theme toggle component
   NOTE: Map-related CSS was removed (migrating to tdw-atlas-engine).
   ============================================================ */


/* ============================================================
   1) LOCAL FONTS (WOFF2)
   ============================================================ */

@font-face {
  font-family: "Urbanist";
  src: url("/wp-content/uploads/fonts/urbanist-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/wp-content/uploads/fonts/urbanist-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/wp-content/uploads/fonts/urbanist-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/wp-content/uploads/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/wp-content/uploads/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   2) DESIGN TOKENS
   ============================================================ */

:root {
  /* Colors (light default) */
  --tdw-bg: #E9E6E2;
  --tdw-text: #1D1A16;
  --tdw-muted: #5F5B56;

  --tdw-water: #3C9FAE;
  --tdw-water-hover: #2F8A97;
  --tdw-desert: #ECBA82;

  --tdw-card: #FFFFFF;
  --tdw-border: #D6D3CF;

  /* Typography */
  --tdw-font-body: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tdw-font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --tdw-font-size-base: 1.125rem; /* 18px */
  --tdw-line-height: 1.7;

  /* Buttons */
  --tdw-btn-text-on-water: #1D1A16;

  /* TT5 Layout lock (matches WP Styles > Layout) */
  --tdw-content-width: 960px;
  --tdw-wide-width: 1440px;
  --tdw-layout-pad-x: 1.5rem; /* 24px */
  --tdw-layout-pad-y: 2rem;   /* 32px */
  --tdw-block-gap: 1.25rem;   /* ~20px */

  /* Theme toggle (component tokens) */
  --tdw-toggle-size: 2.5rem;
  --tdw-toggle-icon-size: 1.2rem;
  --tdw-toggle-opacity: 0.88;

  --tdw-toggle-x-light: -1px;
  --tdw-toggle-y-light: -2.5px;
  --tdw-toggle-x-dark: 1px;
  --tdw-toggle-y-dark: 2.5px;

  --tdw-toggle-border-light: rgba(0, 0, 0, 0.15);
  --tdw-toggle-border-dark: rgba(255, 255, 255, 0.18);
}


/* ============================================================
   3) MODE SWITCHING (TOKENS ONLY)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --tdw-bg: #121F21;
    --tdw-text: #DEEBED;
    --tdw-muted: #A9B7BA;

    --tdw-card: #1A2A2D;
    --tdw-border: #233336;

    --tdw-btn-text-on-water: #121F21;
  }
}

html[data-theme="light"] {
  --tdw-bg: #E9E6E2;
  --tdw-text: #1D1A16;
  --tdw-muted: #5F5B56;

  --tdw-card: #FFFFFF;
  --tdw-border: #D6D3CF;

  --tdw-btn-text-on-water: #1D1A16;
}

html[data-theme="dark"] {
  --tdw-bg: #121F21;
  --tdw-text: #DEEBED;
  --tdw-muted: #A9B7BA;

  --tdw-card: #1A2A2D;
  --tdw-border: #233336;

  --tdw-btn-text-on-water: #121F21;
}


/* ============================================================
   4) BASE STYLES
   ============================================================ */

html,
body {
  background: var(--tdw-bg);
  color: var(--tdw-text);
}

body {
  font-family: var(--tdw-font-body);
  font-size: var(--tdw-font-size-base);
  line-height: var(--tdw-line-height);
}

p,
li { color: var(--tdw-text); }

small { color: var(--tdw-muted); }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--tdw-font-heading);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h1 { font-size: 2.625rem; }  /* 42px */
h2 { font-size: 2.0625rem; } /* 33px */
h3 { font-size: 1.625rem; }  /* 26px */
h4 { font-size: 1.25rem; }   /* 20px */


/* ============================================================
   5) LINKS
   ============================================================ */

a {
  color: var(--tdw-water);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--tdw-water-hover);
  text-decoration: underline;
}


/* ============================================================
   6) WP BLOCK BUTTON
   ============================================================ */

.wp-block-button__link {
  font-family: var(--tdw-font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;

  background: var(--tdw-water);
  color: var(--tdw-btn-text-on-water);

  border-radius: 0;
  filter: none;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  background: var(--tdw-water-hover);
  color: var(--tdw-btn-text-on-water);
  filter: none;
}


/* ============================================================
   7) SITE STRUCTURE HELPERS
   ============================================================ */

.wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wp-site-blocks > footer {
  margin-top: auto;
}


/* ============================================================
   8) TT5 LAYOUT LOCK (GLOBAL)
   ============================================================ */

:root {
  --wp--style--global--content-size: var(--tdw-content-width);
  --wp--style--global--wide-size: var(--tdw-wide-width);
  --wp--style--block-gap: var(--tdw-block-gap);
}

.wp-site-blocks > main {
  padding: var(--tdw-layout-pad-y) var(--tdw-layout-pad-x);
}


/* ============================================================
   9) THEME TOGGLE (SHORTCODE COMPONENT)
   ============================================================ */

.tdw-theme-toggle-wrap { margin: 0; }

a.tdw-theme-toggle.wp-block-button__link,
.tdw-theme-toggle.wp-element-button {
  appearance: none;
  -webkit-appearance: none;

  text-decoration: none !important;
  box-shadow: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;

  width: var(--tdw-toggle-size) !important;
  height: var(--tdw-toggle-size) !important;
  padding: 0 !important;
  border-radius: 999px !important;

  background: var(--tdw-text) !important;
  color: var(--tdw-bg) !important;

  border: 1px solid var(--tdw-toggle-border-light) !important;

  cursor: pointer;
  opacity: var(--tdw-toggle-opacity);

  transition:
    opacity 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

a.tdw-theme-toggle:hover,
a.tdw-theme-toggle:focus-visible {
  opacity: 1;
  border-color: var(--tdw-water) !important;
  outline: none;
}

.tdw-theme-toggle .tdw-theme-icon {
  display: block;
  width: var(--tdw-toggle-icon-size);
  height: var(--tdw-toggle-icon-size);
  flex-shrink: 0;

  overflow: visible;
  transform-box: fill-box;
  transform-origin: 50% 50%;

  transform: translateX(var(--tdw-toggle-x-light)) translateY(var(--tdw-toggle-y-light));
  transition: transform 0.3s ease;
}

/* Manual dark override */
html[data-theme="dark"] a.tdw-theme-toggle.wp-block-button__link,
html[data-theme="dark"] .tdw-theme-toggle.wp-element-button {
  border-color: var(--tdw-toggle-border-dark) !important;
}

html[data-theme="dark"] .tdw-theme-toggle .tdw-theme-icon {
  transform: translateX(var(--tdw-toggle-x-dark)) translateY(var(--tdw-toggle-y-dark)) rotate(180deg);
}

/* Auto dark (OS) if no manual override exists */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) a.tdw-theme-toggle.wp-block-button__link,
  html:not([data-theme]) .tdw-theme-toggle.wp-element-button {
    border-color: var(--tdw-toggle-border-dark) !important;
  }

  html:not([data-theme]) .tdw-theme-toggle .tdw-theme-icon {
    transform: translateX(var(--tdw-toggle-x-dark)) translateY(var(--tdw-toggle-y-dark)) rotate(-180deg);
  }
}