/* =========================================================
   FONTES
========================================================= */
@layer base {
  @font-face {
    font-family: 'AtlasGrotesk';
    src: url('fontes/AtlasGrotesk-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
  }

  @font-face {
    font-family: 'HersheyNoailles';
    src: url('fontes/Hershey-Noailles-Times-Triplex-Italic-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
  }
}

/* =========================================================
   VARIÁVEIS GLOBAIS
========================================================= */
@layer base {
  :root {
    /* Cores */
    --cor-fundo: #eeeeee;
    --cor-texto: #111;
    --cor-link: #000;
    --cor-extra: rgb(248, 209, 167);
    --cor-link-ativo: #001eff;

    /* Layout */
    --max-largura: 800px;

    /* Espaçamento */
    --espaco-xs: 0.5rem;
    --espaco-sm: 1rem;
    --espaco-md: 2rem;
    --espaco-lg: 4rem;
    --espaco-xl: 6rem;
  }
}

/* =========================================================
   BASE / ESTRUTURA GLOBAL
========================================================= */
@layer base {
  html, body {
    font-family: "minion-pro", serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    max-width: var(--max-largura);
    margin: 0 auto;
    padding: var(--espaco-lg) var(--espaco-xl) var(--espaco-xl);
    line-height: 1.6;
  }

  a {
    color: var(--cor-link);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}

/* =========================================================
   CABEÇALHO E NAVEGAÇÃO
========================================================= */
@layer layout {
  header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--espaco-sm);
  }

  .titulo {
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .titulo h1,
  .titulo p {
    margin: 0;
  }

  h1 a {
    font-family: "minion-pro", serif;
    color: var(--cor-texto);
    font-weight: bold;
    letter-spacing: -1px;
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-sm);
  }

  nav a[aria-current="page"] {
    color: var(--cor-link-ativo);
    text-decoration: underline;
  }
}

/* =========================================================
   BOTÃO FIXO — Buy Me a Coffee
========================================================= */
@layer components {
  .bmc-fixo {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    background: var(--cor-fundo);
    border: 7px solid transparent;
    padding: 0.5rem;
  }

  .bmc-fixo a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cor-texto);
    font-size: 0.9rem;
    font-weight: 600;
  }
}

/* =========================================================
   LANDING PAGE
========================================================= */
@layer pages.landing {
  html.landing,
  html.landing body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: var(--cor-fundo);
    max-width: none;
    margin: 0;
    padding: 0;

    /* Cursor personalizado restaurado */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='12' r='4' fill='black'/%3E%3Cellipse cx='11' cy='13' rx='6' ry='3' fill='black' opacity='0.3'/%3E%3Cellipse cx='21' cy='13' rx='6' ry='3' fill='black' opacity='0.3'/%3E%3C/svg%3E") 16 16, auto;
  }

  html.landing .conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    max-width: 600px;
    padding: 2rem 3rem;

    text-align: center;
    border: 7px solid transparent;
    border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAjUlEQVQ4T7WUUQ7AIAhD5/0PvY0lJgoCLdP9LdHXUhvadeBrReb93nPvotAQoo0h0A6EwQhUjMBAOYxCxwlTgQiqx/b+zVt3aKrOtMRzKiJZPKORyVQlU23atENDXfXF+JBTuo9ezn+dLnPfkanp8NGeRjWkO8yODwkwULgdDBTeVhkUGreypJld8p19AKDIJhZpk1q6AAAAAElFTkSuQmCC') 7 / 7px / 0 round;


    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='12' r='4' fill='%23001eff'/%3E%3Cellipse cx='11' cy='13' rx='6' ry='3' fill='%238899ff' opacity='0.9'/%3E%3Cellipse cx='21' cy='13' rx='6' ry='3' fill='%238899ff' opacity='0.9'/%3E%3C/svg%3E") 16 16, auto;
  }
  html.landing form[action*="buttondown.com"] {
    position: static;
    margin: 0.2rem 0 0;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    background: none;
  }

  html.landing form[action*="buttondown.com"] input[type="email"] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-family: var(--fonte-principal);
    font-size: 1rem;
  }

} 


/* =========================================================
   FEED / NEWSLETTER
========================================================= */
@layer pages.feed {

  .newsletter-page header {
    padding-bottom: var(--espaco-md);
  }

  .feed article {
    border-bottom: 1px solid black;
    margin-bottom: var(--espaco-sm);
    padding-bottom: var(--espaco-sm);
  }

  .feed article h2,
  .feed article .date {
    margin: 0;
    padding: 0;
  }

  .date {
    font-size: 0.9rem;
    color: var(--cor-texto);
  }
}
  .feed img {
    width: 100%;
    border: 1px solid black;
    object-fit: cover;
  }

/* =========================================================
   PÁGINA NEWSLETTER ENTRY - IGUAL À DO FEED?
========================================================= */


