/*
Theme Name:Togo Child
Theme URI: https://togo.uxper.co/
Author: Uxper
Author URI: http://uxper.co/
Description: This is a child theme of Togo
Template: togo
Version: 1.0.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.4
License URI: https://choosealicense.com/licenses/gpl-2.0/
Text Domain: togo-child
Tags: editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/

/* Enquiry panel - shown instead of the booking form on enquiry-only trips.
   Deliberately plain: it borrows the theme's own type and colour rather than
   introducing a look of its own. */
.togo-child-enquiry {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    padding: 24px;
    background: #fff;
}
.togo-child-enquiry .tce-price {
    margin: 0 0 4px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.togo-child-enquiry .tce-from,
.togo-child-enquiry .tce-unit {
    font-size: 14px;
    opacity: .7;
}
.togo-child-enquiry .tce-amount {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}
.togo-child-enquiry .tce-note {
    margin: 12px 0 18px;
    font-size: 14px;
    line-height: 1.55;
    opacity: .85;
}
.togo-child-enquiry .tce-btn {
    display: block;
    text-align: center;
    padding: 13px 20px;
    border-radius: 6px;
    background: currentColor;
    font-weight: 600;
    text-decoration: none;
}
.togo-child-enquiry .tce-btn {
    background: #1a1a1a;
    color: #fff;
}
.togo-child-enquiry .tce-btn:hover,
.togo-child-enquiry .tce-btn:focus-visible {
    opacity: .88;
    color: #fff;
}
.togo-child-enquiry .tce-wa {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    text-decoration: underline;
}

/* =====================================================================
   Why Us - the difference trail
   ---------------------------------------------------------------------
   Elementor owns the structure: the tilt is _transform_rotateZ_effect,
   the stagger is _flex_align_self, the tints are container backgrounds.
   All of that stays editable in the builder. Only the dashed trail and
   the card shadow live here, keyed on the CSS classes set in Elementor's
   Advanced tab, because neither has a native control.
   ===================================================================== */

.eta-trail {
    position: relative;
}

/* the trail itself: one dashed line down the middle, behind the cards */
.eta-trail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 30px;
    bottom: 30px;
    border-left: 2px dashed rgba(17, 17, 17, .22);
    transform: translateX(-1px);
    pointer-events: none;
    z-index: 0;
}

.eta-trail .eta-trail-card {
    position: relative;
    z-index: 1;
    box-shadow: 0 18px 42px -24px rgba(17, 17, 17, .40),
                0 2px 6px rgba(17, 17, 17, .05);
    /* transition the composed transform, not the custom property - an
       unregistered custom property cannot be transitioned, but the
       transform built from it can. Containers namespace their transform
       variables with "con-", widgets do not. */
    transition: transform .35s ease, box-shadow .35s ease;
}

/* straighten and lift on hover. Elementor composes its transform from
   custom properties, so overriding the variable cooperates with it
   instead of fighting it - no !important needed. */
.eta-trail .eta-trail-card:hover {
    --e-con-transform-rotateZ: 0deg;
    --e-con-transform-translateY: -6px;
    box-shadow: 0 30px 60px -26px rgba(17, 17, 17, .46),
                0 2px 6px rgba(17, 17, 17, .06);
}

/* the medallion sits on the trail, so give it a ring against the line */
.eta-trail .eta-trail-dot .elementor-icon {
    box-shadow: 0 0 0 6px #fff, 0 6px 16px -6px rgba(17, 17, 17, .45);
}

/* what the market offers: present, but plainly demoted */
.eta-trail .eta-trail-vs,
.eta-trail .eta-trail-vs p {
    color: #7A7A7A;
    font-size: 15px;
    line-height: 1.55;
}
.eta-trail .eta-trail-vs s {
    color: #4A4A4A;
    text-decoration-color: rgba(253, 70, 33, .6);
    text-decoration-thickness: 2px;
}

.eta-trail .eta-trail-panel h3 {
    margin: 0;
}
.eta-trail .eta-trail-panel p {
    margin: 0;
}

/* tablet: the line moves left of the stack */
@media (max-width: 1024px) {
    .eta-trail::before { left: 28px; }
}

/* phone: no trail, no tilt (the tilt is reset in Elementor itself, via
   _transform_rotateZ_effect_mobile) */
@media (max-width: 767px) {
    .eta-trail::before { display: none; }
    .eta-trail .eta-trail-card { box-shadow: 0 10px 26px -18px rgba(17, 17, 17, .38); }
}

@media (prefers-reduced-motion: reduce) {
    .eta-trail .eta-trail-card { transition: none; }
    .eta-trail .eta-trail-card:hover { --e-con-transform-translateY: 0; }
}

/* ---------------------------------------------------------------------
   Text sitting on a photograph.
   Elementor colours the widget wrapper and lets the text inherit, but the
   theme colours p directly, and a direct rule beats an inherited value at
   any specificity. These target the elements themselves.
   --------------------------------------------------------------------- */
.eta-on-image p,
.eta-on-image li,
.eta-on-image strong,
.eta-on-image em {
    color: #F2F6F4;
}
.eta-on-image h1,
.eta-on-image h2,
.eta-on-image h3,
.eta-on-image h4 {
    color: #FFFFFF;
}
.eta-on-image a {
    color: #FFFFFF;
    text-decoration: underline;
}

/* =====================================================================
   Who It's For - tall persona cards in a nested carousel
   ---------------------------------------------------------------------
   Elementor owns the cards: each slide is a container with its own
   background image, and the two text blocks inside it are containers too,
   so the copy, spacing and photography are all editable in the builder.

   The scrims live here rather than on Elementor's background control for
   one reason: the alphas are derived, not chosen. Compositing white text
   over a blown-out sky and solving WCAG 1.4.3 gives a hard minimum of
   0.535 alpha for 15px body copy (4.5:1) and 0.416 for large text (3:1).
   The stops are percentages of the text block, so they scale with the copy:
   a three-line caption reaches about 63% of its block, which is why the
   ramp has to still be near 0.70 there rather than faded out. Combined
   with the 0.18 base layer the effective alpha under the caption is ~0.75
   and under the title ~0.51, against minimums of 0.62 and 0.45. The flat
   0.18 base layer under them IS an Elementor control (the slide's
   background overlay), because that is the layer worth tuning per image.

   Colour is #0B0D10, a near-black with a blue cast - pure black over warm
   East African light goes muddy grey-green.
   ===================================================================== */

.eta-persona-card {
    position: relative;
    transition: transform .4s ease, box-shadow .4s ease;
    box-shadow: 0 14px 34px -20px rgba(17, 17, 17, .45);
}
.eta-persona-card:hover {
    --e-con-transform-translateY: -6px;
    box-shadow: 0 26px 52px -22px rgba(17, 17, 17, .5);
}

/* top scrim: carries the index mark and the segment title. Lighter than the
   bottom one because a 24px/600 title qualifies as large text at 3:1. */
