/* ======================================
   aidenelias.com • components/style.css
   Dark theme • Mobile-first • LTR default
   Carousel compatible with: #vfPrev/#vfNext/#vfTrack/.vf-item
   ====================================== */

/* ---------- Theme Tokens ---------- */
:root{
  /* Surfaces & text */
  --bg:#0b1220;
  --ink:#e9f0ff;
  --muted:#9bb0d1;

  --card:#f2f7ff;          /* light card on dark bg */
  --ink-on-card:#0b1220;

  /* Brand */
  --accent:#7cc5ff;
  --accent-ink:#042d46;

  /* Status */
  --ok:#42e6a0; --warn:#ff0019; --bad:#ff8fa3;

  /* Lines & effects */
  --border:#243655;
  --stroke:#22314d;
  --shadow:0 10px 24px rgba(0,0,0,.28);

  /* Rounding & sizing */
  --radius:16px; --radius-sm:12px; --radius-lg:22px;
  --maxw:1100px;

  /* Motion */
  --t:160ms; --t2:300ms;
}

/* Optional light mode */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9ff; --ink:#0b1220; --muted:#5b6b85;
    --card:#ffffff; --ink-on-card:#0b1220;
    --border:#e7ebf3; --stroke:#dfe6f3;
    --shadow:0 10px 30px rgba(18,38,63,.08);
  }
}

/* ---------- Base Reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw); margin-inline:auto; padding:16px}
.page-wrap{max-width:var(--maxw); margin-inline:auto; padding:16px}
.main-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:992px){ .main-grid{grid-template-columns:1fr 300px} }

.card{
  background:var(--card); color:var(--ink-on-card);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ---------- Header / Top Nav ---------- */
header.site, .site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg, rgba(14,25,48,.92), rgba(14,25,48,.72));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.site-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; flex-wrap:wrap;
}
.logo{font-weight:800; font-size:clamp(18px,2vw,22px)}
.logo span{color:var(--accent)}

.site-nav, .primary-nav{
  display:flex; align-items:center; gap:10px;
  overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.site-nav::-webkit-scrollbar, .primary-nav::-webkit-scrollbar{display:none}
.site-nav a, .primary-nav a{
  color:var(--ink); opacity:.9; white-space:nowrap;
  padding:.4rem .6rem; border-radius:10px; border:1px solid transparent;
}
.site-nav a:hover, .primary-nav a:hover,
.site-nav a[aria-current="page"], .primary-nav a[aria-current="page"]{
  opacity:1; text-decoration:none; border-color:var(--border);
  background:rgba(124,197,255,.08);
}

/* ---------- Footer ---------- */
footer.site, .site-footer, .footer{
  padding:28px 24px; text-align:center;
  border-top:1px solid var(--border); color:var(--muted);
}
footer a{color:inherit}

/* ---------- Sidebar ---------- */
.sidebar{padding:16px; border-radius:var(--radius); height:max-content}
.sidebar h3{margin:.2rem 0 .6rem}
.sidebar a{display:block; margin:.35rem 0; color:var(--ink-on-card); opacity:.85}
.sidebar a:hover{opacity:1}
@media (max-width:991.98px){ .sidebar{display:none !important} }

/* ---------- Article ---------- */
.article{padding:20px}
.article header h1{margin-top:0; line-height:1.25}
.article .meta{color:var(--muted); font-size:.95rem}
.note{
  background:blue; color:white;
  border-inline-start:4px solid var(--accent);
  padding:12px 14px; border-radius:12px; margin:16px 0;
}
.example{
  background:#f7f9fc; color:#0b1220;
  border-left:4px solid #2563eb; padding:10px; border-radius:12px;
  margin:12px 0;
}

/* ---------- Carousel (button-driven) ----------
   Expects:
   .vf-controls > #vfPrev #vfNext
   #vfTrack.vf-track containing <a.vf-item>
-----------------------------------------------*/
.vf-carousel{position:relative; border-block:1px solid var(--border); background:rgba(20,30,50,.5)}
.vf-carousel .container{padding-block:10px}

/* Controls */
.vf-controls{
  position:absolute; inset-block:0; inset-inline-end:6px;
  display:flex; align-items:center; gap:6px; pointer-events:none;
}
.vf-nav{
  pointer-events:auto; appearance:none; border:1px solid var(--border);
  background:rgba(255,255,255,.08); color:var(--ink);
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-size:18px; line-height:1;
  transition:transform var(--t), background var(--t), border-color var(--t);
}
.vf-nav:hover{transform:translateY(-1px); background:rgba(124,197,255,.12); border-color:var(--stroke)}

/* Track + items */
.vf-track{
  display:flex; align-items:center; gap:18px;
  overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-inline:4px; scroll-snap-type:x mandatory;
}
.vf-track::-webkit-scrollbar{display:none}
.vf-item{
  flex:0 0 auto; scroll-snap-align:center;
  color:var(--accent); background:transparent;
  border:1px solid transparent; border-radius:12px;
  padding:.5rem .7rem; white-space:nowrap; font-weight:700;
}
.vf-item:hover{background:rgba(124,197,255,.08); border-color:var(--border); text-decoration:none}

/* ---------- Tables ---------- */
.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  position:relative; margin:16px 0 24px; padding-bottom:2px;
}
.table-wrap::before, .table-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:24px; pointer-events:none;
}
.table-wrap::before{inset-inline-start:0; box-shadow:inset 12px 0 12px -12px rgba(0,0,0,.15)}
.table-wrap::after{inset-inline-end:0; box-shadow:inset -12px 0 12px -12px rgba(0,0,0,.15)}

