/*
Theme Name:     Traveler Childtheme
Description:    Traveler Child Theme - Voyage Icosium
Theme URI:      https://travelerwp.com/
Author:         the ShineTheme
Author URI:     http://shinetheme.com
Version:        1.0
Template:       traveler
*/

/* ============================================================
   HOMEPAGE - Hide banner and breadcrumbs
   WHY: Homepage will have its own Elementor hero section.
   The default banner shows "Accueil" over a placeholder.
   Breadcrumbs on homepage are pointless.
   ============================================================ */
body.home #st-content-wrapper > .banner,
body.home #st-content-wrapper > .st-breadcrumb {
    display: none !important;
}

/* WHY: Theme renders empty #topbar div even when topbar is OFF.
   It has a dark background and takes 48px of space for nothing. */
#header #topbar {
    display: none !important;
}

/* WHY: Theme outputs a hidden H1 "Voyage Icosium" in the header
   (tag_h1 class). Our page template has the real H1. Two H1s is
   bad for SEO. Hide the theme's one. */
h1.tag_h1 {
    display: none !important;
}

/* ============================================================
   GLOBAL - Override theme primary color to Icosium orange
   WHY: Theme default is blue (#3b71fe). Our brand is orange.
   This overrides the CSS custom properties set by the theme.
   ============================================================ */
:root {
    --main-color: #E8602A !important;
    --link-color-hover: rgba(232, 96, 42, 0.9) !important;
}

/* Active menu link color */
#header #main-menu > li.current-menu-item > a,
#header #main-menu > li.current-menu-ancestor > a {
    color: #E8602A !important;
}

/* Theme button overrides */
.btn,
.room-item .content .btn-show-price,
.room-item .content .show-detail,
.wp-block-search__button,
#gotop,
.form-submit .submit {
    background: #E8602A !important;
}

.btn:hover,
.room-item .content .btn-show-price:hover,
.room-item .content .show-detail:hover,
.wp-block-search__button:hover,
#gotop:hover,
.form-submit .submit:hover {
    background: #cc4f1e !important;
}

/* Theme link hover color */
a:hover {
    color: #E8602A;
}

/* Dropdown menu hover */
#header #main-menu .menu-dropdown > li > a:hover {
    color: #E8602A !important;
}

/* ============================================================
   WPML - Hide footer language bar
   WHY: Language switcher already exists in the header.
   ============================================================ */
#lang_sel_footer,
.wpml-ls-statics-footer {
    display: none !important;
}

/* ============================================================
   HEADER - Logo size
   WHY: Logo renders at 377x81px (max-height 91px from theme).
   Demo renders ~45px tall. Reduce to match.
   ============================================================ */
#header .header-left .logo img {
    max-height: 50px !important;
    width: auto !important;
}

/* ============================================================
   HEADER - Menu links: remove uppercase, set bold
   WHY: Theme defaults to uppercase + 600 weight.
   Demo uses normal case + 700 weight. Match that.
   Verified selector: #main-menu > li > a
   ============================================================ */
#header #main-menu > li > a {
    text-transform: none !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* ============================================================
   HEADER - Dropdown menu
   WHY: Matching demo (modtour.travelerwp.com) styles exactly.
   Class is .menu-dropdown not .sub-menu.
   Verified via JS inspection of both sites.
   ============================================================ */
#header #main-menu .menu-dropdown {
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05) !important;
    border: 1px solid #dedede !important;
    padding: 10px 0 !important;
    width: 230px !important;
    overflow: hidden !important;
}

#header #main-menu .menu-dropdown > li {
    padding: 0 30px !important;
}

#header #main-menu .menu-dropdown > li > a {
    padding: 15px 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    color: #232323 !important;
    border-bottom: none !important;
    line-height: 26px !important;
}

#header #main-menu .menu-dropdown > li > a:hover {
    color: #E8602A !important;
    background-color: #fef0e8 !important;
    margin: 0 -30px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* ============================================================
   HEADER - Dropdown animation
   WHY: Using translateY for smooth slide-up that stays below
   the header line. Transform doesn't affect layout position.
   ============================================================ */
