@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap");
body {
  background: #000;
  background-size: cover;
  background-position: center;
  font-family: "Open Sans", sans-serif;
}
:root{
    --bg: #000;              /* header over hero */
    --bg-elev:#0b0b0b;       /* scrolled */
    --text:#fff;
    --muted:#cfcfcf;
    --accent:#ff3b2f;        /* brand red */
    --ring: rgba(255,59,47,.55);
    --divider: rgba(255,255,255,.08);
    --speed:.18s;

    --fs-brand: clamp(15px,1.6vw,19px);
    --fs-link: clamp(11px,1.0vw,13px);
    --ls: clamp(.06em,.12em,.16em);
    --nav-h: clamp(48px,6.6vh,58px);

    /* dynamic indicator defaults */
    --ind-left: 0px; /* set by JS */
    --ind-width: 0px; /* set by JS */
    --ind-opacity: 0; /* 0..1 */
}

.main {
  -webkit-text-fill-color: white;
  position: relative;
  z-index: 10;
}

.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 0 2rem;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
  height: 6rem;
  display: flex;
  align-items: center;
  gap: 3rem;
  z-index: 1000; /* Ensure header is above background elements */
}

.header__logo {
  width: 33.33%; /* Approximately one-third of the screen width */
  text-align: center;
}

.header__logo img {
  width: 50%; /* Make the logo 50% smaller */
}


body {
  background-color: #000000;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

header {
  padding: 400px 0px;
}

section,
footer {
  padding: 100px 0px;
}
h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 10px 0px;
  animation: fadeIn 1.5s ease-in-out;
}

h1 span {
  color: #ff0000;
}

header p {
  font-size: 14px;
  font-weight: 400;
  margin: 10px 0 20px;
  text-transform: uppercase;
  animation: slideUp 1s ease-out;
}

.buttons {
  margin-top: 20px;
  animation: fadeIn 1.5s ease-in-out 0.5s backwards;
}

button {
  padding: 12px 25px;
  border-radius: 25px;
  border: none;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  margin: 0 10px;
  transition: transform 0.3s, background-color 0.3s;
}

button:hover {
  transform: scale(1.05);
}

.report-hate {
  background-color: #ff0000;
  color: #ffffff;
  justify-content: center;
}

.report-hate:hover {
  background-color: #cc0000;
}

.get-involved,
.column button,
.community-wall button,
.become-partner {
  background-color: #ffffff;
  color: #000000;
  justify-content: center;
}

.get-involved:hover,
.column button:hover,
.community-wall button:hover,
.become-partner:hover {
  background-color: #e0e0e0;
  justify-content: center;
}

.featured-initiatives h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  animation: fadeIn 1.5s ease-in-out 0.5s backwards;
}

