/* styles.css (UPDATED v3)
   - Fix: hamburger closed-state spacing exact + robust open-state
   - Fix: contact heading spacing on mobile matches other headings
   - Preserves previous v2 structure & animations
*/

/* ------------------ font ------------------ */
@font-face {
  font-family: "InterVar";
  src: url("/assets/Font/Inter/Inter-VariableFont_opsz\,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #ffffff;
  --surface: #f7f7f8;
  --text: #0f1720;
  --muted: #556070;
  --accent: #EB0028;
  --glass: rgba(255,255,255,0.6);
  --nav-height: 68px;
  --shadow: 0 6px 18px rgba(16,24,40,0.06);
  --transition: 220ms ease;
  --hero-max-width: 1100px;
  --btn-radius: 12px;

  /* hamburger tuning */
  --hb-width: 22px;
  --hb-thickness: 3px;
  --hb-gap: 7px; /* visual gap between center and top/bottom lines */
}

/* Dark theme variables applied via html[data-theme="dark"] */
html[data-theme="dark"]{
  --bg: #0f1113;
  --surface: #14171a;
  --text: #eef5fb;
  --muted: #b3bcc6;
  --accent: #EB0028;
  --glass: rgba(22,24,28,0.55);
  --shadow: 0 8px 28px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f1113;
    --surface: #14171a;
    --text: #eef5fb;
    --muted: #b3bcc6;
    --accent: #EB0028;
  }
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "InterVar", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  transition: background var(--transition), color var(--transition);
  overflow-x:hidden; /* avoid stray horizontal scroll on mobile */
}

.sup { font-size: 0.52em; vertical-align: super; color: var(--accent); }
.brand { white-space: nowrap; }
.brand-mark { color: var(--accent); font-weight: 900; }
.brand-tail { color: var(--text); font-weight: 500; }

/* helpers */
.container{ width:100%; max-width:var(--hero-max-width); margin:0 auto; padding:0 1rem; }
.visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px); padding:0!important; border:0!important; height:1px!important; width:1px!important; overflow:hidden!important; white-space:nowrap!important; }

/* header fixed */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-height);
  backdrop-filter: blur(6px);
  background: linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.5));
  display:flex; align-items:center;
  border-bottom:1px solid rgba(0,0,0,0.04);
}
html[data-theme="dark"] .site-header{
  background: linear-gradient(to bottom, rgba(16,18,20,0.6), rgba(16,18,20,0.35));
  border-bottom:1px solid rgba(255,255,255,0.03);
}

/* ensure main content isn't hidden under fixed header */
main{ padding-top: calc(var(--nav-height) + 12px); }

/* nav layout */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; }

/* Logo */
.logo img{
  height:44px;
  width:auto;
  display:block;
  object-fit:contain;
  transition: height 180ms ease;
}

/* Dark mode logo swap (keeps src fallback) */
html[data-theme="dark"] .logo img{
  content: url("./assets/logos/logo_dark.png");
}

/* nav-links (desktop) */
.nav-links{ list-style:none; display:flex; gap:1.1rem; margin:0; padding:0; align-items:center; }
.nav-links a{ text-decoration:none; letter-spacing:0.06em; color:var(--text); font-weight:600; font-size:.95rem; padding:.45rem .6rem; border-radius:8px; }
.nav-links a:hover, .nav-links a:focus{ background:var(--glass); }

/* controls */
.controls{ display:flex; align-items:center; gap:.6rem; }

/* theme toggle: image-based track (unchanged) */
.theme-toggle{ background:none; border:0; padding:6px; cursor:pointer; display:inline-flex; align-items:center; }
.theme-track{
  display:inline-grid; align-items:center; position:relative;
  width:64px; height:34px; border-radius:999px; background:rgba(0,0,0,0.06); padding:6px;
  overflow:hidden;
}
.theme-img{
  position:absolute; top:50%; transform:translateY(-50%);
  width: clamp(14px, 2.6vw, 18px); height:auto; object-fit:contain; pointer-events:none;
  transition: opacity 160ms ease, transform 220ms ease;
  z-index:1;
}
.theme-img-sun{ left:8%; transform: translateY(-50%); }
.theme-img-moon{ right:8%; transform: translateY(-50%); opacity:0.6; }
.theme-thumb{
  position:absolute; width:22px; height:22px; border-radius:50%; background:#fff; left:6px; top:50%; transform:translateY(-50%); box-shadow:0 6px 14px rgba(2,6,23,0.12);
  transition: left 220ms cubic-bezier(.2,.9,.2,1), background 220ms ease;
  z-index:2;
}
html[data-theme="dark"] .theme-track{ background:rgba(255,255,255,0.06); }
html[data-theme="dark"] .theme-thumb{ left: calc(100% - 6px - 22px); background:var(--accent); }
html[data-theme="dark"] .theme-img-moon{ opacity:1; }
html[data-theme="dark"] .theme-img-sun{ opacity:0.95; }

