/*
Theme Name:    Sabará Child
Theme URI:     https://site.sabara.mg.gov.br/
Description:   Tema personalizado da Prefeitura Municipal de Sabará, baseado em Astra.
Author:        Prefeitura Municipal de Sabará
Author URI:    https://site.sabara.mg.gov.br/
Template:      astra
Version:       0.3.29
Text Domain:   sabara
*/

/* ==========================================================================
   Design tokens
   Brand palette sampled from the homepage mockup + the official wordmark logo.
   Adjust hex values here; everything else in the theme references the vars.
   ========================================================================== */

:root {
    /* Brand */
    --sabara-primary:       #1d62a8;  /* Logo "Sabará" wordmark, links, primary buttons */
    --sabara-primary-dark:  #13355e;  /* Headings, search underline */
    --sabara-primary-light: #e8f0fa;  /* Card backgrounds, soft surfaces */
    --sabara-chrome:        #395D8F;  /* Header/nav strip + footer + mobile-menu background.
                                         Astra settings can't read CSS vars, so the SAME hex
                                         also lives in hbb-header-bg-obj-responsive and
                                         header-mobile-popup-bg-obj-responsive (site-config.php)
                                         — keep them in sync. */
    --sabara-gold:          #c4962c;  /* Footer section heading underlines, contact icons */

    /* Neutrals */
    --sabara-text:          #2a2a2a;
    --sabara-text-muted:    #6b7280;
    --sabara-surface:       #f5f6f8;  /* Page background between sections */
    --sabara-border:        #e2e6eb;

    /* Layout */
    --sabara-container:     1200px;
    --sabara-radius:        6px;
    --sabara-shadow-card:   0 2px 4px rgba(19, 53, 94, 0.06);
}

/* ==========================================================================
   Typography — brand fonts
   Momo Trust Display (loaded from Google Fonts) replaces the default sans for
   all display headings. Onest replaces the system UI stack for body copy.
   These overrides come before all other rules so they're easy to find and
   override per-component if needed.
   ========================================================================== */

body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button {
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5,
.entry-title,
.page-title,
.ast-page-title,
.site-title,
.sabara-fancy-title,
.sabara-template__header .entry-title {
    font-family: 'Momo Trust Display', Georgia, 'Times New Roman', serif !important;
    font-weight: 400 !important;
}

/* Default-template pages (WPBakery layout): the entry-header is empty so
   there is no spacing between the nav and the first content section.
   This padding-top restores that breathing room.
   Custom templates (sabara-template.*) use their own margin and don't
   have an .entry-content wrapper, so this rule doesn't affect them. */
body.page .entry-content {
    padding-top: 40px;
}

@media (max-width: 640px) {
    body.page .entry-content {
        padding-top: 24px;
    }
}


/* ==========================================================================
   Sections of this file are appended as the design is implemented:
     - Header (top toolbar + main header with logo/nav/search)
     - Footer (mega-footer)
     - Homepage sections (hero, quick-access grid, news cards, banners, CTAs)
     - WPBakery row/column overrides
     - Page templates (secretarias, legislacoes, decretos, editais, etc.)
   ========================================================================== */


/* ==========================================================================
   3c.1 — Above Header
   Currently empty per the desktop mockup — collapse it if Astra still
   renders an empty container.
   ========================================================================== */

.ast-above-header-wrap:empty,
.ast-above-header-bar:not(:has(.ast-builder-layout-element)) {
    display: none !important;
}


/* ==========================================================================
   3c.2 — Primary Header (white row: logo on the left, search on the right)
   ========================================================================== */

.ast-primary-header-bar,
.site-header .main-header-bar {
    background-color: #ffffff;
    padding: 12px 0;
}

/* Logo sizing — the source is 800×800, scale to a sensible header height */
.site-header .custom-logo-link img {
    max-height: 64px;
    width: auto;
}

/* ── Header search — underline style ──────────────────────────────────────
   Astra's slide-search renders TWO elements:
     1. .search-form     — input + submit button (hidden by default:
                           visibility:hidden; opacity:0; position:absolute)
     2. .ast-search-icon — a trigger div that toggles the form via JS

   We invert this: always show the form, hide the trigger.

   Specificity notes:
     Astra hidden state:  .ast-search-menu-icon.slide-search .search-form  (0,3,0)
     Astra border rule:   .ast-desktop .ast-header-search .slide-search .search-form (0,4,0)
   Our stylesheet loads after Astra's, so equal-specificity rules here win;
   the (0,4,0) selector below beats the border rule.
   ─────────────────────────────────────────────────────────────────────── */

/* 1. Hide the slide trigger — the form is permanently visible */
.ast-search-menu-icon.slide-search .ast-search-icon {
    display: none;
}

/* 2. Un-hide the form (override slide-search defaults) */
.ast-search-menu-icon.slide-search .search-form {
    visibility: visible;
    opacity: 1;
    position: relative;
    top: auto;
    right: auto;
    transform: none;
}

/* 3. Appearance — (0,4,0) beats Astra's .ast-desktop .ast-header-search rule.
   background !important also beats .main-header-bar .ast-search-menu-icon .search-form
   which is in Astra's inline <style> and sets background-color:#ffffff at (0,3,0). */
.ast-header-search .ast-search-menu-icon.slide-search .search-form {
    background: transparent !important;
    border: none;
    border-bottom: 1.5px solid var(--sabara-primary-dark);
    border-radius: 0;
    padding: 4px 0 8px;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: none;
}

.ast-search-menu-icon .search-form:focus-within {
    border-bottom-color: var(--sabara-primary);
    transition: border-color .15s ease;
}

/* The <label> wraps BOTH the <input> AND the submit <button> — make it a
   flex row so input and icon sit side-by-side on the same baseline. */
.ast-search-menu-icon .search-form label {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* Input — class rule (0,4,0) + ID override (0,1,0,0) to ensure transparent
   background regardless of Astra's inline-style specificity battles.
   -webkit-appearance:none strips the browser's native searchfield chrome. */
.ast-header-search .ast-search-menu-icon.slide-search .search-field {
    background: transparent !important;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--sabara-primary-dark);
    font-size: 15px;
    padding: 0;
    line-height: 1.4;
}

/* ID-level override — beats every class rule without needing !important */
#search-field {
    background: transparent !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}

.ast-search-menu-icon .search-field::placeholder {
    color: var(--sabara-primary-dark);
    opacity: 0.75;
}

/* Submit button — icon only, flush with the underline.
   Astra's global button rule sets background-color:#1d62a8 and padding:15px 30px
   on every <button>. Force both transparent + zero padding with !important. */
