/*
Theme Name: IDASC
Theme URI: https://idasc.org.br
Author: IDASC - Instituto de Defesa da Advocacia e da Sociedade Capixaba
Author URI: https://idasc.org.br
Description: Tema institucional para o Instituto de Defesa da Advocacia e da Sociedade Capixaba (IDASC). Desenhado para apresentar a diretoria, a missão do instituto e o calendário de congressos e eventos, com áreas totalmente editáveis pelo painel do WordPress.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: idasc
Tags: custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, one-column, footer-widgets
*/

/* =========================================================
   0. RESET & BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; }

:root{
  --navy-950:#0d1730;
  --navy-900:#122142;
  --navy-800:#182c56;
  --navy-700:#22396e;
  --navy-100:#e8ecf5;
  --red-700:#9c2436;
  --red-600:#b3283d;
  --red-500:#c53350;
  --gold-600:#b3893a;
  --gold-500:#c9a24b;
  --gold-100:#f3e6c8;
  --cream-050:#faf7f1;
  --cream-100:#f4ede1;
  --ink-900:#1a1c22;
  --ink-700:#3b3f4a;
  --gray-500:#6b7280;
  --gray-300:#d9d6cd;
  --white:#ffffff;

  --font-serif: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1180px;
  --radius: 14px;
  --shadow-sm: 0 2px 10px rgba(13,23,48,0.06);
  --shadow-md: 0 12px 32px rgba(13,23,48,0.10);
  --shadow-lg: 0 24px 60px rgba(13,23,48,0.16);
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--white);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--navy-800); text-decoration:none; transition: color .2s ease; }
a:hover{ color: var(--red-600); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ font-family: var(--font-serif); color: var(--navy-950); line-height:1.2; margin:0 0 .5em; font-weight:600; }
p{ margin:0 0 1.2em; color: var(--ink-700); }
.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
.screen-reader-text{ position:absolute!important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
:focus-visible{ outline:3px solid var(--gold-500); outline-offset:2px; }

.section{ padding: 96px 0; }
.section--tight{ padding: 64px 0; }
.section--cream{ background: var(--cream-050); }
.section--navy{ background: linear-gradient(160deg, var(--navy-950), var(--navy-800)); color:var(--white); }
.section--navy h2, .section--navy h3, .section--navy p{ color:var(--white); }
.section--navy .eyebrow{ color: var(--gold-500); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-sans); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--red-600);
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background: var(--gold-500); display:inline-block; }

.section-head{ max-width: 720px; margin: 0 0 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.7rem, 2.6vw, 2.5rem); }
.section-head p{ font-size:1.08rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-sans); font-weight:600; font-size:.95rem;
  padding: 14px 28px; border-radius: 999px; border:2px solid transparent;
  cursor:pointer; transition: all .2s ease; white-space:nowrap;
}
.btn--gold{ background: var(--gold-500); color: var(--navy-950); }
.btn--gold:hover{ background: var(--gold-600); color: var(--navy-950); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline{ border-color: rgba(255,255,255,.5); color: var(--white); }
.btn--outline:hover{ border-color: var(--white); color: var(--white); background: rgba(255,255,255,.08); transform: translateY(-2px); }
.btn--navy{ background: var(--navy-900); color: var(--white); }
.btn--navy:hover{ background: var(--navy-800); color:var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline-navy{ border-color: var(--navy-900); color: var(--navy-900); background:transparent; }
.btn--outline-navy:hover{ background: var(--navy-950); color: var(--white); border-color: var(--navy-950); }
.btn--sm{ padding: 10px 20px; font-size:.85rem; }

/* =========================================================
   1. HEADER
========================================================= */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--gray-300);
  /* own compositing layer — without it, iOS Safari can flash a stale
     frame of the content scrolling underneath through the translucent
     background during momentum scroll on a sticky header. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height: 88px; gap:16px; }

.site-branding{ display:flex; align-items:center; gap:14px; min-width:0; flex:0 0 auto; }
.site-branding img{ height:56px; width:auto; }
.btn-text-short{ display:none; }

.main-navigation{ display:flex; align-items:center; gap:4px; min-width:0; }
.main-navigation ul{ display:flex; align-items:center; gap:0; flex-wrap:nowrap; }
.main-navigation a{
  display:block; padding: 9px 11px; font-weight:600; font-size:.85rem; color: var(--navy-900);
  border-radius: 999px; white-space:nowrap;
}
.main-navigation a:hover, .main-navigation .current-menu-item > a{ background: var(--navy-950); color: var(--white); }

.header-cta{ display:flex; align-items:center; gap:14px; }
.account-btn{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--gray-300);
  color: var(--navy-900); transition: all .2s ease;
}
.account-btn:hover{ background: var(--navy-950); border-color: var(--navy-950); color: var(--white); }
.main-navigation a.nav-drawer-account{ margin-top:22px; width:100%; }
.menu-toggle{ display:none; background:none; border:2px solid var(--navy-950); border-radius:10px; width:46px; height:42px; cursor:pointer; align-items:center; justify-content:center; position:relative; flex:0 0 auto; }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after{ content:""; display:block; width:20px; height:2px; background: var(--navy-950); position:absolute; transition: transform .22s ease, opacity .22s ease; }
.menu-toggle::before{ transform: translateY(-6px); }
.menu-toggle::after{ transform: translateY(6px); }
.menu-toggle.is-open span{ opacity:0; }
.menu-toggle.is-open::before{ transform: translateY(0) rotate(45deg); }
.menu-toggle.is-open::after{ transform: translateY(0) rotate(-45deg); }

.main-navigation .nav-drawer-head, .main-navigation a.nav-drawer-cta, .main-navigation a.nav-drawer-account{ display:none; }
.nav-backdrop{ display:none; }

/* Eight nav items plus logo and CTA need real room — collapse to the
   drawer well before they'd ever wrap or crowd, on common laptop widths
   too, not just phones/tablets. */