.eta-persona-card .eta-persona-top {
    background-image: linear-gradient(
        to bottom,
        rgba(11, 13, 16, .86) 0%,
        rgba(11, 13, 16, .78) 30%,
        rgba(11, 13, 16, .56) 58%,
        rgba(11, 13, 16, .24) 82%,
        rgba(11, 13, 16, 0) 100%
    );
}

/* bottom scrim: deeper and taller. The caption is 15px small text at 4.5:1,
   and photographs are busier at the bottom (ground, plant, crowd) than at
   the top. */
.eta-persona-card .eta-persona-bottom {
    background-image: linear-gradient(
        to top,
        rgba(11, 13, 16, .94) 0%,
        rgba(11, 13, 16, .88) 35%,
        rgba(11, 13, 16, .70) 62%,
        rgba(11, 13, 16, .34) 82%,
        rgba(11, 13, 16, 0) 100%
    );
}

/* Additive only. A text shadow buys real perceptual legibility over
   high-frequency detail - grass, gravel, chain-link - but contributes
   nothing to the WCAG ratio, so it never substitutes for the scrim. */
.eta-persona-card .eta-persona-index .elementor-heading-title,
.eta-persona-card .eta-persona-title .elementor-heading-title,
.eta-persona-card .eta-persona-body p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.eta-persona-body p,
.eta-persona-body {
    color: rgba(255, 255, 255, .90);
    margin: 0;
}
.eta-persona-title .elementor-heading-title {
    color: #FFFFFF;
    text-wrap: balance;
}
.eta-persona-index .elementor-heading-title {
    color: rgba(255, 255, 255, .62);
    font-variant-numeric: tabular-nums lining-nums;
}

/* carousel chrome */
.eta-persona-carousel .swiper {
    padding-bottom: 4px;
}
/* Elementor centres the dots with left:50% plus translateX(-50%), which only
   works while the element is absolutely positioned. In this widget it ends up
   in normal flow, so the left:50% is ignored and the translate alone drags the
   row 54px left of the cards. Cancel the translate and let it span the row.
   The doubled class out-specifies Elementor's per-element rule. */
.eta-persona-carousel .swiper-pagination.swiper-pagination-horizontal {
    position: static;
    width: 100%;
    transform: none;
    display: flex;
    justify-content: center;
    margin-top: 18px;
}
/* arrow colour and background are set on the widget itself, in the Style tab.
   Only the drop shadow is here, which has no control. */
.eta-persona-carousel .elementor-swiper-button {
    box-shadow: 0 6px 18px -8px rgba(17, 17, 17, .5);
}

/* A card whose caption runs long must grow rather than clip - the classic
   200% zoom failure for a fixed-height card with text pinned at both ends. */
@media (max-width: 600px) {
    .eta-persona-card {
        min-height: 0;
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eta-persona-card { transition: none; }
    .eta-persona-card:hover { --e-con-transform-translateY: 0; }
}

/* =====================================================================
   For Schools & Universities - alternating level rows
   ---------------------------------------------------------------------
   The rows themselves are Elementor containers, so the copy, the tints,
   the photographs and the order are all editable in the builder. This
   file only sizes the photograph (so a 3:2 frame and a 4:3 frame line up
   beside each other) and styles the table and checklist, which are plain
   HTML inside text editors.
   ===================================================================== */

.eta-level-photowrap,
.eta-level-photowrap .elementor-widget-image,
.eta-level-photowrap .elementor-widget-container,
.eta-level-photowrap figure,
.eta-level-photowrap .elementor-image {
    height: 100%;
}
/* The old build tried to do this with five UAEL controls that do not exist,
   so nothing was applied and a 3:2 photo sat beside a 16:9 one. */
.eta-level-photo img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.eta-level-eyebrow .elementor-heading-title {
    text-transform: uppercase;
}

/* No colour override here. The theme's own button style already wins on
   specificity and is the site's standard accent button, so overriding it only
   produced a rule that never applied. */
.eta-level-cta .elementor-button {
    font-weight: 600;
}

/* At a glance. A real table rather than four animated counters, which
   rendered as "0" in the HTML because their figures live in data-to-value
   and are painted by JavaScript. */
.eta-glance-wrap { overflow-x: auto; }
table.eta-glance {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
table.eta-glance th,
table.eta-glance td {
    text-align: left;
    vertical-align: top;
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid rgba(17, 17, 17, .12);
}
table.eta-glance th {
    width: 38%;
    font-weight: 600;
    color: #14110F;
    white-space: normal;
}
table.eta-glance td { color: #3E4A44; }
table.eta-glance tr:last-child th,
table.eta-glance tr:last-child td { border-bottom: 0; }

@media (max-width: 600px) {
    table.eta-glance th, table.eta-glance td { display: block; width: auto; padding: 4px 0; border-bottom: 0; }
    table.eta-glance tr { display: block; padding: 12px 0; border-bottom: 1px solid rgba(17,17,17,.12); }
}

ul.eta-checklist {
    margin: 0 0 18px;
    padding-left: 0;
    list-style: none;
}
ul.eta-checklist li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
}
/* a rule, not a tick - these are things to ask for, not things already done */
ul.eta-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 18px;
    height: 2px;
    background: #FD4621;
}

/* =====================================================================
   Header
   ---------------------------------------------------------------------
   The nav is centred structurally: the menu widget is a direct child of
   the header row, between two flanks of equal width. That is done in
   Elementor, not here.
   ===================================================================== */

/* the header phone button wrapped the number onto two lines once the right
   flank narrowed to match the left */
#header .elementor-element-1b1bf11 .elementor-button-text {
    white-space: nowrap;
}
#header .elementor-element-1b1bf11 .elementor-button {
    padding-inline: 18px;
}

/* the centred menu must never collide with the logo or the actions */
@media (min-width: 1025px) and (max-width: 1300px) {
    #header .elementor-element-84f35e0 .togo-main-menu > li > a {
        font-size: 15px;
    }
    #header .elementor-element-1b1bf11 .elementor-button {
        padding-inline: 12px;
    }
}

/* =====================================================================
   Where trips go - destination cards
   ---------------------------------------------------------------------
   Each card wrapped its photograph at the image's own aspect ratio, so a
   row of four measured 215, 242, 215 and 216 pixels tall and the captions
   below them never lined up. Pin one ratio and let the photograph crop to
   it. 3:2 is the ratio three of the four already had, so it is the
   smallest change to the artwork.
   ===================================================================== */

.togo-destination-grid-image,
.togo-destination-carousel-image,
.destinations-swiper-wrapper .togo-destination-image {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    display: block;
}

.togo-destination-grid-image img,
.togo-destination-carousel-image img,
.destinations-swiper-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* the whole card, so the caption block starts at the same line in every
   column even when a destination name wraps to two lines */
.togo-destination-grid-item {
    display: flex;
    flex-direction: column;
}
.togo-destination-grid-content {
    flex: 1 1 auto;
}

