/* ==========================================================================
 * Stormwake Records Shell — Frontend Skin
 * Light, clean label layout on top of GeneratePress
 * Palette: soft grey background, blue + green accents, no dark theme.
 * ========================================================================= */

/* Root + palette (scoped to Stormwake home via body class) */
body.stormwake-shell-home {
    /* Dark base */
    --swr-bg: #070a0f;            /* page background */
    --swr-bg-soft: #0b1118;       /* cards */
    --swr-bg-soft-alt: #0e1621;   /* strips / alt surfaces */
    --swr-border-subtle: rgba(255,255,255,.10);

    /* Text */
    --swr-ink: rgba(255,255,255,.92);
    --swr-ink-soft: rgba(255,255,255,.78);
    --swr-ink-muted: rgba(255,255,255,.62);

    /* Accents (blue + green) */
    --swr-accent-blue: #4da3ff;
    --swr-accent-blue-soft: rgba(77, 163, 255, 0.14);
    --swr-accent-green: #32d983;
    --swr-accent-green-soft: rgba(50, 217, 131, 0.14);

    /* Radii */
    --swr-radius-lg: 18px;
    --swr-radius-md: 12px;
    --swr-radius-sm: 8px;

    /* Shadows (dark) */
    --swr-shadow-soft: 0 18px 60px rgba(0,0,0,.55);
    --swr-shadow-subtle: 0 10px 30px rgba(0,0,0,.40);

    /* Spacing + font */
    --swr-spacing-xl: 56px;
    --swr-spacing-lg: 40px;
    --swr-spacing-md: 24px;
    --swr-spacing-sm: 14px;
    --swr-spacing-xs: 8px;
    --swr-font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                      Roboto, Helvetica, Arial, sans-serif;
}

/* Ensure GeneratePress content area plays nice */
body.stormwake-shell-home .stormwake-shell-primary {
    background: var(--swr-bg);
}

body.stormwake-shell-home .stormwake-shell-main {
    font-family: var(--swr-font-stack);
    padding: 24px 0 40px;
}

/* Outer wrap (max width, centered) */
body.stormwake-shell-home .stormwake-shell-wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Article container */
body.stormwake-shell-home .stormwake-shell-home-article {
    color: var(--swr-ink);
}

/* Reset default entry spacing from theme inside our layout */
body.stormwake-shell-home .stormwake-shell-home-article .inside-article {
    padding: 0;
    box-shadow: none;
    background: transparent;
}

/* ==========================================================================
 * HERO
 * ========================================================================== */

.swr-hero {
    margin-bottom: var(--swr-spacing-xl);
}

.swr-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 32px;
    background: var(--swr-bg-soft);
    border-radius: 28px;
    padding: 32px 32px 28px;
    box-shadow: var(--swr-shadow-soft);
    border: 1px solid var(--swr-border-subtle);
}

.swr-hero-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.swr-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--swr-ink-muted);
}

.swr-hero-label::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--swr-accent-blue), var(--swr-accent-green));
}

.swr-hero-title {
    font-size: clamp(32px, 4vw, 40px);
    line-height: 1.05;
    margin: 0;
    color: var(--swr-ink);
    letter-spacing: 0.02em;
}

.swr-hero-subtitle {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--swr-ink-soft);
}

.swr-hero-buttons {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Buttons */

.swr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease,
                transform 0.12s ease;
    cursor: pointer;
    white-space: nowrap;
}

.swr-btn-primary {
    background: var(--swr-accent-blue);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
}

.swr-btn-primary:hover,
.swr-btn-primary:focus-visible {
    background: #1d4ed8;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.24);
    transform: translateY(-1px);
    color: #ffffff;
}

.swr-btn-secondary {
    background: rgba(77, 163, 255, 0.12);
    color: var(--swr-ink);
    border-color: rgba(77, 163, 255, 0.22);
}

