/*
Theme Name: CHGJ — Chow-Hoon Goshin Jitsu
Theme URI:  https://chgj.org
Author:     Mr. Mike Bruno
Description: Black + red martial-arts custom theme for Chow-Hoon Goshin Jitsu, recreating the aesthetic of the legacy static site.
Version:    1.0.0
Text Domain: chgj
*/

/* ------------------------------------------------------------------
   1. Theme variables — original site palette
   ------------------------------------------------------------------ */
:root {
    --chgj-black:        #000000;
    --chgj-dark-gray:    #141414;
    --chgj-mid-gray:     #1f1f1f;
    --chgj-light-gray:   #999999;
    --chgj-off-white:    #e6e6e6;
    --chgj-white:        #ffffff;
    --chgj-red:          #cc0000;
    --chgj-red-bright:   #ff2222;
    --chgj-red-dark:     #660000;
    --chgj-red-glow:     rgba(204, 0, 0, 0.45);
    --chgj-shadow:       rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------
   2. Reset + base typography
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--chgj-black);
    color: var(--chgj-off-white);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--chgj-red-bright);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover { color: var(--chgj-white); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    color: var(--chgj-white);
    font-weight: 800;
    line-height: 1.2;
    margin: 1.5rem 0 .75rem;
    letter-spacing: -.01em;
}
h1 { font-size: 2.6rem; margin-top: 0; }
h2 { font-size: 2rem; }
h2 span, .highlight { color: var(--chgj-red); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.05rem; color: var(--chgj-red-bright); text-transform: uppercase; letter-spacing: .08em; }
h5, h6 { font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--chgj-light-gray); }

p { margin: 0 0 1rem; }
ul, ol { margin: 1rem 0; padding-left: 1.5rem; }
li { margin-bottom: .35rem; }

img { max-width: 100%; height: auto; display: block; }

blockquote {
    border-left: 3px solid var(--chgj-red);
    background: var(--chgj-mid-gray);
    color: var(--chgj-white);
    padding: .75rem 1.25rem;
    margin: 1.5rem 0;
    font-style: italic;
}

hr { border: 0; border-top: 1px solid var(--chgj-red-dark); margin: 2rem 0; }

/* ------------------------------------------------------------------
   3. Page layout
   ------------------------------------------------------------------ */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem;
}
.no-max { max-width: none; padding: 5rem 2rem; }

.page-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--chgj-red-dark);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}
.entry-content { line-height: 1.7; }
.entry-content img { margin: 1rem 0; border-radius: 6px; }

/* ------------------------------------------------------------------
   4. Site header + nav
   ------------------------------------------------------------------ */
.site-header {
    background: var(--chgj-dark-gray);
    border-bottom: 2px solid var(--chgj-red);
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px var(--chgj-shadow);
}
.site-branding { display: flex; align-items: center; gap: .75rem; }
.site-title {
    color: var(--chgj-white);
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.site-title a { color: var(--chgj-white); }
.site-title a:hover { color: var(--chgj-red-bright); text-decoration: none; }

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
}
.site-nav a, .site-nav .menu-item a {
    color: var(--chgj-off-white);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .08em;
}
.site-nav a:hover, .site-nav .menu-item a:hover {
    color: var(--chgj-red-bright);
    text-decoration: none;
}

/* Hamburger toggle — hidden on desktop, shown only at the mobile
   breakpoint below. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--chgj-white);
    border-radius: 2px;
}

@media (max-width: 700px) {
    .site-header {
        padding: 1rem 1.25rem;
    }
    .nav-toggle {
        display: flex;
    }
    /* The links themselves were wrapping mid-row on narrow phones,
       looking cramped and uneven. Below this width, the nav becomes
       a dropdown — hidden until the hamburger button toggles it open
       — that floats below the header instead of disrupting its row,
       and its links stack in a single clean column instead of
       wrapping. */
    /* .site-header is already position:sticky, which makes it the
       containing block for the dropdown below — no extra positioning
       needed on .site-nav itself, and left:0/right:0 line up with
       the header's true edges rather than the narrower nav element. */
    .site-nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--chgj-dark-gray);
        border-top: 1px solid var(--chgj-red-dark);
        box-shadow: 0 8px 16px var(--chgj-shadow);
        z-index: 99;
    }
    .site-nav.is-open ul {
        display: flex;
    }
    .site-nav ul li a {
        display: block;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #2a2a2a;
    }
}

