/* =========================================================
   Društvo Filipinskih Delavcev — Design tokens
   Palette drawn from the Philippine flag, cooled into a
   modern civic-organisation system: deep navy as the anchor,
   flag red used sparingly, sun-gold as the single warm accent.
========================================================= */
:root{
  --navy-deep:   #081D33;
  --navy:        #0B2A4A;
  --navy-soft:   #163A5F;
  --red:         #C8102E;
  --gold:        #FCD116;
  --gold-deep:   #E3B800;
  --bg:          #F6F7F6;
  --bg-tint:     #EFF1EE;
  --card:        #FFFFFF;
  --ink:         #12202E;
  --slate:       #4A5A68;
  --slate-soft:  #7C8A95;
  --line:        #E1E4E0;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(11,42,74,0.08), 0 1px 2px rgba(11,42,74,0.06);
  --shadow-md: 0 12px 28px -8px rgba(11,42,74,0.18);
  --container: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--navy-deep);
  margin:0 0 .5em;
  line-height:1.15;
  font-weight:600;
}

p{ margin:0 0 1em; color:var(--slate); }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--gold); color:var(--navy-deep); padding:10px 16px;
  z-index:200; font-weight:600; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--gold-deep);
  outline-offset:2px;
}

/* ---------- Eyebrow / labels (mono, official-document feel) ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 14px;
}
.eyebrow-light{ color:var(--gold); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-gold{ background:var(--gold); color:var(--navy-deep); }
.btn-gold:hover{ background:var(--gold-deep); box-shadow:var(--shadow-sm); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-deep); box-shadow:var(--shadow-sm); }
.btn-outline-light{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.btn-outline-navy{ border-color:var(--navy); color:var(--navy); }
.btn-outline-navy:hover{ background:var(--navy); color:#fff; }
.btn-block{ width:100%; margin-bottom:12px; }

/* =========================================================
   HEADER
========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,247,246,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:12px;
  padding-bottom:12px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ border-radius:50%; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong{ font-family:var(--font-display); font-size:16px; color:var(--navy-deep); font-weight:600; }
.brand-text em{ font-style:normal; font-size:12px; color:var(--slate-soft); }

.primary-nav{ display:flex; align-items:center; gap:28px; }
.primary-nav a{
  font-size:14.5px; font-weight:500; color:var(--navy);
  padding:6px 0; position:relative;
}
.primary-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.primary-nav a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav-cta{
  background:var(--navy); color:#fff !important; padding:9px 18px !important;
  border-radius:999px; font-weight:600;
}
.nav-cta:hover{ background:var(--navy-deep); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; cursor:pointer;
}
.nav-toggle span{ height:2px; width:100%; background:var(--navy-deep); border-radius:2px; }

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  background:var(--navy-deep);
  color:#fff;
  overflow:hidden;
  padding:96px 0 84px;
}
.hero-rays{
  position:absolute;
  top:50%; right:-10%;
  width:900px; height:900px;
  transform:translateY(-50%);
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(252,209,22,0.10) 3deg, transparent 7deg,
      transparent 20deg, rgba(252,209,22,0.10) 23deg, transparent 27deg,
      transparent 40deg, rgba(252,209,22,0.10) 43deg, transparent 47deg,
      transparent 60deg, rgba(252,209,22,0.10) 63deg, transparent 67deg,
      transparent 80deg, rgba(252,209,22,0.10) 83deg, transparent 87deg,
      transparent 100deg, rgba(252,209,22,0.10) 103deg, transparent 107deg,
      transparent 120deg, rgba(252,209,22,0.10) 123deg, transparent 127deg,
      transparent 140deg, rgba(252,209,22,0.10) 143deg, transparent 147deg,
      transparent 160deg, rgba(252,209,22,0.10) 163deg, transparent 167deg,
      transparent 180deg, rgba(200,16,46,0.10) 183deg, transparent 187deg,
      transparent 200deg, rgba(200,16,46,0.10) 203deg, transparent 207deg,
      transparent 220deg, rgba(200,16,46,0.10) 223deg, transparent 227deg,
      transparent 240deg, rgba(200,16,46,0.10) 243deg, transparent 247deg,
      transparent 260deg, rgba(200,16,46,0.10) 263deg, transparent 267deg,
      transparent 280deg, rgba(200,16,46,0.10) 283deg, transparent 287deg,
      transparent 300deg, rgba(200,16,46,0.10) 303deg, transparent 307deg,
      transparent 320deg, rgba(200,16,46,0.10) 323deg, transparent 327deg,
      transparent 340deg, rgba(200,16,46,0.10) 343deg, transparent 347deg,
      transparent 360deg);
  border-radius:50%;
  animation:rotate-slow 90s linear infinite;
  pointer-events:none;
}
@keyframes rotate-slow{ to{ transform:translateY(-50%) rotate(360deg); } }

.hero-inner{ position:relative; z-index:2; max-width:760px; }
.hero-title{
  font-size:clamp(32px, 5vw, 52px);
  color:#fff;
  font-weight:600;
  letter-spacing:-0.01em;
}
.ink-mark{ color:var(--gold); font-style:italic; }
.hero-sub{
  font-size:17px;
  color:rgba(255,255,255,0.78);
  max-width:600px;
  margin-bottom:32px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* Flag-split divider: recurring signature motif */
