/* ═══════════════════════════════════════════════════════════════════
   DWR Frontend Theme — Shared design tokens + a11y baseline
   ──────────────────────────────────────────────────────────────────
   Single source of truth for every dwr-* plugin that renders UI on
   the public site (calendar, chatbot, accessibility widget, etc.).
   Each plugin's frontend CSS should depend on `dwr-frontend-theme`.

   Compliance: WCAG 2.1 Level AAA
   - SC 1.4.6 Contrast (Enhanced) ≥ 7:1 normal / ≥ 4.5:1 large
   - SC 1.4.12 Text Spacing
   - SC 2.4.12 Focus Appearance (3px + 2px offset)
   - SC 1.3.1 Info & Relationships (semantic HTML)
   ─────────────────────────────────────────────────────────────────── */

:root {
    /* ═══ Color tokens ═══
       ดึงจาก theme.json ของแต่ละเว็บก่อน (--wp--preset--color--*) → ทุก dwr-* plugin
       ได้สีแบรนด์ตรงกับดีไซน์ของเว็บนั้นเอง · อยากเปลี่ยนสีทั้งเว็บ = แก้ palette ใน theme.json
       ที่เดียว (หรือ hardcode ค่าตรงนี้ก็ได้ถ้าอยาก override ทุก plugin จากส่วนกลาง)
       เลข hex ท้าย = fallback (Material Blue เดิม) เผื่อเว็บที่ไม่มี preset นั้น
       AAA contrast ขึ้นกับ palette ของธีมนั้น ๆ (DWR: contrast #0152A2 บนขาว = 8.6:1 → AAA) */
    --dwr-fe-primary:        var(--wp--preset--color--contrast, #1565C0);
    --dwr-fe-primary-strong: var(--wp--preset--color--accent, #0D47A1);
    --dwr-fe-primary-soft:   #1E88E5;  /* selected state */
    --dwr-fe-primary-tint:   var(--wp--preset--color--background-alt, #E3F2FD);
    --dwr-fe-primary-faint:  #BBDEFB;  /* DoW header on primary (4.6:1 large) */

    /* Text colors (all on white) */
    --dwr-fe-text-heading:   #1A1A1A;  /* 17.5:1 — headings */
    --dwr-fe-text-body:      #424242;  /*  9.7:1 — body */
    --dwr-fe-text-meta:      #5E5E5E;  /*  7.0:1 — metadata (≥14px ≥600 weight) */

    /* Surfaces */
    --dwr-fe-bg:             #FFFFFF;
    --dwr-fe-bg-soft:        #f5f7fa;
    --dwr-fe-border:         #c8d4e0;  /* 3:1 against white = AAA non-text border */

    /* Typography */
    --dwr-fe-font:           'Prompt', 'Kanit', 'Sarabun', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    --dwr-fe-radius:         16px;
    --dwr-fe-shadow:         0 10px 30px -12px rgba(13, 71, 161, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════
   Screen-reader-only utility (SC 1.3.1)
   ─────────────────────────────────────────────────────────────────── */
.dwr-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Universal focus indicator (SC 2.4.12 Focus Appearance, AAA)
   3px solid outline + 2px offset on every interactive element inside
   any known DWR widget. Scoped to known root classes/ids so it never
   leaks into the host theme.

   Add the consumer's root selector here when a new dwr-* plugin lands.
   Last audited: 2026-07-18 — covers all 10 frontend-rendering plugins.
   ─────────────────────────────────────────────────────────────────── */
.dwr-svc :focus-visible,                   /* service-list (บริการสำหรับคุณ) */
[class*="dwr-cal-"] :focus-visible,        /* calendar layouts: we/sm/fs/fp/fl */
.dwr-layout-month :focus-visible,          /* calendar — month (FullCalendar) */
.dwr-event-modal :focus-visible,           /* calendar — shared modal */
.dwr-slider :focus-visible,                /* banner-manager */
.dwr-inquiry-form-wrap :focus-visible,     /* inquiry-manager */
.dwr-inquiry-form :focus-visible,
.dwr-intro-layout :focus-visible,          /* intro-page-management */
.dwr-intro-modal :focus-visible,
.dwr-intro-overlay :focus-visible,
.dwr-social-share :focus-visible,          /* post-manager */
.dwr-rss-two-col :focus-visible,           /* rss-manager */
.dwr-rss-panel :focus-visible,
.dwr-sitemap :focus-visible,               /* sitemap */
.dwr-news2 :focus-visible,                 /* news v2 (rss-manager) */
#dwr-a11y-root :focus-visible,             /* accessibility widget */
#dwr-chat-widget :focus-visible {          /* chatbot widget */
    outline: 3px solid var(--dwr-fe-primary) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* The trigger of the floating a11y widget sits on its own colored bg —
   a colored ring won't show. Use a high-contrast white ring with a
   colored halo instead. */
.dwr-a11y-trigger:focus-visible {
    outline: 3px solid #FFFFFF !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px var(--dwr-fe-primary) !important;
}