@media (max-width: 1220px){
  /* backdrop-filter on an ancestor creates a new containing block for
     position:fixed children (same as `filter`) — without this, the mobile
     drawer below gets trapped inside the header's own box instead of
     covering the viewport. */
  /* no blur to soften it here, so make the background solid instead of
     translucent — otherwise scrolled content can show faintly through it. */
  .site-header{ backdrop-filter:none; background: var(--white); }
  .site-header .container{ height:76px; }
  .site-branding img{ height:42px; }
  .menu-toggle{ display:flex; }
  .account-btn{ display:none; }
  .header-cta .btn span.btn-text-long{ display:none; }
  .header-cta .btn span.btn-text-short{ display:inline; }

  .nav-backdrop{
    display:block; position:fixed; inset:0; z-index:598; background: rgba(13,23,48,.55);
    opacity:0; visibility:hidden; transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .nav-backdrop.is-open{ opacity:1; visibility:visible; transition: opacity .25s ease; }

  .main-navigation{
    position:fixed; top:0; right:0; bottom:0; z-index:599;
    width: 82%; max-width: 360px;
    background: var(--white); display:flex; flex-direction:column; align-items:stretch;
    padding: 22px 22px 28px; overflow-y:auto;
    transform: translateX(100%); transition: transform .28s ease;
    box-shadow: -18px 0 50px rgba(13,23,48,.25);
  }
  .main-navigation.is-open{ transform: translateX(0); }

  .main-navigation .nav-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--cream-100); }
  .nav-drawer-head img{ height:38px; width:auto; }
  .nav-close{ background: var(--cream-050); border:none; width:38px; height:38px; border-radius:50%; font-size:1.4rem; line-height:1; color: var(--navy-900); cursor:pointer; display:flex; align-items:center; justify-content:center; }

  .main-navigation ul{ flex-direction:column; gap:2px; width:100%; }
  .main-navigation a{ display:flex; align-items:center; padding:15px 14px; font-size:1.02rem; border-radius:12px; }
  .main-navigation a:hover, .main-navigation .current-menu-item > a{ background: var(--cream-050); color: var(--navy-950); }

  .main-navigation a.nav-drawer-account{ display:flex; }
  .main-navigation a.nav-drawer-cta{ display:flex; margin-top:10px; width:100%; }

  body.nav-is-open{ overflow:hidden; }
}

