/*
 * D4B Studio — Reusable UI Components
 *
 * Loaded after main.css. Contains styles for template-parts components.
 *
 * Sections:
 *   1. Hero
 *   2. Services Grid / Cards
 *   3. CTA Banner
 *   4. Contact Form wrapper
 *   5. 404 page
 *   6. Blog post cards (archive listing)
 */

/* ================================================================
   1. Hero
   ================================================================ */

/* TODO: .hero — layout, background, padding */
/* TODO: .hero h1 — size, color, max-width */
/* TODO: .hero p — sub-headline style */

/* ================================================================
   2. Services Grid / Cards
   ================================================================ */

/* TODO: .services-grid — section padding, background */
/* TODO: .services-cards — CSS grid, responsive columns */
/* TODO: .service-card — border-radius, surface color, padding, hover */

/* ================================================================
   3. CTA Banner
   ================================================================ */

/* TODO: .cta-banner — background (primary color), text color, padding */
/* TODO: .cta-banner .btn — contrasting button style */

/* ================================================================
   4. Contact Form Wrapper
   ================================================================ */

/* TODO: .contact-form-wrapper — layout, spacing */
/* TODO: CF7 input overrides — match brand styles */

/* ================================================================
   5. 404 Page
   ================================================================ */

/* TODO: .page-404 — centered layout, large error number style */

/* ================================================================
   6. Blog Post Cards
   ================================================================ */

/* TODO: .post-grid — CSS grid layout */
/* TODO: .post-card — card styles, image ratio, hover */

/* ================================================================
   7. Language Toggle (EN / ES)
   ================================================================ */

.dh__lang {
    display: flex;
    gap: 2px;
    align-items: center;
}

.lang-btn {
    font: 600 11px/1 var(--font-sans);
    letter-spacing: var(--tracking-caps);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--d4b-line);
    background: transparent;
    color: var(--d4b-ink-2);
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease-out),
        color      var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.lang-btn.active,
.lang-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.lang-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}