.ast-search-menu-icon .search-submit.ast-search-submit {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0;
    box-shadow: none !important;
    line-height: 1;
    cursor: pointer;
    color: var(--sabara-primary-dark);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ast-search-menu-icon .search-submit.ast-search-submit svg {
    fill: var(--sabara-primary-dark);
    width: 18px;
    height: 18px;
    display: block;
}


/* ==========================================================================
   3c.3 — Below Header (the blue navigation strip)
   This is where the primary menu now lives — full-width blue background,
   white menu items with chevrons indicating dropdowns.
   ========================================================================== */

.ast-below-header,
.ast-below-header-bar,
.ast-below-header-wrap {
    background-color: var(--sabara-primary);
}

.ast-below-header .ast-builder-menu-1 ul.main-header-menu,
.ast-below-header-bar .ast-builder-menu-1 ul.main-header-menu {
    /* Spread the items evenly */
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

/* Top-level items only — `>` direct-child combinators so the rule does
   NOT cascade into mega-menu submenu items inside .astra-full-megamenu. */
.ast-below-header-bar .ast-builder-menu-1 ul.main-header-menu > li.menu-item > a,
.ast-below-header .ast-builder-menu-1 ul.main-header-menu > li.menu-item > a {
    color: #ffffff !important;
    font-weight: 500;
    font-size: 14.5px;
    letter-spacing: 0.01em;
    padding: 14px 18px;
    line-height: 1.2;
    text-indent: 0;
    white-space: nowrap;
    display: inline-block;
}

.ast-below-header-bar .ast-builder-menu-1 ul.main-header-menu > li.menu-item > a:hover,
.ast-below-header-bar .ast-builder-menu-1 ul.main-header-menu > li.menu-item.current-menu-item > a,
.ast-below-header .ast-builder-menu-1 ul.main-header-menu > li.menu-item > a:hover,
.ast-below-header .ast-builder-menu-1 ul.main-header-menu > li.menu-item.current-menu-item > a {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}

/* Chevron on top-level items with dropdowns */
.ast-below-header-bar .ast-builder-menu-1 ul.main-header-menu > li.menu-item-has-children > a::after,
.ast-below-header-bar .ast-builder-menu-1 ul.main-header-menu > li.menu-item-has-children .ast-header-navigation-arrow {
    color: rgba(255, 255, 255, 0.85);
}


/* ==========================================================================
   3c.4 — Standard dropdown panels (sub-menus from the below-header nav)
   These are Astra's regular .sub-menu dropdowns, not the full-width
   mega-menu panels. White background, dark text, brand hover.
   ========================================================================== */

.ast-below-header .main-header-menu .sub-menu,
.ast-below-header-bar .main-header-menu .sub-menu {
    background-color: #ffffff;
    border-top: 3px solid var(--sabara-primary);
    box-shadow: 0 8px 24px rgba(19, 53, 94, 0.12);
    min-width: 220px;
}

.ast-below-header .main-header-menu .sub-menu li,
.ast-below-header-bar .main-header-menu .sub-menu li {
    border-bottom: 1px solid var(--sabara-primary-light) !important;
}

.ast-below-header .main-header-menu .sub-menu li:last-child,
.ast-below-header-bar .main-header-menu .sub-menu li:last-child {
    border-bottom: none !important;
}

.ast-below-header .main-header-menu .sub-menu li a,
.ast-below-header-bar .main-header-menu .sub-menu li a {
    color: var(--sabara-text) !important;
    font-size: 14px;
    padding: 9px 18px;
    display: block;
}

.ast-below-header .main-header-menu .sub-menu li a:hover,
.ast-below-header-bar .main-header-menu .sub-menu li a:hover {
    color: var(--sabara-primary) !important;
    background-color: var(--sabara-primary-light);
}

/* ==========================================================================
   3c.5 — Mega menu (Astra Pro full-width dropdown panels)
   Drops from the Below Header strip; panel is white with dark text.
   The rendered classes are `astra-full-megamenu-wrapper` and
   `astra-full-megamenu` (NOT `astra-megamenu` — that was for a different
   layout mode we don't use).
   ========================================================================== */

.astra-full-megamenu-wrapper,
.astra-full-megamenu {
    background-color: #ffffff;
    border-top: 3px solid var(--sabara-primary-dark);
    box-shadow: 0 8px 24px rgba(19, 53, 94, 0.12);
}

/* All <a> tags inside the mega-menu panel — explicit dark color so they
   override any inherited white from the parent menu-link styling. */
.astra-full-megamenu a,
.astra-full-megamenu-wrapper a,
.astra-full-megamenu .menu-link,
.astra-full-megamenu-wrapper .menu-link {
    color: var(--sabara-text) !important;
}

.astra-full-megamenu .menu-item > a,
.astra-full-megamenu-wrapper .menu-item > a {
    padding: 8px 12px;
    display: block;
}

.astra-full-megamenu .menu-item > a:hover,
.astra-full-megamenu-wrapper .menu-item > a:hover {
    color: var(--sabara-primary) !important;
    background-color: var(--sabara-primary-light);
}

/* Mega-menu column titles (if any submenu has a heading) */
.astra-full-megamenu .megamenu-heading,
.astra-full-megamenu-wrapper .megamenu-heading,
.astra-full-megamenu .sub-menu > li > a {
    color: var(--sabara-primary-dark) !important;
}


/* ==========================================================================
   3c.6 — Mobile popup (the blue off-canvas panel from the mobile mockup)
   ========================================================================== */

.ast-mobile-popup-drawer .ast-mobile-popup-inner,
#ast-mobile-popup-content,
.ast-mobile-header-content {
    background-color: var(--sabara-chrome) !important;   /* #395D8F — same as footer + header */
    color: #ffffff;
}

.ast-mobile-popup-drawer .menu-item > a,
.ast-mobile-popup-drawer .ast-builder-menu .menu-item > a {
    color: #ffffff;
    font-weight: 500;
    padding: 14px 8px;                 /* no divider lines between items (matches mockup) */
}

.ast-mobile-popup-drawer .menu-item > a:hover,
.ast-mobile-popup-drawer .menu-item > a:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Chevron indicators in the mobile menu */
.ast-mobile-popup-drawer .ast-header-navigation-arrow,
.ast-mobile-popup-drawer .menu-item-has-children > a::after {
    color: rgba(255, 255, 255, 0.85);
}

/* ── Force the menu list onto the blue panel with white text ──
   Astra's customizer paints the mobile menu with the global LIGHT palette
   (--ast-global-color-4 = #fff background, --ast-global-color-3 = #334155 text,
   plus hover / current-item states). Those selectors are high-specificity, so
   we override them with the popup prefix + !important — otherwise the list
   renders as a white block with dark links sitting over the blue panel. */

/* Transparent backgrounds → the footer-blue inner shows through */
.ast-mobile-popup-drawer .ast-builder-menu-mobile .main-header-menu,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .main-header-menu .menu-link,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .main-header-menu .sub-menu,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-item,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-item.current-menu-item > .menu-link {
    background-color: transparent !important;
}

/* White text for links + expand toggles / chevrons, in every state */
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-link,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .ast-menu-toggle,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .dropdown-menu-toggle,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .ast-header-navigation-arrow,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-item.current-menu-item > .menu-link,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-item.current-menu-item > .ast-menu-toggle {
    color: #ffffff !important;
}

/* Interactive + current states — keep the row/toggle on the blue panel so the
   white arrow stays visible. Astra paints hover AND the current page / ancestor
   (auto-expanded) with --ast-global-color-5 (#F0F5FA light blue), which makes
   the white arrow almost invisible. We swap that for a subtle white wash. */
.ast-mobile-popup-drawer .ast-builder-menu-mobile .ast-menu-toggle {
    background-color: transparent !important;   /* the toggle is a <button>; no default fill */
}

.ast-mobile-popup-drawer .ast-builder-menu-mobile .ast-menu-toggle:hover,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .ast-menu-toggle:focus,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .ast-menu-toggle:active,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-link:hover,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-item:hover > .menu-link,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-item:hover > .ast-menu-toggle,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-item.current-menu-item > .menu-link,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-item.current-menu-item > .ast-menu-toggle,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-item.current-menu-ancestor > .menu-link,
.ast-mobile-popup-drawer .ast-builder-menu-mobile .menu-item.current-menu-ancestor > .ast-menu-toggle {
    background-color: rgba(255, 255, 255, 0.12) !important;   /* subtle wash — arrow stays visible */
    color: #ffffff !important;
}

/* Search field in the popup — a SINGLE translucent "ghost" pill. The FORM is
   the pill (rounded, outlined, translucent) and the input inside is fully
   transparent. This overrides Astra's default squared white form box
   (border: 1px solid; border-radius: 2px) so there's no square outline around
   the rounded field. */
.ast-mobile-popup-drawer .ast-search-menu-icon .search-form {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
}

.ast-mobile-popup-drawer .ast-search-menu-icon .search-form:focus-within {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: #ffffff;
}

.ast-mobile-popup-drawer .ast-search-menu-icon .search-field {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: #ffffff;
}

.ast-mobile-popup-drawer .ast-search-menu-icon .search-field::placeholder {
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
}

/* Search submit — white magnifier, transparent button inside the pill */
.ast-mobile-popup-drawer .ast-search-menu-icon .search-submit,
.ast-mobile-popup-drawer .ast-search-menu-icon .search-submit svg,
.ast-mobile-popup-drawer .ast-search-menu-icon .astra-search-icon {
    background: transparent;
    color: #ffffff;
    fill: #ffffff;
}

/* Close (X) button — white. Astra's `.active` rule forces color:#3a3a3a (dark
   gray), so we override it with .active + !important. The close icon SVG is
   fill:currentColor, so white color carries to it (we also set fill to be safe). */
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-drawer.active .menu-toggle-close {
    color: #ffffff !important;
}
.ast-mobile-popup-drawer .menu-toggle-close svg {
    fill: #ffffff !important;
}

/* ── Social icons strip, pinned to the bottom of the panel ──
   Injected by sabara_render_mobile_popup_social() as the last child of
   .ast-mobile-popup-content. The popup inner is already a flex column, so
   growing the content + margin-top:auto on the strip pushes it to the bottom. */
.ast-mobile-popup-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ast-mobile-popup-content .sabara-mobile-social {
    margin-top: auto;                        /* pin to the bottom of the panel */
    padding: 16px 20px;
    background-color: #cdd8e8;               /* light blue-gray strip (tweak to taste) */
}

.sabara-mobile-social__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.sabara-mobile-social__list a {
    display: inline-flex;
    color: var(--sabara-primary);            /* dark-blue glyphs on the light strip */
}

.sabara-mobile-social__list svg {
    width: 22px;
    height: 22px;
}


/* ==========================================================================
   3d — Mega-footer (v2)
   Desktop : 4-col grid — [contact | nav1 | nav2 | nav3]   (all dark blue)
   Mobile  : nav accordion (dark blue) stacked above contact strip (light bg)
   ========================================================================== */

/* ── Shared base ── */
.sabara-mega-footer {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 48px;
}

.sabara-mega-footer__inner {
    max-width: var(--sabara-container);
    margin: 0 auto;
}

/* ── Main section ── */
.sabara-mega-footer__main {
    background-color: var(--sabara-chrome);   /* #395D8F — shared header / footer / menu blue */
    color: #ffffff;
}

.sabara-mega-footer__main a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color .15s ease;
}
.sabara-mega-footer__main a:hover,
.sabara-mega-footer__main a:focus {
    color: #ffffff;
    text-decoration: underline;
}

/* ── Desktop 4-column layout ── */
@media (min-width: 960px) {
    .sabara-mega-footer__layout {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 0;
        padding: 48px 24px 40px;
        align-items: start;
    }

    /* Contact occupies column 1 */
    .sabara-mega-footer__contact {
        padding-right: 40px;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Nav cols wrapper occupies column 2 */
    .sabara-mega-footer__nav-cols {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        padding-left: 40px;
    }
}

/* ── Mobile stacked layout ── */
@media (max-width: 959px) {
    .sabara-mega-footer__layout {
        display: flex;
        flex-direction: column;
    }

    /* Nav accordion comes first */
    .sabara-mega-footer__nav-cols {
        order: 1;
    }

    /* Contact comes second, with light background */
    .sabara-mega-footer__contact {
        order: 2;
        background-color: var(--sabara-surface);
        color: var(--sabara-text);
        padding: 32px 24px 28px;
    }

    .sabara-mega-footer__main a {
        /* reset white inside contact on mobile */
    }

    .sabara-mega-footer__contact a {
        color: var(--sabara-primary);
    }
    .sabara-mega-footer__contact a:hover {
        color: var(--sabara-primary-dark);
    }
}

/* ── Contact column ── */
.sabara-mega-footer__contact-heading {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 20px;
    color: inherit;
}

@media (max-width: 959px) {
    .sabara-mega-footer__contact-heading {
        color: var(--sabara-primary-dark);
    }
}

.sabara-mega-footer__contact-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sabara-mega-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
}

/* Gold contact icons */
.sabara-footer-icon {
    color: var(--sabara-gold);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Social icons ── */
.sabara-mega-footer__social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}

.sabara-mega-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #ffffff;                              /* white icons on the blue footer (was gold) */
    background-color: rgba(255, 255, 255, 0.14);
    transition: background-color .15s ease, transform .15s ease;
    text-decoration: none !important;
}