/* small variant for mobile menu placement */
.theme-toggle.small .theme-track{ width:46px; height:26px; padding:4px; }
.theme-toggle.small .theme-thumb{ width:18px; height:18px; left:4px; }
html[data-theme="dark"] .theme-toggle.small .theme-thumb{ left: calc(100% - 4px - 18px); }

/* hamburger
   Reworked to always derive spacing from center:
   - uses CSS variables for easy tuning (--hb-gap)
   - closed state: top/middle/bottom are same top + translateY offsets
   - open state: both rotating bars moved to center and rotated
*/
.hamburger{ display:none; position:relative; width:48px; height:48px; background:transparent;border:0;padding:6px;cursor:pointer;border-radius:10px; }
.hamburger span{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:center;
  /* initial transform sets horizontal centering and vertical offset */
  transform: translateX(-50%) translateY(0);
  height:var(--hb-thickness);
  width:var(--hb-width);
  background:var(--text);
  border-radius:3px;
  transition: transform 180ms ease, opacity 160ms ease;
  will-change:transform,opacity;
}
/* closed state offsets */
.hamburger span:nth-child(1){ transform: translateX(-50%) translateY(calc(-1 * var(--hb-gap))); }
.hamburger span:nth-child(2){ transform: translateX(-50%) translateY(0); }
.hamburger span:nth-child(3){ transform: translateX(-50%) translateY(var(--hb-gap)); }

/* open state: middle line disappears; top/bottom collapse to center and rotate */
.hamburger.open span:nth-child(1){
  transform: translateX(-50%) translateY(0) rotate(45deg);
}
.hamburger.open span:nth-child(2){
  opacity:0; transform: translateX(-50%) translateY(0) scaleX(0);
}
.hamburger.open span:nth-child(3){
  transform: translateX(-50%) translateY(0) rotate(-45deg);
}

/* mobile nav (hidden by default, toggled by .open) */
.mobile-menu{
  display:none;
  position:absolute; top:100%; left:0; right:0; background:var(--surface); border-top:1px solid rgba(0,0,0,0.04); padding:10px 1rem; box-shadow:var(--shadow);
  z-index:110;
}
.mobile-menu.open{ display:block; animation: slideDown 220ms cubic-bezier(.2,.9,.2,1); }
@keyframes slideDown { from { transform: translateY(-6px); opacity:0 } to { transform:none; opacity:1 } }
.mobile-menu a{ display:block; padding:.8rem 0; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:0.06em; }

/* mobile menu top row */
.mobile-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.mobile-close{ background:none;border:0;padding:6px;font-weight:700;cursor:pointer; }