.swr-btn-secondary:hover,
.swr-btn-secondary:focus-visible {
    background: rgba(77, 163, 255, 0.18);
    border-color: rgba(77, 163, 255, 0.30);
}

.swr-btn-outline {
    background: transparent;
    border-color: var(--swr-accent-blue);
    color: var(--swr-accent-blue);
}

.swr-btn-outline:hover,
.swr-btn-outline:focus-visible {
    background: var(--swr-accent-blue-soft);
}

/* Hero note */
.swr-hero-note {
    margin-top: 10px;
    font-size: 13px;
    color: var(--swr-ink-muted);
}

/* Hero media (video) */

.swr-hero-media {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.swr-hero-video-placeholder {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swr-hero-video-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--swr-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.swr-hero-video-box {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    border-radius: var(--swr-radius-lg);
        background: radial-gradient(900px 420px at 20% 10%, rgba(77,163,255,.22), transparent 55%),
                radial-gradient(700px 420px at 80% 20%, rgba(50,217,131,.16), transparent 55%),
                linear-gradient(180deg, #0b1118, #070a0f);
    box-shadow: var(--swr-shadow-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swr-hero-video-box span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--swr-ink-soft);
    backdrop-filter: blur(3px);
}

/* ==========================================================================
 * LATEST RELEASE STRIP
 * ========================================================================== */

.swr-strip {
    margin-bottom: var(--swr-spacing-xl);
}

.swr-strip-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1.8fr);
    gap: 20px;
    align-items: center;
    padding: 16px 18px;
    border-radius: var(--swr-radius-lg);
    background: var(--swr-bg-soft-alt);
    border: 1px solid var(--swr-border-subtle);
    box-shadow: var(--swr-shadow-subtle);
}

.swr-strip-thumb {
    width: 88px;
    height: 88px;
}

.swr-strip-cover-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 20px;
        background: radial-gradient(700px 420px at 20% 10%, rgba(77,163,255,.25), transparent 55%),
                radial-gradient(600px 420px at 80% 30%, rgba(50,217,131,.18), transparent 60%),
                linear-gradient(180deg, #0c141d, #070a0f);
    position: relative;
    overflow: hidden;
}

.swr-strip-cover-placeholder::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: inherit;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.swr-strip-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.swr-strip-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--swr-accent-green);
}

.swr-strip-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--swr-ink);
}

.swr-strip-desc {
    margin: 0;
    font-size: 14px;
    color: var(--swr-ink-soft);
}

/* ==========================================================================
 * GENERIC SECTIONS
 * ========================================================================== */

.swr-section {
    margin-bottom: var(--swr-spacing-xl);
}

.swr-section-header {
    margin-bottom: var(--swr-spacing-md);
    max-width: 640px;
}

.swr-section-title {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.3;
    color: var(--swr-ink);
    letter-spacing: 0.02em;
}

.swr-section-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--swr-ink-muted);
}

/* Grid helper */

.swr-grid {
    display: grid;
    gap: 20px;
}

.swr-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.swr-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ==========================================================================
 * SONG CARDS (RELEASES GRID)
 * ========================================================================== */

.swr-section-releases {
    /* Add inner breathing room so content doesn't touch the box edges */
    padding: 18px 18px 22px;     /* left/right + bottom space */
}

/* Mobile: slightly tighter padding */
@media (max-width: 640px) {
    .swr-section-releases {
        padding: 14px 14px 18px;
    }
}

.swr-card {
    background: var(--swr-bg-soft);
    border-radius: var(--swr-radius-md);
    padding: 14px 14px 16px;
    border: 1px solid var(--swr-border-subtle);
    box-shadow: var(--swr-shadow-subtle);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.swr-card-cover {
    border-radius: 14px;
        background: radial-gradient(700px 520px at 20% 10%, rgba(77,163,255,.22), transparent 60%),
                radial-gradient(600px 520px at 80% 30%, rgba(50,217,131,.14), transparent 60%),
                linear-gradient(180deg, #0c141d, #070a0f);
    height: 0;
    padding-top: 100%; /* square cover */
    position: relative;
    overflow: hidden;
}

.swr-card-title {
    margin: 6px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--swr-ink);
}

.swr-card-text {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--swr-ink-soft);
}

