/* ========== All In Blind — Light Theme (mobile-first, accessibility tuned) ========== */
/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--ring, rgba(13,110,253,.35)); outline-offset: 2px; }

/* Theme */
:root{
  --bg:#f9fafb;
  --bg-soft:#ffffff;
  --ink:#0a1020;
  --muted:#1f2937;
  --accent:#0d47a1;           /* single strong accent (deep blue) */
  --accent-2:#0d6efd;          /* hover/alt accent */
  --ring: rgba(13, 71, 161, .25);
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --max: 1200px;
  --radius: 16px;
}

body{
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.7;                 /* increased for readability */
  font-size: 17px;                  /* bump base font size for mobile */
}

/* Layout */
.container{ max-width: var(--max); margin: 0 auto; padding: 20px; }
header{ background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; position: relative; }
.brand{ font-weight:800; letter-spacing:.2px; text-decoration:none; color:var(--ink); padding:10px 12px; border-radius:12px; }
.brand img.brand-logo{ width:28px; height:28px; vertical-align:middle; margin-right:6px; display:inline-block; border-radius:6px; }
.brand span{ vertical-align:middle; }
.breadcrumbs{ color: var(--muted); font-size: .95rem; margin-top: 4px; }
.breadcrumbs a{ color: inherit; text-decoration: none; }
.breadcrumbs a:hover{ text-decoration: underline; }