body header .header #main-menu li.menu-item-has-children .menu-dropdown {
    top: 100% !important;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body header .header #main-menu li.menu-item-has-children:hover > .menu-dropdown {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================
   MEGA MENU: Découvrir l'Algérie regional destination grid
   WHY: 10 cities in a vertical list is too long. 4-column
   layout with regional headers (Nord, Ouest, Est, Sahara).
   Desktop only - mobile keeps default behavior.
   ============================================================ */

/* Hide default vertical dropdown on desktop for mega-menu parent */
@media (min-width: 992px) {
    #header #main-menu li.icosium-mega-parent > .menu-dropdown {
        display: none !important;
    }
}

/* Mega-menu container */
.icosium-mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 660px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.10);
    border: 1px solid #e8e8e8;
    padding: 24px 28px 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    z-index: 1000;
}

/* Show on hover */
#header #main-menu li.icosium-mega-parent:hover > .icosium-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 4-column grid */
.icosium-mega-menu__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Region header - padding-left matches city link padding for alignment */
.icosium-mega-col__title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #E8602A;
    margin-bottom: 10px;
    padding-bottom: 8px;
    padding-left: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* City list */
.icosium-mega-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.icosium-mega-col li {
    margin-bottom: 2px;
}

.icosium-mega-col a {
    display: block;
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    text-transform: none !important;
    line-height: 1.4 !important;
}

.icosium-mega-col a:hover {
    background: #fef0e8;
    color: #E8602A !important;
}

/* Footer link */
.icosium-mega-menu__footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
}

.icosium-mega-menu__footer a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: #E8602A !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.icosium-mega-menu__footer a:hover {
    text-decoration: underline !important;
}

/* Mobile: hide mega-menu entirely */
@media (max-width: 991px) {
    .icosium-mega-menu {
        display: none !important;
    }
}

/* ============================================================
   HEADER - Dropdown arrow
   WHY: Ours is 18px/900 (too large). Demo is 13px.
   Vertically center it with the menu text.
   ============================================================ */
/* Make the menu link a flex container so text + chevron align */
#header #main-menu > li.menu-item-has-children > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Override theme rule from _header.scss:536 that sets
   position:absolute + top:50% on the chevron.
   Removing absolute puts it back in the flex flow of the <a>. */
body header .header #main-menu li.menu-item-has-children .fa,
#header #main-menu > li.menu-item-has-children > a > i.fa-angle-down {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-top: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #5e6d77 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* ============================================================
   HEADER - Logo: prevent clipping
   WHY: "voyages" text at the bottom of the logo gets cropped.
   Theme rule: body header .header .header-left .logo img
   sets max-height:91px and overflow:clip.
   Using higher specificity with #header ID to guarantee override.
   ============================================================ */
body #header .header .header-left .logo {
    overflow: visible !important;
}

body #header .header .header-left .logo img {
    overflow: visible !important;
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* ============================================================
   FOOTER - OPC logo white background
   WHY: OPC logo has black text on transparent bg.
   On the dark footer it needs a white container.
   ============================================================ */
#main-footer .opc-logo-wrapper img {
    background: #ffffff;
    border-radius: 8px !important;
    padding: 6px 8px;
    max-width: 120px !important;
    display: block !important;
}

/* ============================================================
   FOOTER - Copyright bar link styling
   WHY: Legal links in the copyright bar should be subtle.
   ============================================================ */
#main-footer .ff_bar_right a,
#main-footer a {
    color: #888888;
    text-decoration: none;
}

#main-footer a:hover {
    color: #FFFFFF;
}

/* ============================================================
   FOOTER - Hide shortcode wrapper for year
   WHY: The [current_year] shortcode widget is only used to
   feed the year into the text widget. Hide it if it renders
   as a separate element.
   ============================================================ */
.footer-copyright-year {
    display: none;
}

/* ============================================================
   HEADER - Language switcher: flag only, no text
   WHY: Cleaner look. Show only the flag icon in the header.
   The dropdown on click still shows flag + language name.
   Using inline-flex to properly align flag + chevron.
   ============================================================ */
#header .dropdown-language > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0 !important;
}

#header .dropdown-language > a > img {
    width: 22px !important;
    height: auto !important;
    font-size: 0 !important;
}

/* Keep the dropdown arrow visible and centered with flag */
#header .dropdown-language > a > i.fa-angle-down {
    font-size: 12px !important;
    color: #5e6d77 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Language dropdown: positioned via pure CSS.
   Popper.js is disabled via JS in functions.php to prevent
   inline style conflicts. This gives us full CSS control. */