.swr-card-actions {
    margin-top: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    color: var(--swr-ink-muted);
}

.swr-link {
    color: var(--swr-accent-blue);
    text-decoration: none;
    font-weight: 500;
}

.swr-link:hover,
.swr-link:focus-visible {
    text-decoration: underline;
}

.swr-card-dot {
    color: var(--swr-ink-muted);
}

/* ==========================================================================
 * VIDEOS GRID
 * ========================================================================== */

.swr-section-videos .swr-grid-videos {
    align-items: stretch;
}

.swr-video-card {
    background: var(--swr-bg-soft);
    border-radius: var(--swr-radius-md);
    padding: 12px;
    border: 1px solid var(--swr-border-subtle);
    box-shadow: var(--swr-shadow-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swr-video-thumb {
    border-radius: 12px;
        background: radial-gradient(700px 420px at 25% 10%, rgba(77,163,255,.22), transparent 55%),
                radial-gradient(600px 420px at 85% 35%, rgba(50,217,131,.14), transparent 60%),
                linear-gradient(180deg, #0c141d, #070a0f);
    height: 0;
    padding-top: 56.25%; /* 16:9 placeholder */
    position: relative;
    overflow: hidden;
}

.swr-video-label {
    margin: 0;
    font-size: 13px;
    color: var(--swr-ink-soft);
}

/* ==========================================================================
 * ABOUT
 * ========================================================================== */

.swr-section-about {
        background: radial-gradient(1100px 520px at 20% 10%, rgba(77,163,255,.14), transparent 55%),
                radial-gradient(900px 520px at 80% 20%, rgba(50,217,131,.10), transparent 60%),
                linear-gradient(180deg, rgba(11,17,24,.92), rgba(7,10,15,.92));
    border-radius: 26px;
    padding: 24px 22px 24px;
    border: 1px solid var(--swr-border-subtle);
    box-shadow: var(--swr-shadow-soft);
}

.swr-about-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
    gap: 22px;
    align-items: center;
}

.swr-about-photo {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 3 / 4;
    border-radius: 24px;
    background: radial-gradient(circle at 20% 20%, #dbeafe, #c4f1f9, #bfdbfe);
    box-shadow: var(--swr-shadow-soft);
    margin: 0 auto;
}

/* About image fill (when admin image URL is set) */
.swr-about-photo {
    position: relative;
    overflow: hidden; /* important so image respects rounded corners */
}

.swr-about-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* crop nicely */
    display: block;
    border-radius: inherit;
}

.swr-about-text p {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--swr-ink-soft);
}



/* ==========================================================================
 * CONTACT
 * ========================================================================== */

.swr-section-contact {
    padding: 24px 20px 22px;
    border-radius: 22px;
    background: var(--swr-bg-soft);
    border: 1px solid var(--swr-border-subtle);
    box-shadow: var(--swr-shadow-subtle);
}

.swr-contact-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.swr-social {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.swr-social a {
    font-size: 13px;
    color: var(--swr-ink-soft);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--swr-accent-blue-soft);
}

.swr-social a:hover,
.swr-social a:focus-visible {
    background: rgba(37, 99, 235, 0.15);
    color: var(--swr-ink);
}

.swr-footer-note {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--swr-ink-muted);
}

/* ==========================================================================
 * RESPONSIVE
 * ========================================================================== */

@media (max-width: 960px) {
    .swr-hero-inner {
        grid-template-columns: 1fr;
        padding: 24px 20px;
    }

    .swr-hero-media {
        order: -1;
    }

    .swr-strip-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .swr-strip-thumb {
        width: 72px;
        height: 72px;
    }

    .swr-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .swr-about-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .swr-about-photo {
        max-width: 180px;
    }
}

