/* ============================================================
   UNIQUE CIVIL — Shared Components CSS
   header, footer, ticker, whatsapp, mobile menu
============================================================ */

/* ── NAV ─────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding:1rem 0;transition:padding .45s ease,background .45s ease}
/* Default state — always show a subtle bg so nav text is readable on ANY hero */
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.625rem 1.25rem;border-radius:999px;transition:all .45s ease;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);
}
/* Scrolled — crisp white pill */
.nav.scrolled{padding:.625rem 0}
.nav.scrolled .nav-inner{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 8px 32px -12px rgba(15,23,42,.18),0 1px 0 rgba(15,23,42,.06);
  border-color:rgba(15,23,42,.06);
}
/* Nav links — white when unscrolled, dark when scrolled */
.nav-links a{padding:.375rem .875rem;border-radius:999px;font-size:.875rem;color:rgba(255,255,255,.85);transition:.2s;text-decoration:none}
.nav-links a:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-links a.nav-active{color:#fff;background:rgba(255,255,255,.15);font-weight:500}
.nav.scrolled .nav-links a{color:rgba(17,24,39,.75)}
.nav.scrolled .nav-links a:hover{background:rgba(17,24,39,.06);color:var(--foreground)}
.nav.scrolled .nav-links a.nav-active{color:var(--accent);background:rgba(37,99,235,.08)}
/* Brand name — white top, dark scrolled */
.brand-name{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1;transition:color .3s}
.brand-tag{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.45);margin-top:3px;transition:color .3s}
.nav.scrolled .brand-name{color:var(--primary)}
.nav.scrolled .brand-tag{color:var(--muted-foreground)}
/* Enroll button — outline white top, filled dark scrolled */
.nav-links .btn-primary{
  padding:.5rem 1.25rem;font-size:.85rem;
  background:rgba(255,255,255,.15);color:#fff;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:none;
}
.nav-links .btn-primary:hover{background:#fff;color:var(--primary)}
.nav.scrolled .nav-links .btn-primary{background:var(--primary);color:#fff;border-color:transparent}
.nav.scrolled .nav-links .btn-primary:hover{background:var(--accent)}
/* Hamburger — white top, dark scrolled */
.hamburger span{background:#fff;transition:background .3s,.3s}
.nav.scrolled .hamburger span{background:var(--primary)}
/* Brand icon color */
.nav .brand svg{color:#fff;transition:color .3s}
.nav.scrolled .brand svg{color:var(--primary)}
.brand{display:flex;align-items:center;gap:.625rem;text-decoration:none}
.nav-links{display:none;align-items:center;gap:.25rem}
@media(min-width:768px){.nav-links{display:flex}}

/* Hamburger */
.hamburger{display:flex;flex-direction:column;gap:5px;padding:.5rem;background:none;border:0;cursor:pointer;z-index:51}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--primary);transition:.3s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:768px){.hamburger{display:none}}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);z-index:49;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;align-items:center;justify-content:center}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}
.mobile-menu-inner a{font-family:var(--font-display);font-size:1.75rem;font-weight:600;color:var(--primary);text-decoration:none;transition:.2s}
.mobile-menu-inner a:hover,.mobile-menu-inner a.active{color:var(--accent)}

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer{background:var(--primary);color:rgba(255,255,255,.8)}
.footer-top{padding:4rem 0 2rem}
.footer-grid{display:grid;gap:3rem;grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr}}
.footer-brand-col{}
.footer-brand-link{text-decoration:none}
.footer-desc{margin-top:1rem;font-size:.875rem;line-height:1.7;color:rgba(255,255,255,.5);max-width:28rem}
.footer-contact{margin-top:1.5rem;display:flex;flex-direction:column;gap:.625rem}
.footer-contact-item{display:flex;align-items:flex-start;gap:.5rem;font-size:.8rem;color:rgba(255,255,255,.5)}
.footer-contact-item svg{flex-shrink:0;margin-top:.125rem;opacity:.6}
.footer-contact-item a{color:rgba(255,255,255,.6);text-decoration:none;transition:.2s}
.footer-contact-item a:hover{color:#fff}
.footer-links-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.footer-col-title{font-family:var(--font-display);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.4);margin-bottom:1rem}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.site-footer ul a{font-size:.875rem;color:rgba(255,255,255,.55);text-decoration:none;transition:.2s}
.site-footer ul a:hover{color:#fff}
.footer-social{display:flex;gap:.75rem;margin-top:1.5rem}
.social-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);transition:.2s;text-decoration:none}
.social-icon:hover{background:var(--accent);color:#fff}
.footer-subscribe{display:flex;gap:.5rem;margin-top:1.5rem}
.footer-subscribe input{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.6rem 1rem;font-size:.875rem;color:#fff;outline:none;transition:.2s;font-family:inherit}
.footer-subscribe input::placeholder{color:rgba(255,255,255,.35)}
.footer-subscribe input:focus{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12)}
.footer-subscribe button{padding:.6rem 1rem;border-radius:999px;background:var(--accent);color:#fff;border:0;cursor:pointer;font-size:1rem;font-weight:600;transition:.2s;font-family:inherit}
.footer-subscribe button:hover{background:var(--gold);color:var(--primary)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:1.25rem 0}
.footer-bottom-inner{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.3)}

/* ── ANNOUNCEMENT TICKER ─────────────────────────────────── */
/* Hidden on mobile — only show on desktop (768+) */
.announcement-ticker{
  display:none;   /* hidden by default (mobile) */
}
@media(min-width:768px){
  .announcement-ticker{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;z-index:48;
    align-items:center;gap:0;
    height:40px;overflow:hidden;
    background:var(--primary);
    border-top:1px solid rgba(37,99,235,.25);
  }
  body{padding-bottom:40px}
}

/* LIVE badge */
.ticker-live-badge{
  flex-shrink:0;
  display:flex;align-items:center;gap:.5rem;
  padding:0 1.25rem;height:100%;
  background:rgba(239,68,68,.12);
  border-right:1px solid rgba(239,68,68,.2);
  font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;
  color:#f87171;white-space:nowrap;
}
.ticker-live-dot{
  width:7px;height:7px;border-radius:50%;background:#ef4444;
  animation:ticker-blink 1.4s ease-in-out infinite;flex-shrink:0;
}
@keyframes ticker-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}