/* ------------------------------------------------------------------
   5. Site footer
   ------------------------------------------------------------------ */
.site-footer {
    background: var(--chgj-dark-gray);
    color: var(--chgj-light-gray);
    text-align: center;
    padding: 3rem 2rem 2rem;
    margin-top: 4rem;
    border-top: 1px solid var(--chgj-red);
}
.site-footer img { margin: 0 auto 1rem; }
.site-footer p { margin: .35rem 0; font-size: .9rem; }
.site-footer a { color: var(--chgj-light-gray); }
.site-footer a:hover { color: var(--chgj-white); }

/* ------------------------------------------------------------------
   6. Buttons (mirror original site's .btn / .btn-primary / .btn-outline)
   ------------------------------------------------------------------ */
.btn, button.btn, a.btn {
    display: inline-block;
    padding: .85rem 1.6rem;
    background: var(--chgj-red);
    color: var(--chgj-white);
    border: 2px solid var(--chgj-red);
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    cursor: pointer;
    transition: all .2s ease;
    text-decoration: none;
    font-size: .9rem;
    line-height: 1;
    margin: .25rem;
}
.btn:hover, button.btn:hover, a.btn:hover {
    background: var(--chgj-red-bright);
    border-color: var(--chgj-red-bright);
    color: var(--chgj-white);
    text-decoration: none;
    box-shadow: 0 0 22px var(--chgj-red-glow);
}
.btn-outline, a.btn-outline {
    background: transparent;
    color: var(--chgj-red-bright);
}
.btn-outline:hover, a.btn-outline:hover {
    background: var(--chgj-red);
    color: var(--chgj-white);
}

/* ------------------------------------------------------------------
   7. Sections, hero, history (raw-HTML content from migration)
   ------------------------------------------------------------------ */
section.hero {
    text-align: center;
    padding: 7rem 2rem 5rem;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(204, 0, 0, .22) 0%, transparent 55%),
        var(--chgj-black);
}
section.hero h1 {
    font-size: 3.2rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
}
section.hero h1 span { color: var(--chgj-red); font-style: italic; }
section.hero .hero-subtitle {
    color: var(--chgj-light-gray);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin: .25rem 0;
    font-size: 1rem;
}
section.hero .hero-tagline {
    color: var(--chgj-red);
    font-style: italic;
    font-size: 1.4rem;
    margin: .5rem 0 2rem;
}
section.hero .hero-logo {
    width: 280px;
    height: 280px;
    max-width: 80vw;
    aspect-ratio: 1 / 1;
    margin: 0 auto 2rem;
    border-radius: 50%;
    border: 3px solid var(--chgj-red);
    background: var(--chgj-white);
    box-shadow: 0 0 36px var(--chgj-red-glow);
    overflow: hidden;
    position: relative;
    display: block;
}
/* The source PNG has a lot of transparent padding baked in around the
   round mark, which is what made the white circle look oversized —
   at 100% the mark itself only filled a fraction of the circle. This
   zooms the image in and clips the overflow so the circle hugs the
   logo. Raise/lower --logo-zoom to tighten/loosen the crop. */
section.hero .hero-logo img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% * var(--logo-zoom, 1.15));
    height: calc(100% * var(--logo-zoom, 1.15));
    /* The site-wide "img { max-width:100% }" reset resolves against
       this element's positioned container and was silently capping
       the zoomed size back down to exactly 280px, no matter how high
       --logo-zoom was set. This is what actually needed changing. */
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%);
    object-fit: contain;
}
section.hero .hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
section.hero .hero-search-line {
    font-size: .85rem;
    color: var(--chgj-light-gray);
    max-width: 720px;
    margin: 2rem auto 0;
}

