/* seo-engine/assets/intl.css
   Layout + real RTL support for generated landing pages. Uses CSS logical
   properties (margin-inline, padding-inline, inset-inline) so Arabic/Persian
   (dir="rtl") mirror correctly — not merely right-aligned text (spec §44).
   Inherits colour tokens from the site design system (/styles.css). */

.fv-intl {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink, #1c1a17);
  background: var(--paper, #f4efe6);
  margin: 0;
  line-height: 1.6;
}
.fv-intl h1, .fv-intl h2, .fv-intl h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  color: var(--ink, #1c1a17);
  line-height: 1.15;
}

/* RTL: adjust font stacks that render Arabic/Persian better. */
[dir="rtl"].fv-intl,
[dir="rtl"] .fv-intl { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif; }
[dir="rtl"] .fv-intl h1,
[dir="rtl"].fv-intl h1 { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", serif; }

.fv-skip {
  position: absolute;
  inset-inline-start: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: .6rem 1rem;
  z-index: 100;
}
.fv-skip:focus { inset-inline-start: 1rem; inset-block-start: 1rem; }

.fv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-block-end: 1px solid var(--rule, #d9d0be);
  background: var(--paper-card, #fbf8f1);
}
.fv-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; text-decoration: none; color: var(--ink); font-size: 1.1rem; }
.fv-brand img { border-radius: 6px; }

.fv-lang { display: flex; flex-wrap: wrap; gap: .35rem .7rem; font-size: .82rem; max-inline-size: 60ch; }
.fv-lang a { color: var(--ink-3, #6a6453); text-decoration: none; }
.fv-lang a:hover { color: var(--accent-deep, #6b4f26); text-decoration: underline; }
.fv-lang-current { font-weight: 600; color: var(--ink); }

.fv-crumbs { padding: .8rem clamp(1rem, 4vw, 3rem); font-size: .85rem; }
.fv-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.fv-crumbs a { color: var(--ink-3); text-decoration: none; }
.fv-crumbs .sep { color: var(--rule-2, #bfb39a); }
[dir="rtl"] .fv-crumbs .sep { transform: scaleX(-1); }

.fv-main { max-inline-size: 74ch; margin-inline: auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 4rem; }
.fv-hero { padding-block: 1.5rem 2rem; border-block-end: 1px solid var(--rule); margin-block-end: 1.5rem; }
.fv-hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin-block: 0 .8rem; }
.fv-convenience { font-weight: 600; color: var(--accent-deep, #6b4f26); }
.fv-disclaimer { font-size: .85rem; color: var(--ink-3); }
.fv-hotel-disclaimer { border-inline-start: 3px solid var(--rule-2); padding-inline-start: .9rem; background: var(--paper-2, #ebe4d6); padding: .8rem .9rem; border-radius: 6px; }

.fv-section { margin-block: 2rem; }
.fv-section h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-block: 0 .7rem; }
.fv-section ul { padding-inline-start: 1.2rem; }

.fv-btn {
  display: inline-block;
  padding: .7rem 1.2rem;
  border-radius: 8px;
  border: 1px solid var(--rule-2, #bfb39a);
  background: var(--paper-card);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.fv-btn-accent { background: var(--accent-btn, #8c6a34); border-color: var(--accent-btn, #8c6a34); color: #fff; }
.fv-btn-lg { padding: .9rem 1.6rem; font-size: 1.05rem; }
.fv-btn:focus-visible, .fv-lang a:focus-visible, .fv-crumbs a:focus-visible { outline: 3px solid var(--accent-deep, #6b4f26); outline-offset: 2px; }

.fv-contact-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1rem; }

.fv-form { display: grid; gap: .9rem; max-inline-size: 46ch; }
.fv-form label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; }
.fv-form input, .fv-form textarea {
  font: inherit; padding: .6rem .7rem; border: 1px solid var(--rule-2); border-radius: 6px; background: #fff; inline-size: 100%; box-sizing: border-box;
}
.fv-note { font-size: .82rem; color: var(--ink-3); }

.fv-faq { border-block-end: 1px solid var(--rule); padding-block: .6rem; }
.fv-faq summary { font-weight: 600; cursor: pointer; }
.fv-related ul { list-style: none; padding: 0; display: grid; gap: .4rem; }
.fv-related a { color: var(--accent-deep, #6b4f26); }

.fv-final-cta { background: var(--paper-2, #ebe4d6); padding: 1.5rem; border-radius: 10px; text-align: center; }

.fv-footer { border-block-start: 1px solid var(--rule); padding: 1.5rem clamp(1rem, 4vw, 3rem); font-size: .9rem; color: var(--ink-3); }
.fv-footer a { color: var(--ink-2, #46413a); }

@media (max-width: 640px) {
  .fv-header { gap: .6rem; }
  .fv-lang { font-size: .78rem; }
}