/*
 * main.css — Child Theme Entry Point
 * Secretaría de Formación Política · Fuerza del Pueblo · República Dominicana
 *
 * Import order: tokens → typography → components
 * Global rules follow: reset, utilities, layout helpers, Divi overrides.
 *
 * Note: Google Fonts (Barlow Condensed + Montserrat) are loaded via
 * enqueue.php as a separate WordPress-managed stylesheet handle,
 * which avoids a render-blocking @import chain here.
 * ─────────────────────────────────────────────────────────────────────────────
 */

@import './_variables.css';
@import './_typography.css';
@import './_components.css';
@import './_layout.css';


/* ═══════════════════════════════════════════════════════════════════════════
 * MINIMAL RESET
 * Applied on top of Divi's own normalize. We reset only what Divi leaves
 * inconsistent across its module pipeline.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Universal box-sizing — Divi itself uses border-box but some legacy modules
   slip through; this guarantees consistency across all SFP components */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Responsive media — prevents overflow on small viewports */
img,
video,
svg,
canvas,
audio,
iframe {
  max-width: 100%;
}

img,
video {
  display:    block;
  height:     auto;   /* Preserve aspect ratio when width is constrained */
}

/* Remove default margins that Divi sometimes resets inconsistently */
figure {
  margin: 0;
}

/* Inherit font-family in form controls — browser defaults vary significantly */
input,
button,
select,
textarea,
optgroup {
  font-family: var(--font-body);
  font-size:   inherit;
  line-height: inherit;
}

/* Remove browser default margin/padding on lists within nav */
nav ul,
nav ol {
  list-style:           none;
  margin:               0;
  padding-inline-start: 0;
}

/* Table reset */
table {
  border-collapse: collapse;
  border-spacing:  0;
}

/* Horizontal rule */
hr {
  border:              none;
  border-block-start:  1px solid var(--color-border);
  margin-block:        var(--space-8);
}


/* ═══════════════════════════════════════════════════════════════════════════
 * SCROLL BEHAVIOR
 * Smooth scrolling only when the user has not requested reduced motion.
 * CSS scroll-behavior is a safe, no-JS fallback for anchor links.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * TEXT SELECTION
 * Brand-colored selection highlight for visual identity reinforcement.
 * ═══════════════════════════════════════════════════════════════════════════ */
::selection {
  background-color: var(--green-400);   /* #34b356 */
  color:            var(--white);
}

::-moz-selection {
  background-color: var(--green-400);
  color:            var(--white);
}


/* ═══════════════════════════════════════════════════════════════════════════
 * ACCESSIBILITY UTILITIES
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Visually hidden — accessible to screen readers, invisible to sighted users.
   Use for text that provides context for non-text content (icons, charts).
   Never use display:none or visibility:hidden which hide from screen readers. */