#header .dropdown-language {
    position: relative !important;
}

#header .dropdown-language .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 15px !important;
    transform: none !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05) !important;
    border: 1px solid #dedede !important;
    padding: 8px 0 !important;
    min-width: 140px !important;
}

/* Restore text size in the dropdown items */
#header .dropdown-language .dropdown-menu a {
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
}

#header .dropdown-language .dropdown-menu img {
    width: 18px !important;
    height: auto !important;
}

/* ============================================================
   MOBILE - Fix Quebec flag overlapping menu text
   WHY: The language switcher in mobile menu shows the flag
   overlapping the "Decouvrir l'Algerie" text.
   ============================================================ */
@media (max-width: 991px) {

    /* Reset desktop flex on menu links for mobile */
    #header #main-menu > li.menu-item-has-children > a {
        display: block !important;
    }

    /* Reset desktop chevron overrides for mobile.
       Let the theme handle mobile chevron positioning. */
    body header .header #main-menu li.menu-item-has-children .fa {
        position: absolute !important;
        top: 50% !important;
        margin-top: -9px !important;
        right: 5px !important;
        font-size: 16px !important;
        color: #1a2b48 !important;
    }

    /* Hide dropdown sub-menu in mobile entirely.
       WHY: Hamburger + dropdown is bad UX. Tapping
       "Decouvrir l'Algerie" goes to the page which
       lists all cities. City links also in footer. */
    #header #main-menu .menu-dropdown {
        display: none !important;
    }

    /* Hide the chevron arrow since there's no dropdown */
    #header #main-menu > li.menu-item-has-children > a > i.fa-angle-down {
        display: none !important;
    }

    /* Mobile menu link styling */
    #header #main-menu > li > a {
        font-size: 16px !important;
        font-weight: 600 !important;
        text-transform: none !important;
    }

    /* Mobile header: hamburger left, logo right-aligned */
    #header .header .header-left .logo.d-block.d-lg-none {
        margin-left: auto !important;
        margin-right: 0 !important;
        width: auto !important;
    }

    #header .header .header-left .logo.d-block.d-lg-none img {
        max-height: 28px !important;
    }

    /* Hide language switcher flag/chevron that overlaps under Accueil */
    #header .st-list-mobile {
        display: none !important;
    }

    /* Mobile dropdown reset for any other dropdowns */
    #header #main-menu .menu-dropdown > li {
        padding: 0 15px !important;
    }

    /* Hamburger icon: hide the rectangle border, keep the lines.
       WHY: Theme SVG has a <rect> box around the 3 lines.
       Demo doesn't show the box. Hide rect to get clean 3-line icon. */
    #header .toggle-menu svg rect {
        display: none !important;
    }

    #header .toggle-menu svg {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ============================================================
   MOBILE - Footer padding
   WHY: Footer content touches the left edge on mobile.
   Add side padding when columns stack.
   ============================================================ */
/* ============================================================
   TABLET - Menu: reduce size and spacing to fit one line
   WHY: 7 menu items + language flag wrap to 2 lines on iPad.
   ============================================================ */
@media (min-width: 992px) and (max-width: 1280px) {
    #header #main-menu > li > a {
        font-size: 12px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #header #main-menu > li.menu-item-has-children > a {
        gap: 3px !important;
    }

    #header .header {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ============================================================
   FOOTER - Background and internal padding
   WHY: White stripes appear between #main-footer and Elementor
   sections because dark bg is on sections, not the wrapper.
   Fix: dark bg on wrapper + padding on inner containers.
   ============================================================ */
#main-footer {
    background-color: #1B2133 !important;
}

/* Match footer content width to header's 50px side padding */
#main-footer .elementor-container {
    max-width: 100% !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
}

/* ============================================================
   FOOTER MOBILE (under 767px) - Minimal CSS overrides.
   Most responsiveness is handled in the Elementor template
   via align_mobile and padding_mobile settings.
   Only adding what Elementor can't handle natively.
   ============================================================ */
