/*
Theme Name:   Astra Child
Description:  Astra child theme — Trekking reservation site
Author:       Your Name
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* ==========================================================================
   CSS GLOBAL VARIABLES — customize to match your brand
   ========================================================================== */

:root {
    /* Brand colors */
    --color-primary:       #1B2A4A; /* Deep night indigo — Black Hmong */
    --color-primary-dark:  #0F1A2E;
    --color-secondary:     #2E8B57; /* Emerald green — Hmong textile */
    --color-tertiary:    #C4186A; /* Fuchsia pink — Hmong textile */
    --color-accent-red:    #C0392B; /* Carmine red — Hmong textile */
    --color-accent-dark:   #922B21;
    --color-accent-cyan:   #00897B; /* Turquoise — Hmong textile */
    --color-accent-green:  #1A6B3C; /* Forest green — hover state for text links */

    /* Text */
    --color-text:          #1A1A1A; /* Ink black */
    --color-text-muted:    #6B6B6B;
    --color-text-light:    #FFFFFF;

    /* UI */
    --color-border:        #D9D2C5;
    --color-bg:            #F5F0E8; /* Natural linen white */
    --color-background:    #F5F0E8;
    --color-bg-alt:        #EDE8DE;

    /* Typography */
    --font-primary:       'Montserrat', sans-serif;
    --font-body:          'Open Sans', sans-serif;
    --font-size-base:     16px;
    --line-height-base:   1.7;

    /* Spacing */
    --spacing-xs:   0.5rem;
    --spacing-sm:   1rem;
    --spacing-md:   2rem;
    --spacing-lg:   4rem;
    --spacing-xl:   6rem;

    /* Layout */
    --container-max: 1200px;
    --border-radius: 8px;
    --border-radius-lg: 16px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition: 0.25s ease;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
}

img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   GLOBAL LINK STYLES — content text links only
   ========================================================================== */

/* Bare `a` sets a sensible default; nav/footer/button/lang-switcher rules
   all have higher specificity and will naturally override this. */
a {
    color: var(--color-secondary);
    text-decoration: underline;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-accent-green);
    text-decoration: none;
}

/* !important only for content areas where Astra/Elementor can inject defaults */
.entry-content a,
.elementor-widget-text-editor a {
    color: var(--color-secondary) !important;
    text-decoration: underline;
}

.entry-content a:hover,
.elementor-widget-text-editor a:hover {
    color: var(--color-accent-green) !important;
    text-decoration: none;
}

/* Preserve button styles — force white text regardless of global link color */
a.button,
.button a,
.ast-button,
.elementor-button,
.elementor-button-wrapper a,
.elementor-widget-button a,
.wp-block-button a,
a[class*="btn"],
.e-con a.elementor-button {
    color: var(--color-text-light) !important;
    text-decoration: none !important;
}