/* =====================================================================
   Contact Form 7 - custom tour brief and newsletter
   ---------------------------------------------------------------------
   CF7 ships an unstyled submit button, which on this site read as a
   browser default sitting under carefully set type. These rules borrow
   the theme's own accent button rather than inventing a third style.
   ===================================================================== */

.eta-form {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(20, 17, 15, .10);
    border-radius: 12px;
    padding: 34px 34px 28px;
    box-shadow: 0 18px 44px -34px rgba(20, 17, 15, .5);
}
@media (max-width: 600px) {
    .eta-form { padding: 22px 18px 20px; border-radius: 10px; }
}

.eta-form .eta-q { margin: 0 0 20px; }
.eta-form .eta-lab { display: block; font-weight: 600; color: #14110F; margin-bottom: 8px; }
.eta-form .eta-field { display: block; }

/* Ten stacked questions made the form a very long column, and every input
   ran the full content width - a name field 1170px wide. The label moves
   beside its field from 900px up. Questions 9 and 10 stay full width: a
   textarea and a seven-option grid both need the room. */
@media (min-width: 900px) {
    .eta-form .eta-q {
        display: grid;
        grid-template-columns: 34% 1fr;
        gap: 0 26px;
        align-items: start;
    }
    .eta-form .eta-lab { margin-bottom: 0; padding-top: 13px; }
    .eta-form .eta-q-wide,
    .eta-form .eta-q-check { display: block; }
    .eta-form .eta-q-wide .eta-lab,
    .eta-form .eta-q-check .eta-lab { margin-bottom: 8px; padding-top: 0; }
}

/* #FD4621 on white is 3.46:1, under the 4.5:1 this size of text needs */
.eta-form .req { color: #D93511; font-weight: 700; }

.eta-form .eta-hint {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7671;
}

/* the honeypot: away from people and from assistive technology, but still
   a real field a bot will fill */
.eta-form .eta-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.eta-form input[type="text"],
.eta-form input[type="email"],
.eta-form input[type="tel"],
.eta-form input[type="number"],
.eta-form select,
.eta-form textarea,
.eta-newsletter input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    /* was rgba(17,17,17,.18), which computes to 1.48:1 - WCAG 1.4.11 asks
       for 3:1 on a control boundary. #8C8C8C is 3.36:1. */
    border: 1px solid #8C8C8C;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-weight: 400;
    color: #14110F;
    min-height: 48px;
    line-height: 1.4;
    box-sizing: border-box;
}
.eta-form textarea { min-height: 120px; }

/* Togo keeps appearance:none on selects and draws its own arrow as a
   background image; setting background:#fff above wiped the arrow and left
   a dropdown with no affordance. This puts one back, and pins the height so
   selects stop rendering 8px taller than the text inputs beside them. */
.eta-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2314110F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    height: 48px;
    min-height: 48px;
}

.eta-form input:focus-visible,
.eta-form select:focus-visible,
.eta-form textarea:focus-visible,
.eta-newsletter input:focus-visible {
    outline: 2px solid #D93511;
    outline-offset: 1px;
    border-color: transparent;
}

/* seven options on one line at 1170px; a grid gives them real rows */
.eta-form .wpcf7-checkbox {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 22px;
    margin-top: 6px;
}
@media (max-width: 860px) { .eta-form .wpcf7-checkbox { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .eta-form .wpcf7-checkbox { grid-template-columns: 1fr; } }
.eta-form .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.eta-form .wpcf7-list-item-label { font-weight: 400; }
.eta-form .wpcf7-list-item label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }

.eta-form fieldset { border: 0; padding: 0; margin: 0; }
.eta-form legend { padding: 0; }

