/* =========================================================
   Skin / Theme overrides
   - Colors, accents, hover, subtle motion & polish
   ========================================================= */
:root{
  /* brand blues */
  --brand-600:#0a63b8;
  --brand-700:#084e92;
  --brand-800:#073d74;

  /* neutrals */
  --bg:#f6f8fb;
  --surface:#ffffff;
  --text:#1c2430;
  --muted:#667085;
  --muted-2:#8a94a6;
  --border:#e6e9ef;

  /* header background: subtle white→gray */
  --header-bg: linear-gradient(180deg,#f8fafc 0%, #eef2f7 100%);

  /* interactions */
  --link:#0b69d0;
  --link-hover:#0a58b5;
  --focus:#4c9ffe;
  --accent: var(--link);
  --brand: var(--brand-600);

  /* effects */
  --overlay: rgba(12,21,33,.45);
  --progress: #1a73e8;
  --shadow-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 1px rgba(16,24,40,.06);
  --shadow-2: 0 8px 24px rgba(17, 24, 39, .12);
}

/* Header subtle gradient + hover polish */
.site-header{
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--bg) 90%, #cccccc) 100%);
}
.menu > li > a:hover{
  text-decoration: none;
  background: color-mix(in srgb, #ffffff 88%, var(--brand));
}

/* Active link underline bar (desktop/tablet) */
@media (min-width: 768px){
  .menu > li > a{
    position: relative;
  }
  .menu > li > a::after{
    content:"";
    position: absolute; left: .6rem; right: .6rem; bottom: .35rem;
    height: 2px; border-radius: 2px;
    background: transparent;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .16s ease, background-color .16s ease;
  }
  .menu > li > a:hover::after{ background: color-mix(in srgb, var(--accent) 92%, #fff); transform: scaleX(1); }
  .menu > li > a[aria-current="page"]::after,
  .menu > li > a.active::after{ background: #fff; transform: scaleX(1); }
}

/* Drawer link states (mobile) */
@media (max-width: 767px){
  .menu > li > a:hover{ background: #eef6fb; }
  .menu > li > a[aria-current="page"],
  .menu > li > a.active{ background: #e6f2f9; }
}

/* Buttons (optional utility) */
.button, a[role="button"]{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem .9rem; border-radius: 10px;
  background: var(--accent); color: #fff; border: 1px solid transparent;
  text-decoration: none; font-weight: 600;
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, opacity .12s ease;
  box-shadow: 0 4px 14px rgba(25,146,211,.25);
}
.button:hover, a[role="button"]:hover{ opacity: .95; transform: translateY(-1px); }
.button:active, a[role="button"]:active{ transform: translateY(0); }
.button--ghost{
  background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, #fff);
  box-shadow: none;
}
.button--ghost:hover{ background: color-mix(in srgb, var(--accent) 8%, #fff); }

/* Cards polish */
.card{ border: 1px solid #eaf0f5; box-shadow: var(--shadow-sm); }
.card:hover{ box-shadow: 0 10px 28px rgba(10, 30, 50, .10); transition: box-shadow .2s ease; }

/* Links in content */
.container a:not(.button){
  color: color-mix(in srgb, var(--accent), (var(--link)) 92%, #00486b);
}
.container a:not(.button):hover{
  text-decoration: underline;
}

/* Scroll progress color */
#scroll-progress{ background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 80%, #6dd5ff)); }

/* Section spacing & subtle dividers */
section + section{
  border-top: 1px solid var(--border);
}

/* Footer (if you add .site-footer__inner) */
.site-footer__inner{
  color: var(--muted);
}

/* Ultra-wide tightening overrides (keep things modest) */
@media (min-width: 1440px){
  :root{ --page-max: 1080px; }
}
@media (min-width: 1920px){
  html{ font-size: 16px; }
  :root{ --page-max: 1040px; }
}

/* Tablet/desktop width cap (80%) – mirrors base but sits here to ensure skin wins if needed */
@media (min-width: 768px){
  .site-header__inner,
  .container,
  .site-footer__inner{
    width: 80%;
    margin-inline: auto;
  }
}

/* Testimonial card tint */
.testimonials .carousel {
  background: linear-gradient(180deg, var(--surface, #fff), color-mix(in oklab, var(--surface, #fff) 80%, var(--brand-50, #eef5fc)));
}

/* ---- Elevation & accents (skin) ---- */
:root{
  --radius: 12px;
  --elev-1: 0 6px 18px rgba(12, 22, 36, .06);
  --elev-2: 0 12px 28px rgba(12, 22, 36, .10);
  --elev-3: 0 20px 44px rgba(12, 22, 36, .14);

  /* define tokens used by skin rules */
  --accent: var(--link);
  --brand:  var(--brand-600);
}

/* Subtle content link color + underline on hover (content only) */
.container a:not(.button){
  color: var(--link);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .18s ease, color .18s ease;
}
.container a:not(.button):hover{
  color: var(--link-hover);
  background-size: 100% 2px;
}