/*
Theme Name: OneClickPicks Optimized
Theme URI: https://oneclickpicks.com/
Author: OCP
Description: Lightweight, fast theme for OneClickPicks with mobile drawer, hero gradient, and horizontal category carousels.
Version: 1.2.0
License: GPLv2 or later
Text Domain: oneclickpicks-optimized
*/

/* ---------- Base / tokens ---------- */
:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --ink:#131720;
  --muted:#556070;
  --brand:#111827;
  --radius:16px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --container:1180px;
  --pad:clamp(16px, 3.6vw, 24px);
}

/* Prevent horizontal scroll everywhere */
html, body { max-width:100%; overflow-x:hidden; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

a{ color:#2b2bd6; text-decoration:none; }
a:focus{ outline:2px solid #7aa7ff; outline-offset:2px; border-radius:8px; }
img{ max-width:100%; height:auto; border-radius:12px; display:block; }

/* Utility: full-width wrappers should never overflow */
.wp-site-blocks,
.site,
.site-content,
.wrap,
.container,
.entry-content { width:100%; max-width:100%; overflow-x:clip; }

/* If any inline style uses 100vw, clamp to dynamic viewport on iOS */
*[style*="100vw"]{ width:100dvw !important; max-width:100dvw !important; }

/* Common media culprits */
img, video, iframe { max-width:100%; height:auto; display:block; }

/* ---------- Layout ---------- */
.ocp-container{
  max-width:var(--container);
  margin:0 auto;
  padding-inline:var(--pad);
  padding-block:24px;
}

/* Header */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid #eef1f5;
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px var(--pad);
}
.brand a{ font-weight:900; font-size:24px; letter-spacing:-0.02em; color:var(--brand); }
.brand a:hover{ color:var(--brand); }

/* Nav (desktop) */
.nav-desktop{ display:none; }
@media (min-width:900px){ .nav-desktop{ display:block; } }
.nav-desktop ul{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.nav-desktop a{
  display:inline-block; padding:8px 12px; border-radius:999px; color:var(--ink);
}
.nav-desktop a:hover{ background:#f2f4f8; transform:translateY(-1px); }
.nav-desktop .current-menu-item > a{ background:#eef1ff; }

/* Hamburger + Drawer */
.hamburger{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; border:1px solid #e8ecf3; background:#fff;
}
@media (min-width:900px){ .hamburger{ display:none; } }
.hamburger:focus{ outline:2px solid #7aa7ff; outline-offset:2px; }

/* Off‑canvas drawer is fixed so it can't widen the page */
.drawer{ position:fixed; inset:0; z-index:60; display:none; }
.drawer[aria-hidden="false"]{ display:block; }
.drawer__overlay{ position:absolute; inset:0; background:rgba(3,10,27,.45); }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw,360px);
  background:#fff; border-left:1px solid #e8ecf3; padding:20px 16px;
  display:flex; flex-direction:column; gap:14px; overflow:auto;
}
.drawer__panel nav ul{
  list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;
}
.drawer__panel a{ padding:10px 12px; border-radius:10px; color:var(--ink); }
.drawer__panel a:hover, .drawer__panel a:focus{ background:#f2f4f8; }
.no-scroll{ overflow:hidden; }

/* ---------- Hero ---------- */
.hero{ margin:24px 0; }
.hero__card{
  background:linear-gradient(135deg,#e8f2ff,#e9f7ff 35%,#f8fbff);
  padding:26px; border-radius:20px; border:1px solid #e6effa;
}
.hero__title{
  font-size:clamp(28px, 5vw, 40px); line-height:1.1; margin:0 0 8px;
  font-weight:900; letter-spacing:-0.02em; color:#1e293b;
}
.hero__tag{ margin:0; color:#415168; font-weight:500; }

/* ---------- Sections / Cards ---------- */
section{ margin:18px 0 28px; }
.section__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.section__title{ font-weight:800; font-size:22px; margin:0; }
.section__more a{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px; background:#f2f4f8; white-space:nowrap;
}

/* Horizontal scroller (safe) */
.scroller{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(260px,1fr);
  gap:16px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding-bottom:8px;
  scroll-snap-type:x mandatory;
  width:100%; max-width:100%;
}
.scroller *{ min-width:0; } /* Prevent children from forcing overflow */

.card{
  background:var(--card);
  border:1px solid #eef1f5;
  border-radius:16px;
  box-shadow:var(--shadow);
  scroll-snap-align:start;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-2px) scale(1.01); box-shadow:0 4px 18px rgba(0,0,0,.08); }
.card__body{ padding:12px; }
.card h3{ font-size:18px; margin:8px 0 6px; }
.card time{ display:block; color:#6b7280; font-size:13px; }

/* ---------- Footer (mobile-safe) ---------- */
.footer{
  margin-top:36px;
  padding:24px max(var(--pad), env(safe-area-inset-right)) 24px max(var(--pad), env(safe-area-inset-left));
  border-top:1px solid #eef1f5;
  background:#fff;
}
.footer__row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.footer nav ul{
  display:flex; gap:18px; list-style:none; margin:0; padding:0; flex-wrap:wrap;
}
.footer nav li{ min-width:0; }
.footer nav a{
  display:inline-block;
  padding:10px 12px;            /* good touch target */
  border-radius:10px;
  line-height:1.2;
  white-space:nowrap;            /* keep each label intact */
}
.footer nav a:hover{ background:#f3f4f6; }

/* Make sure footer never widens page */
.footer, .footer *{ max-width:100%; }

/* ---------- Accessibility / motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Small tweaks ---------- */
/* Buttons/links should not exceed viewport width */
button, .button, .wp-block-button__link{
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}

/* Gutenberg full-bleed blocks inside padded containers */
.has-global-padding,
.is-layout-constrained { overflow-x:clip; }

/* Forms / inputs */
input, select, textarea{ font:inherit; }

/* Ensure any SVG or icon doesn’t create overflow */
svg{ max-width:100%; height:auto; display:block; }

/* Extra safe clamp for ultra-small phones */
@media (max-width:360px){
  .section__more a{ padding:8px 10px; }
  .nav-desktop ul{ gap:12px; }
}