@media (max-width: 767px) {
    /* NUCLEAR RESET: Force all column widget-wraps to have
       zero padding and center alignment. Uses !important on
       the exact element to override Elementor inline styles. */
    #main-footer .elementor-column .elementor-widget-wrap.elementor-element-populated {
        padding: 10px 0 !important;
        align-items: center !important;
    }

    /* Force all columns full width */
    #main-footer .elementor-column {
        width: 100% !important;
    }

    /* Force copyright bar columns full width */
    #main-footer .elementor-section:last-child .elementor-column {
        width: 100% !important;
    }

    /* Center ALL widgets */
    #main-footer .elementor-widget {
        text-align: center !important;
        width: 100% !important;
    }

    /* Center images */
    #main-footer .elementor-widget-image {
        display: flex !important;
        justify-content: center !important;
    }

    /* Center text */
    #main-footer .elementor-widget-text-editor p {
        text-align: center !important;
    }

    /* Center icon list items */
    #main-footer .elementor-icon-list-item {
        justify-content: center !important;
    }

    #main-footer .elementor-icon-list-item a {
        justify-content: center !important;
    }

    /* Center social icons */
    #main-footer .elementor-social-icons-wrapper.elementor-grid {
        justify-content: center !important;
    }

    /* Center shortcode/copyright */
    #main-footer .elementor-shortcode {
        text-align: center !important;
    }
}

/* ============================================================
   ============================================================
   HOMEPAGE TEMPLATE STYLES
   ============================================================
   ============================================================ */

/* --- Layout --- */
.icosium-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.icosium-section {
    padding: 80px 0;
}

.icosium-section-header {
    text-align: center;
    margin-bottom: 48px;
}

.icosium-section-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1A2B48;
    margin-bottom: 12px;
}

.icosium-section-header p {
    font-size: 17px;
    color: #5E6D77;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.icosium-section-footer {
    text-align: center;
    margin-top: 40px;
}

/* --- Buttons --- */
.icosium-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.icosium-btn--primary {
    background: #E8602A;
    color: #fff;
    border-color: #E8602A;
}

.icosium-btn--primary:hover {
    background: #cc4f1e;
    border-color: #cc4f1e;
    color: #fff;
    text-decoration: none;
}

.icosium-btn--outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.icosium-btn--outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
    text-decoration: none;
}

.icosium-btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.icosium-btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
    text-decoration: none;
}

.icosium-btn--secondary {
    background: transparent;
    color: #E8602A;
    border-color: #E8602A;
}

.icosium-btn--secondary:hover {
    background: #E8602A;
    color: #fff;
    text-decoration: none;
}

.icosium-btn--large {
    padding: 16px 36px;
    font-size: 16px;
}

/* ============================================================
   HERO
   ============================================================ */
.icosium-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('/wp-content/uploads/homepage/hero-algeria.jpeg');
    background-color: #1A2B48;
    /* Prevent CLS: fixed dimensions for hero */
    contain: layout;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.icosium-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.icosium-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    max-width: 800px;
}

.icosium-hero__title {
    font-size: 52px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.icosium-hero__subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 36px;
}

.icosium-hero__buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   HIGHLIGHT CARDS
   ============================================================ */
.icosium-highlights {
    padding: 60px 0 80px;
    position: relative;
    z-index: 3;
}

.icosium-highlights__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.icosium-highlight-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.icosium-highlight-card:hover {
    transform: translateY(-4px);
    text-decoration: none;
}

/* Highlight card image (real <img> tag) */
.icosium-highlight-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.icosium-highlight-card:hover .icosium-highlight-card__img {
    transform: scale(1.05);
}

/* Dark blue tint overlay on both highlight cards */
.icosium-highlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(27, 33, 51, 0.5);
    z-index: 1;
    border-radius: 16px;
    transition: background 0.3s ease;
}

.icosium-highlight-card:hover::before {
    background: rgba(27, 33, 51, 0.4);
}

.icosium-highlight-card__content {
    position: relative;
    z-index: 2;
    padding: 32px;
    color: #fff;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);
}

.icosium-highlight-card__label {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.icosium-highlight-card__desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    line-height: 1.5;
}

.icosium-highlight-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* ============================================================
   DESTINATIONS GRID
   ============================================================ */
.icosium-destinations {
    background: #f8f9fb;
}

.icosium-destinations__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 16px;
}

/* First two cards (Alger, Djanet) span 2 columns each */
.icosium-dest-card.icosium-dest--large {
    grid-column: span 2;
    grid-row: span 1;
}

