/* =========================================================================
   RTL / LTR Architecture
   Using logical CSS properties for proper bidirectional support
   ========================================================================= */

/* Persian (RTL) — Vazirmatn via CDN, luxury readable type */
html[lang="fa"] {
    --serif: "Vazirmatn", "Fraunces", serif;
    --sans: "Vazirmatn", "Inter", "Helvetica Neue", sans-serif;
    font-family: var(--sans);
    font-weight: 400;
    letter-spacing: 0;
    word-spacing: 0.02em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Vazirmatn renders visually larger than the Latin sans at the same
       rem value, so the whole rem scale is nudged down a touch here
       instead of overriding every individual font-size declaration. */
    font-size: 93.75%; /* ~15px against the 16px browser default */
}

@media (max-width: 480px) {
    html[lang="fa"] {
        font-size: 87.5%; /* ~14px on small phones, keeps headings from wrapping oddly */
    }
}

html[lang="fa"] body {
    font-family: var(--sans);
    line-height: 1.85;
    font-feature-settings: "ss01" 0;
}

html[lang="fa"] .serif,
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] h4,
html[lang="fa"] h5,
html[lang="fa"] h6,
html[lang="fa"] .hero-title,
html[lang="fa"] .provenance-title,
html[lang="fa"] .detail-title,
html[lang="fa"] .rug-title {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

/* Large display headings run noticeably bigger in Vazirmatn than in
   Fraunces at the same clamp() value — trim their upper bound for fa. */
html[lang="fa"] .hero-title { font-size: clamp(2.1rem, 6vw, 4.2rem); }
html[lang="fa"] .page-hero-title { font-size: clamp(2rem, 4.6vw, 3.4rem); }
html[lang="fa"] .about-hero-title,
html[lang="fa"] .journal-hero-title,
html[lang="fa"] .story-hero-title,
html[lang="fa"] .contact-hero-title { font-size: clamp(1.9rem, 4vw, 2.8rem); }
html[lang="fa"] .collection-title,
html[lang="fa"] .buying-guide-title,
html[lang="fa"] .faq-title,
html[lang="fa"] .showrooms-title,
html[lang="fa"] .team-title,
html[lang="fa"] .history-title { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
html[lang="fa"] .product-title,
html[lang="fa"] .rug-title,
html[lang="fa"] .hero-piece-title,
html[lang="fa"] .article-title { font-size: 1.15rem; }
html[lang="fa"] .collection-note-text { font-size: clamp(1.2rem, 2.1vw, 1.55rem); }

html[lang="fa"] .serif em,
html[lang="fa"] .hero-title em {
    font-style: normal;
    font-weight: 500;
    color: inherit;
}

html[lang="fa"] p,
html[lang="fa"] .hero-copy,
html[lang="fa"] .provenance-copy,
html[lang="fa"] li {
    line-height: 1.9;
}

html[lang="fa"] .eyebrow,
html[lang="fa"] .nav-link,
html[lang="fa"] .lang-button,
html[lang="fa"] .btn {
    font-family: var(--sans);
    letter-spacing: 0.04em;
}

html[lang="fa"] .eyebrow {
    font-weight: 500;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

html[lang="fa"] .btn,
html[lang="fa"] .btn span {
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Gallery header — fa nav/brand rebalancing lives further down,
   right after the header rebuild block, so it always wins the cascade. */

html[lang="fa"] .top-strip-track {
    letter-spacing: 0.06em;
}

/* Badges and small uppercase tags shrink further so Persian glyphs
   (which have taller ascenders/descenders) don't overflow their pill */
html[lang="fa"] .product-exclusive,
html[lang="fa"] .rug-exclusive,
html[lang="fa"] .article-tag,
html[lang="fa"] .filter-pill,
html[lang="fa"] .stat-label,
html[lang="fa"] .method-name,
html[lang="fa"] .footer-link,
html[lang="fa"] .showroom-link,
html[lang="fa"] .hero-piece-link,
html[lang="fa"] .product-link,
html[lang="fa"] .rug-link {
    letter-spacing: 0.02em;
}

/* Language Switcher Styling */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    border-left: 1px solid rgba(212, 163, 84, 0.2);
}

html[dir="rtl"] .language-switcher {
    border-left: none;
    border-right: 1px solid rgba(212, 163, 84, 0.2);
}

.lang-button {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.25rem 0;
    transition: color 200ms var(--ease-out);
}

.lang-button:hover {
    color: var(--saffron);
}

.lang-button--active {
    color: var(--saffron);
    font-weight: 700;
}

.lang-separator {
    color: rgba(212, 163, 84, 0.5);
    margin: 0 0.25rem;
}

/* Mobile Language Switcher */
.mobile-language-switcher {
    margin-block-start: 2rem;
    padding-block-start: 2rem;
    border-block-start: 1px solid var(--sand-mid);
}

.mobile-lang-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-block-start: 1rem;
}

.mobile-lang-button {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1.5px solid transparent;
    border-radius: 2px;
    transition: all 200ms var(--ease-out);
}

.mobile-lang-button:hover {
    color: var(--saffron);
    border-color: var(--saffron);
}

.mobile-lang-button--active {
    color: var(--sand-light);
    background: var(--saffron);
    border-color: var(--saffron);
    font-weight: 700;
}

/* Header Navigation Adjustments for RTL */
html[dir="rtl"] .nav {
    direction: rtl;
}

html[dir="rtl"] .desktop-nav {
    direction: rtl;
}

html[dir="rtl"] .nav-actions { direction: rtl; }
html[dir="rtl"] .brand-descriptor { letter-spacing: 0.06em; }
html[dir="rtl"] .mobile-menu-brand { flex-direction: row-reverse; }
html[dir="rtl"] .mobile-menu-brand strong { letter-spacing: 0.12em; }
html[dir="rtl"] .mobile-menu-brand small { letter-spacing: 0.04em; }

/* Gallery Header: mirror the placard layout itself, not just the text
   direction inside it — the primary links sit right of the monogram and
   the language toggle / enquire link sit to its left. */
@media (min-width: 900px) {
    html[dir="rtl"] .desktop-nav { grid-column: 3; justify-self: end; }
    html[dir="rtl"] .nav-actions { grid-column: 1; justify-self: start; }
}

@media (max-width: 899px) {
    html[dir="rtl"] .brand { grid-column: 3; justify-self: end; }
    html[dir="rtl"] .brand-lockup { align-items: flex-end; }
    html[dir="rtl"] .nav-actions { grid-column: 2; justify-self: start; }
    html[dir="rtl"] .menu-toggle { grid-column: 1; }
}

html[dir="rtl"] .top-strip-track {
    animation: scroll-rtl 40s linear infinite;
}

@keyframes scroll-rtl {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

html[dir="ltr"] .top-strip-track {
    animation: scroll-ltr 40s linear infinite;
}

@keyframes scroll-ltr {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

/* Logical Properties for Margins and Padding */
.container {
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* Flexbox alignment with RTL support */
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

html[dir="rtl"] .flex-between {
    flex-direction: row-reverse;
}

/* Button and Link Styling with RTL Support */
button,
a.button,
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-align: start;
}

html[dir="rtl"] button,
html[dir="rtl"] a.button,
html[dir="rtl"] .nav-link {
    text-align: end;
}

/* Icon alignment for RTL */
.icon-with-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

html[dir="rtl"] .icon-with-text {
    flex-direction: row-reverse;
}

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

html[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
}

.breadcrumb-separator {
    margin-inline: 0.5em;
}

/* Form Elements */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-end: 1.5rem;
}

.form-group label {
    font-weight: 500;
    text-align: start;
}

html[dir="rtl"] .form-group label {
    text-align: end;
}

input,
textarea,
select {
    direction: inherit;
}

html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
    text-align: right;
}

/* Cards with Image/Text */
.card {
    display: flex;
    flex-direction: column;
}

.card-with-image {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
}

html[dir="rtl"] .card-with-image {
    grid-template-columns: 1fr auto;
}

/* Align icons and SVGs correctly */
svg {
    direction: initial;
}

html[dir="rtl"] svg[role="img"] {
    transform: scaleX(-1);
}

/* Product Grid — card layout itself lives in styles.css and already
   uses logical properties (margin-inline-start, etc.), so it needs no
   RTL override here. */

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-block: 2rem;
}

html[dir="rtl"] .pagination {
    flex-direction: row-reverse;
}

.pagination-prev,
.pagination-next {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

html[dir="rtl"] .pagination-prev,
html[dir="rtl"] .pagination-next {
    flex-direction: row-reverse;
}

/* Text Alignment */
.text-start {
    text-align: start;
}

.text-end {
    text-align: end;
}

.text-center {
    text-align: center;
}

/* Float Properties (use inline instead) */
.float-start {
    float: inline-start;
}

.float-end {
    float: inline-end;
}

/* Clear and Margins/Padding using Logical Properties */
.margin-block-start {
    margin-block-start: 1rem;
}

.margin-block-end {
    margin-block-end: 1rem;
}

.margin-inline-start {
    margin-inline-start: 1rem;
}

.margin-inline-end {
    margin-inline-end: 1rem;
}

.padding-inline-start {
    padding-inline-start: 1rem;
}

.padding-inline-end {
    padding-inline-end: 1rem;
}

/* Border Adjustments */
.border-inline-start {
    border-inline-start: 1px solid currentColor;
}

.border-inline-end {
    border-inline-end: 1px solid currentColor;
}

/* Position and Placement */
.absolute-inline-start {
    position: absolute;
    inset-inline-start: 0;
}

.absolute-inline-end {
    position: absolute;
    inset-inline-end: 0;
}

/* Scroll Progress Bar - Position Adjustment */
#scroll-progress {
    left: 0;
}

html[dir="rtl"] #scroll-progress {
    left: auto;
    right: 0;
}

