/* =========================================
   Header m1 — Cleaned & Consolidated
   ========================================= */

/* Theme tokens */
:root{
  color-scheme: light;
  --header-pad-x: 2em;
  --pill-gap: clamp(.75rem, 2vw, 2rem);
  --pill-pad-y: .6rem;
  --pill-pad-x: 2rem;
  --pill-radius: 999px;
  --pill-shadow: 0 6px 28px rgba(0,0,0,.08);
  --grad-a: #ff6a6a;
  --grad-b: #0909e0f7;
  --header-grad-a: #e72828f7;
  --header-grad-b: #0909e0f7;
  --glass-blur: 14px;
  --glass-sat: 180%;
  --text-color: #fff;
  --site-bg: #f8fbff;
  --site-ink: #111529;
  --site-ink-muted: rgba(20,25,50,0.58);
  --card-surface: #ffffff;
  --card-muted: #eaecf7;
  --footer-bg: #f9f9f9;
  --footer-ink: #061126;
  --footer-chip-bg: rgba(255, 255, 255, 0.9);
  --footer-chip-border: rgba(6, 17, 38, 0.15);
  --footer-chip-border-hover: rgba(6, 17, 38, 0.4);
  --footer-chip-shadow-hover: rgba(6, 17, 38, 0.15);
  --hero-cta-bg: #ffffff;
  --hero-cta-border: transparent;
  --hero-cta-ink: #0b1c2e;
  --hero-cta-hover-bg: transparent;
  --hero-cta-hover-border: #ffffff;
  --hero-cta-hover-ink: #ffffff;
  --submenu-bg: rgba(20, 20, 22, 0.94);
  --submenu-hover-bg: rgba(255, 255, 255, 0.1);
  --submenu-border: transparent;
  --card-shadow-lg: 0 24px 48px rgba(20, 26, 70, 0.14);
  --card-shadow-md: 0 20px 40px rgba(18, 24, 58, 0.12);
  --card-border: rgba(90, 104, 180, 0.14);
  --card-border-strong: rgba(90, 104, 180, 0.12);
  --tag-chip-bg: rgba(63, 78, 233, 0.12);
  --tag-chip-ink: #3f4ee9;
  --tag-chip-border: rgba(0,0,0,0.65);
  --accent-solid: #3f4ee9;
  --accent-on: #ffffff;
  --border-soft: #d2d2d7;
  --border-strong: #e5e5ea;
  --code-block-bg: #f5f5f7;
  --code-block-ink: #1d1d1f;
  --table-row-alt: #f5f5f7;
  --hero-h: 80vh;
  --site-padding-top-desktop: 96px;
  --site-padding-top-mobile: 88px;
}

@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --pill-shadow: 0 18px 44px rgba(0,0,0,0.45);
    --grad-a: #2a2a30;
    --grad-b: #101014;
    --header-grad-a: #e72828f7;
    --header-grad-b: #0909e0f7;
    --text-color: #f6f6f6;
    --site-bg: #0b0b0b;
    --site-ink: #f2f2f4;
    --site-ink-muted: rgba(205, 205, 212, 0.72);
    --card-surface: #141418;
    --card-muted: #1e1e24;
    --footer-bg: #101015;
    --footer-ink: #e2e2e6;
    --footer-chip-bg: rgba(32, 32, 38, 0.82);
    --footer-chip-border: rgba(255, 255, 255, 0.14);
    --footer-chip-border-hover: rgba(255, 255, 255, 0.32);
    --footer-chip-shadow-hover: rgba(0, 0, 0, 0.5);
    --hero-cta-bg: rgba(255, 255, 255, 0.08);
    --hero-cta-border: rgba(255, 255, 255, 0.25);
    --hero-cta-ink: #f5f5f5;
    --hero-cta-hover-bg: rgba(255, 255, 255, 0.18);
    --hero-cta-hover-border: rgba(255, 255, 255, 0.45);
    --hero-cta-hover-ink: #ffffff;
    --submenu-bg: rgba(15, 15, 20, 0.94);
    --submenu-hover-bg: rgba(255, 255, 255, 0.12);
    --submenu-border: rgba(255, 255, 255, 0.12);
    --card-shadow-lg: 0 38px 72px rgba(0, 0, 0, 0.58);
    --card-shadow-md: 0 28px 52px rgba(0, 0, 0, 0.5);
    --card-border: rgba(140, 140, 150, 0.3);
    --card-border-strong: rgba(140, 140, 150, 0.24);
    --tag-chip-bg: rgba(255, 255, 255, 0.08);
    --tag-chip-ink: #f0f0f0;
    --tag-chip-border: rgba(255, 255, 255, 0.2);
    --accent-solid: #f0f0f0;
    --accent-on: #111214;
    --border-soft: rgba(170, 170, 178, 0.38);
    --border-strong: rgba(150, 150, 160, 0.24);
    --code-block-bg: rgba(24, 24, 30, 0.95);
    --code-block-ink: #f4f4f6;
    --table-row-alt: rgba(30, 30, 38, 0.55);
  }
}