.sabara-mega-footer__social a:hover {
    background-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    transform: translateY(-2px);
}

@media (max-width: 959px) {
    /* The mobile contact block sits on a light surface, so keep its icons
       gold/dark — white-on-white would be invisible. */
    .sabara-mega-footer__contact .sabara-mega-footer__social a {
        color: var(--sabara-gold);
        background-color: rgba(196, 150, 44, 0.12);
    }
    .sabara-mega-footer__contact .sabara-mega-footer__social a:hover {
        background-color: var(--sabara-gold);
        color: #ffffff;
    }
}

/* ── Nav accordion groups ── */

/* Each <details> = one section group (e.g. "Sabará", "Prefeitura") */
.sabara-footer-group {
    /* Mobile: full-width block with border separator */
}

/* Section heading (<summary>) */
.sabara-footer-group__title {
    list-style: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #ffffff;
    cursor: default;
    user-select: none;
}

/* Remove browser default disclosure triangle */
.sabara-footer-group__title::-webkit-details-marker,
.sabara-footer-group__title::marker {
    display: none;
    content: '';
}

/* ── Desktop: headings with gold underline, no accordion ── */
@media (min-width: 960px) {
    .sabara-footer-group {
        margin-bottom: 28px;
    }

    .sabara-footer-group__title {
        padding: 0 0 8px;
        margin-bottom: 12px;
        border-bottom: 2px solid var(--sabara-gold);
        pointer-events: none; /* prevent collapse on desktop */
    }
}

/* ── Mobile: accordion panels ── */
@media (max-width: 959px) {
    .sabara-footer-group {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sabara-footer-group__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 24px;
        cursor: pointer;
        font-size: 14px;
    }

    /* Chevron indicator */
    .sabara-footer-group__title::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 2px solid rgba(255, 255, 255, 0.7);
        border-bottom: 2px solid rgba(255, 255, 255, 0.7);
        transform: rotate(45deg);
        transition: transform .2s ease;
        flex-shrink: 0;
    }

    .sabara-footer-group[open] > .sabara-footer-group__title::after {
        transform: rotate(-135deg);
    }

    /* Links indented to match the heading's 24px left edge */
    .sabara-footer-group__item a {
        padding: 10px 24px;
    }
}

/* ── Nav link list — base (no padding; media queries own it) ── */
.sabara-footer-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sabara-footer-group__item {
    margin: 0;                                         /* reset any browser/Astra list margin */
    border-bottom: none;                               /* no divider lines between links */
}

.sabara-footer-group__item a {
    display: block;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    /* padding set per breakpoint below to avoid cascade conflicts */
}

/* Desktop link padding */
@media (min-width: 960px) {
    .sabara-footer-group__item a {
        padding: 7px 0;
    }
    .sabara-footer-group__item a:hover {
        color: #ffffff;
        padding-left: 4px;
        transition: padding-left .15s ease;
    }
}

/* Mobile link padding — matches heading's 24px left */
@media (max-width: 959px) {
    .sabara-footer-group__item a {
        padding: 10px 24px;
    }
}

/* ── Copyright bar ── */
/* White strip beneath the blue footer, with blue text (the same brand blue
   used for the footer background above). */
.sabara-mega-footer__copyright-bar {
    background-color: #ffffff;
}

.sabara-mega-footer__copyright-bar .sabara-mega-footer__inner {
    padding: 14px 24px;
    text-align: center;
}

.sabara-mega-footer__copyright-bar p {
    margin: 0;
    color: var(--sabara-chrome);   /* blue text = the footer background color */
    font-size: 12.5px;
}

.sabara-mega-footer__copyright-bar a {
    color: var(--sabara-chrome);
    text-decoration: none;
}

.sabara-mega-footer__copyright-bar a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   3e — Homepage body sections
   The homepage content is built with WPBakery rows + the Acesso Rápido
   "expandgrid" cards. Each block below styles ONE section of the design.
   Section order matches the mockup top-to-bottom.
   ========================================================================== */


/* ==========================================================================
   3e.0 — Common: section heading (from [mk_fancy_title] → .sabara-fancy-title)
   ========================================================================== */

.sabara-fancy-title {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--sabara-primary-dark);
    margin: 0;
    display: inline-block;
    /* border-bottom removed — the ::after accent bar below (h1.sabara-fancy-title::after)
       is the only decorative line. Using border-bottom here created a second
       full-width line in addition to the short thick bar. */
}

/* Editors sometimes leave nested headings inside; flatten them. */
.sabara-fancy-title h1,
.sabara-fancy-title h2,
.sabara-fancy-title h3,
.sabara-fancy-title h4,
.sabara-fancy-title h5,
.sabara-fancy-title h6 {
    font-size: inherit;
    color: inherit;
    margin: 0;
    line-height: inherit;
    font-weight: inherit;
    display: inline;
}


/* ==========================================================================
   3e.0b — Homepage section rhythm: one consistent vertical gap between every
   top-level content section (hero, Acesso Rápido, Eventos, banners, CTAs,
   Página de Notícias). We set margin-top/bottom only — never the shorthand —
   so the full-bleed sections keep their calc(50% − 50vw) left/right breakout.
   ========================================================================== */
body.home .wpb-content-wrapper > .vc_section,
body.home .wpb-content-wrapper > .section-homepage-ctas {
    margin-top: 0 !important;
    margin-bottom: 56px !important;
}


/* ==========================================================================
   3e.1 — Hero: full-bleed, full-viewport-width slider
   ========================================================================== */
