/* =============================================================
   Friendly Eagle Kyokushin Karate - home page stylesheet
   Rebuilt for modern browsers (evergreen + IE11 graceful degrade).
   Dark page background, red title, orange section headers preserved.
   ============================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --fek-bg-page:        #000000;
    --fek-bg-container:   rgba(17, 17, 17, 0.92);
    --fek-text:           #c9c9c9;
    --fek-text-dim:       #8a8a8a;
    --fek-link:           #00A6FC;
    --fek-link-hover:     #58c7ff;
    --fek-title:          #e00000;
    --fek-title-shadow:   #4f4f4f;
    --fek-accent:         #FF7400;
    --fek-accent-schedule:#00A6FC;
    --fek-danger:         #ff4e4e;
    --fek-dates-alt:      #e17eec;
    --fek-border:         #222;
    --fek-radius:         6px;
    --fek-shadow:         0 4px 12px rgba(0, 0, 0, 0.55);
}

html, body, form {
    margin: 0;
    padding: 0;
    width: 100%;
    border-width: 0;
}

/* Prevent any element from pushing the viewport wider than the screen
   (e.g. a long unbroken URL, a wide slider, or an over-wide image). */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

img { max-width: 100%; height: auto; }
/* Wrap long words / URLs inside flowing prose so they can't force overflow. */
p, li, address, blockquote, .schedule-contact, .location-addr {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

body {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--fek-text);
    /* Fallback (JPEG) for older browsers, then WebP via image-set() for modern ones. */
    background: var(--fek-bg-page) url("../images/bg5.jpg?x2") no-repeat fixed center top;
    background-image: image-set(
        url("../images/bg5.webp?x2") type("image/webp"),
        url("../images/bg5.jpg?x2")  type("image/jpeg")
    );
    background-size: cover;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--fek-link);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover, a:focus {
    color: var(--fek-link-hover);
    text-decoration: underline;
    outline: none;
}
a:focus-visible {
    outline: 2px solid var(--fek-link-hover);
    outline-offset: 2px;
}

p { margin: 0 0 1em; }
strong, b { color: #e8e8e8; }

/* -------- Skip link (accessibility) -------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 14px;
    z-index: 100000;
    border-radius: 0 0 var(--fek-radius) 0;
}
.skip-link:focus {
    top: 0;
    text-decoration: underline;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------- Container -------- */
.container {
    max-width: 62em;
    margin: 1em auto 0;
    padding: 0;
    position: relative;
    clear: both;
    background-color: var(--fek-bg-container);
}

.imgshading,
.imgshading3 {
    box-shadow: var(--fek-shadow);
}

.roundBorder3 { border-radius: 3px; }
.roundBorder5 { border-radius: 5px; }
.roundBorder7 { border-radius: 7px; }

/* -------- Header -------- */
#header {
    position: relative;
    z-index: 1;
    padding: 1em 1em 0.5em;
}

#topImgLeft,
#topImgRight {
    position: absolute;
    display: block;
}

#topImgLeft {
    background: url("../images/kanji_blue_72s.png") no-repeat 0 0 transparent;
    background-image: image-set(
        url("../images/kanji_blue_72s.webp") type("image/webp"),
        url("../images/kanji_blue_72s.png")  type("image/png")
    );
    background-size: contain;
    left: 0.6em;
    top: 0.6em;
    width: 5em;
    height: 8em;
    z-index: 5;
    pointer-events: none;
}

#topImgRight {
    background: url("../images/logo/IKOWorldKyokushin.jpg") no-repeat 0 0 transparent;
    background-image: image-set(
        url("../images/logo/IKOWorldKyokushin.webp") type("image/webp"),
        url("../images/logo/IKOWorldKyokushin.jpg")  type("image/jpeg")
    );
    background-size: contain;
    right: 0.4em;
    top: 0.4em;
    width: 22em;
    height: 3.4em;
    z-index: 4;
}

.topImgRightLink {
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 22em;
    height: 3.4em;
    z-index: 4;
}

#titleWrap {
    padding: 0 10px 0 6.2em;      /* leave room for the kanji on the left */
    min-height: 6em;
}

.title-row {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
}

.title-logo {
    width: 5em;
    height: auto;
    flex: 0 0 auto;
    border-radius: 3px;
}

.title-text { flex: 1 1 auto; min-width: 0; }

/* Both lines of the school name live inside a single <h1> as two display:block
   spans, so search engines see one keyword-rich h1 ("Friendly Eagle Kyokushin
   Karate School") while users see the same two-line layout the previous
   h1 + p#headerSubTitle markup produced. The h1 itself is reset to 1em so
   the user-agent default (typically 2em) doesn't compound the spans' em
   sizes; each span then sets its own font-size in body-relative em values
   that match the live site exactly (1.8em / 1.3em on desktop). */
h1#headerTitle {
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-stretch: expanded;
    color: var(--fek-title);
    text-shadow: 1px 1px var(--fek-title-shadow);
    margin: 0;
    font-size: 1em;
    line-height: 1.1;
    letter-spacing: 0.02em;
}
h1#headerTitle .title-quote,
h1#headerTitle .title-rest {
    display: block;
    font-weight: 700;
}
h1#headerTitle .title-quote { font-size: 1.8em; }
h1#headerTitle .title-rest  { font-size: 1.3em; padding-left: 0; }

.powered-line {
    margin: 0.2em 0 0;
    font-size: 0.9em;
}

.aFES,
.aFES:link, .aFES:visited, .aFES:active, .aFES:hover,
.aFES * {
    font-style: italic;
    color: var(--fek-text-dim) !important;
}

