/* style.css — revised: funky + minimal, fixes for banding, open-post targeting & button polish */

/* ====== Variables & base ====== */
:root{
  --bg-dark: #081129;          /* deep midnight */
  --bg-soft: #0f2030;          /* mid background */
  --card: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.06);
  --muted: #9fb0c8;
  --accent-1: #6ad3ff;         /* ice cyan */
  --accent-2: #9b5cff;         /* electric purple */
  --accent-3: #ff7a88;         /* coral */
  --glow: 0 18px 50px rgba(107,64,255,0.12);
  --radius: 16px;
  --max-width: 1080px;
  --shadow-soft: 0 10px 30px rgba(3,10,18,0.6);
  --glass-border: 1px solid rgba(255,255,255,0.04);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  /* simplified background to avoid banding */
  background:
    radial-gradient(600px 360px at 8% 8%, rgba(155,92,255,0.06), transparent 8%),
    radial-gradient(520px 320px at 92% 86%, rgba(106,211,255,0.04), transparent 10%),
    linear-gradient(180deg, #071022 0%, #081428 60%);
  color: #e6f0fb;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* container */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* ===== header ===== */
.site-header{
  position:sticky; top:0; z-index:60;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px) saturate(120%);
}
.site-header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-icon{
  width:40px;height:40px;border-radius:9px;display:inline-block;object-fit:cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 2px 8px rgba(155,92,255,0.06);
  transform: translateZ(0);
  background: linear-gradient(135deg,var(--accent-2),var(--accent-1));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;
}
.brand-text{font-weight:800;font-size:18px;letter-spacing:0.2px;color: #f3fbff}

/* nav */
.main-nav{display:flex;gap:14px;align-items:center}
.nav-link{
  color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px; font-weight:600;
  transition: all .18s cubic-bezier(.2,.9,.2,1);
}
.nav-link:hover{ color: #fff; transform: translateY(-2px); background: rgba(255,255,255,0.02) }
.nav-link.active{ color: #fff; box-shadow: inset 0 -3px 0 linear-gradient(90deg,var(--accent-1),var(--accent-2)); }

/* menu toggle for small screens */
.nav-toggle{display:none;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer}

/* ===== main hero & layout ===== */
.main-content{flex:1 1 auto;padding:46px 0 64px}
.hero-card{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));
  border-radius:var(--radius);
  padding:26px;
  box-shadow: var(--glow), var(--shadow-soft);
  border: var(--glass-border);
  overflow:visible;
}

/* left column */
.hero-left h1{margin:0 0 10px;font-size:34px;line-height:1.02;color:#ffffff}
.lead{margin:0 0 18px;color:rgba(230,240,251,0.9)}
.input-row{display:flex;gap:14px;align-items:center}
.input{
  flex:1;padding:12px 16px;border-radius:12px;border:none;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: #dff1ff; outline:none; font-size:15px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.input::placeholder{color:rgba(230,240,251,0.45)}
.input:focus{box-shadow: 0 8px 30px rgba(106,211,255,0.06); transform: translateY(-1px);}

/* buttons */
.btn{padding:10px 16px;border-radius:12px;border:0;cursor:pointer;font-weight:800;letter-spacing:0.3px}
.btn-primary{
  background: linear-gradient(90deg,var(--accent-1),var(--accent-2));
  color: #061426;
  box-shadow: 0 8px 28px rgba(107,64,255,0.12);
  transform: translateZ(0);
}
.btn-secondary{
  background: rgba(255,255,255,0.02);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.02);
}

/* helper row */
.helper-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);gap:12px}
.examples .example{background:none;border:0;color:var(--accent-1);cursor:pointer;padding:6px;border-radius:8px;font-weight:700}
.examples .example:hover{transform:translateY(-3px)}

/* right column */
.hero-right{padding-left:6px}
.features{list-style:none;padding:0;margin:0}
.features li{padding:10px 0;color:#e9f7ff;font-weight:700;display:flex;gap:10px;align-items:center}

/* little accent dot */
.features li::before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(180deg,var(--accent-1),var(--accent-2));display:inline-block}