/*
 * The slides in `banner_principal` were AUTHORED at full viewport width in
 * RevSlider — every layer's X/Y position assumes a ~1920 px canvas. An
 * earlier strategy boxed the slider at the 1200 px content width, which
 * cropped that full-width composition: text/image layers positioned in the
 * right half of the canvas spilled past the box and got clipped. There is
 * no CSS fix for that — RevSlider writes layer positions as inline styles,
 * and the only clean alternatives were re-authoring every slide at 1200 px
 * (and forcing every future editor to do the same) or letting the slider be
 * what it was built to be: full-bleed. We chose full-bleed.
 *
 * Strategy (pure CSS, independent of WPBakery's unreliable full-width JS):
 *
 *  - `.hero-parent` (the WPBakery section) breaks out to 100 vw via the
 *    standard calc(50% − 50vw) negative-margin trick.
 *  - `.hero-slider-row` fills that full-bleed parent (no max-width box), so
 *    the slider spans the whole viewport and every layer lands where it was
 *    authored. RevSlider scales the canvas to the viewport, so the full
 *    composition shows at any width — the behaviour that already looked
 *    correct on tablet now applies on desktop too.
 *  - `.hero-background-pattern` (decorative row) also breaks out to 100 vw.
 *  - RevSlider's internal wrappers are pinned to 100% of the full-bleed row,
 *    overriding the width its own breakout JS would otherwise impose.
 *
 * `body { overflow-x: hidden }` (below) catches the ~scrollbar-gutter
 * overhang on systems with a vertical scrollbar.
 *
 * To go back to a boxed slider: restore `max-width: var(--sabara-container)`
 * on `.hero-slider-row` — but then existing slides need their layers
 * repositioned for the narrower canvas, one slide at a time, in RevSlider.
 */

/* Section breakout — full viewport width regardless of WPBakery JS state */
.hero-parent {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;  /* clip any RevSlider overflow */
}

/* Slider row fills the full-bleed section — no content-width box, so the
   slider spans the viewport and full-width-authored layers land correctly. */
.hero-slider-row {
    max-width: none !important;
    width: 100%;
}

/* No column gutters in the hero — slider fills its column flush */
.hero-slider-row > .wpb_column,
.hero-slider-row .vc_column_container,
.hero-slider-row .vc_column-inner,
.hero-slider-row .wpb_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* RevSlider fills the full-bleed row — pin to 100% so its own breakout JS
   (which sets explicit pixel widths/offsets on these wrappers) can't fight us */
.hero-slider-row rs-fullwidth-wrap,
.hero-slider-row rs-module-wrap,
.hero-slider-row rs-module {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
}

/* Decorative pattern strip below the slider (grafismo3.png) — hidden to match
   Figma, which has the hero meet the page background directly. The row still
   lives in the WPBakery page content (no DB change); we just take it out of
   the layout. (`display:none` also drops the row's inline 48px padding-bottom;
   the Acesso Rápido section's own top margin now sets the gap below the hero.) */
.hero-background-pattern {
    display: none !important;
}

/* ── RevSlider navigation arrows → circular white buttons (Figma style) ──── */
.tp-leftarrow.tparrows,
.tp-rightarrow.tparrows {
    width: 52px !important;
    height: 52px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.20);
    transition: background 0.2s ease, box-shadow 0.2s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tp-leftarrow.tparrows:hover,
.tp-rightarrow.tparrows:hover {
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.26);
}

/* Arrow icon — targets the ::before pseudo-element used by most skins */
.tp-leftarrow.tparrows::before,
.tp-rightarrow.tparrows::before {
    color: var(--sabara-primary-dark) !important;
    font-size: 18px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    top: auto !important;
    left: auto !important;
    position: static !important;
    transform: none !important;
}

/* Prevent body horizontal-scroll caused by full-width breakouts */
body { overflow-x: hidden; }


/* ==========================================================================
   3e.2 — Acesso Rápido (Figma: 8-card service grid)
   Rendered by sabara_render_quick_access() (inc/homepage.php), which overrides
   the live [cq_vc_expandgrid] on the front page in code — no DB change. The old
   .expandgrid-* rules are gone with the expand-grid they styled.
   ========================================================================== */

.sabara-quickaccess__subtitle {
    margin: 0 0 22px;
    color: #5b6b7d;
    font-size: 16px;
    line-height: 1.4;
}

.sabara-quickaccess {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0 0 48px;
}

@media (max-width: 960px) {
    .sabara-quickaccess { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .sabara-quickaccess { grid-template-columns: 1fr; }
}

.sabara-quickaccess__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 22px 24px;
    background: #fff;
    border: 1px solid #e6ecf3;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(19, 53, 94, 0.04);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.sabara-quickaccess__card:hover {
    transform: translateY(-3px);
    border-color: #cfdcec;
    box-shadow: 0 10px 24px rgba(19, 53, 94, 0.12);
}

.sabara-quickaccess__icon {
    color: var(--sabara-primary);
    line-height: 0;
}
.sabara-quickaccess__icon svg {
    width: 30px;
    height: 30px;
    display: block;
}

.sabara-quickaccess__title {
    color: var(--sabara-primary-dark);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.25;
}

.sabara-quickaccess__desc {
    color: #66788c;
    font-size: 13.5px;
    line-height: 1.45;
}

/* Homepage section headings match Figma: plain navy + gray subheading, no
   accent bar. (The h1 accent rule doesn't reach these h3s today, but keep this
   defensive so the look can't regress.) */
body.home .sabara-fancy-title::after { content: none; }


/* ==========================================================================
   3e.3 — Últimas Notícias grid (vc_basic_grid)
   Left column: featured + 9-item news grid.
   Right column: stacked banner images.
   ========================================================================== */

.vc_basic_grid,
.vc_grid-container {
    margin: 16px 0 32px;
}

.vc_grid-container .vc_grid-item {
    border-radius: var(--sabara-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--sabara-shadow-card);
    transition: transform .15s ease, box-shadow .15s ease;
}

.vc_grid-container .vc_grid-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(19, 53, 94, 0.16);
}

.vc_grid-container .vc_grid-item .vc_gitem_row {
    background: #fff;
}

/* Title color in news cards */
.vc_grid-container .vc_gitem-post-data-source-post_title a {
    color: var(--sabara-primary-dark);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}

.vc_grid-container .vc_gitem-post-data-source-post_title a:hover {
    color: var(--sabara-primary);
}

