/*
 * Texas Cybersecurity Awareness Training - Course-Specific Overrides
 * Loaded after css/style.css. Differentiates the cyber course from the AI course
 * with a teal/cyan accent while keeping the shared Texas navy primary.
 */

:root {
    --cyber-primary: #0F3460;     /* shared Texas navy */
    --cyber-accent:  #0891b2;     /* teal/cyan - the cyber distinguishing color */
    --cyber-accent-light: #cffafe;
    --cyber-accent-dark:  #155e75;
}

/* Header / navbar tinted with the cyber accent stripe */
.cyber-header .cyber-navbar {
    background: linear-gradient(90deg, var(--cyber-primary) 0%, var(--cyber-primary) 60%, var(--cyber-accent-dark) 100%) !important;
    border-bottom: 3px solid var(--cyber-accent);
}

.cyber-navbar .navbar-brand strong {
    letter-spacing: 0.02em;
}

.cyber-navbar .navbar-brand .navbar-logo-wrap {
    box-shadow: 0 0 0 1px var(--cyber-accent);
}

/* Buttons */
.cyber-course .btn-primary {
    background-color: var(--cyber-primary);
    border-color: var(--cyber-primary);
}

.cyber-course .btn-primary:hover,
.cyber-course .btn-primary:focus {
    background-color: var(--cyber-accent-dark);
    border-color: var(--cyber-accent-dark);
}

.cyber-course .btn-outline-cyber {
    color: var(--cyber-accent-dark);
    border-color: var(--cyber-accent);
}

.cyber-course .btn-outline-cyber:hover {
    background-color: var(--cyber-accent);
    color: white;
    border-color: var(--cyber-accent);
}

/* Mandatory-topic badge used on module cards and lesson pages */
.dir-topic-badge {
    display: inline-block;
    background-color: var(--cyber-accent-light);
    color: var(--cyber-accent-dark);
    border: 1px solid var(--cyber-accent);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dir-topic-badge--optional {
    background-color: #f3f4f6;
    color: #4b5563;
    border-color: #d1d5db;
}

/* Statute callout box used in legal content (Sec. 2063.102, Sec. 572.070) */
.statute-callout {
    background: #f8fafc;
    border-left: 5px solid var(--cyber-accent);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    border-radius: 6px;
}

.statute-callout h2,
.statute-callout h3,
.statute-callout strong {
    color: var(--cyber-accent-dark);
}

/* Module card on landing and dashboard */
.cyber-module-card {
    border: 1px solid #e5e7eb;
    border-top: 4px solid var(--cyber-accent);
    border-radius: 8px;
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cyber-module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.15);
}

.cyber-module-card .card-title {
    color: var(--cyber-primary);
}

/* Hero on cyber/index.php */
.cyber-hero {
    background: linear-gradient(135deg, var(--cyber-primary) 0%, var(--cyber-accent-dark) 100%);
    color: white;
    padding: 4rem 0 3rem;
    border-bottom: 5px solid var(--cyber-accent);
}

.cyber-hero h1 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cyber-hero .lead {
    color: rgba(255, 255, 255, 0.92);
}