/* Mobile Menu Direction */
.mobile-menu-inner {
    left: 0;
}

html[dir="rtl"] .mobile-menu-inner {
    left: auto;
    right: 0;
    text-align: right;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .language-switcher {
        display: none;
    }

    .mobile-language-switcher {
        display: block;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .nav { flex-direction: row-reverse; }
    html[dir="rtl"] .mobile-menu-inner { direction: rtl; }
    html[dir="rtl"] .mobile-menu-footer { align-items: flex-start; }
}

@media (min-width: 769px) {
    .mobile-language-switcher {
        display: none;
    }
}

/* Smooth transitions for direction changes */
* {
    transition-property: background, color, border-color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: var(--ease-out);
}

/* Prevent color flashing on fast navigation */
html,
body {
    color-scheme: light dark;
}

html[lang="fa"] {
    color-scheme: light;
}

/* Mixed content (e.g., product codes, URLs) */
.product-code,
.identifier,
.technical-text {
    unicode-bidi: plaintext;
    direction: ltr;
}

/* Email and URL handling */
a[href^="mailto:"],
a[href^="http"] {
    unicode-bidi: plaintext;
    direction: ltr;
}

/* Number formatting */
.number,
.price,
.quantity {
    unicode-bidi: plaintext;
    direction: ltr;
}

/* Social links and icons */
.social-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

html[dir="rtl"] .social-links {
    flex-direction: row-reverse;
}

/* Footer adjustments */
html[dir="rtl"] .footer-column {
    text-align: right;
}

html[dir="rtl"] .footer-column:first-child {
    text-align: left;
}

/* Media query for ensuring proper RTL on mobile */
@media (max-width: 768px) {
    html[dir="rtl"] .mobile-nav-link,
    html[dir="rtl"] .mobile-menu-inner {
        text-align: right;
    }

    html[dir="rtl"] .nav-link-index {
        margin-inline-end: 0.5em;
        margin-inline-start: 0;
    }
}

/* Print styles */
@media print {
    .language-switcher,
    .mobile-language-switcher {
        display: none;
    }
}