/* Rahee managed SEO page template.
   Tokens reuse the palette already in styles.css and seo.css rather than
   introducing a second, competing brand. Orange is the action colour, deep teal
   carries section headings, and surfaces stay warm so the page does not read as
   grey. Only these tokens are used below — no loose hex values. */
.seo-template {
    --rahee-orange: #ff7900;
    --rahee-orange-strong: #e56d00;
    --rahee-heading: #16221f;
    --rahee-accent: #0b5c50;
    --rahee-accent-soft: #eaf3ef;
    --rahee-text: #202625;
    --rahee-muted: #66706c;
    --rahee-surface: #ffffff;
    --rahee-surface-warm: #fbf8f4;
    --rahee-surface-cream: #fff7f0;
    --rahee-border: #e3e7e3;
    --rahee-border-strong: #d3dbd6;
    --rahee-radius: 14px;
    --rahee-radius-lg: 22px;
    --rahee-shadow: 0 1px 2px rgba(32, 60, 52, .05), 0 8px 24px rgba(32, 60, 52, .06);
    --rahee-shadow-lift: 0 2px 6px rgba(32, 60, 52, .07), 0 14px 34px rgba(32, 60, 52, .1);
    --rahee-wrap: 1200px;
    --rahee-read: 820px;
    /* Inline section media is editorial furniture, not a hero: it is capped
       below the article measure and by viewport height so it can never take
       over a screen the reader is trying to read through. */
    --rahee-figure: 780px;
    --rahee-figure-max-h: min(400px, 42vh);
    background: var(--rahee-surface-warm);
    color: var(--rahee-text);
}

/* ---------- layout ---------- */
.seo-main {
    max-width: var(--rahee-wrap);
    margin: 0 auto;
    padding: 20px 20px 64px;
}
.managed-seo-page { display: block; }
/* The article column is centred inside the full-width wrapper, while the hero,
   highlights, related grid and media stay wide — so the desktop viewport is
   used without pushing the prose past a comfortable measure. */
.seo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 8px;
}
.seo-body {
    width: 100%;
    max-width: var(--rahee-read);
}

/* ---------- breadcrumb ---------- */
.seo-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--rahee-muted);
    margin-bottom: 14px;
}
.seo-breadcrumb a { color: var(--rahee-muted); text-decoration: none; }
.seo-breadcrumb a:hover { color: var(--rahee-accent); text-decoration: underline; }
.seo-breadcrumb [aria-current="page"] { color: var(--rahee-heading); font-weight: 600; }

/* ---------- hero ---------- */
.seo-hero {
    background: linear-gradient(180deg, var(--rahee-accent-soft), var(--rahee-surface));
    border: 1px solid var(--rahee-border);
    border-radius: var(--rahee-radius-lg);
    padding: 28px;
    display: grid;
    gap: 24px;
    align-items: center;
}
.seo-hero--with-image { grid-template-columns: minmax(0, 1fr); }
.seo-hero__title {
    font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.35rem);
    line-height: 1.35;
    color: var(--rahee-heading);
    margin: 0 0 12px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.seo-hero__intro {
    font-size: clamp(1rem, .95rem + .3vw, 1.12rem);
    line-height: 1.9;
    color: var(--rahee-muted);
    margin: 0;
    max-width: 60ch;
}
.seo-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.seo-hero__media { min-width: 0; }
.seo-hero__figure { margin: 0; }
.seo-hero__figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--rahee-radius);
    display: block;
}
.seo-hero__figure figcaption { font-size: .8rem; color: var(--rahee-muted); margin-top: 8px; }