.flag-divider{
  height:5px;
  width:100%;
  background:linear-gradient(90deg, var(--navy) 0%, var(--navy) 49.3%, var(--red) 50.7%, var(--red) 100%);
}

/* =========================================================
   SECTIONS (shared)
========================================================= */
.section{ padding:88px 0; }
.section-tint{ background:var(--bg-tint); }
.section-title{ font-size:clamp(26px,3.4vw,36px); }
.section-title-sm{ font-size:22px; }
.section-lead{ max-width:620px; font-size:16.5px; margin-bottom:44px; }

.section-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:64px;
  align-items:center;
}
.section-copy h2{ font-size:clamp(26px,3.2vw,34px); }
.section-copy p{ font-size:16px; }

/* About visual */
.section-visual{ display:flex; justify-content:center; }

/* ---------- About photo ---------- */
.about-photo{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  position:relative;
  border:6px solid var(--card);
  outline:1px solid var(--line);
}
.about-photo img{ width:100%; height:auto; display:block; }
.about-photo figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(8,29,51,0.82), transparent);
  color:#fff;
  font-size:13px;
  font-family:var(--font-mono);
  letter-spacing:.03em;
  padding:28px 18px 14px;
}

/* ---------- Hero leaflet link ---------- */
.hero-leaflet-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,0.72);
  border-bottom:1px solid rgba(255,255,255,0.3);
  padding-bottom:2px;
  transition:color .15s ease, border-color .15s ease;
}
.hero-leaflet-link:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- Donate ---------- */
.donate-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px;
  box-shadow:var(--shadow-sm);
}
.donate-card h3{ font-size:19px; margin-bottom:22px; }
.donate-field{ margin-bottom:18px; }
.donate-field:last-of-type{ margin-bottom:0; }
.donate-value{
  margin:0;
  font-size:16.5px;
  font-weight:600;
  color:var(--ink);
}
.donate-iban{
  font-family:var(--font-mono);
  letter-spacing:.02em;
  font-size:16px;
}
.donate-iban-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  background:var(--bg-tint);
  border-radius:var(--radius-sm);
  padding:12px 16px;
}
.copy-btn{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:var(--navy);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:8px 16px;
  cursor:pointer;
  flex-shrink:0;
  transition:background-color .15s ease;
}
.copy-btn:hover{ background:var(--navy-deep); }
.copy-btn.is-copied{ background:var(--red); }
.donate-note{
  margin-top:24px;
  margin-bottom:0;
  font-size:14px;
  color:var(--slate-soft);
  font-style:italic;
}

/* ---------- Objectives grid ---------- */
.objectives-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.objective-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:26px 22px;
  border:1px solid var(--line);
  transition:box-shadow .2s ease, transform .2s ease;
}
.objective-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.obj-star{ color:var(--gold-deep); font-size:20px; display:block; margin-bottom:12px; }
.objective-card h3{ font-size:16.5px; margin-bottom:8px; }
.objective-card p{ font-size:14.5px; margin:0; }

/* ---------- Membership ---------- */
.membership-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:36px;
}
.membership-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px;
}
.membership-card-accent{
  background:var(--navy-deep);
  border-color:var(--navy-deep);
}
.membership-card-accent h3{ color:#fff; }
.membership-card-accent .check-list li{ color:rgba(255,255,255,0.82); }
.membership-card-accent .check-list li::before{ color:var(--gold); }
.membership-card h3{ font-size:19px; margin-bottom:18px; }

.check-list li{
  position:relative;
  padding-left:28px;
  margin-bottom:12px;
  color:var(--slate);
  font-size:15px;
}
.check-list li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--red);
  font-weight:700;
}
.membership-cta{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--bg-tint);
  border-radius:var(--radius);
  padding:24px 30px;
}
.membership-cta p{ margin:0; font-weight:500; color:var(--navy); }

/* ---------- Support pills ---------- */
.pill-grid{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; }
.pill{
  background:var(--card);
  border:1.5px solid var(--navy);
  color:var(--navy);
  padding:10px 18px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:500;
}
.notice-box{
  border-left:4px solid var(--gold-deep);
  background:var(--card);
  padding:20px 24px;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  max-width:720px;
}
.notice-box p{ margin:0; font-size:15px; color:var(--ink); }

