/**
 * هلا قوانجوا — CSS Overrides
 * Phase 1 Integration Fix
 * Version: 1.0.0
 *
 * PURPOSE: This file loads AFTER main.css to restore Silk & Steel design-system
 * values that are overridden by legacy variable declarations in main.css.
 *
 * main.css redefines shared CSS custom property names:
 *   --radius-sm/md/lg/xl/full, --shadow-xs/sm/md/lg/xl, --font
 * in its own :root block, which wins over design-system.css since it loads later.
 *
 * This file corrects the cascade without modifying main.css (legacy file).
 */


/* ============================================================
   1. CSS VARIABLE RESTORATION
   Restore Silk & Steel values overridden by main.css :root block
   ============================================================ */

:root {
    /* --- Border Radius (main.css used 6/12/20/32/50px — too round) --- */
    --radius-sm:    0.25rem;    /* 4px  — was 6px  in main.css */
    --radius-md:    0.5rem;     /* 8px  — was 12px in main.css */
    --radius-lg:    0.75rem;    /* 12px — was 20px in main.css */
    --radius-xl:    1rem;       /* 16px — was 32px in main.css */
    --radius-full:  9999px;     /* pill — was 50px in main.css */

    /* --- Shadows (main.css used black rgba — Silk & Steel uses deep-navy) --- */
    --shadow-xs: 0 1px 2px rgba(26, 46, 59, 0.06);
    --shadow-sm: 0 1px 4px rgba(26, 46, 59, 0.08), 0 2px 8px rgba(26, 46, 59, 0.06);
    --shadow-md: 0 4px 12px rgba(26, 46, 59, 0.10), 0 2px 6px rgba(26, 46, 59, 0.08);
    --shadow-lg: 0 8px 24px rgba(26, 46, 59, 0.12), 0 4px 12px rgba(26, 46, 59, 0.08);
    --shadow-xl: 0 16px 40px rgba(26, 46, 59, 0.14), 0 8px 20px rgba(26, 46, 59, 0.10);

    /* --- Font Bridge ---
     * main.css: body { font-family: var(--font) } where --font = 'Cairo'
     * Redefining --font here makes every old var(--font) reference use the new font.
     */
    --font: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;

    /* --- Color Bridge ---
     * New brand palette: Teal #1E9BA6 / Dark Navy #0D3B66 / Orange #E65A2E
     * Redefining here propagates to all old var(--primary) references,
     * including .btn-primary in main.css, link hovers, hero section accents, etc.
     */
    --primary:      #1E9BA6;    /* was red → navy → now brand teal */
    --primary-dark: #157f89;    /* teal dark / hover */
    --primary-light:#52bec8;    /* teal light */
    --accent:       #E65A2E;    /* was amber/gold → now brand orange */
    --secondary:    #0D3B66;    /* dark navy */
}


/* ============================================================
   2. BODY FONT
   Explicitly set body font to IBM Plex Sans Arabic
   (main.css sets body { font-family: var(--font) } — now fixed via bridge above,
   but explicit rule here as a safety net)
   ============================================================ */

body {
    font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
}


/* ============================================================
   3. BUTTON COLOR FIX
   main.css .btn-primary uses var(--primary) which is now deep-navy via bridge.
   These rules confirm the correct Silk & Steel button appearance.
   ============================================================ */

.btn-primary {
    background-color: var(--color-teal);
    color: #ffffff;
    border-color: var(--color-teal);
}

.btn-primary:hover {
    background-color: var(--color-teal-dark);
    border-color: var(--color-teal-dark);
    color: #ffffff;
}

/* The .btn border-radius now uses restored --radius-full (9999px) */
/* No explicit override needed since variable is fixed above */


/* ============================================================
   4. SITE-HEADER V2 ISOLATION
   Ensure old .site-header rules in main.css don't bleed into .site-header-v2
   (They use different class names, but position:sticky was on old .site-header)
   ============================================================ */

/* Old header class — no longer in use, set to display:none as safety */
.site-header:not(.site-header-v2) {
    display: none !important;
}

/* Old footer class — no longer in use */
.site-footer:not(.site-footer-v2) {
    display: none !important;
}

/* Old back-to-top (main.css) — replaced by .back-to-top-v2 */
.back-to-top:not(.back-to-top-v2) {
    display: none !important;
}


/* ============================================================
   5. SEARCH BAR ISOLATION
   Old .search-bar-dropdown no longer used — replaced by .header-search-box
   ============================================================ */

.search-bar-dropdown {
    display: none !important;
}


/* ============================================================
   6. SITE-HEADER-V2 SPECIFICITY BOOST
   Ensure new header styles aren't affected by any lingering main.css rules
   ============================================================ */

.site-header-v2 {
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    height: var(--header-height) !important;
    background-color: var(--color-surface-white) !important;
}

.site-footer-v2 {
    background-color: var(--color-navy-dark) !important; /* #091e36 */
}