.POWEREDBY { text-decoration: none; }
.POWEREDBY:hover {
    color: #cccccc !important;
    background: #000;
}

/* Title divider — CSS-only "fire" strip with irregular flame tongues
   + rising sparks. No JS, no images.

   Two layers stacked bottom-to-top:

     1) .title-divider i::before — the IRREGULAR FLAME TONGUES.
        Each of the cells paints an organic blob via asymmetric
        border-radius (mostly-rounded top, flat bottom), filled with a
        vertical color gradient. mix-blend-mode: screen makes
        neighbouring tongues add brightness where they overlap, so the
        boundary between cells dissolves and the tongues read as
        ripples/peaks of one continuous fire. Each cell gets a slightly
        different border-radius and timing, so silhouettes never repeat.
        Selected cells (every 4n+1 + 7n+3 + 11n+5) run a `flame-tall`
        keyframe instead of the gentle `flame-wave` — that's where the
        occasional tall tips spike up from random positions.

     2) .title-divider b — SPARK embers (8 styled positions; see
        :nth-of-type(1..8) below) that rise up to ~6em, drift
        horizontally, shrink, and fade. Staggered delays + durations so
        the bursts feel occasional, not periodic.

   ─────────────────────────────────────────────────────────────────────
   FLAME TONGUE / SPARK COUNTS — single source of truth
   ─────────────────────────────────────────────────────────────────────
   The <i></i> tongues and <b></b> sparks under .title-divider are
   generated by JavaScript at runtime. The element counts are defined
   in home.html, in the inline <script> at the top of <head>:

       var FEK_FLAME_COUNT = 420;
       var FEK_SPARK_COUNT = 12;

   Edit those two constants to change how dense the fire effect is.
   The <div class="title-divider"> in home.html stays empty in
   markup; the inline init script populates it after Splide mounts
   so the slider gets a clean compositor frame on first paint.        */

.title-divider {
    margin: 0 0 0.6em;
    padding: 0;
    border: 0;
    height: 26px;
    display: flex;
    align-items: flex-end;
    background: transparent;
    pointer-events: none;
    position: relative;
    isolation: isolate;
    /* let sparks rise above; keep flames clipped on left/right. */
    overflow-x: clip;
    overflow-y: visible;
}

/* ---- 1. IRREGULAR FLAME TONGUES -------------------------------------- */
.title-divider i {
    flex: 1 1 0;
    position: relative;
    height: 100%;
    min-width: 0;
    z-index: 2;
}
.title-divider i::before {
    content: "";
    position: absolute;
    left: -40%;
    right: -40%;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top,
        rgba(255, 240, 180, 0.7) 0%,
        #ffd24a 18%,
        #ff8c1a 45%,
        #ff3a0c 75%,
        rgba(160, 6, 0, 0.35) 94%,
        rgba(40, 0, 0, 0) 100%);
    /* default blob: rounded top, flat bottom — subtly asymmetric. */
    border-radius: 48% 52% 0 0 / 95% 100% 0 0;
    transform-origin: 50% 100%;
    transform: scaleY(0.118);
    mix-blend-mode: screen;
    filter: blur(0.6px);
    will-change: transform, border-radius, opacity;
    animation: flame-wave 1.6s ease-in-out infinite alternate;
}

/* Per-cell SHAPE variants — each flame gets a different asymmetric
   border-radius so silhouettes look organically different. The `/`
   syntax separates horizontal radii from vertical radii, so we can lean
   the curve left or right and adjust shoulder height per cell. */
.title-divider i:nth-child(7n+1)::before { border-radius: 38% 62% 0 0 / 90% 100%  0 0; }
.title-divider i:nth-child(7n+2)::before { border-radius: 60% 40% 0 0 / 100% 85%  0 0; }
.title-divider i:nth-child(7n+3)::before { border-radius: 30% 70% 0 0 / 100% 90%  0 0; }
.title-divider i:nth-child(7n+4)::before { border-radius: 65% 35% 0 0 / 85%  100% 0 0; }
.title-divider i:nth-child(7n+5)::before { border-radius: 45% 55% 0 0 / 100% 95%  0 0; }
.title-divider i:nth-child(7n+6)::before { border-radius: 55% 45% 0 0 / 95%  100% 0 0; }
.title-divider i:nth-child(7n)  ::before { border-radius: 50% 50% 0 0 / 100% 90%  0 0; }

/* Per-cell TIMING variants — coprime primes so adjacent cells never
   share a phase. */
.title-divider i:nth-child(2n)::before  { animation-duration: 1.25s; animation-delay: -0.30s; }
.title-divider i:nth-child(3n)::before  { animation-duration: 1.85s; animation-delay: -0.62s; }
.title-divider i:nth-child(5n)::before  { animation-duration: 1.05s; animation-delay: -0.48s; }
.title-divider i:nth-child(7n)::before  { animation-duration: 2.20s; animation-delay: -1.12s; }
.title-divider i:nth-child(11n)::before { animation-duration: 1.45s; animation-delay: -0.18s; }
.title-divider i:nth-child(13n)::before { animation-duration: 1.65s; animation-delay: -0.85s; }
.title-divider i:nth-child(17n)::before { animation-duration: 0.95s; animation-delay: -0.55s; }
.title-divider i:nth-child(19n)::before { animation-duration: 2.05s; animation-delay: -1.40s; }