/* The scrolling area */
.ticker-scroll-area{
  flex:1;overflow:hidden;position:relative;height:100%;
}

/* Notification cards — stacked, one visible at a time */
.ticker-notification{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:.875rem;
  padding:0 1.5rem;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
  white-space:nowrap;
}
.ticker-notification.ticker-active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.ticker-notification.ticker-exit{
  opacity:0;
  transform:translateY(-12px);
}

/* Avatar circle */
.ticker-avatar{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;color:#fff;letter-spacing:0;
}

/* Text */
.ticker-msg{
  font-family:var(--font-sans);font-size:.8rem;
  color:rgba(255,255,255,.75);
  overflow:hidden;text-overflow:ellipsis;
}
.ticker-msg strong{color:#fff;font-weight:600;}
.ticker-msg em{color:var(--gold);font-style:normal;font-weight:500;}

/* Time badge on right */
.ticker-time-badge{
  margin-left:auto;flex-shrink:0;
  font-family:var(--font-mono);font-size:.65rem;
  color:rgba(255,255,255,.3);
  padding:.2rem .6rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}

/* Separator dots between items */
.ticker-divider{
  flex-shrink:0;width:1px;height:20px;
  background:rgba(255,255,255,.08);
  margin:0 1rem;
}

/* ── WHATSAPP FLOAT ─────────────────────────────────────── */
/* Themed to site palette — navy primary with accent glow */
.whatsapp-float{
  position:fixed;
  right:1.5rem;
  /* On desktop push above ticker (40px), on mobile sit 1.5rem from bottom */
  bottom:1.5rem;
  z-index:49;
  display:flex;align-items:center;gap:.625rem;
  height:48px;
  padding:0 1.25rem 0 .875rem;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 28px -6px rgba(15,23,42,.45),0 2px 8px rgba(15,23,42,.25);
  transition:.35s cubic-bezier(.2,.8,.2,1);
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  max-width:48px;   /* collapsed = icon only */
}
@media(min-width:768px){
  .whatsapp-float{bottom:calc(40px + 1.25rem)}
}
/* Hover — expand to show label */
.whatsapp-float:hover{
  max-width:220px;
  background:var(--accent);
  box-shadow:0 12px 36px -8px rgba(37,99,235,.5),0 2px 8px rgba(15,23,42,.2);
  border-color:rgba(255,255,255,.15);
}
/* Icon container */
.wa-icon-wrap{
  flex-shrink:0;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
}
/* Green dot indicator */
.wa-status-dot{
  position:absolute;top:10px;right:10px;
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  border:1.5px solid var(--primary);
  transition:opacity .3s,border-color .3s;
}
.whatsapp-float:hover .wa-status-dot{border-color:var(--accent)}
/* Label — hidden until hover expands */
.wa-label{
  font-family:var(--font-sans);font-size:.82rem;font-weight:600;
  color:#fff;white-space:nowrap;
  opacity:0;transform:translateX(-6px);
  transition:opacity .25s ease .05s,transform .25s ease .05s;
  pointer-events:none;
}
.whatsapp-float:hover .wa-label{opacity:1;transform:translateX(0)}
/* Subtle pulse ring on the icon only */
.wa-pulse{
  position:absolute;top:50%;left:.875rem;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.2);
  transform:translate(-50%,-50%) scale(1);
  animation:wa-ring 3s ease-out infinite;
  pointer-events:none;
}
@keyframes wa-ring{
  0%{transform:translate(0,-50%) scale(1);opacity:.5}
  70%{transform:translate(0,-50%) scale(2);opacity:0}
  100%{transform:translate(0,-50%) scale(2);opacity:0}
}