/* ===== result preview card ===== */
.result{margin-top:28px}
.preview-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: var(--glass-border); border-radius:12px; padding:14px; box-shadow: 0 12px 36px rgba(4,10,20,0.5);
}
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.preview-meta{display:flex;align-items:center;gap:12px}
.meta-title{font-weight:800;color:#ffffff}
.meta-sub{color:var(--muted);font-size:13px}
.media-wrap{margin-top:12px;text-align:center}
.media-video, .media-thumb{max-width:100%;max-height:560px;border-radius:12px;object-fit:contain;background:#000}

/* controls */
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.controls .btn{box-shadow:none}

/* skeleton */
.skeleton{height:14px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.05), rgba(255,255,255,0.02));border-radius:6px;opacity:0.9}

/* ===== footer (full-bleed) ===== */
.site-footer{
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
  box-sizing:border-box;
  background: linear-gradient(180deg, rgba(6,18,36,0.8), rgba(6,18,36,0.6));
  border-top:1px solid rgba(255,255,255,0.03);
  padding:18px 0;
  z-index:20;
}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.copy{color:rgba(230,240,251,0.9);font-weight:700}
.footer-links a{color:var(--accent-1);text-decoration:none;font-weight:700;margin:0 6px}
.footer-links a:hover{text-decoration:underline}

/* ===== responsive ===== */
@media (max-width:980px){
  .hero-card{grid-template-columns:1fr;padding:18px}
  .hero-right{order:2;padding-left:0}
  .helper-row{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:720px){
  .nav-toggle{display:block}
  .main-nav{display:none}
  .nav-toggle[aria-expanded="true"] + .main-nav{display:flex;flex-direction:column;position:absolute;top:64px;right:20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:10px;border-radius:10px;box-shadow: var(--glow) }
  .brand-text{font-size:16px}
  .brand-icon{width:34px;height:34px}
  .hero-left h1{font-size:22px}
  .footer-inner{flex-direction:column;gap:8px;text-align:center}
}

/* subtle hover lift for cards */
.hero-card:hover, .preview-card:hover{transform: translateY(-4px); transition: transform .28s cubic-bezier(.2,.9,.2,1)}

/* focus ring accessibility */
.input:focus, .btn:focus { outline: 3px solid rgba(154,92,255,0.14); outline-offset:2px; }

/* ===== optional micro-animations ===== */
@keyframes floaty {
  0% { transform: translateY(0px) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0px) }
}
.brand-icon{ animation: floaty 6s ease-in-out infinite }



/* --- Button + Open Post hover polish --- */
/* ===== Interactive Download + Open Post buttons (drop-in replace) ===== */

/* ensure base for ripple/after pseudo elements */
.btn, .controls a.open-post {
  position: relative;
  overflow: hidden; /* needed for ripple/shimmer */
  will-change: transform, box-shadow;
}

/* ---------- Download (primary) button: visible text + animated gradient + ripple ---------- */
.btn-primary {
  background: linear-gradient(90deg, var(--accent-1) 0%, var(--accent-2) 100%);
  background-size: 200% 100%; /* for subtle hover slide */
  color: #061426; /* dark on normal */
  font-weight: 900;
  border-radius: 12px;
  padding: 10px 16px;
  border: 0;
  box-shadow: 0 8px 28px rgba(11,111,240,0.12);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, color .12s ease, filter .12s ease;
}

/* subtle slide of gradient and white text on hover for contrast */
.btn-primary:hover {
  color: #fff; /* white on hover for guaranteed contrast */
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(11,111,240,0.18);
  filter: saturate(1.08) brightness(1.04);
  background-position: 100% 0; /* slide gradient */
}

/* keyboard focus */
.btn-primary:focus {
  outline: none;
  box-shadow: 0 14px 36px rgba(107,64,255,0.14), 0 0 0 5px rgba(106,211,255,0.06);
  color: #fff;
}

/* ripple effect (css-only) using ::after */
.btn-primary::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .45s ease;
  pointer-events: none;
}

/* on active (click), expand ripple */
.btn-primary:active::after {
  transform: translate(-50%,-50%) scale(40);
  opacity: 1;
  transition: transform .35s cubic-bezier(.0,.9,.2,1), opacity .35s ease;
}

/* keep accessible reduced-motion behavior */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { transition: none; }
  .btn-primary, .btn-primary:hover { transition: none; transform: none; }
}