@media (max-width: 640px) {
    body.stormwake-shell-home .stormwake-shell-main {
        padding: 16px 0 32px;
    }

    body.stormwake-shell-home .stormwake-shell-wrap {
        padding: 0 12px;
    }

    .swr-hero-inner {
        padding: 20px 16px;
        border-radius: 22px;
    }

    .swr-hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .swr-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .swr-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .swr-section-about {
        padding: 20px 16px;
    }

    .swr-section-contact {
        padding: 18px 14px;
    }

    .swr-strip-inner {
        padding: 14px 14px;
    }
}

/* Ensure embedded hero iframe fits the 16:9 box */
.swr-hero-video-box iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Make latest cover image fill the placeholder gracefully */
.swr-strip-cover-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
 * Breadcrumb (Stormwake home)
 * ========================================================================== */

.swr-breadcrumb {
    margin-bottom: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--swr-ink-muted);
}

.swr-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.swr-breadcrumb a {
    text-decoration: none;
    color: var(--swr-ink-muted);
}

.swr-breadcrumb a:hover,
.swr-breadcrumb a:focus-visible {
    color: var(--swr-ink);
}

/* ============================================================
 * Stormwake Shell – Layout Fixes (Home only)
 * - Center the layout
 * - Widen container on laptop/desktop
 * - Make sure it doesn't lean left
 * ============================================================ */

/* Ensure the main site content is centered and wide enough */
body.stormwake-shell-home .site-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-left: 16px;
    padding-right: 16px;
}

/* Kill any leftover sidebar layout – use full-width content area */
body.stormwake-shell-home #primary.stormwake-shell-primary {
    float: none;
    width: 100%;
    margin: 0 auto;
}

/* Center our article + inner wrap */
body.stormwake-shell-home .stormwake-shell-main,
body.stormwake-shell-home .stormwake-shell-home-article,
body.stormwake-shell-home .stormwake-shell-wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
}

/* Make sure the GeneratePress grid container isn't too narrow */
body.stormwake-shell-home .grid-container {
    max-width: 1200px;
}

/* Slightly wider on big desktops */
@media (min-width: 1280px) {
    body.stormwake-shell-home .site-content {
        max-width: 1320px;
    }

    body.stormwake-shell-home .stormwake-shell-wrap {
        max-width: 1200px;
    }
}

/* Extra safety: if any theme footer bits still appear, hide them on the shell home */
body.stormwake-shell-home .site-info {
    display: none;
}

/* ============================================================
 * Stormwake thumbnails – ensure covers & video thumbs fill cards
 * ============================================================ */

.swr-card-cover img,
.swr-video-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

/* Make sure the video play icon sits on top of the thumbnail */
.swr-video-thumb {
    position: relative;
    overflow: hidden;
}

.swr-video-play-icon {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 18px;
    line-height: 1;
    background: rgba(15, 23, 42, 0.75);
    color: #f9fafb;
    padding: 4px 8px;
    border-radius: 999px;
}

/* ============================================================
 * FIX: Make thumbnail <img> fill ratio-box covers
 * (Your cover boxes use padding-top ratio + height:0)
 * ============================================================ */

.swr-card-cover > a,
.swr-video-thumb > a {
  position: absolute;
  inset: 0;
  display: block;
}

.swr-card-cover img,
.swr-video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* =========================
   Stormwake Single Song PRO
   (TV Frame + Stats + Layout)
   ========================= */

.stormwake-shell-song .stormwake-shell-wrap{
  max-width: 1180px;
}

.swr-single-hero {
  padding: 26px 0 10px;
}

