/* =========================
   Blue Way Digital — Classic Light Theme
   ========================= */

/* ---- Variables (light theme) ---- */
:root{
  --bg: #f7fafc;                 /* page background (light gray) */
  --panel: #ffffff;              /* main panel / card shell */
  --card-bg: #ffffff;            /* card background */
  --text: #0b0c10;               /* primary (dark) text */
  --muted: #51606a;              /* secondary / muted text (blue-gray) */
  --accent: #0bb7c1;             /* accent — slightly darker teal for contrast on light bg */
  --accent-2: #0b8f78;
  --glass: rgba(2,6,8,0.04);     /* subtle glass on light */
  --radius:12px;
  --transition:200ms cubic-bezier(.2,.9,.2,1);
  --container-max:1100px;
  --nav-height:76px;
}


/* ---- Reset / base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg), #eef6f8 120%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
/* prevent horizontal scrolling */
html, body { overflow-x: hidden; }

/* ---- Header ---- */
header{
  position: relative !important;
  top: auto !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,253,0.98));
  border-bottom:1px solid rgba(2,6,8,0.06);
  box-shadow: 0 6px 18px rgba(2,6,8,0.04);
  backdrop-filter: blur(4px);
  z-index: 2000 !important;          /* sit above main content */
  overflow: visible !important;      /* don’t clip dropdown */
}

/* header container */
.header-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:.5rem 1rem;
  display:grid;
  grid-template-columns: auto 1fr auto; /* brand | nav | cta */
  align-items:center;
  gap:1rem;
  min-height:var(--nav-height);
  position: relative;                /* positioning context for menu */
}

/* Make brand link interactive */
.brand{
  color: var(--accent);
  transition: color var(--transition), transform var(--transition), filter var(--transition);
  cursor: pointer;
}
.brand:hover,
.brand:focus-visible{
  color: var(--accent-2);
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 20px rgba(11,143,120,.18));
  text-decoration: none;
}
.brand svg{ display:block } /* avoid baseline gaps */

/* Brand (left) */
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  font-family:Poppins, Inter, sans-serif;
  letter-spacing:.3px;
  font-size:1.05rem;
}
.brand-dot{
  width:14px; height:14px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 24px rgba(11,15,17,0.06);
  flex-shrink:0;
}

/* Center nav wrapper */
.nav-wrap{ justify-self:center; display:flex; align-items:center; gap:1rem; min-width:0; }

.nav-list{
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:center;
  list-style:none;
  margin:0;
  padding:0;
  white-space:nowrap;
}

.nav-list li{ margin:0; }
.nav-list a{
  display:inline-flex;
  align-items:center;
  padding:.6rem .9rem;
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  border-radius:10px;
  background: transparent;
  border:1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  font-size:1rem;
}

.nav-list a:hover,
.nav-list a:focus{
  transform:translateY(-3px);
  background: linear-gradient(90deg, rgb(255, 255, 255), rgba(11,143,120,0.06));
  box-shadow: 0 10px 28px rgba(255, 255, 255, 0.04);
  outline: none;
}

.nav-list a.active{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#ffffff;
  box-shadow: 0 18px 48px rgba(11,143,120,0.08);
  transform:none;
}

/* CTA (right) */
.header-cta{ display:flex; gap:.6rem; align-items:center; justify-content:center; }

.btn{
  padding:.6rem 1rem;
  border-radius:10px;
  font-weight:700;
  color:#ffffff;  /* was #041213 – white is easier to read on teal */
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border:none;
  text-decoration:none;
  box-shadow:0 12px 36px rgba(11,15,17,0.10);
  font-family:Poppins, Inter, sans-serif;
  font-size:.95rem;
  transition:
    background var(--transition),
    transform var(--transition),
    box-shadow var(--transition),
    filter var(--transition);
}

/* Hover / focus state – brighter + lifted */
.btn:hover,
.btn:focus-visible{
  background: linear-gradient(90deg,
    #12c7d2, /* slightly brighter than var(--accent) */
    #0ca786  /* slightly brighter than var(--accent-2) */
  );
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(11,15,17,0.18);
  filter: saturate(1.05);
  color:#ffffff; /* keep white text on hover */
  outline: none;
}