/* Selected cells get the `flame-tall` keyframe instead of `flame-wave`,
   which has a brief, dramatic tip-spike inside its cycle. The choice of
   nth-child selectors spreads the eligible cells across the strip
   (cells 1, 5, 9, 13, 17, 21 + 3, 10, 17 + 5, 16) so tall peaks rise
   from many positions, not just one column. */
.title-divider i:nth-child(4n+1)::before  { animation-name: flame-tall; animation-duration: 3.4s; }
.title-divider i:nth-child(7n+3)::before  { animation-name: flame-tall; animation-duration: 4.1s; animation-delay: -1.6s; }
.title-divider i:nth-child(11n+5)::before { animation-name: flame-tall; animation-duration: 3.7s; animation-delay: -2.3s; }

@keyframes flame-wave {
    /* Gentle waving tongue, stays close to the base — also morphs the
       border-radius so each flame's silhouette undulates. All Y-scales
       increased 25% from the previous version. */
    0%   { transform: scale(0.9, 0.094);  opacity: 0.55;
           border-radius: 45% 55% 0 0 / 88% 100% 0 0; }
    35%  { transform: scale(1.02, 0.200); opacity: 0.95;
           border-radius: 55% 45% 0 0 / 100% 90% 0 0; }
    70%  { transform: scale(0.95, 0.153); opacity: 0.85;
           border-radius: 40% 60% 0 0 / 95% 95% 0 0; }
    100% { transform: scale(1.0, 0.211);  opacity: 1;
           border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
}
@keyframes flame-tall {
    /* Spends most of the cycle low (so the tall spike is *occasional*),
       with a brief 25-50% window where the tongue stretches up to ~0.410×
       the divider height (increased 25% from 0.328×). */
    0%   { transform: scale(0.9, 0.118);  opacity: 0.55;
           border-radius: 45% 55% 0 0 / 90% 100% 0 0; }
    20%  { transform: scale(1.0, 0.200);  opacity: 0.85;
           border-radius: 55% 45% 0 0 / 100% 90% 0 0; }
    35%  { transform: scale(0.92, 0.353); opacity: 1;
           border-radius: 35% 65% 0 0 / 100% 100% 0 0; }
    45%  { transform: scale(0.85, 0.410); opacity: 1;
           border-radius: 30% 70% 0 0 / 100% 95% 0 0; }
    55%  { transform: scale(0.9, 0.316);  opacity: 0.92;
           border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
    70%  { transform: scale(0.95, 0.200); opacity: 0.85;
           border-radius: 60% 40% 0 0 / 100% 90% 0 0; }
    100% { transform: scale(0.9, 0.118);  opacity: 0.6;
           border-radius: 45% 55% 0 0 / 90% 100% 0 0; }
}

/* ---- 2. SPARKS ------------------------------------------------------- */
.title-divider b {
    position: absolute;
    bottom: 2px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle,
        #fffbd4 0%,
        #ffce5e 35%,
        rgba(255, 140, 30, 0.7) 70%,
        rgba(255, 60, 30, 0) 100%);
    box-shadow: 0 0 4px 1px rgba(255, 200, 80, 0.55);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    animation: spark-rise 4.8s linear infinite;
    z-index: 3;
}
.title-divider b:nth-of-type(1) { left:  6%; animation-duration: 4.6s; animation-delay: -0.5s; }
.title-divider b:nth-of-type(2) { left: 17%; animation-duration: 5.4s; animation-delay: -2.8s; }
.title-divider b:nth-of-type(3) { left: 28%; animation-duration: 3.8s; animation-delay: -1.0s; }
.title-divider b:nth-of-type(4) { left: 41%; animation-duration: 5.0s; animation-delay: -3.5s; }
.title-divider b:nth-of-type(5) { left: 54%; animation-duration: 4.2s; animation-delay: -0.7s; }
.title-divider b:nth-of-type(6) { left: 66%; animation-duration: 5.7s; animation-delay: -4.2s; }
.title-divider b:nth-of-type(7) { left: 79%; animation-duration: 3.5s; animation-delay: -1.9s; }
.title-divider b:nth-of-type(8) { left: 91%; animation-duration: 4.9s; animation-delay: -3.1s; }

@keyframes spark-rise {
    /* Spark is dark for ~60% of the cycle (occasional), then briefly
       lights up and drifts up to ~6em over ~40% of the cycle. */
    0%, 60%, 100% { opacity: 0; transform: translate(0, 0) scale(0.4); }
    62%  { opacity: 1;    transform: translate(0.05em, -0.4em) scale(1); }
    72%  { opacity: 0.85; transform: translate(-0.22em, -2.0em) scale(0.85); }
    82%  { opacity: 0.55; transform: translate(0.18em, -3.8em) scale(0.6); }
    92%  { opacity: 0.18; transform: translate(-0.14em, -5.4em) scale(0.4); }
    98%  { opacity: 0;    transform: translate(0.08em, -6em) scale(0.25); }
}

/* -------- First-paint perf: flames paused until Splide mounts --------
   With 320 <i>::before tongues + 8 <b> sparks all running keyframe
   animations and `mix-blend-mode: screen`, the compositor is fully
   saturated on first paint — exactly when Splide is trying to mount
   the slider. That contention shows up as a ~1s black slider on
   first load. We start every flame and spark animation paused; the
   inline init script in home.html flips the `.flames-on` class on
   the divider after Splide has finished its `mounted` event,
   handing the compositor over to the slider for its initial paint
   and only then lighting up the fire. The negative animation-delays
   that stagger the flames are preserved because pausing freezes the
   animation at its computed time-offset, so the moment we unpause
   the cycle picks up from the staggered position rather than from 0. */
.title-divider i::before,
.title-divider b {
    animation-play-state: paused;
}
.title-divider.flames-on i::before,
.title-divider.flames-on b {
    animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
    .title-divider i::before,
    .title-divider b { animation: none; }
    .title-divider b { display: none; }
}

.title-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6em;
    padding: 0 0.3em;
}