section.section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 5rem 2rem;
}
section.section-dark {
    background: var(--chgj-dark-gray);
    max-width: none;
    padding: 5rem 2rem;
}
section.section-red-accent {
    background: linear-gradient(180deg, var(--chgj-dark-gray) 0%, var(--chgj-mid-gray) 100%);
    max-width: none;
    padding: 5rem 2rem;
    border-top: 1px solid var(--chgj-red-dark);
    border-bottom: 1px solid var(--chgj-red-dark);
}

section .section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}
section .section-header h2 {
    margin: 0 0 .25rem;
}
section .section-header p {
    color: var(--chgj-light-gray);
    margin: .25rem 0;
}
section .section-header p strong { color: var(--chgj-red-bright); }

.history-section {
    max-width: 1100px;
    margin: 1.25rem auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "image text";
    gap: 2.25rem;
    align-items: center;
}
.history-section .history-image { grid-area: image; }
.history-section .history-text { grid-area: text; }
.history-section.history-section-reverse {
    grid-template-areas: "text image";
}
.history-text p { line-height: 1.7; }
.history-image { text-align: center; }
.history-image img {
    max-width: 100%;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--chgj-red-dark);
    filter: drop-shadow(0 4px 12px var(--chgj-shadow));
}
.history-caption {
    font-size: .85rem;
    color: var(--chgj-light-gray);
    margin-top: .5rem;
}
@media (max-width: 820px) {
    .history-section,
    .history-section.history-section-reverse {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "text";
    }
}

/* ------------------------------------------------------------------
   8. Style cards (martial arts grid on home)
   ------------------------------------------------------------------ */
.styles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.style-card {
    background: var(--chgj-mid-gray);
    border: 1px solid var(--chgj-red-dark);
    border-radius: 6px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
    box-shadow: 0 4px 14px var(--chgj-shadow);
}
.style-card:hover {
    transform: translateY(-4px);
    border-color: var(--chgj-red);
}
.style-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.style-card-body {
    padding: 1.5rem;
}
.style-card-body h3 {
    color: var(--chgj-white);
    margin: 0 0 .5rem;
}

/* ------------------------------------------------------------------
   9. Instructors
   ------------------------------------------------------------------ */