/* Excerpts */
.vc_grid-container .vc_gitem-post-data-source-post_excerpt {
    color: var(--sabara-text-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================================================
   3e.3b — Eventos e Notícias news cards (vc_basic_grid)
   Shared by the homepage Eventos section (.section-homepage-noticias-eventos)
   AND the /noticias archive page (.section-noticias) — both use the same grid
   markup, so :is(...) applies one set of card styles to both for consistency.
   (Both el_classes are set in WPBakery.)
   ========================================================================== */

/* Heading + gray subheading — match the Acesso Rápido treatment. Both are
   vc_custom_heading carrying an inline font-family, so !important is required
   (overrides the "Abril Fatface" the heading element shipped with). */
:is(.section-homepage-noticias-eventos, .section-noticias) h2.vc_custom_heading {
    font-family: 'Momo Trust Display', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    color: var(--sabara-primary-dark) !important;
    text-align: left !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
}
:is(.section-homepage-noticias-eventos, .section-noticias) h3.vc_custom_heading {
    font-family: 'Onest', -apple-system, sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: #5b6b7d !important;
    text-align: left !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

/* Figma's homepage news has no category-filter bar. Scope to body.home, NOT
   the section wrapper: WPBakery's grid JS re-renders the filter and can move
   it out of the section in the live DOM, where a section-scoped selector stops
   matching and the generic §3f.7 `display:flex !important` wins. body.home
   catches it anywhere on the front page; the editais/publicações filter (its
   own page, not body.home) is left fully styled. */
body.home .vc_grid-filter,
body.home .vc_grid-filter-select {
    display: none !important;
}

/* Flat posts (image + title, no card, no white background) — squared corners.
   3-per-row comes from vc_col-sm-4. */
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_grid-container .vc_grid-item,
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_grid-item-mini {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_grid-container .vc_grid-item {
    margin-bottom: 30px;
}
/* Kill the white background the generic grid card paints behind the title */
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_gitem-zone-c,
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_gitem-zone-mini,
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_gitem_row {
    background: transparent !important;
}
/* squared image */
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_gitem-zone-a {
    border-radius: 0;
}
/* Drop the gold (#ffc400) accent strip between image and title — not in Figma */
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_gitem-zone-b {
    display: none !important;
}
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_gitem-zone-c {
    padding: 12px 0 0;
}
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_gitem-post-data-source-post_title h4 {
    margin: 0;
}
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_gitem-post-data-source-post_title h4 a {
    color: var(--sabara-primary-dark) !important;
    font-family: 'Onest', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}
:is(.section-homepage-noticias-eventos, .section-noticias) .vc_gitem-post-data-source-post_title h4 a:hover {
    color: var(--sabara-primary) !important;
}


/* ==========================================================================
   3e.3c — Banners band (homepage, restructured to full-width 3-across)
   Scoped to .section-homepage-banners (el_class set in WPBakery). Full-bleed
   light-gray band; the inner row stays centered at the content width.
   ========================================================================== */

.section-homepage-banners {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: #eef2f6 !important;
    padding: 36px 0 40px !important;
}
/* 3 equal banners in a flex row — robust against the vc_row-fluid negative
   margins that were dropping the third tile once the tiles got tall. */
.section-homepage-banners > .vc_row {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 24px;
    max-width: var(--sabara-container);
    margin: 0 auto !important;
    padding: 0 16px;
}
.section-homepage-banners > .vc_row > .wpb_column {
    flex: 1 1 0;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}
.section-homepage-banners .vc_column-inner,
.section-homepage-banners .wpb_wrapper,
.section-homepage-banners .wpb_single_image,
.section-homepage-banners .vc_figure {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}
/* Square tiles, squared (sharp) corners */
.section-homepage-banners .vc_single_image-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 0 !important;
    display: block;
}
.section-homepage-banners .vc_single_image-wrapper {
    display: block;
    border: 0 !important;
    border-radius: 0 !important;
}
/* The in-section separator line isn't in Figma */
.section-homepage-banners .vc_separator {
    display: none !important;
}
/* Stack the banners on small screens */
@media (max-width: 600px) {
    .section-homepage-banners > .vc_row { flex-wrap: wrap; }
    .section-homepage-banners > .vc_row > .wpb_column { flex: 1 1 100%; }
}


/* ==========================================================================
   3e.3e — Homepage CTAs (Carta de Serviços / Editais / Empreendedor) — Figma
   New structure: each box is a .section-homepage-ctas_box COLUMN holding a
   Single Image (uploaded icon PNG) above a vc_cta3 (label only). We paint the
   box on the column's wrapper, center its contents, size the icon, and strip
   the vc_cta3 / button chrome down to a plain uppercase navy label.
   ========================================================================== */

/* Robust 3-up flex row */
.section-homepage-ctas {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 24px;
    margin: 8px 0 36px !important;
}

/* Each column IS the box */
.section-homepage-ctas_box {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}
.section-homepage-ctas_box > .vc_column-inner {
    height: 100%;
    padding: 0 !important;
}
/* The gray box wraps icon + label — the direct wrapper, not the nested figure */
.section-homepage-ctas_box > .vc_column-inner > .wpb_wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background-color: #e5e9ef;
    border-radius: 0 0 20px 0;   /* only the bottom-right corner is rounded */
    padding: 36px 20px;
    min-height: 210px;           /* taller -> more square proportions */
}

/* Icon image */
.section-homepage-ctas_box .wpb_single_image,
.section-homepage-ctas_box .vc_figure {
    margin: 0 !important;
}
.section-homepage-ctas_box .vc_single_image-wrapper {
    border: 0 !important;
    border-radius: 0 !important;
}
.section-homepage-ctas_box .vc_single_image-img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
    border-radius: 0 !important;
}

/* Label — strip the vc_cta3 / button chrome to a plain uppercase navy label */
.section-homepage-ctas_box .vc_cta3-container,
.section-homepage-ctas_box .vc_cta3,
.section-homepage-ctas_box .vc_cta3_content-container,
.section-homepage-ctas_box .vc_cta3-content,
.section-homepage-ctas_box .vc_cta3-actions,
.section-homepage-ctas_box .vc_btn3-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}
.section-homepage-ctas_box .vc_cta3-content-header {
    display: none !important;
}
.section-homepage-ctas_box .vc_btn3 {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--sabara-primary-dark) !important;
    font-family: 'Onest', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-transform: uppercase !important;
    text-align: center;
    text-decoration: none !important;
}
.section-homepage-ctas_box .vc_btn3:hover {
    background: transparent !important;
    color: var(--sabara-primary) !important;
    text-decoration: none !important;
}

/* Stack on mobile */
@media (max-width: 640px) {
    .section-homepage-ctas { flex-wrap: wrap; }
    .section-homepage-ctas_box { flex: 1 1 100%; }
}


/* ==========================================================================
   3e.3f — "Ver Mais" button (homepage news) — Figma
   Scoped to .button_ver-mais (el_class on the vc_btn3 container). Navy button,
   white uppercase label + arrow, same 0 0 20px 0 corner as the CTA boxes.
   ========================================================================== */
.button_ver-mais {
    margin: 6px 0 0 !important;
}
.button_ver-mais .vc_btn3 {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    background-color: #395d8f !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 0 20px 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: 'Onest', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 13px 30px !important;
    transition: background-color .15s ease;
}
.button_ver-mais .vc_btn3:hover {
    background-color: #2d4a72 !important;   /* darker shade of #395d8f for hover */
    color: #fff !important;
}
/* Force the (modern-style) arrow icon to sit static + visible next to the text */
.button_ver-mais .vc_btn3-icon {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    color: #fff !important;
    font-size: 14px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
}


/* ==========================================================================
   3e.4 — Side banner ads (single image stack on the right of news grid)
   ========================================================================== */

.wpb_single_image {
    margin-bottom: 8px;
}

.wpb_single_image img,
.wpb_single_image .vc_single_image-wrapper {
    border-radius: var(--sabara-radius);
    overflow: hidden;
    display: block;
}

.wpb_single_image img {
    width: 100%;
    height: auto;
    transition: transform .15s ease;
}

.wpb_single_image a:hover img {
    transform: scale(1.02);
}


/* ==========================================================================
   3e.5 — Three CTA service cards (Carta de Serviços / Editais / Empreendedor)
   Each is a [vc_cta] with btn_color="white" and a custom background. Reset
   the inline styles where they fight the design and impose consistent shape.
   ========================================================================== */

.vc_cta.vc_general {
    border-radius: var(--sabara-radius);
    padding: 28px 20px;
    margin: 8px 0;
    text-align: center;
    box-shadow: var(--sabara-shadow-card);
    border: 0;
}

.vc_cta .vc_cta-content {
    padding: 0;
}

.vc_cta .vc_cta-headline {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 14px;
}

.vc_cta .vc_general.vc_btn3 {
    background-color: #ffffff !important;
    color: var(--sabara-primary-dark) !important;
    border: 0;
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color .15s ease, color .15s ease;
}

.vc_cta .vc_general.vc_btn3:hover,
.vc_cta .vc_general.vc_btn3:focus {
    background-color: var(--sabara-primary-light) !important;
    color: var(--sabara-primary) !important;
}


/* ==========================================================================
   3e.6 — Newsletter / "Acompanhe todas as notícias" strip
   Last section: gray-blue full-width with centered CTA. Tighten typography.
   ========================================================================== */

.vc_section[class*="background-color"] .vc_cta {
    background: transparent !important;
    box-shadow: none;
}

/* This particular vc_cta has a red `custom_background` inline — neutralize
   it so the parent gray section reads as the band. */
.vc_section[style*="background-color"] > .vc_row .vc_cta.vc_general[style*="background-color"] {
    background: transparent !important;
}


/* ==========================================================================
   3e.7 — Global page background + section rhythm
   ========================================================================== */

body.home,
body.page-template-default {
    background-color: var(--sabara-surface);
}

.entry-content > .vc_section,
.entry-content > .vc_row {
    margin-left: auto;
    margin-right: auto;
}

/* Astra by default wraps content in .ast-container; let WPBakery's
   full-width rows escape the constraint. */