.cyber-hero .hero-meta {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

/* Lesson page section accents */
.cyber-course .lesson-header h1 {
    border-bottom: 3px solid var(--cyber-accent);
    padding-bottom: 0.5rem;
}

/* Progress bar in dashboard tinted accent */
.cyber-course .progress-bar {
    background-color: var(--cyber-accent);
}

/* Certification status footer notice */
.cyber-footer p.text-muted {
    color: #94a3b8 !important;
    font-style: italic;
}

/* ---- Lesson media block (video / audio / slides) ---- */
.lesson-media {
    border-left: 4px solid var(--cyber-accent, #0891b2) !important;
}

.lesson-media__panel {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    height: 100%;
}

.lesson-media__panel-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--cyber-primary, #0F3460);
    margin-bottom: 0.6rem;
}

/* Placeholder shown until real media is uploaded */
.lesson-media__placeholder {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: repeating-linear-gradient(
        45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);
    border: 2px dashed var(--cyber-accent, #0891b2);
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    color: #475569;
}

.lesson-media__placeholder--sm {
    padding: 0.85rem 1rem;
    height: 100%;
}

.lesson-media__placeholder > i {
    font-size: 1.6rem;
    color: var(--cyber-accent-dark, #155e75);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.lesson-media__placeholder strong {
    color: var(--cyber-primary, #0F3460);
}

.lesson-media__placeholder p {
    color: #64748b;
    margin-top: 0.15rem;
}

/* Admin-only upload hint inside a placeholder */
.lesson-media__hint {
    margin-top: 0.4rem !important;
    color: #155e75 !important;
}

.lesson-media__hint code {
    background: #e0f2fe;
    color: #0c4a6e;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.82em;
}

/* ---- Floating video mini-player (picture-in-picture) ---- */
.cyber-pip-video {
    position: relative;
}

/* The wrapper keeps layout space while the video floats away */
.cyber-pip-wrapper {
    transition: min-height 0.15s ease;
}

/* Floating state: pinned to the bottom-right corner */
.cyber-pip-video--pip {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 340px;
    max-width: 80vw;
    z-index: 1050;
    border-radius: 8px;
    box-shadow: 0 10px 34px rgba(15, 52, 96, 0.45);
    border: 2px solid var(--cyber-accent, #0891b2);
    background: #000;
}

/* Close button - hidden in normal flow, shown while floating */
.cyber-pip-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--cyber-primary, #0F3460);
    color: #ffffff;
    cursor: pointer;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1;
}

.cyber-pip-close:hover,
.cyber-pip-close:focus {
    background: var(--cyber-accent-dark, #155e75);
}

.cyber-pip-video--pip .cyber-pip-close {
    display: inline-flex;
}

@media (max-width: 575.98px) {
    .cyber-pip-video--pip {
        width: 220px;
        bottom: 12px;
        right: 12px;
    }
}

/* =====================================================================
   WCAG 2.2 AAA enhancements (cyber course)
   ---------------------------------------------------------------------
   Scoped under .cyber-course so nothing here affects the AI course.
   Targets the AAA success criteria the CSS layer can actually deliver:
   1.4.6 Contrast (Enhanced) 7:1, 1.4.8 Visual Presentation (line length,
   spacing, no justification), 2.4.7/2.4.11/2.4.13 Focus visibility and
   appearance, 2.5.5 Target Size (44px), 2.3.3 / prefers-reduced-motion,
   and prefers-contrast tuning.
   ===================================================================== */

:root {
    /* Text-safe teal that clears 7:1 on white for AAA body/link/label text.
       The lighter --cyber-accent (#0891b2) stays for borders and large UI
       only, where the 3:1 non-text rule (1.4.11) applies. */
    --cyber-accent-text: #0b4a5c;
    --cyber-focus-ring:  #0b4a5c;
}

/* ---- 1.4.6 Contrast (Enhanced): lift low-contrast defaults to >= 7:1 ---- */
.cyber-course .text-muted {
    /* Bootstrap #6c757d is only 4.7:1 on white. slate-700 clears 7:1. */
    color: #3f4854 !important;
}

.cyber-course .btn-outline-cyber {
    color: var(--cyber-accent-text);
    border-color: var(--cyber-accent-text);
}

.dir-topic-badge {
    /* darker text on the pale-cyan pill to clear 7:1 */
    color: var(--cyber-accent-text);
    border-color: var(--cyber-accent-text);
}

.statute-callout h2,
.statute-callout h3,
.statute-callout strong {
    color: var(--cyber-accent-text);
}

.lesson-media__panel-label {
    color: var(--cyber-accent-text);
}

/* Footer sits on bg-dark: lift the muted note to >= 7:1 on that background. */
.cyber-footer p.text-muted {
    color: #cbd5e1 !important;
}

/* ---- In-content links: distinguishable without relying on color ---- */
.cyber-course .lesson-content a:not(.btn) {
    color: var(--cyber-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.cyber-course .lesson-content a:not(.btn):hover,
.cyber-course .lesson-content a:not(.btn):focus {
    color: var(--cyber-accent-text);
    text-decoration-thickness: 2px;
}

/* ---- 2.4.7 / 2.4.11 / 2.4.13 Focus visible and not obscured ---- */
.cyber-course a:focus-visible,
.cyber-course button:focus-visible,
.cyber-course input:focus-visible,
.cyber-course select:focus-visible,
.cyber-course textarea:focus-visible,
.cyber-course [tabindex]:focus-visible,
.cyber-course .btn:focus-visible,
.cyber-course .nav-link:focus-visible,
.cyber-course .dropdown-item:focus-visible {
    outline: 3px solid var(--cyber-focus-ring);
    outline-offset: 2px;
    /* keep the focused control clear of any sticky UI above it */
    scroll-margin-top: 90px;
    border-radius: 3px;
}

/* On the dark navbar the dark ring would vanish; use a light ring there. */
.cyber-navbar .nav-link:focus-visible,
.cyber-navbar .navbar-brand:focus-visible,
.cyber-navbar .dropdown-toggle:focus-visible,
.cyber-navbar .navbar-toggler:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* Skip link: visible and well-contrasted once focused. */
.cyber-course .skip-link:focus,
.skip-link.visually-hidden-focusable:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    background: var(--cyber-primary);
    color: #ffffff;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    outline: 3px solid #ffffff;
}

/* ---- 2.5.5 Target Size (Enhanced): interactive controls >= 44x44 ---- */
.cyber-course .btn,
.cyber-course .nav-link,
.cyber-course .dropdown-item,
.cyber-course .page-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.cyber-course .dropdown-item {
    justify-content: flex-start;
}

/* Small buttons keep their compact padding but still meet the 44px target. */
.cyber-course .btn-sm {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* ---- 1.4.8 Visual Presentation: measure, spacing, no justification ---- */
.cyber-course .lesson-content p,
.cyber-course .lesson-content li {
    max-width: 72ch;          /* keeps lines under the ~80-char AAA ceiling */
    line-height: 1.6;         /* >= 1.5 within paragraphs */
    text-align: left;         /* never justified */
}

.cyber-course .lesson-content p {
    margin-bottom: 1.1rem;    /* paragraph spacing > 1.5x line spacing */
}

.cyber-course .lesson-content li {
    margin-bottom: 0.4rem;
}

/* ---- 2.3.3 Animation from interactions / reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .cyber-course *,
    .cyber-course *::before,
    .cyber-course *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .cyber-module-card:hover {
        transform: none;
    }

    /* Do not let the video float/animate for users who opt out of motion. */
    .cyber-pip-video--pip {
        position: static;
        width: auto;
        box-shadow: none;
    }
}

/* ---- prefers-contrast: strengthen borders and focus in high-contrast ---- */
@media (prefers-contrast: more) {
    .cyber-course .card,
    .cyber-course .cyber-module-card,
    .cyber-course .lesson-media__panel,
    .cyber-course .table-bordered th,
    .cyber-course .table-bordered td {
        border-color: #1f2937 !important;
    }

    .cyber-course a:focus-visible,
    .cyber-course button:focus-visible,
    .cyber-course .btn:focus-visible {
        outline-width: 4px;
    }
}

/* Honor forced-colors / Windows High Contrast: keep focus outlines visible. */
@media (forced-colors: active) {
    .cyber-course a:focus-visible,
    .cyber-course button:focus-visible,
    .cyber-course .btn:focus-visible,
    .cyber-navbar .nav-link:focus-visible {
        outline: 3px solid Highlight;
    }
}

/* =====================================================================
   Landing page makeover components (cyber/index.php)
   All text/background pairs hold >= 7:1 contrast for WCAG 2.2 AAA.
   ===================================================================== */

/* Hero trust chips */
.cyber-hero .hero-chips {
    padding-left: 0;
    margin: 0 0 1.5rem;
}

.cyber-hero .hero-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;               /* white on navy: >= 10:1 */
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    margin: 0 0.4rem 0.5rem 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.cyber-hero .hero-kicker {
    display: inline-block;
    color: #cffafe;               /* pale cyan on navy: >= 10:1 */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

/* Audience cards */
.cyber-audience-card {
    border: 1px solid #d1d5db;
    border-left: 5px solid var(--cyber-accent);
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    height: 100%;
    background: #ffffff;
}

.cyber-audience-card h3 {
    color: var(--cyber-primary);
}

/* "How it works" numbered steps */
.cyber-steps {
    list-style: none;
    counter-reset: cyber-step;
    padding-left: 0;
}

.cyber-steps li {
    counter-increment: cyber-step;
    position: relative;
    padding-left: 3.4rem;
    margin-bottom: 1.25rem;
    max-width: 60ch;
}

.cyber-steps li::before {
    content: counter(cyber-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cyber-accent-light);
    color: var(--cyber-accent-text);   /* #0b4a5c on #cffafe: >= 8:1 */
    border: 2px solid var(--cyber-accent-text);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
}

/* What's-included checklist band */
.cyber-included {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.cyber-included ul {
    margin-bottom: 0;
}

.cyber-included li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    max-width: 60ch;
}

.cyber-included li > i {
    color: var(--cyber-accent-text);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* FAQ - native <details>, keyboard-first, no JS required */
.cyber-faq details {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    background: #ffffff;
}

.cyber-faq summary {
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--cyber-primary);
    min-height: 44px;              /* AAA target size */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
}

.cyber-faq summary::-webkit-details-marker { display: none; }

.cyber-faq summary::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--cyber-accent-text);
    flex-shrink: 0;
}

.cyber-faq details[open] summary::after { content: "\2212"; }

.cyber-faq details[open] summary {
    border-bottom: 1px solid #e2e8f0;
}

.cyber-faq summary:focus-visible {
    outline: 3px solid var(--cyber-focus-ring);
    outline-offset: 2px;
    border-radius: 8px;
}

.cyber-faq .cyber-faq__answer {
    padding: 1rem 1.25rem;
}

.cyber-faq .cyber-faq__answer p:last-child { margin-bottom: 0; }

.cyber-faq .cyber-faq__answer p {
    max-width: 72ch;
    line-height: 1.6;
}

/* Lesson illustrations
   WCAG 2.2 AAA: images are text-free (SC 1.4.9), caption color meets the AAA
   7:1 contrast ratio (#334155 on white is ~10.6:1), and figures are decorative
   companions to text that already conveys the concept in full. */
.lesson-figure {
    margin: 1.75rem auto;
    max-width: 420px;
    text-align: center;
}

.lesson-figure img {
    width: 100%;
    height: auto;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background-color: #ffffff;
}

.lesson-figure figcaption {
    margin-top: 0.6rem;
    color: #334155;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ---- Pricing cards (landing page) ---- */
.cyber-price-card {
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 1.75rem 1.25rem 1.5rem;
    background: #fff;
    position: relative;
}
.cyber-price-card--featured {
    border: 2px solid var(--cyber-primary);
    box-shadow: 0 8px 24px rgba(15, 52, 96, 0.15);
}
.cyber-price-badge {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cyber-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
}
.cyber-price {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--cyber-primary);
    line-height: 1;
}
.cyber-price sup { font-size: 1.1rem; top: -0.9em; }
.cyber-price--custom { font-size: 2rem; }

/* ---------------------------------------------------------------------------
   TXCC certification seal (FY 26-27)
   The PNG is square with a transparent surround, so it scales cleanly on both
   the light hero panel and the dark footer without needing a plate behind it.
--------------------------------------------------------------------------- */
.cyber-seal {
    width: 100%;
    max-width: 150px;
    height: auto;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
}
.cyber-footer-seal {
    width: 120px;
    height: auto;
}
@media (max-width: 991.98px) {
    .cyber-seal { max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
    .cyber-seal { filter: none; }
}