/* ghost button with white background + slate border + dark teal text */
.btn-ghost{
  padding:.6rem .9rem;
  border-radius:10px;
  background:#ffffff;
  border:1px solid #4a6570;
  color:#0b0c10;
  text-decoration:none;
  font-weight:600;
  transition: background .2s, color .2s, border-color .2s;
}

.btn-ghost:hover{
  background:#4a6570;
  color:#ffffff;
}



/* mobile toggle (hamburger) */
.nav-toggle{
  display:none;
  background:transparent;
  border:none;
  padding:.5rem .6rem;   /* nicer tap target */
  cursor:pointer;
  color:var(--muted);
  border-radius:8px;
}
.nav-toggle svg{ display:block }

/* mobile menu (dropdown) — LEFT aligned by default */
.mobile-menu{
  display:none;
  position:absolute;
  left:.5rem;            /* align to the left */
  right:auto;
  transform:none;        /* no centering transform */
  top: calc(var(--nav-height) + 8px);
  background: var(--panel);
  border-radius:10px;
  padding:.6rem;
  width:420px;
  max-width: calc(100% - 1rem);  /* prevent overflow on small screens */
  max-height: calc(100dvh - var(--nav-height) - 12px); /* scroll-safe on phones */
  overflow:auto;
  box-shadow: 0 18px 70px rgba(2,6,8,0.06);
  border:1px solid rgba(2,6,8,0.06);
  z-index:1000;
}
header.is-open .mobile-menu { display: block; }

.mobile-menu ul{
  display:flex; flex-direction:column; gap:.2rem;
  margin:0; padding:0; list-style:none;
}
.mobile-menu a{
  padding:.9rem 1rem;
  color:var(--text);
  text-decoration:none;
  display:block;
  border-radius:8px;
}
.mobile-menu a:hover{ background: rgba(11,143,120,0.06) }

/* ---------- Main / content ---------- */
.container{
  max-width:var(--container-max);
  margin: 2.25rem auto;
  padding: 1rem;
  display:flex;
  justify-content:center;
}

main.card{
  width:100%;
  max-width:980px;
  background: var(--panel);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow: 0 10px 40px rgba(2,6,8,0.06);
  color:var(--text);
  border: 1px solid rgba(2,6,8,0.04);
}

/* ---------- Hero ---------- */
 
/* Force the hero into a single centered column */
.hero{
  display:block !important;              /* override any flex/grid layout */
  text-align:center;                     /* center headings by default */
}
.hero .hero-left{
  max-width: 720px;                      /* tidy readable width */
  margin: 0 auto !important;             /* center the block itself */
  text-align: center !important;         /* ensure text is centered */
}
.hero .hero-actions{
  display:flex;                          /* ensure button row centers */
  justify-content:center !important;
  gap: .6rem;
  flex-wrap: wrap;
}
/* Make the image block centered and tidy */
.hero .hero-art .card{
  width:100%;
  max-width:560px;
  margin:1.2rem auto 0 auto;             /* centers the image card */
}
.hero .hero-art img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:12px;
}

/* Optional: a bit tighter on phones */
@media (max-width:700px){
  .hero .hero-left{ padding: 0 14px; }
  .hero .hero-art .card{ max-width: 520px; }
}
 

.hero{
  display:grid;
  grid-template-columns: 1fr minmax(280px,420px);
  gap:2rem;
  align-items:center;
}

.hero-left{ text-align:left }
.hero-left h1{
  margin:0 0 .6rem 0;
  font-family:Poppins, Inter, sans-serif;
  font-size:2rem;
  line-height:1.05;
  color:var(--text);
}
.lead{ margin:0 0 1rem 0; color:var(--muted); font-size:1.05rem; }

.hero-actions{ display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; margin-top:.8rem; }

.hero-art .card{
  background: linear-gradient(180deg, rgba(247,250,252,1), rgba(255,255,255,1));
  padding:1rem;
  border-radius:10px;
  border: 1px solid rgba(2,6,8,0.04);
}
.hero-art img{ width:100%; height:auto; display:block; border-radius:8px; object-fit:cover; }