/* ── COMMON PAGE SPACING ─────────────────────────────────── */
.page-content{padding-top:80px}

/* ── SUBSCRIBE SECTION ───────────────────────────────────── */
.subscribe-section{
  background:linear-gradient(135deg,var(--primary) 0%,#1e3a8a 100%);
  padding:4rem 0;text-align:center;position:relative;overflow:hidden
}
.subscribe-section::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(37,99,235,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.15) 1px,transparent 1px);
  background-size:40px 40px;opacity:.5
}
.subscribe-inner{position:relative;max-width:36rem;margin:0 auto}
.subscribe-section h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:600;color:#fff;letter-spacing:-.025em}
.subscribe-section p{margin-top:.75rem;color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.6}
.subscribe-form{display:flex;gap:.5rem;margin-top:1.5rem;flex-wrap:wrap;justify-content:center}
.subscribe-form input[type=email]{
  flex:1;min-width:240px;padding:.875rem 1.25rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.1);
  color:#fff;font-size:.95rem;outline:none;font-family:inherit;transition:.2s
}
.subscribe-form input[type=email]::placeholder{color:rgba(255,255,255,.4)}
.subscribe-form input[type=email]:focus{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.15)}
.subscribe-form button{padding:.875rem 1.75rem;border-radius:999px;background:#fff;color:var(--primary);font-weight:600;font-size:.95rem;border:0;cursor:pointer;font-family:inherit;transition:.2s}
.subscribe-form button:hover{background:var(--gold)}
.form-feedback{margin-top:.75rem;font-size:.875rem}

/* ── REVEAL ANIMATION ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.delay-1{transition-delay:.15s}
.reveal.delay-2{transition-delay:.3s}
.reveal.delay-3{transition-delay:.45s}

/* ── Sidebar courses button (blog-post) ─────────────────── */
.sidebar-courses-btn{display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.75rem;border-radius:.75rem;background:#fff;color:var(--primary);font-size:.875rem;font-weight:600;transition:.2s;text-decoration:none}
.sidebar-courses-btn:hover{background:var(--gold)}