/* ============================================================
   LIGHT THEME — 02 HEADER
============================================================ */

/* ---- Background ---- */
body.light #header-logo-section {
  background: linear-gradient(160deg, #5188cb 0%, #cfe3ff 50%, #e7edf5 100%);
  border-bottom: 2px solid rgba(0, 80, 160, 0.46);
  box-shadow: 0 8px 24px rgba(0, 52, 110, 0.10);
  animation: none;
}
/** ---- Header hover: boost blue border + shadow glow ---- */
body.light #header-logo-section:hover {
  border-color: rgba(0, 80, 160, 0.64);
}
/* ---- Header auras: replace red top / white bottom with blue ---- */
body.light #header-logo-section::before {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 100%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.014) 3px, rgba(0, 0, 0, 0.014) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(0, 0, 0, 0.008) 60px, rgba(0, 0, 0, 0.008) 61px),
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(0, 80, 160, 0.08), transparent 70%);
}

/* ---- Brand text ---- */
body.light .site-header__name {
  color: rgb(0, 0, 0);
}
/* ---- Tagline text ---- */
body.light .site-header__tagline {
  color: rgb(0, 0, 0);
}

/* ---- Status dot → blue ---- */
body.light .site-header__status-dot {
  background: rgba(0, 90, 200, 1);
  box-shadow: 0 0 12px rgba(0, 90, 200, 0.60);
}

/* ---- Status dot → blue ---- */
body.light .site-header__status-dot:hover {
  background: rgb(254, 254, 254);
  box-shadow: 0 0 12px rgba(162, 162, 162, 0.6);
}

/* ---- Trust badge ---- */
body.light .site-header__trust {
  background: linear-gradient(180deg, rgba(247, 250, 254, 0.92), rgba(226, 236, 247, 0.92));
  border-color: rgb(0, 128, 255);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    0 4px 14px rgba(0, 80, 160, 0.08);
}

body.light .site-header__trust:hover {
  background: linear-gradient(135deg, rgb(0, 90, 200) 0%, rgb(0, 40, 110) 100%);
  border-color: rgb(0, 1, 1);
  box-shadow: 0 0 12px rgba(0, 80, 160, 0.22), 0 0 30px rgba(0, 80, 160, 0.08);
  color: rgb(255, 255, 255);
}

body.light .site-header__trust-text {
  color: rgb(0, 0, 0);
}

body.light .site-header__trust-text:hover {
  color: rgb(255, 255, 255);
}

/* ---- Owner photo ---- */
body.light .site-header__owner-photo {
  border-color: rgba(0, 80, 160, 0.50);
  box-shadow: 0 0 12px rgba(0, 80, 160, 0.16), 0 4px 14px rgba(0, 0, 0, 0.06);
}

body.light .site-header__owner-photo:hover {
  border-color: rgba(0, 80, 160, 0.72);
  box-shadow: 0 0 12px rgba(0, 80, 160, 0.28), 0 0 30px rgba(0, 80, 160, 0.12);
}

/* ---- CTA buttons (base) ---- */
body.light .header-cta {
  color: rgb(20, 44, 72);
  background: linear-gradient(180deg, rgba(248, 252, 255, 0.92), rgba(227, 236, 246, 0.94));
  border-color: rgba(0, 80, 160, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 4px 12px rgba(0, 80, 160, 0.07);
}

body.light .header-cta:hover {
  color: rgb(10, 30, 56);
  background: linear-gradient(180deg, rgba(238, 247, 255, 0.98), rgba(219, 232, 246, 0.98));
  border-color: rgba(0, 80, 160, 0.68);
  box-shadow: 0 0 12px rgba(0, 80, 160, 0.20), 0 0 30px rgba(0, 80, 160, 0.08), 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* ---- CTA primary button → blue ---- */
body.light .header-cta--primary {
  color: #ffffff;
  background: linear-gradient(135deg, rgb(0, 90, 200) 0%, rgb(0, 40, 110) 100%);
  border-color: rgb(0, 0, 0);
  box-shadow:inset 0 0 20px rgba(0, 106, 236, 0.779), 0 8px 18px rgba(0, 40, 110, 0.14);
  box-shadow: rgb(0, 128, 255) 0px 0px 20px 0px, rgba(0, 90, 200, 0.25) 0px 4px 12px;
}

body.light .header-cta--primary:hover {
  color: #ffffff;
  background: linear-gradient(135deg, rgb(0, 110, 141) 0%, rgb(0, 50, 80) 100%);
  border-color: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 0 12px rgba(0, 100, 160, 0.36),
    0 0 30px rgba(0, 100, 160, 0.14),
    0 16px 40px rgba(0, 0, 0, 0.12);
}

/* ---- Hamburger button → blue ---- */
body.light #hamburger-menu_left {
  color: #ffffff;
  background: linear-gradient(135deg, rgb(0, 90, 200) 0%, rgb(0, 0, 0) 100%);
  border-color: rgba(255, 255, 255, 0.66);
  box-shadow: 0 0 20px rgba(0, 90, 200, 0.28), 0 8px 18px rgba(0, 0, 0, 0.12);
}

body.light #hamburger-menu_left:hover {
  background: linear-gradient(135deg, rgb(0, 110, 141) 0%, rgb(0, 0, 0) 100%);
  border-color: rgba(255, 255, 255, 0.80);
  box-shadow:
    0 0 12px rgba(0, 100, 160, 0.35),
    0 0 30px rgba(0, 100, 160, 0.15),
    0 0 20px rgba(0, 110, 141, 0.25);
}

body.light #hamburger-menu_left.active {
  background: linear-gradient(135deg, rgb(0, 90, 200) 0%, rgb(0, 0, 0) 100%);
  border-color: rgba(255, 255, 255, 0.80);
  box-shadow:
    0 0 12px rgba(0, 100, 160, 0.40),
    0 0 30px rgba(0, 100, 160, 0.20),
    0 0 20px rgba(0, 110, 141, 0.25);
}

body.light .hamburger-menu__line_left {
  background: rgba(255, 255, 255, 0.95);
}

body.light #hamburger-menu_left:hover .hamburger-menu__line_left {
  background: #ffffff;
  box-shadow: 0 0 10px rgba(0, 180, 220, 0.5), 0 1px 2px rgba(0, 0, 0, 0.2);
}

body.light #hamburger-menu_left.active .hamburger-menu__line_left {
  background: rgb(150, 200, 255);
  box-shadow: 0 0 12px rgba(0, 90, 200, 0.50), 0 1px 2px rgba(0, 0, 0, 0.2);
}

body.light .arrow_inward_left {
  color: rgba(255, 255, 255, 1);
}

body.light #hamburger-menu_left:hover .arrow_inward_left {
  text-shadow: 0 0 8px rgba(0, 90, 200, 0.60), 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.light #hamburger-menu_left.active .arrow_inward_left {
  color: rgb(150, 200, 255);
  text-shadow: 0 0 10px rgba(0, 90, 200, 0.50);
}