/* =========================
   Header + Pill
   ========================= */
.site-header{
  position: sticky;
  top: 1em;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0em 2em 0em 2em;
  margin-bottom: 2em;
}

.home  .site-header{
position: relative;

 }

.header-bar{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pill-gap);
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border-radius: var(--pill-radius);
  background: linear-gradient(202deg, var(--header-grad-a), var(--header-grad-b));
  -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  box-shadow: var(--pill-shadow);
  margin-left: auto; /* right-align the pill; change to margin:0 auto to center */
  transition: background 0.4s ease;
  -webkit-transition: background 0.4s ease;
}


/* Fallback when backdrop-filter is unsupported */
@supports not (backdrop-filter: blur(10px)){
  .header-bar{ background: rgba(20,20,20,.6); }
}

/* Logo sizing (deduped) */
.logo svg,
.logo img{
  height: 32px;
  width: auto;
  display: block;
}
@media (min-width:900px){
  .logo svg,
  .logo img{ height: 40px; }
}

/* Tiny hover delight (kept, but optimized) */
.logo:hover svg{
  transform: scale(1.05);
  transition: transform .25s ease;
}

/* =========================
   Navigation
   ========================= */

/* Desktop defaults */
.main-nav .nav-list{
  list-style: none;
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  margin: 0;
  padding: 0;
}
.main-nav li{ list-style: none; }

.main-nav a{
  display: inline-block;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  padding: .55rem .9rem;
  border-radius: var(--pill-radius);
  text-transform: uppercase;
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current_page_item > a,
.main-nav .current_page_ancestor > a{
  background: rgba(255, 255, 255, 0.22);
  color: var(--text-color);
  box-shadow: 0 10px 25px rgba(8, 12, 42, 0.18);
}

.main-nav .current-menu-item > a:hover,
.main-nav .current-menu-item > a:focus-visible,
.main-nav .current-menu-ancestor > a:hover,
.main-nav .current-menu-ancestor > a:focus-visible,
.main-nav .current_page_item > a:hover,
.main-nav .current_page_item > a:focus-visible,
.main-nav .current_page_ancestor > a:hover,
.main-nav .current_page_ancestor > a:focus-visible{
  transform: scale(1.02);
}

.main-nav a:hover,
.main-nav a:focus-visible{
  transform: scale(1.06);
  color: var(--text-color);
}

.main-nav .menu-item{
  position: relative;
}

.main-nav .menu-item-has-children > a{
  padding-right: 2.4rem;
}

.main-nav .menu-item-has-children > a::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .25s ease;
}

.main-nav .menu-item-has-children:hover > a::after,
.main-nav .menu-item-has-children:focus-within > a::after,
.main-nav .menu-item-has-children.is-open > a::after{
  transform: translateY(-50%) rotate(-135deg);
}

.main-nav .sub-menu{
  list-style: none;
  margin: 0;
  padding: .75rem 0;
  position: absolute;
  top: calc(100% + .65rem);
  left: 0;
  min-width: clamp(200px, 18vw, 260px);
  background: var(--submenu-bg);
  -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-radius: 18px;
  box-shadow: 0 24px 45px rgba(0, 0, 0, 0.28);
  display: grid;
  gap: .35rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 12;
  border: 1px solid var(--submenu-border);
}

.main-nav .sub-menu li{
  list-style: none;
}

.main-nav .sub-menu a{
  font-weight: 500;
  text-transform: none;
  font-size: .95rem;
  padding: .6rem 1.2rem;
  border-radius: 12px;
  transform: none;
}

.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus-visible{
  background: var(--submenu-hover-bg);
  color: var(--text-color);
  transform: none;
}

.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu,
.main-nav .menu-item-has-children.is-open > .sub-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.submenu-toggle{
  display: none;
}

.submenu-toggle__chevron{
  display: block;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
}

.menu-item-has-children.is-open > .submenu-toggle .submenu-toggle__chevron{
  transform: rotate(-135deg);
}

