/* ================================
   Respiratory Plus — Modern theme
   ================================ */
:root{
  --gold:#32B5A4; /* repurposed to turquoise for legacy references */
  --navy:#2B3F54; /* Dark Blue */
  --emerald:#32B5A4; /* Turquoise */
  --deep-red:#A8321A;

  --ink:#3D3D3D; /* primary text */
  --muted:#717171; /* secondary text */
  --bg:#FFFFFF; /* background */
  --card:#ffffff;
  --radius:18px;
  --ring: rgba(50,181,164,.22);
  --brand-grad: linear-gradient(135deg, #32B5A4 0%, #2B3F54 100%);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 10px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.14);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
h1,h2,h3{ font-weight:800; color: var(--navy); }
img{max-width:100%;display:block;height:auto}
a{color:var(--emerald);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.grid{display:grid;gap:1.2rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card);border-radius:var(--radius);box-shadow:0 1px 0 rgba(0,0,0,.04), 0 10px 24px rgba(0,0,0,.06);overflow:hidden}
.pad{padding:1.25rem}
.btn{display:inline-block;border:0;border-radius:12px;padding:.7rem 1rem;font-weight:700;cursor:pointer}
.btn-emerald{background:var(--emerald);color:#fff; box-shadow: 0 8px 16px rgba(60,165,107,.22)}
.btn-emerald:hover{ filter: brightness(1.05); transform: translateY(-1px) }
.btn-navy{background:var(--navy);color:#fff; box-shadow: 0 8px 16px rgba(27,45,66,.22)}
.btn-navy:hover{ filter: brightness(1.05); transform: translateY(-1px) }
.btn:focus{outline:3px solid var(--ring)}
.chip{display:inline-flex;align-items:center;padding:.3rem .65rem;border-radius:999px;background:#eef2ff;color:#1b2d42;font-weight:700}
.chip-navy{background:var(--navy);color:#fff}
.text-emerald{color:var(--emerald)}
.meta{color:var(--muted);font-size:.95rem}
.sub{color:var(--muted);margin:.25rem 0 1rem}

/* ---------- Header & Navbar ---------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background: transparent;                 /* video shows behind */
  border-bottom: 10px solid var(--navy);   /* thick lower line */
  backdrop-filter: saturate(180%) blur(6px);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  overflow:hidden;
}
/* SOLID overlay (no gradient) so it's one color across */
.site-header::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: rgba(43, 63, 84, 0.82);      /* semi-transparent navy */
  background-image: none;
  mix-blend-mode: normal;
}
/* Ensure header contents render above the ::after overlay */
.site-header { position: sticky; } /* already, but must be positioned */
.site-header > * { position: relative; z-index: 2; }

/* Extra-safe: specifically target the navbar container + logo */
.site-header .container.navbar,
.site-header .logo {
  position: relative;
  z-index: 3;
}

/* Bootstrap navbar sits above overlay */
.rp-navbar{
  position: relative; z-index: 2;
  background: transparent !important;      /* let ::after be visible */
  min-height: 25vh;                         /* keep tall header */
  display: flex; align-items: center;
}

/* White nav text only */
.rp-navbar .nav-link{
  position: relative;
  color: #ffffff !important;
  font-weight: 700;
  padding: .45rem .7rem;
  border-radius: 12px;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.rp-navbar .nav-link:hover{
  color:#fff !important;
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

/* Accent underline on hover */
.rp-navbar .nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-6px; height:2px;
  background: linear-gradient(90deg, var(--emerald), var(--navy));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.rp-navbar .nav-link:hover::after{ transform: scaleX(1); }

/* Logo padding / sizing */
.site-header .logo{ padding: 8px 12px; border-radius: 12px; }
.site-header .logo img{
  padding: 6px;
  background: transparent;
  max-height: calc(25vh - 24px);
  height: auto; width: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

/* Mobile collapse background for readability */
@media (max-width: 991.98px){
  .rp-navbar .navbar-collapse.rp-collapse{
    background: rgba(43,63,84,.92);
    border-bottom: 8px solid var(--navy);
    padding: .75rem;
    border-radius: 0 0 12px 12px;
  }
  .rp-navbar { min-height: 92px; }
  .site-header .logo img{ max-height: 64px; padding: 4px; }
}

/* ---------- Hero / Sections (unchanged from your theme) ---------- */
.hero{
  padding:3rem 0 2rem;
  background:
    radial-gradient(1200px 600px at 20% -10%, var(--gold) 0%, transparent 60%),
    radial-gradient(900px 400px at 120% 10%, #fff 0%, transparent 70%);
}
.hero-wrap{display:grid;gap:2rem;grid-template-columns:1.05fr .95fr}
.hero h1{font-size:clamp(2rem, 2.8vw + 1rem, 3rem);line-height:1.12;margin:.2rem 0 .4rem;color:var(--navy)}
.hero .lead{font-size:1.1rem}
.search{display:flex;gap:.6rem;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:.35rem}
.search input{border:0;outline:none;font-size:1rem;flex:1;padding:.75rem;background:transparent}
.hero-card .guide-card{display:flex;gap:.9rem}
.icon.pill{
  width:48px;height:48px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff
}
.icon.pill.navy{background:var(--navy)}
.icon.pill.emerald{background:var(--emerald)}
.icon.pill.gold{background:var(--gold);color:#222}
.icon.pill.red{background:var(--deep-red)}

.icon-wrap{ width:120px; height:120px; display:flex; align-items:center; justify-content:center; }
.icon-wrap img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Navbar background video (no scaling) */
.nav-video-stage{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.nav-video-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:none; object-position: 50% 50%;
  opacity:.5;
  filter: grayscale(80%) brightness(0.8) contrast(1.2);
  transition: object-position 3.2s ease-in-out, opacity .3s ease;
}
.nav-video-overlay{ display:none; }

/* Sections */
.section{padding:2rem 0}
.section-soft{background:linear-gradient(#fff,#f9fafb)}
.section-head h2{
  margin:.2rem 0 .1rem;
  background: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.section-head h2::after{
  content:""; display:block; width:64px; height:3px; border-radius:2px;
  background: var(--brand-grad); margin-top:.4rem
}

/* Post cards */
.post-card{ overflow:hidden; transition: transform .25s ease, box-shadow .25s ease }
.post-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md) }
.post-card img{aspect-ratio: 16/9; object-fit: cover; transition: transform .6s ease }
.post-card:hover img{ transform: scale(1.06) }
.post-card .content{padding:1rem}
.post-card h3{margin:.25rem 0 .4rem;font-size:1.15rem}

/* Category cards */
.cat{display:flex;gap:.9rem;align-items:center}
.cat .name{font-weight:800}
.cat .desc{color:var(--muted);font-size:.95rem}

/* News */
.news{display:grid;gap:1rem;grid-template-columns:1.1fr .9fr;align-items:center}
.news .newsletter{display:flex;gap:.5rem}
.news input{flex:1;border-radius:12px;border:1px solid #e5e7eb;padding:.8rem}
.hide{display:none}

/* Footer */
.site-footer{background:var(--navy);color:#fff;padding:2rem 0;margin-top:1rem}
.site-footer a{color:var(--gold)}
.site-footer .cols{display:grid;gap:1.25rem;grid-template-columns:2fr 1fr 1fr}
.sep{border:0;border-top:1px solid rgba(255,255,255,.2);margin:1rem 0}
.tiny{font-size:.9rem;color:#e6e9ef}

/* Modern polish */
.card{ border:1px solid rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease }
.logo img{ filter: drop-shadow(0 2px 4px rgba(0,0,0,.12)) }
.chip{ box-shadow: 0 4px 10px rgba(27,45,66,.08) }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}

/* Grid responsiveness */
@media (max-width: 980px){
  .hero-wrap{grid-template-columns:1fr}
  .news{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 740px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}