.instructors-grid {
    display: grid;
    grid-template-columns: minmax(0, 860px);
    justify-content: center;
    gap: 2rem;
    margin: 0 auto 2rem;
}
.instructor-card {
    background: var(--chgj-mid-gray);
    border: 1px solid var(--chgj-red-dark);
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    padding-bottom: 1.5rem;
}
.instructor-card-split {
    display: grid;
    grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
    text-align: center;
    padding-bottom: 0;
    align-items: stretch;
}
@media (max-width: 820px) {
    .instructor-card-split {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
.instructor-photo-left {
    width: 100% !important;
    height: auto !important;
    /* Was a fixed 390px height. On desktop the column is capped at
       ~326px wide, so 390px tall gave roughly a 5:6 portrait ratio.
       On mobile the card goes full-width (much wider than 326px),
       and a fixed height stopped matching that ratio — stretching
       into a short, wide box that over-cropped the photo. An
       aspect-ratio keeps the same proportions at any width. */
    aspect-ratio: 5 / 6 !important;
    max-height: 480px !important;
    object-fit: cover !important;
    object-position: center center;
    background: #080808;
    display: block;
    margin: 0 auto;
    /* The photo has a max-height, so it can't stretch to match a
       taller text column the way align-items:stretch normally would.
       This centers it vertically in that column instead of sitting
       pinned to the top with empty space below it. */
    align-self: center;
}
.instructor-body {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items:center previously shrink-wrapped every child (the
       paragraph included) down to its own content width, which is
       why the bio text wrapped tightly instead of spanning the box.
       Stretching the children full-width and left-aligning the text
       fixes that while keeping things vertically centered. */
    align-items: stretch;
    text-align: left;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}
.instructor-body h3 { margin: 0 0 .25rem; }
.instructor-body p {
    line-height: 1.65;
    max-width: 100%;
}
.instructor-title {
    color: var(--chgj-red-bright);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .8rem;
    margin: 0 0 1rem;
    font-weight: 700;
}

.sensei-grid,
.sensei-grid-two,
.sensei-grid-three {
    display: grid;
    gap: 2rem;
    margin: 1.5rem 0;
    /* Cap how wide each card can get so the photos can't balloon in
       height (they scale with column width via aspect-ratio) on very
       wide viewports or at low browser zoom levels. */
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.sensei-grid-two { grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; }
.sensei-grid-three { grid-template-columns: repeat(3, minmax(0, 280px)); justify-content: center; }
.sensei-grid-final {
    grid-template-columns: minmax(0, 280px);
    justify-content: center;
}
@media (max-width: 820px) {
    .sensei-grid-two,
    .sensei-grid-three,
    .sensei-grid-final {
        /* Was "1fr", which let the single mobile column stretch to
           the full section width. Combined with the photo's fixed
           max-height, that broke the aspect ratio and cropped heads/
           feet more aggressively than on desktop. Keeping the same
           bounded card width as desktop fixes it. */
        grid-template-columns: minmax(0, 280px);
        justify-content: center;
    }
}
.sensei-card {
    background: var(--chgj-mid-gray);
    border: 1px solid var(--chgj-red-dark);
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    padding-bottom: 1.25rem;
    transition: transform .2s ease;
}
.sensei-card:hover { transform: translateY(-3px); }
.sensei-photo {
    width: 100% !important;
    height: auto !important;
    /* Matches the instructor-photo-left box proportions (roughly
       326x390) so these photos get the same amount of "breathing
       room" instead of being cropped into a short, wide box that
       cuts off heads. max-height keeps that from scaling up into
       an oversized photo now that the column itself is also capped
       (see .sensei-grid-three above) — belt-and-suspenders. */
    aspect-ratio: 5 / 6 !important;
    max-height: 340px !important;
    object-fit: cover !important;
    object-position: center center;
    background: #090909;
    display: block;
    margin: 0;
}
.sensei-card-body { padding: 1.25rem 1.25rem 0; }
.sensei-card-body h3 { margin: 0; }
/* A few source photos have the subject's head positioned higher in
   the original frame than the others, so the default center crop
   was clipping the top of the hair. This shifts the crop upward for
   just those photos instead of cropping everyone from dead-center. */
.sensei-photo.sensei-photo--top {
    object-position: center top;
}
.sensei-photo.sensei-photo--geri {
    /* Plain "top" left too much empty space above her head, meaning
       the source photo isn't cropped flush to the top like Tyler's
       and Montana's. This splits the difference. */
    object-position: center 20%;
}

a.sensei-bio-link, .sensei-bio-link {
    display: inline-block;
    margin-top: .85rem;
    padding: .5rem 1rem;
    background: var(--chgj-red);
    color: var(--chgj-white);
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .07em;
    transition: all .2s ease;
}
a.sensei-bio-link:hover, .sensei-bio-link:hover {
    background: var(--chgj-red-bright);
    color: var(--chgj-white);
    text-decoration: none;
    box-shadow: 0 0 14px var(--chgj-red-glow);
}

/* ------------------------------------------------------------------
  10. Class schedule
   ------------------------------------------------------------------ */
.classes-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}
.register-cta,
.register-cta p,
.register-cta .register-link {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.register-cta {
    max-width: 760px;
}
.register-cta .btn,
.register-cta .register-link {
    display: inline-block;
}
@media (max-width: 820px) { .classes-wrapper { grid-template-columns: 1fr; } }
.class-block,
.class-info-box {
    background: var(--chgj-mid-gray);
    border: 1px solid var(--chgj-red-dark);
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.class-block h3 { margin: 0 0 .5rem; }
.class-level {
    color: var(--chgj-light-gray);
    font-size: .85rem;
    font-style: italic;
}
.class-time {
    color: var(--chgj-red-bright);
    font-size: 1.4rem;
    font-weight: 800;
    margin: .5rem 0;
    letter-spacing: .04em;
}
.class-days {
    color: var(--chgj-off-white);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .85rem;
    font-weight: 700;
}
.class-info-box h4 {
    margin: 0 0 .5rem;
}

/* ------------------------------------------------------------------
  11. Footer logo + contact-page cards
   ------------------------------------------------------------------ */
.footer-logo-circle,
.nav-logo-circle {
    border-radius: 50%;
    background: var(--chgj-white);
    display: block;
    position: relative;
    overflow: hidden;
}
.footer-logo-circle {
    width: 80px;
    height: 80px;
    border: 2px solid var(--chgj-red);
    margin: 0 auto 1rem;
}
.nav-logo-circle {
    width: 28px;
    height: 28px;
    border: 1px solid var(--chgj-red);
}
/* Same zoom-crop as .hero-logo, so the white circle matches the size
   of the visible logo instead of the transparent padding around it. */
.footer-logo-circle img,
.nav-logo-circle img,
.nav-logo-circle .custom-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% * var(--logo-zoom, 1.15));
    height: calc(100% * var(--logo-zoom, 1.15));
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%);
    object-fit: contain;
}
.disclaimer {
    font-size: .78rem;
    color: var(--chgj-light-gray);
    border-top: 1px solid var(--chgj-red-dark);
    padding-top: 1rem;
    margin-top: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.disclaimer strong { color: var(--chgj-red); }

/* ------------------------------------------------------------------
  12. Bio pages (instructor-*)
   ------------------------------------------------------------------ */
.bio-modal-title {
    color: var(--chgj-red);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
}
.bio-modal-heading {
    color: var(--chgj-red-bright);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 1rem;
    margin: 1.5rem 0 .5rem;
}
.bio-modal-list {
    list-style: none;
    padding-left: 0;
}
.bio-modal-list li {
    padding-left: 1.25rem;
    position: relative;
    margin-bottom: .35rem;
}
.bio-modal-list li::before {
    content: "▸";
    color: var(--chgj-red);
    position: absolute;
    left: 0;
    top: 0;
}
.bio-modal-quote {
    border-left: 3px solid var(--chgj-red);
    padding-left: 1rem;
    font-style: italic;
    color: var(--chgj-white);
    margin: 1.5rem 0;
}
.bio-contact-link {
    color: var(--chgj-red-bright);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-align: center;
    display: block;
    margin-top: 1rem;
}

.bio-modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, .82);
    z-index: 1000;
}
.bio-modal.open { display: grid; }
.bio-modal-card {
    width: min(940px, 100%);
    max-height: min(88vh, 900px);
    overflow: auto;
    background: var(--chgj-dark-gray);
    border: 1px solid var(--chgj-red);
    border-radius: 8px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 20px 70px rgba(0, 0, 0, .65);
    position: relative;
}
.bio-modal-close {
    position: absolute;
    top: .75rem;
    right: .85rem;
    width: 42px;
    height: 42px;
    border: 1px solid var(--chgj-red-dark);
    border-radius: 50%;
    background: #050505;
    color: var(--chgj-white);
    cursor: pointer;
    font-size: 1.7rem;
    line-height: 1;
}
.bio-modal-close:hover { color: var(--chgj-red-bright); border-color: var(--chgj-red); }
.bio-modal-photo {
    width: min(360px, 100%);
    max-height: 420px;
    object-fit: contain;
    margin: 0 auto 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--chgj-red-dark);
    background: #080808;
}
.bio-modal-text {
    max-width: 740px;
    margin: 0 auto;
    line-height: 1.8;
}
.bio-modal-text .page-header,
.bio-modal-text .page-title {
    display: none;
}
.bio-modal-loading {
    text-align: center;
    color: var(--chgj-light-gray);
}

