/* ==========================================================================
   TICKET — Cabeçalho e Rodapé
   ========================================================================== */

.ticket-header,
.ticket-footer {
    --ticket-color-hover: var(--ticket-color-blue-hover, #03426d);
    --ticket-color-accent-hover: var(--ticket-color-red-hover, #c11f1e);
    --ticket-component-white: var(--ticket-color-white, #fff);
    font-family: var(--ticket-font-family, inherit);
}

.ticket-header *,
.ticket-header *::before,
.ticket-header *::after,
.ticket-footer *,
.ticket-footer *::before,
.ticket-footer *::after {
    box-sizing: border-box;
}

.ticket-header a,
.ticket-footer a {
    text-decoration: none;
}

.ticket-icon {
    display: block;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.ticket-header {
    background: #fff;
    position: relative;
    z-index: 100;
}

/* Topbar ------------------------------------------------------------------ */
.ticket-header__topbar-inner {
    max-width: var(--ticket-content-width, 1400px);
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.ticket-header__logo {
    display: block;
    flex: 0 0 auto;
    color: var(--ticket-color-primary);
}

.ticket-header__logo img,
.ticket-header__logo svg {
    display: block;
    height: 64px;
    width: auto;
    max-width: 100%;
}

/* Nota mostrada apenas a administradores quando falta atribuir o menu. */
.ticket-menu-notice {
    margin: 0;
    padding: 14px 32px;
    font-size: 13px;
    color: #fff;
    opacity: .85;
}

.ticket-menu-notice a {
    color: inherit;
    text-decoration: underline;
}

.ticket-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Pesquisa: barra que se expande para a esquerda da lupa -------------------- */
.ticket-header__search {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ticket-header__search-form {
    margin: 0;
    /* A barra cresce da direita para a esquerda: largura 0 -> largura final. */
    width: 0;
    overflow: hidden;
    transition: width .3s ease;
}

.ticket-header.is-search-open .ticket-header__search-form {
    width: 260px;
}

.ticket-header__search-field {
    width: 100%;
    margin: 0;
    padding: 9px 14px;
    border: 1px solid #cdd6e0;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    line-height: 1.2;
    color: var(--ticket-color-primary);
    outline: none;
}

.ticket-header__search-field:focus {
    border-color: var(--ticket-color-hover);
    box-shadow: 0 0 0 2px rgba(0, 81, 137, .15);
}

.ticket-header__search-toggle {
    background: none;
    border: 0;
    padding: 8px;
    color: var(--ticket-color-primary);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 50%;
    transition: color .15s ease, background-color .15s ease;
}

.ticket-header__search-toggle:hover,
.ticket-header__search-toggle:focus-visible,
.ticket-header.is-search-open .ticket-header__search-toggle {
    color: var(--ticket-color-hover);
    background: rgba(0, 81, 137, .08);
}

.ticket-header__buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ticket-header__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.ticket-header__btn--ghost {
    background: var(--ticket-color-light);
    color: var(--ticket-color-primary);
}

.ticket-header__btn--ghost:hover,
.ticket-header__btn--ghost:focus-visible {
    background: #d9e2ec;
}

.ticket-header__btn--cta,
.ticket-header__btn--cta:visited {
    background: var(--ticket-color-accent);
    color: var(--ticket-component-white) !important;
}

.ticket-header__btn--cta:hover,
.ticket-header__btn--cta:focus-visible,
.ticket-header__btn--cta:active {
    background: var(--ticket-color-accent-hover);
    color: var(--ticket-component-white) !important;
}

.ticket-header__menu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    margin-left: auto;
    color: var(--ticket-color-primary);
    cursor: pointer;
}

.ticket-header__menu-toggle .ticket-icon--close {
    display: none;
}

.ticket-header.is-menu-open .ticket-header__menu-toggle .ticket-icon--menu {
    display: none;
}

.ticket-header.is-menu-open .ticket-header__menu-toggle .ticket-icon--close {
    display: block;
}

/* Barra de navegação -------------------------------------------------------- */
.ticket-header__nav {
    background: var(--ticket-color-primary);
    /* Contexto de posicionamento do mega-menu, que ocupa a largura toda. */
    position: relative;
}

.ticket-header__menu {
    margin: 0 auto;
    padding: 0 32px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

}

.ticket-header__menu-item {
    position: static;
}

.ticket-header__menu-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 18px;
    color: var(--ticket-component-white) !important;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.ticket-header__menu-link .ticket-icon {
    width: 14px;
    height: 14px;
}

.ticket-header__menu-item:hover > .ticket-header__menu-link,
.ticket-header__menu-item.ticket-hf-hover > .ticket-header__menu-link,
.ticket-header__menu-item.current-menu-item > .ticket-header__menu-link,
.ticket-header__menu-item.current_page_item > .ticket-header__menu-link {
    background: rgba(255, 255, 255, .08);
    border-bottom-color: var(--ticket-color-accent);
    color: var(--ticket-component-white) !important;
}

.ticket-header__menu-link:hover,
.ticket-header__menu-link:focus-visible,
.ticket-header__menu-link:active,
.ticket-header__menu-link:visited {
    color: var(--ticket-component-white) !important;
}

/* Mega-menu ------------------------------------------------------------------ */
.ticket-header__megamenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #eef2f7;
    box-shadow: 0 18px 32px rgba(8, 30, 60, .18);
    padding: 40px 0;
    z-index: 10;
}

.ticket-header__menu-item:hover > .ticket-header__megamenu,
.ticket-header__menu-item.ticket-hf-hover > .ticket-header__megamenu {
    display: block;
}

.ticket-header__megamenu-list {
    list-style: none;
    max-width: var(--ticket-content-width, 1400px);
    margin: 0 auto;
    padding: 0 32px;
    column-count: 3;
    column-gap: 40px;
}

.ticket-header__megamenu-item {
    break-inside: avoid;
    /* O respiro entre entradas vive sobretudo no padding do link, para que
       a área clicável (e o fundo do hover) cubra a entrada toda. */
    margin-bottom: 6px;
}

.ticket-header__megamenu-link {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    color: var(--ticket-color-primary);
    padding: 14px 16px;
    border-radius: 8px;
    transition: background-color .15s ease;
}

/* O tema aplica a sua própria cor aos links em hover: fixamos o azul para
   que o texto não mude de cor ao passar por cima. */
.ticket-header__megamenu-link:hover,
.ticket-header__megamenu-link:focus-visible {
    background: #fff;
    color: var(--ticket-color-primary);
}

.ticket-header__megamenu-link:hover .ticket-header__megamenu-text,
.ticket-header__megamenu-link:focus-visible .ticket-header__megamenu-text,
.ticket-header__megamenu-link:hover .ticket-header__megamenu-title,
.ticket-header__megamenu-link:focus-visible .ticket-header__megamenu-title,
.ticket-header__megamenu-link:hover .ticket-header__megamenu-desc,
.ticket-header__megamenu-link:focus-visible .ticket-header__megamenu-desc {
    color: var(--ticket-color-primary);
}

.ticket-header__megamenu-icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ticket-color-primary);
}

.ticket-header__megamenu-icon .ticket-icon {
    width: 46px;
    height: 46px;
}

/* Ícone escolhido na multimédia (Aparência → Menus). */
.ticket-header__megamenu-icon .ticket-icon--image {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.ticket-header__megamenu-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ticket-header__megamenu-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.ticket-header__megamenu-desc {
    font-size: 14px;
    line-height: 1.45;
    max-width: 34ch;
    opacity: .85;
}

/* Responsivo (header) -------------------------------------------------------- */
@media (max-width: 992px) {
    .ticket-header__topbar-inner {
        padding: 14px 20px;
        flex-wrap: wrap;
    }

    .ticket-header__menu-toggle {
        display: inline-flex;
        order: 2;
    }

    .ticket-header__actions {
        order: 3;
        margin-left: 0;
    }

    /* Em ecrãs pequenos a barra não pode empurrar a lupa para fora. */
    .ticket-header.is-search-open .ticket-header__search-form {
        width: min(260px, calc(100vw - 120px));
    }

    .ticket-header__buttons {
        display: none;
    }

    .ticket-header__nav {
        display: none;
        width: 100%;
        order: 4;
    }

    .ticket-header.is-menu-open .ticket-header__nav {
        display: block;
    }

    .ticket-header__menu {
        flex-direction: column;
        padding: 0;
    }

    .ticket-header__menu-link {
        justify-content: space-between;
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .ticket-header__megamenu {
        display: none !important;
        position: static;
        width: 100%;
        box-shadow: none;
        padding: 8px 20px 8px 36px;
        background: rgba(255, 255, 255, .06);
    }

    .ticket-header__menu-item.ticket-mobile-open > .ticket-header__megamenu {
        display: block !important;
    }

    .ticket-header__menu-item.ticket-mobile-open > .ticket-header__menu-link .ticket-icon--chevron-down {
        transform: rotate(180deg);
    }

    .ticket-header__megamenu-list {
        column-count: 1;
    }

    .ticket-header__megamenu-link,
    .ticket-header__megamenu-title,
    .ticket-header__megamenu-desc {
        color: var(--ticket-component-white) !important;
    }

    /* Em telemóvel o mega-menu vive sobre o azul do menu: o hover branco do
       desktop deixaria texto branco sobre fundo branco. */
    .ticket-header__megamenu-link:hover,
    .ticket-header__megamenu-link:focus-visible {
        background: rgba(255, 255, 255, .12);
    }

    .ticket-header__megamenu-icon {
        color: #fff;
    }
}

@media (max-width: 560px) {
    .ticket-header__logo img,
    .ticket-header__logo svg {
        height: 32px;
    }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.ticket-footer {
    background: linear-gradient(135deg, var(--ticket-footer-start), var(--ticket-footer-end));
    color: #fff;
    width: 100%;
}

.ticket-footer__inner {
    max-width: var(--ticket-content-width, 1400px);
    margin: 0 auto;
    padding: 48px 32px 0;
}

/* Newsletter ------------------------------------------------------------------ */
.ticket-footer__newsletter {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}

/* Cor explícita: o tema aplica a sua própria cor aos títulos e sobrepõe-se
   à cor herdada do rodapé. */
.ticket-footer h2,
.ticket-footer h3 {
    color: #fff;
}

.ticket-footer__newsletter-text h2 {
    margin: 0 0 14px;
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.15;
}

/* Traço vermelho por baixo do título, como na maqueta. */
.ticket-footer__newsletter-text h2::after {
    content: "";
    display: block;
    width: 74px;
    height: 3px;
    margin-top: 14px;
    background: var(--ticket-color-accent);
}

.ticket-footer__newsletter-text p {
    margin: 0;
    /* Trava a medida de linha para o texto continuar a quebrar em duas
       linhas, como na maqueta, em vez de esticar num ecrã largo. */
    max-width: 34em;
    font-size: 15px;
    opacity: .9;
    line-height: 1.5;
}

/* Formulário --------------------------------------------------------------
   O formulário é gerado pelo WPForms, que envolve o campo e o botão em
   divs próprias (.wpforms-field-container / .wpforms-submit-container).
   São essas divs os filhos diretos do <form>, por isso é nelas que a
   distribuição em linha tem de ser feita. */
.ticket-footer__newsletter-form .wpforms-container {
    margin: 0;
}

.ticket-footer__newsletter-form .wpforms-form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.ticket-footer__newsletter-form .wpforms-field-container {
    flex: 1 1 240px;
    min-width: 0;
}

.ticket-footer__newsletter-form .wpforms-field {
    padding: 0;
    margin: 0;
}

.ticket-footer__newsletter-form .wpforms-submit-container {
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
}

.ticket-footer__newsletter-form input[type="email"],
.ticket-footer__newsletter-form input[type="text"] {
    width: 100%;
    height: 56px;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #33383d;
    font-size: 15px;
    line-height: 56px;
}

.ticket-footer__newsletter-form input::placeholder {
    color: #9aa3ab;
    font-style: italic;
    opacity: 1;
}

.ticket-footer__newsletter-form button,
.ticket-footer__newsletter-form input[type="submit"] {
    height: 56px;
    padding: 0 36px;
    background: var(--ticket-color-accent);
    color: var(--ticket-component-white) !important;
    border: 0;
    border-radius: 0;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ticket-footer__newsletter-form button:hover,
.ticket-footer__newsletter-form button:focus-visible,
.ticket-footer__newsletter-form button:active,
.ticket-footer__newsletter-form input[type="submit"]:hover,
.ticket-footer__newsletter-form input[type="submit"]:focus-visible,
.ticket-footer__newsletter-form input[type="submit"]:active {
    background: var(--ticket-color-accent-hover);
    color: var(--ticket-component-white) !important;
}

/* Mensagens de erro e de confirmação do WPForms, legíveis sobre o azul. */
.ticket-footer__newsletter-form .wpforms-error,
.ticket-footer__newsletter-form label.wpforms-error {
    margin-top: 6px;
    color: #ffd9d6;
    font-size: 12px;
}

.ticket-footer__newsletter-form .wpforms-confirmation-container-full {
    background: rgba(255, 255, 255, .12);
    border: 0;
    color: #fff;
    padding: 14px 18px;
}

.ticket-footer__newsletter-form .wpforms-error-noscript {
    color: #ffd9d6;
    font-size: 13px;
}

/* Nota legal (RGPD) por baixo do formulário. */
.ticket-footer__newsletter-legal {
    margin: 12px 0 0;
    font-size: 11px;
    line-height: 1.5;
    text-align: right;
    opacity: .8;
}

.ticket-footer__newsletter-placeholder {
    border: 1px dashed rgba(255, 255, 255, .5);
    border-radius: 6px;
    padding: 16px 18px;
    font-size: 13px;
    line-height: 1.5;
    opacity: .85;
}

.ticket-footer__divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
    margin: 32px 0 0;
}

/* Colunas ------------------------------------------------------------------ */
/* Três colunas de peso semelhante, com a da marca mais folgada. A coluna
   do meio não leva 1fr sozinha: isso fazia-a absorver todo o espaço
   sobrante e espremia o logótipo contra a margem. */
.ticket-footer__columns {
    padding: 32px 0;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
}

.ticket-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* O logótipo do rodapé é impresso diretamente (sem elemento à volta),
   por isso a classe fica na própria imagem. */
.ticket-footer__logo {
    display: block;
    height: 150px;
    width: auto;
    max-width: 100%;
    color: #fff;
    fill: #fff;
}

.ticket-footer__social {
    display: flex;
    gap: 12px;
    flex-direction: row;
    justify-content: center;
}

.ticket-footer__social-link {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    color: #fff;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.ticket-footer__social-link:hover,
.ticket-footer__social-link:focus-visible {
    background: #fff;
    color: var(--ticket-color-primary);
    border-color: #fff;
}

/* Logótipo da marca associada (ex.: Trivalor). Ocupa o lugar onde
   antes estava um título de texto, por isso mantém a mesma margem. */
.ticket-footer__about-logo {
    display: block;
    height: 22px;
    width: auto;
    max-width: 100%;
    margin: 0 0 16px;
}

/* O bloco ocupa só a largura do seu conteúdo e fica centrado na coluna;
   o texto continua alinhado à esquerda, como no design. */
.ticket-footer__legal {
    justify-self: center;
}

.ticket-footer__legal h3 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
}

.ticket-footer__legal-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ticket-footer__legal-menu a {
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    opacity: .9;
}

.ticket-footer__legal-menu a:hover,
.ticket-footer__legal-menu a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.ticket-footer__about-text {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    opacity: .9;
}

.ticket-footer__about-link {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
}

/* Barra inferior ------------------------------------------------------------ */
.ticket-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.ticket-footer__bottom-inner {
    max-width: var(--ticket-content-width, 1400px);
    margin: 0 auto;
    padding: 18px 32px;
}

.ticket-footer__copyright {
    margin: 0;
    text-align: right;
    font-size: 13px;
    opacity: .9;
}

.ticket-footer__copyright a {
    color: #fff;
}

.ticket-footer__copyright a:hover,
.ticket-footer__copyright a:focus-visible {
    text-decoration: underline;
}

/* Responsivo (footer) --------------------------------------------------------- */
@media (max-width: 992px) {
    .ticket-footer__newsletter {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ticket-footer__columns {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    /* Em duas colunas já não sobra folga: volta a alinhar à esquerda. */
    .ticket-footer__legal {
        justify-self: start;
    }

    .ticket-footer__about {
        grid-column: 1 / -1;
    }

    .ticket-footer__copyright {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .ticket-footer__inner {
        padding: 36px 20px 0;
    }

    /* Campo e botão empilhados: o botão passa a ocupar a largura toda. */
    .ticket-footer__newsletter-form .wpforms-form {
        flex-direction: column;
    }

    .ticket-footer__newsletter-form .wpforms-field-container {
        flex: 1 1 auto;
    }

    .ticket-footer__newsletter-form button,
    .ticket-footer__newsletter-form input[type="submit"] {
        width: 100%;
        margin-top: 8px;
    }

    .ticket-footer__newsletter-legal {
        text-align: left;
    }

    .ticket-footer__columns {
        grid-template-columns: 1fr;
    }

    .ticket-footer__bottom-inner {
        padding: 18px 20px;
    }
}
