/* ==========================================================================
   Harvest & Hearth — rtl.css
   Right-to-left corrections, applied with <html dir="rtl">. RTL only.
   Most spacing already uses logical properties (margin-inline, inset-inline);
   this file mirrors everything that is physical or directional.
   ========================================================================== */

/* ---------- 0. Mixed-direction text ----------
   Copy written in English keeps its natural word and punctuation order inside
   each block, while alignment and layout stay mirrored. Real RTL copy
   (Arabic, Hebrew, Urdu) resolves to right-to-left automatically. */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] :where(h1, h2, h3, h4, p, li, dd, dt, blockquote, figcaption, label, td, th, .line, .stamp, .label, legend, button, .muted, .status, .chip, .tag, .note, .welcome-note, .btn, .toast, .count, .countdown, .seats, .sev, .preview-course, .mini-list span, .contents__item, .contents__item span, .nav-drop span,
  .pg, .folio__num, .km, .q, .price, .menu-item__desc, .menu-item__foot, .menu-item__price, time, option, summary span, .notif-list span, .footer-bottom span, .footer-bottom a, [role="note"] span, [role="note"] b, .mainnav span) { unicode-bidi: plaintext; }
/* handwritten SVG greeting keeps English order, aligned to the start (right) */
html[dir="rtl"] .welcome-svg { direction: ltr; margin-inline-start: auto; }

/* ---------- 1. Header, menu, dropdowns ---------- */
html[dir="rtl"] .mainnav a[aria-current="page"]::before { left: auto; right: 50%; transform: translateX(50%); }
html[dir="rtl"] .menu-toggle__lines::after { right: 0; left: 6px; }
html[dir="rtl"] .menu-toggle:hover .menu-toggle__lines::after { transform: translateX(-6px); }
html[dir="rtl"] .icon-btn:hover { transform: rotate(6deg); }
html[dir="rtl"] .notif-pop { right: auto; left: var(--gutter); transform-origin: top left; }
html[dir="rtl"] .skip-link { left: auto; right: 12px; }

html[dir="rtl"] .hero-split__polaroid { left: auto; right: -14%; --rot: 6deg; }
html[dir="rtl"] .hero-split__stamp { right: auto; left: -14px; }
@media (max-width: 599px) { html[dir="rtl"] .hero-split__stamp { left: 4px; right: auto; } }

/* ---------- 2. Links, buttons, arrows, icons ---------- */
html[dir="rtl"] .link-draw::after { transform-origin: right center; }
html[dir="rtl"] .btn .arrow, html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .play-btn svg { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 4px; }
html[dir="rtl"] .select { background-position: left 4px center; padding-inline-end: 2px; padding-inline-start: 24px; }
html[dir="rtl"] .pw-toggle { right: auto; left: 0; }
html[dir="rtl"] .input-wrap .input { padding-inline-end: 2px; padding-inline-start: 64px; }

/* ---------- 3. Editorial grid and hero ---------- */
html[dir="rtl"] .cover__polaroid { left: auto; right: -8%; --rot: 6deg; }
html[dir="rtl"] .cover__stamp { right: auto; left: -26px; --rot: 8deg; }
html[dir="rtl"] .cover__botanical--tl { right: auto; left: -26px; transform: rotate(-14deg); }
html[dir="rtl"] .cover__botanical--br { right: auto; left: 22%; transform: rotate(-18deg); }
html[dir="rtl"] .cover__pageno { left: auto; right: var(--gutter); }
html[dir="rtl"] .page-hero .botanical { right: auto; left: 2%; transform: scaleX(-1); }
@media (max-width: 759px) { html[dir="rtl"] .page-hero .botanical { left: -14px; } }
html[dir="rtl"] .dropcap::first-letter { float: right; padding: .06em 0 0 .1em; }
html[dir="rtl"] .stamp { --rot: 8deg; }
@media (max-width: 899px) {
  html[dir="rtl"] .cover__polaroid { right: -12%; left: auto; }
  html[dir="rtl"] .cover__stamp { left: -8px; right: auto; }
  html[dir="rtl"] .cover__botanical--br { right: auto; left: -30px; }
}

/* ---------- 4. Marquees (reverse direction) ---------- */
html[dir="rtl"] .marquee__track { animation-name: marqueeRtl; }
@keyframes marqueeRtl { to { transform: translateX(50%); } }

/* ---------- 5. Lists, map, wheel ---------- */
html[dir="rtl"] .menu-item__desc { text-align: right; }
html[dir="rtl"] .dish-row:hover { padding-inline-start: 18px; }
html[dir="rtl"] .wide-row:hover .wide-row__title { transform: translateX(-18px); }
html[dir="rtl"] .plate-tag::before { left: auto; right: -26px; }
html[dir="rtl"] .farm-card { direction: rtl; }
html[dir="rtl"] .wheel__pointer { left: auto; right: 50%; transform: translateX(50%); }