/* ============================================================
   7. SECTION PADDING CONFLICT FIX
   main.css has: section { padding: 80px 0 }  (generic element rule)
   This should NOT apply to homepage sections which manage their own padding.
   Reset it to 0 for hp-* sections; they define their own padding via class rules.
   ============================================================ */

/* Only .hp-hero lacks explicit class-based padding in homepage.css.
   main.css `section { padding: 80px 0 }` would otherwise add unwanted padding to it. */
section.hp-hero {
    padding-top: 0;
    padding-bottom: 0;
}
/* All other hp-* sections (.hp-section, .hp-stats, .hp-map, .hp-cta, .hp-imap) define
   their own padding via class selectors in homepage.css which are already more specific
   than the generic `section` rule — no override needed for them. */

/* ============================================================
   8. WORDPRESS ADMIN BAR OFFSETS
   When logged in, WP admin bar is position:fixed at top:0 (32px tall).
   Sticky header and fixed search box need to account for it.
   ============================================================ */

body.admin-bar .site-header-v2 {
    top: 32px !important;
}

body.admin-bar .header-search-box {
    top: calc(32px + var(--header-height)) !important;
}

body.admin-bar .mobile-menu {
    /* drawer starts below admin bar */
    padding-top: 32px;
}

@media screen and (max-width: 782px) {
    /* Admin bar collapses to 46px on small screens */
    body.admin-bar .site-header-v2 {
        top: 46px !important;
    }
    body.admin-bar .header-search-box {
        top: calc(46px + var(--header-height-mob)) !important;
    }
}

/* ============================================================
   9. SPACING & VERTICAL RHYTHM — PHASE 2 POLISH
   Reduce the generic section rule in main.css (section { padding: 80px 0 })
   for homepage sections that manage their own padding via design tokens.
   The .hp-* class rules have higher specificity, so this only catches
   bare <section> elements that somehow fall through.
   Also add visual separation to the articles section.
   ============================================================ */

/* Override main.css `section { padding: 80px 0 }` to use the design token */
section {
    padding: var(--spacing-section) 0;
}

/* Articles section — give it a subtle warm tint for visual separation */
#articles {
    background: var(--color-warm-sand-lt);
}

/* Reduce hero stats counter gap on mobile */
@media (max-width: 768px) {
    .hp-section-header {
        margin-bottom: 1.25rem;
    }

    .hp-imap {
        padding: var(--spacing-section-mob) 0;
    }

    .hp-cta {
        padding: 2.5rem 0;
    }

    .hp-cta__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem 1.5rem;
    }
}

/* ============================================================
   10. CARD IMAGE NORMALIZATION
   Standardize all card image containers to 3/2 aspect ratio
   and ensure images fill via object-fit: cover.
   ============================================================ */

/* Legacy padding-trick card (main.css) → modern aspect-ratio */
.place-card-img-link {
    padding-top: 0;
    aspect-ratio: 3 / 2;
    height: auto;
}

/* All card image wrappers → unified 3/2 ratio */
.place-card__image-wrap,
.hp-place-card__img-wrap,
.hp3-card__img-wrap {
    aspect-ratio: 3 / 2;
}

/* Ensure images fill their containers */
.place-card-img-link img,
.place-card__image-wrap img,
.hp-place-card__img-wrap img,
.hp3-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================================
   Hotels page — responsive tables (Fix 4)
   Prevent horizontal overflow caused by wide content tables.
   ============================================================ */