/* ---------- secondary button (preview) keep subtle but consistent ---------- */
.btn-secondary {
  background: rgba(255,255,255,0.02);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.03);
  padding: 10px 14px;
  border-radius: 12px;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
  transform: translateY(-3px);
}

/* ---------- Open Post — styled pill with animated underline & icon ---------- */
/* explicit class expected: class="open-post" on the anchor */
.controls a.open-post,
.controls a.open-post:link,
.controls a.open-post:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: var(--accent-1);
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, color .12s ease, background .12s ease;
}

/* add small icon element with gentle entrance (uses pseudo-element) */
.controls a.open-post::before {
  content: "↗";
  display:inline-block;
  font-size:13px;
  color: var(--accent-2);
  transform: translateY(0);
  transition: transform .18s ease, opacity .18s ease;
  opacity: 0.95;
}

/* underline bar (grows from center) */
.controls a.open-post::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 72%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
  box-shadow: 0 8px 18px rgba(107,64,255,0.09);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
  opacity: 0.98;
}

/* hover / focus: lift + reveal underline + icon shift */
.controls a.open-post:hover,
.controls a.open-post:focus {
  color: #fff;
  transform: translateY(-3px);
  background: linear-gradient(90deg, rgba(106,211,255,0.06), rgba(155,92,255,0.06));
  box-shadow: 0 18px 36px rgba(107,64,255,0.08);
}
.controls a.open-post:hover::after,
.controls a.open-post:focus::after {
  transform: translateX(-50%) scaleX(1);
}
.controls a.open-post:hover::before,
.controls a.open-post:focus::before {
  transform: translateY(-3px) rotate(-7deg);
  color: #fff;
}

/* active press */
.controls a.open-post:active { transform: translateY(-1px) scale(.997); }

/* mobile tweak */
@media (max-width:520px) {
  .controls a.open-post { padding: 7px 10px; font-size: 14px; }
  .controls a.open-post::after { bottom: -8px; width: 86%; }
  .btn-primary { padding: 9px 12px; }
}

/* ensure anchors that open external posts get the class in script.js when generating HTML:
   <a class="open-post" href="..." target="_blank" rel="noopener">Open Post</a>
*/


/* === Improved Readability / Font Scaling === */

/* Base text scaling */
body {
  font-size: 17px; /* previously ~15px */
  line-height: 1.55;
  letter-spacing: 0.1px;
}

/* Headings */
h1, h2, h3, .hero-left h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 800;
}

/* Subtext and helper lines */
.lead, .meta-sub, .helper-row, .examples, .features li, .footer-inner, .meta-stats {
  font-size: 16px;
}

/* Inputs and buttons */
.input {
  font-size: 17px;
  padding: 14px 18px;
}

.btn {
  font-size: 16px;
  padding: 11px 18px;
}

/* Navigation links */
.nav-link {
  font-size: 16px;
}

/* Preview text */
.meta-title {
  font-size: 18px;
}
.meta-sub {
  font-size: 15px;
}

/* Features list (right column on hero) */
.features li {
  font-size: 16.5px;
}

/* Footer */
.copy, .footer-links a {
  font-size: 15.5px;
}

/* Adjust for small screens */
@media (max-width: 720px) {
  body {
    font-size: 16px;
  }
  .btn {
    font-size: 15px;
  }
  .meta-title {
    font-size: 17px;
  }
  .hero-left h1 {
    font-size: 24px;
  }
}



/* === Larger meta text + stats styling === */

/* increase username/title size in preview head */
.preview-head .meta-title {
  font-size: 20px;      /* larger username */
  font-weight: 900;
  color: #ffffff;
}

/* description / caption */
.preview-head .meta-sub {
  font-size: 15.5px;
  color: rgba(230,240,251,0.9);
  margin-top: 6px;
  max-width: 85%;
  word-break: break-word;
}

/* stats row to the right */
.meta-stats {
  font-size: 16px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

/* individual stat pills */
.meta-stats .stat-item {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.02);
  color: var(--muted);
  font-weight:700;
}

/* separator between inline stats */
.meta-stats .stat-sep {
  color: rgba(255,255,255,0.06);
  margin: 0 6px;
}

