/* =========================
   AAK Site – Bootstrap 5 + Custom Theme
   ========================= */

/* ---- Theme Tokens ---- */
:root{
  /* Palette (calm pastels) */
  --ink:#26303a;           /* main text */
  --muted:#5b6b78;         /* secondary text */
  --cream:#fffdf7;         /* page bg */
  --paper:#ffffff;         /* card/bg surfaces */
  --brand:#35a49c;         /* primary (teal) */
  --brand-2:#7b5ce6;       /* secondary (violet) */
  --accent:#ff9b6a;        /* accent (peach) */
  --accent-2:#ffd36e;      /* accent (sun) */
  --ring:rgba(0,0,0,.08);

  /* Layout tokens */
  --header-h: 72px;        /* visual header height w/ fixed navbar */
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --maxw: 1000px;
}

html { scroll-behavior: smooth; } /* optional but nice */
main section { scroll-margin-top: var(--header-h, 80px); }

[hidden]{ display:none !important; }

.justify-text { text-align: justify; text-justify: inter-word; }

/* ---- Resets / Base ---- */
*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% }
body{
  font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(1600px 500px at 120% -20%, #eaf7ff 8%, transparent 60%),
    radial-gradient(1200px 420px at -10% -20%, #fff0f4 12%, transparent 60%),
    var(--cream);
  color:var(--ink);
  display:flex; flex-direction:column;
  line-height:1.55;
  /* Make room for fixed-top navbar */
  padding-top: var(--header-h);
  scroll-behavior: smooth;
}

/* Anchor offset for in-page nav */
:target { scroll-margin-top: calc(var(--header-h) + 12px); }

a,button,input,textarea{ font:inherit; color:inherit }

/* =========================
   NAVBAR (Bootstrap overrides)
   ========================= */

/* Gradient background that matches your theme */
.aak-navbar{
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--brand) 86%, white 14%) 0%,
    color-mix(in oklab, var(--brand-2) 86%, white 14%) 100%
  );
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Brand/logo sizing without making the header too tall */
.aak-logo{
  height: 110px;  /* desktop/tablet default */
  width: auto;
  display: block;
  margin:0px;
  padding:0px;
}

/* Active link emphasis */
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show {
  color: #fff;
  text-shadow: 0 0 1px rgba(255,255,255,.2);
}

/* Subtle hover */
.navbar-dark .navbar-nav .nav-link:hover{ opacity:.92 }

/* Phone & small tablet tweaks for header size/logo */
@media (max-width: 576px){
  :root{ --header-h: 88px; }  /* taller navbar on phones */
  .aak-logo{ height: 48px; }
}
@media (min-width: 577px) and (max-width: 768px){
  :root{ --header-h: 84px; }
  .aak-logo{ height: 50px; }
}

/* =========================
   LAYOUT & CONTAINERS
   ========================= */

main{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding: 1.2rem 1rem 2.2rem; /* top already spaced by body padding */
}

.container,
.container-lg,
.container-md { max-width: var(--maxw); }

/* =========================
   SURFACES / CARDS
   (Scoped to main to avoid clobbering Bootstrap .card components elsewhere)
   ========================= */

main .card{
  background:var(--paper);
  border-radius:var(--radius-xl);
  padding:1.5rem 1.25rem;
  margin-bottom:1.1rem;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 12px 30px var(--ring);
  position:relative; overflow:hidden;
}