/* ------------------------------------------------------------------
  13. Promotion page
   ------------------------------------------------------------------ */
.promotion-hero {
    text-align: center;
    padding: 3rem 2rem 2.5rem;
    background: linear-gradient(180deg, var(--chgj-black) 0%, var(--chgj-dark-gray) 100%);
    border-bottom: 1px solid var(--chgj-red-dark);
}
.promotion-hero h1 { margin-bottom: .5rem; }
.promotion-hero h1 span { color: var(--chgj-red); }
.promotion-logo {
    width: 160px;
    max-width: 42vw;
    border-radius: 50%;
    background: var(--chgj-white);
    padding: .35rem;
    margin: 0 auto 1rem;
    display: block;
    filter: drop-shadow(0 0 28px var(--chgj-red-glow));
}
.entry-content .promotion-logo {
    margin-left: auto;
    margin-right: auto;
}
.promotion-date {
    color: var(--chgj-light-gray);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 700;
}
.promotion-flyer-img {
    display: block;
    width: min(100%, 820px);
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid var(--chgj-red-dark);
    box-shadow: 0 16px 38px var(--chgj-shadow);
}
.flyer-placeholder {
    text-align: center;
    padding: 0 2rem;
}
.flyer-download {
    display: inline-block;
    margin: 1rem auto 0;
}
.promotion-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 2rem;
}
@media (max-width: 820px) { .promotion-grid { grid-template-columns: 1fr; } }
.promotion-panel {
    border-radius: 8px;
    border: 1px solid var(--chgj-red-dark);
    background: rgba(26, 26, 26, .92);
    padding: 1.5rem;
    box-shadow: 0 14px 32px var(--chgj-shadow);
}
.updates-list, .info-list { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 0; }
.update-label {
    display: block;
    color: var(--chgj-red-bright);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .25rem;
}
.info-list li {
    border-left: 4px solid var(--chgj-red);
    background: var(--chgj-mid-gray);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.1rem;
    border-bottom: none;
}