.social-fb img {
    display: block;
    width: 2.5em;
    height: auto;
}

.instructor-line {
    margin: 0;
    font-size: 1.05em;
    color: #d0d0d0;
}

/* -------- Main content -------- */
.main-content {
    padding: 0 1.2em 0.1em 0;
    margin-top: 1em;
}

/* -------- Schedule -------- */
.schedule-section { margin-bottom: 1em; }

.schedule-grid {
    display: grid;
    /* Bias columns so the schedule (right) gets enough room to keep each
       row's three spans on a single line down to ~870 px viewports.
       Left card hugs its short address; right card gets the breathing room. */
    grid-template-columns: minmax(13em, 1fr) minmax(28em, 2.5fr);
    gap: 0.3em 1.2em;
    align-items: stretch;
}

.schedule-col-title {
    font-size: 1.1em;
    padding: 0 0 0.3em 0.5em;
}

.topLabel {
    color: #9da1a5;
    font-weight: 700;
}

.topLabel .note {
    font-weight: 400;
    font-style: italic;
    color: inherit;
    font-size: 0.9em;
}

.location-card {
    padding: 1.2em 1em;
    line-height: 1.35;
    border-radius: var(--fek-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 6em;
    /* 1px transparent border reserved so the hover border doesn't shift layout */
    border: 1px solid transparent;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.location-card:hover,
.location-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--fek-accent-schedule);
    box-shadow: 0 4px 14px rgba(0, 166, 252, 0.18);
}

.location-title {
    font-weight: 700;
    color: var(--fek-accent-schedule);
    margin-bottom: 0.3em;
    letter-spacing: 0.03em;
}

.location-addr {
    font-style: normal;
    color: #eee;
}

.LEFTRIGHTBLKRED {
    background: linear-gradient(to right, rgba(16,16,16,0) 0%, #660101 100%);
}

.schedule-card {
    padding: 0.6em 0.8em;
    line-height: 1.35;
    border-radius: var(--fek-radius);
    /* 1px transparent border reserved so the hover border doesn't shift layout */
    border: 1px solid transparent;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.schedule-card:hover,
.schedule-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--fek-accent);
    box-shadow: 0 4px 14px rgba(255, 116, 0, 0.18);
}

.schedule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2em 0.8em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.schedule-day {
    /* Was 11em; tightened so the row's three spans fit together on a single
       line at narrower desktop widths. The non-breaking space inside
       "Wed&nbsp; 6:15 - 7:15 PM" still keeps the day+time visually grouped. */
    min-width: 9em;
    font-size: 1.05em;
    color: #eaeaea;
    white-space: nowrap;
}

.SCHEDULEDATES {
    color: #ddd;
    background-color: #0f1bd3;
    padding: 2px 6px;
    text-align: center;
    font-size: 0.95em;
    font-style: italic;
    font-weight: 400;
    border-radius: 4px;
}

.SCHEDULESPECIALDATES,
.SCHEDULESPECIALDATES2 {
    color: var(--fek-danger);
    padding: 0;
    text-align: left;
    font-size: 0.95em;
    font-style: italic;
    font-weight: 400;
    /* Keep each span (date range / age group) intact on one line. The parent
       .schedule-row still flex-wraps, so on very narrow viewports the spans
       still stack vertically rather than breaking mid-text. */
    white-space: nowrap;
}

.SCHEDULESPECIALDATES2 {
    color: var(--fek-dates-alt);
}

.schedule-contact {
    margin: 0.8em 0 0;
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1.4;
    color: #c0c0c0;
}

/* -------- Slider container (Splide v4) -------- */
.slider-container,
#sliderContainer {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 1em auto;
    background: #191919;
    overflow: hidden;
    border-radius: var(--fek-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    /* Two-row layout: main slide on top, thumbnail strip on the bottom.
       The thumbnail rail is hidden < 860 px via the responsive block below. */
    display: flex;
    flex-direction: column;
}

#mainSplide {
    width: 100%;
    /* Splide's heightRatio (set in init) drives the height; we only need
       a black backdrop and a sane min-height before initialisation. */
    background: #000;
}

#mainSplide .splide__slide {
    background: #000;
}

/* Fit the entire slide image inside the slide box without cropping. The
   slide box has been shortened (heightRatio in home.html was reduced by 20%
   from the original 3:2), so the box is now wider than the 3:2 image; with
   object-fit: contain the full image is shown and any leftover space on
   the sides falls back to the slide's black background. */
#mainSplide .splide__slide picture {
    display: block;
    width: 100%;
    height: 100%;
}
#mainSplide .splide__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Splide's default arrows are dark/light gradient icons; match the dark theme.
   Idle: dark translucent circle, white chevron. Hover: dark-gray fill,
   orange chevron — all eased so the state changes animate smoothly.
   Sized 15% larger than the previous 2.4em (-> 2.76em) for better tap/click
   targets, with the chevron scaled proportionally (1.2em -> 1.38em). */