.vc_row[data-vc-stretch-content="true"],
.vc_row.vc_row-fluid[data-vc-full-width="true"] {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Vertical rhythm between sections */
.entry-content > .vc_section + .vc_section,
.entry-content > .vc_row + .vc_row {
    margin-top: 32px;
}


/* ==========================================================================
   3f — Custom page templates (Secretarias, Legislações, Decretos, Concursos,
   Leis, PCA, CCA, Espetáculos, Suspensão, Editais, Lei Aldir Blanc).
   Body renderers live in inc/templates.php; this block styles their output.

   `.sabara-template`           → CPT-driven templates (with page title at top)
   `.sabara-template--content`  → post_content templates (no template-level title)
   ========================================================================== */

/* Defensive block layout — overrides any third-party flex/grid that might
   try to pull the header alongside the body (e.g. from Astra Pro custom
   layouts or stale WPBakery row CSS). */
.sabara-template,
.sabara-template__header,
.sabara-template__body {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    float: none;
    clear: both;
}

.sabara-template {
    max-width: var(--sabara-container) !important;
    margin: 32px auto 64px !important;
    padding: 48px 32px 56px;
    background: #ffffff;
    border-radius: var(--sabara-radius);
    box-shadow: var(--sabara-shadow-card);
}

/* Content-driven templates (editais, aldirblanc) have no chrome — the
   WPBakery content paints its own. Strip the card so the body breathes. */
.sabara-template--content {
    background: transparent;
    box-shadow: none;
    padding: 24px 0;
    border-radius: 0;
}

/* Make the WPBakery `<h1>` in content-driven templates look exactly like
   the .sabara-template__header .entry-title (the secretarias style the
   user signed off on) — same size/weight/color + the short accent bar
   below. This covers BOTH:
     • Editais page (WPBakery `[mk_fancy_title]` → `<h1 class="sabara-fancy-title">`)
     • PUBLICAÇÕES page (WPBakery `[vc_column_text]<h1>...</h1>`)
   The `!important`s neutralize .sabara-fancy-title's full underline border
   so the short accent bar wins. */
.sabara-template--content h1,
.sabara-template--content h1.sabara-fancy-title {
    color: var(--sabara-primary-dark) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 36px !important;
    padding: 0 !important;
    border: 0 !important;
    text-transform: none !important;   /* defensive — keep DB casing */
    display: block !important;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Underline accent on every page-level h1: covers WPBakery mk_fancy_title
   titles (h1.sabara-fancy-title) regardless of which template wraps them,
   as well as the template-chrome h1 below. */
h1.sabara-fancy-title::after,
.sabara-template--content h1::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    background: var(--sabara-primary);
    margin-top: 14px;
    border-radius: 2px;
}

/* Also force the CPT-driven template title to keep its original DB casing
   in case any inherited rule tries to uppercase it. */
.sabara-template__header .entry-title {
    text-transform: none !important;
}

/* Page title — clean, modern, with a short accent bar below */
.sabara-template__header {
    margin: 0 0 36px !important;
    padding: 0;
    border: 0;
}

.sabara-template__header .entry-title {
    margin: 0;
    padding: 0;
    color: var(--sabara-primary-dark);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    /* Belt-and-suspenders against any inherited word-spacing/break that
       might wrap a 3-word title onto 3 lines. */
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    overflow-wrap: break-word;
}

.sabara-template__header .entry-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    background: var(--sabara-primary);
    margin-top: 14px;
    border-radius: 2px;
}

.sabara-template__body > * + * {
    margin-top: 24px;
}


/* ==========================================================================
   3f.1 — Secretarias directory (contact-card list)
   ========================================================================== */

.sabara-directory {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 20px;
}

.sabara-directory__item {
    padding: 20px 24px;
    background: var(--sabara-primary-light);
    border-radius: var(--sabara-radius);
    border-left: 4px solid var(--sabara-primary);
}

.sabara-directory__title {
    margin: 0 0 8px;
    color: var(--sabara-primary-dark);
    font-size: 18px;
    font-weight: 600;
}

.sabara-directory__title a {
    color: inherit;
    text-decoration: none;
}

.sabara-directory__title a:hover {
    color: var(--sabara-primary);
    text-decoration: underline;
}

.sabara-directory__desc {
    margin: 0 0 12px;
    color: var(--sabara-text);
    font-size: 14px;
    line-height: 1.5;
}

.sabara-directory__meta {
    margin: 0;
    display: grid;
    gap: 4px 16px;
    grid-template-columns: minmax(120px, max-content) 1fr;
}

.sabara-directory__row {
    display: contents;
}

