/* ===================================================================
   site-enhance.css  —  Law Office of Ali Parvand
   Shared responsive + RTL + polish layer.
   Loaded AFTER each page's inline <style>, so equal-specificity
   rules here win via source order. Purely additive: no existing
   layout is removed, only refined.
   Covers: iPhone 13 mini (375px) -> iPhone 17 Pro Max (~440px),
   Android phones, tablets, laptops, and large/ultra-wide desktops,
   plus full right-to-left (RTL) support for the Farsi (fa/) pages.
   =================================================================== */

/* Dropdowns match the text inputs and read correctly in RTL */
select.form-control { cursor: pointer; }
[dir="rtl"] select.form-control,
[dir="rtl"] .form-control { text-align: right; }

/* ---------- 0. Universal safety / polish ---------- */
img, video, svg { max-width: 100%; height: auto; }
img[width], img[height] { height: auto; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Never allow a stray element to cause sideways scrolling on phones */
html, body { max-width: 100%; overflow-x: hidden; }

/* Long words / emails / URLs wrap instead of overflowing on tiny screens */
p, li, a, h1, h2, h3, h4, td, span { overflow-wrap: break-word; }

/* Visible keyboard-focus outline for accessibility (forms, links, buttons) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.55);
    outline-offset: 2px;
}

/* Comfortable tap targets on touch devices */
@media (hover: none) and (pointer: coarse) {
    .nav-link,
    .dropdown-item a,
    .btn-primary,
    .btn-secondary,
    .btn-alert-red,
    .lang-switch {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .dropdown-item a { min-height: 40px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===================================================================
   1. LARGE / ULTRA-WIDE DESKTOPS
   Stop content from stretching edge-to-edge on big monitors.
   =================================================================== */
@media (min-width: 1600px) {
    .services-grid {
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
    .testimonials-grid { max-width: 1300px; }
}

@media (min-width: 2000px) {
    body { font-size: 18px; }
    .services-grid { max-width: 1700px; }
    .hero { max-width: 1800px; }
}

/* ===================================================================
   2. TABLETS & SMALL LAPTOPS  (<= 1024px)
   Sidebar already collapses to an off-canvas drawer in the page CSS.
   These rules refine the top bar + spacing so nothing crowds.
   =================================================================== */
@media (max-width: 1024px) {
    /* TOP BAR (mobile/tablet): one tidy single row.
       The menu toggle sits on the reading-start edge; the two CTAs stay
       grouped on the opposite edge. "Contact Us" is hidden here because
       it already lives in the side menu. Geometry is forced LTR so the
       math is identical in English and Persian. */
    .top-bar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        direction: ltr;
    }
    .top-bar .btn-secondary { display: none; }
    .mobile-toggle { order: 0; margin-right: auto; margin-left: 0; }              /* EN: toggle on the left */
    [dir="rtl"] .mobile-toggle { order: 9; margin-right: 0; margin-left: auto; }  /* FA: toggle on the right */
    .top-bar .btn-primary,
    .top-bar .btn-alert-red {
        white-space: nowrap;
        margin: 0;
    }
    .services-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

/* Tablet portrait */
@media (max-width: 820px) {
    .services-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* ===================================================================
   3. PHONES  (<= 600px)
   Generic large-phone tuning (covers iPhone Pro Max ~430px width).
   =================================================================== */
@media (max-width: 600px) {
    .services-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }

    /* Hero text scales fluidly so it never overflows */
    .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
    .hero p  { font-size: clamp(1rem, 4.2vw, 1.25rem); }

    .section-title { font-size: clamp(1.6rem, 6.5vw, 2.2rem); }

    /* Top-bar: toggle on the left, single action button on the right */
    .top-bar {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Footer columns stack and center */
    .main-footer { gap: 28px; }

    /* Forms: full width, 16px font to stop iOS auto-zoom on focus */
    .form-control,
    input, textarea, select {
        font-size: 16px !important;
        width: 100%;
    }
}

/* ===================================================================
   4. SMALL PHONES  (<= 430px)  — iPhone 13 mini / 14 / 15 / 16 / 17,
      Pixel, Galaxy S, etc.
   =================================================================== */
@media (max-width: 430px) {
    body { font-size: 16px; }

    .hero {
        margin: 14px 12px;
        padding: 38px 18px;
        border-radius: 16px;
    }
    .hero h1 { font-size: clamp(1.7rem, 8.5vw, 2.15rem); margin-bottom: 18px; }
    .hero p  { line-height: 1.7; }

    .services-section { padding: 0 16px 50px; }
    .about-section, .contact-section { padding-left: 16px; padding-right: 16px; }

    .section-title { margin-bottom: 32px; }

    /* Off-canvas drawer a touch narrower so it doesn't cover the page */
    .sidebar { width: 86vw; max-width: 320px; }

    /* Compact single-row top bar on small phones */
    .top-bar {
        height: auto;
        min-height: 64px;
        padding: 10px 12px;
    }
    .top-bar .btn-primary,
    .top-bar .btn-alert-red {
        padding: 8px 11px;
        font-size: 12px;
    }

    .service-content { padding: 24px; }
    .testimonial-card { padding: 36px 20px 22px; }

    .main-footer { padding: 40px 22px; }
}

/* ===================================================================
   5. VERY SMALL PHONES  (<= 360px)  — older / compact Androids
   =================================================================== */
@media (max-width: 360px) {
    .hero h1 { font-size: 1.55rem; }
    .top-bar .btn-primary,
    .top-bar .btn-alert-red {
        padding: 8px 11px;
        font-size: 11px;
    }
    .lang-switch { font-size: 14px; }
    .service-content { padding: 20px; }
}

/* ===================================================================
   6. LANDSCAPE PHONES — make sure the tall sidebar can scroll
   =================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .sidebar { overflow-y: auto; }
    .sidebar-header { padding-top: 20px; padding-bottom: 16px; }
    .logo-img { width: 110px; margin-bottom: 14px; }
}

/* ===================================================================
   7. RIGHT-TO-LEFT (Farsi) SUPPORT
   The Farsi pages set <html dir="rtl" lang="fa">. The page CSS uses
   physical left/right properties, so we mirror them here. These
   selectors are more specific than the base rules, so they win at
   every breakpoint regardless of source order.
   =================================================================== */

/* Force right-to-left flow + Persian-friendly type. The selector
   [dir="rtl"] body (0,1,1) beats any inline `body{direction:ltr}` (0,0,1),
   so the page reads RTL even if a page's own CSS says otherwise. */
[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: "Vazirmatn", "Inter", Tahoma, sans-serif;
}
/* Top bar uses fixed LTR geometry in both languages so button placement
   is fully predictable; the buttons' own text still renders correctly.
   Any stray auto-margins are zeroed so the action buttons stay grouped. */
[dir="rtl"] .top-bar { direction: ltr; }
[dir="rtl"] .top-bar .btn-secondary,
[dir="rtl"] .top-bar .btn-alert-red,
[dir="rtl"] .top-bar .btn-primary { margin-left: 0; margin-right: 0; }
/* Desktop Persian: group all three buttons together on the LEFT. */
@media (min-width: 1025px) {
    [dir="rtl"] .top-bar { justify-content: flex-start; }
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    font-family: "Vazirmatn", "Playfair Display", serif;
}

/* Sidebar moves to the right edge */
[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    box-shadow: -6px 0 30px rgba(0, 0, 0, 0.25);
}
[dir="rtl"] .nav-link.active {
    border-left: none;
    border-right: 5px solid var(--primary);
}

/* Main content sits to the left of the right-hand sidebar */
[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: 300px;
}

/* Top bar mirrors automatically because direction:rtl is set above, so
   the page's own `justify-content:flex-end` now resolves to the visual
   LEFT — all action buttons stay grouped together on the left. The
   mobile-only margin-auto flip lives in the <=1024px block below. */

/* Dropdown indentation flips */
[dir="rtl"] .dropdown-menu { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .dropdown-item a:hover { padding-left: 0; padding-right: 25px; }

/* Service / content accent bars + text alignment */
[dir="rtl"] .service-card,
[dir="rtl"] .about-text,
[dir="rtl"] .content-container,
[dir="rtl"] .policy-container { text-align: right; }

[dir="rtl"] .message-div,
[dir="rtl"] [style*="border-left"] { /* generic accent flip handled per-page where needed */ }

/* Testimonial quote mark flips to the right */
[dir="rtl"] .testimonial-card::before { left: auto; right: 28px; }
[dir="rtl"] .testimonial-author { } /* flex row already symmetric */

/* Lists indent on the correct side */
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.4em; padding-left: 0; }

/* Numbers / phones / emails stay LTR inside RTL text */
[dir="rtl"] .ltr,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* --- RTL on tablets/phones: drawer slides in from the right --- */
@media (max-width: 1024px) {
    [dir="rtl"] .sidebar { transform: translateX(100%); }
    [dir="rtl"] .sidebar.active { transform: translateX(0); }
    [dir="rtl"] .main-content { margin-right: 0; }
}