.icosium-dest-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.icosium-dest-card:hover {
    transform: translateY(-4px);
    text-decoration: none;
}

/* Destination card image (real <img> tag) */
.icosium-dest-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.icosium-dest-card:hover .icosium-dest-card__img {
    transform: scale(1.08);
}

/* Blue tint + bottom gradient for text readability */
.icosium-dest-card__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%),
        rgba(27, 33, 51, 0.3);
    z-index: 1;
    transition: background 0.3s ease;
}

.icosium-dest-card:hover .icosium-dest-card__overlay {
    background:
        linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%),
        rgba(27, 33, 51, 0.2);
}

.icosium-dest-card__content {
    position: relative;
    z-index: 2;
    padding: 20px 24px;
    color: #fff;
    width: 100%;
}

.icosium-dest-card__name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.icosium-dest-card__desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* City images are now real <img> tags with alt text and lazy loading */

/* ============================================================
   TRUST SECTION
   ============================================================ */
.icosium-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.icosium-trust-item {
    text-align: center;
    padding: 32px 20px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eaeef3;
    transition: box-shadow 0.3s ease;
}

.icosium-trust-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.icosium-trust-item__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef0e8;
    border-radius: 50%;
}

.icosium-trust-item__title {
    font-size: 17px;
    font-weight: 700;
    color: #1A2B48;
    margin-bottom: 10px;
}

.icosium-trust-item__desc {
    font-size: 14px;
    color: #5E6D77;
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   BLOG FEED
   ============================================================ */
.icosium-blog {
    background: #f8f9fb;
}

.icosium-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.icosium-blog-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eaeef3;
}

.icosium-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.icosium-blog-card__image {
    height: 200px;
    overflow: hidden;
}

.icosium-blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.icosium-blog-card:hover .icosium-blog-card__image img {
    transform: scale(1.05);
}

.icosium-blog-card__image--placeholder {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

.icosium-blog-card__content {
    padding: 24px;
}

.icosium-blog-card__date {
    font-size: 13px;
    color: #5E6D77;
    margin-bottom: 8px;
    display: block;
}

.icosium-blog-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #1A2B48;
    margin-bottom: 8px;
    line-height: 1.4;
}

.icosium-blog-card__excerpt {
    font-size: 14px;
    color: #5E6D77;
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.icosium-cta {
    position: relative;
    background: url('/wp-content/uploads/homepage/cta-sahara.webp') center/cover no-repeat;
    background-color: #1A2B48;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
}

.icosium-cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 43, 72, 0.75);
}

.icosium-cta__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}

.icosium-cta__content h2 {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}

.icosium-cta__content p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 32px;
}