.swr-single-stage {
  margin-top: 14px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(0,255,255,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(120,170,255,.10), transparent 60%),
    linear-gradient(180deg, #0b0f14, #07090c);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}

.swr-single-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 960px){
  .swr-single-grid{ grid-template-columns: 1fr; }
}

/* TV frame (upgraded look) */
.swr-tv {
  max-width: none;
  margin: 0;
  border-radius: 22px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  position: relative;
}

.swr-tv:before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:18px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 50px rgba(0,255,255,.08);
  pointer-events:none;
}

.swr-tv-screen{
  border-radius: 16px;
  overflow: hidden;
  background:#000;
  aspect-ratio: 16 / 9;
  position: relative; /* ✅ allows absolute iframe crop */
}

/* ✅ Crop YouTube pillarbox bars (fills edge-to-edge) */
.stormwake-shell .swr-tv-screen iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  /* Adjust this to taste:
     1.06 = mild crop
     1.10 = stronger crop
  */
  transform: scale(1.08);
  transform-origin: center;
}

/* Mobile: slightly less crop so controls never feel tight */
@media (max-width: 640px){
  .stormwake-shell .swr-tv-screen iframe{
    transform: scale(1.05);
  }
}

.swr-tv-stand{
  width: 220px;
  height: 10px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* Stats row */
.swr-stats{
  max-width: none;
  margin: 12px 0 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

@media (max-width: 640px){
  .swr-stats{ grid-template-columns: 1fr; }
}

.swr-stat{
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

.swr-stat b{
  display:block;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: .2px;
}

.swr-stat span{
  display:block;
  opacity:.75;
  font-size: 12px;
  margin-top: 2px;
}

/* Right panel “Now Playing” */
.swr-now-playing{
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  position: sticky;
  top: 22px;
}

@media (max-width: 960px){
  .swr-now-playing{ position: static; }
}

.swr-now-playing h3{
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}

.swr-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 12px;
}

.swr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,255,255,.08);
  text-decoration:none !important;
  font-weight: 600;
}

.swr-btn:hover{ filter: brightness(1.08); }

.swr-btn.secondary{
  background: rgba(255,255,255,.06);
}

/* Header polish */
.swr-section-header .swr-section-title{
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: .02em;
}

.swr-section-header .swr-section-subtitle{
  font-size: 15px;
  opacity: .85;
  max-width: 70ch;
}

/* FIX: Stats contrast */
.swr-stat{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.swr-stat b{
  color: rgba(255,255,255,.95) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.swr-stat span{
  color: rgba(255,255,255,.70) !important;
}

/* FIX: Make YouTube description readable in Now Playing panel */
.swr-now-playing{
  background: rgba(10,14,18,.72) !important;          /* darker solid base */
  border-color: rgba(255,255,255,.14) !important;
}

.swr-now-desc{
  color: rgba(255,255,255,.88) !important;
  opacity: 1 !important;                              /* override inline opacity */
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  background: rgba(255,255,255,.06);                  /* subtle readable slab */
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px 12px;
  border-radius: 12px;
  margin-top: 12px !important;
}

/* FIX: "Now Playing" heading visibility */
.swr-now-playing h3{
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  letter-spacing: .18em;          /* keep premium look */
}

/* Optional: add a thin divider so it pops */
.swr-now-playing h3:after{
  content:"";
  display:block;
  height:1px;
  margin-top:10px;
  background: linear-gradient(90deg, rgba(0,255,255,.35), rgba(255,255,255,.12), transparent);
}

.swr-now-playing h3{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,255,255,.10);
  border: 1px solid rgba(0,255,255,.18);
}

/* =========================
   MOBILE CONTRAST OVERRIDES
   ========================= */
@media (max-width: 768px){

  /* Make the whole right panel darker on mobile */
  .swr-now-playing{
    background: rgba(5,7,10,.92) !important;      /* stronger dark */
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;
  }

  /* Force heading to be bright on mobile */
  .swr-now-playing h3{
    color: rgba(255,255,255,.98) !important;
    opacity: 1 !important;
    background: rgba(0,255,255,.16) !important;
    border-color: rgba(0,255,255,.26) !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.65) !important;
  }

  /* Force description readable on mobile */
  .swr-now-desc{
    color: rgba(255,255,255,.95) !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.14) !important;
    opacity: 1 !important;
  }

  /* Stats stronger contrast on mobile too */
  .swr-stat{
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.18) !important;
  }
  .swr-stat b{
    color: rgba(255,255,255,.98) !important;
  }
  .swr-stat span{
    color: rgba(255,255,255,.78) !important;
  }

  /* Some themes add opacity to small headings/text on mobile */
  .swr-now-playing,
  .swr-now-playing *{
    opacity: 1 !important;
  }
}