.sfp-sr-only,
.screen-reader-text {  /* WordPress convention alias */
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* sr-only that becomes visible on focus — for skip-to links that aren't skip-links */
.sfp-sr-only-focusable:focus,
.sfp-sr-only-focusable:active {
  position:   static;
  width:      auto;
  height:     auto;
  padding:    0;
  margin:     0;
  overflow:   visible;
  clip:       auto;
  white-space: normal;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * LAYOUT: CONTAINER
 * Centered max-width wrapper with fluid horizontal padding.
 * Divi wraps its own content in .et_pb_row — use .sfp-container for
 * SFP-custom sections that sit outside the Divi builder.
 * ═══════════════════════════════════════════════════════════════════════════ */
.sfp-container {
  width:           100%;
  max-width:       var(--container-max);
  margin-inline:   auto;
  padding-inline:  var(--container-padding-x);
}

/* Narrow variant — long-form reading, single-column content */
.sfp-container--narrow {
  max-width: 800px;
}

/* Wide variant — full-bleed with padding only (dashboards, maps) */
.sfp-container--wide {
  max-width: 1440px;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * LAYOUT: SECTION WRAPPER
 * Adds vertical padding to top-level content sections.
 * Used on PHP-rendered sections outside Divi's section system.
 * ═══════════════════════════════════════════════════════════════════════════ */
.sfp-section {
  padding-block: var(--section-padding-y);
}

.sfp-section--sm {
  padding-block: var(--section-padding-y-sm);
}

/* Surface variants */
.sfp-section--cream {
  background-color: var(--color-surface);
}

.sfp-section--white {
  background-color: var(--white);
}

.sfp-section--green {
  background-color: var(--color-primary);
  color:            var(--white);
}

.sfp-section--green-light {
  background-color: var(--color-primary-light);
}


/* ═══════════════════════════════════════════════════════════════════════════
 * LAYOUT: CARD GRID
 * Responsive auto-fill grid for card components (area, actividad, noticia).
 * ═══════════════════════════════════════════════════════════════════════════ */
.sfp-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap:                   var(--grid-gap);
}

.sfp-grid--2col {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
}

.sfp-grid--3col {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

/* Force equal height cards — flex children fill container */
.sfp-grid > * {
  min-height: 0;  /* allow grid children to shrink */
}


/* ═══════════════════════════════════════════════════════════════════════════
 * DIVI OVERRIDES
 * Minimal targeted adjustments to integrate SFP tokens with Divi's generated
 * styles. These do NOT fight Divi's specificity — they extend it cleanly.
 * Avoid !important except where Divi hard-codes inline styles.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Font family — Divi sometimes sets font via JS inline-style;
   we cascade our preference through the child stylesheet */
body,
.et_pb_module,
.et_pb_text_inner {
  font-family: var(--font-body);
}

.et_pb_section h1,
.et_pb_section h2,
.et_pb_section h3,
.et_pb_section h4,
.et_pb_section h5,
.et_pb_section h6 {
  font-family: var(--font-display);
}

/* ── Default section background — align with cream surface token */
.et_pb_section {
  background-color: var(--color-surface);
}

/* ── Row max-width — align with container token */
.et_pb_row {
  max-width: var(--container-max);
}

/* ── Divi button module — apply SFP button token system */
.et_pb_button {
  font-family:      var(--font-body) !important;
  font-size:        var(--text-sm) !important;
  font-weight:      var(--weight-semibold) !important;
  letter-spacing:   var(--tracking-wide) !important;
  border-radius:    var(--radius-lg) !important;
  padding-block:    var(--space-3) !important;
  padding-inline:   var(--space-6) !important;
  text-transform:   none !important;
  /* Divi overrides colors via inline styles in builder — users configure
     in Customizer → Buttons. These CSS vars document the intention. */
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
  color:            var(--white);
}

.et_pb_button:hover {
  background-color: var(--color-primary-hover);
  border-color:     var(--color-primary-hover);
}

/* ── Focus visible on Divi interactive elements ──────────────────────────── */
.et_pb_button:focus-visible,
.et_pb_module a:focus-visible,
.et-pb-contact-message input:focus-visible,
.et-pb-contact-message select:focus-visible,
.et-pb-contact-message textarea:focus-visible {
  outline:        var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Divi removes outline via inline style on some elements — override
   only when keyboard-focused (not on click) */
.et_pb_module *:focus:not(:focus-visible) {
  outline: none;
}

/* ── Divi text module — body text spacing ────────────────────────────────── */
.et_pb_text_inner p {
  margin-block-end: var(--space-4);
  max-width: 72ch;
}

/* ── Divi menu — ensure font consistency ─────────────────────────────────── */
#et-top-navigation,
.et_mobile_menu,
.et_pb_fullwidth_menu {
  font-family: var(--font-body);
}

/* ── Divi section padding — sync with fluid section token when using
   Divi section padding option "none" (for custom-padded sections) ────────── */
.et_pb_section.sfp-section-no-padding {
  padding-block: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * PRINT STYLES (global)
 * Component-level print styles live in _typography.css.
 * These global rules handle layout printing.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  /* Remove non-printable UI */
  .et_fixed_nav,
  .et_pb_section.et_pb_fullwidth_section,
  #et-top-navigation,
  .sfp-accesos-plataformas,
  .sfp-breadcrumb,
  footer {
    display: none !important;
  }

  /* Ensure body has white background for printing */
  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Single-column layout for print */
  .et_pb_row,
  .sfp-grid {
    display: block !important;
  }

  /* Section padding reduced for paper */
  .sfp-section,
  .et_pb_section {
    padding-block: 1rem !important;
  }

  /* Cards print without shadow / transform */
  .sfp-card-area,
  .sfp-card-noticia,
  .sfp-card-actividad {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
    margin-block-end: 1rem;
  }
}