#mainSplide .splide__arrow {
    background: rgba(0, 0, 0, 0.55);
    width: 2.76em;
    height: 2.76em;
    opacity: 0.9;
    transition: opacity 350ms ease, background-color 220ms ease;
}
#mainSplide .splide__arrow svg {
    width: 1.38em;
    height: 1.38em;
    fill: #fff;
    transition: fill 220ms ease;
}
#mainSplide .splide__arrow:hover:not(:disabled) {
    background-color: #2a2a2a;       /* dark gray on hover */
    opacity: 1;
}
#mainSplide .splide__arrow:hover:not(:disabled) svg {
    fill: var(--fek-accent);          /* Friendly Eagle orange chevron */
}
#mainSplide .splide__arrow:disabled { opacity: 0.35; }

/* -------- Thumbnail strip -------- */
#thumbsSplide.slider-thumbs {
    margin-top: 6px;
    padding: 0 4px 6px;
    background: transparent;
}

#thumbsSplide .splide__slide {
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 180ms ease, transform 180ms ease;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
}
#thumbsSplide .splide__slide.is-active {
    opacity: 1;
    border-color: var(--fek-accent);
}
#thumbsSplide .splide__slide:hover { opacity: 0.9; }

#thumbsSplide .splide__slide img {
    display: block;
    width: 99px;
    height: 66px;
    object-fit: cover;
}

/* -------- Sections -------- */
.section {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 2em;
    padding-top: 0.5em;
    border-top: 1px solid #1a1a1a;
}

.section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.sectionTitle,
.sectionTitle:hover {
    display: block;
    color: var(--fek-accent);
    font-weight: 700;
    font-size: 1.35em;
    margin: 0 0 0.6em;
    letter-spacing: 0.03em;
    text-decoration: none;
}

/* -------- Section paragraphs --------
   Each direct <p> in a .section gets a discrete dark-gray panel and a
   periodic diagonal "reflection" sweep, plus a quicker / brighter sweep on
   hover or tap. Blockquote paragraphs are excluded (they keep the orange
   quote-block treatment defined further below). */
.section > p {
    position: relative;
    overflow: hidden;
    margin: 0.6em 0;
    padding: 0.75em 0.95em;
    background-color: #181818;
    border: 1px solid #232323;
    border-radius: var(--fek-radius);
    /* box-shadow + border-color use a longer ease-out so when :active is
       released, the click glow dissipates smoothly back to neutral. */
    transition: background-color 240ms ease,
                border-color     650ms ease-out,
                box-shadow       800ms ease-out,
                transform        240ms ease;
}

/* The shine is a thin diagonal highlight that we slide across the panel via
   a pseudo-element. Sits idle most of the cycle, then sweeps once. */
.section > p::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.06) 48%,
        rgba(255, 255, 255, 0.11) 50%,
        rgba(255, 255, 255, 0.06) 52%,
        transparent 70%
    );
    transform: translateX(-130%);
    animation: fek-p-shine 14s ease-in-out infinite;
    will-change: transform;
}

/* Stagger the sweep across consecutive paragraphs so the page doesn't all
   flash at once - five offset buckets spread across the 14 s loop. */
.section > p:nth-of-type(5n+1)::before { animation-delay: 0s;    }
.section > p:nth-of-type(5n+2)::before { animation-delay: 2.8s;  }
.section > p:nth-of-type(5n+3)::before { animation-delay: 5.6s;  }
.section > p:nth-of-type(5n+4)::before { animation-delay: 8.4s;  }
.section > p:nth-of-type(5n+5)::before { animation-delay: 11.2s; }

/* Hover / tap: lift the panel slightly, brighten the bg, and run a quicker,
   brighter shine. :focus-within picks up keyboard focus on inner links;
   :active gives the immediate tap feedback on touch devices. */
.section > p:hover,
.section > p:focus-within,
.section > p:active {
    background-color: #1f1f1f;
    border-color: #2f2f2f;
    transform: translateY(-1px);
}

.section > p:hover::before,
.section > p:focus-within::before,
.section > p:active::before {
    background: linear-gradient(
        115deg,
        transparent 25%,
        rgba(255, 255, 255, 0.10) 45%,
        rgba(255, 255, 255, 0.20) 50%,
        rgba(255, 255, 255, 0.10) 55%,
        transparent 75%
    );
    animation: fek-p-shine-quick 1500ms ease-out;
    animation-iteration-count: 1;
}

/* Click / tap: tiny accent border + a discrete orange glow that dissipates
   when the press is released. Because box-shadow + border-color are on a
   long ease-out transition (above), letting go fades the glow smoothly. */
.section > p:active {
    border-color: rgba(255, 116, 0, 0.65);
    box-shadow: 0 0 0 1px rgba(255, 116, 0, 0.35),
                0 0 22px 2px rgba(255, 116, 0, 0.28);
    /* Override transitions on the way IN so the glow appears nearly instantly,
       then the default (longer) transitions take over on the way OUT. */
    transition: background-color 120ms ease,
                border-color     80ms ease-in,
                box-shadow       80ms ease-in,
                transform        120ms ease;
}

@keyframes fek-p-shine {
    /* Sweep occurs during the first ~14% of the 14 s cycle (~2 s),
       then the highlight rests off-screen until the next loop. */
    0%   { transform: translateX(-130%); }
    14%  { transform: translateX(130%);  }
    100% { transform: translateX(130%);  }
}

@keyframes fek-p-shine-quick {
    0%   { transform: translateX(-130%); }
    100% { transform: translateX(130%);  }
}

.egps-bullets {
    list-style-type: disc;
    padding-left: 1.4em;
    /* Indent the whole list ~2em further right than the surrounding text. */
    margin: 0.5em 0 1em 3em;
}
.egps-bullets li {
    margin: 0.35em 0;
    color: #cfcfcf;
}
/* Bullet marker turns orange on hover (text color unchanged). ::marker
   accepts color (and a few font properties). Transition support on
   ::marker is partial across browsers, so the color flip is treated as
   a graceful instant change where transitions aren't supported. */