/* ensure long captions wrap inside card */
.preview-card .meta-sub {
  word-wrap: break-word;
  white-space: normal;
}

/* mobile tweaks */
@media (max-width:980px) {
  .preview-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .meta-stats { justify-content: flex-start; flex-wrap:wrap; gap:8px; }
  .meta-stats .stat-item { font-size:15px; padding:6px 8px; }
}




/* Stats color accents (views/likes/comments) */
.meta-stats .stat-item { font-weight:700; font-size:15.5px; padding:6px 10px; border-radius:10px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02); color:var(--muted); display:inline-flex; align-items:center; gap:8px; }

.meta-stats .stat-views { color: var(--accent-1); border-color: rgba(106,211,255,0.06); background: linear-gradient(90deg, rgba(106,211,255,0.02), rgba(255,255,255,0.01)); }
.meta-stats .stat-likes { color: #ff6b94; border-color: rgba(255,107,148,0.06); background: linear-gradient(90deg, rgba(255,107,148,0.02), rgba(255,255,255,0.01)); }
.meta-stats .stat-comments { color: #d7b3ff; border-color: rgba(155,92,255,0.06); background: linear-gradient(90deg, rgba(155,92,255,0.02), rgba(255,255,255,0.01)); }

.meta-stats .stat-sep { color: rgba(255,255,255,0.06); margin: 0 8px; }

/* adjust spacing on mobile */
@media (max-width:980px) {
  .meta-stats { gap: 8px; flex-wrap:wrap; font-size:15px; }
  .meta-stats .stat-item { padding:6px 8px; font-size:14.5px; }
}





/* ===== Overflow & footer safe area fixes (REPLACE previous overflow fix) ===== */

/* keep horizontal overflow hidden globally */
html, body {
  overflow-x: hidden;
}

/* Do NOT force .container or cards to 100vw — allow your centered container to keep side gutters */
/* Only ensure header/footer full-bleed visuals are allowed to escape the centered container using the full-bleed trick you already have. */

/* make sure full-bleed header/footer layout stays safe from OS taskbar / UI overlays */
.site-footer {
  position: relative;            /* keep in document flow */
  z-index: 20;
  /* add a small safe bottom padding so footer never gets hidden by OS taskbars */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
}

/* Add comfortable bottom padding to the main content to prevent footer overlap */
.main-content {
  padding-bottom: 48px; /* ensures space before footer — adjust up if footer is taller */
}

/* Keep centered container width intact (no change) */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Prevent media from overflowing but remain centered with margins preserved */
.media-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;     /* prevents internal overflow without affecting page layout */
}
.media-wrap video,
.media-video {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;   /* optional: rounded player */
  box-shadow: 0 12px 36px rgba(4,10,20,0.45); /* optional: subtle card shadow */
}

/* If your body previously used min-height:100vh make sure the footer still flows naturally */
body {
  min-height: 100%;
  /* keep flex layout so footer sits after content */
  display:flex;
  flex-direction:column;
}

/* Ensure the main-content grows and footer stays at bottom when content is short */
.main-content {
  flex: 1 0 auto;
}

/* final safety: avoid accidental horizontal scroll from very long words/content */
* { word-wrap: break-word; }

/* small-screen tweak if footer is still tight */
@media (max-height:700px) {
  .main-content { padding-bottom: 80px; } /* give extra breathing room on short screens */
}


/* ===== Spacing between main boxes (input + result card) ===== */
.hero-card {
  margin-bottom: 40px;   /* space after the top input box */
}

.result .preview-card {
  margin-top: 30px;      /* space before result box */
}



/* ===== Header: fixed height, vertical centering, avoid overlap ===== */

/* define header height for consistent spacing */
:root { --header-height: 64px; }

/* make header a consistent bar */
.site-header {
  height: var(--header-height);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 0 0; /* inner padding handled by .site-header-inner */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* keep header content vertically centered and constrained */
.site-header-inner {
  height: var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 0 20px; /* small horizontal padding */
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  box-sizing:border-box;
}

/* brand area: vertically center, slightly smaller icon if needed */
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand-icon { width:40px; height:40px; border-radius:10px; }
.brand-text { font-size:18px; margin-top:0; margin-bottom:0; }

/* nav: ensure links align vertically in header */
.main-nav { display:flex; align-items:center; gap:18px; height:100%; }
.nav-link { line-height:1; padding:8px 10px; vertical-align:middle; }

/* make sure small-screen toggle does not push header taller */
.nav-toggle { margin:0; height:auto; line-height:normal; }

/* prevent header overlap with page content: add top spacing to main content equal to header height */
.main-content {
  padding-top: calc(var(--header-height) + 20px); /* keep a little extra breathing room */
  /* keep existing padding-bottom */
}

/* if you already used a hero-card with big top margin, this won't double up too much */
.hero-card { margin-top: 0; }

/* responsive: reduce header height on small screens so it doesn't feel bulky */
@media (max-width:720px) {
  :root { --header-height: 56px; }
  .brand-text { font-size:16px; }
  .site-header-inner { padding: 0 14px; }
  .main-nav { gap:10px; }
  .main-content { padding-top: calc(var(--header-height) + 18px); }
}




/* ===== DownZORA header brand — clean alignment & spacing ===== */

.brand {
  display: flex;
  align-items: center;        /* vertical center icon + text */
  gap: 12px;                  /* space between icon and text */
  text-decoration: none;
  color: #eaf6ff;
}

/* icon */
.brand-icon {
  width: 36px;                /* fixed size for consistent header */
  height: 36px;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); /* subtle depth */
  transition: transform .18s ease, filter .18s ease;
}

/* textual logo */
.brand-text {
  font-weight: 800;
  font-size: 20px;            /* tuned for header height */
  line-height: 1;
  letter-spacing: 0.6px;
  color: #e9f9ff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45); /* subtle lift */
  display: inline-block;
  transform-origin: left center;
  transition: transform .18s ease;
  padding-top: 2px;           /* small nudge so baseline sits visually centered */
}

/* hover polish: slight scale and glow */
.brand:hover .brand-icon { transform: translateY(-2px) scale(1.02); filter: drop-shadow(0 10px 30px rgba(106,211,255,0.08)); }
.brand:hover .brand-text { transform: translateY(-2px); }

/* ensure header inner has breathing room so brand doesn't sit on border line */
.site-header-inner {
  padding-top: 10px;   /* smaller vertical padding; adjust if needed */
  padding-bottom: 10px;
}

/* reduce header border visibility so it doesn't cut through text */
.site-header {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* smaller screens: scale things down slightly */
@media (max-width:720px) {
  .brand-icon { width: 30px; height: 30px; }
  .brand-text { font-size: 16px; padding-top: 1px; }
  .site-header-inner { padding-top: 8px; padding-bottom: 8px; }
}




/* --- DownZORA header polish --- */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #eaf6ff;
}

.brand-icon {
  width: 42px; /* a bit larger for balance */
  height: 42px;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(106, 211, 255, 0.12);
  transition: transform .25s ease, box-shadow .25s ease;
}

.brand-text {
  font-weight: 900;
  font-size: 26px; /* increased for visibility */
  letter-spacing: 1.2px; /* more space between letters */
  color: #e9f9ff;
  text-shadow: 0 0 10px rgba(106,211,255,0.25), 0 1px 2px rgba(0,0,0,0.4);
  transform-origin: left center;
  transition: all 0.25s ease;
}

/* Hover effect — subtle movement + glow */
.brand:hover .brand-icon {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(106, 211, 255, 0.25);
}
.brand:hover .brand-text {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(155,92,255,0.4), 0 2px 6px rgba(0,0,0,0.6);
  transform: translateY(-2px);
}

/* Responsive adjustment for smaller devices */
@media (max-width: 720px) {
  .brand-icon {
    width: 34px;
    height: 34px;
  }
  .brand-text {
    font-size: 20px;
    letter-spacing: 1px;
  }
}


/* ===== Instruction Card ===== */
.instruction-card {
  margin-top: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  color: #e8f2ff;
  backdrop-filter: blur(8px);
}

.instruction-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-1);
}

