/* ==========================================================================
   BTA33KAR - UI-P3-H4-B (2026-09-18) - v1.1
   Homepage section "View all" links.

   1.0 -> 1.1: the RTL arrow-mirror selector was anchored on the wrong element
   and matched zero nodes. 1.0 bytes are published and immutable, so the fix
   ships under this new filename. No other declaration differs.

   Scope
   -----
   Every selector is rooted at `body#page-home`, which the theme emits on
   `/` and `/ar` only (see functions/fixes-assets.php). Nothing here can
   reach the listing pages, the detail pages, the agents or news archives,
   the wishlist, or the header and footer.

   Ownership
   ---------
   This sheet styles exactly one new component, `.bta-section-more`, which
   exists only in the five homepage section partials edited in H4-B:
   featured-projects, properties-for-sale, properties-for-rent,
   featured-agents and latest-news. The recently-viewed section has NO
   link by design - there is no page that lists a visitor's recently
   viewed properties, and pointing the link at all properties would
   mislabel the destination.

   Tokens
   ------
   Only tokens that actually exist in public/css/bta-visual.css are used.
   `--bta-text-strong` and `--bta-accent` DO NOT EXIST in this codebase;
   the real names are `--bta-text-primary` and `--bta-brand`.

   Contrast (WCAG)
   ---------------
   --bta-brand #08519B on --bta-surface-raised #FFFFFF = 7.89:1
     - 1.4.3 text contrast (needs 4.5:1)          PASS
     - 1.4.11 component boundary (needs 3:1)      PASS
   --bta-border-strong (--bta-n-400 #A8ABA4) is deliberately NOT used for
   the boundary: it measures 2.33:1 against white and would fail 1.4.11.

   Focus
   -----
   No :focus-visible rule is declared here on purpose. public/css/
   bta-tokens.css:47 already gives every `a:focus-visible` a 3px #063A5D
   outline at 2px offset with a white 2px box-shadow, plus a
   `@supports not selector(:focus-visible)` fallback. A second declaration
   would only risk diverging from the site-wide ring.

   !important
   ----------
   None. The legacy anchor rules in style.css are all scoped to
   `.item .description a`, `.fr-grid-thumb a`, `.fr-can-name a`,
   `.agent-email a` and `.projecthome h2 a`; none of them matches
   `.bta-section-more__link`, so no override is required.

   Immutability
   ------------
   Published 1.0 bytes never change. A correction ships as
   bta-home-viewall-1.1.css under a new filename and a new registration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROW

   The wrapper is the grid's next sibling, so it inherits the section's
   content box and needs no gutter of its own. `flex-end` is
   direction-relative: it resolves to the right edge in LTR and the left
   edge in RTL, which is what "inline-end" means in both locales.
   -------------------------------------------------------------------------- */
body#page-home .bta-section-more {
    display: flex;
    justify-content: flex-end;
    margin-block-start: var(--bta-space-6);
}

/* --------------------------------------------------------------------------
   2. LINK

   `min-block-size` uses the site's own control height so the target
   matches every other 44px control shipped in P1/P2. The measured widest
   label (EN "View all properties for rent", 277px) fits the 360px content
   box (360 - 2 x 16px gutter = 328px) on a single line, so no wrapping
   rule is needed; `max-inline-size: 100%` is a guard against a future
   longer translation overflowing rather than wrapping.
   -------------------------------------------------------------------------- */
body#page-home .bta-section-more__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-block-size: var(--bta-control-height);
    max-inline-size: 100%;
    padding-block: 10px;
    padding-inline: 20px;

    border: 1px solid var(--bta-brand);
    border-radius: var(--bta-radius-md);
    background-color: var(--bta-surface-raised);
    box-shadow: none;

    color: var(--bta-brand);
    font-size: var(--bta-fs-body);
    font-weight: 600;
    line-height: var(--bta-lh-tight);
    text-decoration: none;

    transition: background-color var(--bta-motion-fast) var(--bta-ease),
                color var(--bta-motion-fast) var(--bta-ease),
                border-color var(--bta-motion-fast) var(--bta-ease);
}

/* --------------------------------------------------------------------------
   3. ARROW

   Decorative only, and generated content - it never enters the DOM, so it
   can never leak into the link's accessible name. `scaleX(-1)` mirrors it
   for Arabic, where reading runs right to left; the mirror is applied on
   the `dir` attribute the theme already sets on <body>.
   -------------------------------------------------------------------------- */
body#page-home .bta-section-more__link::after {
    content: "\2192";
    display: inline-block;
    font-size: 1.125em;
    line-height: 1;
}

/* The theme puts `dir="rtl"` on <body>, not on <html> (verified live:
   <html lang="ar"> carries no dir attribute). A descendant selector of the
   form `[dir="rtl"] body#page-home ...` therefore matches NOTHING, because it
   asks for a body nested inside an rtl element. 1.0 shipped that form and the
   arrow stayed unmirrored in Arabic; 1.1 anchors the attribute on the body
   itself. The descendant form is kept as a second selector so the rule still
   works if the attribute ever moves up to <html>. */
body#page-home[dir="rtl"] .bta-section-more__link::after,
[dir="rtl"] body#page-home .bta-section-more__link::after {
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   4. HOVER

   Filled brand on hover. #FFFFFF on #08519B is the same 7.89:1 pair
   inverted, so the hover state is as legible as the rest state. Hover is
   gated on a real hover pointer so a touch tap does not leave the button
   stuck in the filled state.
   -------------------------------------------------------------------------- */
@media (hover: hover) {
    body#page-home .bta-section-more__link:hover {
        background-color: var(--bta-brand);
        border-color: var(--bta-brand);
        color: var(--bta-brand-contrast);
    }
}

body#page-home .bta-section-more__link:active {
    background-color: var(--bta-brand-hover);
    border-color: var(--bta-brand-hover);
    color: var(--bta-brand-contrast);
}

@media (prefers-reduced-motion: reduce) {
    body#page-home .bta-section-more__link {
        transition: none;
    }
}