.sabara-directory__row dt {
    color: var(--sabara-primary-dark);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sabara-directory__row dd {
    margin: 0;
    color: var(--sabara-text);
    font-size: 14px;
}

.sabara-directory__row dd a {
    color: var(--sabara-primary);
    text-decoration: none;
}

.sabara-directory__row dd a:hover {
    text-decoration: underline;
}

@media (max-width: 540px) {
    .sabara-directory__meta {
        grid-template-columns: 1fr;
    }
    .sabara-directory__row dt {
        margin-top: 8px;
    }
}


/* ==========================================================================
   3f.2 — Documents listing (legislações, decretos, concursos, leis, pca, cca)
   ========================================================================== */

.sabara-documents {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 20px;
}

.sabara-documents__item {
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--sabara-border);
    border-radius: var(--sabara-radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sabara-documents__item:hover {
    border-color: var(--sabara-primary);
    box-shadow: var(--sabara-shadow-card);
}

.sabara-documents__title {
    margin: 0 0 4px;
    color: var(--sabara-primary-dark);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.sabara-documents__date {
    margin: 0 0 12px;
    color: var(--sabara-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.sabara-documents__desc {
    margin: 0 0 12px;
    color: var(--sabara-text);
    font-size: 14px;
    line-height: 1.55;
}

.sabara-documents__files {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sabara-documents__files a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sabara-primary);
    text-decoration: none;
    font-size: 14px;
    padding: 6px 0;
}

.sabara-documents__files a:hover {
    text-decoration: underline;
    color: var(--sabara-primary-dark);
}

.sabara-documents__file-icon {
    font-size: 16px;
}


/* ==========================================================================
   3f.3 — Empty state + pagination (shared)
   ========================================================================== */

.sabara-empty-state {
    padding: 48px 20px;
    text-align: center;
    color: var(--sabara-text-muted);
    background: var(--sabara-surface);
    border-radius: var(--sabara-radius);
}

.sabara-pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.sabara-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 6px;
}

.sabara-pagination a,
.sabara-pagination span {
    display: inline-block;
    min-width: 36px;
    padding: 8px 12px;
    background: #fff;
    color: var(--sabara-primary);
    border: 1px solid var(--sabara-border);
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    transition: background-color .15s ease, color .15s ease;
}

.sabara-pagination a:hover {
    background-color: var(--sabara-primary-light);
}

.sabara-pagination span.current {
    background-color: var(--sabara-primary);
    color: #fff;
    border-color: var(--sabara-primary);
}


/* ==========================================================================
   3f.4 — Jupiter legacy text-block: "Faça o Download" callout
   `.chamada_download` is the small heading above the file list. Used to be
   styled by Jupiter; without that styling it collapses onto the row below.
   Keep it minimal — just a clear typographic separator.
   ========================================================================== */

.chamada_download,
.wpb_text_column.chamada_download {
    position: static !important;
    margin: 18px 0 8px !important;
    padding: 0;
    color: var(--sabara-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    background: transparent;
    border: 0;
    clear: both;
}

.chamada_download p,
.wpb_text_column.chamada_download p {
    margin: 0;
}

.chamada_download * {
    position: static !important;
    float: none !important;
}


/* ==========================================================================
   3f.4b — Editais / Publicações grid card content (vc_basic_grid items)
   The AJAX-loaded cards apply italic/underline to almost everything inside
   when a filter is active (legacy WPBakery + Jupiter styling). Strip those
   defaults; let real links carry their own styling via 3f.5.
   ========================================================================== */

.vc_grid-container .vc_grid-item,
.vc_grid-container .vc_grid-item * {
    font-style: normal !important;
    text-decoration: none !important;
}

/* Grid card title — force dark brand color regardless of WPBakery's own
   per-instance dynamic CSS or inline style attribute. AJAX-loaded card
   markup sometimes carries a bright-blue color from `vc_custom_heading`
   defaults, so we have to over-specify the selector chain + !important
   on every variant of the title element WPBakery emits. */
.vc_grid-container .vc_grid-item .vc_gitem-post-data-source-post_title,
.vc_grid-container .vc_grid-item .vc_gitem-post-data-source-post_title *,
.vc_grid-container .vc_grid-item .vc_custom_heading,
.vc_grid-container .vc_grid-item .vc_custom_heading *,
.vc_grid-container .vc_grid-item h1,
.vc_grid-container .vc_grid-item h2,
.vc_grid-container .vc_grid-item h3,
.vc_grid-container .vc_grid-item h4,
.vc_grid-container .vc_grid-item h5,
.vc_grid-container .vc_grid-item h6,
.vc_grid-container .vc_grid-item h1 a,
.vc_grid-container .vc_grid-item h2 a,
.vc_grid-container .vc_grid-item h3 a,
.vc_grid-container .vc_grid-item h4 a,
.vc_grid-container .vc_grid-item h5 a,
.vc_grid-container .vc_grid-item h6 a {
    color: var(--sabara-primary-dark) !important;
    font-weight: 700;
    margin: 0 0 8px;
}

/* Apply the same dark color even when the markup is from an AJAX response
   that doesn't sit inside .vc_grid-container (some WPBakery responses wrap
   items in a different parent). */
.vc_gitem-post-data-source-post_title,
.vc_gitem-post-data-source-post_title h1,
.vc_gitem-post-data-source-post_title h2,
.vc_gitem-post-data-source-post_title h3,
.vc_gitem-post-data-source-post_title h4,
.vc_gitem-post-data-source-post_title h5,
.vc_gitem-post-data-source-post_title h6,
.vc_gitem-post-data-source-post_title a {
    color: var(--sabara-primary-dark) !important;
}

.vc_grid-container .vc_gitem-acf .vc_gitem-acf-label {
    color: var(--sabara-text);
    font-weight: 600;
    margin-right: 4px;
}

.vc_grid-container .vc_gitem-acf {
    color: var(--sabara-text);
    font-size: 14px;
    line-height: 1.5;
    margin: 4px 0;
}


/* ==========================================================================
   3f.5 — ACF field-picker repeater (file list under each editais card)
   Original markup is two columns per row:
     col 1: <div>file title from ACF nome_do_arquivo</div>
     col 2: <div><a href="...file.pdf">file-slug</a></div>
   `assets/js/grid-doc-links.js` collapses each row into a single anchor:
     <div class="vc-acf-field-picker-repeater-row sabara-doc-row">
       <a class="sabara-doc-link" href="...file.pdf">Title text</a>
     </div>
   ========================================================================== */

.vc-acf-field-picker-field,
.vc-acf-field-picker-field-type-repeater {
    display: block;
    clear: both;
    width: 100%;
    margin: 0;
}

.vc-acf-field-picker-repeater {
    display: block;
    margin: 0;
    padding: 0;
}

/* ── After JS merge: each row is a single download link ───────────────── */
.vc-acf-field-picker-repeater-row.sabara-doc-row {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--sabara-border);
    background: transparent;
}

.vc-acf-field-picker-repeater-row.sabara-doc-row:first-child {
    border-top: 1px solid var(--sabara-border);
}

.sabara-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: var(--sabara-primary) !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
    transition: color .15s ease;
}

.sabara-doc-link::before {
    content: '⬇';
    font-size: 12px;
    opacity: 0.7;
    flex-shrink: 0;
}

.sabara-doc-link:hover,
.sabara-doc-link:focus-visible {
    color: var(--sabara-primary-dark) !important;
    text-decoration: underline !important;
}

/* ── Pre-JS fallback (rows not yet merged) — keep them readable in case
   the JS hasn't run yet (very brief flash on first render) ────────────── */
.vc-acf-field-picker-repeater-row:not(.sabara-doc-row) {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--sabara-border);
}

.vc-acf-field-picker-repeater-row:not(.sabara-doc-row) .vc-acf-field-picker-repeater-column {
    float: none !important;
    width: 100% !important;
    display: block;
}

.vc-acf-field-picker-repeater-row:not(.sabara-doc-row) .vc-acf-field-picker-repeater-column a {
    color: var(--sabara-primary) !important;
    text-decoration: none !important;
}


/* ==========================================================================
   3f.6 — WPBakery vc_basic_grid filter pills (vc_grid-filter-item)
   The filter sits above a grid (Editais, PUBLICAÇÕES) and lets the user
   narrow by taxonomy. Default markup is a bare <ul> with <li><span>label</span></li>;
   the span has a `data-vc-grid-filter-value` attribute that WPBakery's JS
   wires to a click handler.

   DECISION: pills are hidden by default — Editais/PUBLICAÇÕES have ~41
   categories which look like a wall of tags. The dropdown (block 3f.7)
   is used instead. Pill styling below stays in place in case a future
   page with fewer categories wants to re-enable them by removing the
   `display: none` rule.

   Accessibility / UX requirements (still applied to the styled pills
   when enabled):
   - Touch target ≥ 36 px tall (close to the 44 px ideal, with 8 px gap)
   - 4.5:1 contrast in every state (WCAG AA for text)
   - Visible :hover, :focus-visible, and active states all distinct
   - 2 px focus ring at 2 px offset (works on light bg)
   - Smooth but not slow transitions (150 ms)
   - cursor:pointer and user-select:none for the click affordance
   - Wraps to multiple rows on narrow viewports (flex-wrap)
   ========================================================================== */

/* Hide the pill list — too many categories for visual scannability.
   Remove this rule to re-enable pills on a page with fewer filter items.
   When re-enabling, the pill styling below kicks back in automatically. */
.vc_basic_grid ul.vc_grid-filter,
.vc_grid-container ul.vc_grid-filter {
    display: none !important;
}

ul.vc_grid-filter {
    list-style: none;
    margin: 16px 0 28px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.vc_grid-filter-item {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.vc_grid-filter-item > span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 16px;
    background-color: #ffffff;
    border: 1px solid var(--sabara-border);
    border-radius: 999px;
    color: var(--sabara-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.vc_grid-filter-item > span:hover {
    background-color: var(--sabara-primary-light);
    border-color: var(--sabara-primary);
    color: var(--sabara-primary-dark);
}

.vc_grid-filter-item > span:focus-visible {
    outline: 2px solid var(--sabara-primary);
    outline-offset: 2px;
}

.vc_grid-filter-item.vc_active > span,
.vc_grid-filter-item > span.vc_active {
    background-color: var(--sabara-primary);
    border-color: var(--sabara-primary);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(19, 53, 94, 0.18);
}

.vc_grid-filter-item.vc_active > span:hover,
.vc_grid-filter-item > span.vc_active:hover {
    background-color: var(--sabara-primary-dark);
    border-color: var(--sabara-primary-dark);
    color: #ffffff;
}

/* Subtle press feedback */
.vc_grid-filter-item > span:active {
    transform: translateY(1px);
}


/* ==========================================================================
   3f.7 — vc_grid-filter-select (the dropdown filter)
   With pills hidden (3f.6), the dropdown is the only filter UI. Promoted
   from "tiny widget" to a proper "Filter Bar" — full-width brand-blue band
   with a leading magnifying-glass icon, a clear label ("Selecione a
   categoria:") and the dropdown on the right. Matches the visual weight
   the original Jupiter site had for the same control, in a more modern
   corporate execution.

   Layout:
     [magnifier icon  Selecione a categoria:]     [white dropdown ▾]      (desktop)
     ────────────────────────────────────────────────────────────────
     [icon  Selecione a categoria:]                                       (mobile,
     [white dropdown ▾  full-width]                                       stacked)

   Accessibility:
   - The ::before label is decorative; the <select>'s own option text
     provides screen-reader context ("Combo box, Tudo, …")
   - Dropdown has a visible :focus-visible ring (white outline on the
     blue band — ≥ 3:1 contrast against background)
   - Touch target ≥ 44 px (padding 12 × line-height 20 px + chevron)
   ========================================================================== */

.vc_grid-filter-select {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 28px 0 36px !important;
    padding: 22px 28px;
    background-color: var(--sabara-primary);
    border-radius: var(--sabara-radius);
    box-shadow: 0 4px 12px rgba(19, 53, 94, 0.15);
    visibility: visible !important;
}

/* Magnifier icon + label — decorative, painted into the band */
.vc_grid-filter-select::before {
    content: "Selecione a categoria:";
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    padding-left: 30px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 22px 22px;
    min-height: 28px;
    line-height: 28px;
    white-space: nowrap;
}

/* Dropdown wrapper — solid white pill on the brand-blue band */
.vc_grid-styled-select {
    display: inline-block;
    position: relative;
    background-color: #ffffff;
    border: 0;
    border-radius: 4px;
    min-width: 320px;
    max-width: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
    transition: box-shadow .15s ease, transform .15s ease;
}

.vc_grid-styled-select:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

.vc_grid-styled-select:focus-within {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 2px 6px rgba(0, 0, 0, 0.16);
}

.vc_grid-styled-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 0;
    padding: 12px 44px 12px 18px;
    color: var(--sabara-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    width: 100%;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2313355e'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
}

.vc_grid-styled-select select:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Mobile: stack vertically — label centered above, dropdown full-width below */
@media (max-width: 640px) {
    .vc_grid-filter-select {
        padding: 18px 16px;
    }
    .vc_grid-filter-select::before {
        flex: 1 1 100%;
        justify-content: center;
    }
    .vc_grid-styled-select {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }
}


/* ==========================================================================
   3g — Jupiter legacy mk_audio + mk_toggle shims
   Styles for the shortcode stubs defined in inc/shortcodes.php.
   The shims emit semantic HTML (native <audio>, <details>/<summary>)
   and these rules brand them consistently with the rest of the theme.
   ========================================================================== */

/* ── mk_audio ──────────────────────────────────────────────────────────── */

/* Outer container — background-color is set inline by the shortcode
   (e.g. player_background="#ffc400"). */
.sabara-audio-player {
    border-radius: var(--sabara-radius);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

/* Native <audio> stretched full-width */
.sabara-audio__element {
    display: block;
    width: 100%;
    height: 40px;
}

/* Author / attribution line below the controls */
.sabara-audio__author {
    margin: 0;
    font-size: 13px;
    font-style: italic;
    color: rgba(0, 0, 0, 0.60);
}


/* ── mk_toggle ─────────────────────────────────────────────────────────── */

.sabara-toggle {
    border: 1px solid var(--sabara-border);
    border-radius: var(--sabara-radius);
    margin: 12px 0;
    overflow: hidden;
}

/* "fancy" variant — slightly more prominent header */
.sabara-toggle--fancy .sabara-toggle__title {
    background: var(--sabara-primary-light);
}

.sabara-toggle__title {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sabara-primary);
    cursor: pointer;
    user-select: none;
    background: var(--sabara-surface);
}

/* Hide the default browser triangle */
.sabara-toggle__title::-webkit-details-marker { display: none; }
.sabara-toggle__title::marker { display: none; }

/* Custom chevron — rotates when open */
.sabara-toggle__title::before {
    content: "▶";
    font-size: 10px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.sabara-toggle[open] > .sabara-toggle__title::before {
    transform: rotate(90deg);
}

.sabara-toggle__body {
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--sabara-text);
}

/* Many toggle bodies contain per-line <strong> wrappers (e.g. hymn lyrics).
   Promote them to block so each line renders on its own row. */
.sabara-toggle__body > strong,
.sabara-toggle__body p > strong {
    display: block;
}


/* ==========================================================================
   3h — Jupiter legacy mk_image, mk_custom_box, mk_gallery,
         mk_table, mk_button shims
   ========================================================================== */

/* ── mk_image ──────────────────────────────────────────────────────────── */

.sabara-mk-image {
    margin: 0 0 16px;
    display: block;
    line-height: 0;            /* collapse inline gap below <img> */
}

.sabara-mk-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--sabara-radius);
}

.sabara-mk-image--shadow_only img {
    box-shadow: 0 4px 16px rgba(19, 53, 94, 0.18);
}


/* ── mk_custom_box ─────────────────────────────────────────────────────── */
/* Padding, margin, min-height and optional border-left are set inline by the
   shortcode. These rules add the shared visual chrome. */

.sabara-custom-box {
    padding-left:   20px;
    padding-right:  20px;
    border-radius:  var(--sabara-radius);
    background:     #ffffff;
}

@media (max-width: 640px) {
    .sabara-custom-box {
        padding-left:  12px;
        padding-right: 12px;
    }
}


/* ── mk_gallery ────────────────────────────────────────────────────────── */

.sabara-gallery {
    margin: 24px 0;
}

.sabara-gallery__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--sabara-primary-dark);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sabara-gold);
}