/* ---------- 6. Timelines and vine progress ---------- */
html[dir="rtl"] .tasting { padding-inline-start: 46px; }
html[dir="rtl"] .tasting__line { left: auto; right: 14px; }
html[dir="rtl"] .course::before { left: auto; right: -46px; }
html[dir="rtl"] .vine-progress { left: auto; right: 10px; transform: scaleX(-1); }
html[dir="rtl"] .milestone:nth-child(odd of .milestone) .leaf { right: auto; left: -67px; transform: scaleX(-1); }
html[dir="rtl"] .milestone:nth-child(even of .milestone) .leaf { left: auto; right: -67px; transform: none; }
@media (max-width: 759px) {
  html[dir="rtl"] .vine-timeline__svg { left: auto; right: 18px; transform: scaleX(-1); }
  html[dir="rtl"] .milestone .leaf,
  html[dir="rtl"] .milestone:nth-child(odd of .milestone) .leaf,
  html[dir="rtl"] .milestone:nth-child(even of .milestone) .leaf { left: auto; right: -56px; transform: scaleX(-1); }
}
html[dir="rtl"] .steps li::after { left: calc(-50% + 22px); right: calc(50% + 22px); }
html[dir="rtl"] .qa .answer { padding: 0 44px 22px 2px; }

/* ---------- 7. Side panels, modals, toasts (slide from the correct side) ---------- */
html[dir="rtl"] .side-panel { right: auto; left: 0; transform: translateX(-105%); box-shadow: 30px 0 60px -30px rgba(0,0,0,.4); }
html[dir="rtl"] .side-panel.is-open { transform: none; }
html[dir="rtl"] .modal__close { right: auto; left: 12px; }
html[dir="rtl"] .modal__card { transform: translateY(26px) rotate(1deg); }
html[dir="rtl"] .modal.is-open .modal__card { transform: none; }
html[dir="rtl"] .toast-stack { right: auto; left: 16px; }
html[dir="rtl"] .toast { transform: rotate(.6deg); }
html[dir="rtl"] .toast::before { left: auto; right: 22px; }
html[dir="rtl"] .back-to-top { right: auto; left: 18px; }
html[dir="rtl"] .hover-img figcaption { text-align: right; }


/* ---------- 9. Forms, chips, checkboxes, toggles ---------- */
html[dir="rtl"] .field .underline { transform-origin: right; }
html[dir="rtl"] .toggle .track::after { left: auto; right: 3px; }
html[dir="rtl"] .toggle input:checked + .track::after { transform: translateX(-20px); }
html[dir="rtl"] .strength i { transform-origin: right; }
html[dir="rtl"] .view-switch__ink { left: auto; right: 3px; }
html[dir="rtl"] .seats__bar i { transform-origin: right; }

/* ---------- 10. Calendars and tables ---------- */
html[dir="rtl"] .journal-table th { text-align: right; }
html[dir="rtl"] .calendar__head .cal-prev svg, html[dir="rtl"] .calendar__head .cal-next svg { transform: scaleX(-1); }
html[dir="rtl"] .calendar--events .cal-day .ev { border-inline-start: 2px solid var(--accent-ink); }

/* ---------- 11. Dashboard sidebar ---------- */
html[dir="rtl"] .dash-side { left: auto; right: 0; transform: translateX(105%); padding: 22px 18px 22px 0; }
html[dir="rtl"] .dash-side.is-open { transform: none; }
@media (min-width: 1024px) { html[dir="rtl"] .dash-side { transform: none; } }
html[dir="rtl"] .dash-tabs a, html[dir="rtl"] .dash-tabs button { border-radius: 0 6px 6px 0; }
html[dir="rtl"] .dash-tabs a:hover, html[dir="rtl"] .dash-tabs button:hover { transform: translateX(4px); }
html[dir="rtl"] .dash-tabs a[aria-current="page"] { transform: translateX(-1px); box-shadow: 6px 0 0 var(--accent) inset; }
html[dir="rtl"] .bell .dot { right: auto; left: 7px; }
html[dir="rtl"] .option input:checked + .option__body { box-shadow: -4px 4px 0 var(--accent); transform: translate(2px, -2px); }
html[dir="rtl"] .notif-list li.is-unread { box-shadow: -3px 0 0 var(--accent) inset; }

/* ---------- 12. Auth pages and footer ---------- */
html[dir="rtl"] .auth__visual .note { left: auto; right: 8%; transform: rotate(3deg); }
html[dir="rtl"] .footer-word { direction: ltr; } /* the wordmark keeps its letter order */
html[dir="rtl"] .socials a:hover { transform: translateY(-3px) rotate(8deg); }
html[dir="rtl"] .gift-card { transform: rotate(4deg); }
html[dir="rtl"] .invitation { transform: rotate(1deg); }
html[dir="rtl"] .polaroid { --rot: -3deg; }
html[dir="rtl"] .longtable__title { text-align: right; }
@media (max-width: 599px) {
  html[dir="rtl"] .hero-split__stamp, html[dir="rtl"] .cover__stamp { left: -10px; right: auto; }
  html[dir="rtl"] .hero-split__polaroid, html[dir="rtl"] .cover__polaroid { right: -9%; left: auto; }
}