/*
Theme Name: Rebels: A Journey Underground Mobile Child
Theme URI: https://rebelsajourneyunderground.com
Description: Mobile and tablet responsive child theme for Rebels: A Journey Underground. Preserves the parent theme's dark cinematic VHS style while improving phone, tablet, and Elementor layouts.
Author: Radiance Digital / Generated Website Package
Template: rebels-journey-underground-theme
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rebels-underground-mobile-child
Tags: child-theme, responsive, mobile, tablet, elementor, one-page, dark, documentary
*/

/*
  Rebels mobile child theme
  Purpose: responsive polish only. This keeps the parent colors, atmosphere,
  animated background, VHS effects, typography direction, and Elementor support.
*/

:root {
  --rebels-mobile-gutter: clamp(18px, 5vw, 34px);
  --rebels-header-bottom: 112px;
  --rebels-vh: 1vh;
}

html,
body.rebels-dark {
  max-width: 100%;
  overflow-x: hidden;
}

body.rebels-dark img,
body.rebels-dark video,
body.rebels-dark iframe {
  max-width: 100%;
}

body.rebels-dark iframe,
.wp-block-embed iframe,
.elementor iframe {
  width: 100%;
}

.container {
  width: min(var(--max), calc(100% - (var(--rebels-mobile-gutter) * 2)));
}

.site-header {
  width: 100%;
}

.site-header .container,
.header-inner {
  max-width: 1180px;
}

.primary-nav a,
.primary-nav-wrapper a,
.nav-toggle {
  min-height: 44px;
}

.nav-toggle {
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.045);
}

.nav-toggle:focus-visible,
.primary-nav a:focus-visible,
.primary-nav-wrapper a:focus-visible,
.button:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 4px;
}

/* Better tablet header wrapping without changing the look. */
@media (max-width: 1180px) and (min-width: 761px) {
  .site-header {
    top: 26px;
    padding: 13px 0;
  }

  .site-header.is-scrolled {
    top: 12px;
  }

  body.admin-bar .site-header {
    top: 58px;
  }

  body.admin-bar .site-header.is-scrolled {
    top: 44px;
  }

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .brand-title-link {
    min-width: 0;
    max-width: 100%;
  }

  .brand-title {
    white-space: normal;
    line-height: 1.05;
  }

  .primary-nav,
  .primary-nav ul {
    flex-wrap: wrap;
    gap: 8px 15px;
  }

  .primary-nav a,
  .primary-nav-wrapper a {
    line-height: 1.25;
    padding: 3px 0;
  }

  .hero-section {
    min-height: calc(var(--rebels-vh) * 92);
    padding-top: 190px;
    padding-bottom: 88px;
  }

  .section-block,
  .rebels-el-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }

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

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

/* Tablet portrait and small laptops. */
@media (max-width: 1024px) {
  h1,
  .rebels-elementor-page h1.elementor-heading-title,
  .rebels-elementor-page .rebels-el-main-title .elementor-heading-title {
    font-size: clamp(48px, 11vw, 96px);
    line-height: 1.04;
    letter-spacing: .01em;
  }

  h2,
  .rebels-elementor-page h2.elementor-heading-title {
    font-size: clamp(34px, 8vw, 64px);
    line-height: 1.07;
  }

  .tagline,
  .rebels-elementor-page .rebels-el-tagline {
    font-size: clamp(20px, 3vw, 29px) !important;
  }

  .two-column,
  .two-column.reverse,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .two-column,
  .two-column.reverse {
    gap: 50px;
  }

  .stacked-stills {
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .stacked-stills img {
    position: static;
    width: 100%;
    transform: none !important;
  }

  .rebels-elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: calc(100% - (var(--rebels-mobile-gutter) * 2));
  }

  .rebels-elementor-page .rebels-el-grid-section .elementor-column {
    width: 50% !important;
  }
}