/* ------------------------------------------------------------------
  14. Privacy page
   ------------------------------------------------------------------ */
.policy-card {
    background: var(--chgj-dark-gray);
    border: 1px solid var(--chgj-red-dark);
    border-radius: 6px;
    padding: 2.5rem;
    box-shadow: 0 14px 34px var(--chgj-shadow);
    max-width: 900px;
    margin: 0 auto;
}
.policy-card h3 { margin: 2rem 0 .65rem; }
.policy-card h4 { margin: 1.35rem 0 .45rem; }
.policy-meta { color: var(--chgj-light-gray); margin-bottom: 1.35rem; }
.policy-contact {
    border-top: 1px solid var(--chgj-mid-gray);
    margin-top: 1.6rem;
    padding-top: 1.2rem;
}

/* ------------------------------------------------------------------
  15. Contact page
   ------------------------------------------------------------------ */
.contact-section {
    text-align: center;
    padding-top: 1rem;
}
.page-contact .entry-content > .section:first-child,
.page-id-7 .entry-content > .section:first-child {
    padding-top: 1rem !important;
}
.contact-card {
    max-width: 560px;
    margin: 0 auto;
    background: var(--chgj-dark-gray);
    border: 1px solid var(--chgj-red-dark);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    box-shadow: 0 14px 32px var(--chgj-shadow);
}
.contact-card strong { color: var(--chgj-red-bright); }
.contact-card .role {
    color: var(--chgj-light-gray);
    font-size: .82rem;
    margin-bottom: .25rem;
}
.contact-card .poweredby {
    font-size: .72rem;
    color: var(--chgj-light-gray);
    margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------
  16. Members dashboard
   ------------------------------------------------------------------ */
.member-dashboard {
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 2.5rem;
}
.member-dashboard-hero {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: flex-end;
    background: var(--chgj-mid-gray);
    border: 1px solid var(--chgj-red-dark);
    border-radius: 8px;
    padding: 1.75rem 2rem;
    margin-bottom: 2.5rem;
}
.member-dashboard-hero h1 { margin: .2rem 0 .5rem; }
.member-dashboard-hero p {
    color: var(--chgj-light-gray);
    max-width: 720px;
}
.member-kicker {
    color: var(--chgj-red-bright);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin: 0;
    text-transform: uppercase;
}
.member-dashboard-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.member-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.member-panel {
    background: var(--chgj-mid-gray);
    border: 1px solid var(--chgj-red-dark);
    border-radius: 6px;
    padding: 1.4rem;
}
.member-panel h2 {
    margin: 0 0 .75rem;
    font-size: 1.25rem;
}
.member-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.member-link-list a {
    border: 1px solid #333;
    border-radius: 4px;
    color: var(--chgj-off-white);
    padding: .55rem .75rem;
}
.member-link-list a:hover {
    border-color: var(--chgj-red);
    color: var(--chgj-white);
    text-decoration: none;
}
.member-video-panel { margin-bottom: 1rem; }
.member-section-title {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}
.member-section-title h2 { margin: .15rem 0 0; }
.member-section-title > p {
    color: var(--chgj-light-gray);
    margin: 0;
}
.member-video-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1rem;
}
.member-filter {
    background: #101010;
    border: 1px solid #333;
    border-radius: 4px;
    color: var(--chgj-off-white);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    padding: .5rem .7rem;
}
.member-filter.active,
.member-filter:hover {
    background: var(--chgj-red);
    border-color: var(--chgj-red);
    color: var(--chgj-white);
}
.member-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.member-video-card {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    overflow: hidden;
}
.member-video-card[hidden] { display: none; }
.member-video-thumb {
    aspect-ratio: 16 / 9;
    background: #050505;
    display: block;
    overflow: hidden;
    position: relative;
}
.member-video-thumb img {
    height: 100%;
    margin: 0;
    object-fit: cover;
    width: 100%;
}
.member-play {
    align-items: center;
    background: rgba(204, 0, 0, .92);
    border-radius: 999px;
    color: #fff;
    display: flex;
    font-size: .75rem;
    font-weight: 800;
    height: 46px;
    justify-content: center;
    left: 50%;
    letter-spacing: .08em;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
}
.member-video-body { padding: .95rem; }
.member-video-meta {
    color: var(--chgj-red-bright);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    margin: 0 0 .35rem;
    text-transform: uppercase;
}
.member-video-body h3 {
    font-size: 1rem;
    margin: 0 0 .35rem;
}
.member-video-body p {
    color: var(--chgj-light-gray);
    font-size: .88rem;
    line-height: 1.45;
    margin-bottom: 0;
}
.chgj-member-notice { text-align: center; }
@media (max-width: 820px) {
    .member-dashboard-hero,
    .member-section-title {
        align-items: flex-start;
        flex-direction: column;
    }
    .member-dashboard-actions { justify-content: flex-start; }
    .member-dashboard-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
  17. Utility classes (used by migrated raw HTML)
   ------------------------------------------------------------------ */
.center { text-align: center; }
.muted  { color: var(--chgj-light-gray); }
.no-max { max-width: none; padding-left: 2rem; padding-right: 2rem; }

/* Reveal-on-scroll support was tied to original site JS, removed during
   migration; re-enable via a one-liner IntersectionObserver if desired. */

.chgj-instructor-grid .instructor-card {
    display: flex;
    flex-direction: column;
}
.chgj-instructor-grid .instructor-photo-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}
.chgj-instructor-grid .instructor-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.member-video-grid .member-video-body h3,
.chgj-hub-grid .member-video-body {
    text-align: center;
}
section.member-panel ul li {
    margin-bottom: 0.85rem;
    line-height: 1.5;
}
.principles-logo {
display: block;
max-width: 220px;
width: 100%;
height: auto;
margin: 0 auto 1.5rem;
}
.principles-symbol {
display: block;
max-width: 150px;
width: 100%;
height: auto;
margin: 1.25rem auto;
}
.history-portrait-centered {
display: block;
max-width: 320px;
width: 100%;
height: auto;
margin: 0 auto 1.5rem;
}
.entry-content .principles-logo,
.entry-content .principles-symbol,
.entry-content .history-portrait-centered {
margin-left: auto;
margin-right: auto;
}