/* =========================================
   Stormwake Shell — Premium Hover States
   Clean border + shadow + slight lift
   ========================================= */

/* Tune these once, affects everything */
:root{
  --swr-hover-border: rgba(255,255,255,.10);
  --swr-hover-border-strong: rgba(255,255,255,.16);
  --swr-hover-shadow: 0 14px 34px rgba(0,0,0,.35);
  --swr-hover-shadow-soft: 0 10px 22px rgba(0,0,0,.28);
  --swr-hover-lift: translateY(-2px);
  --swr-hover-speed: 180ms;
}

/* Base “interactive surface” look */
.stormwake-shell .swr-strip,
.stormwake-shell .swr-section,
.stormwake-shell .swr-card,
.stormwake-shell .swr-video-card,
.stormwake-shell .swr-now-playing,
.stormwake-shell .swr-tv {
  position: relative;
  border: 1px solid rgba(255,255,255,.06);
  transition:
    transform var(--swr-hover-speed) ease,
    box-shadow var(--swr-hover-speed) ease,
    border-color var(--swr-hover-speed) ease,
    background-color var(--swr-hover-speed) ease;
  will-change: transform, box-shadow;
}

/* Hover: lift + shadow + border (desktop pointer only) */
@media (hover: hover) and (pointer: fine) {

  .stormwake-shell .swr-strip:hover,
  .stormwake-shell .swr-section:hover,
  .stormwake-shell .swr-card:hover,
  .stormwake-shell .swr-video-card:hover,
  .stormwake-shell .swr-now-playing:hover,
  .stormwake-shell .swr-tv:hover {
    transform: var(--swr-hover-lift);
    border-color: var(--swr-hover-border-strong);
    box-shadow: var(--swr-hover-shadow);
  }

  /* Make cards feel a touch tighter (less heavy than big sections) */
  .stormwake-shell .swr-card:hover,
  .stormwake-shell .swr-video-card:hover {
    box-shadow: var(--swr-hover-shadow-soft);
  }
}

/* Keyboard focus: same as hover (important accessibility) */
.stormwake-shell a:focus-visible,
.stormwake-shell button:focus-visible,
.stormwake-shell .swr-card a:focus-visible,
.stormwake-shell .swr-video-card a:focus-visible {
  outline: none;
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 16px 40px rgba(0,0,0,.35);
}

/* Optional: give clickable cards a subtle inner highlight on hover */
@media (hover: hover) and (pointer: fine) {
  .stormwake-shell .swr-card::after,
  .stormwake-shell .swr-video-card::after,
  .stormwake-shell .swr-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--swr-hover-speed) ease;
    background: linear-gradient(
      135deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,0)
    );
  }
  .stormwake-shell .swr-card:hover::after,
  .stormwake-shell .swr-video-card:hover::after,
  .stormwake-shell .swr-strip:hover::after {
    opacity: 1;
  }
}

/* Make sure border radius is consistent if your theme/cards already use it */
.stormwake-shell .swr-strip,
.stormwake-shell .swr-section,
.stormwake-shell .swr-card,
.stormwake-shell .swr-video-card,
.stormwake-shell .swr-now-playing,
.stormwake-shell .swr-tv {
  border-radius: 16px;
  overflow: hidden;
}

