/* R3 Editorial Dark — shared design system for restyled award & blog pages.
   Source of truth: nja2025.html (extracted verbatim 2026-07-26, see SEO-Plan/phase-1/02-DESIGN-SYSTEM.md).
   Linked ONLY by restyled pages, so home/course pages are unaffected.
   Do not add page-specific rules here. */
:root {
            --primary-color: rgb(255, 76, 48);
            --bg-dark: #101010;
            --glass-bg: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.1);
            --text-light: #e0e0e0;
            --text-muted: #aaa;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-light);
            font-family: 'Montserrat', sans-serif;
        }

        /* Modern Header */
        #nja-header {
            background-size: cover;
            background-position: center;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-bottom: -50px;
            margin-top: 20px;
            /* Fix overlap with navbar */
            z-index: 1;
        }

        #nja-header h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3.5em;
            line-height: 1.2;
            color: #fff;
            text-align: center;
            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            margin-bottom: 20px;
            padding-top: 10px;
        }

        #nja-header p.subtitle {
            font-size: 1.5em;
            color: var(--primary-color);
            text-align: center;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 700;
        }

        /* Content Wrapper */
        .content-wrapper {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid var(--glass-border);
            padding: 60px;
            margin-bottom: 60px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            position: relative;
            z-index: 2;
        }

        h2.section-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.5em;
            color: #fff;
            margin-bottom: 30px;
            position: relative;
            display: inline-block;
        }

        h2.section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background: var(--primary-color);
            margin-top: 10px;
        }

        p.lead-text {
            font-size: 1.2em;
            line-height: 1.8;
            color: #d1d1d1;
            margin-bottom: 25px;
        }

        /* Features/Methodology Grid */
        .methodology-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .methodology-card {
            background: rgba(255, 255, 255, 0.05);
            padding: 30px;
            border-radius: 15px;
            transition: transform 0.3s ease;
            border: 1px solid transparent;
        }

        .methodology-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary-color);
        }

        .methodology-icon {
            font-size: 3em;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

        .methodology-card h3 {
            color: #fff !important;
            font-size: 1.5em;
            margin-bottom: 15px;
        }

        /* Focus List */
        .focus-list {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin: 30px 0;
        }

        .focus-list li {
            background: rgba(255, 76, 48, 0.1);
            border: 1px solid rgba(255, 76, 48, 0.2);
            padding: 15px 25px;
            border-radius: 50px;
            margin: 10px;
            font-weight: 600;
            color: #fff;
        }

        /* Quote Section */
        .quote-box {
            background: radial-gradient(circle at center, rgba(255, 76, 48, 0.1), transparent 70%);
            padding: 50px;
            text-align: center;
            margin: 60px 0;
            border-left: 5px solid var(--primary-color);
        }

        .quote-text {
            font-family: 'Playfair Display', serif;
            font-size: 1.8em;
            font-style: italic;
            color: #fff;
        }

        /* CTA Button */
        .btn-premium {
            background: linear-gradient(45deg, var(--primary-color), #ff8c00);
            color: #fff;
            padding: 18px 45px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
            box-shadow: 0 10px 20px rgba(255, 76, 48, 0.3);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: inline-block;
            margin-top: 30px;
        }

        .btn-premium:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 30px rgba(255, 76, 48, 0.5);
            color: #fff;
            text-decoration: none;
        }

        .cta-section {
            text-align: center;
            padding: 60px 0;
        }

        /* General Helper */
        .text-justify {
            text-align: justify;
        }

        /* Overrides for dark theme */
        .navbar-default {
            background-color: #000;
            border-color: #222;
        }

        .navbar-default .navbar-brand {
            color: #fff;
        }

        .navbar-default .navbar-nav>li>a {
            color: #ddd;
        }

        section#footer {
            background: #000;
            border-top: 1px solid #222;
        }

        /* Mobile Responsive Styles */
        @media (max-width: 768px) {

            /* Header adjustments */
            #nja-header {
                height: auto;
                min-height: 150px;
                margin-top: 10px;
                margin-bottom: 0;
                padding: 20px 10px;
            }

            #nja-header h1 {
                font-size: 2em;
                margin-bottom: 10px;
                padding-top: 5px;
            }

            #nja-header p.subtitle {
                font-size: 0.9em;
                letter-spacing: 1px;
            }

            /* Content wrapper padding */
            .content-wrapper {
                padding: 30px 20px;
                margin-bottom: 30px;
                border-radius: 15px;
            }

            /* Section titles */
            h2.section-title {
                font-size: 1.8em;
                margin-bottom: 20px;
            }

            /* Lead text */
            p.lead-text {
                font-size: 1em;
                line-height: 1.6;
                margin-bottom: 20px;
            }

            /* Methodology grid - stack on mobile */
            .methodology-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                margin-top: 20px;
            }

            .methodology-card {
                padding: 20px;
            }

            .methodology-icon {
                font-size: 2.5em;
            }

            .methodology-card h3 {
                font-size: 1.3em;
            }

            /* Focus list */
            .focus-list {
                margin: 20px 0;
            }

            .focus-list li {
                padding: 10px 20px;
                margin: 5px;
                font-size: 0.9em;
            }

            /* Quote box */
            .quote-box {
                padding: 25px 15px;
                margin: 30px 0;
            }

            .quote-text {
                font-size: 1.2em;
            }

            /* CTA section */
            .cta-section {
                padding: 20px 0;
            }

            .cta-section h2 {
                font-size: 1.5em !important;
            }

            .btn-premium {
                padding: 15px 30px;
                font-size: 14px;
                width: 100%;
                max-width: 300px;
            }

            /* Ensure content doesn't overflow */
            .col-md-10.col-md-offset-1 {
                margin-left: 0;
                margin-right: 0;
            }
        }

        @media (max-width: 480px) {
            #nja-header h1 {
                font-size: 1.5em;
            }

            #nja-header p.subtitle {
                font-size: 0.75em;
            }

            h2.section-title {
                font-size: 1.5em;
            }

            .content-wrapper {
                padding: 20px 15px;
            }

            .quote-text {
                font-size: 1em;
            }

            .focus-list li {
                font-size: 0.85em;
                padding: 8px 15px;
            }
        }

