/* Base reset */
@layer str-reset, str-base, str-components, str-utilities, str-overrides;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Frontend foundation tokens */
:root {
  --str-frontend-font-family: var(--str-font-sans, "DM Sans", system-ui, sans-serif);
  --str-frontend-bg-color: var(--str-color-background, #f8fafc);
  --str-frontend-text-color: var(--str-color-text, #0f172a);
  --str-frontend-link-color: var(--str-color-primary, #1d4ed8);
  --str-frontend-link-hover-color: var(--str-color-primary-hover, #1e40af);
}

body {
  font-family: var(--str-frontend-font-family);
  background-color: var(--str-frontend-bg-color);
  color: var(--str-frontend-text-color);
  font-size: var(--str-text-base, 16px);
  line-height: 1.6;
  padding: var(--str-space-4, 16px);
  transition:
    background-color var(--str-duration-normal, 200ms) var(--str-ease-out, cubic-bezier(0, 0, 0.2, 1)),
    color var(--str-duration-normal, 200ms) var(--str-ease-out, cubic-bezier(0, 0, 0.2, 1));
}

h1,
h2,
h3 {
  margin: var(--str-space-4, 16px) 0 var(--str-space-2, 8px);
  line-height: 1.25;
  color: var(--str-color-text, #0f172a);
}

h1 {
  font-family: var(--str-font-display, "Barlow Condensed", "Arial Narrow", sans-serif);
  font-size: var(--str-text-3xl, 30px);
  font-weight: 600;
}

h2 {
  font-family: var(--str-font-display, "Barlow Condensed", "Arial Narrow", sans-serif);
  font-size: var(--str-text-2xl, 24px);
  font-weight: 600;
}

h3 {
  font-size: var(--str-text-xl, 20px);
  font-weight: 700;
}

a {
  color: var(--str-frontend-link-color);
  text-decoration: none;
  transition: color var(--str-duration-fast, 100ms) var(--str-ease-out, cubic-bezier(0, 0, 0.2, 1));
}

a:hover {
  color: var(--str-frontend-link-hover-color);
  text-decoration: underline;
}

.str-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--str-space-2, 8px);
  border: 1px solid transparent;
  border-radius: var(--str-radius-md, 8px);
  background-color: var(--str-color-primary, #1d4ed8);
  color: var(--str-color-text-inverse, #ffffff);
  padding: var(--str-space-2, 8px) var(--str-space-4, 16px);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--str-duration-fast, 100ms) var(--str-ease-out, cubic-bezier(0, 0, 0.2, 1)),
    box-shadow var(--str-duration-fast, 100ms) var(--str-ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.str-btn:hover {
  background-color: var(--str-color-primary-hover, #1e40af);
  text-decoration: none;
}

.str-btn:focus-visible {
  outline: none;
  box-shadow: var(--str-focus-ring, 0 0 0 3px rgba(29, 78, 216, 0.22));
}

.str-theme-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--str-space-3, 12px);
}

.str-theme-toggle {
  min-width: 132px;
  white-space: nowrap;
}

.str-theme-toggle__label {
  font-weight: 600;
}

.menu-item-str-theme-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
}

.menu-item-str-theme-toggle .str-theme-toggle--menu {
  min-height: 36px;
  border-radius: 999px;
  padding: 0.38rem 0.78rem;
  font-size: 0.88rem;
  line-height: 1.1;
  vertical-align: middle;
}

.menu-item-str-theme-toggle .str-theme-toggle--menu .str-theme-toggle__label {
  white-space: nowrap;
}

/* Base icon behavior for SVG sprite usage */
.str-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  flex: 0 0 auto;
  color: currentColor;
  stroke: currentColor;
}

/* Post-B utility helpers for migrated inline styles */
.str-u-mt-8 { margin-top: 8px; }
.str-u-p-10 { padding: 10px; }
.str-u-hidden { display: none; }

@media (max-width: 768px) {
  body {
    font-size: var(--str-text-sm, 14px);
    padding: var(--str-space-2, 8px);
  }

  h1 {
    font-size: var(--str-text-2xl, 24px);
  }

  h2 {
    font-size: var(--str-text-xl, 20px);
  }

  h3 {
    font-size: var(--str-text-lg, 18px);
  }
}

/* ============================================================
   WordPress Theme Compatibility - Mode-aware background
   Works with any theme. Uses html[data-theme] as anchor
   so specificity beats single-element theme rules.
   ============================================================ */

/* html root: no theme touches this */
html[data-theme="light"],
html[data-theme="dark"] {
  background-color: var(--str-color-background);
  color: var(--str-color-text);
}

/* body: html[X] body = (0,1,2) beats theme's body = (0,0,1) */
html[data-theme="light"] body,
html[data-theme="dark"] body {
  background-color: var(--str-color-background);
  color: var(--str-color-text);
}

/* Universal WordPress theme wrappers */
html[data-theme="light"] #page,
html[data-theme="light"] .site,
html[data-theme="light"] main,
html[data-theme="light"] #main,
html[data-theme="light"] #content,
html[data-theme="light"] .site-content,
html[data-theme="light"] .wp-site-blocks,
html[data-theme="light"] .ast-global-container,
html[data-theme="dark"] #page,
html[data-theme="dark"] .site,
html[data-theme="dark"] main,
html[data-theme="dark"] #main,
html[data-theme="dark"] #content,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .wp-site-blocks,
html[data-theme="dark"] .ast-global-container {
  background-color: var(--str-color-background);
  color: var(--str-color-text);
}

/* Header & footer - unified background, adaptive text */
html[data-theme="light"] header,
html[data-theme="light"] #header,
html[data-theme="light"] .site-header,
html[data-theme="light"] #masthead,
html[data-theme="light"] footer,
html[data-theme="light"] #footer,
html[data-theme="light"] .site-footer,
html[data-theme="light"] #colophon,
html[data-theme="dark"] header,
html[data-theme="dark"] #header,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] #masthead,
html[data-theme="dark"] footer,
html[data-theme="dark"] #footer,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] #colophon {
  background-color: var(--str-color-background);
  color: var(--str-color-text);
  border-color: var(--str-color-border);
}

/* ============================================================
   Plugin page header/menu dark-mode compatibility (Astra + generic)
   Scoped to plugin pages to avoid affecting unrelated theme pages.
   ============================================================ */
html[data-theme="dark"] body.str-plugin-page #masthead,
html[data-theme="dark"] body.str-plugin-page .site-header,
html[data-theme="dark"] body.str-plugin-page .main-header-bar,
html[data-theme="dark"] body.str-plugin-page .ast-primary-header-bar {
  background-color: var(--str-color-surface) !important;
  color: var(--str-color-text) !important;
  border-color: var(--str-color-border) !important;
}

html[data-theme="dark"] body.str-plugin-page #masthead .ast-container,
html[data-theme="dark"] body.str-plugin-page #masthead .ast-builder-grid-row,
html[data-theme="dark"] body.str-plugin-page #masthead .ast-builder-layout-element,
html[data-theme="dark"] body.str-plugin-page #masthead .site-branding {
  background: transparent !important;
}

html[data-theme="dark"] body.str-plugin-page #masthead a,
html[data-theme="dark"] body.str-plugin-page #masthead .menu-link,
html[data-theme="dark"] body.str-plugin-page #masthead .main-header-menu > li > a,
html[data-theme="dark"] body.str-plugin-page #masthead .ast-builder-menu-1 .menu-link,
html[data-theme="dark"] body.str-plugin-page #masthead .site-title a,
html[data-theme="dark"] body.str-plugin-page #masthead .ast-site-identity a {
  color: var(--str-color-text) !important;
}

html[data-theme="dark"] body.str-plugin-page #masthead a:hover,
html[data-theme="dark"] body.str-plugin-page #masthead .menu-link:hover,
html[data-theme="dark"] body.str-plugin-page #masthead .main-header-menu > li > a:hover,
html[data-theme="dark"] body.str-plugin-page #masthead .ast-builder-menu-1 .menu-link:hover {
  color: var(--str-color-primary) !important;
}

/* Dark mode - heading hierarchy "focos del estadio" */
html[data-theme="dark"] h1 {
  color: var(--str-color-primary);
}

html[data-theme="dark"] h2 {
  color: #ffffff;
}

html[data-theme="dark"] h3 {
  color: var(--str-color-text);
}

/* Site title (Astra .site-title) */
html[data-theme="dark"] .site-title,
html[data-theme="dark"] .site-title a {
  color: var(--str-color-primary) !important;
}