a.button:hover,
.elementor-button:hover,
.elementor-button-wrapper a:hover,
.elementor-widget-button a:hover,
.entry-content a.button:hover,
.entry-content .elementor-button:hover,
.entry-content .elementor-button-wrapper a:hover,
.entry-content .elementor-widget-button a:hover,
.entry-content a[class*="btn"]:hover {
    color: var(--color-text-light) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   BUTTONS — main booking button
   ========================================================================== */

.btn-booking,
.btn-primary {
    display: inline-block;
    padding: 0.85rem 2rem;
    background-color: var(--color-tertiary);
    color: var(--color-text-light);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-booking:hover,
.btn-primary:hover {
    background-color: var(--color-accent-cyan);
    color: var(--color-text-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.btn-booking:active,
.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Outline variant */
.btn-outline {
    display: inline-block;
    padding: 0.85rem 2rem;
    background-color: transparent;
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-decoration: none;
}

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

.site-header,
#masthead {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.site-header.scrolled,
#masthead.scrolled {
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   TREK CARDS (Treks listing page)
   ========================================================================== */

.trek-card {
    background: var(--color-bg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.trek-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.trek-card__img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.trek-card__body {
    padding: var(--spacing-sm) var(--spacing-md);
}

.trek-card__title {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.trek-card__meta {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}

.trek-card__price {
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-tertiary);
    margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   LANGUAGE SWITCHER
   ========================================================================== */

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.lang-switcher a {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: 4px;
    transition: color var(--transition), background-color var(--transition);
}

.lang-switcher a:hover,
.lang-switcher a.current-lang {
    color: var(--color-primary);
    background-color: var(--color-bg-alt);
}

.lang-switcher a.current-lang {
    font-weight: 700;
}

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

.site-footer,
#colophon,
.footer-widget-area,
.ast-footer-copyright {
    background-color: #1B2A4A !important;
    color: #FFFFFF;
    font-size: 0.875rem;
}

/* Force all text inside the copyright bar to white */
.ast-footer-copyright,
.ast-footer-copyright * {
    color: #FFFFFF !important;
}

.site-footer a,
#colophon a,
.ast-footer-copyright a {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.site-footer a:hover,
#colophon a:hover,
.ast-footer-copyright a:hover {
    border-bottom-color: #FFFFFF;
}

/* Copyright bar — compact */
.ast-footer-bar,
.ast-small-footer,
.ast-footer-copyright {
    font-size: 0.65rem !important;
    line-height: 1.4 !important;
    padding: 0.5rem var(--spacing-sm);
}

/* ==========================================================================
   ASTRA OVERRIDES — Brand palette application
   ========================================================================== */

/* Page background */
.site-content,
.ast-site-content-wrap {
    background-color: var(--color-bg);
}

/* Header — Astra-specific bars override */
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header-bar {
    background-color: var(--color-primary) !important;
}

/* Header: site title */
.ast-site-identity .site-title a,
.ast-site-identity .site-title a:visited,
.site-header .site-title a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.ast-site-identity .site-title a:hover,
.site-header .site-title a:hover {
    color: var(--color-tertiary) !important;
    text-decoration: none !important;
}

/* Header: navigation links */
.main-header-bar .main-navigation a,
.main-header-bar .ast-nav-menu > li > a,
.main-header-bar .ast-primary-menu > li > a {
    color: #FFFFFF !important;
}

/* Header: navigation links hover + active */
.main-header-bar .main-navigation a:hover,
.main-header-bar .ast-nav-menu > li > a:hover,
.main-header-bar .ast-primary-menu > li > a:hover,
.main-header-bar .ast-primary-menu > li.current-menu-item > a {
    color: var(--color-secondary) !important;
}

/* Headings */
body h1,
body h2,
body h3,
body h4 {
    color: var(--color-primary);
}

/* Page title — centered */
.entry-title,
.page-title,
.ast-page-title-wrap .entry-title {
    text-align: center;
}

.ast-site-identity,
.site-branding {
    text-align: center;
    width: 100%;
}

/* Footer — remaining Astra structural elements */
.ast-small-footer,
.ast-footer-overlay,
#colophon .ast-row {
    background-color: #1B2A4A !important;
    color: #FFFFFF;
}

/* ==========================================================================
   GUIDES PAGE — zigzag layout
   ========================================================================== */

.guide-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 60px var(--spacing-md);
    width: 100%;
    background-color: var(--color-bg);
}

.guide-section.reverse,
.elementor-container.guide-section.reverse,
.e-con.guide-section.reverse {
    flex-direction: row-reverse !important;
    flex-wrap: nowrap !important;
    background-color: #FFFFFF;
}

.guide-photo {
    flex: 0 0 50%;
    max-width: 400px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    display: block;
}

.guide-info {
    flex: 1;
    padding: 40px;
}

.guide-info h2 {
    font-family: 'Lora', serif;
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0;
}

.guide-info h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-tertiary);
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.guide-info p {
    font-family: var(--font-body);
    line-height: 1.8;
    color: var(--color-text);
}

/* ==========================================================================
   RESPONSIVE — mobile (< 768px)
   ========================================================================== */

@media (max-width: 767px) {
    :root {
        --font-size-base: 15px;
        --spacing-lg: 2.5rem;
        --spacing-xl: 4rem;
    }

    .btn-booking,
    .btn-primary {
        width: 100%;
        text-align: center;
    }

    /* Amelia widget on mobile */
    .amelia-container,
    #amelia-app {
        padding: 0 !important;
        margin: 0 !important;
    }

    .trek-card__img {
        height: 180px;
    }

    /* Guides: stack vertically, photo on top */
    .guide-section,
    .guide-section.reverse {
        flex-direction: column;
        padding: 40px var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .guide-photo {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 3;
    }

    .guide-info {
        padding: var(--spacing-sm) 0;
    }

    .guide-info h2 {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   MOBILE HEADER LAYOUT (≤ 921px)
   [☰]  Lo Adventures  [🇫🇷 🇬🇧 🇻🇳]
   ========================================================================== */

@media (max-width: 921px) {
    /* Header layout on mobile */
    #ast-mobile-header .ast-builder-grid-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Hamburger on left */
    #ast-mobile-header .site-header-primary-section-right {
        order: 1 !important;
    }

    /* Title in center */
    #ast-mobile-header .site-header-primary-section-left {
        order: 2 !important;
        flex: 1 !important;
        text-align: center !important;
    }

    /* Language switcher: keep absolute positioning, shift clear of hamburger */
    .astra-lang-switcher {
        right: 55px !important;
        z-index: 9999 !important;
    }
}

/* ==========================================================================
   RESPONSIVE — tablet (768px - 1024px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .trek-card__img {
        height: 200px;
    }
}

/* ==========================================================================
   ELEMENTOR — hero banner (shared across all pages)
   ========================================================================== */

.e-con-boxed.e-parent {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
}

.e-con-inner h2 {
    color: var(--color-primary);
    font-family: 'Lora', serif;
}

.e-con-inner p {
    color: var(--color-primary);
}

/* ==========================================================================
   POLYLANG + ASTRA — zero out Astra's injected primary spacing on
   ast-plain-container pages (EN, ES, VI).

   Root cause: class-astra-dynamic-css.php (~line 1477) injects
   "margin-top: 60px" on .ast-plain-container.ast-no-sidebar #primary
   when the page title is visible. !important is required because that
   dynamic <style> block outranks stylesheet rules at equal specificity.
   ========================================================================== */

.ast-plain-container #primary,
.ast-plain-container .site-main,
.ast-plain-container #content > .ast-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.ast-plain-container .entry-header {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

.ast-plain-container .entry-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 20px !important;
}

/* ==========================================================================
   AST-PAGE-BUILDER-TEMPLATE — constrain FR (Elementor) pages to the same
   width and spacing as ast-plain-container (EN/ES/VI) pages.

   Astra's frontend.min.css (style-flex.min.css) deliberately widens
   page-builder pages so Elementor gets full control:
     .ast-page-builder-template .site-content > .ast-container
         { max-width: 100%; padding: 0 }
     .ast-page-builder-template .site-content #primary { padding:0; margin:0 }

   We override both rules so the Elementor canvas is constrained identically
   to what .ast-container gets from Astra's dynamic CSS:
     site-content-width (1200) + 40 px side padding = 1240 px.
   ========================================================================== */

/* Undo full-width container: restore the 1240 px cap Astra sets globally */
.ast-page-builder-template .site-content > .ast-container {
    max-width: 1240px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Mirror the plain-container spacing resets above */
.ast-page-builder-template #primary,
.ast-page-builder-template .site-main,
.ast-page-builder-template #content > .ast-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.ast-page-builder-template .entry-header {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

.ast-page-builder-template .entry-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 20px !important;
}

/* ==========================================================================
   Trekking prices shortcode — consistent width across body classes
   ========================================================================== */

.ast-page-builder-template .trek-prices {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}

/* ==========================================================================
   Elementor hero — keep inner content above background overlays
   ========================================================================== */

.e-con-boxed.e-parent .e-con-inner {
    position: relative;
    z-index: 2;
}

.e-con-boxed.e-parent .e-heading-base,
.e-con-boxed.e-parent .e-paragraph-base {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   CONTACT FORM [trekking_contact]
   ========================================================================== */

.trek-contact-wrap {
    max-width: 640px;
    margin: 0 auto;
}

.trek-contact-form__field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-sm);
}

.trek-contact-form__label {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}

.trek-contact-form__required {
    color: var(--color-accent-red);
}

.trek-contact-form__input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: #ffffff;
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
}

.trek-contact-form__input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.15);
}

