/*
 * country-t2.css — visual overrides for country T2 pages
 * (`/country/{slug}/{topic}/` + AR variant).
 *
 * Goal: T2 pages match the static-served country hub's visual system —
 * dark-blue sticky sidebar, hub-grade hero band, hub-style topic chip /
 * "Speak to an Expert" CTA card. The existing `page-compliance` template
 * already supplies the markup (rp-compliance-* classes) — this file restyles
 * it to align with the hub.
 *
 * Loaded on T2 routes only via `inc/country-t2-webflow-css.php` AFTER the
 * Webflow shared bundle, so it overrides Webflow's defaults where needed.
 */

/* ──────────────────────────────────────────────────────────────────────────
 * Layout — 2-col grid with sticky sidebar matching the hub
 * ────────────────────────────────────────────────────────────────────────── */

.rp-compliance .rp-compliance-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    padding: 60px 24px;
    max-width: 1252px;
    margin: 0 auto;
    align-items: start;
}

.rp-compliance .rp-compliance-content {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 1px 3px rgba(15, 16, 53, 0.04);
}

.rp-compliance .rp-compliance-content > * {
    max-width: 760px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Sidebar — dark-blue card, sticky, hub-style chip nav + CTA
 * ────────────────────────────────────────────────────────────────────────── */

.rp-compliance .rp-compliance-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
    background: #0a1f4f;             /* hub dark-blue */
    color: #fff;
    padding: 28px 24px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(10, 31, 79, 0.12);
}

