/* ============================================================
   BAYAREA THEME CSS  — mirrors the dark HTML prototype
   All design tokens are CSS custom properties so Elementor
   widget style controls can override them inline per-element.
============================================================ */

/* ---- VARIABLES ------------------------------------------ */
:root {
  --ba-orange:      #F47C20;
  --ba-orange-dark: #D96910;
  --ba-orange-lt:   #FFF0E0;
  --ba-blue:        #5BB8D4;
  --ba-blue-dark:   #3A9AB8;
  --ba-navy:        #1A2E44;
  --ba-navy-mid:    #253D55;
  --ba-white:       #FFFFFF;
  --ba-g50:         #F8FAFC;
  --ba-g100:        #F1F5F9;
  --ba-g200:        #E2E8F0;
  --ba-g400:        #94A3B8;
  --ba-g600:        #475569;
  --ba-text:        #1E293B;
  --ba-muted:       #64748B;
  --ba-r:           10px;
  --ba-rlg:         16px;
  --ba-sh:          0 4px 20px rgba(0,0,0,.08);
  --ba-shlg:        0 8px 40px rgba(0,0,0,.14);
  --ba-tr:          all .28s ease;
  --ba-topbar-h:    38px;
  --ba-header-h:    100px;
}

/* ---- TYPOGRAPHY ------------------------------------------ */
body { font-family:'Montserrat',sans-serif; }
h1,h2,h3,h4 { font-family:'Montserrat',sans-serif; line-height:1.2; font-weight:800; color:var(--ba-navy); }
h1 { font-size:clamp(2rem,4.5vw,3.2rem); }
h2 { font-size:clamp(1.6rem,3.2vw,2.4rem); }
h3 { font-size:clamp(1.1rem,2vw,1.45rem); }
p  { color:var(--ba-muted); font-family:'Montserrat',sans-serif;}

/* ---- LAYOUT UTILITIES ------------------------------------ */
.ba-container  { max-width:1280px; margin:0 auto; padding:0 20px; }
.ba-section    { padding:90px 0; }
.ba-text-center{ text-align:center; }

.ba-tag {
  display:inline-block;
  background:var(--ba-orange-lt); color:var(--ba-orange-dark);
  font-family:'Montserrat',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:5px 14px; border-radius:50px; margin-bottom:12px;
}
.ba-tag-blue { background:rgba(91,184,212,.14); color:var(--ba-blue-dark); }
.ba-heading-line { width:52px; height:4px; background:var(--ba-orange); border-radius:2px; margin:14px 0; }
.ba-text-center .ba-heading-line { margin:14px auto; }
.ba-heading-line-white { background:var(--ba-blue); }
.ba-section-header { margin-bottom:52px; }
.ba-section-header h2 { margin-bottom:14px; }
.ba-section-header p  { font-size:1.05rem; max-width:580px; }
.ba-section-header.ba-text-center p { margin:0 auto; }

