/*
  PÁGINAS DE TEXTO (page.php) e 404 (404.php)
  Só variáveis do tema:
  --primaryColor --secondaryColor --terciaryColor
  --primaryTextColor --secondaryTextColor
  --primaryTextFont --secondaryTextFont
  Não é preciso alterar o PHP: os seletores usam as classes que os templates já têm.
*/

main.principal{
    background: var(--secondaryColor);
    color: var(--primaryTextColor);
    font-family: var(--secondaryTextFont), sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

/* ==========================================================================
   page.php — políticas, termos... (título + texto, listas e links)
   ========================================================================== */

main.principal > section.container{
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
}
main.principal > section.container > .row{
    padding-top: 64px !important;
    padding-bottom: 88px !important;
}
main.principal > section.container > .row > h1{
    font-family: var(--primaryTextFont), sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.15;
    letter-spacing: normal;
    text-transform: none;
    color: var(--primaryColor);
    max-width: 860px;
    margin-top: 0;
    margin-bottom: 40px !important;
}

main.principal .content.content--start{
    max-width: 860px;
    color: var(--primaryTextColor);
    text-align: left;
}
main.principal .content.content--start > *{ margin-top: 0; margin-bottom: 0; }
main.principal .content.content--start > * + *{ margin-top: 20px; }

main.principal .content.content--start h2,
main.principal .content.content--start h3,
main.principal .content.content--start h4{
    font-family: var(--primaryTextFont), sans-serif;
    color: var(--primaryColor);
    line-height: 1.15;
    letter-spacing: normal;
    text-transform: none;
}
main.principal .content.content--start h2{
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
    margin-top: 48px;
}
main.principal .content.content--start h3{ font-weight: 700; font-size: 22px; margin-top: 36px; }
main.principal .content.content--start h4{ font-weight: 700; font-size: 18px; margin-top: 28px; }
main.principal .content.content--start > h2:first-child,
main.principal .content.content--start > h3:first-child{ margin-top: 0; }

main.principal .content.content--start ul,
main.principal .content.content--start ol{ padding-left: 1.25em; }
main.principal .content.content--start li + li{ margin-top: 8px; }
main.principal .content.content--start ul li::marker,
main.principal .content.content--start ol li::marker{ color: var(--primaryColor); }

main.principal .content.content--start a{
    color: var(--primaryColor);
    text-decoration: underline;
    text-decoration-color: var(--terciaryColor);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease, color .2s ease;
}
main.principal .content.content--start a:hover{ text-decoration-color: var(--primaryColor); }

main.principal .content.content--start strong{ font-weight: 700; }
main.principal .content.content--start blockquote{
    margin-left: 0;
    padding-left: 20px;
    border-left: 4px solid var(--terciaryColor);
}
main.principal .content.content--start hr{
    border: 0;
    border-top: 1px solid var(--primaryColor);
    opacity: 1;
}
main.principal .content.content--start img{ max-width: 100%; height: auto; }

/* ==========================================================================
   404.php
   ========================================================================== */

main.principal #notfound{
    position: static;
    height: auto;
    min-height: 0;
    background: transparent;
    padding: 0;
    display: block;
}
main.principal #notfound .notfound,
main.principal #notfound .notfound-404{
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    height: auto;
    line-height: 1.6;
}
main.principal #notfound .notfound::before,
main.principal #notfound .notfound::after,
main.principal #notfound .notfound-404::before,
main.principal #notfound .notfound-404::after{ content: none; }

main.principal #notfound .notfound{
    max-width: 1240px;
    margin: 0 auto;
    padding: 96px 24px 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    text-align: left;
}
main.principal #notfound .notfound-404{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

main.principal #notfound .notfound-404 h1,
main.principal #notfound .notfound-404 h2{
    position: static;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    font-family: var(--primaryTextFont), sans-serif;
    color: var(--primaryColor);
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.15;
}
main.principal #notfound .notfound-404 h1{ font-weight: 800; font-size: clamp(36px, 5vw, 56px); }
main.principal #notfound .notfound-404 h2{ font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); }

main.principal #notfound .btns{
    display: inline-block;
    font-family: var(--primaryTextFont), sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    padding: 16px 32px;
    min-height: 44px;
    border-radius: 999px;
    border: 2px solid var(--primaryColor);
    background: var(--primaryColor);
    color: var(--secondaryTextColor);
    text-align: center;
    box-shadow: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
main.principal #notfound .btns:hover,
main.principal #notfound .btns:focus-visible{
    background: var(--secondaryColor);
    color: var(--primaryColor);
}
main.principal #notfound :focus-visible{
    outline: 3px solid var(--terciaryColor);
    outline-offset: 3px;
}

@media (hover: hover){
    main.principal #notfound .btns:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px color-mix(in srgb, var(--primaryColor) 22%, transparent); }
}

/* ---- Responsivo ---- */
main.principal .content.content--start{ overflow-wrap: break-word; }
main.principal .content.content--start iframe,
main.principal .content.content--start video{ max-width: 100%; }
main.principal .content.content--start table{ display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 991.98px){
    main.principal > section.container > .row{ padding-top: 48px !important; padding-bottom: 64px !important; }
    main.principal #notfound .notfound{ padding: 72px 24px 96px; }
}
@media (max-width: 640px){
    main.principal > section.container > .row{ padding-top: 40px !important; padding-bottom: 56px !important; }
    main.principal > section.container > .row > h1{ margin-bottom: 28px !important; }
    main.principal #notfound .notfound{ padding: 56px 24px 72px; }
}
@media (max-width: 480px){
    main.principal > section.container{ padding-left: 20px; padding-right: 20px; }
}