/* =========================================================
   2. HERO
========================================================= */
.hero{
  position:relative; overflow:hidden;
  background-image:
    linear-gradient(110deg, rgba(13,23,48,.95) 0%, rgba(13,23,48,.86) 18%, rgba(13,23,48,.64) 36%, rgba(13,23,48,.4) 54%, rgba(13,23,48,.2) 72%, rgba(13,23,48,.08) 100%),
    linear-gradient(to top, rgba(13,23,48,.9) 0%, rgba(13,23,48,.35) 22%, rgba(13,23,48,0) 46%),
    linear-gradient(rgba(13,23,48,.3), rgba(13,23,48,.3)),
    url('assets/images/hero-convento-penha.jpg');
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center 42%;
  background-repeat: no-repeat;
  background-blend-mode: normal, normal, multiply, normal;
  color: var(--white); padding: 100px 0 120px;
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.06; pointer-events:none; z-index:0;
  background-image: radial-gradient(circle, var(--gold-500) 1px, transparent 1px);
  background-size: 26px 26px;
}
.hero .container{ position:relative; display:grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items:center; }
.hero h1{ color:var(--white); font-size: clamp(2.4rem, 4.2vw, 3.6rem); margin-bottom:.4em; }
.hero h1 em{ font-style:normal; color: var(--gold-500); }
.hero p.lead{ color: rgba(255,255,255,.82); font-size:1.15rem; max-width:560px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; }
.hero-badge{ display:inline-flex; align-items:center; gap:10px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:8px 16px 8px 8px; border-radius:999px; font-size:.82rem; font-weight:600; margin-bottom:26px; }
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background: var(--gold-500); }

.hero-art{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-art .art-card{
  background: rgba(13,23,48,.55); border:1px solid rgba(255,255,255,.18); border-radius: 20px;
  padding: 32px; backdrop-filter: blur(10px); width:100%; max-width:360px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.hero-art .art-card img{ filter: brightness(0) invert(1); opacity:.97; margin: 0 auto 22px; width:100%; max-width:230px; height:auto; }
.hero-art .art-card .stat-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; border-top:1px solid rgba(255,255,255,.16); padding-top:22px; }
.hero-art .art-card .stat b{ display:block; font-family:var(--font-serif); font-size:1.7rem; color: var(--gold-500); }
.hero-art .art-card .stat span{ display:block; font-size:.76rem; color: rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }

@media (max-width: 900px){
  .hero .container{ grid-template-columns:1fr; text-align:center; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-art{ margin-top:16px; }
}

/* Entrance animation — headline elements rise into place on page load. */
@keyframes idasc-rise{
  from{ opacity:0; transform: translateY(22px); }
  to{ opacity:1; transform: translateY(0); }
}
.hero-badge, .hero h1, .hero p.lead, .hero-actions, .hero-art{
  animation: idasc-rise .7s cubic-bezier(.22,.68,.32,1) both;
}
.hero-badge{ animation-delay: .05s; }
.hero h1{ animation-delay: .15s; }
.hero p.lead{ animation-delay: .28s; }
.hero-actions{ animation-delay: .4s; }
.hero-art{ animation-delay: .3s; }
@media (prefers-reduced-motion: reduce){
  .hero-badge, .hero h1, .hero p.lead, .hero-actions, .hero-art{ animation:none; }
}

/* =========================================================
   3. STATS STRIP
========================================================= */
.stats-strip{ background: var(--navy-900); }
.stats-strip .container{ display:grid; grid-template-columns: repeat(4,1fr); }
.stats-strip .stat{ padding: 30px 20px; text-align:center; border-left:1px solid rgba(255,255,255,.12); }
.stats-strip .stat:first-child{ border-left:none; }
.stats-strip .stat b{ display:block; font-family: var(--font-serif); font-size:2rem; color: var(--gold-500); overflow-wrap:break-word; }
.stats-strip .stat span{ display:block; font-size:.8rem; color: rgba(255,255,255,.75); margin-top:4px; }
@media (max-width: 720px){
  .stats-strip .container{ grid-template-columns: repeat(2,1fr); }
  .stats-strip .stat{ padding: 22px 12px; border-left:none; border-top:1px solid rgba(255,255,255,.12); }
  .stats-strip .stat:nth-child(1),.stats-strip .stat:nth-child(2){ border-top:none; }
  /* several stats here are text (dates, place names), not short numbers —
     at 2rem some of those don't fit half a mobile column and overflow. */
  .stats-strip .stat b{ font-size:1.15rem; }
  .stats-strip .stat span{ font-size:.7rem; }
}

/* =========================================================
   4. ABOUT / MISSION
========================================================= */
.about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:64px; align-items:start; }
.about-grid .quote-card{
  background: var(--cream-050); border-left:4px solid var(--gold-500); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 32px 30px; box-shadow: var(--shadow-sm);
}
.about-grid .quote-card p{ font-family: var(--font-serif); font-size:1.25rem; font-style:italic; color: var(--navy-950); margin-bottom:16px; }
.about-grid .quote-card .who{ font-weight:700; font-size:.9rem; color: var(--ink-700); font-style:normal; }
.about-grid .who span{ display:block; font-weight:400; color: var(--gray-500); font-size:.82rem; }

.objectives{ margin-top: 20px; display:grid; gap:14px; }
.objectives li{ display:flex; gap:14px; align-items:flex-start; }
.objectives .ico{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background: var(--navy-950); color:var(--gold-500); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.objectives div p{ margin:0; color: var(--ink-700); }

/* .about-grid had no mobile collapse — the quote card and the objectives
   list (or, on the member area page, the profile and contribute forms)
   were forced into two cramped columns on phones, squeezing the text
   column until words overflowed it. */
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; gap:32px; }
}

