/* ================================
   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 */
.site-header{
  position:sticky;top:0;z-index:100;
  background: transparent; /* video shows behind */
  border-bottom: 10px solid var(--navy); /* thicken lower line */
  backdrop-filter:saturate(180%) blur(6px);
  overflow:hidden;
}
.site-header::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg, rgba(27,45,66,0.95) 0%, rgba(43,63,84,0.75) 40%, rgba(255,255,255,.55) 80%); /* slightly darker left */
}
.navbar{height: 25vh !important; display:flex;align-items:center;justify-content:space-between;padding:1.35rem 0; position:relative; z-index:2}
.nav-links{display:flex;gap:.9rem;align-items:center}
.nav-links a{color:var(--navy);font-weight:700}
.nav-toggle{display:none;border:0;background:transparent;font-size:1.5rem}
/* Ensure nav visible on desktop even with Bootstrap .collapse */
.site-header .nav-links.collapse{ display:flex }

/* Modernize nav links */
.nav-links a{
  position:relative;
  color:var(--navy);
  font-weight:700;
  padding:.45rem .7rem;
  border-radius:12px;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.nav-links a:hover{
  background: rgba(43,63,84,.10);
  transform: translateY(-1px);
}
.nav-links a::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;
}
.nav-links a:hover::after{ transform: scaleX(1); }

/* Hero */
.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; /* do not scale; show portion only */
  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: var(--brand-grad); -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 }
}

/* Responsive */
@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){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;left:0;right:0;top:60px;background:#FFFFFF;padding:1rem;border-bottom:8px solid var(--navy)}
  .site-header .nav-links.collapse{ display:none }
  .nav-links.open, .site-header .nav-links.collapse.show{display:flex;flex-direction:column}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}