.seo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.seo-btn--primary { background: var(--rahee-orange); color: #fff; }
.seo-btn--primary:hover { background: var(--rahee-orange-strong); }
.seo-btn--ghost { border: 1px solid var(--rahee-border-strong); color: var(--rahee-accent); background: var(--rahee-surface); }
.seo-btn--ghost:hover { border-color: var(--rahee-accent); }

/* ---------- highlights ---------- */
.seo-highlights {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}
.seo-highlight {
    background: var(--rahee-surface);
    border: 1px solid var(--rahee-border);
    border-radius: var(--rahee-radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--rahee-shadow);
    /* A single orange edge is enough of a cue to make the row scannable
       without an icon set; the label above the value does the rest. */
    border-block-start: 3px solid var(--rahee-orange);
}
.seo-highlight__label {
    font-size: .78rem;
    color: var(--rahee-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .01em;
}
.seo-highlight__label::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rahee-orange);
}
.seo-highlight__value { font-size: 1.03rem; color: var(--rahee-heading); font-weight: 700; line-height: 1.65; }

/* ---------- table of contents ---------- */
.seo-toc {
    width: 100%;
    max-width: var(--rahee-read);
    margin: 30px 0 0;
    background: var(--rahee-surface);
    border: 1px solid var(--rahee-border);
    border-radius: var(--rahee-radius);
    padding: 18px 22px;
}
.seo-toc__heading { margin: 0 0 10px; font-weight: 700; color: var(--rahee-heading); font-size: .95rem; }
.seo-toc__list { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; }
.seo-toc__list a { color: var(--rahee-accent); text-decoration: none; font-size: .95rem; line-height: 1.7; }
.seo-toc__list a:hover { text-decoration: underline; }

/* ---------- article typography ----------
   Persian text needs more leading than Latin to stay readable, and a long
   scrolling article needs the gaps between blocks to do the pacing. Paragraph,
   list and section spacing are deliberately larger than the line gap so the eye
   lands on structure rather than a uniform slab of text. */
.seo-body { font-size: 1.03rem; line-height: 1.95; color: var(--rahee-text); }
.seo-body > :first-child { margin-top: 26px; }
.seo-body p { margin: 0 0 26px; }
.seo-body h2 {
    font-size: clamp(1.28rem, 1.1rem + .65vw, 1.55rem);
    line-height: 1.6;
    color: var(--rahee-accent);
    font-weight: 800;
    margin: 56px 0 18px;
    padding-inline-start: 14px;
    border-inline-start: 4px solid var(--rahee-orange);
    scroll-margin-top: 20px;
}
.seo-body h2:first-child { margin-top: 26px; }
.seo-body h3 {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--rahee-heading);
    font-weight: 700;
    margin: 36px 0 12px;
}
.seo-body h4 { font-size: 1rem; color: var(--rahee-heading); font-weight: 700; margin: 26px 0 8px; }
.seo-body ul, .seo-body ol { margin: 0 0 28px; padding-inline-start: 24px; }
.seo-body li { margin-bottom: 12px; line-height: 1.95; }
.seo-body li:last-child { margin-bottom: 0; }
.seo-body a { color: var(--rahee-accent); text-decoration: underline; text-underline-offset: 3px; }
.seo-body a:hover { color: var(--rahee-orange-strong); }
.seo-body strong { color: var(--rahee-heading); font-weight: 700; }
.seo-body blockquote {
    margin: 24px 0;
    padding: 14px 18px;
    border-inline-start: 3px solid var(--rahee-accent);
    background: var(--rahee-accent-soft);
    border-radius: 0 var(--rahee-radius) var(--rahee-radius) 0;
    color: var(--rahee-heading);
}
.seo-body table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: .95rem; }
.seo-body th, .seo-body td { border: 1px solid var(--rahee-border); padding: 10px 12px; text-align: start; }
.seo-body th { background: var(--rahee-accent-soft); color: var(--rahee-heading); }

/* ---------- section figures ----------
   Distinct from the hero on purpose: the hero sets the scene and may be large,
   while an inline figure illustrates a section and must stay editorial-sized. */
