/* =========================================================
   Psychidoc — shared design tokens + chrome (navbar/footer)
   ========================================================= */

:root{
  --bg-deep:#0D1B2C;
  --bg-deep-2:#132840;
  --bg-tile:#1B3552;
  --teal:#2FA98C;
  --teal-dim:#1F7A65;
  --teal-light:#7FBFAE;
  --red:#D64550;
  --paper:#F6F8F7;
  --paper-line:#E1E7E4;
  --paper-line-strong:#CBD5D1;
  --ink:#152230;
  --muted:#5B6B75;
  --muted-soft:#8695A0;
  --radius:9px;
  --radius-lg:16px;
  --shadow-card:0 10px 30px rgba(13,27,44,0.08);
  --container:1180px;
  --header-h:64px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:'IBM Plex Sans',sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  margin:0 0 .5em;
  line-height:1.2;
  color:var(--ink);
}
p{margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--teal-dim);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.eyebrow::before{
  content:'';
  width:7px;height:7px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 3px rgba(47,169,140,0.18);
}
.section{padding:72px 0;}
.section-tight{padding:48px 0;}
.section-alt{background:#EEF3F1;}
.section-dark{background:var(--bg-deep); color:#EAF1F6;}
.section-dark h1, .section-dark h2, .section-dark h3{color:#EAF1F6;}
.section-head{max-width:640px; margin:0 0 40px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:14.5px;
  padding:13px 24px;
  border-radius:24px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease, border-color .15s ease, color .15s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--teal); border-color:var(--teal); color:#FFFFFF;}
.btn-primary:hover{background:#38BC9E; border-color:#38BC9E;}
.btn-outline{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.35); color:#FFFFFF;}
.btn-outline:hover{background:rgba(47,169,140,0.14); border-color:var(--teal); color:var(--teal-light);}
.btn-outline-dark{background:transparent; border-color:var(--paper-line-strong); color:var(--ink);}
.btn-outline-dark:hover{border-color:var(--teal); color:var(--teal-dim);}
.btn-block{width:100%;}
.btn-sm{padding:9px 18px; font-size:13px;}

/* ============ NAVBAR ============ */
.site-header{
  position:sticky; top:0; z-index:1000; /* Increased to ensure header remains above fixed hero elements */
  background:rgba(13,27,44,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.nav-brand{display:flex; align-items:center; gap:9px;}
.nav-brand .mark{
  width:10px;height:10px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 4px rgba(47,169,140,0.18);
}
.nav-brand-text{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:18px; letter-spacing:.01em;
  color:#EAF1F6;
}
.nav-links{
  display:flex; align-items:center; gap:28px;
  list-style:none; margin:0; padding:0;
}
.nav-links .nav-link{
  font-size:14px; font-weight:500; color:#B9C7D0;
  padding:6px 2px; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links .nav-link:hover, 
.nav-links .nav-link.active{
  color:#EAF1F6 !important; 
  border-color:var(--teal);
}
.nav-cta{display:flex; align-items:center; gap:12px;}
.nav-toggle{
  display:none;
  width:40px; height:40px; border-radius:8px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  color:#EAF1F6; align-items:center; justify-content:center; cursor:pointer;
  position:relative; z-index:1002;
}


/* Custom Hamburger Toggle Button Styling */
.site-header .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
}

/* Make the 3 lines bright and visible */
.site-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Optional: Accent color on hover */
.site-header .navbar-toggler:hover,
.site-header .navbar-toggler:focus {
  border-color: #7FBFAE !important;
  box-shadow: none !important;
}
@media (max-width: 900px){
  .nav-menu{
    position:fixed;
    top:var(--header-h, 64px);
    left:0;
    right:0;
    bottom:0;
    background:var(--bg-deep);
    z-index:1001; /* High z-index keeps overlay visible over hero section */
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    overflow-y:auto;
  }

  .nav-menu.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .nav-links{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:28px;
    width:100%;
  }

  .nav-links .nav-link{
    width:100%;
    padding:16px 8px;
    font-size:17px;
    color:#EAF1F6 !important;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }

  .nav-cta .btn-outline{display:none;}
  .nav-toggle{display:flex;}
}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--bg-deep);
  color:#B9C7D0;
  padding:56px 0 22px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:36px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand .nav-brand-text{color:#EAF1F6;}
.footer-about{margin-top:12px; font-size:13.5px; color:#93A4AF; max-width:280px;}
.footer-col h4{
  font-family:'Space Grotesk',sans-serif;
  font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  color:#7FBFAE; margin-bottom:14px;
}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:14px; color:#B9C7D0; transition:color .15s ease;}
.footer-col a:hover{color:var(--teal);}
.footer-social{display:flex; gap:10px; margin-top:14px;}
.footer-social a{
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
}
.footer-social a:hover{background:var(--teal); border-color:var(--teal); color:#08211B;}
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; font-size:12.5px; color:#7A8B96; flex-wrap:wrap; gap:10px;
}
.footer-emergency{
  display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:#F0A6AB;
}
.footer-emergency .dot{width:6px;height:6px;border-radius:50%; background:var(--red);}

@media (max-width: 900px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px;}
}
@media (max-width: 560px){
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
}

/* generic card used across pages */
.card{
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}

/* ============ PAGE HERO (base) ============ */
.page-hero{
  background:
    radial-gradient(circle at 12% 8%, rgba(47,169,140,0.14), transparent 45%),
    var(--bg-deep);
  color:#EAF1F6;
  padding:50px 0 40px;
  position:relative;
  z-index:1; /* Keep hero on standard z-index layer below header */
}
.page-hero h1{
  color:#EAF1F6;
  font-size:40px;
  max-width:640px;
}
.page-hero-lead{
  color:#B9C7D0;
  font-size:16.5px;
  max-width:560px;
  margin-top:6px;
}
@media (max-width: 700px){
  .page-hero{padding:72px 0 48px;}
  .page-hero h1{font-size:30px;}
}

.mini-link{
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; font-weight:600; color:var(--teal-dim);
  transition:color .15s ease, gap .15s ease;
}
.mini-link:hover{color:var(--teal); gap:7px;}

/* ============ CTA BANNER ============ */
.cta-banner{
  background:var(--bg-deep);
  padding:56px 0;
}
.cta-banner-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-banner h2{color:#EAF1F6; margin-bottom:4px;}
.cta-banner p{color:#B9C7D0; margin:0;}
@media (max-width: 700px){
  .cta-banner-inner{flex-direction:column; align-items:flex-start; text-align:left;}
}

.alert{
  padding:13px 16px; border-radius:8px; font-size:14px; margin-bottom:18px;
}
.alert-success{background:rgba(47,169,140,0.12); color:#1F7A65; border:1px solid rgba(47,169,140,0.35);}
.alert-error{background:rgba(214,69,80,0.1); color:#B93A44; border:1px solid rgba(214,69,80,0.3);}

body.nav-open{overflow:hidden;}