/* ==========================================================================
   Projeto Alvorada — Design System
   Paleta: Roxo/Púrpura (SBC/Tecnologia) + Laranja/Coral (Alvorada/Amanhecer)
   ========================================================================== */

:root{
  /* --- cores de marca --- */
  --color-primary:        #5C2D91; /* roxo SBC/tecnologia */
  --color-primary-dark:   #431F6B;
  --color-primary-light:  #7A4CB0;
  --color-secondary:      #E85D04; /* coral do amanhecer */
  --color-secondary-dark: #B94903;
  --color-secondary-light:#FF8A3D;
  --color-accent-gold:    #F2B84B;

  /* --- superfícies: tema claro (padrão) --- */
  --color-bg:            #F8F9FA;
  --color-bg-elevated:   #FFFFFF;
  --color-bg-subtle:     #EFEAF6;
  --color-text:          #1A1A1A;
  --color-text-muted:    #52525B;
  --color-border:        #E2E2E7;
  --color-link:          #4A1F73;   /* roxo escurecido — 7:1 em #F8F9FA, nível AAA */
  --color-focus:         #E85D04;

  /* --- tipografia: pilha de fontes do sistema (sem CDN, sem arquivos locais) --- */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(26,26,26,0.08);
  --shadow-md: 0 4px 16px rgba(26,26,26,0.10);
  --header-h: 72px;
  --font-scale: 1;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
}

/* --- tema escuro --- */
[data-theme="dark"]{
  --color-bg:            #121212;
  --color-bg-elevated:   #1D1D1F;
  --color-bg-subtle:     #241A33;
  --color-text:          #F0F0F0;
  --color-text-muted:    #B8B8BE;
  --color-border:        #33333A;
  --color-link:          #C9A6E8;  /* lilás claro — contraste AAA em #121212 */
  --color-primary-light: #9B6FC4;
}

/* --- alto contraste --- */
[data-theme="high-contrast"]{
  --color-bg:            #000000;
  --color-bg-elevated:   #000000;
  --color-bg-subtle:     #000000;
  --color-text:          #FFFFFF;
  --color-text-muted:    #FFFFFF;
  --color-border:        #FFFFFF;
  --color-link:          #FFD400;
  --color-primary:       #B388FF;
  --color-primary-dark:  #000000;
  --color-primary-light: #B388FF;
  --color-secondary:      #FF9E40;
  --color-secondary-dark: #000000;
  --color-secondary-light:#FF9E40;
  --color-accent-gold:    #FFD400;
  --color-focus:          #FFD400;
}
[data-theme="high-contrast"] img{ filter: contrast(1.15); }
[data-theme="high-contrast"] .btn,
[data-theme="high-contrast"] .card,
[data-theme="high-contrast"] .site-header{ border: 2px solid var(--color-border) !important; }

/* elementos com cor "fixa" no código (gradientes, overlays translúcidos) precisam
   de uma sobrescrita explícita aqui — variáveis de tema sozinhas não bastam */