.rp-compliance .rp-sidebar-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
}
.rp-compliance .rp-sidebar-back:hover { color: #fff; }
.rp-compliance .rp-sidebar-back-icon { width: 24px; height: 24px; filter: brightness(0) invert(1); }

.rp-compliance .rp-sidebar-toc:empty { display: none; }
.rp-compliance .rp-sidebar-toc {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.rp-compliance .rp-sidebar-nav-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 12px;
}

.rp-compliance .rp-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rp-compliance .rp-sidebar-link,
.rp-compliance .rp-sidebar-link-active,
.rp-compliance .rp-sidebar-link-disabled {
    display: block;
    padding: 10px 14px;
    border-left: 3px solid transparent;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    transition: color .15s, background .15s, border-color .15s;
}
.rp-compliance .rp-sidebar-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.rp-compliance .rp-sidebar-link-active {
    color: #fff;
    font-weight: 600;
    border-left-color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
}
.rp-compliance .rp-sidebar-link-disabled { color: rgba(255, 255, 255, 0.40); cursor: default; }
.rp-compliance .rp-sidebar-link-disabled small { font-weight: 400; opacity: 0.7; }

.rp-compliance .rp-sidebar-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.rp-compliance .rp-sidebar-cta-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin-bottom: 14px;
}
.rp-compliance .rp-sidebar-cta-btn {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: #fff;
    color: #0a1f4f;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.rp-compliance .rp-sidebar-cta-btn:hover { background: #f0f4ff; }

/* ──────────────────────────────────────────────────────────────────────────
 * Hero — match hub's gradient band with breadcrumb + H1 + CTA
 * ────────────────────────────────────────────────────────────────────────── */

.rp-compliance .rp-compliance-hero-section {
    background: linear-gradient(135deg, #0a1f4f 0%, #1a3a8e 100%);
    padding: 56px 0 72px;
}

.rp-compliance .rp-compliance-hero-content {
    color: #fff;
    max-width: 1252px;
    margin: 0 auto;
    padding: 0 24px;
}

.rp-compliance .rp-compliance-breadcrumbs,
.rp-compliance .rp-compliance-breadcrumbs a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 16px;
}
.rp-compliance .rp-compliance-breadcrumbs a:hover { color: #fff; text-decoration: underline; }

.rp-compliance .rp-compliance-h1.wp-block-post-title {
    color: #fff;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 16px 0 16px;
}

.rp-compliance .rp-compliance-hero-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    line-height: 1.55;
    max-width: 720px;
    margin-bottom: 24px;
}

.rp-compliance .rp-compliance-cta-btn,
.rp-compliance a.rp-compliance-cta-btn {
    display: inline-block;
    padding: 14px 26px;
    background: #114ef7;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: background .15s;
}
.rp-compliance .rp-compliance-cta-btn:hover { background: #0d3fcc; }

/* ──────────────────────────────────────────────────────────────────────────
 * Body content typography
 * ────────────────────────────────────────────────────────────────────────── */

.rp-compliance .rp-compliance-content p {
    line-height: 1.7;
    color: #2a3656;
    margin-bottom: 18px;
}
.rp-compliance .rp-compliance-content h2 {
    font-size: 28px;
    line-height: 1.25;
    margin: 40px 0 16px;
    color: #0f1035;
}
.rp-compliance .rp-compliance-content h3 {
    font-size: 22px;
    line-height: 1.3;
    margin: 32px 0 12px;
    color: #0f1035;
}
.rp-compliance .rp-compliance-content ul,
.rp-compliance .rp-compliance-content ol {
    margin-bottom: 18px;
    padding-left: 24px;
}
.rp-compliance .rp-compliance-content li {
    line-height: 1.7;
    color: #2a3656;
    margin-bottom: 6px;
}
.rp-compliance .rp-compliance-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
}
.rp-compliance .rp-compliance-content table th,
.rp-compliance .rp-compliance-content table td {
    padding: 10px 12px;
    border: 1px solid #e3e8f3;
    text-align: left;
    vertical-align: top;
}
.rp-compliance .rp-compliance-content table th {
    background: #f5f8ff;
    font-weight: 600;
    color: #0f1035;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Bottom CTA band — hub-style "Speak to an Expert"
 * ────────────────────────────────────────────────────────────────────────── */

.rp-compliance .rp-compliance-cta-text-group {
    margin-top: 60px;
    padding: 40px;
    background: #f5f8ff;
    border-radius: 16px;
    text-align: center;
}
.rp-compliance .rp-compliance-cta-heading {
    font-size: 26px;
    line-height: 1.3;
    color: #0f1035;
    font-weight: 700;
    margin-bottom: 12px;
}
.rp-compliance .rp-compliance-cta-text {
    font-size: 16px;
    color: #5a6a85;
    margin-bottom: 24px;
}
.rp-compliance .rp-compliance-cta-btn-wrap { text-align: center; }

/* ──────────────────────────────────────────────────────────────────────────
 * RTL — sidebar border-left → border-right; grid column flip
 * ────────────────────────────────────────────────────────────────────────── */

/* 2026-05-15 fix: keep the same column sizes in RTL — the browser flips
   the visual order automatically. Previous "1fr 280px" was making the
   SIDEBAR 1fr (huge) and the CONTENT 280px (squeezed), exactly backwards. */
[dir="rtl"] .rp-compliance .rp-compliance-layout {
    grid-template-columns: 280px 1fr;
}
[dir="rtl"] .rp-compliance .rp-sidebar-link,
[dir="rtl"] .rp-compliance .rp-sidebar-link-active,
[dir="rtl"] .rp-compliance .rp-sidebar-link-disabled {
    border-left: none;
    border-right: 3px solid transparent;
}
[dir="rtl"] .rp-compliance .rp-sidebar-link-active {
    border-right-color: #ffffff;
}
[dir="rtl"] .rp-compliance .rp-compliance-content ul,
[dir="rtl"] .rp-compliance .rp-compliance-content ol {
    padding-left: 0;
    padding-right: 24px;
}
[dir="rtl"] .rp-compliance .rp-compliance-content table th,
[dir="rtl"] .rp-compliance .rp-compliance-content table td {
    text-align: right;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Responsive — collapse to single column under 991px
 * ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .rp-compliance .rp-compliance-layout,
    [dir="rtl"] .rp-compliance .rp-compliance-layout {
        grid-template-columns: 1fr;
    }
    .rp-compliance .rp-compliance-sidebar {
        position: relative;
        top: auto;
    }
    .rp-compliance .rp-compliance-content { padding: 28px; }
    .rp-compliance .rp-compliance-h1.wp-block-post-title { font-size: 36px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 2026-05-14: Mega menu + stat-card overrides for WP-rendered T2 pages.
 * Background: T2 pages load Webflow's CSS bundle (remotepass-v2.webflow.css
 * + webflow.css) for body rendering. The Webflow bundle sets
 *   .w-nav { background-color: #ddd }
 * which clobbers our local mega-menu navbar to gray. We override here.
 *
 * The stat-card grid (Quick Reference facts below the hero) had no width
 * constraint — cards stretched full viewport width, breaking visual rhythm
 * vs the narrower content sections below. Constrain + pill-shape them.
 * ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
 * 2026-05-14 (revised AGAIN): T2 page surgical fixes per Greg's repeated
 * feedback to stop "creating a new menu".
 *
 * We KEEP only the structural hides (sections that shouldn't appear on T2):
 *   - .rp-stat-cards duplicate row (Quick Reference panel in hero already
 *     covers it)
 *   - .reviews-band (6100px of empty yellow)
 *   - .rp-compliance-cross-links-wrapper ("Related UAE Compliance Guides" —
 *     sidebar TOC already links these)
 *   - .rp-trust-bar ("Verified by legal experts in UAE — Back to Country
 *     Guide" strip above hero; adds whitespace, info is in hero already)
 *
 * We REMOVED all the navbar styling overrides (.rp-navbar bg, position,
 * size, flex, etc) because they were "creating a new menu". The menu is now
 * styled entirely by mega-menu.min.css — same as the country hub. The
 * webflow CSS bundle ordering fix below ensures mega-menu wins the cascade.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Hide the redundant Quick Reference duplicate row ── */
.rp-compliance .rp-compliance-stats-wrapper,
.rp-compliance .rp-stat-cards {
    display: none !important;
}

/* ── Hide the broken 6100px reviews band ── */
.rp-section.reviews-band,
.rp-section.new-footer-awards-orange.reviews-band {
    display: none !important;
}

/* ── Hide "Related UAE Compliance Guides" — the sidebar already links them ── */
.rp-compliance-cross-links-wrapper { display: none !important; }

/* ── Hide the "Verified by legal experts in UAE — Back to Country Guide" trust
       bar above the hero. Adds whitespace; the hero already shows the
       breadcrumb + back link. ── */
.rp-trust-bar { display: none !important; }

/* ── Anchor nav strip (Key Rules / Legal Framework / Contracts / Working Hours
   / etc) below the hero. Live's webflow.css forces .rp-anchor-nav full-viewport
   width with no centering. Constrain + center so the first pill lines up with
   the menu logo above. ── */
.rp-anchor-nav {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 24px !important;
    box-sizing: border-box;
    float: none !important;
    width: 100% !important;
}
.rp-anchor-nav-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.rp-anchor-nav-tabs {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rp-anchor-tab {
    padding: 8px 14px;
    border-radius: 999px;
    font-family: "Mulish", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0f1035;
    text-decoration: none;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.rp-anchor-tab:hover, .rp-anchor-tab.is-active {
    background-color: #f0f4fe;
    color: #114ef7;
}
.rp-anchor-tab.is-broken { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
 * 2026-05-14 (revised again): Force navbar internal element sizes to match
 * homepage. Webflow's webflow.css + remotepass-v2.webflow.css load on T2
 * pages for body styling, but they shrink .rp-logo / .new-rp-nav-logo /
 * .w-nav-brand / nav links to smaller sizes than the homepage. Override.
 * ────────────────────────────────────────────────────────────────────────── */

.rp-navbar .new-rp-nav-logo,
.rp-navbar .rp-logo {
    width: 196px !important;
    height: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
}

.rp-navbar .w-nav-brand {
    flex-shrink: 0 !important;
    margin-right: 32px;
}

/* Nav menu link sizing — match the homepage's 15px / 600 weight */
.rp-navbar .rp-nav-menu > a.rp-nav-link,
.rp-navbar .rp-mega-toggle .rp-nav-link {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Login + Book A Demo buttons — match homepage sizing */
.rp-navbar .nav-btn-group .btn.nav-btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
}

/* Navbar container — match homepage padding + height */
.rp-navbar {
    min-height: 80px !important;
    padding: 0 !important;
}
.rp-navbar .rp-nav-container {
    padding: 16px 32px !important;
    align-items: center !important;
}


/* 2026-05-15: Menu items wrap on T2 because the .rp-nav-container is 1300px
   (vs ~1376px on homepage), leaving less space for .rp-nav-menu, and the
   toggles flex-shrink to fit. Force the text spans to nowrap so each label
   ("Who we serve", "Customer stories", "Content hub") renders on one line. */
.rp-navbar .rp-mega-toggle .rp-nav-link,
.rp-navbar .rp-nav-menu > a.rp-nav-link {
    white-space: nowrap !important;
}

/* Country flag + Login/Book A Demo button group — both render correctly on
   homepage but T2 has slightly tighter container width, causing the .w-container
   flex-shrink to squish the flag to a dot and the .nav-btn-group to wrap. */
.rp-navbar .header-language-menu-img {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}
.rp-navbar .header-language-menu-container {
    width: auto !important;
    max-width: none !important;
    gap: 6px;
}
.rp-navbar .nav-btn-group {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px;
}
.rp-navbar .nav-btn-group .btn.nav-btn,
.rp-navbar .btn.nav-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}