/* Mobile toggle */
.nav-toggle{
  appearance: none;
  border: 0;
  background: transparent;
  padding: .4rem;
  margin: 0;
  cursor: pointer;
  display: none; /* hidden on desktop */
}
.nav-toggle__bar{
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-color);
  border-radius: 2px;
}
.nav-toggle__bar::before,
.nav-toggle__bar::after{
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--text-color);
  border-radius: 2px;
}
.nav-toggle__bar::before{ top: -7px; }
.nav-toggle__bar::after { top:  7px; }

/* Mobile menu */
@media (max-width:768px){
  .header-bar{
    width:  75%;
    margin: 0 auto;
  }

  .nav-toggle{ display: block; }

  .main-nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 1rem;
    background:rgba(8, 8, 8, 0.99) ;
    -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
    backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
    border-radius: 16px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: max-height .35s ease, opacity .25s ease, transform .25s ease, visibility .25s;
  }

  .main-nav .nav-list{
    flex-direction: column;
    gap: 1.25em;
    padding: 1.5em;
  }

  .main-nav a{
    border-radius: 12px;
    font-size: 1.5em;
    padding: 3px 10px 0px 7px;
  }

  .main-nav .menu-item-has-children > a{
    padding-right: 3rem;
  }

  .main-nav .menu-item-has-children > a::after{
    display: none;
  }

  .submenu-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: .35rem;
    width: 2.6rem;
    height: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .submenu-toggle:focus-visible{
    outline: 2px solid rgba(255,255,255,0.8);
    outline-offset: 2px;
  }

  .main-nav .sub-menu{
    position: relative;
    top: 0;
    left: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    transform: none;
    padding: 0 0 0 1.2rem;
    max-height: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition: max-height .3s ease;
  }

  .main-nav .menu-item-has-children.is-open > .sub-menu{
    max-height: 600px;
    pointer-events: auto;
  }

  .main-nav .sub-menu a{
    padding: .7rem 0;
    font-size: 1.05em;
  }

  /* Open state toggled by JS: add .is-open to .header-bar */
  .header-bar.is-open .main-nav{
    max-height: 60vh;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Animate hamburger into an “X” */
  .header-bar.is-open .nav-toggle__bar{ background: transparent; }
  .header-bar.is-open .nav-toggle__bar::before{ transform: rotate(45deg); top: 0; }
  .header-bar.is-open .nav-toggle__bar::after { transform: rotate(-45deg); top: 0; }
}

/* --------------------
   Footer
-------------------- */
.site-footer {
  padding: 2em 1em;
  color: var(--footer-ink);
  margin-bottom: 1.5em;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  flex: 1 1 18rem;
  max-width: 32rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
}

.footer-logo svg,
.footer-logo img {
  max-width: 60px;
  height: auto;
  display: block;
}

.footer-description {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: inherit;
  flex: 1 1 12rem;
  max-width: 22rem;
}

.footer-meta {
  flex: 1 1 22rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.25rem;
  text-align: right;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--footer-chip-border);
  background: var(--footer-chip-bg);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.footer-social__icon {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.footer-social__link:hover,
.footer-social__link:focus-visible {
  transform: translateY(-1px);
  border-color: var(--footer-chip-border-hover);
  box-shadow: 0 8px 16px var(--footer-chip-shadow-hover);
}

.footer-social__link:focus-visible {
  outline: 2px solid var(--footer-chip-border-hover);
  outline-offset: 3px;
}

.footer-contact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-left: auto;
}

.footer-phone,
.footer-email {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.footer-phone:hover,
.footer-phone:focus-visible,
.footer-email:hover,
.footer-email:focus-visible {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 2rem;
  }
  .footer-brand {
    width: 100%;
    flex: 1em;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    max-width: none;
  }
  .footer-description {
    flex: 1;
    max-width: none;
  }
  .footer-meta {
    width: 100%;
    flex: 1em;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .footer-social {
    flex-wrap: wrap;
    justify-content: flex-start;
    flex: 1 1 auto;
  }
  .site-footer
  {
    padding: 2em;
    border: none;
    margin-bottom: 0;
  }
 
  .footer-phone,
  .footer-email {
    font-size: 1rem;
  }
}

@media (max-width: 512px) 
{ .footer-social, .footer-meta

  {
    justify-content: start;
}
.footer-contact {margin-left: 0;}
.hero{height:80vh;}
.site-header{margin-bottom:1.25em;}




}