/* Reduce motion users */
@media (prefers-reduced-motion: reduce) {
  .stormwake-shell .swr-strip,
  .stormwake-shell .swr-section,
  .stormwake-shell .swr-card,
  .stormwake-shell .swr-video-card,
  .stormwake-shell .swr-now-playing,
  .stormwake-shell .swr-tv {
    transition: none;
  }
}

/* =========================================
   Stormwake — Hover glow (sections/cards)
========================================= */
.stormwake-shell .swr-section,
.stormwake-shell .swr-card,
.stormwake-shell .swr-video-card,
.stormwake-shell .swr-strip-inner {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  border: 1px solid rgba(255,255,255,.06);
}

.stormwake-shell .swr-section:hover,
.stormwake-shell .swr-card:hover,
.stormwake-shell .swr-video-card:hover,
.stormwake-shell .swr-strip-inner:hover {
  transform: translateY(-2px);
  border-color: rgba(120, 190, 255, .28);
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 0 1px rgba(120, 190, 255, .14),
    0 0 22px rgba(90, 200, 255, .10);
}

/* ========== Contact TV Modal (FIXED: full visible + scroll) ========== */

/* Modal base */
.swr-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}

.swr-modal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 16px;            /* space around modal */
}

.swr-modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}

/* Lock background scroll */
html.swr-modal-open{
  overflow: hidden;
}

/* IMPORTANT: modal itself must scroll */
.swr-modal-panel{
  position: relative;
  width: 100%;
  max-width: 980px;

  /* ✅ keeps modal inside viewport */
  max-height: 88vh;

  /* ✅ allows scrolling inside modal */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  /* visual spacing */
  padding: 0;
  margin: 0;

  /* make sure it sits above overlay */
  z-index: 2;
}

/* Close button stays accessible */
.swr-modal-x{
  position: sticky;             /* ✅ stays visible while scrolling */
  top: 12px;
  margin-left: auto;
  display: block;
  z-index: 5;

  border: 0;
  background: rgba(255,255,255,.10);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  cursor: pointer;
}

/* TV shell */
.swr-tv-form{
  border-radius: 18px;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(20,22,28,.95), rgba(10,12,18,.95));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
}

/* Top bar */
.swr-tv-form-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.swr-tv-dots span{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:6px;
  background: rgba(255,255,255,.18);
}

.swr-tv-title{
  color: rgba(255,255,255,.82);
  font-size: 13px;
  letter-spacing:.3px;
}

/* Screen area */
.swr-tv-screen{
  padding: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.20));
}

.swr-tv-notice{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-size: 13px;
}

.swr-tv-notice.is-ok{ border-color: rgba(120,255,170,.35); }
.swr-tv-notice.is-warn{ border-color: rgba(255,210,120,.35); }

/* Honeypot hidden */
.swr-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Form grid */
.swr-tv-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.swr-tv-grid label{ display:block; }