[data-theme="high-contrast"] .hero{ background:#000; }
[data-theme="high-contrast"] .site-footer{ background:#000; }
[data-theme="high-contrast"] .hero-follow .social-link{
  background:#000; border:2px solid #fff; color:#fff;
}
[data-theme="high-contrast"] .carousel-arrow{
  background:#000; border:2px solid #fff; color:#fff;
}
[data-theme="high-contrast"] .card.card-upcoming{
  box-shadow:none; border:3px solid var(--color-secondary) !important;
}
[data-theme="high-contrast"] .tag.tag-upcoming{
  background:#000; color: var(--color-secondary); border:1px solid var(--color-secondary);
  animation:none;
}
[data-theme="high-contrast"] .tag.tag-done{
  background:#000; color: var(--color-primary); border:1px solid var(--color-primary);
}
[data-theme="high-contrast"] .carousel-main figcaption{
  background:#000;
}
[data-theme="high-contrast"] .footer-bottom{ border-top-color:#fff; }

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; font-size: calc(16px * var(--font-scale, 1)); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body{
  margin:0;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  transition: background-color .2s ease, color .2s ease;
}
img{ max-width:100%; display:block; }
a{ color: var(--color-link); }
a:not(.btn){ text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
h1,h2,h3,h4{ line-height:1.25; font-weight:700; }
p{ max-width: 70ch; }

/* foco visível sempre — requisito de acessibilidade por teclado */
:focus-visible{
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* suporte a zoom até 200% sem perda de funcionalidade */
.container{
  width: min(1180px, 100% - 2 * var(--space-5));
  margin-inline: auto;
}

/* skip link */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:1000;
  background: var(--color-primary); color:#fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--header-h);
  gap: var(--space-4);
}
.brand{ display:flex; align-items:center; gap: var(--space-3); text-decoration:none; flex-shrink:0; }
.brand img{ height:3rem; width:auto; }

.main-nav ul{ list-style:none; display:flex; gap: var(--space-4); margin:0; padding:0; flex-wrap:nowrap; }
.main-nav a{
  color: var(--color-text); text-decoration:none; font-weight:600; font-size:.9rem;
  padding: var(--space-2) var(--space-1); border-bottom: 2px solid transparent; white-space:nowrap;
}
.main-nav a:hover, .main-nav a:focus-visible{ border-bottom-color: var(--color-secondary); }

.header-tools{ display:flex; align-items:center; gap: var(--space-3); }

.lang-switch{ position:relative; }
.lang-flag{
  width:20px; height:14px; flex-shrink:0; border-radius:2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12); vertical-align:middle;
}
.lang-current{ display:inline-flex; align-items:center; gap:7px; }
.lang-switch-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-size:.9rem; color: var(--color-text); cursor:pointer;
}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  background: var(--color-bg-elevated); border:1px solid var(--color-border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  min-width:160px; padding: var(--space-2) 0; display:none; z-index:50;
}
.lang-menu.open{ display:block; }
.lang-menu button{
  width:100%; text-align:left; background:none; border:none; padding: var(--space-2) var(--space-4);
  font-size:.9rem; color: var(--color-text); cursor:pointer; display:flex; gap:8px; align-items:center;
}.lang-menu button:hover, .lang-menu button:focus-visible{ background: var(--color-bg-subtle); }
.lang-menu button[aria-current="true"]{ font-weight:700; color: var(--color-primary); }

.theme-switch{ display:flex; border:1px solid var(--color-border); border-radius: var(--radius-sm); overflow:hidden; }
.theme-switch button{
  background: var(--color-bg-elevated); border:none; padding: var(--space-2) var(--space-3);
  cursor:pointer; color: var(--color-text); font-size:1rem; line-height:1;
  border-left: 1px solid var(--color-border);
  min-width:24px; min-height:24px;
}
.theme-switch button:first-child{ border-left:none; }
.theme-switch button[aria-pressed="true"]{ background: var(--color-primary); color:#fff; }

.font-size-switch{ display:flex; border:1px solid var(--color-border); border-radius: var(--radius-sm); overflow:hidden; }
.font-size-switch button{
  background: var(--color-bg-elevated); border:none; padding: var(--space-2) var(--space-3);
  cursor:pointer; color: var(--color-text); font-size:.85rem; font-weight:700; line-height:1;
  border-left: 1px solid var(--color-border);
  min-width:24px; min-height:24px;
}
.font-size-switch button:first-child{ border-left:none; }
.font-size-switch button:hover, .font-size-switch button:focus-visible{ background: var(--color-bg-subtle); }
.font-size-switch button:disabled{ opacity:.4; cursor:not-allowed; }
#font-decrease{ font-size:.7rem; }
#font-increase{ font-size:1rem; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-size:1.3rem; cursor:pointer; color: var(--color-text);
}


/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, var(--color-secondary-dark) 100%);
  color:#fff; padding: var(--space-9) 0 var(--space-8);
  text-align:center;
}
.hero h1{ font-size: clamp(2rem, 4vw, 3rem); margin:0 0 var(--space-4); }
.hero p{ font-size:1.15rem; max-width:60ch; margin:0 auto var(--space-6); opacity:.95; }
.hero-badges{ display:flex; justify-content:center; align-items:center; gap: var(--space-6); flex-wrap:wrap; margin-top: var(--space-6); }
.hero-badges img{ height:86px; width:auto; background:#fff; border-radius:8px; padding:8px; }

.badge-link{
  display:inline-block; text-decoration:none; border-radius:8px;
  transition: transform .15s ease, opacity .15s ease;
}
.badge-link:hover, .badge-link:focus-visible{ transform: translateY(-3px); opacity:.9; }

.icon-instagram{ width:20px; height:20px; flex-shrink:0; }
.social-link{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:600;
}
.hero-follow{
  display:flex; align-items:center; justify-content:center; gap: var(--space-2); flex-wrap:wrap;
  font-size:.95rem; margin: var(--space-2) 0 0; color:#fff;
}
.hero-follow .social-link{
  color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  border-radius:999px; padding: 6px 16px 6px 12px;
}
.hero-follow .social-link:hover, .hero-follow .social-link:focus-visible{ background:rgba(255,255,255,.26); }
.footer-grid .social-link{ color:#fff; }

/* ==========================================================================
   Seções
   ========================================================================== */
section{ padding: var(--space-8) 0; }
section, #top, #main-content, #contato{
  scroll-margin-top: calc(var(--header-h) + 16px);
}
section:nth-of-type(even){ background: var(--color-bg-subtle); }
.section-title{
  font-size:1.9rem; margin-bottom: var(--space-3);
  display:flex; align-items:center; gap: var(--space-3);
}
.section-title::before{
  content:""; width:6px; height:1.3em; background: var(--color-secondary); border-radius:3px; display:inline-block;
}
.section-lead{ color: var(--color-text-muted); font-size:1.05rem; max-width:75ch; margin-bottom: var(--space-6); }

.two-col{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-7); align-items:center; }
.info-list{ list-style:none; margin: var(--space-5) 0 0; padding:0; display:grid; gap: var(--space-3); }
.info-list li{ display:flex; gap: var(--space-3); align-items:flex-start; }
.info-list .icon{ flex-shrink:0; width:1.4em; text-align:center; }