.table{
  width:100%; min-width:520px;
  border-collapse:separate; border-spacing:0;
  background:var(--card); color:var(--ink-on-card);
  border:1px solid var(--stroke); border-radius:14px; overflow:hidden;
}
.table th, .table td{
  padding:12px 14px; font-size:15px; line-height:1.6; vertical-align:top;
  border-bottom:1px solid var(--stroke);
}
.table thead th{font-weight:700; background:rgba(255,255,255,.6)}
.table tbody tr:nth-child(odd) td{background:rgba(124,197,255,.06)}
.table tbody tr:hover td{background:rgba(124,197,255,.1)}
.table tr:last-child td{border-bottom:0}

/* ---------- Forms & Buttons ---------- */
input, textarea, select{
  font:inherit; font-size:16px; /* iOS: prevent zoom */
  color:var(--ink); background:#0f1a2d;
  border:1px solid var(--border); border-radius:12px;
  padding:.7rem .9rem; width:100%;
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
input::placeholder, textarea::placeholder{color:#9bb0d1; opacity:.85}
input:focus, textarea:focus, select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,197,255,.25);
  background:#112138; outline:none;
}
label{display:block; margin:.35rem 0 .25rem; color:var(--muted)}
button, .btn{
  appearance:none; cursor:pointer; user-select:none;
  border:1px solid var(--border); background:transparent; color:var(--ink-on-card);
  padding:.65rem .9rem; border-radius:12px;
  transition:transform var(--t), background var(--t), border-color var(--t);
}
button:hover, .btn:hover{transform:translateY(-1px); background:rgba(124,197,255,.08); border-color:var(--stroke)}

/* ---------- Utilities ---------- */
.center{text-align:center}
.muted{color:var(--muted)}
.hide{display:none !important}
.p-0{padding:0} .p-1{padding:.25rem} .p-2{padding:.5rem} .p-3{padding:1rem}
.mt-0{margin-top:0} .mb-0{margin-bottom:0} .mt-2{margin-top:.5rem} .mb-2{margin-bottom:.5rem}

/* LTR/RTL helpers (page stays LTR by default) */
.is-rtl{direction:rtl; text-align:right}
.is-ltr{direction:ltr; text-align:left}
.en{direction:ltr}
.ar{direction:rtl}

/* ---------- Accessibility ---------- */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
*{-webkit-tap-highlight-color:rgba(124,197,255,.25)}

/* ---------- Responsive Polishing ---------- */
@media (max-width:900px){
  .container,.page-wrap{padding:14px}
  .article{padding:16px}
  .card{border-radius:14px}
  h1{font-size:1.35rem; line-height:1.35}
  h2{font-size:1.15rem}
}

/* iOS header stability */
@supports (height:100dvh){ header.site, .site-header{ top:0 } }

/* Performance hints for carousel */
.vf-track{ backface-visibility:hidden; transform:translateZ(0) }
/* ===== Header (mobile-first, sticky, pretty) ===== */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(
    180deg,
    rgba(255,102,0,0.96),   /* bright orange */
    rgba(255,102,0,0.85)    /* slightly lighter orange */
  );
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* Top nav: pill links, horizontal scroll on small screens */
header nav {
  display: flex;
  justify-content: center; /* center all links */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
header nav::-webkit-scrollbar { display:none }

header nav a {
  display: inline-block;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;  /* white text on orange */
  font-weight: 600;
  white-space: nowrap;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
header nav a:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.45);
  text-decoration: none;
}


/* ===== Carousel (chips marquee, mobile-friendly) ===== */
.carousel-container{
  position: relative;
  overflow: hidden;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(18,26,43,.7), rgba(16,24,39,.7));
  /* subtle fade on edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

/* Track: continuous scroll, pauses on hover/focus */
.carousel{
  display: flex; align-items: center; gap: 16px;
  padding-inline: 12px;
  animation: ae-scroll 32s linear infinite;
  will-change: transform; backface-visibility: hidden; transform: translateZ(0);
}

/* Item chips */
.carousel-item{ flex: 0 0 auto }
.carousel-item a{
  display:inline-block;
  padding: .5rem .75rem;
  border-radius: 999px;
  background: #f2f7ff;           /* light chip for contrast */
  color: #0b1220;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease;
}
.carousel-item a:hover{
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}

/* Smooth marquee */
@keyframes ae-scroll{
  0%   { transform: translateX(0) }
  100% { transform: translateX(-50%) } /* duplicate items in HTML for perfect loop (optional) */
}

/* Pause on hover/focus */
.carousel-container:hover .carousel,
.carousel-container:focus-within .carousel{
  animation-play-state: paused;
}

/* Slower on small screens for readability */
@media (max-width: 800px){
  .carousel{ animation-duration: 45s; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .carousel{ animation: none; }
  .carousel-container{ -webkit-mask-image:none; mask-image:none; }
}

/* Spacing tune for larger screens */
@media (min-width: 992px){
  header nav{ padding: 12px 16px; gap: 12px; }
  .carousel-item a{ padding: .55rem .9rem; }
}
header nav{
  display: flex;
  justify-content: center;   /* ⬅ centers the links */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  flex-wrap: wrap;           /* allows wrapping on small screens */
  overflow-x: auto;          /* still scrolls if too many links */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
header nav::-webkit-scrollbar{ display:none }