.seo-figure { margin: 32px auto; max-width: var(--rahee-figure); }
.seo-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: var(--rahee-figure-max-h);
    object-fit: cover;
    border-radius: var(--rahee-radius);
    display: block;
    background: var(--rahee-surface-warm);
}
.seo-figure figcaption {
    font-size: .84rem;
    color: var(--rahee-muted);
    margin-top: 10px;
    line-height: 1.75;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--rahee-border-strong);
}

/* ---------- callouts ----------
   The four types must be distinguishable at a glance without an icon font. Each
   gets its own tint, edge colour and a typographic marker drawn in CSS, so the
   difference survives with no extra request and no new dependency. */
.seo-callout {
    margin: 32px 0;
    padding: 18px 20px 18px 20px;
    border-radius: var(--rahee-radius);
    border: 1px solid var(--rahee-border);
    border-inline-start: 5px solid var(--rahee-accent);
    background: var(--rahee-accent-soft);
}
.seo-callout__title {
    margin: 0 0 8px;
    font-weight: 800;
    color: var(--rahee-accent);
    font-size: .95rem;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* The marker is a CSS-drawn glyph, not an image or icon font. */
.seo-callout__title::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: currentColor;
    transform: rotate(45deg);
}
.seo-callout__body { margin: 0; line-height: 1.95; color: var(--rahee-text); }