/* services grid */
.services{
  margin-top:1.6rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}
.service{
  background: var(--card-bg);
  border-radius:10px;
  padding:1rem;
  min-height:120px;
  color:var(--text);
  box-shadow: 0 8px 30px rgba(2,6,8,0.04);
  border:1px solid rgba(2,6,8,0.06);
}
.service h4{ margin:0 0 .5rem 0; font-size:1.02rem; font-weight:700; font-family:Poppins, Inter, sans-serif; color:var(--text); }
.service p{ margin:0; color:var(--muted); font-size:.96rem; }

/* about / packages block */
.about{ margin-top:1.5rem; display:flex; gap:1.25rem; align-items:center; justify-content:space-between; }
.about p{ color:var(--muted); margin:0; }

footer{ margin-top:2rem; padding:1.25rem; text-align:center; color:var(--muted); font-size:.95rem; }

/* focus for keyboard users */
a:focus, button:focus { outline: 3px solid rgba(11,143,120,0.12); outline-offset: 2px; }

/* ---- Accessibility / tweaks for light theme ---- */
.lead,
.muted,
.service p,
.about p,
.card p,
footer,
.container p {
  color: var(--muted);
  line-height:1.6;
}

h1, h2, h3, h4, .service h4, .brand-text { color: var(--text); }

a { color: var(--accent); text-decoration: underline; }
a:hover, a:focus { color: var(--accent-2); text-decoration: none; }

