/* My Box Studios — Universal Responsive Theme (v2, 2025-10-31)
   Brand: Black #000 / Gold #D4AF37 (Alt #C6A15B)
   Guarantees:
   • Centered layout + gutters on ALL screens (phone → TV/4K)
   • Sticky header that never overlaps content (safe-area notch aware)
   • Fluid type scale (no tiny phone text, no giant desktop text)
   • Touch targets ≥ 44px, iOS zoom-safe inputs
   • Card grids that reflow cleanly, 16:9 thumbs
*/

/* ---------- Tokens / Fluid sizing ---------- */
:root{
  --gold:#D4AF37;
  --gold-deep:#C6A15B;
  --bg:#000000;
  --surface:#0b0b0b;
  --muted:rgba(255,255,255,.66);
  --border:rgba(212,175,55,.18);
  --ring:rgba(212,175,55,.55);
  --danger:#ff4d4f;

  /* Layout */
  --page-max: clamp(320px, 92vw, 1600px);  /* expands on big screens incl. TV */
  --gutter:   clamp(12px, 3vw, 32px);      /* side paddings scale with screen */
  --header-h: 84px;                        /* comfortable sticky header */

  /* UI */
  --radius:16px;
  --gap:16px;
}

/* Bump container width for very large displays */
@media (min-width:1920px){ :root{ --page-max: 1600px } }
@media (min-width:2560px){ :root{ --page-max: 1800px } }

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
html,body{margin:0; background:var(--bg); color:#fff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body{ font-size: clamp(14px, 1vw + 0.25rem, 18px); line-height:1.5; }
img{max-width:100%; height:auto; display:block}
a{color:var(--gold); text-decoration:none}
a:hover{opacity:.9}
:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:8px}
.muted{color:var(--muted)}
button, .cta, .chip { min-height:44px; }          /* touch targets */
input, select, textarea { font-size:16px; }        /* iOS: prevent auto-zoom */
::-webkit-scrollbar{ width:10px; height:10px }     /* optional nicer scrollbars */
::-webkit-scrollbar-thumb{ background:#222; border-radius:8px }
::-webkit-scrollbar-thumb:hover{ background:#2a2a2a }

/* ---------- Global centering & gutters ---------- */
main, .container, .content, .page, .wrap, .hero, .section, .newsletter, .cta-section {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Sticky header (safe-area aware) ---------- */
.hypersite-header,.site-header{
  position:sticky; top:0; z-index:1000; background:var(--bg);
  min-height:var(--header-h);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px;
  padding:12px var(--gutter);
  /* notches / tv overscan */
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
}
body{ padding-top: var(--header-h); }
.site-header .brand{font-weight:800; letter-spacing:.2px; font-size:1.05rem}
.site-header .brand::before{content:"● "; color:var(--gold)}
.site-nav{display:flex; gap:12px; align-items:center}
.site-nav a{ padding:10px 12px; border-radius:10px; color:#fff }
.site-nav a:hover{ background:rgba(255,255,255,.06) }
.site-nav .active{ background:rgba(212,175,55,.15); color:var(--gold); border:1px solid var(--border) }

/* Larger, TV-friendly nav spacing */
@media (min-width:1920px){
  .site-nav a{ padding:12px 14px; font-size:1.05rem }
}

/* ---------- Search (wraps cleanly) ---------- */
.site-search{ display:flex; gap:8px; flex:1 1 420px; min-width:240px }
.site-search input[type="search"]{
  width:100%; background:#111; border:1px solid rgba(255,255,255,.15);
  color:#fff; padding:10px 12px; border-radius:10px
}
.site-search button,.cta{
  background:var(--gold); color:#000; border:0;
  padding:10px 14px; border-radius:999px; font-weight:700; cursor:pointer
}

/* ---------- Hero / titles (fluid type) ---------- */
.hero{ padding-top:16px; padding-bottom:8px }
.hero h1{ margin:0 0 6px; font-size:clamp(22px, 2.8vw, 40px) }
.hero p{ margin:0; color:var(--muted) }

/* ---------- Cards / grids ---------- */
.card-grid,.grid,.cards{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  padding:16px 0 24px;
}
@media (max-width:720px){ .card-grid{ grid-template-columns:repeat(auto-fill, minmax(160px,1fr)) } }
@media (min-width:1920px){ .card-grid{ grid-template-columns:repeat(auto-fill, minmax(260px,1fr)) } }
@media (min-width:2560px){ .card-grid{ grid-template-columns:repeat(auto-fill, minmax(300px,1fr)) } }

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.thumb{ aspect-ratio:16/9; width:100%; background:#000; overflow:hidden }
.thumb img{ width:100%; height:100%; object-fit:cover }
.card .body{ padding:12px }
.title{ font-weight:700; margin:6px 0 4px; font-size:clamp(.95rem, 1vw, 1.15rem); line-height:1.25 }
.title.clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.meta{ font-size:.85rem; color:var(--muted) }

/* ---------- Watch page (player + sidebar) ---------- */
.watch-layout{ display:grid; gap:20px; grid-template-columns:minmax(0,2fr) minmax(260px,1fr) }
@media (max-width:980px){ .watch-layout{ grid-template-columns:1fr } }
.player-box{ background:#000; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden }
.player-box video{ display:block; width:100%; height:auto; background:#000 }
.watch-title{ margin:.75rem 0 .25rem; font-size:clamp(20px, 2.5vw, 28px) }
.watch-meta{ margin-bottom:.5rem }
.watch-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 16px }
.btn-pill{ background:var(--gold); color:#000; border:0; padding:10px 14px; border-radius:999px; font-weight:700; cursor:pointer; min-height:44px }
.desc-card,.comments-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-top:12px }
.desc-card h2,.comments-card h2{ margin-top:0 }
.tags{ list-style:none; display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:.5rem 0 0 }
.tags li{ border:1px solid var(--border); border-radius:999px; padding:4px 10px; color:var(--gold) }
.comment-list{ list-style:none; padding:0; margin:0 }
.comment-list li{ padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08) }
.comment-form{ margin-top:10px }
.comment-form textarea{ width:100%; min-height:90px; background:#111; border:1px solid rgba(255,255,255,.15); color:#fff; border-radius:10px; padding:10px }
.comment-form .row{ display:flex; gap:10px; margin-top:8px }
.comment-form input[type="text"]{ flex:1 }

/* ---------- Footer (safe-area aware) ---------- */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:20px var(--gutter);
  padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  color:var(--muted); background:#050505;
}

/* ---------- Accessibility & Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}

/* Safety */
.long-text, .title, .meta, p{ word-break:break-word; overflow-wrap:anywhere }
/* EOF */