/* Allow breadcrumbs to wrap nicely on small screens */
.breadcrumbs{ white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

.nav ul{ list-style:none; display:flex; gap:8px; margin:0; padding:0; }
.nav a{ color:var(--ink); text-decoration:none; padding:10px 12px; border-radius:10px; transition: background .2s ease, transform .12s ease; }
.nav a:hover{ background: #f1f5f9; }
.nav a.active{ background:#e9f0ff; color:#0b3bdb; }
.nav a:focus-visible{ box-shadow: 0 0 0 3px var(--ring); }

.nav-search{ margin-left: 8px; border:1px solid var(--border); border-radius:10px; padding:8px 10px; min-width: 160px; }

/* Hamburger */
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:#fff; }
.nav-toggle:focus-visible{ box-shadow: 0 0 0 3px var(--ring); }
.nav-menu{ display:flex; }
@media (max-width: 820px){
  .nav-menu{ display:none; position:absolute; left:20px; right:20px; top:70px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px; flex-direction:column; gap:6px; z-index: 20; }
  .nav.open .nav-menu{ display:flex; }
  .brand{ padding-left:0; }
  .nav-search{ width:100%; }
}

/* Hero */
.hero{
  background: linear-gradient(180deg, #ffffff, #f6f8ff);
  border:1px solid var(--border);
  border-radius:24px;
  padding: clamp(18px, 4vw, 36px);
  box-shadow: var(--shadow);
  margin: 14px 0 24px;
}
.hero h1{ margin:0 0 8px; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height:1.2; word-break: break-word; overflow-wrap: anywhere; }
.lead{ color: var(--muted); font-size: clamp(1.05rem, 2.8vw, 1.2rem); line-height: 1.75; }

/* Typography */
h1, h2, h3{ line-height:1.25; margin:18px 0 10px; }
h2{ font-size: clamp(1.28rem, 2.8vw, 1.65rem); }
h3{ font-size: clamp(1.12rem, 2.4vw, 1.28rem); }
p{ margin:12px 0; color:#18212f; }
small, .note{ color: var(--muted); }
a{ color: var(--accent); }
a:hover{ color: var(--accent-2); }

/* Cards */
.cards h2{ margin-top: 24px; }
.card-grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .card-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px){ .card-grid{ grid-template-columns: 1fr 1fr 1fr; } }
.card, .blog-item{
  border-radius: var(--radius);
  padding: 16px;
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);           /* subtle elevation */
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.filters{ display:flex; gap:8px; align-items:center; margin: 8px 0 12px; }
.filters input[type="search"], .filters select{
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:#fff;
}
.card:hover, .blog-item:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.10); }
.card h3{ margin: 0 0 6px; }
.card p{ margin: 0; color: var(--muted); }

/* Key blocks */
.keyfacts ul, .seasonality ul{ list-style: disc; padding-left: 20px; }
aside{ background: #f9fbff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }

/* Generic Tables */
table{ width:100%; border-collapse: collapse; }
th, td{ padding:12px; border-bottom: 1px solid var(--border); text-align:left; }
th{ background:#f3f6fb; color:#0b1220; }

/* FAQ Table */
.faq-table{ width:100%; border-collapse: collapse; border:1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.faq-table th, .faq-table td{ padding:14px; border-bottom: 1px solid var(--border); text-align:left; vertical-align: top; }
.faq-table th{ background:#eef3ff; color:#0e223a; width: 24%; }
.faq-table tr:last-child td{ border-bottom:none; }
.faq-q{ font-weight:700; }
.faq-a{ color:#28384a; }

/* Carousel (logos) */
.carousel{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type: x mandatory; padding: 8px 4px; }
.carousel::-webkit-scrollbar{ height:8px; }
.carousel::-webkit-scrollbar-thumb{ background:#c7d2fe; border-radius: 8px; }
.carousel .item{ flex: 0 0 auto; width: 140px; height: 70px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:12px; background:#fff; scroll-snap-align: start; }
@media (max-width:480px){
  .carousel .item{ width: 120px; height: 64px; }
}

/* Mega Menu (if used) */
.mega{ position: absolute; left:0; right:0; top:100%; background:#fff; border:1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); display:none; padding:16px; }
.nav li:hover .mega{ display:block; }
.mega-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
.mega-card{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
.mega-card img{ width:100%; height:100px; object-fit:cover; }
.mega-card .cap{ padding:8px 10px; font-size:.95rem; color:#374151; }

/* Footer */
.footer{ margin-top: 36px; padding-top: 12px; border-top:1px solid var(--border); color: var(--muted); }
.footer a{ color: var(--accent-2); text-decoration: none; }
.footer a:hover{ text-decoration: underline; }

/* Reveal animation (gentle) */
.reveal{ opacity:0; transform: translateY(8px); animation: reveal .5s ease forwards; }
@keyframes reveal{ to{ opacity:1; transform:none; } }


/* --- NAV Standardization Fixes --- */
.nav-list{ list-style: none; display:flex; gap:10px; margin:0; padding:0; }
.nav-list > li{ margin:0; padding:0; }
.nav-list a{ display:inline-block; padding:10px 12px; border-radius:10px; text-decoration:none; }
/* Ensure no stray bullets anywhere inside header */
header ul{ list-style: none; margin: 0; padding-left: 0; }

/* --- Image fallback: hide broken/missing --- */
img[src=""], img:not([src]), img[onerror]{ display:none; }
img{ height:auto; max-width:100%; }

/* --- Layout refinements --- */
@media (min-width: 1024px){
  .container{ padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 820px){
  header .nav{ align-items: center; }
  .brand{ font-size: 1.05rem; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav .nav-list{ flex-wrap: wrap; }
  .nav .nav-list a{ max-width: 100%; }
}

/* Ultra-small devices: ensure no horizontal overflow */
@media (max-width: 360px){
  body, .container, header, main, footer{ overflow-x: hidden; }
  .nav{ gap:8px; }
  .nav-toggle{ width:38px; height:38px; }
  h1, h2, h3{ word-break: break-word; overflow-wrap: anywhere; }
}

/* --- Hero spacing & cards --- */
.hero{ margin-top: 18px; }
.cards{ margin-top: 18px; }
.card-grid .card{ min-height: 108px; display:block; }

/* --- Carousel sanity on desktop/tablet --- */
.carousel{ display:flex; gap:16px; overflow-x:auto; padding: 4px; scroll-snap-type: x mandatory; }
.carousel .item{ flex: 0 0 auto; width: 140px; height: 70px; scroll-snap-align: start; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:12px; background:#fff; }
@media (min-width: 900px){
  .carousel{ overflow-x: visible; flex-wrap: wrap; }
  .carousel .item{ width: 160px; height: 80px; }
}

/* --- Tablet breakpoint grid --- */
@media (min-width: 700px) and (max-width: 1023px){
  .grid.two{ grid-template-columns: 3fr 2fr; }
}

/* --- Footer spacing --- */
.footer{ margin-bottom: 40px; }

/* --- Carousel 2.0 (auto-scroll + pause on hover, no duplicates) --- */
.carousel{ overflow:hidden; position:relative; border:1px solid var(--border); border-radius:12px; background:#fff; }
.carousel-track{ display:flex; gap:16px; padding:10px; animation: car-scroll 30s linear infinite; }
.carousel:hover .carousel-track{ animation-play-state: paused; }
.carousel .logo{ flex: 0 0 auto; width: 180px; height: 80px; display:flex; align-items:center; justify-content:center; }
.carousel .logo img{ width: 100%; height: 100%; object-fit: contain; }
@keyframes car-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}


/* Stronger hover states for links & buttons */
a:hover{ text-decoration: underline; }
.btn{ display:inline-block; padding:10px 14px; border-radius:10px; background:var(--accent); color:#fff; text-decoration:none; border:1px solid #0b5ed7; transition: filter .2s ease, transform .08s ease; }
.btn:hover{ filter: brightness(0.95); transform: translateY(-1px); }

/* ========== Homepage Specific Styles ========== */
/* Critical CSS for homepage - moved from inline */
*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}:focus-visible{outline:2px solid rgba(13,110,253,.35);outline-offset:2px}:root{--bg:#f9fafb;--bg-soft:#ffffff;--ink:#0a1020;--muted:#1f2937;--accent:#0d47a1;--accent-2:#0d6efd;--ring:rgba(13,71,161,.25);--card:#ffffff;--border:#e5e7eb;--shadow:0 8px 24px rgba(0,0,0,.08);--max:1200px;--radius:16px}body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;line-height:1.7;font-size:17px}.container{max-width:var(--max);margin:0 auto;padding:20px}header{background:var(--bg-soft);border-bottom:1px solid var(--border)}.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative}.brand{font-weight:800;letter-spacing:.2px;text-decoration:none;color:var(--ink);padding:10px 12px;border-radius:12px}.brand img.brand-logo{width:28px;height:28px;vertical-align:middle;margin-right:6px;display:inline-block;border-radius:6px}.brand span{vertical-align:middle}.hero{text-align:center;padding:60px 20px;background:linear-gradient(135deg,var(--bg-soft) 0%,#f8fafc 100%)}.hero h1{font-size:2.5rem;font-weight:800;margin:0 0 20px;color:var(--ink);line-height:1.2}.hero .lead{font-size:1.25rem;color:var(--muted);max-width:600px;margin:0 auto 40px;line-height:1.6}.cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:white;padding:16px 32px;border-radius:var(--radius);text-decoration:none;font-weight:600;transition:all .2s ease;box-shadow:var(--shadow)}.cta:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 12px 32px rgba(13,71,161,.2)}.grid{display:grid;gap:24px;margin:40px 0}.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:all .2s ease;box-shadow:var(--shadow)}.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.12)}.card h3{font-size:1.5rem;font-weight:600;margin:0 0 12px;color:var(--ink)}.card p{color:var(--muted);margin:0 0 16px;line-height:1.6}.card a{color:var(--accent);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:color .2s ease}.card a:hover{color:var(--accent-2)}.card a::after{content:"→";transition:transform .2s ease}.card a:hover::after{transform:translateX(4px)}.section{padding:60px 20px}.section h2{font-size:2rem;font-weight:700;text-align:center;margin:0 0 40px;color:var(--ink)}.footer{background:var(--ink);color:white;text-align:center;padding:40px 20px;margin-top:60px}.footer p{margin:0;color:rgba(255,255,255,.8)}.footer a{color:white;text-decoration:none}.footer a:hover{text-decoration:underline}.carousel{overflow:hidden;position:relative;background:var(--bg-soft);border-radius:var(--radius);padding:20px;margin:20px 0}.carousel-track{display:flex;gap:16px;animation:scroll 30s linear infinite}.carousel .item{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:16px 20px;background:white;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .2s ease;min-height:48px;min-width:48px}.carousel .item:hover{transform:scale(1.05)}.carousel .item img{width:32px;height:32px;border-radius:4px}.carousel .item span{font-weight:600;color:var(--ink)}.carousel .item a{display:flex;align-items:center;gap:8px;padding:8px;min-height:44px;min-width:44px;text-decoration:none;color:inherit}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:20px 0}.flex-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.btn{background:var(--accent);color:white;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn:hover{background:var(--accent-2);transform:translateY(-1px)}.faq-table{width:100%;border-collapse:collapse;margin:20px 0}.faq-q{font-weight:600;padding:16px;background:var(--bg-soft);border-bottom:1px solid var(--border);text-align:left}.faq-a{padding:16px;border-bottom:1px solid var(--border)}input{width:100%;padding:12px;border:1px solid var(--border);border-radius:8px;font-size:16px;margin:8px 0}label{font-weight:600;color:var(--ink)}small{color:var(--muted);font-size:14px}.nav-menu{display:flex;align-items:center;gap:20px}.nav-list{display:flex;list-style:none;margin:0;padding:0;gap:20px}.nav-list li{margin:0}.nav-list a{color:var(--ink);text-decoration:none;font-weight:500;padding:8px 12px;border-radius:8px;transition:all .2s ease}.nav-list a:hover{background:var(--bg);color:var(--accent)}.nav-list a.active{background:var(--accent);color:white}.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;padding:8px}.nav-search{display:none;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;width:200px}.breadcrumbs{margin-top:10px;font-size:14px;color:var(--muted)}.breadcrumbs a{color:var(--accent);text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@media (max-width:768px){.hero h1{font-size:2rem}.hero .lead{font-size:1.125rem}.grid-2,.grid-3{grid-template-columns:1fr}.section{padding:40px 20px}.section h2{font-size:1.75rem}.card-grid{grid-template-columns:1fr}.flex-row{flex-direction:column;align-items:flex-start}.nav-menu{position:absolute;top:100%;left:0;right:0;background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;padding:20px;display:none;flex-direction:column;gap:10px;box-shadow:var(--shadow)}.nav-menu.open{display:flex}.nav-list{flex-direction:column;gap:10px}.nav-toggle{display:block}.nav-search{display:block;width:100%}}