.icosium-cta__buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   HOMEPAGE RESPONSIVE
   ============================================================ */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .icosium-hero__title {
        font-size: 40px;
    }

    .icosium-section {
        padding: 50px 0;
    }

    .icosium-section-header {
        margin-bottom: 36px;
    }

    .icosium-section-header h2 {
        font-size: 28px;
    }

    .icosium-highlights {
        padding: 50px 0 60px;
    }

    .icosium-highlights__grid {
        grid-template-columns: 1fr 1fr;
    }

    .icosium-highlight-card {
        min-height: 260px;
    }

    .icosium-destinations__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }

    .icosium-dest-card.icosium-dest--large {
        grid-column: span 1;
    }

    .icosium-trust__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .icosium-blog__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .icosium-cta {
        padding: 70px 0;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
    .icosium-hero {
        min-height: 65vh;
        background-image: url('/wp-content/uploads/homepage/hero-algeria-mobile.jpeg');
    }

    .icosium-hero__title {
        font-size: 28px;
    }

    .icosium-hero__subtitle {
        font-size: 14px;
    }

    .icosium-hero__subtitle br {
        display: none;
    }

    .icosium-hero__buttons {
        flex-direction: column;
        align-items: center;
    }

    .icosium-btn {
        width: 100%;
        max-width: 260px;
        justify-content: center;
        padding: 12px 24px;
        font-size: 14px;
    }

    .icosium-section {
        padding: 36px 0;
    }

    .icosium-container {
        padding: 0 16px;
    }

    .icosium-section-header {
        margin-bottom: 24px;
    }

    .icosium-section-header h2 {
        font-size: 22px;
    }

    .icosium-section-header p {
        font-size: 15px;
    }

    /* Highlights: stack on small phones */
    .icosium-highlights {
        padding: 36px 0 40px;
    }

    .icosium-highlights__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .icosium-highlight-card {
        min-height: 180px;
    }

    .icosium-highlight-card__label {
        font-size: 17px;
    }

    .icosium-highlight-card__desc {
        font-size: 14px;
    }

    /* Destinations: 2x2 grid to reduce scroll */
    .icosium-destinations__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
        gap: 10px;
    }

    .icosium-dest-card__name {
        font-size: 16px;
    }

    .icosium-dest-card__desc {
        font-size: 11px;
    }

    .icosium-dest-card__content {
        padding: 12px 14px;
    }

    /* Trust: 2x2 grid */
    .icosium-trust__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .icosium-trust-item {
        padding: 20px 12px;
    }

    .icosium-trust-item__icon {
        width: 56px;
        height: 56px;
        margin-bottom: 14px;
    }

    .icosium-trust-item__icon svg {
        width: 28px;
        height: 28px;
    }

    .icosium-trust-item__title {
        font-size: 14px;
    }

    .icosium-trust-item__desc {
        font-size: 12px;
    }

    /* Blog: keep 1 col, cards are content-heavy */
    .icosium-blog__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .icosium-blog-card__image {
        height: 160px;
    }

    .icosium-blog-card__content {
        padding: 16px;
    }

    /* CTA */
    .icosium-cta {
        padding: 48px 0;
    }

    .icosium-cta__content h2 {
        font-size: 24px;
    }

    .icosium-cta__content p {
        font-size: 15px;
    }

    .icosium-cta__buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Section footer buttons */
    .icosium-section-footer {
        margin-top: 28px;
    }
}


/* ============================================================
   DISCOVER ALGERIA HUB PAGE
   ============================================================ */

/* --- Hero Banner (shorter than homepage) --- */
.icosium-discover-hero {
    position: relative;
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.icosium-discover-hero__bg {
    position: absolute;
    inset: 0;
    /* PLACEHOLDER: replace with real image */
    background: linear-gradient(135deg, #1B2133 0%, #2a3a5c 100%);
    background-size: cover;
    background-position: center;
}

.icosium-discover-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.icosium-discover-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    max-width: 700px;
}

.icosium-discover-hero__title {
    font-size: 44px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
}

.icosium-discover-hero__subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

/* --- Introduction: text left + image right --- */
.icosium-discover-intro {
    padding: 60px 0;
}

.icosium-discover-intro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.icosium-discover-intro__lead {
    font-size: 19px;
    line-height: 1.7;
    color: #232323;
    margin-bottom: 20px;
}

.icosium-discover-intro__content p {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 16px;
}

.icosium-discover-intro__content p:last-child {
    margin-bottom: 0;
}

.icosium-discover-intro__image {
    position: relative;
}

.icosium-discover-intro__image img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
}

/* PLACEHOLDER: remove when real image added */
.icosium-discover-intro__img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background: linear-gradient(135deg, #1B2133 0%, #2a3a5c 50%, #E8602A 100%);
}

/* --- Region Sections --- */
.icosium-region {
    padding: 60px 0;
}

.icosium-region:nth-child(even) {
    background: #f8f9fb;
}

.icosium-region__header {
    margin-bottom: 36px;
}

.icosium-region__label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #E8602A;
    margin-bottom: 10px;
}

.icosium-region__title {
    font-size: 26px;
    font-weight: 700;
    color: #1B2133;
    margin: 0;
    line-height: 1.3;
}

/* --- Bento Grid Layouts --- */
.icosium-bento {
    display: grid;
    gap: 16px;
}

/* Nord: hero left (spans 2 rows), 2 small right */
.icosium-bento--nord {
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 190px 190px;
}

/* Ouest: 2 equal tall cards */
.icosium-bento--ouest {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 360px;
}

/* Est: both cards same height, hero card wider */
.icosium-bento--est {
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: 396px;
}

/* Both Est cards fill full row height */
.icosium-bento--est .icosium-bento-card {
    height: 100%;
}

.icosium-bento--est .icosium-bento-card--hero {
    grid-row: span 1;
}