.seo-callout--important {
    background: var(--rahee-surface-cream);
    border-inline-start-color: var(--rahee-orange);
    border-color: #ffd0a8;
}
.seo-callout--important .seo-callout__title { color: var(--rahee-orange-strong); }
.seo-callout--important .seo-callout__title::before { border-radius: 2px; transform: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.seo-callout--summary {
    background: var(--rahee-surface);
    border-inline-start-color: var(--rahee-heading);
}
.seo-callout--summary .seo-callout__title { color: var(--rahee-heading); }
.seo-callout--summary .seo-callout__title::before { border-radius: 2px; transform: none; }

.seo-callout--booking_note {
    background: var(--rahee-surface-warm);
    border-inline-start-color: var(--rahee-border-strong);
}
.seo-callout--booking_note .seo-callout__title { color: var(--rahee-muted); }
.seo-callout--booking_note .seo-callout__title::before { border-radius: 50%; transform: none; }

/* ---------- mid-page CTA ---------- */
.seo-cta {
    margin: 32px 0;
    padding: 24px;
    border-radius: var(--rahee-radius-lg);
    background: var(--rahee-surface-cream);
    border: 1px solid #ffd0a8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.seo-cta__title { margin: 0; font-size: 1.12rem; font-weight: 800; color: var(--rahee-heading); }
.seo-cta__text { margin: 0; color: var(--rahee-muted); line-height: 1.9; }
.seo-cta__action {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--rahee-orange);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.seo-cta__action:hover { background: var(--rahee-orange-strong); }

/* ---------- FAQ accordion ---------- */
.seo-faq { max-width: var(--rahee-read); margin: 48px auto 0; }
.seo-faq > h2 { font-size: 1.4rem; color: var(--rahee-heading); font-weight: 800; margin: 0 0 18px; }
.seo-faq__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.seo-faq__item { background: var(--rahee-surface); border: 1px solid var(--rahee-border); border-radius: var(--rahee-radius); overflow: hidden; }
.seo-faq__question { margin: 0; font-size: 1rem; }
.seo-faq__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: var(--rahee-heading);
    text-align: start;
    line-height: 1.7;
    cursor: pointer;
}
.seo-faq__trigger:hover { color: var(--rahee-accent); }
.seo-faq__trigger:focus-visible { outline: 2px solid var(--rahee-accent); outline-offset: -3px; }
.seo-faq__icon { flex: 0 0 auto; width: 12px; height: 12px; border-inline-end: 2px solid var(--rahee-accent); border-block-end: 2px solid var(--rahee-accent); transform: rotate(45deg); transition: transform .18s ease; }
.seo-faq__trigger[aria-expanded="false"] .seo-faq__icon { transform: rotate(-45deg); }
.seo-faq__answer { padding: 0 20px 18px; color: var(--rahee-text); line-height: 1.95; }
.seo-faq__answer p { margin: 0; }
/* Answers are visible by default; only the enhanced (JS) version collapses
   them, so the server-rendered HTML always carries the full text. */
.seo-faq__answer[hidden] { display: none; }

/* ---------- related cards ---------- */
.seo-related { margin: 52px 0 0; padding-top: 34px; border-top: 1px solid var(--rahee-border); }
.seo-related > h2 { font-size: 1.4rem; color: var(--rahee-heading); font-weight: 800; margin: 0 0 20px; }
.seo-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.seo-card {
    display: flex;
    flex-direction: column;
    background: var(--rahee-surface);
    border: 1px solid var(--rahee-border);
    border-radius: var(--rahee-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--rahee-shadow);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.seo-card:hover { box-shadow: var(--rahee-shadow-lift); transform: translateY(-2px); border-color: var(--rahee-border-strong); }
.seo-card__media { display: block; }
.seo-card__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.seo-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.seo-card__eyebrow { font-size: .78rem; color: var(--rahee-orange-strong); font-weight: 700; }
.seo-card__title { font-size: 1.02rem; color: var(--rahee-heading); font-weight: 700; line-height: 1.7; }
.seo-card__text { font-size: .9rem; color: var(--rahee-muted); line-height: 1.8; }
.seo-card--plain .seo-card__body { padding: 18px; }

/* ---------- footer ---------- */
.seo-footer { border-top: 1px solid var(--rahee-border); background: var(--rahee-surface); padding: 26px 20px; text-align: center; color: var(--rahee-muted); font-size: .9rem; line-height: 1.9; }
.seo-footer p { margin: 0; }
.seo-footer strong { color: var(--rahee-heading); }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
    .seo-main { padding: 28px 28px 80px; }
    .seo-hero { padding: 40px; }
    .seo-hero--with-image { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
    .seo-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .seo-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
    .seo-cta__action { margin-top: 0; flex: 0 0 auto; }
}

/* ---------- mobile ---------- */
@media (max-width: 560px) {
    .seo-main { padding: 14px 16px 48px; }
    .seo-hero { padding: 20px; border-radius: var(--rahee-radius); gap: 18px; }
    /* The hero image sits inside the hero's padding while a section figure spans
       the article, so matching ratios would make the mid-article image the taller
       of the two. The hero keeps the deeper 4:3 and the section figure switches to
       a shallower 16:9, preserving the hierarchy on a phone. */
    .seo-hero__figure img { aspect-ratio: 4 / 3; max-height: 34vh; }
    .seo-figure { margin: 24px auto; }
    .seo-figure img { aspect-ratio: 16 / 9; max-height: 22vh; }
    .seo-figure figcaption { font-size: .8rem; margin-top: 8px; }
    .seo-callout { margin: 24px 0; padding: 16px 18px; }
    .seo-hero__actions { margin-top: 18px; gap: 10px; }
    .seo-btn { width: 100%; }
    .seo-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .seo-highlight { padding: 12px 14px; }
    .seo-highlight__value { font-size: .95rem; }
    .seo-body { font-size: 1rem; line-height: 1.95; }
    .seo-body h2 { margin: 32px 0 12px; }
    .seo-cta { padding: 20px; }
    .seo-cta__action { width: 100%; justify-content: center; }
    .seo-related__grid { grid-template-columns: minmax(0, 1fr); }
    .seo-faq__trigger { padding: 14px 16px; }
    .seo-faq__answer { padding: 0 16px 16px; }
}
/* Long unbreakable strings — URLs, transliterations — must not push the layout
   sideways on a narrow screen. */
.seo-body, .seo-hero__title, .seo-faq__trigger, .seo-card__title { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
    .seo-card, .seo-faq__icon, .seo-btn { transition: none; }
    .seo-card:hover { transform: none; }
}