.trek-contact-form__textarea {
    resize: vertical;
    min-height: 140px;
}

/* intl-tel-input — stretch to full width */
.trek-contact-form__field .iti {
    width: 100%;
}

.trek-contact-form__field .iti__selected-flag {
    border-right: 1.5px solid var(--color-border);
}

.trek-contact-form__error {
    display: none;
    color: var(--color-accent-red);
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

.trek-contact-form__actions {
    margin-top: var(--spacing-sm);
}

.trek-contact-form__feedback {
    margin-top: var(--spacing-sm);
    padding: 0.85rem 1rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    display: none;
}

.trek-contact-form__feedback--success {
    display: block;
    background-color: rgba(46, 139, 87, 0.1);
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
}

.trek-contact-form__feedback--error {
    display: block;
    background-color: rgba(192, 57, 43, 0.08);
    color: var(--color-accent-red);
    border: 1px solid var(--color-accent-red);
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */

/* Stretch Astra's content column to full width on the 404 page */
.error-404-template #primary,
.error-404-template .site-main {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.error-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    min-height: 60vh;
    width: 100%;
}

.error-404__number {
    font-family: var(--font-primary);
    font-size: clamp(6rem, 20vw, 10rem);
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.error-404__title {
    font-family: var(--font-primary);
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: var(--color-secondary);
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.error-404__message {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    max-width: 460px;
    margin-bottom: var(--spacing-md);
}

.error-404__btn {
    min-width: 200px;
    text-align: center;
}

/* ==========================================================================
   COMPLIANZ — cookie banner
   ========================================================================== */

.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-message p,
.cmplz-cookiebanner p,
#cmplz-cookiebanner p {
    color: #FFFFFF !important;
}

/* ==========================================================================
   FOOTER LEGAL LINKS
   ========================================================================== */

.ast-footer-links {
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}

.ast-footer-links a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 12px;
    opacity: 0.8;
    transition: opacity var(--transition);
}

.ast-footer-links a:hover {
    opacity: 1;
    text-decoration: underline !important;
}

.ast-footer-links span {
    color: #FFFFFF;
    opacity: 0.5;
    margin: 0 8px;
    font-size: 12px;
}

/* ==========================================================================
   SCROLL TO TOP BUTTON
   ========================================================================== */

#ast-scroll-top {
    background-color: var(--color-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--color-primary) !important;
}

#ast-scroll-top:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

#ast-scroll-top .ast-arrow-svg {
    fill: #FFFFFF !important;
}

/* Retractable tab — only 4px visible at the bottom, slides up on hover */
.cmplz-manage-consent {
    position: fixed !important;
    bottom: 0 !important;
    right: 20px !important;
    transform: translateY(calc(100% - 4px)) !important;
    transition: transform 0.3s ease !important;
    background-color: var(--color-primary) !important;
    color: #FFFFFF !important;
    padding: 8px 16px !important;
    border-radius: 6px 6px 0 0 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    z-index: 999 !important;
    opacity: 0.7 !important;
    display: inline-block !important;
    width: fit-content !important;
}

.cmplz-manage-consent:hover {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Footer link — reset all floating styles, keep as plain inline link */
.ast-footer-copyright .cmplz-manage-consent {
    position: static !important;
    transform: none !important;
    background: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    opacity: 1 !important;
    z-index: auto !important;
    display: inline !important;
    transition: color var(--transition) !important;
}

.ast-footer-copyright .cmplz-manage-consent:hover {
    transform: none !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
}