/* ---------- Tabs ---------- */
.tabs{ max-width:760px; }
.tab-list{
  display:flex; gap:6px; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  margin-bottom:28px;
}
.tab-btn{
  font-family:var(--font-body);
  background:none; border:none; cursor:pointer;
  padding:12px 18px;
  font-size:15px; font-weight:600;
  color:var(--slate-soft);
  border-bottom:3px solid transparent;
  margin-bottom:-1px;
  transition:color .15s ease, border-color .15s ease;
}
.tab-btn:hover{ color:var(--navy); }
.tab-btn.is-active{ color:var(--navy-deep); border-bottom-color:var(--red); }

.topic-list li{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:15.5px;
  color:var(--ink);
  padding-left:24px;
  position:relative;
}
.topic-list li::before{
  content:"";
  position:absolute; left:0; top:22px;
  width:8px; height:8px; border-radius:50%;
  background:var(--gold-deep);
}
.topic-list li:last-child{ border-bottom:none; }

/* ---------- News empty state ---------- */
.news-empty{
  background:var(--card);
  border:1px dashed var(--slate-soft);
  border-radius:var(--radius);
  padding:56px 40px;
  text-align:center;
  max-width:560px;
  margin:0 auto;
}
.news-empty-mark{ font-size:34px; color:var(--gold-deep); margin-bottom:14px; }
.news-empty h3{ font-size:20px; margin-bottom:10px; }
.news-empty p{ margin-bottom:24px; }

/* ---------- Contact ---------- */
.section-grid-contact{ align-items:start; }
.contact-list{ margin:28px 0; }
.contact-list li{ display:flex; flex-direction:column; margin-bottom:18px; }
.contact-label{
  font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--slate-soft); margin-bottom:4px;
}
.contact-list a{ font-size:18px; font-weight:600; color:var(--navy-deep); }
.contact-list a:hover{ color:var(--red); }

.social-row{ display:flex; gap:10px; margin-bottom:10px; }
.social-icon{
  width:40px; height:40px; border-radius:50%;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease;
}
.social-icon:hover{ background:var(--red); }
.social-note{ font-size:13px; color:var(--slate-soft); margin:0; }

.contact-card{
  background:var(--navy-deep);
  color:#fff;
  border-radius:var(--radius);
  padding:36px;
}
.contact-card h3{ color:#fff; font-size:19px; }
.contact-card p{ color:rgba(255,255,255,0.72); font-size:14.5px; }

/* ---------- Partners / links ---------- */
.plain-list li{
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
  color:var(--ink);
}
.plain-list li:last-child{ border-bottom:none; }
.link-list li{ margin-bottom:12px; }
.link-list a{
  font-size:15px; color:var(--navy);
  font-weight:500;
  border-bottom:1px solid var(--navy);
  padding-bottom:1px;
}
.link-list a:hover{ color:var(--red); border-color:var(--red); }
.links-note{ font-size:13px; color:var(--slate-soft); margin-top:18px; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ background:var(--navy-deep); color:rgba(255,255,255,0.75); padding-top:56px; }
.footer-row{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-brand img{ border-radius:50%; }
.footer-brand div{ display:flex; flex-direction:column; }
.footer-brand strong{ color:#fff; font-family:var(--font-display); font-size:15px; }
.footer-brand span{ font-size:12.5px; color:rgba(255,255,255,0.55); }
.footer-nav{ display:flex; flex-direction:column; gap:10px; }
.footer-nav a{ font-size:14px; }
.footer-nav a:hover{ color:var(--gold); }
.footer-contact{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.footer-contact a{ font-size:14px; }
.footer-contact a:hover{ color:var(--gold); }
.footer-bottom{ padding:22px 24px; font-size:12.5px; text-align:center; color:rgba(255,255,255,0.45); }

/* =========================================================
   Scroll reveal
========================================================= */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 900px){
  .objectives-grid{ grid-template-columns:repeat(2,1fr); }
  .section-grid{ grid-template-columns:1fr; }
  .section-visual{ order:-1; margin-bottom:8px; }
  .membership-grid{ grid-template-columns:1fr; }
  .footer-row{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  .nav-toggle{ display:flex; }
  .primary-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg);
    flex-direction:column; align-items:flex-start;
    padding:20px 24px 26px;
    gap:16px;
    border-bottom:1px solid var(--line);
    display:none;
  }
  .primary-nav.is-open{ display:flex; }
  .nav-cta{ align-self:flex-start; }
  .hero{ padding:64px 0 56px; }
  .hero-rays{ width:600px; height:600px; }
  .section{ padding:64px 0; }
  .objectives-grid{ grid-template-columns:1fr; }
}