.egps-bullets li::marker {
    color: inherit;
    transition: color 180ms ease;
}
.egps-bullets li:hover::marker {
    color: var(--fek-accent);
}

/* -------- Quotes -------- */
.quote-block {
    margin: 1em 0;
    padding: 0.8em 1em;
    border-left: 3px solid var(--fek-accent);
    background: rgba(255, 116, 0, 0.06);
    border-radius: 0 var(--fek-radius) var(--fek-radius) 0;
}
.quote-block p {
    margin: 0 0 0.3em;
    font-style: italic;
    color: #e0e0e0;
}
.quote-block footer {
    text-align: right;
    font-style: italic;
    color: var(--fek-text-dim);
    font-size: 0.95em;
}

/* -------- Footer -------- */
.site-footer {
    border-top: 1px solid #202020;
    margin: 1.5em 1.2em 0;
    padding: 0.8em 0;
    text-align: center;
    color: var(--fek-text-dim);
    font-size: 0.88em;
    font-style: italic;
}
.site-footer p { margin: 0; }

#eagle_sep {
    background: url("../images/eagleFront4p2.png") repeat-x 0 0 transparent;
    background-image: image-set(
        url("../images/eagleFront4p2.webp") type("image/webp"),
        url("../images/eagleFront4p2.png")  type("image/png")
    );
    height: 20px;
    margin: 0 16px;
}

/* -------- Misc legacy utilities -------- */
.collapsedTable {
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    border-width: 0;
}

/* -------- Responsive -------- */
@media (max-width: 1000px) {
    .container { margin-top: 1.5em; }
    #titleWrap { padding-left: 5em; }
    #topImgRight,
    .topImgRightLink { width: 16em; height: 2.6em; }
}

@media (max-width: 860px) {
    body { font-size: 15px; }

    /* Edge-to-edge container on tablets/phones — inner elements provide their own padding. */
    .container {
        margin: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }

    /* Header stacks vertically on mobile:
       1) IKO banner (.topImgRightLink) at the very top
       2) #titleWrap, whose inner .title-row holds [kanji | text | logo] centered */
    #header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5em 0.8em 0.5em;
        min-height: 0;
    }

    .topImgRightLink {
        position: static;
        order: 1;
        display: block;
        width: min(20em, 96vw);
        height: 2.6em;
        margin: 0 auto 0.4em;
        top: auto; right: auto;
    }
    #topImgRight {
        position: static;
        display: block;
        width: 100%;
        height: 100%;
        top: auto; right: auto;
        background-position: center center;
    }

    #titleWrap {
        order: 2;
        padding: 0 0.3em;
        width: 100%;
        min-height: 0;
    }

    /* Put the kanji into the title-row flow (was absolutely positioned on desktop),
       keep it on the LEFT, title-logo on the RIGHT, title text in the middle.
       .title-row is already display:flex; align-items:center. */
    .title-row {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0.6em;
    }

    #topImgLeft {
        position: static;
        order: 1;
        width: 3.8em;
        height: 5em;
        margin: 0;
        flex: 0 0 auto;
        top: auto; left: auto;
    }
    .title-row .title-text { order: 2; min-width: 0; flex: 1 1 auto; }
    .title-row .title-logo { order: 3; flex: 0 0 auto; width: 4.2em; }

    /* "Powered by FRIENDLY EAGLE SOFTWARE Inc." slightly smaller on mobile. */
    .powered-line { font-size: 0.75em; }

    .main-content { padding: 0 0.8em 1em; }
    .schedule-col-title { padding-left: 0.2em; }
    .location-card { padding: 1em 0.8em; }
    .schedule-card  { padding: 0.6em 0.5em; }

    h1#headerTitle .title-quote { font-size: 1.55em; }
    h1#headerTitle .title-rest  { font-size: 1.15em; }

    .schedule-grid { grid-template-columns: 1fr; }

    /* When the grid collapses to a single column, the source order is
       [Location title, Schedule title, Location card, Schedule card], so
       the Schedule title would appear directly under the Location title -
       above the location card. Reorder so each title sits next to its own
       card: Location title, Location card, Schedule title, Schedule card. */
    .schedule-grid > :nth-child(1) { order: 1; }   /* Location: title  */
    .schedule-grid > :nth-child(3) { order: 2; }   /* Location card    */
    .schedule-grid > :nth-child(2) {
        order: 3;                                  /* Schedule title   */
        /* Visual breathing room between the location card and the
           Schedule title in single-column mode. */
        margin-top: 1.2em;
    }
    .schedule-grid > :nth-child(4) { order: 4; }   /* Schedule card    */

    /* -------- Slider on mobile --------
       Splide handles its own internal layout, transitions, and arrow
       positioning — we only size the outer container.  Splide's heightRatio
       breakpoint override (in home.html) gives the slide area its proper
       (already-shortened) aspect ratio. The thumb strip stays visible on
       mobile, same as desktop. */
    .slider-container,
    #sliderContainer,
    #mainSplide {
        width: 100%;
        max-width: 720px;
        margin: 0.6em auto;
    }
}