/* Sahara: 3 equal cards */
.icosium-bento--sahara {
    grid-template-columns: 1fr 1.2fr 1fr;
    grid-template-rows: 380px;
}

/* --- Bento Cards --- */
.icosium-bento-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

.icosium-bento-card--hero {
    grid-row: span 2;
}

.icosium-bento-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.icosium-bento-card:hover .icosium-bento-card__img {
    transform: scale(1.06);
}

.icosium-bento-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.icosium-bento-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 20px 24px;
    color: #fff;
}

.icosium-bento-card__name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #fff;
}

.icosium-bento-card--hero .icosium-bento-card__name {
    font-size: 28px;
}

.icosium-bento-card__tagline {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.icosium-bento-card__desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, margin-top 0.3s ease;
    margin-top: 0;
}

.icosium-bento-card:hover .icosium-bento-card__desc {
    max-height: 100px;
    margin-top: 8px;
}

/* --- Persona Section: Dark + Asymmetric Cards --- */
.icosium-personas {
    background: #0f1219;
    padding: 70px 0;
}

.icosium-section-header--dark h2 {
    color: #fff;
}

.icosium-section-header--dark p {
    color: rgba(255, 255, 255, 0.5);
}

/* Grid: featured card left (spans 2 rows), 2 stacked right */
.icosium-personas__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 220px 220px;
    gap: 16px;
}

/* --- Persona Card Base --- */
.icosium-persona-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

.icosium-persona-card:hover {
    text-decoration: none;
}

.icosium-persona-card--featured {
    grid-row: span 2;
}

.icosium-persona-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.icosium-persona-card:hover .icosium-persona-card__img {
    transform: scale(1.06);
}

/* Diagonal gradient: dark navy → transparent. Shifts to orange on hover */
.icosium-persona-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(27, 33, 51, 0.85) 0%, rgba(0, 0, 0, 0.2) 100%);
    transition: background 0.4s ease;
}

.icosium-persona-card:hover .icosium-persona-card__overlay {
    background: linear-gradient(135deg, rgba(232, 96, 42, 0.75) 0%, rgba(0, 0, 0, 0.25) 100%);
}

/* Content */
/* Content pinned to bottom, flex column so chips align at end */
.icosium-persona-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    padding: 24px;
    padding-bottom: 22px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Same bottom padding on all cards so chips align across grid */
.icosium-persona-card--featured .icosium-persona-card__content {
    padding: 24px;
    padding-bottom: 22px;
}

.icosium-persona-card__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.icosium-persona-card__title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.2;
}

.icosium-persona-card--featured .icosium-persona-card__title {
    font-size: 26px;
    margin-bottom: 6px;
}

.icosium-persona-card__text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin-bottom: 10px;
}

.icosium-persona-card--featured .icosium-persona-card__text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

/* City chips — visible on all cards, pushed to bottom */
.icosium-persona-card__cities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    margin-bottom: 0;
}

.icosium-persona-card__chip {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 3px 10px;
    border-radius: 14px;
}

/* CTA — only on smaller cards */
.icosium-persona-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 8px;
}

/* CTA visible on all cards */

/* --- Practical Info ---
   WHY: Reuses homepage .icosium-trust-item classes directly.
   No duplicate CSS needed. Only override: 3-col grid for 6 items
   (homepage uses 4-col for 4 items). */
.icosium-section.icosium-trust + .icosium-section.icosium-trust {
    /* No extra styles needed — homepage classes handle everything */
}

/* Discover page trust grid: 3 columns for 6 items (vs homepage 4 for 4) */
#icosium-discover .icosium-trust__grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ============================================================
   DISCOVER PAGE — TABLET
   ============================================================ */