.page-id-432 .entry-content table,
.page-id-432 .page-content table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
    word-break: break-word;
}
@media (max-width: 768px) {
    .page-id-432 .entry-content table,
    .page-id-432 .page-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   11. MARKETS HUB PAGE (page-markets-guangzhou.php)
   ============================================================ */

/* Hero */
.markets-hero {
    text-align: center;
    padding: 2rem 0 2.5rem;
}
.markets-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-deep-navy);
    margin: 0.5rem 0 0.75rem;
}
.markets-hero__desc {
    color: var(--color-text-muted, #5a6470);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Three section cards grid */
.markets-sections {
    margin: 0 0 3rem;
}
.markets-sections__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 900px) {
    .markets-sections__grid { grid-template-columns: 1fr; gap: 1rem; }
}
@media (min-width: 601px) and (max-width: 900px) {
    .markets-sections__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Section card */
.market-section-card {
    display: flex;
    flex-direction: column;
    background: var(--white, #fff);
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid rgba(0,0,0,.07);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: transform .22s ease, box-shadow .22s ease;
    text-decoration: none;
    color: inherit;
}
.market-section-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    text-decoration: none;
}
.market-section-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem 0.75rem;
}
.market-section-card__icon .material-symbols-outlined {
    font-size: 2.8rem;
    color: var(--color-teal, #1E9BA6);
}
.market-section-card--malls .market-section-card__icon .material-symbols-outlined { color: var(--color-deep-navy, #0D3B66); }
.market-section-card--arabic .market-section-card__icon .material-symbols-outlined { color: var(--color-sage, #6DB59A); }

.market-section-card__body {
    flex: 1;
    padding: 0 1.25rem 1rem;
    text-align: center;
}
.market-section-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-deep-navy, #0D3B66);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}
.market-section-card__desc {
    font-size: 0.88rem;
    color: var(--color-text-muted, #5a6470);
    line-height: 1.6;
    margin: 0 0 0.75rem;
}
.market-section-card__count {
    display: inline-block;
    background: var(--color-teal, #1E9BA6);
    color: #fff;
    border-radius: 20px;
    padding: 0.2rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.market-section-card--malls .market-section-card__count { background: var(--color-deep-navy, #0D3B66); }
.market-section-card--arabic .market-section-card__count { background: var(--color-sage, #6DB59A); }

.market-section-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.85rem 1.25rem;
    background: rgba(30,155,166,.06);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-teal, #1E9BA6);
    border-top: 1px solid rgba(0,0,0,.05);
}
.market-section-card--malls .market-section-card__cta { background: rgba(13,59,102,.05); color: var(--color-deep-navy, #0D3B66); }
.market-section-card--arabic .market-section-card__cta { background: rgba(109,181,154,.08); color: #3a8c6e; }
.market-section-card__cta .material-symbols-outlined { font-size: 1.15rem; }

/* Guide articles section */
.markets-guides {
    margin-top: 2rem;
}
.markets-guides__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-deep-navy, #0D3B66);
    margin: 0 0 0.4rem;
}
.markets-guides__title .material-symbols-outlined { color: var(--color-teal, #1E9BA6); }
.markets-guides__desc {
    color: var(--color-text-muted, #5a6470);
    font-size: 0.95rem;
    margin: 0 0 1.25rem;
}
.markets-guides__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 600px) {
    .markets-guides__list { grid-template-columns: 1fr; }
}

.markets-guide-card {
    display: flex;
    gap: 1rem;
    background: var(--white, #fff);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
    align-items: stretch;
}
.markets-guide-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    transform: translateY(-2px);
    text-decoration: none;
}
.markets-guide-card__thumb {
    width: 90px;
    min-width: 90px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.markets-guide-card__thumb--placeholder {
    background: var(--color-warm-sand, #F4EFE6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.markets-guide-card__thumb--placeholder .material-symbols-outlined {
    font-size: 2rem;
    color: var(--color-teal, #1E9BA6);
    opacity: 0.6;
}
.markets-guide-card__body {
    flex: 1;
    padding: 0.85rem 0.85rem 0.85rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
[dir="rtl"] .markets-guide-card__body {
    padding: 0.85rem 0 0.85rem 0.85rem;
}
.markets-guide-card__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-deep-navy, #0D3B66);
    margin: 0 0 0.35rem;
    line-height: 1.4;
}
.markets-guide-card__excerpt {
    font-size: 0.8rem;
    color: var(--color-text-muted, #5a6470);
    line-height: 1.5;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.markets-guide-card__read {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-teal, #1E9BA6);
}
/* Featured first guide card (post 318) */
.markets-guide-card--featured {
    border: 2px solid var(--color-teal, #1E9BA6);
}
.markets-guide-card--featured .markets-guide-card__title {
    font-size: 1rem;
    color: var(--color-teal, #1E9BA6);
}
.markets-guide-card--featured .markets-guide-card__read {
    font-weight: 700;
}
/* Chinese trade websites section */
.markets-cn-sources { margin-top: 3rem; }
.markets-sections__grid--single { grid-template-columns: 1fr; max-width: 420px; }
.market-section-card--cn .market-section-card__icon .material-symbols-outlined { color: #3a7bd5; }
.market-section-card--cn .market-section-card__count { background: #3a7bd5; }
.market-section-card--cn .market-section-card__cta { background: rgba(58,123,213,.06); color: #3a7bd5; }

/* ============================================================
   12. RESTAURANT CUISINE PILLS — RTL DESKTOP OVERFLOW FIX
   At 1280px+ the 13 cuisine pills overflow LEFT in RTL layout
   because .arc-filter-group has flex-shrink:0 → group expands
   to max-content width (≈1350px) and clips 2 pills off-screen.
   Solution: full-width group + horizontal scroll on pills.
   ============================================================ */
.arc-filter-group.arc-rest-filter-group {
    flex-shrink: 1;
    min-width: 0;
    width: 100%;
}

.arc-filter-pills.arc-rest-cuisine-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
}

.arc-filter-pills.arc-rest-cuisine-pills::-webkit-scrollbar {
    height: 3px;
}

.arc-filter-pills.arc-rest-cuisine-pills::-webkit-scrollbar-thumb {
    background: var(--color-border, #e0e7f0);
    border-radius: 3px;
}