/* Utility: justified text with smart hyphenation */
.text-justify{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto; /* Safari */
  -ms-hyphens: auto;     /* legacy Edge */
}

    * { margin:0; padding:0; box-sizing:border-box; }
    :root {
      --primary-blue:#1e40af; --secondary-blue:#3b82f6; --accent-red:#ef4444; --accent-amber:#f59e0b; --accent-green:#10b981; --dark-gray:#1f2937; --light-gray:#f9fafb; --white:#fff; --text-dark:#111827; --text-light:#6b7280;
    }
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6; color:var(--text-dark); background:var(--white); overflow-x:hidden; }

    /* Header */
    .header { position:fixed; top:0; width:100%; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); z-index:1000; border-bottom:1px solid rgba(0,0,0,.06); }
    .nav { max-width:1200px; margin:0 auto; padding:1rem 5%; display:flex; justify-content:space-between; align-items:center; }
    .logo { font-size:1.1rem; font-weight:800; letter-spacing:.4px; color:var(--primary-blue); display:flex; gap:.6rem; align-items:center; }
    .logo small { font-weight:600; color:var(--text-light); }
    .nav-menu { display:flex; list-style:none; gap:1.25rem; }
    .nav-menu a { text-decoration:none; color:var(--text-dark); font-weight:600; }
    .nav-menu a:hover { color:var(--primary-blue); }
    .mobile-menu-btn { display:none; background:none; border:none; font-size:1.5rem; color:var(--primary-blue); }

   /* Hero */
/* Hero (improved contrast + glass panel) */
.hero{
  position: relative;
  min-height: 90vh;
  background-image: url("../images/hero/hero-1920.jpg");

  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 5% 4rem;
  overflow: clip;
}

/* Scrim over the image: gradient + vignette to lift contrast */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(80% 65% at 50% 45%, rgba(0,0,0,.40) 0%, rgba(0,0,0,.65) 70%, rgba(0,0,0,.80) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.65) 65%, rgba(0,0,0,.85) 100%);
  z-index:0;
}

/* Glass panel directly behind the text */
.hero-pane{
  position: relative;
  z-index: 1;
  max-width: 980px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 1.25rem 1.25rem 1.35rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px); /* Safari */
}