/* =========================================================
   5. PILLARS / WHAT WE DO
========================================================= */
.pillars-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.pillar-card{
  background: var(--white); border:1px solid var(--gray-300); border-radius: var(--radius);
  padding: 30px 26px; transition: all .25s ease; height:100%;
}
.pillar-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.pillar-card .ico{ width:50px; height:50px; border-radius:14px; background: var(--navy-100); color: var(--navy-900); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:18px; }
.pillar-card h3{ font-size:1.15rem; margin-bottom:8px; }
.pillar-card p{ font-size:.94rem; margin-bottom:0; }
@media (max-width: 900px){ .pillars-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .pillars-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   6. EVENTS / CONGRESSOS
========================================================= */
.events-list{ display:grid; gap:22px; }
.event-card{
  display:grid; grid-template-columns: 150px 1fr auto; gap:28px; align-items:center;
  background: var(--white); border:1px solid var(--gray-300); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow-sm);
}
.event-card.is-featured{ border-color: var(--gold-500); box-shadow: var(--shadow-md); position:relative; }
.event-card.is-featured::before{
  content:"Próximo evento"; position:absolute; top:-12px; left:28px; background: var(--gold-500); color: var(--navy-950);
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:5px 12px; border-radius:999px;
}
.event-date-block{ text-align:center; background: var(--navy-950); color:var(--white); border-radius:12px; padding:14px 8px; }
.event-date-block .day{ font-family: var(--font-serif); font-size:2.1rem; line-height:1; color: var(--gold-500); }
.event-date-block .month{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }
.event-date-block .year{ font-size:.68rem; opacity:.7; }
.event-info h3{ font-size:1.25rem; margin-bottom:8px; }
.event-info .meta{ display:flex; flex-wrap:wrap; gap:16px; font-size:.86rem; color: var(--gray-500); margin-bottom:10px; }
.event-info .meta span{ display:inline-flex; align-items:center; gap:6px; }
.event-info p{ margin-bottom:0; font-size:.95rem; }
.event-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.event-tags span{ background: var(--cream-100); color: var(--navy-800); font-size:.74rem; font-weight:600; padding:4px 10px; border-radius:999px; }
.event-cta{ text-align:right; }
@media (max-width: 800px){
  .event-card{ grid-template-columns: 90px 1fr; }
  .event-cta{ grid-column: 1 / -1; text-align:left; margin-top:6px; }
}

/* =========================================================
   7. BOARD / DIRETORIA
========================================================= */
.board-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.board-mini{ text-align:center; }

