/* ===== Webinar Detail (Dark Blue Theme) — MOBILE FIXES ===== */

/* Base / no sideways drag */
*, *::before, *::after { box-sizing: border-box; }   /* <-- fixes 100%+padding overflow */
:root { --page-max: 1200px; }

html, body { height: 100%; }
body{
  margin:0;
  padding:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#08111f;
  color:#e6f0ff;
  overflow-x:hidden;
  touch-action: pan-y;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
}

/* Sticky footer layout */
.page-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main.webinar-detail-page{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Center footer content even if your footer.php uses an inner wrapper */
footer{
  width:100%;
  text-align:center;                    /* center text */
}
footer > .footer-inner,
footer > .container,
footer > .wrap{
  max-width: var(--page-max);
  margin-inline:auto;                   /* center the inner footer row */
  padding-inline:16px;
}

/* Page container */
.webinar-detail-page{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px 16px;
}

/* ---------- Hero ---------- */
.webinar-hero{
  text-align:center;
  padding:26px;
  margin:0 0 18px;
  background: radial-gradient(1200px 800px at -10% -20%, #12223d 0%, #0b1220 40%, #08111f 100%);
  border:1px solid #12305a;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(3,12,28,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.webinar-hero h1{
  font-size:26px;
  font-weight:800;
  margin:0 0 6px;
  color:#eaf3ff;
}
.webinar-hero p{
  margin:0;
  color:#b9cbe8;
  font-size:15px;
}

/* ---------- Detail Card ---------- */
.detail-card{
  background: linear-gradient(180deg, #0b1325 0%, #0a1a31 100%);
  border:1px solid #163a70;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(3,12,28,.45), inset 0 1px 0 rgba(255,255,255,.03);
  padding:16px;
}

/* Two-column grid on desktop, single column on mobile */
.detail-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width: 900px){
  .detail-grid{
    grid-template-columns: 1.2fr 1fr; /* gallery | info */
  }
}

/* ---------- Gallery ---------- */
.gallery { width:100%; }

.main-image-container{
  position:relative;
  border:1px solid #12305a;
  border-radius:12px;
  background:#0b1325;
  overflow:hidden;
  margin-bottom:10px;
}
.main-image{
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display:block;
}

/* Carousel arrows */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:none;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  background:rgba(0,0,0,.45);
  color:#fff;
  transition:filter .15s ease, background .15s ease;
}
.arrow:hover{ filter:brightness(1.15); }
.arrow.left{ left:10px; }
.arrow.right{ right:10px; }

/* Thumbnails (allow horizontal scroll without moving the whole page) */
.thumbnail-gallery{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;       /* keep sideways scroll local to thumbnails */
}
.thumbnail{
  width:58px;
  height:58px;
  border-radius:8px;
  border:2px solid transparent;
  object-fit:cover;
  flex:0 0 auto;
  cursor:pointer;
  transition:border-color .2s ease, transform .12s ease;
}
.thumbnail:hover{ transform: translateY(-1px); }
.thumbnail.active{ border-color:#2563eb; }

/* ---------- Info ---------- */
.info { width:100%; }

.pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:2px 0 14px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #163a70;
  background:#0b1325;
  color:#d7e6ff;
  font-size:13px;
  font-weight:700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  overflow-wrap:anywhere;               /* long values won’t push layout */
}
.pill.ok{ border-color:#126b3a; background:#0d2a1a; color:#c9ffe0; }
.pill.warn{ border-color:#8a1e24; background:#2a0d12; color:#ffd3d3; }

/* Purchase button */
.purchase-seat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  border-radius:10px;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  border:1px solid #2563eb;
  background:#2563eb;
  color:#fff;
  box-shadow:0 6px 18px rgba(2,8,23,.45);
  transition: transform .12s ease, filter .15s ease, box-shadow .2s ease, border-color .2s ease;
  max-width:100%;                       /* <-- never exceed container */
}
.purchase-seat:hover{
  filter:brightness(1.06);
  transform: translateY(-1px);
}

/* Description */
.description-section{
  margin-top:16px;
  padding:14px;
  border-radius:12px;
  background:#0b1325;
  border:1px solid #12305a;
  color:#cfe1ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.description-section h2{
  margin:0 0 8px;
  font-size:18px;
  color:#eaf3ff;
}
.description-section p{ margin:0; line-height:1.55; }

/* Images should never cause sideways scroll */
img{ max-width:100%; height:auto; display:block; }

/* --------- Mobile-specific hardening --------- */
@media (max-width: 768px){
  .webinar-detail-page{ padding:18px 12px; }

  /* Make the button fill the card but never overflow */
  .purchase-seat{
    display:block;            /* block fixes inline-flex width quirks */
    width:100%;               /* fill container */
    max-width:100%;           /* no overflow */
    text-align:center;        /* keep icon+text centered */
    box-sizing:border-box;    /* include padding in the width */
    margin: 0;                /* no accidental side margins */
  }

  /* Keep thumbnails from forcing horizontal page scroll */
  .thumbnail-gallery { padding-inline: 2px; }
}

/* Safety: wrap long bits so nothing widens the page */
.webinar-hero h1, .webinar-hero p,
.pill, .purchase-seat, .description-section p {
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* --- Footer font reset (append at end of webinars.css) --- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

footer, .site-footer {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;          /* force normal weight */
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased;  /* reduce “bold-ish” rendering */
  -moz-osx-font-smoothing: grayscale;
}

/* Only reset common text elements, avoid touching FA icon weights */
footer p,
footer a,
footer li,
footer span,
footer small {
  font-weight: 400 !important;
}

/* If your footer uses <strong>/<b>, keep them semi-bold, not heavy */
footer strong,
footer b {
  font-weight: 600 !important;
}

/* Keep footer headings from inheriting 800 if present elsewhere */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  font-weight: 600 !important;
}