/* ============================================================
   Real Viking — shared header/footer chrome ONLY.

   This file exists for the pages that still use the older Tailwind
   design (product, terms, privacy, refunds, checkout, account…) but
   include the shared Modernist nav and footer. It carries just enough
   CSS to style that chrome, and nothing else.

   Every selector is deliberately scoped to .nav / .site-footer so it
   cannot leak into page content or fight with Tailwind's resets.
   Do NOT add body/h1-h6/p/a/img rules here — modernist.css owns those,
   and on a Tailwind page they would break the layout.
   ============================================================ */

:root {
  --gk-bg: #f3f2f2;
  --gk-text: #201e1d;
  --gk-divider: rgba(32, 30, 29, 0.4);
  --gk-accent: #a3282c;
  --gk-accent-600: #8b1518;
  --gk-accent-700: #6d0b0d;
  --gk-shadow-md: 0 3px 10px rgba(45, 43, 43, 0.16);
  --gk-font: "Archivo", system-ui, sans-serif;
}

/* ---------- NAV ---------- */
.nav {
  display: flex; align-items: center;
  background: var(--gk-bg);
  border-bottom: 2px solid var(--gk-divider);
  position: relative;
  font-family: var(--gk-font);
}
.nav * { box-sizing: border-box; }
.nav .container {
  display: flex; align-items: center; gap: 40px; width: 100%;
  max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px);
}
.nav .nav-row { height: 76px; }
.nav .nav-brand {
  display: flex; align-items: center; gap: 8px; margin-right: auto;
  font-family: var(--gk-font); font-weight: 800; font-size: 18px;
  letter-spacing: 0.02em; white-space: nowrap;
  color: var(--gk-text); text-decoration: none;
}
.nav .nav-brand .dot { width: 8px; height: 8px; background: var(--gk-accent); flex: none; }
.nav a { color: var(--gk-text); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav a:hover { color: var(--gk-accent-700); }

.nav .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--gk-font); font-weight: 800; font-size: 14px; line-height: 1.2;
  padding: 10px 15px; border: 1px solid transparent; border-radius: 0;
  cursor: pointer; text-decoration: none;
}
.nav .btn-primary { background: var(--gk-accent); color: var(--gk-bg); }
.nav .btn-primary:hover { background: var(--gk-accent-600); color: var(--gk-bg); }

.nav .lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--gk-text); padding: 6px 12px;
  border: 2px solid var(--gk-divider);
}
.nav .lang-switch:hover { border-color: var(--gk-accent); color: var(--gk-accent-700); }

/* hamburger — hidden until the mobile breakpoint */
.nav .nav-toggle {
  display: none; margin-left: auto; flex: none;
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  background: transparent; border: 2px solid var(--gk-divider); cursor: pointer;
}
.nav .nav-toggle-bar { display: block; width: 18px; height: 2px; background: var(--gk-text); transition: transform .2s ease, opacity .2s ease; }
.nav .nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav .nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav .nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav .nav-mobile-menu { display: none; }

/* ---------- FOOTER ---------- */
footer.site-footer {
  box-sizing: border-box;
  max-width: 1240px; margin: 0 auto;
  padding: 48px clamp(16px, 4vw, 32px) 32px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px;
  font-family: var(--gk-font); font-size: 13px;
  color: rgba(32, 30, 29, 0.55);
  border-top: 2px solid var(--gk-divider);
}
footer.site-footer .nav-brand {
  font-family: var(--gk-font); font-weight: 800; font-size: 16px;
  color: var(--gk-text); text-decoration: none;
}
footer.site-footer .foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
footer.site-footer a { color: inherit; text-decoration: none; }
footer.site-footer a:hover { color: var(--gk-accent-700); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 880px) {
  .nav .nav-row { height: 68px; }
  .nav .nav-links-desktop { display: none !important; }
  .nav .nav-toggle { display: flex; }
  .nav .nav-mobile-menu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    background: var(--gk-bg); border-bottom: 2px solid var(--gk-divider);
    box-shadow: var(--gk-shadow-md);
    flex-direction: column; padding: 8px clamp(16px, 4vw, 32px) 20px;
  }
  .nav .nav-mobile-menu.is-open { display: flex; }
  .nav .nav-mobile-menu a {
    padding: 14px 4px; font-size: 15px;
    border-bottom: 1px solid rgba(32, 30, 29, 0.1);
  }
  .nav .nav-mobile-menu a.is-active { color: var(--gk-accent-700); font-weight: 700; }
  .nav .nav-mobile-menu a.btn { border-bottom: 0; }
  .nav .nav-mobile-menu .lang-switch { justify-content: center; margin-top: 10px; }
}

/* ---------- RTL ---------- */
html[dir="rtl"] .nav,
html[dir="rtl"] footer.site-footer {
  font-family: "Cairo", "Noto Kufi Arabic", system-ui, sans-serif;
}
html[dir="rtl"] .nav .nav-brand,
html[dir="rtl"] footer.site-footer .nav-brand { font-family: var(--gk-font); }
html[dir="rtl"] .nav .nav-brand { margin-right: 0; margin-left: auto; }
html[dir="rtl"] .nav .nav-toggle { margin-left: 0; margin-right: auto; }

/* ============================================================
   RTL corrections for the Tailwind pages (product, terms,
   privacy, refunds).

   Tailwind's directional utilities are physical (mr-2 is always
   "margin-right"), so they don't mirror under dir="rtl" the way
   flex and grid do. These flip only the handful actually used on
   those pages — checked against the markup, not applied blindly.
   ============================================================ */
html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }

/* Lightbox arrows and close button sit on fixed edges */
html[dir="rtl"] .absolute.left-2  { left: auto; right: 0.5rem; }
html[dir="rtl"] .absolute.right-2 { right: auto; left: 0.5rem; }
html[dir="rtl"] .absolute.left-6  { left: auto; right: 1.5rem; }
html[dir="rtl"] .absolute.right-6 { right: auto; left: 1.5rem; }
html[dir="rtl"] .absolute.right-4 { right: auto; left: 1rem; }

/* Bulleted requirement lists read from the right */
html[dir="rtl"] .list-inside { padding-right: 0; }

/* Prices and phone numbers must not reverse */
html[dir="rtl"] .ltr-num { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* Arabic body text on the Tailwind pages */
html[dir="rtl"] body { font-family: "Cairo", "Noto Kufi Arabic", system-ui, sans-serif; }