/* Phones and small tablets. */
@media (max-width: 760px) {
  :root {
    --rebels-mobile-gutter: 18px;
  }

  .site-header,
  .site-header.is-scrolled {
    top: 12px;
    left: 10px;
    right: 10px;
    width: auto;
    padding: 10px 0;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 0;
    background: rgba(5,5,5,.94);
  }

  body.admin-bar .site-header,
  body.admin-bar .site-header.is-scrolled {
    top: 58px;
  }

  .site-header .container,
  .header-inner {
    width: calc(100% - 20px);
  }

  .header-inner {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 12px;
  }

  .brand-title-link {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100vw - 104px);
  }

  .brand-title {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 7px;
    white-space: normal;
    font-size: clamp(17px, 5vw, 23px);
    line-height: 1.04;
    letter-spacing: .035em;
  }

  .brand-title span {
    font-size: .58em;
    line-height: 1.1;
    letter-spacing: .09em;
  }

  .nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    padding: 8px;
  }

  .nav-toggle span:not(.screen-reader-text) {
    width: 24px;
    margin: 3px 0;
  }

  .primary-nav,
  .primary-nav-wrapper {
    position: fixed;
    left: 14px;
    right: 14px;
    top: var(--rebels-header-bottom);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc((var(--rebels-vh) * 100) - var(--rebels-header-bottom) - 18px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px;
    background: rgba(5,5,5,.98);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 24px 58px rgba(0,0,0,.65);
    z-index: 101;
  }

  .primary-nav.is-open,
  .primary-nav-wrapper.is-open {
    display: flex;
  }

  .primary-nav-wrapper .primary-nav {
    position: static;
    display: flex;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .primary-nav,
  .primary-nav ul {
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .primary-nav li,
  .primary-nav-wrapper li {
    width: 100%;
  }

  .primary-nav a,
  .primary-nav-wrapper a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
    font-size: 12px;
    letter-spacing: .12em;
  }

  .primary-nav li:last-child a,
  .primary-nav-wrapper li:last-child a,
  .primary-nav > a:last-child,
  .primary-nav-wrapper > a:last-child {
    border-bottom: 0;
  }

  .hero-section {
    min-height: auto;
    padding-top: 158px;
    padding-bottom: 78px;
  }

  .hero-content {
    max-width: 100%;
  }

  h1,
  .rebels-elementor-page h1.elementor-heading-title,
  .rebels-elementor-page .rebels-el-main-title .elementor-heading-title {
    font-size: clamp(42px, 15vw, 74px);
    letter-spacing: .01em;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  h1 span {
    -webkit-text-stroke-width: 1px;
    text-stroke-width: 1px;
  }

  h2,
  .rebels-elementor-page h2.elementor-heading-title {
    font-size: clamp(32px, 11vw, 52px);
    line-height: 1.09;
  }

  h3,
  .rebels-elementor-page h3.elementor-heading-title {
    font-size: clamp(20px, 6.2vw, 28px);
    line-height: 1.18;
  }

  .eyebrow,
  .rebels-el-kicker {
    font-size: 11px;
    letter-spacing: .13em;
    line-height: 1.5;
  }

  .tagline,
  .rebels-elementor-page .rebels-el-tagline {
    font-size: clamp(19px, 6.2vw, 26px) !important;
    line-height: 1.24;
  }

  .hero-copy,
  .lead,
  .rebels-elementor-page .elementor-widget-text-editor,
  .rebels-elementor-page .elementor-widget-text-editor p {
    font-size: 16px;
    line-height: 1.72;
  }

  .cta-row,
  .hero-meta {
    width: 100%;
  }

  .button,
  .rebels-elementor-page .elementor-button {
    width: 100%;
    min-height: 50px;
    padding: 14px 16px;
    text-align: center;
  }

  .hero-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .section-block,
  .rebels-el-section {
    padding-top: 82px;
    padding-bottom: 82px;
  }

  .section-heading {
    margin-bottom: 34px;
  }

  .episode-grid,
  .gallery-grid,
  .product-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .episode-body,
  .product-card,
  .bio-card,
  .contact-card {
    padding: 24px;
  }

  .episode-image,
  .gallery-card,
  .product-card,
  .teaser-card,
  .contact-card {
    transform: none !important;
  }

  .teaser-screen {
    min-height: 230px;
  }

  .stacked-stills {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-email,
  .rebels-el-contact-email {
    font-size: clamp(18px, 5.5vw, 25px) !important;
    line-height: 1.25;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .site-footer {
    text-align: left;
  }

  .footer-menu,
  .footer-menu ul {
    justify-content: flex-start;
    gap: 8px 14px;
  }

  /* Elementor mobile fixes. */
  .rebels-page-content {
    padding-top: 118px;
  }

  .rebels-elementor-page .elementor-section,
  .rebels-elementor-page .elementor-container,
  .rebels-elementor-page .elementor-column,
  .rebels-elementor-page .elementor-widget-wrap {
    max-width: 100%;
  }

  .rebels-elementor-page .elementor-column,
  .rebels-elementor-page .rebels-el-grid-section .elementor-column {
    width: 100% !important;
  }

  .rebels-el-hero {
    min-height: auto !important;
    padding-top: 156px !important;
    padding-bottom: 78px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .rebels-el-hero > .elementor-container {
    min-height: auto;
  }

  .rebels-el-card > .elementor-widget-wrap {
    padding: 22px !important;
  }

  .rebels-el-logo img {
    max-width: min(280px, 84vw);
  }

  .rebels-el-episode-image img,
  .rebels-el-gallery-img img,
  .rebels-el-feature-image img {
    aspect-ratio: 16 / 10;
  }

  .elementor-widget-image img {
    height: auto;
  }

  .elementor-widget-button .elementor-button-wrapper,
  .elementor-widget-button .elementor-button {
    width: 100%;
  }
}

/* Narrow phones. */
@media (max-width: 480px) {
  :root {
    --rebels-mobile-gutter: 15px;
  }

  .site-header,
  .site-header.is-scrolled {
    left: 8px;
    right: 8px;
    top: 10px;
  }

  body.admin-bar .site-header,
  body.admin-bar .site-header.is-scrolled {
    top: 56px;
  }

  .site-header .container,
  .header-inner {
    width: calc(100% - 16px);
  }

  .brand-title {
    font-size: clamp(16px, 5.4vw, 20px);
    letter-spacing: .025em;
  }

  .brand-title span {
    font-size: .56em;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .primary-nav,
  .primary-nav-wrapper {
    left: 10px;
    right: 10px;
    padding: 14px 16px;
  }

  .hero-section,
  .rebels-el-hero {
    padding-top: 148px !important;
  }

  h1,
  .rebels-elementor-page h1.elementor-heading-title,
  .rebels-elementor-page .rebels-el-main-title .elementor-heading-title {
    font-size: clamp(38px, 16vw, 63px);
  }

  .section-block,
  .rebels-el-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .episode-body,
  .product-card,
  .bio-card,
  .contact-card {
    padding: 20px;
  }
}

/* Very small devices. */
@media (max-width: 380px) {
  .brand-title {
    font-size: 15px;
  }

  .brand-title span {
    letter-spacing: .075em;
  }

  h1,
  .rebels-elementor-page h1.elementor-heading-title,
  .rebels-elementor-page .rebels-el-main-title .elementor-heading-title {
    font-size: clamp(34px, 15vw, 54px);
  }

  .primary-nav a,
  .primary-nav-wrapper a {
    font-size: 11px;
    letter-spacing: .105em;
  }
}

/* Landscape phones: reduce vertical bulk so the hero is usable. */
@media (max-width: 920px) and (orientation: landscape) {
  .site-header,
  .site-header.is-scrolled {
    top: 8px;
  }

  body.admin-bar .site-header,
  body.admin-bar .site-header.is-scrolled {
    top: 46px;
  }

  .hero-section,
  .rebels-el-hero {
    min-height: auto !important;
    padding-top: 128px !important;
    padding-bottom: 56px !important;
  }

  .primary-nav,
  .primary-nav-wrapper {
    max-height: calc((var(--rebels-vh) * 100) - var(--rebels-header-bottom) - 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.rebels-dark,
  body.rebels-dark::before,
  body.rebels-dark::after,
  .hero-collage,
  .vhs-static,
  .scanlines,
  .section-block::before,
  .rebels-el-hero {
    animation: none !important;
  }
}