@media (max-width: 520px) {
    .main-content { padding: 0 0.6em 0.8em; }
    #header       { padding: 0.4em 0.6em 0.4em; }
    #titleWrap    { padding: 0 0.2em; }
    .title-meta   { padding: 0; }

    /* Tighter IKO banner + kanji + logo row on very narrow phones. */
    .topImgRightLink { height: 2.2em; width: min(18em, 94vw); }

    .title-row { gap: 0.4em; }
    #topImgLeft              { width: 3em;   height: 4em; }
    .title-row .title-logo   { width: 3em; }
    .title-row .title-text   { text-align: center; }

    .section { margin-bottom: 1.5em; }
    .sectionTitle { font-size: 1.2em; }
    h1#headerTitle .title-quote { font-size: 1.3em; }
    h1#headerTitle .title-rest  { font-size: 1em; }

    /* On the narrowest phones, keep both cards from bumping against the edge. */
    .location-card,
    .schedule-card {
        padding: 0.8em 0.6em;
    }
    .schedule-day { min-width: 0; }

    /* The eagle separator uses a repeated image; collapse its outer margins so
       the bottom of the page also extends edge-to-edge. */
    #eagle_sep   { margin: 0 6px; }
    .site-footer { margin: 1.5em 0.6em 0; }
}

/* -------- Really small screens --------
   On widths below 480 px (small phones, narrow desktop windows) wrap the title
   text onto a second row so the two icons (blue kanji + orange Friendly Eagle
   logo) sit alone, side-by-side, on the first row. The title block ("FRIENDLY
   EAGLE / KYOKUSHIN KARATE SCHOOL / Powered by...") then spans the full width
   of row two underneath them. */
@media (max-width: 480px) {
    .title-row {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        column-gap: 1em;
        row-gap: 0.3em;
    }
    .title-row #topImgLeft { order: 1; }
    .title-row .title-logo { order: 2; }
    .title-row .title-text {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        margin-top: 0.2em;
        text-align: center;
    }
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }

    /* Keep the border feedback on hover, but skip the lift (no motion). */
    .location-card:hover,
    .location-card:focus-within,
    .schedule-card:hover,
    .schedule-card:focus-within {
        transform: none;
    }
}

/* -------- Full-width site footer (modeled on the EAGLE GPS pattern,
   themed in the FEK dark + orange-accent palette). The element sits
   OUTSIDE the .container wrapper so it spans 100% of the viewport. */
.fek-footer {
    background-color: #171717;
    color: #b0b0b0;
    width: 100%;
    margin-top: 0;
    border-top: 0.5em solid #252525;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    line-height: 1.55;
}
.fek-footer-inner {
    max-width: 80%;
    margin: 0 auto;
    padding: 2.4em 1em 1.8em;
    display: flex;
    flex-wrap: wrap;
    gap: 2em 3em;
    justify-content: space-between;
    box-sizing: border-box;
}
.fek-footer-col {
    flex: 1 1 14em;
    min-width: 12em;
}
.fek-footer-brand-col { flex: 1.3 1 16em; }
.fek-footer-brand {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--fek-accent);
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}
.fek-footer-summary {
    font-size: 0.9em;
    color: #b0b0b0;
    line-height: 1.55;
    margin: 0 0 0.8em;
}
.fek-footer-tagline {
    font-size: 0.9em;
    color: #9a9a9a;
    line-height: 1.55;
    margin: 0 0 0.7em;
}
.fek-footer-addr {
    font-size: 0.9em;
    color: #9a9a9a;
    line-height: 1.6;
    font-style: normal;
    margin: 0 0 0.9em;
}
.fek-footer-col-title {
    font-size: 0.88em;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-bottom: 0.45em;
    margin: 0 0 0.8em;
    border-bottom: 1px solid rgba(255, 116, 0, 0.4);
}
.fek-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fek-footer-links li {
    margin-bottom: 0.5em;
    font-size: 0.92em;
    line-height: 1.4;
}
.fek-footer-links li.fek-footer-sep {
    height: 0;
    border-top: 1px solid #2a2a2a;
    margin: 0.7em 0 0.85em;
    padding: 0;
}
.fek-footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.15s ease;
}
.fek-footer-links a:hover,
.fek-footer-links a:focus-visible {
    color: var(--fek-accent);
    text-decoration: underline;
}
.fek-footer-contact {
    font-size: 0.92em;
    color: #b0b0b0;
    line-height: 1.65;
    margin: 0 0 0.7em;
}
.fek-footer-contact a {
    color: var(--fek-link);
    text-decoration: none;
}
.fek-footer-contact a:hover,
.fek-footer-contact a:focus-visible {
    color: var(--fek-link-hover);
    text-decoration: underline;
}
.fek-footer-quote {
    font-style: italic;
    color: #c0c0c0;
}
.fek-footer-venue {
    font-weight: 700;
    color: #c8c8c8;
    letter-spacing: 0.04em;
}
.fek-footer-fb {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.3em;
    color: #b0b0b0;
    text-decoration: none;
    font-size: 0.92em;
    line-height: 1;
    transition: color 0.15s ease;
}
.fek-footer-fb img {
    width: auto !important;
    height: 1.4em !important;
    display: block;
    border: 0;
}
.fek-footer-fb:hover,
.fek-footer-fb:focus-visible {
    color: var(--fek-accent);
}
.fek-footer-bottom {
    background-color: #000;
    text-align: center;
    font-size: 0.82em;
    color: #707070;
    padding: 0.9em 1em;
    border-top: 1px solid #1a1a1a;
}
.fek-footer-bottom p { margin: 0; }
@media (max-width: 720px) {
    .fek-footer-inner {
        max-width: 92%;
        flex-direction: column;
        gap: 1.6em;
        padding: 1.8em 1em 1.4em;
    }
    .fek-footer-col,
    .fek-footer-brand-col {
        flex: none;
        min-width: 0;
        width: 100%;
    }
}