/* ---- additions for the pages restyled in Chunk C/D ---- */
:root { --primary-color: rgb(255, 76, 48); --bg-dark: #101010;
        --glass-bg: rgba(255,255,255,0.03); --glass-border: rgba(255,255,255,0.10);
        --text-light: #e0e0e0; --text-muted: #aaa; }

/* winner / gallery grid — flexbox, NOT css-grid: each row fills its own width
   regardless of remainder (see 08-IMPLEMENTATION-NOTES). */
.sw-grid { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0 10px; }
.sw-grid figure { flex: 1 1 210px; margin: 0; background: var(--glass-bg);
    border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden;
    transition: transform .3s ease, border-color .3s ease; }
.sw-grid figure:hover { transform: translateY(-5px); border-color: var(--primary-color); }
.sw-grid img { width: 100%; height: auto; display: block; }
.sw-grid figcaption { font-size: 12.5px; color: var(--text-muted); padding: 10px 12px;
    line-height: 1.55; text-align: left; }
.sw-grid figcaption strong { color: #fff; display: block; margin-bottom: 3px; font-size: 13.5px; }

/* accessibility floor */
a:focus-visible, .btn-premium:focus-visible, .btnnew:focus-visible {
    outline: 2px solid var(--primary-color); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important;
        scroll-behavior: auto !important; }
}

/* ---- Chunk D: blog pages adopt the editorial display face without markup changes.
       This file is linked AFTER each blog page's inline <style>, so equal-specificity
       rules here win the cascade. Structure, copy and schema are untouched. ---- */
.blog-post-title,
.blog-content h2, .blog-content h3, .blog-content h4,
.blog-card h2, .blog-card h3, .blog-card h4,
#about-blog h1, #about-header h1,
/* blog-home's H1 sits in a plain .divider block; templatemo-style.css pins h1,h2 to 20px
   sitewide, so it needs an explicit size as well as the display face. */
.divider .col-md-6 h1,
.divider .col-md-6 h2 {
    font-family: 'Playfair Display', serif;
}
.divider .col-md-6 h1 { font-size: 2.4em; line-height: 1.25; color: #fff; }
        .divider .col-md-6 h2 { font-size: 1.9em; line-height: 1.25; color: #fff; }
@media (max-width: 768px) { .divider .col-md-6 h1 { font-size: 1.6em; } }
.blog-post-title { font-size: 2.6em; line-height: 1.22; letter-spacing: -0.5px; }
.blog-content h2 { font-size: 1.85em; }

/* glass treatment for the article body, matching .content-wrapper on the award pages */
.blog-post-container {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.blog-card:hover { border-color: var(--primary-color); }

@media (max-width: 768px) {
    .blog-post-title { font-size: 1.8em; }
    .blog-content h2 { font-size: 1.4em; }
    .blog-post-container { border-radius: 14px; }
}

/* --- post-audit fixes 2026-07-26 --- */
/* single-winner .sw-grid figure must not balloon to full card width */
.sw-grid figure { max-width: 340px; }
/* .sub-title (Awards/Videos headings inside award cards) had no rule */
.sub-title { font-family: 'Playfair Display', serif; font-size: 1.25em; color: #fff;
    margin: 22px 0 10px; }
/* embedded YouTube iframes must scale down on narrow phones */
.content-wrapper iframe, .welcometext iframe { max-width: 100%; }
/* gallery page titles get the editorial display face (galleries only:
   NJA pages carry their H1 in #nja-header, which is now outside #welcome) */
section#welcome > .container h1 { font-family: 'Playfair Display', serif;
    font-size: 2.4em; line-height: 1.2; color: #fff; }
@media (max-width: 768px) { section#welcome > .container h1 { font-size: 1.7em; } }

/* --- post-audit round 2 (2026-07-26) --- */
/* templatemo '#portfolio h2' forces pink; raise specificity to keep editorial white */
#portfolio h2.section-title { color: #fff; }
/* legacy .welcometext rows are opaque black panels; blend them into the glass card */
#welcome .content-wrapper .welcometext { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
/* stop #portfolio images distorting under the width:100% + max-height:200 combo */
#portfolio img { object-fit: contain; }

/* ---- click-to-play YouTube facade -----------------------------------------
   Added 2026-07-27. The award pages embedded YouTube iframes directly, which
   pulled ~2.2 MB of player JavaScript on every page load whether or not anyone
   pressed play (measured: 4 embeds on nja2022 = the page's whole performance
   problem). Nothing is requested from YouTube now until the visitor clicks. */
.yt-facade { position: relative; display: block; width: 344px; max-width: 100%;
    aspect-ratio: 344 / 611; margin: 0 auto 18px; background: #000;
    border-radius: 12px; overflow: hidden; cursor: pointer; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade .yt-play { position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 68px; height: 48px;
    background: rgba(0, 0, 0, .72); border-radius: 12px;
    transition: background .2s ease; pointer-events: none; }
.yt-facade .yt-play::before { content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-38%, -50%); border-style: solid;
    border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; }
.yt-facade:hover .yt-play, .yt-facade:focus .yt-play { background: #ff0000; }
.yt-facade:focus { outline: 2px solid var(--primary-color); outline-offset: 3px; }
.yt-facade iframe { width: 100%; height: 100%; border: 0; display: block; }