@media (max-width: 991px) {
    .icosium-discover-hero__title {
        font-size: 36px;
    }

    .icosium-discover-intro__grid {
        gap: 32px;
    }

    /* Bento: keep 2-col but reduce row heights */
    .icosium-bento--nord {
        grid-template-rows: 160px 160px;
    }

    .icosium-bento--est {
        grid-template-rows: 300px;
    }

    .icosium-bento--est .icosium-bento-card--hero {
        grid-row: span 1;
    }

    .icosium-bento--ouest {
        grid-template-rows: 280px;
    }

    .icosium-bento--sahara {
        grid-template-rows: 300px;
    }

    #icosium-discover .icosium-trust__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   DISCOVER PAGE — MOBILE
   ============================================================ */
@media (max-width: 767px) {
    .icosium-discover-hero {
        min-height: 35vh;
    }

    .icosium-discover-hero__title {
        font-size: 28px;
    }

    .icosium-discover-hero__subtitle {
        font-size: 15px;
    }

    .icosium-discover-intro {
        padding: 40px 0;
    }

    .icosium-discover-intro__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .icosium-discover-intro__lead {
        font-size: 17px;
    }

    .icosium-region {
        padding: 40px 0;
    }

    .icosium-region__title {
        font-size: 22px;
    }

    /* Bento: stack all cards on mobile */
    .icosium-bento--nord,
    .icosium-bento--ouest,
    .icosium-bento--est,
    .icosium-bento--sahara {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .icosium-bento-card {
        min-height: 200px;
    }

    .icosium-bento-card--hero {
        grid-row: span 1;
        min-height: 240px;
    }

    .icosium-bento-card__name {
        font-size: 18px;
    }

    .icosium-bento-card--hero .icosium-bento-card__name {
        font-size: 22px;
    }

    /* Description always visible on mobile (no hover) */
    .icosium-bento-card__desc {
        max-height: 100px;
        margin-top: 6px;
    }

    .icosium-personas__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 16px;
    }

    .icosium-persona-card--featured {
        grid-row: span 1;
    }

    .icosium-persona-card {
        min-height: 260px;
    }

    .icosium-persona-card--featured {
        min-height: 300px;
    }

    /* Show cities on all cards on mobile (no hover) */
    .icosium-persona-card__cities {
        display: flex;
    }

    .icosium-persona-card__text {
        margin-bottom: 12px;
    }

    .icosium-persona-card--featured .icosium-persona-card__title {
        font-size: 22px;
    }

    .icosium-persona-card--featured .icosium-persona-card__cta {
        display: inline-flex;
    }

    /* Discover trust grid uses same mobile styles as homepage trust grid */
}


/* ============================================================
   CITY PAGES — Minimal new CSS
   Only layout grids that don't exist yet.
   All card styles reuse existing components.
   ============================================================ */

/* Bento: 5 highlights (hero left spans 2 rows, 4 small in 2x2 right) */
.icosium-bento--highlights-5 {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 200px 200px;
}

.icosium-bento--highlights-5 .icosium-bento-card--hero {
    grid-row: span 2;
}

/* Bento: 4 equal cards */
.icosium-bento--4equal {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 240px;
}

/* Day trips: 2-column grid using dest-card */
.icosium-city-daytrips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    gap: 16px;
}

/* Related destinations: 3-column grid using dest-card */
.icosium-city-related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 16px;
}

/* Tours placeholder (Phase 2) */
.icosium-city-tours-placeholder {
    text-align: center;
    padding: 48px 24px;
    background: #f8f9fb;
    border-radius: 14px;
    border: 2px dashed #e0e0e0;
}

.icosium-city-tours-placeholder p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

/* Workshop badge (type + duration) */
.icosium-city-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #E8602A;
    margin-bottom: 6px;
}

/* ============================================================
   CITY PAGES — TABLET
   ============================================================ */
@media (max-width: 991px) {
    .icosium-bento--highlights-5 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 180px 180px;
    }

    .icosium-bento--highlights-5 .icosium-bento-card--hero {
        grid-column: span 2;
        grid-row: span 1;
    }

    .icosium-bento--4equal {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 200px 200px;
    }

    .icosium-city-related {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   CITY PAGES — MOBILE
   ============================================================ */
@media (max-width: 767px) {
    .icosium-bento--highlights-5 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .icosium-bento--highlights-5 .icosium-bento-card--hero {
        grid-column: span 1;
    }

    .icosium-bento--highlights-5 .icosium-bento-card {
        min-height: 200px;
    }

    .icosium-bento--4equal {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 180px;
    }

    .icosium-city-daytrips {
        grid-template-columns: 1fr;
        grid-auto-rows: 180px;
    }

    .icosium-city-related {
        grid-template-columns: 1fr;
        grid-auto-rows: 180px;
    }

    .icosium-city-tours-placeholder {
        padding: 32px 16px;
    }
}