.swr-tv-grid label span{
  display:block;
  margin: 0 0 6px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

.swr-tv-grid input,
.swr-tv-grid textarea{
  width:100%;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
}

.swr-tv-grid input:focus,
.swr-tv-grid textarea:focus{
  border-color: rgba(120,200,255,.45);
  box-shadow: 0 0 0 4px rgba(120,200,255,.12);
}

.swr-tv-grid .is-wide{
  grid-column: 1 / -1;
}

/* Actions */
.swr-tv-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.swr-tv-foot{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

.swr-tv-stand{
  height: 14px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}

/* Mobile */
@media (max-width: 720px){
  .swr-modal.is-open{
    padding: 3vh 10px;
    align-items: flex-start;    /* ✅ better on small screens */
  }

  .swr-modal-panel{
    max-height: 94vh;           /* ✅ more room on mobile */
  }

  .swr-tv-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PATCH: Contact Modal Width + Full Viewport Fit (Override)
   - Makes the modal wider on desktop
   - Keeps it safe on mobile
   ========================================================= */

.swr-modal.is-open{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Make panel wider + use almost full viewport width */
.swr-modal-panel{
  width: min(1280px, 96vw) !important;   /* ✅ wider */
  max-width: none !important;            /* ✅ remove 980px cap */
  margin: 0 auto !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* Ensure TV wrapper uses full panel width */
.swr-tv-form{
  width: 100% !important;
  max-width: none !important;
}

/* Desktop: even wider on large screens */
@media (min-width: 1200px){
  .swr-modal-panel{
    width: min(1400px, 94vw) !important; /* ✅ extra wide on big screens */
  }
}

/* Mobile safety */
@media (max-width: 720px){
  .swr-modal-panel{
    width: 100% !important;
    max-height: 94vh !important;
  }
}

/* =========================================================
   FIX: Contact modal inputs turning white on mobile
   (Chrome/Android autofill + default form backgrounds)
   ========================================================= */

#swr-contact-modal .swr-tv-grid input,
#swr-contact-modal .swr-tv-grid textarea{
  background: rgba(10,12,18,.92) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.16) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  appearance: none;
  -webkit-appearance: none;
}

#swr-contact-modal .swr-tv-grid input::placeholder,
#swr-contact-modal .swr-tv-grid textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* Autofill (this is what causes the “white combo blocks”) */
#swr-contact-modal input:-webkit-autofill,
#swr-contact-modal textarea:-webkit-autofill{
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px rgba(10,12,18,.98) inset !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

/* Extra safety: some mobile browsers paint these controls */
#swr-contact-modal input,
#swr-contact-modal textarea,
#swr-contact-modal button{
  color-scheme: dark;
}

/* =========================================================
   FIX: Force full page background to stay dark on mobile
   (GeneratePress can paint inner containers white)
   ========================================================= */

body.stormwake-shell-home,
body.stormwake-shell-home #page,
body.stormwake-shell-home .site,
body.stormwake-shell-home .site-content,
body.stormwake-shell-home .content-area,
body.stormwake-shell-home .site-main,
body.stormwake-shell-home .grid-container {
  background: var(--swr-bg) !important;
}

/* If GP wraps content in inside-article on some templates */
body.stormwake-shell-home .inside-article {
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   FIX: Contact modal form gets clipped by .swr-tv-screen 16:9 rule
   (shared class name with the video TV player)
   ========================================================= */

#swr-contact-modal .swr-tv-screen{
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;     /* allow full form height */
  position: static !important;
  border-radius: 0 !important;      /* optional, keep clean inside TV shell */
}

/* Keep the modal panel scrolling correctly on small screens */
@media (max-width: 720px){
  #swr-contact-modal .swr-modal-panel{
    max-height: 94vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   FIX: Contact modal form gets clipped by shared .swr-tv-screen (16:9)
   - .swr-tv-screen is used for video TV AND contact modal screen
   - Video needs 16:9, contact needs auto height
   ========================================================= */

#swr-contact-modal .swr-tv-screen{
  /* remove the video screen constraints inside the modal */
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  position: static !important;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.20)) !important;
  border-radius: 0 !important;
}

/* Keep inner TV shell rounded (the wrapper already has rounding) */
#swr-contact-modal .swr-tv-form{
  overflow: hidden !important;
}

/* Ensure buttons stay visible and the panel scrolls on mobile */
#swr-contact-modal .swr-modal-panel{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* =========================
   Related videos (player page)
   ========================= */

.swr-related{
  margin-top: 16px;
}

.swr-related-title{
  margin: 14px 0 10px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}

.swr-related-card a{
  display:block;
  color: inherit;
  text-decoration: none;
}

.swr-related-card .swr-video-label{
  margin-top: 10px;
  line-height: 1.35;
}