/* =========================================================
   FORMULÁRIO DE SUBSCRIÇÃO
========================================================= */
@layer components.forms {
  form[action*="buttondown.com"] {
    position: fixed;
    bottom: var(--espaco-sm);
    right: var(--espaco-sm);
    padding: 0.75rem 1rem;
    display: flex;
    gap: var(--espaco-xs);
    align-items: center;
    z-index: 1000;
    border: 7px solid;
    border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAjUlEQVQ4T7WUUQ7AIAhD5/0PvY0lJgoCLdP9LdHXUhvadeBrReb93nPvotAQoo0h0A6EwQhUjMBAOYxCxwlTgQiqx/b+zVt3aKrOtMRzKiJZPKORyVQlU23atENDXfXF+JBTuo9ezn+dLnPfkanp8NGeRjWkO8yODwkwULgdDBTeVhkUGreypJld8p19AKDIJhZpk1q6AAAAAElFTkSuQmCC') 7 / 7px / 0 round;
  }

  form[action*="buttondown.com"] input[type="email"] {
    background: none;
    border: none;
    border-bottom: 1px solid #000;
    padding: 4px 0;
    width: 200px;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
  }

  form[action*="buttondown.com"] input[type="submit"] {
    background-color: var(--cor-fundo);
    color: #000;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: 'Times New Roman', Times, serif;
    border: none;
  }
}

/* =========================================================
   PÁGINA SOBRE
========================================================= */
@layer pages.sobre {

  .bloco-sobre {
    display: flex;
    flex-direction: column;
  }

  .bloco-sobre img {
    width: 100%;
    border: 1px solid black;
    object-fit: cover;
  }
    .bloco-sobre p {
    margin-bottom: 0.5rem;
  }

.bloco-sobre a {
  color: #001eff;
}

  h3 {
  margin: 0;
  }

ul {
  list-style: none; 
  padding-left: none;
}

ul li::before {
  content: "☆ ";
  color: inherit;
}

}

/* =========================================================
   PÁGINA MAPA
========================================================= */
@layer pages.mapa {
  main {
    padding-top: var(--espaco-sm);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: var(--espaco-md);
  }

  #map {
    width: 100%;
    height: 60vh;
    border: 1px solid black;
    margin-bottom: var(--espaco-md);
  }

  .filtros-mapa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
  }

  .lista-locais {
    border-top: 1px solid black;
    font-size: 0.8rem;
  }

  .item-local {
    padding: 0.75rem 0;
    border-bottom: 1px solid black;
    cursor: pointer;
  }

  .item-local:hover {
    background: #d6d6d6;
  }
}


/* =========================================================
   PÁGINA AGENDA CULTURAL
========================================================= */
@layer pages.agenda {
  .filtros-agenda {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0 2rem;
  }

h3 {
  font-size: 1.5rem;  
}

  .evento {
    display: flex;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid black;

  }

  .detalhes-evento h3 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
  }
}
.detalhes-evento p {
  margin: 0.5rem 0;
  line-height: 1.5;
  
}

.agenda a {
    color: var(--cor-link-ativo);
    text-decoration: none;
}

/* =========================================================
   FOOTER
========================================================= */
@layer layout {
  footer {
    font-family: 'HersheyNoailles', sans-serif;
    font-size: 0.8rem;
    color: #000;
    position: fixed;
    bottom: var(--espaco-sm);
    left: var(--espaco-sm);
  }
}

/* =========================================================
   MEDIA QUERIES
========================================================= */
@layer utilities {
  @media (max-width: 900px) {
    html, body {
      padding: 1rem !important;
      max-width: 100% !important;
      margin: 0 !important;
    }

    header {
      flex-direction: column;
      align-items: flex-start;
      padding: 4rem 0 1rem;
    }

    main {
      margin-bottom: 5rem;
    }

    form[action*="buttondown"] {
      right: 1rem;
      bottom: 1rem;
      padding: 0.5rem 0.75rem;
      flex-direction: row;
    }
  }

  @media (max-width: 600px) {
    #map { height: 70vh; }
    .evento { flex-direction: column; gap: 0.75rem; }
  }

  @media (max-width: 480px) {
    .titulo h1 a { font-size: 1.6rem; }
    header nav { gap: 0.4rem; font-size: 0.9rem; }
    .feed article h2 { font-size: 1rem; line-height: 1.3; }
  }
  
}
/* =========================================================
   CORREÇÕES ESPECÍFICAS
   Regras com alta especificidade para garantir override
   ========================================================= */

#map,
#map + .filtros-mapa,
#lista-locais,
#lista-locais .item-local,
.lista-locais,
.lista-locais a {
  line-height: 1.4 !important; 
}

#lista-locais {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid black;
  font-size: 0.9rem; 
}

#lista-locais .item-local {
  padding: 0.75rem 0;
  border-bottom: 1px solid black;
  cursor: pointer;
  margin-bottom: 0;
}

#lista-locais .item-local:hover {
  background: #d6d6d6 !important;
}

#lista-locais .item-local h3 {
  margin: 0;
  font-size: 1.05rem;
}

#lista-locais .item-local p {
  margin: 0.2rem 0;
  font-size: 0.95rem;
  line-height: 1.3;
}
.lista-locais a {
    color: var(--cor-link-ativo);
    text-decoration: none;
}