.btn { color: #041213; }
 

.kicker, .small { color: rgba(81,96,106,0.9); font-size: .95em; }

.mobile-menu a { color: var(--text); }

.service + .service { border-left: none; }

.reader {
  background: #ffffff;
  color: var(--text);
}
.reader p, .reader .lead {
  font-size: 16px;
  line-height: 1.75;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.25rem;
}

/* ====== Mobile menu backdrop when open (non-breaking) ====== */
header.is-open::after{
  content:"";
  position: fixed;
  inset: var(--nav-height) 0 0 0;  /* start under the header */
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1999;                   /* under the header (2000) but above content */
  pointer-events: none;
}

/* End of Classic Light Theme CSS */

/* ===== Blue Way Digital — Contact form tweaks ===== */
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.form-field.full { grid-column: 1 / -1; }
.form-label {
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-weight:600;
  font-size:0.95rem;
}
.form-control {
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(2,6,8,0.06);
  background:var(--card-bg);
  color:var(--text);
  font-size:1rem;
  transition: box-shadow var(--transition), border-color var(--transition);
  box-shadow: none;
  outline:none;
}
.form-control:focus {
  border-color: rgba(11,143,120,0.18);
  box-shadow: 0 8px 20px rgba(11,143,120,0.06);
}
.form-textarea { min-height:140px; resize:vertical; }
.bwd-form .btn { min-width:160px; }
.bwd-form .btn-ghost { padding:10px 12px; }
#formMessage { font-size:0.95rem; }
#formMessage.success { color:#0b7a3a; font-weight:600; }
#formMessage.error { color:#b42727; font-weight:600; }

/* =========================
   ALL MOBILE / RESPONSIVE LOGIC — MOVED TO END
   ========================= */

/* Nav: prevent horizontal overflow before 640px breakpoint */
@media (max-width: 820px){
  .nav-list { white-space: normal; flex-wrap: wrap; gap: .25rem; }
  .nav-list a { font-size: .95rem; padding: .5rem .7rem; }
}

/* Hero: force single column sooner, shrink headline a bit */
@media (max-width: 820px){
  .hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero-left h1 { font-size: 1.6rem; }
}

/* Tablets / small laptops */
@media (max-width:980px){
  .hero{ grid-template-columns: 1fr; text-align:left; }
  .services{ grid-template-columns: repeat(2,1fr); }
}

/* --- Mobile: center brand, hamburger on right — works even if nav-toggle is inside .nav-wrap --- */
@media (max-width:700px){
  .header-inner{
    display:grid;
    grid-template-columns: 1fr auto 1fr; /* left spacer | brand | right (hamburger) */
    align-items:center;
  }

  /* Flatten .nav-wrap so its children (like .nav-toggle) join the parent grid */
  .nav-wrap{ display: contents; }

  /* Hide desktop nav & CTA */
  .nav-list, .header-cta { display: none !important; }

  /* Brand centered in the middle column */
  .brand{
    grid-column: 2;
    justify-self: center;
  }
  .brand svg{ max-width:62vw; height:auto; display:block; }

  /* Place hamburger in right column whether nested or direct */
  .header-inner > .nav-toggle,
  .nav-wrap .nav-toggle{
    display: inline-flex !important;
    grid-column: 3;
    justify-self: end;
    margin: 0 !important;
    padding: .5rem .6rem;
  }

  /* Left-align dropdown and keep it fully visible */
  .mobile-menu{
    position: fixed;                 /* escape stacking contexts */
    top: var(--nav-height);          /* sits just below the header */
    left: .5rem;
    right: .5rem;                    /* keep it inside viewport */
    transform: none;
    width: auto;                     /* width now controlled by left/right */
    max-width: none;
    max-height: calc(100dvh - var(--nav-height) - 12px);
    overflow: auto;
    z-index: 3000;                   /* above everything but header (and overlay is under this) */
    background: var(--panel);
    border: 1px solid rgba(2,6,8,0.06);
    border-radius: 10px;
    box-shadow: 0 18px 70px rgba(2,6,8,0.10);
  }

  /* Prevent background scroll when menu open (class toggled by JS) */
  body.menu-open { overflow: hidden; }
}

/* Reduce global paddings for small screens */
@media (max-width: 640px){
  .container { padding: 0.75rem; }
  main.card { padding: 1.25rem; }
  .services { grid-template-columns: 1fr; }
}

/* Extra tightening for small phones (≤600px) */
@media (max-width:600px){
  .header-inner{ padding:.4rem .75rem; }
  .nav-toggle{ padding:.45rem .55rem; }
  .hero-left h1{ font-size:1.4rem; }
  .container { padding: 0.75rem; }
  main.card { padding: 1.25rem; }
}

/* Form grid: extra-tight for very small devices */
@media (max-width: 400px){
  .form-control { font-size: .95rem; padding: 9px 10px; }
  .bwd-form .btn { min-width: 140px; }
}


/* === Mobile menu portalized to <body> when open === */
.mobile-menu--portal{
  position: fixed;
  top: var(--nav-height, 76px);
  left: .5rem;
  right: .5rem;
  max-height: calc(100dvh - var(--nav-height, 76px) - 12px);
  overflow: auto;
  background: var(--panel, #fff);
  border: 1px solid rgba(2,6,8,0.06);
  border-radius: 10px;
  box-shadow: 0 18px 70px rgba(2,6,8,0.12);
  z-index: 999999; /* sit above everything */
}

#menu-backdrop{
  position: fixed;
  top: var(--nav-height, 76px);
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 999990; /* just under the menu */
}

/* Avoid background scrolling while open */
body.menu-open { overflow: hidden; }


/* To make Pro package more popular */
.badge-popular {
  display: block;
  background: #0bb7c1;
  color: white;
  font-size: .7rem;
  font-weight: 700;
  padding: .25rem .55rem;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 auto .5rem auto; /* centers it */
  text-align: center;
  width: fit-content;
}

/* Highlight ONLY the Pro card in the Packages section */
.services .service:nth-child(2) {
  border: 2px solid #0bb7c1;
  box-shadow: 0 0 18px rgba(11, 183, 193, 0.18);
  transform: scale(1.04);
  padding-top: 1rem; /* optional, nicer spacing with badge */
}



 /*  customer portal style */
.customer-portal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;   /* adjust 32–40px */
  height: 34px;
  margin-right: 0.75rem;
  text-decoration: none;
  cursor: pointer;
}

.customer-portal-icon {
  width: 100%;
  height: 100%;
}

.cp-bg {
  fill: #0bb7c1; /* your teal brand color */
}

.cp-avatar {
  fill: #ffffff;
}

/* Optional hover */
.customer-portal-link:hover .cp-bg {
  fill: #0b8f78; /* darker teal */
}

/* mobile menu customer portal icon tweaks */
.mobile-menu .customer-portal-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
}

.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
}