.sabara-gallery__grid {
    display: grid;
    grid-template-columns: repeat(var(--sabara-gallery-cols, 4), 1fr);
    gap: 6px;
}

.sabara-gallery__item {
    display: block;
    overflow: hidden;
    border-radius: 4px;
}

.sabara-gallery__item img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.sabara-gallery__item:hover img,
.sabara-gallery__item:focus img {
    transform: scale(1.04);
}

/* Responsive: collapse columns for narrow viewports */
@media (max-width: 960px) {
    .sabara-gallery__grid {
        grid-template-columns: repeat(min(var(--sabara-gallery-cols, 4), 4), 1fr);
    }
}

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

@media (max-width: 360px) {
    .sabara-gallery__grid {
        grid-template-columns: 1fr;
    }
}


/* ── mk_table ──────────────────────────────────────────────────────────── */

.sabara-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0 24px;
    border-radius: var(--sabara-radius);
    border: 1px solid var(--sabara-border);
}

.sabara-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sabara-text);
    background: #ffffff;
}

.sabara-table-wrap caption,
.sabara-table-wrap .sabara-table__caption {
    caption-side: top;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: var(--sabara-primary-dark);
    padding: 14px 16px 10px;
    border-bottom: 2px solid var(--sabara-gold);
}

.sabara-table-wrap thead th {
    background: var(--sabara-primary);
    color: #ffffff;
    font-weight: 600;
    padding: 10px 16px;
    text-align: left;
    white-space: nowrap;
}

.sabara-table-wrap tbody tr:nth-child(even) td {
    background: var(--sabara-primary-light);
}

.sabara-table-wrap tbody td {
    padding: 9px 16px;
    border-bottom: 1px solid var(--sabara-border);
    vertical-align: top;
}

.sabara-table-wrap tbody tr:last-child td {
    border-bottom: 0;
}


/* ── mk_button ─────────────────────────────────────────────────────────── */

.sabara-mk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: var(--sabara-radius);
    background-color: var(--sabara-primary);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    cursor: pointer;
    transition:
        background-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
    box-shadow: 0 2px 6px rgba(19, 53, 94, 0.20);
    margin: 8px 0;
}

.sabara-mk-button:hover,
.sabara-mk-button:focus-visible {
    background-color: var(--sabara-primary-dark);
    box-shadow: 0 4px 10px rgba(19, 53, 94, 0.28);
    transform: translateY(-1px);
    color: #ffffff !important;
}

.sabara-mk-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(19, 53, 94, 0.20);
}

/* Size variants */
.sabara-mk-button--small  { padding: 7px 16px;  font-size: 13px; }
.sabara-mk-button--medium { padding: 10px 24px; font-size: 14px; }
.sabara-mk-button--large  { padding: 13px 32px; font-size: 16px; }


/* ==========================================================================
   4 — Accessibility: visible keyboard focus (WCAG 2.4.7 Focus Visible)
   Astra only ships a faint `outline: thin dotted` on :focus (and even drops it
   on :hover), and the custom homepage components (Acesso Rápido cards, CTA
   boxes, Ver Mais, banner links, news cards — all <a>/.vc_btn3) had no focus
   style at all, so tabbing was nearly invisible. We add one clear ring with
   :focus-visible (keyboard-only — no ring on mouse click). Navy reads well on
   the light content; on the blue nav / mobile menu / footer (white-on-blue) we
   switch to warm gold, where navy would disappear.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.vc_btn3:focus-visible {
    outline: 3px solid var(--sabara-primary-dark) !important;
    outline-offset: 2px !important;
}

/* White-on-blue surfaces — switch the ring to gold so it stays visible */
.ast-below-header :focus-visible,
.ast-mobile-popup-drawer :focus-visible,
.sabara-mega-footer :focus-visible {
    outline-color: #ffd24a !important;
}


/* ==========================================================================
   5 — Classic-editor content pages: breathing room between section headings
   Pages like /sabara/movimente-se/ and /sabara/onde-ficar/ are pasted HTML —
   a stack of <h2>/<h3>/<h4> section headings with almost no top margin, so the
   sections run together. We add vertical rhythm.

   Scope = headings inside a WPBakery Text Block (.wpb_text_column). That's the
   robust key: it catches both plain headings AND word-processor "western"-class
   headings (LibreOffice/Word paste artifact), while grid-card titles and
   standalone vc_custom_heading elements — which are NOT in a text block — are
   left alone. We still exclude .sabara-fancy-title (the page title) and skip
   body.home. Slug/ID-independent → works on any environment.
   ========================================================================== */
body:not(.home) .wpb_text_column h2:not(.sabara-fancy-title) {
    margin-top: 48px;
    margin-bottom: 12px;
}
body:not(.home) .wpb_text_column h3:not(.sabara-fancy-title) {
    margin-top: 32px;
    margin-bottom: 8px;
}
body:not(.home) .wpb_text_column h4:not(.sabara-fancy-title) {
    margin-top: 22px;
    margin-bottom: 6px;
}