/* Mexico Permits — CSS propio compartido.
   Consolida los bloques <style> inline que traían las 5 pantallas de Stitch.
   Todo lo que Tailwind ya resuelve NO se repite aquí: esto es solo lo que
   necesita CSS de verdad (gradientes, acordeón sin JS, glow de foco, a11y). */

/* ---------- 1. Base ---------- */

/* Compensa la <nav> fija de 80px al saltar a un ancla (#what-we-handle). */
html {
    scroll-padding-top: 5rem;
}

/* Barra de scroll en la paleta de marca (solo WebKit; degrada sin ruido). */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f5f3f7;
}
::-webkit-scrollbar-thumb {
    background: #041E42;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #0170B9;
}

/* Foco visible y consistente. La CSP no cambia esto, pero quitar el outline sin
   sustituirlo (como hacen los diseños en los inputs) deja el sitio inusable por
   teclado: aquí se repone un anillo propio. */
:focus-visible {
    outline: 2px solid #0170B9;
    outline-offset: 2px;
}

/* ---------- 2. Hero (HOME) ---------- */

.hero-overlay {
    background: linear-gradient(180deg, rgba(4, 30, 66, 0.7) 0%, rgba(4, 30, 66, 0.4) 100%);
}

/* ---------- 3. Listas con viñeta dorada (DESIGN.md §Lists) ---------- */

.gold-bullet::before {
    content: "\25A0";
    color: #C6A467;
    font-size: 0.8em;
    margin-right: 12px;
    display: inline-block;
    vertical-align: middle;
}

/* ---------- 4. Acordeón de servicios (SERVICES) ----------
   Funciona SIN JavaScript: un checkbox sr-only controla el panel por hermanos.
   Es lo que permite que services.html no cargue ningún script. */

.accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
    padding-top: 0;
    padding-bottom: 0;
}
.accordion-toggle:checked ~ .accordion-content {
    max-height: 500px;
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}
.accordion-toggle:checked ~ .accordion-header .icon-expand {
    transform: rotate(180deg);
}
.icon-expand {
    transition: transform 0.3s ease;
}
/* El checkbox es sr-only: sin esto, el foco de teclado sobre el acordeón es
   invisible y no se sabe qué panel se va a abrir. */
.accordion-toggle:focus-visible ~ .accordion-header {
    outline: 2px solid #0170B9;
    outline-offset: 4px;
    border-radius: 0.25rem;
}

/* ---------- 5. Formularios (CONTACT) ---------- */

/* Glow de foco de los campos. DESIGN.md §Input Fields: el borde pasa a
   Investment Blue con un halo suave. */
.form-input-glow:focus {
    outline: none;
    border-color: #0170B9;
    box-shadow: 0 0 0 3px rgba(1, 112, 185, 0.15);
}

/* Honeypot anti-bot: se oculta por CSS, NUNCA por el atributo [hidden] ni por
   display:none en línea — un bot que lea el HTML no debe poder distinguirlo de
   un campo real. Sigue siendo inalcanzable por teclado (tabindex="-1" en el HTML). */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- 6. Elevación (DESIGN.md §Elevation & Depth) ----------
   Sombras "ambient": difusas y teñidas de navy, nunca negro puro. */

.ambient-shadow {
    box-shadow: 0 20px 40px -12px rgba(4, 30, 66, 0.15);
}

/* ---------- 7. Material Symbols ---------- */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    /* Evita que el ligature crudo ("expand_more") parpadee antes de cargar la fuente. */
    font-size: inherit;
    line-height: 1;
    user-select: none;
}
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---------- 8. Contenido del blog (blog-post.php) ----------
   El cuerpo del post es HTML almacenado en posts.json; Tailwind no lo alcanza
   porque no está en el marcado que escanea. Estilos mínimos de lectura. */

.post-body h2 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 32px;
    line-height: 40px;
    color: #041E42;
    margin: 2.5rem 0 1rem;
}
.post-body h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 20px;
    line-height: 28px;
    color: #041E42;
    margin: 2rem 0 0.75rem;
}
.post-body p {
    margin-bottom: 1.25rem;
}
.post-body ul,
.post-body ol {
    margin: 0 0 1.25rem 1.5rem;
}
.post-body li {
    margin-bottom: 0.5rem;
}
.post-body a {
    color: #0170B9;
    text-decoration: underline;
    text-decoration-color: #C6A467;
    text-underline-offset: 4px;
}
.post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
    margin: 2rem 0;
}
.post-body blockquote {
    border-left: 4px solid #C6A467;
    padding-left: 1.5rem;
    margin: 2rem 0;
    color: #4B4F58;
    font-style: italic;
}

/* ---------- 9. Accesibilidad ---------- */

/* Salto al contenido: visible solo al tabular. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    background: #041E42;
    color: #FFFFFF;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* El acordeón debe seguir abriendo: sin transición, pero funcional. */
    .accordion-toggle:checked ~ .accordion-content {
        max-height: 1000px;
    }
}