/* Typographic tweaks for readability */
.hero h1{
  color:#fff;
  font-weight:800;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  line-height:1.1;
  letter-spacing:.2px;
  text-shadow: 0 6px 30px rgba(0,0,0,.6);
  margin-bottom: .35rem;
}
.hero p{
  color:#eef2ff;
  margin-top:.5rem;
  max-width:900px;
  margin-inline:auto;
}
.motto{
  margin-top:1rem;
  display:inline-block;
  background:linear-gradient(90deg, var(--accent-red), var(--accent-amber));
  color:#fff;
  padding:.6rem 1rem;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.3px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.disclaimer{ margin-top:.75rem; color:#e5e7eb; opacity:.95; font-size:.92rem; }

/* Mobile refinements */
@media (max-width: 768px){
  .hero-pane{ padding: .9rem .95rem 1rem; border-radius:16px; }
  .hero h1{ font-size: clamp(1.6rem, 6.2vw, 2.4rem); }
}



    /* Sections */
    .section { padding:4.5rem 0; }
    .container { max-width:1200px; margin:0 auto; padding:0 5%; }
    .section-title { font-size:2.1rem; margin-bottom:.5rem; }
    .section-subtitle { color:var(--text-light); margin-bottom:2rem; }

    /* Cards & grids */
    .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.25rem; }
    .card { background:#fff; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.08); overflow:hidden; display:flex; flex-direction:column; }
    .card .tag { font-size:.78rem; font-weight:700; color:var(--white); background:var(--primary-blue); padding:.35rem .6rem; border-radius:8px; display:inline-block; }
    .card .body { padding:1.1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.55rem; }
    .card h3 { font-size:1.2rem; line-height:1.35; }
    .meta { color:var(--text-light); font-size:.85rem; }
    .card a { color:var(--primary-blue); text-decoration:none; font-weight:700; }
    .card a:hover { text-decoration:underline; }
    .chip { display:inline-flex; align-items:center; gap:.4rem; border:1px solid rgba(0,0,0,.1); padding:.25rem .5rem; border-radius:999px; font-size:.78rem; color:var(--text-light); }

    /* Emphasis blocks */
    .note { background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12; padding:1rem; border-radius:14px; }
    .good { background:#ecfdf5; border:1px solid #bbf7d0; color:#065f46; padding:1rem; border-radius:14px; }
    .bad { background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d; padding:1rem; border-radius:14px; }

    /* Footer */
    footer { background:var(--dark-gray); color:#fff; padding:2.5rem 0 2rem; text-align:center; margin-top:2rem; }

    /* Responsive */
    @media (max-width: 768px){ .nav-menu{ display:none; } .mobile-menu-btn{ display:block; } .hero h1{ font-size:2.2rem; } }

/* NEW MOBILE ADDITION */
/* ========== Mobile hero tuning ========== */
@media (max-width: 768px){
  .hero{
    min-height: 82vh;                 /* not so tall; shows more image */
    align-items: flex-end;             /* move panel toward the bottom */
    padding: 5.25rem 1rem 2rem;        /* tighter padding */
    background-position: center 23%;   /* reframe for tall screens */
  }
  .hero::before{
    /* lighter top so the image is more visible on phones */
    background:
      radial-gradient(100% 70% at 50% 35%,
        rgba(0,0,0,.18) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.70) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.80) 100%);
  }
  .hero-pane{
    max-width: 92vw;                   /* slimmer panel */
    background: rgba(0,0,0,.32);       /* slightly clearer glass */
    padding: .9rem 1rem 1.05rem;
    border-radius: 18px;
  }
  .hero h1{
    font-size: clamp(1.55rem, 6vw, 2.1rem);
    line-height: 1.15;
    margin-bottom: .3rem;
  }
  .hero p{ font-size: .98rem; }
  .motto{ font-size: .9rem; padding: .55rem .95rem; }
}

/* Extra-small phones */
@media (max-width: 420px){
  .hero{ min-height: 78vh; padding-bottom: 1.4rem; }
  /* Optional: if you want even more image, hide the disclaimer on XS
  .disclaimer{ display:none; }
  */
}

/* LAST UPDATE */
/* Match Note styling and tighten spacing under the News section */
.note--tight{ margin-top:.75rem; margin-bottom:0; }    /* compact variant */

/* Reduce the big vertical gap between News and EMF */
#news{ padding-bottom: 2rem; }     /* was 4.5rem via .section */
#emf{  padding-top: 2.5rem; }      /* was 4.5rem via .section */

/* The paragraph we replaced used .section-subtitle which has bottom margin;
   if any remain in #news, keep them tight: */
#news .section-subtitle{ margin-bottom: .5rem; }

/* Compact note variant (used for EMF Takeaway and News Note) */
.note--tight{ margin-top:.75rem; margin-bottom:0; }

/* Reduce vertical space between EMF and TOX sections */
#emf{ padding-bottom: 2rem; }   /* was 4.5rem via .section */
#tox{ padding-top: 2.25rem; }   /* was 4.5rem via .section */

/* Compact variant for the red hazard note */
.bad--tight{ margin-top:.75rem; margin-bottom:0; }

/* Reduce the space between TOX and RESCUE sections */
#tox{    padding-bottom: 1.75rem; }   /* was 4.5rem via .section */
#rescue{ padding-top:    2.00rem; }   /* was 4.5rem via .section */

/* Optional: even tighter on phones */
@media (max-width: 768px){
  #tox{ padding-bottom: 1.25rem; }
  #rescue{ padding-top: 1.6rem; }
}

/* Compact note variant (already used elsewhere) */
.note--tight{ margin-top:.75rem; margin-bottom:0; }

/* Kill extra gap from the UL inside the tips note */
#rescue .note ul{ margin-bottom:0; }
#rescue .note li{ margin-bottom:.4rem; } /* keep readable spacing */

/* Reduce the section padding between RESCUE and FAQ */
#rescue{ padding-bottom: 1.5rem; }  /* was 4.5rem via .section */
#faq{    padding-top:    2.0rem; }  /* was 4.5rem via .section */

/* Optional: even tighter on phones */
@media (max-width:768px){
  #rescue{ padding-bottom: 1.1rem; }
  #faq{    padding-top:   1.4rem; }
}

#news{
  background: linear-gradient(180deg, #f7fee7 0%, #f3ffe9 100%);
}

/* Very light aqua pastel background for EMF section */
#emf{
  background: linear-gradient(180deg, #ecfeff 0%, #f3fffe 100%);
  /* Optional subtle separation from previous section: */
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}

/* Very light yellow pastel background for Fire Toxicology */
#tox{
  background: linear-gradient(180deg, #fffde7 0%, #fffbea 100%);
  /* subtle top divider */
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}

/* Very light lavender pastel for Entrapment & Rescue */
#rescue{
  background: linear-gradient(180deg, #f5f3ff 0%, #f7f6ff 100%);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}

/* Very light blush pastel for FAQ */
#faq{
  background: linear-gradient(180deg, #fff1f2 0%, #fff5f6 100%);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}

/* NAVIGATION */
/* Make anchored sections scroll below fixed header */
#home, .section { scroll-margin-top: 80px; }

/* Mobile menu styles */
@media (max-width: 768px){
  .nav-menu{
    display: none;                      /* default hidden on mobile */
    position: fixed;
    top: 60px;                          /* sits just under the fixed header */
    left: 0; right: 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    flex-direction: column;
    gap: 0;
    z-index: 1001;                      /* above header (which is 1000) */
  }
  .nav-menu li + li { border-top: 1px solid rgba(0,0,0,.06); }
  .nav-menu a{
    display: block;
    padding: 1rem 5%;
    color: var(--text-dark);
  }
  .header.is-open .nav-menu{ display: flex; }  /* toggle open */
}

/* Position anchors below fixed header */
#home, .section { scroll-margin-top: 80px; }

/* Language switcher (shared) */
.lang-switch { position: relative; z-index: 1002; }
.lang-btn{
  display:flex; align-items:center; gap:.35rem;
  padding:.45rem .65rem;
  background:#eef2ff; color:var(--text-dark);
  border:1px solid rgba(0,0,0,.1);
  border-radius:999px; font-weight:700; cursor:pointer;
}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12);
  padding:.35rem; display:none; min-width:150px;
}
.lang-switch.is-open .lang-menu{ display:block; }
.lang-menu li{ list-style:none; }
.lang-menu button{
  width:100%; padding:.55rem .7rem; text-align:left;
  background:none; border:none; border-radius:8px; cursor:pointer;
}
.lang-menu button:hover{ background:#f3f4f6; }

/* Where the switcher shows */
.lang-switch-desktop{ display:none; }   /* hidden by default */
.lang-switch-mobile{ display:none; }    /* hidden by default */

@media (min-width: 769px){
  .lang-switch-desktop{ display:block; }  /* show in desktop menu */
  .lang-switch-mobile{ display:none !important; }
}

@media (max-width: 768px){
  .lang-switch-mobile{ display:block; margin-left:.75rem; }
  .lang-switch-desktop{ display:none !important; }
  .nav{ gap:.5rem; } /* breathing room for logo + lang + burger */
}

/* Keep mobile menu overlay above content */
@media (max-width: 768px){
  .nav-menu{
    display:none;
    position:fixed; top:60px; left:0; right:0;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(0,0,0,.06);
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    flex-direction:column; gap:0; z-index:1001;
  }
  .header.is-open .nav-menu{ display:flex; }
  .nav-menu li + li{ border-top:1px solid rgba(0,0,0,.06); }
  .nav-menu a{ display:block; padding:1rem 5%; color:var(--text-dark); }
}