/* ==========================================================================
   Traveler Child — Modernization layer
   Accessibility, focus states, and visual polish on top of the parent theme.
   ========================================================================== */

/* --- Phase 5 design system tokens ---
   Palette drawn from the site's actual subject matter: the teal of the Red
   Sea reef, the ochre of the desert dunes flanking it, coral accents, and a
   warm paper background rather than a stock "AI cream". Signature concept:
   a boarding-pass/ticket motif (dashed perforations, gate tags, torn
   corners) since this is fundamentally a booking site — every tour is a
   ticket to somewhere. */
:root {
    --ink: #16302F;
    --paper: #FFFDF9;
    --sand: #F3E9D7;
    --reef: #157A74;
    --dune: #C08A44;
    --coral: #E1613F;
    --nile-dusk: #0E2422;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Work Sans', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* --- Accessibility: skip-to-content link (inserted by modernize.js) --- */
.tc-skip-link {
    position: absolute;
    top: -48px;
    left: 8px;
    z-index: 100000;
    background: #ffffff;
    color: #111827;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}

.tc-skip-link:focus {
    top: 8px;
    outline: 3px solid var(--reef);
    outline-offset: 2px;
}

/* --- Accessibility: visible focus states across the site ---
   Many interactive elements in the parent theme suppress the default
   outline; restore a clear, modern focus ring for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.collapse-button:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--reef) !important;
    outline-offset: 2px !important;
}

/* --- Layout stability: reserve space for header logos so they don't
   cause layout shift while loading --- */
.header-logo img,
.logo img,
#logo img,
.logo-mobile img {
    height: 44px;
    width: auto;
    max-width: 100%;
}

/* --- Typography: clearer, more consistent scale and line-height --- */
body {
    line-height: 1.6;
    font-family: var(--font-body);
    color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.item-tour .title {
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-family: var(--font-display);
    color: var(--ink);
}

p {
    max-width: 70ch;
}

/* Utility/data typeface for anything that reads as metadata rather than
   prose: durations, "from" price labels, review counts. */
.item-tour .service-duration,
.item-tour .reviews .summary,
.item-tour .price-wrapper .fr_text {
    font-family: var(--font-mono);
}

.item-tour .price-wrapper .fr_text {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.item-tour .price .text-lg {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--coral);
}

.item-tour .service-duration svg path,
.item-tour .price-wrapper svg path {
    fill: var(--dune);
}

/* --- Boarding-pass gate tags: the homepage's "01./02./03./04." section
   markers used to be decorative fake sequence numbers (a generic AI-design
   tell). Reframed here as literal "gate" tags — this is a booking site, so
   a ticket-gate motif is earned rather than arbitrary. Text content is
   trimmed to the two digits by the tiny script in functions.php
   (tc_tag_section_numbers); "GATE " is presentation-only, added in CSS so
   it never leaks into the accessibility tree as duplicated content. --- */
.tc-gate-tag {
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em;
    color: var(--reef) !important;
    background: var(--sand);
    border: 1px dashed var(--dune);
    border-radius: 999px;
    padding: 5px 14px !important;
    display: inline-block !important;
    width: auto !important;
    white-space: nowrap;
}

.tc-gate-tag::before {
    content: "GATE ";
}

/* --- Buttons: consistent sizing, spacing, and hover/active feedback --- */
.btn,
button,
.button,
input[type="submit"] {
    border-radius: 8px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.btn:hover,
button:hover,
.button:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.btn:active,
button:active,
.button:active,
input[type="submit"]:active {
    transform: translateY(0);
}

/* Ticket-style CTA: sharp corners, dashed edge, mono uppercase label —
   the button reads like a boarding-pass stub rather than a generic pill. */
.elementor-button {
    font-family: var(--font-mono) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    border-radius: 2px !important;
    border: 1.5px dashed var(--ink) !important;
    background-color: var(--paper) !important;
    color: var(--ink) !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.elementor-button:hover {
    background-color: var(--ink) !important;
    color: var(--paper) !important;
    border-color: var(--ink) !important;
}

/* --- Cards / product listings: softer shadows, consistent radius --- */
.woocommerce ul.products li.product,
.st-list-service-item,
.card,
.item-listing {
    border-radius: 10px;
    overflow: hidden;
}

.woocommerce ul.products li.product img {
    border-radius: 10px 10px 0 0;
}

/* --- Signature: "boarding pass" tour cards ---
   The real, sitewide tour-card template (Traveler's .item-tour, used on
   every archive/listing page) gets the ticket treatment: a torn-corner
   stub on the photo and a dashed perforation ahead of the duration/price
   strip, like the tear line on an actual ticket. */
.item-tour .item.item-tours {
    background: var(--paper);
    border: 1px solid rgba(22, 48, 47, 0.15);
    border-radius: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.item-tour .item.item-tours:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(22, 48, 47, 0.14);
}

.item-tour .featured-image {
    position: relative;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
}

.item-tour .featured-image::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 26px 26px 0;
    border-color: transparent var(--paper) transparent transparent;
    filter: drop-shadow(-1px 1px 1px rgba(22, 48, 47, 0.25));
}

.item-tour .section-footer {
    border-top: 1.5px dashed rgba(22, 48, 47, 0.3);
    margin-top: 12px;
    padding-top: 10px;
}

/* --- Conversion: floating WhatsApp booking button (markup printed by
   tc_whatsapp_cta() in functions.php). WhatsApp's own green is kept for
   instant recognition; bottom-right so it never collides with the
   gtranslate language flags pinned bottom-left. --- */
.tc-whatsapp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99990;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 56px;
    min-height: 56px;
    padding: 14px;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(22, 48, 47, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tc-whatsapp:hover,
.tc-whatsapp:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(22, 48, 47, 0.35);
}

.tc-whatsapp svg {
    flex: 0 0 auto;
}

.tc-whatsapp__label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Icon-only on small screens: the label would crowd a phone viewport. */
@media (max-width: 991px) {
    .tc-whatsapp {
        padding: 14px;
    }
    .tc-whatsapp__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* --- Respect users who've asked for reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- SEO/accessibility: the parent theme's front-page H1 (the real,
   semantic page heading) is hidden with display:none at every breakpoint,
   which removes it from the accessibility tree entirely and gives search
   engines nothing to key off. Keep it invisible to sighted users (it would
   visually duplicate the logo otherwise) but restore it to the
   accessibility tree and text content using the standard visually-hidden
   technique instead of display:none. --- */
.tag_h1.d-none,
.tag_h1.hidden-lg,
.tag_h1.hidden-md,
.tag_h1.hidden-sm,
.tag_h1.hidden-xs {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Small responsive polish for mobile nav toggle hit-area --- */
.collapse-button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}