/* content & layout */
.content-list{ padding:3.0rem 1rem; }
.content-inner{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.content-media img{ width:100%; border-radius:10px; object-fit:cover; box-shadow:var(--shadow); }
.cta{ display:inline-block; padding:.5rem .9rem; border-radius:var(--btn-radius); background:linear-gradient(90deg,var(--accent),#ff6b3c); color:white; font-weight:700; position:relative; overflow:hidden; transition: transform 180ms ease; text-decoration:none; }
.cta:hover{ transform: translateY(-3px); }

/* hover gradient animation on buttons (subtle) */
.btn{
  padding:.6rem .95rem; border-radius:var(--btn-radius); background:var(--surface); border:0; cursor:pointer; font-weight:700;
  transition: background 220ms ease, transform 180ms ease, box-shadow 220ms ease;
}
.btn.primary{
  background: linear-gradient(90deg,var(--accent),#ff6b3c);
  color:#fff;
  box-shadow: 0 8px 22px rgba(235,0,40,0.12);
}
.btn.primary:hover{
  transform: translateY(-4px) scale(1.01);
  background-size:200% 100%;
  background-position: right center;
  box-shadow: 0 12px 32px rgba(235,0,40,0.14);
}

/* social strip */
.social-strip{
  position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:98;
  display:flex; flex-direction:column; gap:.6rem;
}
.social{
  display:flex; align-items:center; justify-content:center; gap:.6rem; text-decoration:none; color:var(--text); background:var(--surface); padding:.5rem .7rem; border-radius:999px; box-shadow:var(--shadow); transition: transform 220ms cubic-bezier(.2,.9,.2,1), background 160ms ease;
  overflow:visible; position:relative;
  min-width:44px; min-height:44px;
}
.social-logo{ width:20px; height:20px; object-fit:contain; display:block; transition: transform 220ms ease; margin:0 auto; }

/* label hidden on mobile by default */
.label{ display:none; white-space:nowrap; font-weight:700; color:var(--text); margin-left:4px; }

/* social hover: glow + subtle 3D lift + reveal label */
.social::after{
  content:"";
  position:absolute; inset:0;
  border-radius:999px;
  pointer-events:none;
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.social:hover, .social:focus{
  transform: translateX(-8px) translateZ(0) scale(1.02);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
.social:hover .social-logo{ transform: scale(1.15) translateZ(0); }
.social-strip:hover .label, .social-strip:focus-within .label{ display:inline-block; }

/* add colorful accent ring on hover */
.social:hover::after{
  box-shadow: 0 8px 28px rgba(235,0,40,0.14);
}

/* privacy note */
.privacy-note{ font-size:.9rem; color:var(--muted); margin-top:.6rem; }

/* scroll-fade (invisible until observed) */
.scroll-fade{ opacity:0; transform: translateY(14px); transition: opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1); will-change:opacity,transform; }
.scroll-fade.visible{ opacity:1; transform:none; }

/* responsive */
@media (max-width:900px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  .controls > .theme-toggle { display:none; }
  .social-strip{ right:8px; top:auto; bottom:12px; transform:none; flex-direction:row; }
  .social{
    padding:.45rem; min-width:44px; border-radius:8px;
    justify-content:center;
    align-items:center;
  }
  .social-logo{ width:20px; height:20px; }
  .label{ display:none !important; }
  .hero-overlay{ padding:2.25rem 1rem; }
  .content-inner{ grid-template-columns:1fr; }
  .marquee-track .sponsor-logo{ width:120px; height:60px; }

  /* contact card mobile polish:
     - collapse outer background effect (avoid double framed look)
     - make mailto full width and centered
  */
  .contact{ padding:1.4rem 0; margin:1.2rem auto; }
  .contact-card{ width:100%; border-radius:10px; padding:0.95rem; box-shadow: 0 8px 18px rgba(0,0,0,0.06); }
  .contact-card .mailto{
    display:flex; width:100%; justify-content:center; padding:.8rem 1rem; font-size:1rem;
  }
  .contact-card .privacy-note{ font-size:.88rem; padding-top:0.4rem; }
}

/* very narrow screens: center logo + hamburger
   Also bump the hero text min-size on very small screens (user requested larger on smartphone)
*/
@media (max-width:420px){
  .nav{ justify-content:center; }
  .logo{ order:0; margin:0; }
  .controls{ position:absolute; right:10px; top:10px; }
  .hero-text{ font-size: clamp(2.0rem, 9.6vw, 3.6rem); }
  .hamburger{ width:44px; height:44px; }
  /* scale hamburger to fit */
  .hamburger span{ width:20px; height:3px; }
  /* ensure gap scales nicely on tiny screens */
  :root { --hb-gap: 6px; }
}

/* small polish */
.footer-inner{ display:flex; 
  display: flex;
  align-items: flex-end; /* puts the badge visually at the bottom edge */
  justify-content:space-between;
  gap:1rem;
  padding:1.4rem 0;
}

.footer-badge img {
  display: block;
  height: auto;
  width: clamp(120px, 14vw, 220px);
}


/* Dark mode image swap (same technique as navbar logo) */
html[data-theme="dark"] .footer-badge img{
  content: url("/assets/logos/TEDxWithDisclaimer_dark.png");
}

/* Optional: tighten on very small screens */
@media (max-width: 420px){
  .footer-badge img{
    width: clamp(110px, 40vw, 200px);
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding-bottom: 60px; /* enough space for the social icons */
  }
}

a.hyper-link{ color:var(--accent); text-decoration:none; font-weight:700; }

/* utility */
.hidden{ display:none !important; }

/* -----------------------
   Explicit Safe Padding
   Use the .safe-pad class to opt-in to horizontal padding
   (preferred over global "apply to everything except X")
   ----------------------- */

/* responsive safe gutter: min 16px, scales a bit with width, max 48px */
:root { --safe-gutter-min: 16px; --safe-gutter-max: 48px; }

/* a single helper to compute the padding (you can tune the middle value) */
.safe-pad {
  padding-left: clamp(var(--safe-gutter-min), 4vw, var(--safe-gutter-max));
  padding-right: clamp(var(--safe-gutter-min), 4vw, var(--safe-gutter-max));
  box-sizing: border-box;
}

/* smaller gutter on very narrow screens */
@media (max-width:420px) {
  .safe-pad { padding-left: 12px; padding-right: 12px; }
}

/* ensure container default gutter (if you keep container's padding) doesn't conflict:
   if you want .container to not apply its own gutter when used with .safe-pad,
   you can explicitly reset it (optional) */
.container.safe-pad {
  padding-left: clamp(var(--safe-gutter-min), 4vw, var(--safe-gutter-max));
  padding-right: clamp(var(--safe-gutter-min), 4vw, var(--safe-gutter-max));
}