/**
 * exakt Theme Travel — component styles
 *
 * Every colour and font is a CSS variable printed by functions.php from the
 * Customizer. Nothing in here hardcodes a brand colour: the fallbacks exist
 * only so the file still reads sensibly on its own.
 */

/* ══════════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════════ */

.t-container {
    width: 100%;
    max-width: var(--t-container, 1180px);
    margin: 0 auto;
    padding: 0 20px;
}

.t-site-content {
    min-height: 40vh;
}

.t-section {
    padding: 56px 0;
}

.t-section--tight {
    padding: 36px 0;
}

.t-section--surface {
    background: var(--t-surface, #EFF4F7);
}

.t-section--deep {
    background: var(--t-deep, #123244);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   ON DARK
   A shortcode cannot know what it is sitting on, and the default ink
   colour is invisible on a dark hero. light="yes" adds .t-on-dark.
   ══════════════════════════════════════════════════════════════════ */

.t-on-dark,
.t-on-dark .t-contact-text,
.t-on-dark .t-address-lines,
.t-on-dark .t-hours-time,
.t-on-dark a {
    color: #fff;
}

.t-on-dark .t-contact-icon,
.t-on-dark .t-address-icon,
.t-on-dark .t-hours-day {
    color: var(--t-footer-link, #7FD8E3);
}

.t-on-dark .t-contact-sub,
.t-on-dark .t-hours-note {
    color: var(--t-footer-text, #B9CBD6);
}

.t-on-dark.t-divider,
.t-on-dark .t-divider {
    color: var(--t-footer-link, #7FD8E3);
}

.t-on-dark .t-contact-text:hover,
.t-on-dark a:hover {
    color: var(--t-footer-link, #7FD8E3);
}

/* ══════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════ */

.t-header {
    background: var(--t-header-bg, #fff);
    border-bottom: 1px solid var(--t-border, #D9E3E9);
    position: relative;
    z-index: 100;
}

.t-header--sticky {
    position: sticky;
    top: 0;
}

/* Always the full width of the page — deliberately NOT .t-container, so the
   logo can sit against the screen edge. Side spacing is the only variable. */
.t-header-bar {
    width: 100%;
    padding: 0 var(--t-header-px, 28px);
}

/* ── Header slot placement ──
   The three slots read their position from custom properties that
   exakt_travel_header_layout_vars() computes from the Customizer, so the nine
   logo/menu combinations need no combinatorial CSS. `order` lays them out and
   an `auto` margin on the nav does the pushing. */
.t-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--t-header-h, 74px);
    flex-wrap: wrap;
}

.t-brand {
    order: var(--t-brand-order, 1);
    margin-inline: var(--t-brand-mx, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
}

.t-nav {
    order: var(--t-nav-order, 2);
    margin-inline-start: var(--t-nav-mis, auto);
    margin-inline-end: var(--t-nav-mie, 0);
}

.t-header-actions {
    order: var(--t-actions-order, 10);
    flex-shrink: 0;
}

/* ── Centred logo ──
   Auto margins CANNOT centre the logo here: the nav's own auto margin competes
   for the same free space and the two split it, so the logo sits off-centre by
   however much wider the menu is than the button. A three-column grid centres
   it against the BAR instead, which is what "centred" has to mean, and it can
   never overlap the menu the way an absolutely-positioned logo would. */
.t-header--logo-center .t-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.t-header--logo-center .t-brand {
    grid-column: 2;
    margin-inline: 0;
    justify-self: center;
}

.t-header--logo-center .t-nav,
.t-header--logo-center .t-header-actions {
    margin-inline: 0;
}

.t-header--logo-center.t-header--menu-left .t-nav {
    grid-column: 1;
    justify-self: start;
}

.t-header--logo-center.t-header--menu-left .t-header-actions {
    grid-column: 3;
    justify-self: end;
}

.t-header--logo-center.t-header--menu-right .t-nav {
    grid-column: 3;
    justify-self: end;
}

.t-header--logo-center.t-header--menu-right .t-header-actions {
    grid-column: 1;
    justify-self: start;
}

.t-brand img {
    display: block;
    max-height: var(--t-logo-h, 62px);
    width: auto;
}

.t-brand-name {
    font-family: var(--t-font-heading, sans-serif);
    font-size: 21px;
    font-weight: 600;
    color: var(--t-heading, #123244);
    line-height: 1.15;
}

.t-brand-tagline {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-muted, #6B7A85);
    margin-top: 3px;
}

/* ── Navigation ── */

.t-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.t-nav a {
    color: var(--t-nav-link, #123244);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 0;
    display: inline-block;
    position: relative;
}

.t-nav a:hover,
.t-nav .current-menu-item > a,
.t-nav .current_page_item > a {
    color: var(--t-nav-link-hover, #00A9BD);
}

.t-nav .current-menu-item > a::after,
.t-nav .current_page_item > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    background: var(--t-nav-link-hover, #00A9BD);
}

/* Sub menus */
.t-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    flex-direction: column;
    gap: 0;
    background: var(--t-header-bg, #fff);
    border: 1px solid var(--t-border, #D9E3E9);
    border-radius: 8px;
    padding: 8px 0;
    box-shadow: 0 12px 28px rgba(var(--t-deep-rgb, 18, 50, 68), .12);
    z-index: 50;
}

.t-nav li {
    position: relative;
}

.t-nav li:hover > .sub-menu,
.t-nav li:focus-within > .sub-menu {
    display: flex;
}

.t-nav .sub-menu a {
    padding: 9px 18px;
    display: block;
    width: 100%;
    font-weight: 400;
}

.t-nav .sub-menu a:hover {
    background: var(--t-surface, #EFF4F7);
}

.t-nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--t-border, #D9E3E9);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--t-heading, #123244);
    cursor: pointer;
    line-height: 0;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════ */

.t-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--t-btn-bg, #00A9BD);
    color: var(--t-btn-text, #fff);
    border: 2px solid var(--t-btn-bg, #00A9BD);
    font-family: var(--t-font-heading, sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.t-btn:hover {
    background: var(--t-btn-bg-hover, #00879A);
    border-color: var(--t-btn-bg-hover, #00879A);
    color: var(--t-btn-text, #fff);
}

.t-btn--sm {
    padding: 9px 18px;
    font-size: 13px;
}

.t-btn--outline {
    background: transparent;
    color: var(--t-btn-bg, #00A9BD);
}

.t-btn--outline:hover {
    background: var(--t-btn-bg, #00A9BD);
    color: var(--t-btn-text, #fff);
}

.t-btn--plain {
    background: transparent;
    border-color: transparent;
    color: var(--t-primary, #00A9BD);
    padding-left: 0;
    padding-right: 0;
}

.t-btn--plain:hover {
    background: transparent;
    border-color: transparent;
    color: var(--t-primary-dark, #00879A);
}

.t-btn--wa {
    background: var(--t-whatsapp, #25D366);
    border-color: var(--t-whatsapp, #25D366);
}

.t-btn--wa:hover {
    background: #1EBE5A;
    border-color: #1EBE5A;
}

.t-btn--wa.t-btn--outline {
    background: transparent;
    color: var(--t-whatsapp, #25D366);
}

.t-btn--wa.t-btn--outline:hover {
    background: var(--t-whatsapp, #25D366);
    color: #fff;
}

.t-btn svg {
    flex-shrink: 0;
}

/* On-dark buttons keep their contrast against a photo hero. */
.t-on-dark .t-btn--outline {
    color: #fff;
    border-color: #fff;
}

.t-on-dark .t-btn--outline:hover {
    background: #fff;
    color: var(--t-deep, #123244);
}

/* ══════════════════════════════════════════════════════════════════
   ELEMENTOR ATOMIC BUTTONS

   Deliberately NOT styled here. Elementor V4 renders an atomic button as
       <a class="e-<id>-<hash> e-button-base">
   and its own base rule `.elementor .e-button-base` (0,2,0) sets a 2px
   radius, so a theme rule has to reach (0,2,1) - e.g.
   `.elementor a.e-button-base` - to beat it.

   That is the trap: (0,2,1) ALSO outranks the per-element class
   `.e-<id>-<hash>` (0,1,0) that Elementor writes for anything set in the
   editor, so a theme rule here would silently override the button styling
   someone sets in the UI. Button shape and hover therefore live in the
   page template's style props, not in this file.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   CONTACT / ADDRESS / HOURS / SOCIAL
   ══════════════════════════════════════════════════════════════════ */

.t-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 12px;
}

.t-contact-icon {
    color: var(--t-primary, #00A9BD);
    line-height: 0;
    padding-top: 2px;
    flex-shrink: 0;
}

.t-contact-icon--wa {
    color: var(--t-whatsapp, #25D366);
}

.t-contact-text {
    color: var(--t-text, #3B3C38);
    text-decoration: none;
    line-height: 1.45;
}

a.t-contact-text:hover {
    color: var(--t-primary, #00A9BD);
}

.t-contact-sub {
    display: block;
    font-size: 13px;
    color: var(--t-muted, #6B7A85);
}

.t-address {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.t-address-icon {
    color: var(--t-primary, #00A9BD);
    line-height: 0;
    padding-top: 3px;
    flex-shrink: 0;
}

.t-address-lines {
    font-style: normal;
    line-height: 1.55;
    color: var(--t-text, #3B3C38);
}

.t-hours-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(var(--t-deep-rgb, 18, 50, 68), .10);
}

.t-hours-row:last-of-type {
    border-bottom: 0;
}

.t-hours-day {
    color: var(--t-muted, #6B7A85);
    font-size: 14px;
}

.t-hours-time {
    color: var(--t-text, #3B3C38);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.t-hours-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--t-muted, #6B7A85);
    line-height: 1.5;
}

.t-social {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.t-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--t-border, #D9E3E9);
    color: var(--t-heading, #123244);
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.t-social-link:hover {
    background: var(--t-primary, #00A9BD);
    border-color: var(--t-primary, #00A9BD);
    color: #fff;
}

.t-on-dark .t-social-link {
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   STRAPLINE / DIVIDER / MAP
   ══════════════════════════════════════════════════════════════════ */

.t-strapline {
    font-family: var(--t-font-accent, sans-serif);
    font-size: 14px;
    letter-spacing: .28em;
    text-transform: lowercase;
    text-align: center;
    color: var(--t-muted, #6B7A85);
    margin: 18px 0 0;
}

.t-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--t-primary, #00A9BD);
    margin: 18px 0;
    line-height: 0;
}

.t-divider::before,
.t-divider::after {
    content: "";
    display: block;
    width: 54px;
    height: 1px;
    background: currentColor;
    opacity: .45;
}

.t-map {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--t-border, #D9E3E9);
    line-height: 0;
}

/* ══════════════════════════════════════════════════════════════════
   FLOATING WHATSAPP
   ══════════════════════════════════════════════════════════════════ */

.t-wa-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-whatsapp, #25D366);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    transition: transform .2s ease;
}

.t-wa-float:hover {
    transform: scale(1.06);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   POSTS & ARCHIVES
   ══════════════════════════════════════════════════════════════════ */

.t-page-header {
    padding: 44px 0 8px;
}

.t-page-title {
    font-family: var(--t-font-heading, sans-serif);
    font-size: 34px;
    font-weight: 600;
    color: var(--t-heading, #123244);
    margin: 0;
    line-height: 1.2;
}

.t-entry {
    padding: 24px 0 44px;
}

.t-post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    padding: 20px 0 44px;
}

.t-post-card {
    width: 100%;
    max-width: 360px;
    border: 1px solid var(--t-border, #D9E3E9);
    border-radius: 10px;
    overflow: hidden;
    background: var(--t-bg, #fff);
    display: flex;
    flex-direction: column;
}

.t-post-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.t-post-card-body {
    padding: 18px;
}

.t-post-card h2,
.t-post-card h3 {
    font-family: var(--t-font-heading, sans-serif);
    font-size: 19px;
    margin: 0 0 8px;
    line-height: 1.3;
}

.t-post-card h2 a,
.t-post-card h3 a {
    color: var(--t-heading, #123244);
    text-decoration: none;
}

.t-post-card h2 a:hover,
.t-post-card h3 a:hover {
    color: var(--t-primary, #00A9BD);
}

.t-post-meta {
    font-size: 13px;
    color: var(--t-muted, #6B7A85);
    margin-bottom: 10px;
}

.t-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 50px;
}

.t-pagination .page-numbers {
    padding: 9px 14px;
    border: 1px solid var(--t-border, #D9E3E9);
    border-radius: 6px;
    color: var(--t-text, #3B3C38);
    text-decoration: none;
}

.t-pagination .page-numbers.current,
.t-pagination .page-numbers:hover {
    background: var(--t-primary, #00A9BD);
    border-color: var(--t-primary, #00A9BD);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   WPFORMS
   The contact + enquiry forms are WPForms, so they need to inherit the
   palette rather than shipping the plugin's own blue.
   ══════════════════════════════════════════════════════════════════ */

.wpforms-container .wpforms-field-label {
    font-family: var(--t-font-heading, sans-serif);
    font-weight: 600;
    color: var(--t-heading, #123244);
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
    border: 1px solid var(--t-border, #D9E3E9) !important;
    border-radius: 6px !important;
    padding: 11px 13px !important;
    font-family: var(--t-font-body, sans-serif) !important;
    color: var(--t-text, #3B3C38) !important;
    background: #fff !important;
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
    border-color: var(--t-primary, #00A9BD) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(var(--t-primary-rgb, 0, 169, 189), .16) !important;
}

.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
    background: var(--t-btn-bg, #00A9BD) !important;
    border: 2px solid var(--t-btn-bg, #00A9BD) !important;
    color: var(--t-btn-text, #fff) !important;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    font-family: var(--t-font-heading, sans-serif) !important;
    font-weight: 600 !important;
    letter-spacing: .03em !important;
    cursor: pointer;
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
    background: var(--t-btn-bg-hover, #00879A) !important;
    border-color: var(--t-btn-bg-hover, #00879A) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */

.t-footer {
    background: var(--t-footer-bg, #123244);
    color: var(--t-footer-text, #B9CBD6);
    padding: 48px 0 26px;
    margin-top: 60px;
}

.t-footer a {
    color: var(--t-footer-link, #7FD8E3);
    text-decoration: none;
}

.t-footer a:hover {
    color: #fff;
}

.t-footer-top {
    text-align: center;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.t-footer-brand {
    font-family: var(--t-font-heading, sans-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--t-footer-heading, #fff);
}

.t-footer-tagline {
    font-size: 14px;
    margin-top: 6px;
    color: var(--t-footer-text, #B9CBD6);
}

.t-footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    padding: 32px 0;
}

.t-footer-col {
    width: 100%;
    max-width: 320px;
}

.t-footer-col h3 {
    font-family: var(--t-font-heading, sans-serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-footer-heading, #fff);
    margin: 0 0 14px;
}

.t-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.t-footer-col li {
    margin-bottom: 9px;
}

.t-footer-social {
    justify-content: center;
    padding: 6px 0 20px;
}

.t-footer-bottom {
    text-align: center;
    font-size: 13px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: var(--t-footer-text, #B9CBD6);
}

.t-footer .t-strapline {
    color: var(--t-footer-text, #B9CBD6);
    opacity: .8;
    margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════════════════ */

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

.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    width: auto;
    height: auto;
    clip: auto;
    padding: 10px 16px;
    background: var(--t-primary, #00A9BD);
    color: #fff;
    border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    /* The desktop slot placement is abandoned below this width: the layout
       becomes logo | actions | burger, with the menu dropping to its own row.
       These have to beat the custom properties, hence the explicit values. */
    /* The centred-logo grid is a desktop arrangement only — drop back to the
       flex row so the burger layout below works for every setting. */
    .t-header--logo-center .t-header-inner {
        display: flex;
    }

    .t-brand {
        order: 1;
        margin-inline: 0;
    }

    .t-header--logo-center .t-brand,
    .t-header--logo-center .t-nav,
    .t-header--logo-center .t-header-actions {
        grid-column: auto;
        justify-self: auto;
    }

    .t-header-actions {
        order: 2;
        margin-left: auto;
    }

    .t-nav-toggle {
        display: inline-flex;
        order: 3;
    }

    .t-nav {
        order: 4;
        flex-basis: 100%;
        display: none;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }

    .t-nav.is-open {
        display: block;
    }

    .t-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0 14px;
    }

    .t-nav li {
        border-bottom: 1px solid var(--t-border, #D9E3E9);
    }

    .t-nav a {
        padding: 12px 2px;
        display: block;
    }

    .t-nav .current-menu-item > a::after,
    .t-nav .current_page_item > a::after {
        display: none;
    }

    /* A hover-opened dropdown is unusable on touch — show children inline. */
    .t-nav .sub-menu {
        display: flex;
        position: static;
        border: 0;
        box-shadow: none;
        padding: 0 0 8px 14px;
        background: transparent;
        min-width: 0;
    }

    .t-nav .sub-menu a {
        padding: 9px 2px;
    }
}

@media (max-width: 700px) {
    .t-section {
        padding: 40px 0;
    }

    .t-page-title {
        font-size: 27px;
    }

    .t-footer-cols {
        gap: 26px;
    }

    .t-footer-col {
        max-width: 100%;
    }

    .t-wa-float {
        right: 14px;
        bottom: 14px;
        width: 50px;
        height: 50px;
    }
}