main .card::after{
  content:"";
  position:absolute; top:-50px; right:-50px; width:160px; height:160px; rotate:25deg;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent-2) 70%, white 30%) 0 28%, #0000 30%),
    radial-gradient(circle at 70% 60%, color-mix(in oklab, var(--accent) 75%, white 25%) 0 28%, #0000 30%),
    radial-gradient(circle at 40% 80%, color-mix(in oklab, var(--brand-2) 72%, white 28%) 0 28%, #0000 30%),
    radial-gradient(circle at 80% 20%, color-mix(in oklab, var(--brand) 72%, white 28%) 0 26%, #0000 28%);
  opacity:.18;
}

.slab{ display:grid; gap:1rem }

/* =========================
   TYPOGRAPHY
   ========================= */

h2{
  font-size:1.55rem; margin:.2rem 0 .5rem; font-weight:900;
  color:color-mix(in oklab, var(--brand-2) 75%, #000 25%);
}
p, li{ font-size:1.05rem }

/* =========================
   HERO (legacy simple block)
   ========================= */

.hero{
  height:220px; border-radius:var(--radius-lg); color:#133;
  display:grid; place-items:center; font-weight:900; font-size:1.2rem; margin-bottom:1rem;
  background: linear-gradient(135deg, #fff 0%, #fff8f0 40%, #f0f7ff 100%);
  border:1px solid rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 22px rgba(0,0,0,.08);
}

/* =========================
   HIGHLIGHT / QUOTE / PILLS
   ========================= */

.highlight{
  background:linear-gradient(180deg,#ffffff, #fff8f3);
  border:1px solid rgba(0,0,0,.05);
  border-radius:var(--radius-lg);
  padding:1rem 1.1rem;
}

.quote{
  font-weight:800; font-size:1.02rem;
  padding:.9rem 1rem; border-left:8px solid var(--accent);
  background:#fff; border-radius:var(--radius-md);
  margin:.25rem 0 .6rem; color:#3a2c28;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}

.pill-list{
  display:flex; flex-wrap:wrap; gap:.5rem;
}

.pill{
  background:#fff;
  border:1px dashed color-mix(in oklab, var(--brand) 35%, #0000 65%);
  border-radius:999px;
  padding:.35rem .7rem;
  font-weight:700; font-size:.95rem;
}

/* =========================
   FOOTER
   ========================= */

footer{
  background:linear-gradient(90deg, #fff7df, #ffe7f0);
  color:#3b3b3b; text-align:center; padding:1rem; font-size:.96rem;
  border-top:1px solid rgba(0,0,0,.06);
}

/* =========================
   SLIDESHOW (Option B: <img> inside .slide)
   Container height ALWAYS equals active image height.
   ========================= */

.hero-slideshow{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background:#fff;            /* behind letterbox areas if any */
  isolation: isolate;         /* ensures proper stacking context */
}

/* All slides are layered, but only the ACTIVE one participates in layout.
   This guarantees the container height follows the active image. */
.slide{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease-in-out;
}

/* Active slide becomes in-flow (static), so the container's height = image height */
.slide.active{
  position: static;           /* in flow */
  opacity: 1;
  pointer-events: auto;
}

/* Never crop the banner; always show full text */
.slide img{
  display: block;
  width: 100%;
  height: auto;               /* intrinsic ratio drives height */
  object-fit: contain;        /* safety if height is ever constrained */
}

/* Slide CTA text badge (if used) */
.hero-text{
  position: absolute;
  bottom: 24%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.75);
  padding: 1.2rem 2.4rem;
  border-radius: 999px;
  font-size: 1.5rem; font-weight: 600; text-align: center; color: #333;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* Arrow controls – centered relative to whatever the image height is */
.prev,.next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.35); color:#fff; border:0;
  font-size:2rem; line-height:1; padding:.5rem .8rem;
  cursor:pointer; border-radius:.5rem; z-index:10;
}
.prev{ left:10px } .next{ right:10px }
.prev:hover,.next:hover{ background:rgba(0,0,0,.6) }
.prev:focus-visible,.next:focus-visible{ outline:2px solid #fff; outline-offset:2px }

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 992px){
  /* Slightly more top padding for 2-line wraps on brand */
  body { padding-top: max(var(--header-h), 70px); }
}

@media (max-width: 720px){
  main { padding: 1rem 1rem 1.6rem }
  .hero{ height:180px; font-size:1.05rem }
  main .card{ padding:1.15rem }
}

/* =========================
   UTILITIES (optional helpers)
   ========================= */

/* Make images responsive by default inside content */
img{ max-width:100%; height:auto; }

/* Buttons inside custom sections that should look like Bootstrap primaries */
.btn-primary{
  background:var(--brand);
  border-color: transparent;
}
.btn-primary:hover{ filter: brightness(.95) }