.instruction-card ol {
  margin: 0;
  padding-left: 22px;
  line-height: 1.6;
  color: #f3f7ff;
}

.instruction-card li {
  margin-bottom: 4px;
  font-weight: 600;
}




/* Photos Section */

/* Photos carousel thumbnails */
.thumbs-row { -webkit-overflow-scrolling: touch; }
.thumb-btn { background: transparent; border: 0; padding: 4px; cursor: pointer; border-radius: 8px; display:flex;align-items:center; }
.thumb-img { width:72px; height:72px; object-fit:cover; border-radius:8px; display:block; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.thumb-v { width:72px; height:72px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55)); color:#fff; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,0.4); }



/* ===== Instruction Card ===== */
.instruction-card {
  margin-top: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  color: #e8f2ff;
  backdrop-filter: blur(8px);
}

.instruction-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-1);
}

.instruction-card ol {
  margin: 0;
  padding-left: 22px;
  line-height: 1.6;
  color: #f3f7ff;
}

.instruction-card li {
  margin-bottom: 4px;
  font-weight: 600;
}






/* ===== DownZORA: robust mobile menu overlay (final override) ===== */

/* ensure header fixed and above overlay */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 64px !important;
  z-index: 12000 !important;
}

/* Hide desktop nav on mobile, show hamburger */
@media (max-width: 859px) {
  .main-nav { display: none !important; }
  .dz-hamburger { display: inline-flex !important; }
  .brand-text { font-size: 18px !important; }
}

