/* Shared site header and footer: one layout on every page, colored from the official logo. */
body.premium-home {
  --logo-navy:#0b2766; --logo-blue:#1a6fe8; --logo-yellow:#fbb40f;
  --logo-green:#47a750; --logo-purple:#7034e4;
}
.premium-home .site-header, .premium-home.dark .site-header {
  --primary:var(--logo-blue); --primary-dark:#1155bf; --text:var(--logo-navy); --muted:#4d5d82;
  --surface:#fff; --surface-alt:#eaf2ff; --border:#dce6f7;
  padding:0; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:0 6px 18px rgba(11,39,102,.06);
}
.premium-home.dark .site-header {
  --primary:#8db8ff; --primary-dark:#b5d0ff; --text:#eef3ff; --muted:#b8c3dd;
  --surface:#151c33; --surface-alt:#232d4d; --border:#2f3a5c;
}
.premium-home .nav-wrap {
  width:min(1440px,calc(100% - 48px)); min-height:84px;
  border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none;
}
.premium-home :is(.main-nav>a,.theme-toggle,.menu-toggle,.language-toggle) { border-radius:10px; }
.premium-home .main-nav>a.active { background:var(--surface-alt); color:var(--primary); box-shadow:none; }
.premium-home .site-header .btn-outline { color:var(--primary); }
.premium-home .nav-actions .btn { min-height:40px; padding:8px 12px; font-size:.8rem; }
.premium-home .site-header .btn:not(.btn-outline) { background:var(--logo-blue); color:#fff; box-shadow:0 3px 0 #0f4fb0; }
.premium-home .site-header .nav-start { background:var(--logo-yellow); color:var(--logo-navy); border-color:#ffd97a; box-shadow:0 3px 0 #c98c00; }
html { scroll-padding-top:110px!important; }
@media(min-width:1321px) {
  .premium-home .nav-wrap { grid-template-columns:auto minmax(0,1fr) auto!important; gap:18px!important; padding:8px 0!important; }
  .premium-home .nav-wrap>.brand { grid-column:1; grid-row:1; }
  .premium-home .main-nav { grid-column:2; grid-row:1; border:0; padding:0; gap:2px; }
  .premium-home .nav-actions { grid-column:3; grid-row:1; }
  .premium-home .main-nav>a { flex:0 1 auto; padding:10px 9px!important; font-size:.86rem!important; white-space:normal; text-align:center; line-height:1.5; }
  .premium-home .main-nav .nav-section-icon { display:none; }
  .premium-home .main-nav>a.active::after { display:block; content:""; position:absolute; height:3px; inset-inline:12px; bottom:2px; background:var(--primary); border-radius:2px; }
}

/* Wordmark: "Code" + "ACADEMY" in navy, "Kids" letters in the logo colors. */
.premium-home .brand { gap:10px; }
.premium-home .brand-name strong { font-family:"Fredoka","Cairo",sans-serif; font-size:1.55rem; font-weight:600; letter-spacing:-.01em; color:var(--logo-navy); }
.premium-home .brand-name small { color:var(--logo-navy); font-weight:700; letter-spacing:.34em; opacity:.85; }
.premium-home .brand-kids b { font-weight:inherit; }
.premium-home .brand-kids b:nth-child(1) { color:var(--logo-yellow); }
.premium-home .brand-kids b:nth-child(2) { color:var(--logo-green); }
.premium-home .brand-kids b:nth-child(3) { color:var(--logo-blue); }
.premium-home .brand-kids b:nth-child(4) { color:var(--logo-purple); }
.premium-home.dark .brand-name :is(strong,small), .premium-home .site-footer .brand-name :is(strong,small) { color:#f1f5ff; }

/* Logo size and playful hover: bounce, wiggle and glow. */
.premium-home .site-header .brand .brand-logo { width:64px; height:64px; flex-basis:64px; }
.premium-home .site-footer .footer-brand .brand-logo { width:88px; height:88px; flex-basis:88px; }
.brand-logo { border-radius:50%; transform-origin:50% 60%; transition:filter .3s ease; }
.brand:hover .brand-logo, .brand:focus-visible .brand-logo { animation:brand-logo-play .9s cubic-bezier(.34,1.56,.64,1) both; filter:drop-shadow(0 8px 16px rgba(26,111,232,.35)) saturate(1.15); }
@keyframes brand-logo-play {
  0% { transform:scale(1) rotate(0); }
  25% { transform:scale(1.14) translateY(-4px) rotate(-10deg); }
  45% { transform:scale(1.12) translateY(-4px) rotate(8deg); }
  65% { transform:scale(1.13) translateY(-3px) rotate(-4deg); }
  100% { transform:scale(1.1) translateY(-2px) rotate(0); }
}
@media (prefers-reduced-motion:reduce) {
  .brand:hover .brand-logo, .brand:focus-visible .brand-logo { animation:none; transform:scale(1.06); }
}

/* Phones: compact bar, readable wordmark, full-width dropdown menu. */
@media(max-width:760px) {
  .premium-home .nav-wrap { width:calc(100% - 24px); min-height:68px; gap:8px; padding:6px 0; }
  .premium-home .site-header .brand .brand-logo { width:50px; height:50px; flex-basis:50px; }
  .premium-home .site-footer .footer-brand .brand-logo { width:72px; height:72px; flex-basis:72px; }
  .premium-home .brand { gap:8px; }
  .premium-home .brand-name strong { font-size:1.2rem; }
  .premium-home .main-nav { inset-inline:-12px; border-radius:0 0 18px 18px; }
  html { scroll-padding-top:86px!important; }
}
@media(max-width:520px) {
  .premium-home .site-header .brand .brand-logo { width:44px; height:44px; flex-basis:44px; }
  .premium-home .brand-name strong { font-size:1.08rem; }
}

/* Footer: the full-width navy footer from the home page, on every page. */
.premium-home .site-footer { background:var(--logo-navy); padding:40px 0 0; border-top:1px solid var(--border); }
.premium-home .site-footer .footer-shell { border:0; border-radius:0; background:none; }
.premium-home .footer-launch { padding:0 0 32px; }
.premium-home .footer-launch h2 { font-size:2.5rem; letter-spacing:0; }
.premium-home .site-footer .footer-grid { padding:32px 0; }
.premium-home .footer-bottom { margin:0; }
.premium-home :is(.footer-contact-link,.footer-contact-icon,.back-to-top>span:last-child) { border-radius:8px; }
.premium-home .site-footer .footer-explore { background:var(--logo-yellow); border-color:var(--logo-yellow); color:var(--logo-navy); }
.premium-home .site-footer .footer-explore:hover { background:#ffd56a; color:var(--logo-navy); }
@media(max-width:760px) {
  .premium-home .footer-launch h2 { font-size:2rem; }
  .premium-home .site-footer .footer-shell { width:calc(100% - 32px); }
  .premium-home .site-footer :is(.footer-grid,.footer-launch) { padding-inline:0; }
  .premium-home .site-footer .footer-bottom { margin-inline:0; }
}

/* On dark bars (dark header, navy footer) the blue and purple "Kids" letters use lighter logo tints. */
.premium-home.dark .site-header .brand-kids b:nth-child(3), .premium-home .site-footer .brand-kids b:nth-child(3) { color:#7aa7ff; }
.premium-home.dark .site-header .brand-kids b:nth-child(4), .premium-home .site-footer .brand-kids b:nth-child(4) { color:#b18cff; }
.premium-home:not(.dark) .main-nav>a.active { color:var(--primary-dark); }