.eta-form .wpcf7-submit,
.eta-newsletter .wpcf7-submit {
    /* #FD4621 with white text is 3.46:1; #D93511 is 4.70:1 and reads as the
       same orange */
    background: #D93511;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 14px 30px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background .2s ease;
}
.eta-form .wpcf7-submit:hover,
.eta-newsletter .wpcf7-submit:hover { background: #14110F; }
.eta-form .wpcf7-submit:focus-visible,
.eta-newsletter .wpcf7-submit:focus-visible { outline: 3px solid #14110F; outline-offset: 2px; }
.eta-form .eta-submit { margin: 28px 0 10px; }
.eta-form .eta-foot { margin: 0; font-size: 14px; line-height: 1.5; color: #6B7671; }

/* A lede under a centred heading, so the two read as a pair */
.eta-lede { max-width: 640px; margin-left: auto; margin-right: auto; }

/* Togo's table keeps its default bottom margin, which left a band of dead
   space under the At-a-glance table - 120px below against 70px above the
   heading. The section's own padding supplies the space. */
.eta-glance-wrap table.eta-glance { margin-bottom: 0; }
.eta-glance-wrap { margin-bottom: 0 !important; }

/* Togo sets a:focus{outline:none} and never restores it, so every link on
   the site was keyboard-invisible. focus-visible only, so it shows for
   keyboard users without ringing every mouse click. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #D93511;
    outline-offset: 2px;
    border-radius: 2px;
}

/* the newsletter is one line: field then button */
.eta-newsletter p:first-child {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
}
.eta-newsletter input[type="email"] { flex: 1 1 260px; width: auto; }
.eta-newsletter .wpcf7-spinner { flex: 0 0 auto; }

.wpcf7 .wpcf7-response-output {
    margin: 18px 0 0;
    border-radius: 8px;
    border-width: 1px;
    padding: 12px 14px;
    font-size: 15px;
}

/* =====================================================================
   Splash screen
   ---------------------------------------------------------------------
   Replaces Togo's stock spinning circle. The mark draws itself, the sun
   lands, the name rises, and a sliver of progress runs underneath - one
   short sequence rather than an indefinite spinner, because a spinner
   that outlives the load reads as a stall.

   Timings are deliberately under a second in total. A splash is a cover
   for work already happening; making it longer than the work is theatre.
   ===================================================================== */

.eta-splash .page-loading-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.eta-splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    color: #14110F;
}

.eta-splash-mark { display: block; overflow: visible; }

/* the ascending line draws itself. 60 is a little over the path's real
   length, which keeps the tail from snapping in at the end. */
.eta-splash-line {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: eta-draw .75s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes eta-draw { to { stroke-dashoffset: 0; } }

/* the sun lands just after the line reaches it, with a small overshoot */
.eta-splash-sun {
    transform-origin: 49px 19px;
    transform: scale(0);
    animation: eta-pop .42s cubic-bezier(.34, 1.56, .64, 1) .58s forwards;
}
@keyframes eta-pop { to { transform: scale(1); } }

.eta-splash-ground {
    opacity: 0;
    animation: eta-fade .5s ease .2s forwards;
}
@keyframes eta-fade { to { opacity: .22; } }

.eta-splash-name {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}
.eta-splash-name span {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    animation: eta-rise .5s cubic-bezier(.22, 1, .36, 1) forwards;
}
.eta-splash-w1 { color: #FD4621; animation-delay: .50s; }
.eta-splash-w2 { color: #14110F; animation-delay: .58s; }
.eta-splash-w3 { color: #6B7671; animation-delay: .66s; }
@keyframes eta-rise { to { opacity: 1; transform: translateY(0); } }

.eta-splash-bar {
    position: relative;
    display: block;
    width: 116px;
    height: 2px;
    border-radius: 2px;
    background: rgba(17, 17, 17, .10);
    overflow: hidden;
}
.eta-splash-bar i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    border-radius: 2px;
    background: #FD4621;
    animation: eta-sweep 1.15s ease-in-out .5s infinite;
}
@keyframes eta-sweep {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(360%); }
}

/* Motion here is decoration over a wait, so it is the first thing to go.
   Everything still ends in its final state - the mark drawn, the name up. */
@media (prefers-reduced-motion: reduce) {
    .eta-splash-line { animation: none; stroke-dashoffset: 0; }
    .eta-splash-sun { animation: none; transform: scale(1); }
    .eta-splash-ground { animation: none; opacity: .22; }
    .eta-splash-name span { animation: none; opacity: 1; transform: none; }
    .eta-splash-bar i { animation: none; width: 100%; }
}

/* =====================================================================
   Experiences - two axes, side by side
   ---------------------------------------------------------------------
   Source and duration are orthogonal ways into the same nineteen trips.
   Stacked, they read as two menus. Beside each other, a visitor picks
   their own entry point. The two columns are styled differently on
   purpose - photographs on the left, a plain reference table on the
   right - so they read as two questions rather than one long list.
   ===================================================================== */

/* the rule between the columns is what makes them read as a pair */
@media (min-width: 1025px) {
    .eta-two-axis .eta-axis-duration {
        border-left: 1px solid rgba(17, 17, 17, .12);
        padding-left: 4%;
    }
}

.eta-src-card {
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 10px 24px -18px rgba(17, 17, 17, .5);
}
.eta-src-card:hover {
    --e-con-transform-translateY: -3px;
    box-shadow: 0 18px 34px -20px rgba(17, 17, 17, .55);
}
/* The scrim under the text.
   It lives on ::after, not ::before, for a reason worth recording: on an
   Elementor container ::before is already spoken for - it is the background
   overlay, and Elementor's own rule sets opacity: var(--overlay-opacity),
   which defaults to .5. A scrim written there is silently served at half the
   alpha it declares, which is why the labels kept measuring far darker in the
   stylesheet than they did on screen. ::after is free, takes the alpha it is
   given, and leaves the overlay control working for whoever opens this in
   Elementor later.
   The stops are set from where the text actually sits: the count line starts
   46% down and the description ends at 91%, so the ramp has to have done its
   work by 46% and hold to the bottom. The top fifth is left clear. */
.eta-src-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 1;
    background: linear-gradient(to bottom,
        rgba(11,13,16,0) 0%,
        rgba(11,13,16,.10) 18%,
        rgba(11,13,16,.44) 34%,
        rgba(11,13,16,.62) 46%,
        rgba(11,13,16,.76) 100%);
    pointer-events: none;
}
.eta-src-card > * { position: relative; z-index: 1; }

.eta-src-count .elementor-heading-title { text-transform: uppercase; }
.eta-src-body p { margin: 0; color: rgba(255, 255, 255, .90); }

/* the four cards cover eighteen trips; this reconciles the nineteenth */
.eta-axis-source .eta-src-note {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(20, 17, 15, .58);
}

/* the duration column is a reference table, so its links behave like text */
.eta-axis-duration table.eta-glance th a {
    color: #14110F;
    text-decoration: none;
    border-bottom: 1px solid rgba(253, 70, 33, .45);
}
.eta-axis-duration table.eta-glance th a:hover { color: #FD4621; }

@media (prefers-reduced-motion: reduce) {
    .eta-src-card { transition: none; }
    .eta-src-card:hover { --e-con-transform-translateY: 0; }
}

/* =====================================================================
   The account area
   ---------------------------------------------------------------------
   WooCommerce's account screens are written for a shop. This makes them
   read as a trip file: a sidebar that names the sections a group leader
   actually needs, and a dashboard whose first object is the next trip.

   The chip colours are not the ones the reference design used. White on
   its #E67E22 computes to 2.85:1 and on its #27AE60 to 2.87:1, both well
   under the 4.5:1 a status label needs. These are 4.70:1 and 5.34:1.
   ===================================================================== */

.woocommerce-account .woocommerce {
    display: flex;
    /* stretch, not flex-start: the sidebar's right border is the divider
       between the two columns, and at flex-start it stopped 127px short of
       the content and read as an unfinished rule */
    align-items: stretch;
    gap: 0;
    max-width: 1170px;
    margin: 0 auto;
    background: #FAF8F5;
}

/* ---- the sidebar ---------------------------------------------------- */
.woocommerce-account .eta-acct-nav {
    flex: 0 0 248px;
    width: 248px;
    padding: 34px 26px 40px 0;
    border-right: 1px solid rgba(20, 17, 15, .12);
    min-height: 320px;
}
.eta-acct-brand {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: #14110F;
}
.eta-acct-who {
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.5;
    color: #55605B;
}
.woocommerce-account .eta-acct-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-account .eta-acct-nav li { margin: 0; }
.woocommerce-account .eta-acct-nav li a {
    display: block;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #14110F;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.woocommerce-account .eta-acct-nav li a:hover { background: rgba(20, 17, 15, .05); }
.woocommerce-account .eta-acct-nav li.is-active > a,
.woocommerce-account .eta-acct-nav li a[aria-current="page"] {
    background: #D93511;
    color: #fff;
}
.woocommerce-account .eta-acct-nav li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #55605B; }

/* ---- the content column --------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 34px 0 56px 40px;
}
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child { margin-top: 0; }

/* the section name - WooCommerce prints none for the dashboard */
/* the theme's own h1 rule renders this at 56px, so it has to be out-specified */
.woocommerce-account .woocommerce-MyAccount-content .eta-acct-title {
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(20, 17, 15, .12);
    font-size: 30px;
    line-height: 1.2;
    color: #14110F;
}
@media (max-width: 600px) {
    .woocommerce-account .woocommerce-MyAccount-content .eta-acct-title { font-size: 24px; }
}

/* ---- the next-trip card --------------------------------------------- */
.eta-acct-card {
    background: #fff;
    border: 1px solid rgba(20, 17, 15, .10);
    border-radius: 12px;
    padding: 26px 26px 22px;
    box-shadow: 0 18px 40px -34px rgba(20, 17, 15, .55);
    margin-bottom: 30px;
}
.eta-acct-card--empty { background: #fff; }
.eta-acct-card-title {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.25;
    color: #14110F;
}
.eta-acct-meta {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.55;
    color: #55605B;
}
.eta-acct-chips { margin: 0 0 16px; }

.eta-chip {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff;
}
.eta-chip--deposit   { background: #D93511; }   /* 4.70:1 */
.eta-chip--confirmed { background: #1E7A47; }   /* 5.34:1 */
.eta-chip--balance   { background: #B3261E; }   /* 6.54:1 */
.eta-chip--completed { background: #4A4A4A; }   /* 8.86:1 */

/* the deposit split, sized to the real percentages */
.eta-acct-split {
    display: flex;
    gap: 6px;
    margin: 0 0 18px;
}
.eta-acct-split span {
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}
.eta-acct-split-paid { background: #D93511; color: #fff; }
.eta-acct-split-due  { background: rgba(20, 17, 15, .07); color: #14110F; }

.eta-acct-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    margin: 0;
}
.eta-acct-btn {
    display: inline-block;
    background: #D93511;
    color: #fff;
    border-radius: 999px;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}
.eta-acct-btn:hover,
.eta-acct-btn:focus { background: #14110F; color: #fff; }
.eta-acct-link {
    font-size: 15px;
    color: #14110F;
    text-decoration: none;
    border-bottom: 1px solid rgba(217, 53, 17, .5);
}
.eta-acct-link:hover { color: #D93511; }

/* ---- the two columns ------------------------------------------------ */
.eta-acct-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
}
.eta-acct-col h4 {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(20, 17, 15, .12);
    font-size: 16px;
    color: #14110F;
}
.eta-acct-list { list-style: none; margin: 0; padding: 0; }
.eta-acct-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(20, 17, 15, .08);
    font-size: 15px;
}
.eta-acct-list li a { color: #14110F; text-decoration: none; border-bottom: 1px solid rgba(217, 53, 17, .45); }
.eta-acct-list li a:hover { color: #D93511; }
.eta-acct-none { margin: 0; font-size: 15px; color: #55605B; }

/* ---- the two sections WooCommerce has no concept of ------------------ */
.eta-acct-panel { max-width: 640px; }
.eta-acct-lead { font-size: 16px; color: #14110F; margin: 0 0 18px; }
.eta-acct-empty {
    background: #fff;
    border: 1px solid rgba(20, 17, 15, .10);
    border-radius: 12px;
    padding: 26px;
}
.eta-acct-empty h3 { margin: 0 0 8px; font-size: 19px; color: #14110F; }
.eta-acct-empty p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #55605B; }

/* ---- narrow screens -------------------------------------------------- */
@media (max-width: 900px) {
    .woocommerce-account .woocommerce { display: block; }
    .woocommerce-account .eta-acct-nav {
        width: auto;
        flex: none;
        padding: 24px 0 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(20, 17, 15, .12);
        min-height: 0;
    }
    .woocommerce-account .eta-acct-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .woocommerce-account .eta-acct-nav li a { padding: 9px 14px; }
    .woocommerce-account .woocommerce-MyAccount-content { padding: 26px 0 44px; }
    .eta-acct-cols { grid-template-columns: 1fr; gap: 26px; }
    .eta-acct-split { flex-direction: column; }
}

/* =====================================================================
   Contact - the three ways to reach a human
   ---------------------------------------------------------------------
   These were an icon-list in a column below the form. A group leader
   deciding whether to bother is looking for one thing: can I talk to
   someone. WhatsApp gets equal weight because that is how most business
   in Kenya actually happens, and it links to wa.me rather than tel:.
   ===================================================================== */

.eta-cc-card {
    background: #fff;
    border: 1px solid rgba(20, 17, 15, .10);
    border-radius: 12px;
    box-shadow: 0 14px 34px -30px rgba(20, 17, 15, .5);
    transition: transform .2s ease, box-shadow .2s ease;
}
.eta-cc-card:hover {
    --e-con-transform-translateY: -2px;
    box-shadow: 0 18px 38px -28px rgba(20, 17, 15, .55);
}
.eta-cc-label .elementor-heading-title { text-transform: uppercase; }
.eta-cc-value p { margin: 0; }
.eta-cc-value a {
    color: #14110F;
    text-decoration: none;
    border-bottom: 2px solid rgba(217, 53, 17, .5);
}
.eta-cc-value a:hover { color: #D93511; border-bottom-color: #D93511; }
.eta-cc-note p { margin: 0; color: #55605B; }

/* the whole card is a target on a phone, not just the number */
@media (max-width: 767px) {
    .eta-cc-card { position: relative; }
    .eta-cc-value a::after { content: ""; position: absolute; inset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .eta-cc-card { transition: none; }
    .eta-cc-card:hover { --e-con-transform-translateY: 0; }
}

/* =====================================================================
   The booking calendar
   ---------------------------------------------------------------------
   Two problems. Togo styled the date cells white on a white
   .calendar-inner, so every selectable day was invisible at 1:1 contrast
   and only the price showed. And the price under every single cell -
   "$720.00" repeated 60 times across two months - was noise, not
   information: the price does not vary by day here.

   So the price is hidden and availability is carried by the cell itself:
   a selectable day has ink-black numerals, a tinted ground and a small
   dot; an unavailable day has neither. Selecting tints the cell a lighter
   shade rather than inverting it, so the numeral stays black and readable.
   ===================================================================== */

.calendar .day-name {
    color: #55605B;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* the repeated price under every cell said nothing that changed per day */
.calendar-wrapper .calendar-dates .date .price.price { display: none; }

.calendar .date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #14110F;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}
.calendar .date > span {
    color: inherit;
    font-weight: 600;
    line-height: 1;
}

/* a selectable day: black numerals, a tinted ground, and a dot where the
   price used to sit */
.calendar .date:not(.disabled) {
    cursor: pointer;
    background: #FFF4F0;
    border-color: rgba(217, 53, 17, .30);
}
.calendar .date:not(.disabled)::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #D93511;
}
.calendar .date:not(.disabled):hover {
    background: #FFE6DE;
    border-color: #D93511;
}
.calendar .date:not(.disabled):focus-visible {
    outline: 3px solid #14110F;
    outline-offset: 2px;
}

/* chosen: a lighter tint, not an inversion - the numeral stays black */
.calendar .date.is-selected,
.calendar .date.selected,
.calendar .date.active {
    background: #FFD9CC;
    border-color: #D93511;
    border-width: 2px;
    color: #14110F;
    font-weight: 700;
}
.calendar .date.is-selected > span,
.calendar .date.selected > span,
.calendar .date.active > span { color: #14110F; }
.calendar .date.is-selected::after,
.calendar .date.selected::after,
.calendar .date.active::after { background: #14110F; }

/* unavailable: muted, no dot, plainly not a target */
.calendar .date.disabled {
    color: #9AA09D;
    background: transparent;
    border-color: transparent;
    cursor: not-allowed;
}
.calendar .date.disabled > span { color: #9AA09D; }
.calendar .date.disabled::after { content: none; }

/* today, when it is not the chosen day */
.calendar .date.today:not(.is-selected):not(.selected):not(.active) {
    border-color: #14110F;
}

@media (prefers-reduced-motion: reduce) {
    .calendar .date { transition: none; }
}

/* =====================================================================
   Cart feedback
   ---------------------------------------------------------------------
   Adding a trip already updated the header badge and opened the
   mini-cart, but Togo builds its own success message with display:none
   and never shows it, so the click could read as a no-op. The badge now
   pops when the count rises, and a short-lived toast says what happened.
   ===================================================================== */

/* Togo colours this from its own rule, so this needs the extra class to win */
.togo-minicart-button .togo-minicart-icon-qty,
.togo-minicart-icon .togo-minicart-icon-qty,
span.togo-minicart-icon-qty {
    background: #D93511;
    color: #fff;
    font-weight: 700;
}

@keyframes eta-cart-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}
.togo-minicart-icon-qty.eta-cart-pop {
    animation: eta-cart-pop .42s cubic-bezier(.34, 1.56, .64, 1);
}

.eta-cart-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 99999;
    max-width: min(320px, calc(100vw - 44px));
    padding: 13px 18px;
    border-radius: 999px;
    background: #14110F;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 16px 36px -18px rgba(20, 17, 15, .7);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.eta-cart-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .togo-minicart-icon-qty.eta-cart-pop { animation: none; }
    .eta-cart-toast { transition: none; }
}

/* ---------------------------------------------------------------------
   Selected date: Togo draws the selection as a 50px black circle on
   ::before of the cell, which is why setting a background on the cell
   itself changed nothing visible. Repainting that circle is the only way
   to make the selection light, and the numeral sits above it at z-index
   so it stays readable.
   ------------------------------------------------------------------ */
.calendar-wrapper .calendar-dates .date.is-selected::before,
.calendar-wrapper .calendar-dates .date.selected::before,
.calendar-wrapper .calendar-dates .date.active::before {
    background: #FFD9CC;
    border: 2px solid #D93511;
    box-sizing: border-box;
}
.calendar-wrapper .calendar-dates .date.is-selected,
.calendar-wrapper .calendar-dates .date.is-selected > span,
.calendar-wrapper .calendar-dates .date.selected,
.calendar-wrapper .calendar-dates .date.selected > span {
    color: #14110F;
    position: relative;
    z-index: 1;
}
.calendar-wrapper .calendar-dates .date.is-selected::after {
    background: #D93511;
    position: relative;
    z-index: 1;
}

/* today's ring, when it is not the chosen day */
.calendar-wrapper .calendar-dates .date.today:not(.is-selected)::before {
    background: transparent;
    border: 2px solid rgba(20, 17, 15, .45);
    box-sizing: border-box;
}

/* the guest range, so "No availability found" never has to explain itself */
.eta-guest-range {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #55605B;
    width: 100%;
    clear: both;
}

/* =====================================================================
   Header: keep the menu centred and off the icons
   ---------------------------------------------------------------------
   The header row is three Elementor containers - brand, menu, icons -
   sized by their content. Because the outer two are different widths the
   menu was never actually centred (up to 232px out at 1600px), and at
   1060px, 1150px and 1600px the menu's right edge landed exactly on the
   icons' left edge, so they touched.

   Giving the brand and the icon cluster equal flex basis makes the menu
   centre coincide with the row centre at every width, and the gap means
   they can never meet. Below 1025px the menu is hidden for the mobile
   drawer, so this only applies above that.
   ===================================================================== */

@media (min-width: 1025px) {
    .elementor-element-43f43d4 {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 28px;
    }
    /* brand, left */
    .elementor-element-43f43d4 > .elementor-element-2f1477e {
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
    }
    /* the menu, centred by virtue of equal siblings either side */
    .elementor-element-43f43d4 > .elementor-element-84f35e0 {
        flex: 0 1 auto;
        min-width: 0;
        justify-content: center;
    }
    /* cart, account and the phone button, right */
    .elementor-element-43f43d4 > .elementor-element-10d267b {
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-end;
    }
    /* the menu itself should not wrap onto two lines while shrinking */
    .elementor-element-84f35e0 .elementor-nav-menu,
    .elementor-element-84f35e0 ul {
        flex-wrap: nowrap;
    }
}

/* ------------------------------------------------------------------
   Hero slider + the header that floats on it
   ------------------------------------------------------------------
   On the home page the theme puts the header INSIDE the hero:
   ".site-header.header-float", position:absolute, sitting on the
   photographs. Its menu is #111111 and its icons are strokes in
   currentColor, so how readable the header is depends entirely on how
   bright that slide happens to be. Across four photographs it cannot
   win: the Ngong sky is bright enough for dark type, the two aerials
   of the dam are not.

   An earlier attempt kept the scrim OFF the header band so the dark
   menu would read on the bright slide. That fixed one slide and left
   the others unreadable. The real answer is the one every full-bleed
   hero uses: put a consistent dark band behind the header and make the
   header light.

   Two parts, and both are needed:
     1. a gradient that is dark at the very top, eases through the
        middle, then deepens again behind the heading;
     2. white type and icons in the floating header only - on every
        other page the header sits in normal flow on white and keeps
        its dark type untouched.
   ------------------------------------------------------------------ */
.elementor-widget-slides .elementor-background-overlay {
	background-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.58) 0,
		rgba(0, 0, 0, 0.42) 150px,
		rgba(0, 0, 0, 0.45) 320px,
		rgba(0, 0, 0, 0.5) 100%
	);
	/* Elementor writes its flat overlay colour with a three-class selector
	   (.elementor-element-ID .elementor-repeater-item-ID .elementor-background-overlay),
	   which beats this two-class one - so without !important the flat 45%
	   kept painting behind the gradient. The colour is left set in the
	   widget on purpose: remove this block and the flat overlay takes
	   over again. */
	background-color: transparent !important;
}

/* --- the floating header goes light ------------------------------- */

/* TOP LEVEL ONLY. The dropdown panels have their own light background, so
   white here would make every submenu item invisible - which is exactly what
   a first pass at this did. Top-level items carry .level-1; anything inside
   ul.sub-menu is restored to dark below. */
.site-header.header-float .menu-item.level-1 > a > .menu-item-title,
.site-header.header-float .menu-item.level-1 > a > .togo-svg-icon,
.site-header.header-float > * > .togo-icon-list-item-link,
.site-header.header-float .togo-icon-list-item-title,
.site-header.header-float .site-title,
.site-header.header-float .canvas-menu-toggle {
	color: #ffffff;
}

/* the header's own icon row - cart, account - but never anything in a panel */
.site-header.header-float .togo-icon-list-item-link:not(.sub-menu *),
.site-header.header-float .togo-icon-list > .togo-icon-list-item > .togo-icon-list-item-link {
	color: #ffffff;
}

/* Dropdowns keep the theme's dark type on their light panel. */
.site-header.header-float .sub-menu,
.site-header.header-float .sub-menu a,
.site-header.header-float .sub-menu .menu-item-title,
.site-header.header-float .sub-menu .togo-svg-icon {
	color: #111111;
	text-shadow: none;
}

/* the icons are drawn with stroke:currentColor, so they follow the colour
   above - these two catch any that hardcode a fill or stroke instead */
.site-header.header-float .togo-svg-icon svg [stroke]:not([stroke="none"]),
.site-header.header-float .sub-menu .togo-svg-icon svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}
.site-header.header-float .togo-svg-icon svg [fill]:not([fill="none"]),
.site-header.header-float .sub-menu .togo-svg-icon svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

/* a little depth so the type survives a pale patch of sky as well as a
   dark one - the band above does most of the work, this is the margin */
.site-header.header-float .menu-item.level-1 > a > .menu-item-title,
.site-header.header-float .togo-icon-list-item-title {
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* The theme already ships both logos and hides the light one with .hide,
   so this is a swap rather than a filter - the mark stays crisp. */
.site-header.header-float .site-logo .site-main-logo {
	display: none;
}
.site-header.header-float .site-logo .site-dark-logo.hide {
	display: inline-block;
}

/* The phone button keeps its own orange background and white label; the
   top bar keeps its own dark background. Neither should inherit from the
   rules above, and neither does, but this makes it explicit. */
.site-header.header-float .elementor-button,
.site-header.header-float .togo-button {
	text-shadow: none;
}

/* ==================================================================
   Cart and checkout
   ==================================================================
   These are WooCommerce block pages, so everything below targets
   .wc-block-* classes; the theme's classic templates are not involved.

   The pages shipped as plain defaults - a near-black button where the
   site's action colour is orange, body type where every other page
   uses Playfair for headings, and no card treatment on the one element
   that matters most, the order summary. On a four-figure booking taken
   from somebody who has never met the guide, that reads as an
   afterthought.

   Palette and type are the site's own, not new ones: Playfair Display
   and DM Sans are already loaded by the parent theme, #FD4621 is the
   button colour used in the header and the hero.
   ------------------------------------------------------------------ */

:root {
	--eta-ink: #111111;
	--eta-body: #4a4640;
	--eta-accent: #fd4621;
	--eta-accent-dark: #e52700;
	--eta-surface: #ffffff;
	--eta-ground: #f7f5f2;
	--eta-line: #e6e1da;
}

.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
	color: var(--eta-body);
}

/* --- section headings pick up the site's display face ------------- */
.wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart .wc-block-cart-items__header th {
	font-family: "Playfair Display", Georgia, serif !important;
	color: var(--eta-ink);
	letter-spacing: 0;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wc-block-components-title {
	font-size: 1.35rem !important;
	font-weight: 600 !important;
}
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart .wc-block-cart-items__header th {
	font-size: .82rem !important;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-family: "DM Sans", system-ui, sans-serif !important;
	color: #6d675f;
}

/* --- the order summary / totals as a real card -------------------- */
.wp-block-woocommerce-checkout .wc-block-components-sidebar,
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
	background: var(--eta-surface);
	border: 1px solid var(--eta-line);
	border-radius: 14px;
	padding: 26px 24px;
	box-shadow: 0 10px 30px rgba(17, 17, 17, .06);
}

/* the trip's own picture is the thing being bought - let it be seen */
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img {
	border-radius: 10px;
}
.wc-block-components-order-summary-item__image {
	width: 76px;
}

/* the booking detail was a run-on line of grey text */
.wc-block-components-product-details__name,
.wc-block-components-product-details {
	color: var(--eta-body);
	font-size: .82rem;
	line-height: 1.55;
}
.wc-block-components-product-details li {
	margin-bottom: 2px;
}

/* --- totals ------------------------------------------------------- */
.wc-block-components-totals-item__label {
	color: var(--eta-body);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: "Playfair Display", Georgia, serif;
	color: var(--eta-ink);
	font-size: 1.4rem;
	font-weight: 600;
}

/* --- fields ------------------------------------------------------- */
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-textarea {
	border: 1px solid var(--eta-line) !important;
	border-radius: 10px !important;
	background: var(--eta-surface) !important;
	min-height: 54px;
	font-family: "DM Sans", system-ui, sans-serif;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.wc-block-components-text-input input:focus,
.wc-block-components-country-input select:focus,
.wc-block-components-textarea:focus {
	border-color: var(--eta-accent) !important;
	box-shadow: 0 0 0 3px rgba(253, 70, 33, .16) !important;
	outline: none;
}

/* --- the action buttons take the site's colour -------------------- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wc-block-components-button.contained,
.wp-block-woocommerce-cart .wc-block-components-button.contained {
	background: var(--eta-accent) !important;
	border-color: var(--eta-accent) !important;
	color: #fff !important;
	border-radius: 10px !important;
	min-height: 56px;
	font-family: "DM Sans", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: .01em;
	transition: background .18s ease, transform .18s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover,
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover {
	background: var(--eta-accent-dark) !important;
	border-color: var(--eta-accent-dark) !important;
	transform: translateY(-1px);
}
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible {
	outline: 3px solid rgba(253, 70, 33, .35);
	outline-offset: 2px;
}

/* a booking is one booking - the stepper is removed server-side, this
   catches the classic template's replacement label */
.eta-fixed-qty {
	display: inline-block;
	font-size: .82rem;
	color: #6d675f;
}

/* --- the terms, rendered by [eta_booking_terms] ------------------- */
.eta-booking-terms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 18px;
	margin: 36px 0 8px;
	padding: 26px 24px;
	background: var(--eta-ground);
	border: 1px solid var(--eta-line);
	border-radius: 14px;
}
.eta-booking-terms .eta-term h3 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--eta-ink);
	margin: 0 0 6px;
	line-height: 1.3;
}
.eta-booking-terms .eta-term p {
	margin: 0;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--eta-body);
}

@media (max-width: 782px) {
	.wp-block-woocommerce-checkout .wc-block-components-sidebar,
	.wp-block-woocommerce-cart .wc-block-cart__sidebar {
		padding: 20px 18px;
		border-radius: 12px;
	}
	.eta-booking-terms {
		padding: 20px 18px;
		gap: 14px;
	}
}

/* One card, not a card inside a card. The sidebar already carries the
   border and shadow, so WooCommerce's own panel border doubles it. */
.wp-block-woocommerce-checkout .wc-block-components-sidebar .wc-block-components-order-summary,
.wp-block-woocommerce-checkout .wc-block-components-sidebar > .wc-block-components-panel,
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-panel {
	border: 0 !important;
	box-shadow: none !important;
	padding-left: 0;
	padding-right: 0;
}

/* the terms sit under the action, not adrift from it */
.eta-booking-terms {
	margin-top: 8px;
}
.woocommerce-cart .eta-booking-terms,
.woocommerce-checkout .eta-booking-terms {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------
   The off-canvas menu is inside the floating header, and its panel is
   white.
   ------------------------------------------------------------------
   Togo renders the mobile menu inside <header class="site-header
   header-float ...">, and its top-level items carry .level-1 exactly
   like the desktop ones - but they sit on .mobile-menu-content, which
   the parent theme gives background-color:#fff.

   So the rule that correctly paints the desktop nav white over the
   hero photographs also painted this panel white on white: contrast
   1.00:1. Below 1025px the desktop nav is display:none and this panel
   is the ONLY navigation, so the home page had no usable menu at all
   on phones and tablets.

   Scoping to .header-float was necessary but not sufficient:
   .header-float is a PAGE condition, not a BACKGROUND one, and this
   part of that header has its own opaque background.
   ------------------------------------------------------------------ */
/* These must out-specify the white rule, which is five classes deep
   (.site-header.header-float .menu-item.level-1 > a > .menu-item-title).
   Matching its shape and adding the panel class makes each of these six,
   so the panel wins without needing !important. */
.site-header.header-float .mobile-menu-wrapper .menu-item.level-1 > a > .menu-item-title,
.site-header.header-float .mobile-menu-wrapper .menu-item.level-1 > a > .togo-svg-icon,
.site-header.header-float .mobile-menu-content .menu-item.level-1 > a > .menu-item-title,
.site-header.header-float .mobile-menu-content .menu-item.level-1 > a > .togo-svg-icon,
.site-header.header-float .mb-menu .menu-item.level-1 > a > .menu-item-title,
.site-header.header-float .mb-menu .menu-item.level-1 > a > .togo-svg-icon,
.site-header.header-float .mobile-menu-wrapper .menu-item-title,
.site-header.header-float .mobile-menu-wrapper .togo-svg-icon,
.site-header.header-float .mobile-menu-wrapper a,
.site-header.header-float .mb-menu .menu-item-title,
.site-header.header-float .mb-menu a,
.site-header.header-float .mobile-menu-content .menu-item-title,
.site-header.header-float .mobile-menu-content a {
	color: #111111;
	text-shadow: none;
}

/* ------------------------------------------------------------------
   The header no longer floats, so it needs dark type
   ------------------------------------------------------------------
   Header Float was turned off on every page, so the header is a normal
   band above the content instead of sitting on the hero photographs.
   Everything above this comment styles the FLOATING header and is now
   dormant - it is kept, scoped to .header-float, so switching Header
   Float back on for a page still works exactly as it did.

   These rules are scoped to :not(.header-float) for the same reason:
   the two states never fight, whichever a page chooses.

   The company name beside the logo is a real Elementor heading widget
   ("Energy Trails Africa", id eta5name) and carries its own colour from
   the editor, so it is deliberately not restyled here.
   ------------------------------------------------------------------ */

.site-header:not(.header-float) .menu-item.level-1 > a > .menu-item-title,
.site-header:not(.header-float) .menu-item.level-1 > a > .togo-svg-icon,
.site-header:not(.header-float) > * > .togo-icon-list-item-link,
.site-header:not(.header-float) .togo-icon-list-item-title,
.site-header:not(.header-float) .site-title,
.site-header:not(.header-float) .canvas-menu-toggle {
	color: #111111;
}

/* the icons are strokes in currentColor, so they follow the rule above;
   these catch any that hardcode a fill or stroke instead */
.site-header:not(.header-float) .togo-svg-icon svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}
.site-header:not(.header-float) .togo-svg-icon svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

/* ------------------------------------------------------------------
   Menu hover
   ------------------------------------------------------------------
   A line that grows from the left under the item, and the label warming
   to the accent. Both are cheap to paint - transform and opacity only,
   no layout - so it stays smooth on a phone.

   The underline is on ::after of the link. Elementor's own container
   ::before is already spoken for on this site, and the menu item needs
   its ::before left free for the theme's own markers.
   ------------------------------------------------------------------ */

.site-header .menu-item.level-1 > a {
	position: relative;
}

.site-header .menu-item.level-1 > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
	pointer-events: none;
}

.site-header .menu-item.level-1 > a:hover::after,
.site-header .menu-item.level-1 > a:focus-visible::after,
.site-header .menu-item.level-1.current-menu-item > a::after,
.site-header .menu-item.level-1.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* the label itself warms to the accent on the way */
.site-header:not(.header-float) .menu-item.level-1 > a:hover > .menu-item-title,
.site-header:not(.header-float) .menu-item.level-1 > a:focus-visible > .menu-item-title {
	color: #D93511;
}

.site-header .menu-item.level-1 > a > .menu-item-title {
	transition: color 180ms ease;
}

/* the cart, account and hamburger icons lift very slightly */
.site-header:not(.header-float) .togo-icon-list-item-link,
.site-header:not(.header-float) .canvas-menu-toggle {
	transition: color 180ms ease, transform 180ms ease;
}
.site-header:not(.header-float) .togo-icon-list-item-link:hover,
.site-header:not(.header-float) .canvas-menu-toggle:hover {
	color: #D93511;
	transform: translateY(-1px);
}

/* the dropdowns keep their own dark-on-white treatment - only the timing
   is added here, so a submenu does not appear to snap open */
.site-header .sub-menu .menu-item > a {
	transition: background-color 160ms ease, color 160ms ease;
}

/* Nobody who has asked the operating system to stop animations gets any of
   this: the underline is simply there or not, and nothing slides. */
@media (prefers-reduced-motion: reduce) {
	.site-header .menu-item.level-1 > a::after {
		transition: none;
	}
	.site-header:not(.header-float) .togo-icon-list-item-link,
	.site-header:not(.header-float) .canvas-menu-toggle,
	.site-header .menu-item.level-1 > a > .menu-item-title,
	.site-header .sub-menu .menu-item > a {
		transition: none;
	}
	.site-header:not(.header-float) .togo-icon-list-item-link:hover,
	.site-header:not(.header-float) .canvas-menu-toggle:hover {
		transform: none;
	}
}

/* the second word of the wordmark, picking up the orange in the logo mark.
   #D93511 rather than the brand #FD4621: at this size the brighter orange is
   3.46:1 on white, which fails; this reads as the same colour at 4.70:1. */
.site-header .eta_site_name .eta-name-accent {
	color: #D93511;
}

/* a hairline between the mark and the words so they read as one lockup
   instead of two things that happen to be next to each other */
@media (min-width: 1025px) {
	.site-header .eta_site_name {
		padding-left: 18px;
		border-left: 1px solid rgba(17, 17, 17, 0.14);
	}
}

/* ------------------------------------------------------------------
   No currency switcher
   ------------------------------------------------------------------
   The site sells in one currency, so there is nothing to switch to and
   the control is just a dead end. The footer widget is switched off in
   Elementor, but the mobile off-canvas menu prints its own copy from
   themes/togo/inc/classes/class-togo-templates.php (~line 267) with no
   setting to turn it off, so it is hidden here instead of editing the
   parent theme - an edit there would be lost on the next update.

   display:none rather than visibility or opacity, so it leaves the
   accessibility tree too: nothing should be able to tab to a control
   that does nothing.
   ------------------------------------------------------------------ */
.mobile-menu-bottom .lc-wapper,
.canvas-menu .lc-wapper {
	display: none !important;
}