.columns {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.column {
  background-color: #1c2526;
  padding: 20px;
  width: 250px;
  border-radius: 10px;
  animation: slideUp 1s ease-out 0.7s backwards;
}

.column h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.column p {
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 15px;
}

.column button {
  padding: 8px 15px;
  font-size: 12px;
}

.news-and-community {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  gap: 20px;
  animation: fadeIn 1.5s ease-in-out 1s backwards;
}

.news-container,
.community-container {
  background-color: #1c2526;
  width: 45%;
  padding: 20px;
  border-radius: 10px;
  text-align: left;
}

.news-container h2,
.community-container h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

.news-container ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.news-container li {
  font-size: 14px;
  font-weight: 400;
  margin: 10px 0;
  text-transform: none;
}

.news-container a {
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.news-container a span {
  color: #ff0000;
  font-size: 16px;
  margin-left: 5px;
}

.community-container h2 {
  color: #ff3333;
}

.community-container p {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 15px;
}

.community-container button {
  padding: 8px 15px;
  font-size: 12px;
}

.resources {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 20px 20px;
  background-color: #1c2526;
  animation: slideUp 1s ease-out 1.2s backwards;
}

.resource {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.resource i {
  font-size: 20px;
  margin-bottom: 10px;
}

.resource p {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

footer h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  animation: fadeIn 1.5s ease-in-out 1.5s backwards;
}

footer h2 span {
  color: #ff0000;
}

footer .buttons {
  margin-top: 20px;
}

.donate-now {
  background-color: #ff0000;
  color: #ffffff;
}

.donate-now:hover {
  background-color: #cc0000;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.scroll-arrow {
  font-size: 24px;
  color: #ffffff;
  animation: bounceFade 2s ease-in-out infinite;
  margin-top: 45px;
  width: 100%;
  display: flex;
  justify-content: center;
}

@keyframes bounceFade {
  0% {
    opacity: 0.5;
    transform: translateY(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-15px) rotate(5deg);
  }
  100% {
    opacity: 0.5;
    transform: translateY(0) rotate(0deg);
  }
}

.custom-header {
  background-image: url(bg4.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 320px; /* Reduced from a potential default of 320px to move content 200px higher */
} /* Contact Form Styling */
.contact-form-container {
  background-color: #1c2526;
  border-radius: 10px;
  padding: 40px;
  margin: 40px auto;
  max-width: 800px;
  text-align: left;
  animation: slideUp 1s ease-out 0.5s backwards;
}

.contact-form-container h1 {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
  text-align: center;
}

.contact-form-container p {
  font-size: 16px;
  font-weight: 400;
  color: #cccccc;
  margin-bottom: 30px;
  text-align: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  background-color: #2a3637;
  border: none;
  border-radius: 5px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border: 2px solid #ff0000;
}

.form-group textarea {
  resize: vertical;
}

.submit-btn {
  background-color: #ff0000;
  color: #ffffff;
  padding: 12px 25px;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  align-self: center;
}

.submit-btn:hover {
  background-color: #cc0000;
  transform: scale(1.05);
}

/* About Us Page Styling */
.about-content {
  max-width: 1400px; /* Increased width for wider columns */
  margin: 0 auto;
  padding: 40px 20px;
  animation: fadeIn 1.5s ease-in-out;
}

.two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px; /* Increased gap for better spacing */
  margin-top: 30px;
}

.column-left,
.column-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.content-box {
  background-color: #1c2526;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  animation: slideUp 1s ease-out 0.5s backwards;
  min-height: 300px; /* Increased minimum height for larger boxes */
}

.content-box:hover {
  transform: translateY(-8px);
}

.content-box h2 {
  font-size: 28px; /* Larger font size for headings */
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px; /* More spacing below headings */
  text-align: left;
}

.content-box p {
  font-size: 16px; /* Larger font size for text */
  font-weight: 400;
  color: #cccccc;
  margin-bottom: 15px; /* More spacing between paragraphs */
  text-align: left;
  line-height: 1.8; /* Increased line height for readability */
}

.team-member {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.team-image-placeholder {
  width: 80px;
  height: 80px;
  background-color: #2a3637;
  border-radius: 50%;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cccccc;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  flex-shrink: 0;
}

.content-box a {
  color: #ff0000;
  text-decoration: none;
  transition: color 0.3s ease;
}

.content-box a:hover {
  color: #cc0000;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .two-column-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .custom-header {
    padding: 100px 0;
  }
  h1 {
    font-size: 48px;
  }
  .buttons button {
    padding: 10px 20px;
    font-size: 14px;
  }
  .news-and-community {
    flex-direction: column;
    align-items: center;
  }
  .news-container,
  .community-container {
    width: 90%;
  }
  .columns {
    flex-direction: column;
    align-items: center;
  }
  .column {
    width: 80%;
  }
}

*{ box-sizing:border-box; min-inline-size:0; }
html,body{ margin:0; }
body{ font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#000; color:var(--text); }

/* ===== Accessibility ===== */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:16px; top:calc(env(safe-area-inset-top,0) + 8px); width:auto; height:auto; background:#fff; color:#000; padding:10px 14px; border-radius:10px; z-index:2000; }

/* ===== Header ===== */
.site-header{ position:sticky; top:0; z-index:1000; background:rgba(0,0,0,.35); backdrop-filter:blur(8px); border-bottom:1px solid var(--divider); transition: background var(--speed) ease, box-shadow var(--speed) ease, transform .24s ease; padding-top: env(safe-area-inset-top); will-change: transform; }
.site-header.is-scrolled{ background:var(--bg-elev); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.site-header.hide{ transform: translateY(calc(-1 * var(--nav-h))); }
@supports not ((backdrop-filter: blur(8px))) { .site-header{ background:rgba(0,0,0,.9); } }

.nav{ height:var(--nav-h); max-width:1200px; margin:0 auto; padding:0 max(14px, env(safe-area-inset-left)); padding-right:max(14px, env(safe-area-inset-right)); display:grid; grid-template-columns:auto 1fr auto; align-items:center; }

/* Brand */
.brand{ text-decoration:none; display:inline-grid; grid-auto-flow:column; gap:8px; align-items:center; padding:4px 6px; border-radius:10px; }
.brand .nh{ color:var(--accent); font-weight:800; font-size:var(--fs-brand); letter-spacing:.02em; line-height:1 }
.brand .ca{ color:#fff; opacity:.95; font-weight:800; font-size:var(--fs-brand); letter-spacing:.02em; line-height:1 }
.brand:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; }

/* Links — minimal + dynamic indicator */
.nav-links{ position:relative; justify-self:center; display:flex; align-items:center; gap: clamp(8px, 1.4vw, 18px); overflow:auto; scrollbar-width:none; }
.nav-links::-webkit-scrollbar{ display:none; }
.nav-link{ position:relative; text-decoration:none; color:var(--muted); text-transform:uppercase; letter-spacing:var(--ls); font-weight:800; font-size:var(--fs-link); padding: 8px 0; line-height:1; white-space:nowrap; }
.nav-link:hover{ color:#fff; }
.nav-link[aria-current="page"]{ color:#fff; }

/* Sliding indicator bar */
.nav-indicator{ position:absolute; bottom:2px; left:0; height:2px; width:var(--ind-width); transform:translateX(var(--ind-left)); background:var(--accent); border-radius:2px; box-shadow:0 2px 10px rgba(255,59,47,.45); opacity:var(--ind-opacity); pointer-events:none; transition: width .22s ease, transform .22s ease, opacity .22s ease; }

/* Toggle behaviors */
@media (max-width: 980px){
    .nav{ grid-template-columns:auto 1fr auto; }
    .nav-links{ display:none; }
    .nav-toggle{ display:inline-flex; }
    #nav-open:checked + header .nav-panel{ display:block; }
    .site-header{ background:var(--bg-elev); }
}

/* Body scroll lock when :has() is available */
@supports (selector(:has(*))){ body:has(#nav-open:checked) { overflow:hidden; } }

/* Demo hero (remove) */
.hero{ height:64vh; background:url('https://images.unsplash.com/photo-1520975916090-3105956dac38?q=80&w=1960&auto=format&fit=crop') center/cover no-repeat; display:grid; place-items:center; text-align:center; padding:0 20px; }
.hero h1{ font-size: clamp(28px, 4vw, 56px); margin:0; text-transform:uppercase; letter-spacing:.06em }
.hero p{ margin:12px 0 0; color:#ddd }

@media (prefers-reduced-motion: reduce){ *, *::before, *::after{ transition:none !important; } .site-header{ transform:none !important; } }
@media (prefers-contrast: more){ .nav-indicator{ height:3px } }

/* center the button row */
.buttons{
    display:flex;
    justify-content:center;   /* <-- centers horizontally */
    align-items:center;       /* optional: aligns vertically if there's a height */
    gap:12px;
    flex-wrap:wrap;
    margin:12px auto 0;       /* centers the block itself */
}

/* your existing button styles */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
    min-height:44px;
    line-height:1;
    border:1px solid transparent;
}
.report-hate{ background: #c30d00; color:#fff; }
.get-involved{ background:#fff; color:#000; }
.btn:focus-visible{ outline:2px solid rgba(255,59,47,.55); outline-offset:2px; }

/* center the scroll arrow under the buttons */
.scroll-arrow{
    margin:18px auto 0;        /* <-- auto margins center it */
    width:40px; height:40px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    background:transparent; color:#fff;
    display:grid; place-items:center;
    cursor:pointer;
}
.scroll-arrow:focus-visible{ outline:2px solid rgba(255,59,47,.55); outline-offset:2px; }


/* translucent, slightly blurred card behind ONLY the text */
.text-box{
    display:inline-block;
    padding: clamp(12px, 2vw, 20px) clamp(14px, 3vw, 28px);
    border-radius: 16px;
    background: rgba(0,0,0,.50);                 /* see-thru */
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(6px);                   /* subtle glass effect */
}
@supports not (backdrop-filter: blur(6px)){
    .text-box{ background: rgba(0,0,0,.70); }     /* stronger fallback */
}

.text-box h1{
    margin: 0 0 8px;
    font-size: clamp(24px, 5vw, 48px);
    letter-spacing: .04em;
}
.text-box p{
    margin: 0;
    color: #ddd;
    font-size: clamp(14px, 2.2vw, 18px);
}

/* (from earlier) center the buttons row */
.buttons{
    display:flex; justify-content:center; align-items:center;
    gap:12px; flex-wrap:wrap; margin:12px auto 0;
}
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 18px; border-radius:999px; text-decoration:none;
    font-weight:800; text-transform:uppercase; letter-spacing:.12em;
    min-height:44px; line-height:1; border:1px solid transparent;
}
.report-hate{ background:#ff3b2f; color:#fff; }
.get-involved{ background:#fff; color:#000; }
.btn:focus-visible{ outline:2px solid rgba(255,59,47,.55); outline-offset:2px; }

/* center the scroll arrow */
.scroll-arrow{
    margin:18px auto 0; width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(255,255,255,.18); background:transparent; color:#fff;
    display:grid; place-items:center; cursor:pointer;
}
.scroll-arrow:focus-visible{ outline:2px solid rgba(255,59,47,.55); outline-offset:2px; }

/* NEWS & COMMUNITY layout */
.news-and-community{display:grid;gap:clamp(14px,2.6vw,22px);grid-template-columns:2fr 1fr;align-items:start}
@media (max-width:980px){.news-and-community{grid-template-columns:1fr}}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:10px}
.link-more{display:inline-flex;gap:6px;align-items:center;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.12em;opacity:.9}
.link-more span{display:inline-block;transform:translateY(-1px)}

.news-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.news-card{border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px)}
@supports not (backdrop-filter:blur(6px)){.news-card{background:rgba(0,0,0,.70)}}
.news-link{display:grid;grid-template-columns:1fr auto;gap:8px;padding:14px 16px;text-decoration:none;color:#fff}
.news-meta{display:flex;gap:10px;align-items:center;color:#d6d6d6;font-size:12px;letter-spacing:.08em}
.tag{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.news-title{grid-column:1/-1;margin:2px 0 2px;font-size:clamp(15px,1.6vw,18px);letter-spacing:.04em}
.news-excerpt{grid-column:1/-1;margin:0;color:#d6d6d6}
.news-arrow{align-self:center;font-size:20px;opacity:.8;transition:transform .18s ease}
.news-link:hover .news-arrow{transform:translateX(2px)}

/* Submit Your Voice */
.community{border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:16px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px)}
.community .subtle{color:#d6d6d6;margin:0 0 12px}

.voice-form{display:grid;gap:10px}
.field{display:grid;gap:6px}
.field.two-cols{grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:600px){.field.two-cols{grid-template-columns:1fr}}
.label{font-size:12px;letter-spacing:.08em;color:#fff;opacity:.9}
.muted{opacity:.7}

textarea,input[type="text"],input[type="email"]{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff}
textarea::placeholder{color:#cfcfcf}
.helper{font-size:12px;color:#cfcfcf}
.file input[type="file"]{padding:10px;background:rgba(255,255,255,.04);border-radius:10px;border:1px dashed rgba(255,255,255,.18)}

.consent{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#e9e9e9}
.consent input{margin-top:3px}

.actions{display:flex;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.12em;min-height:44px;line-height:1;border:1px solid transparent;background:#ff3b2f;color:#fff;transition:transform .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid rgba(255,59,47,.55);outline-offset:2px}
.actions .btn[disabled]{opacity:.6;filter:grayscale(.2);cursor:not-allowed}

/* RESOURCES */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:10px}
.section-head h2{margin:0;letter-spacing:.14em}
.section-sub{margin:0;color:#d6d6d6}

.res-grid{
    display:grid; gap:clamp(12px,2.4vw,18px);
    grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 980px){ .res-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .res-grid{ grid-template-columns: 1fr; } }

.res-card{
    position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
    padding:16px; border-radius:14px; text-decoration:none; color:#fff;
    background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.10); backdrop-filter: blur(6px);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
    min-height:72px;
}
@supports not (backdrop-filter: blur(6px)){ .res-card{ background: rgba(0,0,0,.70); } }
.res-card:hover{ transform: translateY(-2px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }

.res-icon{
    width:44px; height:44px; display:grid; place-items:center; border-radius:10px;
    border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04);
}
.res-icon svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2 }

.res-content h3{ margin:0 0 4px; font-size:clamp(14px,1.2vw,16px); letter-spacing:.12em; text-transform:uppercase }
.res-content p{ margin:0; color:#d6d6d6; font-size:clamp(13px,1.1vw,14px) }

.res-arrow{ opacity:.85; transition: transform .18s ease }
.res-card:hover .res-arrow{ transform: translateX(2px) }

/* FOOTER */
.site-footer{
    border-top:1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
    padding: clamp(28px,6vw,56px) 16px;
    text-align:center;
}

.footer-top h2{ margin:0 0 14px; letter-spacing:.14em }
.footer-top .buttons{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap }

.site-footer .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 18px; border-radius:999px; text-decoration:none;
    font-weight:800; text-transform:uppercase; letter-spacing:.12em;
    min-height:44px; line-height:1; border:1px solid transparent;
    background:#ff3b2f; color:#fff; transition:transform .18s ease;
}
.site-footer .btn-ghost{ background:#fff; color:#000 }
.site-footer .btn:hover{ transform:translateY(-1px) }
.site-footer .btn:focus-visible{ outline:2px solid rgba(255,59,47,.55); outline-offset:2px }

.footer-bottom{
    margin-top: clamp(16px,4vw,28px);
    display:grid; gap:12px; justify-items:center;
}
.footer-links{
    display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center;
}
.footer-links a{ color:#fff; text-decoration:none; opacity:.9 }
.footer-links a:hover{ text-decoration:underline }

.footer-social{ display:flex; gap:12px }
.footer-social a{ color:#fff; opacity:.9 }
.footer-social a:hover{ opacity:1 }

copyright, .copyright{
    margin:6px 0 0; color:#d6d6d6; font-size:12px;
}

@media (min-width: 980px){
    .site-footer{ text-align:left }
    .footer-bottom{ grid-template-columns: 1fr auto; align-items:center; }
    .footer-links{ justify-content:flex-start }
    .footer-social{ justify-self:end }
}

/* —— Center the Resources section —— */
.section-head{
    justify-content: center;     /* title + sub centered in the row */
    text-align: center;
    flex-direction: column;      /* stack title & sub neatly */
    gap: 6px;
}

.res-grid{
    justify-items: center;       /* center cards within the grid columns */
}

.res-card{
    grid-template-columns: 1fr;  /* stack icon, text, arrow vertically */
    justify-items: center;
    text-align: center;
    gap: 10px;
}
.res-card .res-arrow{ display: none; }  /* hide right arrow for a cleaner centered look */

/* —— Center the Footer —— */
.site-footer{ text-align: center; }

.footer-top .buttons{
    justify-content: center;
}

.footer-bottom{
    justify-items: center;
    grid-template-columns: 1fr;  /* single centered column on all sizes */
}

.footer-links{
    justify-content: center;
}

.footer-social{
    justify-content: center;
    justify-self: center;
}

/* If you previously had a desktop override that left-aligned the footer, neutralize it: */
@media (min-width: 980px){
    .site-footer{ text-align: center; }
    .footer-bottom{ grid-template-columns: 1fr; }
    .footer-links{ justify-content: center; }
    .footer-social{ justify-content: center; }
}

/* Center "NEWS & STORIES" title (and stack the More link under it) */
.news .section-head{
    display:flex;
    flex-direction:column;   /* stack title + action */
    align-items:center;      /* center horizontally */
    text-align:center;
    gap:6px;
}
.news .section-head .link-more{ margin-top:2px; }

/* Center "Resources" title above the grid */
.resources .section-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
    margin-bottom:12px;      /* little space before the cards */
}

/* STACK the Resources title above the links/cards */
.resources.section { display: block; }                  /* kill any inherited flex/grid row */
.resources .section-head{
    display: block;                                       /* not side-by-side */
    width: 100%;
    text-align: center;
    margin: 0 0 14px;                                     /* space before grid */
}

/* Ensure the grid starts on a new line and fills the width */
.resources .res-grid{
    display: grid;
    width: 100%;
    clear: both;                                          /* in case anything is floated */
    margin: 0;                                            /* avoid accidental inline layout */
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: clamp(12px, 2.4vw, 18px);
}

/* Responsive columns (still all UNDER the title) */
@media (max-width: 980px){
    .resources .res-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
    .resources .res-grid{ grid-template-columns: 1fr; }
}

/* Optional: small polish for Formspree status line */
.formspree-status{
    margin:8px 0 0;
    font-size:13px;
    color:#d6d6d6;
}
.formspree-status.ok{ color:#9BEF9B; }       /* greenish success */
.formspree-status.err{ color:#FFB3B3; }      /* soft red for errors */


/* ====== COMMUNITY panel visual polish ====== */
.community{
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    padding:clamp(18px,3vw,24px);
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(8px);
}
@supports not (backdrop-filter:blur(8px)){ .community{ background:rgba(0,0,0,.70); } }

.community #voice-heading{
    margin:0 0 6px;
    letter-spacing:.14em;
    text-align:center;
}
.community .subtle{
    margin:0 0 14px;
    color:#d6d6d6;
    text-align:center;
}

/* ====== Form layout & fields ====== */
.voice-form{
    display:grid;
    gap:14px;
    max-width:720px;
    margin-inline:auto;          /* centers the form inside the card */
}

.field{ display:grid; gap:8px; }

.field.two-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
@media (max-width:640px){
    .field.two-cols{ grid-template-columns:1fr; }
}

/* Labels & helpers */
.label{
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#ffffffcc;
}
.helper{
    font-size:12px;
    color:#cfcfcf;
    justify-self:end;
}

/* Inputs */
.voice-form input[type="text"],
.voice-form input[type="email"],
.voice-form textarea{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.05);
    color:#fff;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.voice-form textarea{ min-height:140px; resize:vertical; }
.voice-form ::placeholder{ color:#cfcfcf; }

/* Focus/active state */
.field:focus-within .label{ color:#fff; }
.voice-form input:focus,
.voice-form textarea:focus{
    outline:none;
    border-color:rgba(255,59,47,.55);
    box-shadow:0 0 0 3px rgba(255,59,47,.20);
    background:rgba(255,255,255,.07);
}

/* Consent row */
.consent{
    display:flex; gap:10px; align-items:flex-start;
    font-size:13px; color:#e9e9e9;
}
.consent input{ margin-top:3px; }

/* Actions / button */
.actions{ display:flex; justify-content:flex-end; }
.actions .btn{
    width:100%;
    max-width:260px;
    border:1px solid transparent;
    background:#ff3b2f;
    color:#fff;
    padding:12px 18px;
    border-radius:999px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
    min-height:44px; line-height:1;
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.actions .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,59,47,.25); }
.actions .btn:focus-visible{ outline:2px solid rgba(255,59,47,.55); outline-offset:2px; }
.actions .btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* Subtle status line */
.formspree-status{
    margin:6px 0 0;
    font-size:13px;
    color:#d6d6d6;
    text-align:right;
}
.formspree-status.ok{ color:#9BEF9B; }
.formspree-status.err{ color:#FFB3B3; }

/* Loading state (adds a spinner on the button without changing HTML) */
.actions .btn[data-loading="true"]{
    pointer-events:none; opacity:.85;
    position:relative;
}
.actions .btn[data-loading="true"]::after{
    content:"";
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
    animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:translateY(-50%) rotate(360deg); } }

/* === NAV SIZE / DENSITY — FLUID & RESPONSIVE === */

/* 1) Normalize any old fixed height headers */
.header{ height:auto; min-height: var(--nav-h); padding:0 14px; }
.site-header{ min-height: var(--nav-h); }

/* 2) Desktop defaults (comfortable) */
:root{
    --nav-h: 68px;                    /* overall bar height */
    --fs-brand: clamp(16px,1.2vw,20px);
    --fs-link: clamp(12px,0.9vw,14px);
    --ls: .12em;
}

/* Keep link/toggle/tap targets accessible */
.nav-link{ padding: 12px 0; }       /* ≥44px row height with line-height */
.nav-toggle{ min-width:44px; min-height:44px; }

/* 3) Tablet (<= 980px): slightly tighter */
@media (max-width: 980px){
    :root{
        --nav-h: 60px;
        --fs-brand: 18px;
        --fs-link: 13px;
        --ls: .11em;
    }
    .nav{ padding: 0 12px; gap: 10px; }
    .brand{ gap: 6px; }
    .panel-link{ padding:12px 10px; }      /* bigger tap area in the slide-down */
}

/* 4) Large phones (<= 600px): compact */
@media (max-width: 600px){
    :root{
        --nav-h: 54px;
        --fs-brand: 16px;
        --fs-link: 12px;
        --ls: .10em;
    }
    .nav{ padding: 0 10px; }
    .brand{ padding: 2px 6px; }
    .nav-toggle{ width: 40px; height: 40px; }  /* stays ≥44px including border/padding */
    .panel-link{ font-size: 13px; }
}

/* 5) Small phones (<= 380px): extra compact but still usable */
@media (max-width: 380px){
    :root{
        --nav-h: 48px;
        --fs-brand: 14px;
        --fs-link: 11px;
        --ls: .08em;
    }
    .nav{ padding: 0 8px; }
    .brand{ gap: 4px; padding: 2px 4px; }
    .nav-toggle{ width: 36px; height: 36px; }
    .panel-link{ font-size: 12px; padding: 12px; }
}

/* 6) Make the slide indicator thicker on high-contrast/compact screens */
@media (max-width: 600px){
    .nav-indicator{ height: 3px; bottom: 0; }
}

/* 7) Ensure the logo scales gracefully without distorting your mark */
.brand img, .header__logo img{
    max-height: calc(var(--nav-h) - 18px);   /* keeps logo inside the bar */
    width: auto;                              /* preserve aspect ratio */
}



/* Header container */
.header{
    position: sticky; top: 0; inset-inline: 0;
    z-index: 1000;
    backdrop-filter: saturate(140%) blur(8px);
    background: rgba(10,10,10,.55);
    transition: transform .24s ease, background-color .24s ease;
    will-change: transform;
}
.header.is-scrolled{ background: rgba(10,10,10,.72); }
.header.hide{ transform: translateY(-100%); }

/* Nav layout (adjust to your existing styles) */
.nav { display:flex; align-items:center; gap:16px; }
.nav-links{
    position: relative; display:flex; gap: clamp(12px, 2vw, 24px);
    padding-block: 10px;
}

/* Animated underline “pill” */
.nav-indicator{
    --ind-left: 0px;
    --ind-width: 0px;
    --ind-opacity: 0;
    position: absolute; left: 0; bottom: 0;
    height: 2px; width: var(--ind-width);
    transform: translateX(var(--ind-left));
    background: currentColor;
    opacity: var(--ind-opacity);
    transition:
            transform .25s ease,
            width .25s ease,
            opacity .15s ease;
    pointer-events: none;
}

/* Make links predictable for measurement */
.nav-link{
    position: relative;
    display: inline-block;
    padding: 6px 0;
    line-height: 1.2;
    white-space: nowrap;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .header{ transition: none; }
    .nav-indicator{ transition: none; }
}