/* Full-screen overlay backdrop */
#dz-mobile-menu {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;    /* content appears below header */
  justify-content: center;
  padding-top: var(--header-h); /* leave space for header */
  background: rgba(0,0,0,0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 11999;
}

/* when opened: show overlay */
#dz-mobile-menu[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* inner sheet: slide-from-top, full width on small screens */
#dz-mobile-menu .dz-mobile-inner {
  width: 100vw;            /* important: fill viewport width */
  max-width: 100vw;       /* override any earlier max-width rules */
  height: auto;
  max-height: calc(100vh - var(--header-h) - 8px);
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #061428, #081b2b);
  display: flex;
  flex-direction: column;
  overflow: hidden;        /* inner nav should scroll instead of whole page */
  border-radius: 8px;
}

/* visible state: settle */
#dz-mobile-menu[aria-hidden="false"] .dz-mobile-inner {
  transform: translateY(0) !important;
}

/* header row inside menu: brand + close button */
.dz-mobile-inner .dz-mobile-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* close button */
.dz-mobile-close {
  background: transparent;
  border: 0;
  color: #dff1ff;
  font-size: 22px;
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; cursor:pointer;
}
.dz-mobile-close:focus { outline:3px solid rgba(106,211,255,0.12); }

/* mobile nav list — comfortable tap size, scrollable if long */
.dz-mobile-inner .mobile-nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.dz-mobile-inner .mobile-nav .nav-link {
  display: block;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #f4fbff;
  border: 1px solid rgba(255,255,255,0.02);
}
/* small footer inside menu */
.dz-mobile-inner .dz-mobile-footer {
  padding: 12px 6px;
  color: var(--muted);
  text-align:center;
  font-size:13px;
  border-top: 1px solid rgba(255,255,255,0.02);
}

/* ensure cloned nav is only visible inside overlay (avoid accidental copies) */
.mobile-nav { visibility: visible !important; }
.main-nav .mobile-nav { display:none !important; }

/* Safety: if something earlier forced overflow hidden, allow overlay to show */
html, body { -webkit-font-smoothing:antialiased; }

/* small-screen niceties */
@media (max-width:420px) {
  .dz-mobile-inner .mobile-nav .nav-link { font-size: 16px !important; padding:12px 10px !important; }
  .dz-mobile-inner .dz-mobile-head { padding:8px 10px; }
}


/* hide hamburger on desktop */
@media (min-width: 860px) {
  .dz-hamburger {
    display: none !important;
  }
}


/* header / mobile menu safety */
.dz-hamburger { display: none; background: transparent; border: 0; cursor: pointer; }
.dz-hamburger .dz-hamburger-box { display:inline-block; padding:8px; }
.dz-hamburger .dz-hamburger-inner { width:20px; height:2px; background: #fff; display:block; border-radius:2px; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; }

/* Hide hamburger when menu is open */
#dz-mobile-menu[aria-hidden="false"] + .dz-hamburger,
.site-header .dz-hamburger[aria-expanded="true"] {
    display: none !important;
}