/* -------- Print -------- */
@media print {
    body { background: #fff; color: #111; }
    .container { background: #fff; box-shadow: none; }
    a { color: #06c; text-decoration: underline; }
    #topImgLeft, #topImgRight, .topImgRightLink,
    .slider-container, #sliderContainer,
    .social-fb,
    .fek-footer-fb { display: none; }
    .section { border-top-color: #ccc; page-break-inside: avoid; }
    .sectionTitle { color: #000; }
    .fek-footer { background: #fff; color: #333; border-top: 1px solid #ccc; }
    .fek-footer-brand { color: #000; }
    .fek-footer-tagline,
    .fek-footer-addr,
    .fek-footer-contact { color: #333; }
    .fek-footer-col-title { color: #000; border-bottom-color: #ccc; }
    .fek-footer-links a,
    .fek-footer-contact a { color: #06c; }
    .fek-footer-bottom { background: #fff; color: #555; border-top: 1px solid #ccc; }
}

/* -------- Map button (bottom-right of the SUMMERSIDE location card)
   The base sizing/colors live in home.html's inline critical CSS so
   the icon never flashes huge before the async stylesheet arrives.
   This block layers on the print-hide rule. -------- */
@media print {
    .location-map-btn { display: none; }
}

/* -------- Map popup (native <dialog>) --------
   The dialog is positioned via the browser default (centered) and
   sized to a comfortable map viewport. Backdrop dims the page; the
   close (X) and zoom (+/-) controls float over the iframe. */
.fek-map-dialog {
    border: 0;
    padding: 0;
    background: #111;
    color: #eaeaea;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    width: min(92vw, 900px);
    max-width: 92vw;
    max-height: 88vh;
    overflow: hidden;
    /* Establish a positioning context for the absolutely-positioned
       close button + zoom controls. */
    position: fixed;
    inset: 0;
    margin: auto;
}
.fek-map-dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
}
.fek-map-iframe {
    display: block;
    width: 100%;
    height: min(70vh, 600px);
    border: 0;
    background: #1a1a1a;
}

/* Transparent shield over the iframe. Catches wheel events so the
   parent-page handler can map them to setZoom() — the embedded
   Google Maps iframe is cross-origin and otherwise eats the wheel
   gesture (and only zooms when Ctrl is held). The shield also
   absorbs clicks so a click on the map area doesn't bubble to the
   dialog backdrop and accidentally close the popup.
   Side effect: drag-to-pan inside the iframe is disabled. The
   trade-off is intentional — the user wants frictionless wheel
   zoom; if they need to pan, the +/- buttons together with
   reopening the dialog re-center on the dojo. */
.fek-map-shield {
    position: absolute;
    inset: 0;
    /* Below the close/zoom buttons (z-index: 2), above the iframe. */
    z-index: 1;
    background: transparent;
    cursor: default;
}

/* Close (X) button - top-right. */
.fek-map-close {
    position: absolute;
    top: 0.45em;
    right: 0.45em;
    width: 2.1em;
    height: 2.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: rgba(20, 20, 20, 0.78);
    color: #f3f3f3;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
}
.fek-map-close svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}
.fek-map-close:hover,
.fek-map-close:focus-visible {
    background: #2a2a2a;
    color: var(--fek-accent);
    border-color: var(--fek-accent);
    box-shadow: 0 0 0 3px rgba(255, 116, 0, 0.22);
    outline: none;
}

/* Zoom controls (+/-) - top-left, stacked vertically. */
.fek-map-zoom {
    position: absolute;
    left: 0.45em;
    width: 2.1em;
    height: 2.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: rgba(20, 20, 20, 0.78);
    color: #f3f3f3;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
}
.fek-map-zoom svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}
.fek-map-zoom-in  { top: 0.45em; }
.fek-map-zoom-out { top: calc(0.45em + 2.1em + 0.4em); } /* stack under +; .4em gap */
.fek-map-zoom:hover:not(:disabled),
.fek-map-zoom:focus-visible:not(:disabled) {
    background: #2a2a2a;
    color: var(--fek-accent);
    border-color: var(--fek-accent);
    box-shadow: 0 0 0 3px rgba(255, 116, 0, 0.22);
    outline: none;
}
.fek-map-zoom:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 520px) {
    .fek-map-iframe { height: 70vh; }
    .fek-map-close,
    .fek-map-zoom { width: 1.9em; height: 1.9em; }
    .fek-map-zoom-out { top: calc(0.45em + 1.9em + 0.4em); }
}

/* ===========================================================
   Primary navigation landmark.
   The single-page <nav class="fek-nav fek-nav-skip"> in the
   header gives search engines and assistive tech a real
   landmark + aria-current="page" without changing the
   visible layout. The nav is hidden visually but stays in
   the accessibility tree (clip-path + position so it doesn't
   take any layout space, but isn't display:none, which would
   pull it out of the AX tree entirely and lose SEO weight).
   When you want a visible jump-nav later, drop fek-nav-skip.
   =========================================================== */
.fek-nav-skip {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.fek-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
}
.fek-nav a {
    color: var(--fek-link);
    text-decoration: none;
    font-weight: 600;
}
.fek-nav a[aria-current="page"] {
    color: var(--fek-accent);
}
.fek-nav a:hover,
.fek-nav a:focus-visible {
    color: var(--fek-link-hover);
    text-decoration: underline;
}