/* Compact leadership strip — homepage teaser only, links through to the full Diretoria page */
.leader-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:36px 28px; }
.leader-chip{ display:flex; flex-direction:column; align-items:center; width:118px; text-align:center; }
.leader-chip .avatar{
  width:72px; height:72px; border-radius:50%; overflow:hidden; margin-bottom:12px;
  background: linear-gradient(155deg, var(--navy-950), var(--navy-700)); color: var(--gold-500);
  display:flex; align-items:center; justify-content:center;
  border: 3px solid var(--white); box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.leader-chip .avatar img{ width:100%; height:100%; object-fit:cover; }
.leader-chip:hover .avatar{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.leader-chip.is-lead .avatar{ width:84px; height:84px; background: linear-gradient(155deg, var(--navy-950), var(--red-600) 150%); }
.leader-chip h4{ font-family: var(--font-sans); font-size:.86rem; font-weight:700; color: var(--navy-950); margin-bottom:2px; line-height:1.25; }
.leader-chip span{ font-size:.74rem; color: var(--gray-500); }
.board-mini .photo{ width:100%; aspect-ratio:1/1; border-radius:50%; background: var(--navy-100); color: var(--navy-900); display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:1.6rem; font-weight:700; overflow:hidden; margin-bottom:14px; border: 3px solid var(--white); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.board-mini .photo img{ width:100%; height:100%; object-fit:cover; }
.board-mini:hover .photo{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.board-mini h4{ font-size:1rem; margin-bottom:2px; }
.board-mini span{ font-size:.8rem; color: var(--gray-500); }

/* Tiered avatar treatment: hierarchy reads visually, without labels on each card */
.board-mini.tier-diretoria .photo{ background: linear-gradient(155deg, var(--navy-950), var(--red-600) 150%); color: var(--gold-500); font-size:1.8rem; box-shadow: var(--shadow-md); }
.board-mini.tier-diretoria{ max-width:220px; margin-inline:auto; }
.board-mini.tier-conselho .photo{ background: linear-gradient(155deg, var(--navy-950), var(--navy-700)); color: var(--gold-500); }
.board-mini.tier-suplente .photo{ background: var(--cream-100); color: var(--navy-800); border-color: var(--gray-300); box-shadow:none; }
.board-grid.tier-diretoria-grid{ grid-template-columns: repeat(3,1fr); max-width: 680px; margin: 0 auto; }
@media (max-width: 700px){ .board-grid.tier-diretoria-grid{ grid-template-columns: repeat(2,1fr); max-width:420px; } }
.board-group-title{ font-family:var(--font-sans); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color: var(--red-600); margin: 44px 0 22px; padding-top:30px; border-top:1px solid var(--gray-300); }
.board-group-title:first-of-type{ border-top:none; padding-top:0; margin-top:0; }

@media (max-width: 900px){ .board-grid{ grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   8. CTA BAND
========================================================= */
.cta-band{ background: linear-gradient(120deg, var(--event-accent, var(--red-700)), var(--event-accent-dark, var(--red-600))); color:var(--white); border-radius: 24px; padding: 56px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-band h2{ color:var(--white); margin-bottom:8px; font-size:1.8rem; }
.cta-band p{ color: rgba(255,255,255,.88); margin-bottom:0; }
.cta-band .btn--gold{ flex-shrink:0; }
@supports (color: color-mix(in srgb, red, blue)){
  .cta-band[style*="--event-accent"]{ --event-accent-dark: color-mix(in srgb, var(--event-accent) 65%, black); }
}

/* =========================================================
   EVENT LANDING PAGE — optional richer template, toggled per
   event from the Painel, for things like the annual street race
   that deserve their own shareable page rather than a list entry.
========================================================= */
.event-landing-hero{
  position:relative; overflow:hidden; background-color: var(--navy-950);
  background-size:cover; background-position:center; padding: 120px 0 90px; color:var(--white); text-align:center;
}
.event-landing-hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,23,48,.55) 0%, rgba(13,23,48,.82) 65%, rgba(13,23,48,.94) 100%);
}
.event-landing-hero .container{ position:relative; max-width:720px; }
.event-landing-hero h1{ color:var(--white); font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 14px 0 16px; }
.event-landing-hero .lead{ color: rgba(255,255,255,.85); font-size:1.15rem; max-width:560px; margin:0 auto 22px; }
.event-landing-badge{
  display:inline-flex; align-items:center; gap:8px; background: var(--event-accent, var(--gold-500)); color: var(--navy-950);
  font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; padding:8px 18px; border-radius:999px;
}
.event-landing-meta{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; color: rgba(255,255,255,.85); font-size:.95rem; }
.supporters-showcase{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; align-items:center; }
.supporter-logo{
  display:flex; align-items:center; justify-content:center; background:var(--white); border:1px solid var(--gray-300);
  border-radius:14px; padding:16px 22px; height:88px; min-width:140px; filter:grayscale(1); opacity:.75;
  transition: all .2s ease; font-weight:700; color:var(--navy-900); text-align:center;
}
.supporter-logo:hover{ filter:none; opacity:1; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.supporter-logo img{ max-width:100%; max-height:56px; width:auto; object-fit:contain; }

/* =========================================================
   9. NEWS / BLOG
========================================================= */
.news-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.news-card{ border:1px solid var(--gray-300); border-radius: var(--radius); overflow:hidden; background:var(--white); transition:.25s; }
.news-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.news-card .thumb{ display:block; aspect-ratio: 16/10; background: linear-gradient(140deg, var(--cream-100), var(--gray-300)); }
.news-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.news-card .body{ padding:22px; }
.news-card .date{ font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color: var(--red-600); font-weight:700; }
.news-card h3{ font-size:1.08rem; margin: 8px 0; }
.news-card p{ font-size:.9rem; }
@media (max-width: 900px){ .news-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .news-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   10. CONTACT
========================================================= */
.contact-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; }
.contact-info-card{ background: var(--navy-950); color:var(--white); border-radius: var(--radius); padding:40px; }
.contact-info-card h3{ color:var(--white); }
.contact-info-list{ margin-top:24px; display:grid; gap:20px; }
.contact-info-list li{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-list .ico{ width:40px; height:40px; border-radius:10px; background: rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color: var(--gold-500); flex:0 0 auto; }
.contact-info-list b{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color: rgba(255,255,255,.6); margin-bottom:2px; }
.contact-info-list span, .contact-info-list a{ color:var(--white); font-weight:600; }
.social-row{ display:flex; gap:10px; margin-top:28px; }
.social-row a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; color:var(--white); }
.social-row a:hover{ background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }

.contact-form{ display:grid; gap:16px; }
.contact-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form label{ font-size:.85rem; font-weight:600; margin-bottom:6px; display:block; color: var(--ink-700); }
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; padding: 13px 16px; border-radius:10px; border:1.5px solid var(--gray-300); font-family: var(--font-sans); font-size:.96rem; background: var(--white); color: var(--ink-900);
}
.contact-form input:focus, .contact-form textarea:focus{ border-color: var(--navy-800); outline:none; }
.contact-form textarea{ min-height:130px; resize:vertical; }
.form-note{ font-size:.8rem; color: var(--gray-500); }
@media (max-width: 900px){ .contact-wrap{ grid-template-columns:1fr; } }
@media (max-width: 560px){ .contact-form .row2{ grid-template-columns:1fr; } }

/* Softens the default WordPress editor chrome (used for the member content
   submission form) so it doesn't look like a bare wp-admin widget dropped
   onto the site. */
.contact-form .wp-editor-wrap{ border:1.5px solid var(--gray-300); border-radius:10px; overflow:hidden; }
.contact-form .wp-editor-wrap .wp-editor-tools{ background: var(--cream-050); border-bottom:1px solid var(--gray-300); padding-top:6px; }
.contact-form .wp-editor-wrap .mce-toolbar-grp{ background: var(--cream-050) !important; border-bottom:1px solid var(--gray-300) !important; }
.contact-form .wp-editor-wrap textarea{ border:none; border-radius:0; }
.contact-form .wp-editor-wrap .mce-edit-area{ border:none !important; }

/* =========================================================
   11. FOOTER
========================================================= */
.site-footer{ background: var(--navy-950); color: rgba(255,255,255,.75); }
.footer-top{ padding: 72px 0 48px; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand img{ height:56px; width:auto; filter: brightness(0) invert(1); margin-bottom:16px; }
.footer-brand p{ color: rgba(255,255,255,.6); font-size:.92rem; max-width:320px; }
.footer-col h4{ color:var(--white); font-family: var(--font-sans); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; }
.footer-col ul{ display:grid; gap:12px; }
.footer-col a{ color: rgba(255,255,255,.68); font-size:.92rem; }
.footer-col a:hover{ color: var(--gold-500); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding: 22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.82rem; color: rgba(255,255,255,.5); }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }

/* =========================================================
   12. GENERIC PAGE / BLOG / 404 / SEARCH
========================================================= */
.page-hero{ background: linear-gradient(160deg, var(--navy-950), var(--navy-800)); color:var(--white); padding: 70px 0; text-align:center; }
.page-hero h1{ color:var(--white); margin-bottom:8px; }
.page-hero .breadcrumb{ font-size:.85rem; color: rgba(255,255,255,.6); }
.page-hero .breadcrumb a{ color: rgba(255,255,255,.8); }

.entry-content{ max-width: 800px; margin: 0 auto; }
.entry-content h2{ margin-top:1.6em; }
.entry-content img{ border-radius: var(--radius); margin: 1.4em 0; }
.entry-content blockquote{ border-left:4px solid var(--gold-500); padding: 4px 24px; font-family: var(--font-serif); font-style:italic; font-size:1.15rem; color: var(--navy-950); }

.author-box{ display:flex; gap:20px; align-items:flex-start; background: var(--cream-050); border-radius: var(--radius); padding:26px; }
.author-box-avatar{ width:64px; height:64px; border-radius:50%; flex:0 0 auto; overflow:hidden; background: linear-gradient(155deg, var(--navy-950), var(--navy-700)); color: var(--gold-500); display:flex; align-items:center; justify-content:center; }
.author-box-label{ display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--red-600); margin-bottom:4px; }
.author-box h3{ font-size:1.1rem; margin-bottom:6px; }
.author-box p{ font-size:.92rem; margin-bottom:0; }
@media (max-width:560px){ .author-box{ flex-direction:column; align-items:flex-start; } }

.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media (max-width: 900px){ .blog-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .blog-grid{ grid-template-columns: 1fr; } }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:48px; }
.pagination a, .pagination span{ padding:10px 16px; border-radius:8px; border:1px solid var(--gray-300); font-weight:600; font-size:.9rem; }
.pagination .current{ background: var(--navy-950); color:var(--white); border-color: var(--navy-950); }

.error-404{ text-align:center; padding: 100px 0; }
.error-404 .code{ font-family: var(--font-serif); font-size: 6rem; color: var(--gold-500); line-height:1; }

.comment-list{ display:grid; gap:22px; margin: 30px 0; }
.comment-body{ background: var(--cream-050); border-radius: var(--radius); padding:22px; }
.comment-form input, .comment-form textarea{ width:100%; padding:12px 14px; border-radius:8px; border:1.5px solid var(--gray-300); font-family:var(--font-sans); }
.comment-form textarea{ min-height:120px; }

.widget-area{ display:grid; gap:30px; }
.widget{ background: var(--cream-050); border-radius: var(--radius); padding:24px; }
.widget h2, .widget h3{ font-size:1.05rem; }

/* =========================================================
   13. RESOURCE CARDS (Cursos, Publicações, Atuação)
========================================================= */
.resource-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.resource-card{ background: var(--white); border:1px solid var(--gray-300); border-radius: var(--radius); padding:28px; display:flex; flex-direction:column; height:100%; transition: all .25s ease; }
.resource-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.resource-card h3{ font-size:1.1rem; margin-bottom:8px; }
.resource-card .meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.resource-card .meta span{ background: var(--cream-100); color: var(--navy-800); font-size:.74rem; font-weight:600; padding:4px 10px; border-radius:999px; }
.resource-card p{ font-size:.92rem; flex:1; }
.resource-card .btn{ align-self:flex-start; margin-top:10px; }
@media (max-width: 900px){ .resource-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .resource-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   14. ÁREA DO ASSOCIADO — members-only mini app
========================================================= */
.member-nav{ background: var(--navy-950); position:sticky; top:0; z-index:400; }
.member-nav-inner{ display:flex; align-items:center; gap:4px; overflow-x:auto; }
.member-nav-link{ color: rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:16px 18px; white-space:nowrap; border-bottom:3px solid transparent; }
.member-nav-link:hover{ color: var(--white); }
.member-nav-link.is-active{ color: var(--gold-500); border-bottom-color: var(--gold-500); }
.member-nav-link.member-nav-exit{ margin-left:auto; color: rgba(255,255,255,.5); }
.member-nav-link.member-nav-exit:hover{ color: var(--white); }

.member-birthday-banner{
  background: linear-gradient(120deg, var(--gold-500), var(--gold-600)); color: var(--navy-950); font-weight:700;
  text-align:center; padding:16px 22px; border-radius: 14px; margin-bottom:28px; font-size:.98rem;
}

.member-dash-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:48px; align-items:start; }
@media (max-width: 860px){ .member-dash-grid{ grid-template-columns:1fr; } }

.birthday-list{ display:grid; gap:10px; margin-bottom:26px; }
.birthday-row{
  display:flex; align-items:center; gap:12px; background: var(--white); border:1px solid var(--gray-300);
  border-radius:12px; padding:10px 14px;
}
.birthday-row.is-today{ background: var(--gold-100); border-color: var(--gold-500); }
.birthday-avatar{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex:0 0 auto; background: var(--navy-100); color:var(--navy-900); }
.birthday-avatar img{ width:100%; height:100%; object-fit:cover; }
.birthday-info{ display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0; }
.birthday-info strong{ font-size:.9rem; color: var(--navy-950); }
.birthday-info span{ font-size:.78rem; color: var(--gray-500); }
.birthday-row.is-today .birthday-info span{ color: #7a5a17; font-weight:600; }
.birthday-cake{ font-size:1.2rem; }

.member-quicklinks{ display:grid; gap:10px; }
.member-quicklink{
  display:flex; align-items:center; gap:10px; background: var(--navy-950); color: var(--white); font-weight:600;
  font-size:.9rem; padding:14px 16px; border-radius:12px; transition: all .2s ease;
}
.member-quicklink:hover{ background: var(--navy-800); color:var(--white); transform: translateY(-2px); }
.member-quicklink span{ font-size:1.1rem; }

/* Profile editor */
.profile-editor{ display:grid; grid-template-columns: 180px 1fr; gap:36px; align-items:start; }
@media (max-width: 640px){ .profile-editor{ grid-template-columns:1fr; } }
.profile-photo-preview{
  width:150px; height:150px; border-radius:50%; overflow:hidden; background: var(--navy-100); color:var(--navy-900);
  border:4px solid var(--white); box-shadow: var(--shadow-sm); margin:0 auto;
}
.profile-photo-preview img{ width:100%; height:100%; object-fit:cover; }
.areas-checklist{ display:flex; flex-wrap:wrap; gap:10px; }
.area-check{ display:inline-flex; align-items:center; gap:7px; background: var(--cream-050); border:1.5px solid var(--gray-300); border-radius:999px; padding:8px 14px; font-size:.84rem; cursor:pointer; transition: all .15s ease; }
.area-check:has(input:checked){ background: var(--navy-950); border-color: var(--navy-950); color: var(--white); }
.area-check input{ accent-color: var(--gold-500); }

/* Directory */
.area-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.area-filter-chip{ background: var(--white); border:1.5px solid var(--gray-300); color: var(--ink-700); font-size:.82rem; font-weight:600; padding:7px 15px; border-radius:999px; transition: all .15s ease; }
.area-filter-chip:hover{ border-color: var(--navy-700); color: var(--navy-900); }
.area-filter-chip.is-active{ background: var(--navy-950); border-color: var(--navy-950); color: var(--white); }

.directory-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:22px; }
.directory-card{
  background: var(--white); border:1px solid var(--gray-300); border-radius: var(--radius); padding:26px 22px;
  text-align:center; transition: all .25s ease;
}
.directory-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); border-color:transparent; }
.directory-avatar{ width:78px; height:78px; border-radius:50%; overflow:hidden; margin:0 auto 14px; background: var(--navy-100); color: var(--navy-900); border:3px solid var(--cream-050); }
.directory-avatar img{ width:100%; height:100%; object-fit:cover; }
.directory-card h3{ font-size:1.05rem; margin-bottom:4px; }
.directory-meta{ display:block; font-size:.8rem; color: var(--gray-500); margin-bottom:2px; }
.directory-areas{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:14px 0; }
.area-tag{ background: var(--cream-100); color: var(--navy-800); font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:999px; }
.directory-contact{ display:flex; flex-direction:column; gap:4px; margin-top:12px; padding-top:14px; border-top:1px solid var(--gray-300); }
.directory-contact a{ font-size:.8rem; color: var(--navy-800); word-break:break-word; }
.directory-contact a:hover{ color: var(--red-600); }

/* My articles */
.my-articles-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:20px; margin-bottom:12px; }
.my-article-card{ display:block; background: var(--white); border:1px solid var(--gray-300); border-radius: var(--radius); overflow:hidden; transition: all .2s ease; }
.my-article-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.my-article-thumb{ aspect-ratio: 16/10; overflow:hidden; }
.my-article-thumb img{ width:100%; height:100%; object-fit:cover; }
.my-article-body{ padding:16px 18px; }
.my-article-date{ font-size:.72rem; color: var(--gray-500); text-transform:uppercase; letter-spacing:.04em; }
.my-article-body h4{ font-size:.98rem; margin:4px 0 0; color: var(--navy-950); }

/* utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.section-cta-wrap{ text-align:center; margin-top:40px; }