.quote-block{
  border-left:4px solid var(--color-secondary); padding: var(--space-4) var(--space-5);
  background: var(--color-bg-elevated); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style:italic; font-family: var(--font-display); font-size:1.15rem; box-shadow: var(--shadow-sm);
}

/* chancela */
.chancela-box{
  display:flex; align-items:center; gap: var(--space-6); flex-wrap:wrap;
  background: var(--color-bg-elevated); border:1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.chancela-box img{
  height:130px; width:auto; background:#fff; border-radius:8px; padding:10px;
}
.chancela-box .text{ flex:1; min-width:260px; }

/* cards genéricos */
.cards-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.card{
  background: var(--color-bg-elevated); border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-5); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap: var(--space-2);
}
.card .tag{
  align-self:flex-start; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color: var(--color-secondary-dark); background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
  padding: 2px 10px; border-radius: 999px;
}
.card h3{ margin: var(--space-2) 0 0; font-size:1.15rem; }
.card p{ color: var(--color-text-muted); font-size:.95rem; margin:0; }
.card .meta{ font-size:.82rem; color: var(--color-text-muted); }

/* galeria: carrossel com thumbnails, 100% vanilla */
.gallery-carousel{ max-width:880px; margin:0 auto; }
.carousel-viewport{ position:relative; }
.carousel-main{
  margin:0; border-radius: var(--radius-lg); overflow:hidden; background: var(--color-bg-subtle);
  border:1px solid var(--color-border); aspect-ratio:16/10; position:relative;
}
.carousel-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel-main figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(0,0,0,.72), transparent 90%);
  color:#fff; font-size:.92rem; padding: var(--space-5) var(--space-5) var(--space-3);
}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.carousel-arrow:hover, .carousel-arrow:focus-visible{ background: var(--color-secondary); }
.carousel-arrow.prev{ left:12px; }
.carousel-arrow.next{ right:12px; }
.carousel-thumbs{
  display:flex; gap: var(--space-2); margin-top: var(--space-4); overflow-x:auto; padding-bottom:4px;
}
.carousel-thumbs button{
  flex-shrink:0; width:84px; height:60px; padding:0; border-radius: var(--radius-sm); overflow:hidden;
  border:2px solid transparent; cursor:pointer; background:none; opacity:.55;
  transition: opacity .15s ease, border-color .15s ease;
}
.carousel-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel-thumbs button[aria-selected="true"]{ border-color: var(--color-secondary); opacity:1; }
.carousel-thumbs button:hover, .carousel-thumbs button:focus-visible{ opacity:1; }

.carousel-playpause{
  display:flex; align-items:center; gap:8px; margin-top: var(--space-3);
  background:none; border:1px solid var(--color-border); border-radius:999px;
  padding: 6px 16px; font-size:.82rem; color: var(--color-text-muted); cursor:pointer;
}
.carousel-playpause:hover, .carousel-playpause:focus-visible{ color: var(--color-text); border-color: var(--color-secondary); }
#carousel-playpause-icon{ font-size:.9rem; }