/* ---- BUTTONS --------------------------------------------- */
.ba-btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:.88rem;
  letter-spacing:.04em; text-transform:uppercase;
  padding:15px 30px; border-radius:var(--ba-r); transition:var(--ba-tr); white-space:nowrap; cursor:pointer;
}
.ba-btn-primary { background:var(--ba-orange); color:var(--ba-white); }
.ba-btn-primary:hover { background:var(--ba-orange-dark); transform:translateY(-2px); box-shadow:0 6px 24px rgba(244,124,32,.4); }
.ba-btn-navy    { background:var(--ba-navy); color:var(--ba-white); }
.ba-btn-navy:hover { background:var(--ba-navy-mid); transform:translateY(-2px); box-shadow:0 6px 24px rgba(26,46,68,.35); }
.ba-btn-white   { background:var(--ba-white); color:var(--ba-navy); }
.ba-btn-white:hover { background:var(--ba-g100); transform:translateY(-2px); }
.ba-btn-outline { background:transparent; color:var(--ba-white); border:2px solid rgba(255,255,255,.55); }
.ba-btn-outline:hover { background:rgba(255,255,255,.12); border-color:var(--ba-white); transform:translateY(-2px); }
.ba-btn-emergency { background:linear-gradient(135deg,#E53E3E,#C53030); color:var(--ba-white); }
.ba-btn-emergency:hover { background:linear-gradient(135deg,#C53030,#9B2C2C); transform:translateY(-2px); box-shadow:0 6px 24px rgba(197,48,48,.4); }

/* Backwards-compat: match HTML prototype class names */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.88rem; letter-spacing:.04em; text-transform:uppercase; padding:15px 30px; border-radius:var(--ba-r); transition:var(--ba-tr); white-space:nowrap; cursor:pointer; }
.btn-primary  { background:var(--ba-orange); color:#fff; }
.btn-primary:hover { background:var(--ba-orange-dark); transform:translateY(-2px); box-shadow:0 6px 24px rgba(244,124,32,.4); }
.btn-navy     { background:var(--ba-navy); color:#fff; }
.btn-navy:hover { background:var(--ba-navy-mid); transform:translateY(-2px); }
.btn-white    { background:#fff; color:var(--ba-navy); }
.btn-outline  { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); }
.btn-emergency{ background:linear-gradient(135deg,#E53E3E,#C53030); color:#fff; }
header .btn   { font-size:1rem; }

/* ---- SVG ICONS ------------------------------------------- */
.ico { width:1.4em; height:1.4em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.15em; flex-shrink:0; transition:var(--ba-tr); }
.ico-fill { fill:currentColor; stroke:none; }
.ico-sm   { width:1.15em; height:1.15em; }
.ico-md   { width:1.25em; height:1.25em; }
.ico-lg   { width:1.6em;  height:1.6em; }
.ico-xl   { width:2.2em;  height:2.2em; }
.ico-2xl  { width:3rem;   height:3rem; }

/* ---- TOP BAR --------------------------------------------- */
.topbar { position:fixed; top:0; left:0; right:0; z-index:1001; background:var(--ba-navy); color:rgba(255,255,255,.8); font-size:.9rem; padding:9px 0; }
.topbar .container { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.topbar-left,.topbar-right { display:flex; align-items:center; gap:20px; }
.topbar a:hover { color:var(--ba-orange); }
.tb-ico { color:var(--ba-blue); margin-right:5px; }
.topbar-social { display:flex; align-items:center; gap:12px; padding-left:16px; border-left:1px solid rgba(255,255,255,.15); }
.topbar-social a { color:rgba(255,255,255,.6); display:flex; transition:var(--ba-tr); }
.topbar-social a:hover { color:var(--ba-orange); transform:translateY(-2px); }

/* ---- HEADER ---------------------------------------------- */
.header { position:fixed; top:var(--ba-topbar-h); left:0; right:0; z-index:1000; background:rgba(15,28,46,.72); backdrop-filter:blur(14px) saturate(1.3); transition:background .35s ease,box-shadow .35s ease; }
.header.scrolled { background:rgba(255,255,255,.97); backdrop-filter:blur(20px); box-shadow:0 2px 30px rgba(0,0,0,.12); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 20px; max-width:1280px; margin:0 auto; height:var(--ba-header-h); }
.logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo img { height:86px; width:auto; }
.nav { display:flex; align-items:center; gap:2px; }
.nav-item { position:relative; }
.nav-link { display:flex; align-items:center; gap:3px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.79rem; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.88); padding:10px 12px; border-radius:8px; transition:var(--ba-tr); }
.nav-link:hover,.nav-link.active { color:var(--ba-orange); background:rgba(255,255,255,.1); }
.header.scrolled .nav-link { color:var(--ba-navy); }
.header.scrolled .nav-link:hover,.header.scrolled .nav-link.active { color:var(--ba-orange); background:var(--ba-orange-lt); }
.nav-chevron { width:1em; height:1em; transition:transform .25s; }
.nav-item:hover .nav-chevron { transform:rotate(180deg); }
.dropdown { position:absolute; top:calc(100% + 8px); left:0; min-width:220px; background:var(--ba-white); border-radius:var(--ba-r); box-shadow:var(--ba-shlg); border-top:3px solid var(--ba-orange); padding:8px 0; opacity:0; visibility:hidden; transform:translateY(10px); transition:var(--ba-tr); z-index:100; }
/* Use > so only the immediate .dropdown child is shown, not nested dropdowns */
.nav-item:hover > .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-item { position:relative; }
.dropdown-item:hover > .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-nested { top:0; left:100%; transform:translateX(10px) translateY(0); border-top:3px solid var(--ba-orange); }
.dropdown-item:hover > .dropdown-nested { transform:translateX(0); }
.dropdown-link { display:flex; align-items:center; gap:8px; padding:10px 18px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.875rem; color:var(--ba-navy); white-space:nowrap; transition:var(--ba-tr); }
.dropdown-link:hover,.dropdown-link.active { color:var(--ba-orange); background:var(--ba-orange-lt); }
.dropdown-link.has-dropdown { justify-content:space-between; }
.dropdown-link .ico,.dropdown-link .nav-chevron { color:var(--ba-orange); width:1em; height:1em; flex-shrink:0; }
.dropdown-item:hover > .dropdown-link .nav-chevron { transform:rotate(-90deg); }
/* ---- MOBILE ACCORDION ------------------------------------ */
.mob-item { border-bottom:1px solid var(--ba-g100); }
.mob-item-row { display:flex; align-items:stretch; }
.mob-link { flex:1; display:flex; align-items:center; gap:8px; padding:13px 16px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.9rem; color:var(--ba-navy); transition:var(--ba-tr); }
.mob-link:hover,.mob-link.active { color:var(--ba-orange); background:var(--ba-orange-lt); }
.mob-toggle { flex-shrink:0; width:48px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-left:1px solid var(--ba-g100); cursor:pointer; color:var(--ba-navy); padding:0; transition:var(--ba-tr); }
.mob-toggle .ico { transition:transform .25s; }
.mob-toggle.open .ico { transform:rotate(180deg); }
.mob-sub { display:none; background:var(--ba-g50); padding:4px 0; }
.mob-sub.open { display:block; }
.mob-sub-link { display:flex; align-items:center; gap:8px; padding:11px 16px 11px 28px; font-family:'Montserrat',sans-serif; font-weight:500; font-size:.85rem; color:var(--ba-navy-mid); border-bottom:1px solid var(--ba-g100); transition:var(--ba-tr); }
.mob-sub-link:last-child { border-bottom:none; }
.mob-sub-link:hover,.mob-sub-link.active { color:var(--ba-orange); background:var(--ba-orange-lt); }
.header-cta { display:flex; align-items:center; gap:10px; }
.header-phone { display:flex; align-items:center; gap:8px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:.88rem; color:var(--ba-navy); padding:10px 16px; border-radius:var(--ba-r); border:2px solid var(--ba-g200); transition:var(--ba-tr); }
.header-phone .ico { color:var(--ba-orange); }
.header-phone:hover { border-color:var(--ba-orange); color:var(--ba-orange); }
.header.scrolled .header-phone { color:var(--ba-navy); }
.hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:4px; background:none; border:none; cursor:pointer; }
.hamburger span { display:block; height:3px; background:var(--ba-white); border-radius:2px; transition:var(--ba-tr); }
.header.scrolled .hamburger span { background:var(--ba-navy); }
.hamburger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
.mobile-nav { display:none; position:fixed; top:calc(var(--ba-topbar-h) + var(--ba-header-h)); left:0; right:0; bottom:0; background:var(--ba-white); padding:24px 20px; overflow-y:auto; z-index:999; flex-direction:column; gap:4px; }
.mobile-nav.open { display:flex; }
.mobile-nav a { display:block; padding:13px 16px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.9rem; color:var(--ba-navy); border-radius:var(--ba-r); border-bottom:1px solid var(--ba-g100); transition:var(--ba-tr); }
.mobile-nav a:hover { background:var(--ba-orange-lt); color:var(--ba-orange-dark); }
.mobile-cta { margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.mobile-cta .btn { justify-content:center; }

/* ---- BACK TO TOP ----------------------------------------- */
.back-to-top { position:fixed; bottom:28px; right:28px; width:46px; height:46px; background:var(--ba-orange); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(244,124,32,.4); opacity:0; pointer-events:none; transition:var(--ba-tr); z-index:500; cursor:pointer; font-size:1.2rem; line-height:1; }
.back-to-top.visible { opacity:1; pointer-events:all; }
.back-to-top:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(244,124,32,.5); }

/* ---- MOBILE BOTTOM BAR ----------------------------------- */
.mobile-bar { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--ba-navy); padding:12px 16px; z-index:900; gap:10px; }
.mobile-bar a { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:var(--ba-r); font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; transition:var(--ba-tr); }
.mobile-bar a.call   { background:var(--ba-orange); color:#fff; }
.mobile-bar a.sched  { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); }

/* ---- SCROLL ANIMATIONS ----------------------------------- */
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
.aos { opacity:0; transform:translateY(30px); transition:opacity .6s ease,transform .6s ease; }
.aos.show { opacity:1; transform:translateY(0); }

/* ---- FOOTER ---------------------------------------------- */
.footer { background:var(--ba-navy); color:rgba(255,255,255,.72); padding:70px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:50px; margin-bottom:25px; }
.footer-certs-grid { display:flex; justify-content:center; margin-bottom:20px; }
.footer-logo img { filter:brightness(10) saturate(0); height:95px; width:auto; opacity:.85; margin-bottom:18px; }
.footer-desc { font-size:.88rem; line-height:1.75; margin-bottom:22px; }
.footer-contacts { display:flex; flex-direction:column; gap:10px; }
.footer-ci { display:flex; gap:10px; align-items:flex-start; font-size:.86rem; }
.footer-ci .ico { color:var(--ba-blue); margin-top:3px; flex-shrink:0; }
.footer-col-title { font-family:'Montserrat',sans-serif; font-size:1rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:20px; }
.footer-links { display:flex; flex-direction:column; gap:9px; }
.footer-links a { color:rgba(255,255,255,.6); font-size:.87rem; display:flex; align-items:center; gap:7px; transition:var(--ba-tr); }
.footer-links a::before { content:''; width:5px; height:5px; background:var(--ba-orange); border-radius:50%; flex-shrink:0; }
.footer-links a:hover { color:#fff; padding-left:4px; }
.footer-divider { border:none; border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px 0; font-size:.82rem; color:rgba(255,255,255,.4); }
.footer-bottom-links { display:flex; gap:20px; }
.footer-bottom a { color:rgba(255,255,255,.4); transition:var(--ba-tr); }
.footer-bottom a:hover { color:var(--ba-orange); }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:38px; height:38px; background:rgba(255,255,255,.07); border-radius:8px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); transition:var(--ba-tr); }
.footer-social a:hover { background:var(--ba-orange); color:#fff; transform:translateY(-3px); }

/* ---- BLOG LOOP (index.php fallback) ---------------------- */
.bayarea-loop { display:grid; gap:28px; }
.bayarea-post-card { background:#fff; border:1px solid var(--ba-g200); border-radius:var(--ba-rlg); overflow:hidden; }
.post-card-body { padding:28px; }
.post-meta { font-size:.8rem; color:var(--ba-muted); margin-bottom:12px; display:flex; gap:12px; }

/* ---- RESPONSIVE ------------------------------------------ */
@media (max-width:1024px) {
  .nav { display:none; }
  .hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:768px) {
  :root { --ba-topbar-h:0px; --ba-header-h:66px; }
  .topbar { display:none; }
  .header { top:0; }
  .mobile-nav { top:66px; }
  .header-inner { height:66px; }
  .logo img { height:44px; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .mobile-bar { display:flex; }
  body { padding-bottom:72px; }
}
@media (max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
}