/* cards de atividade: "próxima" vs "realizada" */
.card.card-upcoming{
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(232,93,4,0.15), var(--shadow-sm);
}
.tag.tag-upcoming{
  background: rgba(232,93,4,0.14); color: var(--color-secondary-dark);
  animation: pulse-tag 2.4s ease-in-out infinite;
}
.tag.tag-done{ background: rgba(92,45,145,0.12); color: var(--color-primary); }
[data-theme="dark"] .tag.tag-done{ color: var(--color-primary-light); }
@keyframes pulse-tag{ 0%,100%{ opacity:1; } 50%{ opacity:.7; } }
@media (prefers-reduced-motion: reduce){ .tag.tag-upcoming{ animation:none; } }
.card-link{ margin-top: var(--space-1); font-size:.85rem; font-weight:700; text-decoration:none; align-self:flex-start; }

/* publicações com miniatura (ex.: thumbnail do YouTube) */
.pub-list{ list-style:none; margin:0; padding:0; display:grid; gap: var(--space-4); }
.pub-list li{
  display:flex; gap: var(--space-4); align-items:flex-start;
  background: var(--color-bg-elevated); border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.pub-list a{ font-weight:700; }
.pub-list .meta{ display:block; color: var(--color-text-muted); font-size:.85rem; margin-top:2px; }
.pub-list .pub-thumb{
  flex-shrink:0; width:120px; height:68px; border-radius: var(--radius-sm); overflow:hidden;
  background: var(--color-bg-subtle); border:1px solid var(--color-border);
}
.pub-list .pub-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pub-list .pub-body{ flex:1; min-width:0; }
@media (max-width: 480px){
  .pub-list li{ flex-direction:column; }
  .pub-list .pub-thumb{ width:100%; height:auto; aspect-ratio:16/9; }
}

/* botão */
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background: var(--color-secondary); color:#fff; font-weight:700;
  padding: var(--space-3) var(--space-6); border-radius: 999px; border:none; cursor:pointer;
  font-size:1rem; transition: transform .15s ease, background-color .15s ease;
}
.btn:hover, .btn:focus-visible{ background: var(--color-secondary-dark); transform: translateY(-1px); }
.btn.secondary{ background: transparent; color: var(--color-primary); border:2px solid var(--color-primary); }
[data-theme="dark"] .btn.secondary{ color: var(--color-primary-light); border-color: var(--color-primary-light); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--color-primary-dark); color:#fff; padding: var(--space-7) 0 var(--space-5);
}
[data-theme="dark"] .site-footer{ background:#0B0B0D; border-top:1px solid var(--color-border); }
.footer-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--space-6); }
.footer-grid h2{ font-size:1rem; margin:0 0 var(--space-3); }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap: var(--space-2); }
.footer-grid a{ color:#fff; opacity:.9; text-decoration:none; overflow-wrap:anywhere; word-break:break-word; }
.footer-grid a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{
  margin-top: var(--space-7); padding-top: var(--space-5); border-top:1px solid rgba(255,255,255,.2);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--space-3);
  font-size:.85rem; opacity:.9;
}

/* voltar ao topo */
.back-to-top{
  position:fixed; right: var(--space-5); bottom: var(--space-5); z-index:90;
  width:48px; height:48px; border-radius:50%; border:none;
  background: var(--color-primary); color:#fff; font-size:1.3rem; cursor:pointer;
  box-shadow: var(--shadow-md); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:none; }

/* ==========================================================================
   Responsivo — mobile first (regras acima já são mobile-friendly;
   ajustes para telas maiores entram aqui)
   ========================================================================== */
@media (max-width: 1360px){
  .main-nav{
    position:fixed; inset: var(--header-h) 0 0 0; background: var(--color-bg-elevated);
    padding: var(--space-6) var(--space-5); transform: translateX(-100%); transition: transform .2s ease;
    overflow-y:auto;
  }
  .main-nav.open{ transform:none; }
  .main-nav ul{ flex-direction:column; gap: var(--space-2); flex-wrap:wrap; }
  .main-nav a{ display:block; padding: var(--space-3) var(--space-2); }
  .nav-toggle{ display:inline-flex; }
  .two-col{ grid-template-columns:1fr; }
  .chancela-box{ flex-direction:column; text-align:center; justify-content:center; }
}
@media (min-width: 1361px){
  .header-inner{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap: var(--space-3) var(--space-4); }
  .main-nav ul{ flex-wrap:wrap; row-gap: var(--space-2); }
}