/* =============================================================================
   RecipeFlow — INNER PAGE STYLES
   For all SEO sub-pages and legal pages
   ============================================================================= */

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */
.bc {
  padding: calc(var(--header-top) + var(--s6)) 0 0;
  background: var(--c-bg);
}
.bc .container { /* inherits padding from .container */ }
.bc__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .875rem; }
.bc__item { display: flex; align-items: center; gap: 6px; color: var(--c-text-3); }
.bc__item::before { content: '/'; color: var(--c-border); }
.bc__item:first-child::before { display: none; }
.bc__item--active { color: var(--c-text-2); }
.bc__link { color: var(--c-text-3); text-decoration: none; transition: color var(--t-fast); }
.bc__link:hover { color: var(--c-brand); }
.bc__link:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: 4px; }

/* ── Inner Article Layout ───────────────────────────────────────────────────── */
.inner-page {
  padding-bottom: var(--s24);
}
.inner-hero {
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-alt) 100%);
  padding: var(--s12) 0 var(--s16);
}
.inner-hero__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--s12); align-items: center;
}
@media (min-width: 860px) {
  .inner-hero__inner { grid-template-columns: 1fr 320px; gap: var(--s16); }
}
.inner-hero__badge { margin-bottom: var(--s4); }
.inner-hero__h1 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: var(--fw-xbold); letter-spacing: -.02em;
  color: var(--c-text); margin-bottom: var(--s5); line-height: 1.15;
}
.inner-hero__intro { font-size: 1.125rem; color: var(--c-text-2); line-height: 1.75; max-width: 580px; }
.inner-hero__actions { margin-top: var(--s8); }
.inner-hero__visual { display: flex; justify-content: center; }
.inner-hero__phone { width: 220px; }

/* ── Content Area ───────────────────────────────────────────────────────────── */
.inner-content { max-width: 780px; margin: 0 auto; padding: var(--s16) var(--s6); }
@media (max-width: 767px) {
  .inner-content { padding: var(--s12) var(--s6); }
}

/* Content sections */
.cs { margin-bottom: var(--s12); }
.cs__h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: var(--fw-bold); color: var(--c-text);
  margin-bottom: var(--s5); letter-spacing: -.01em;
  padding-top: var(--s2); border-top: 3px solid var(--c-brand-light);
}
.cs__body { color: var(--c-text-2); line-height: 1.8; font-size: 1rem; }
.cs__body p { margin-bottom: var(--s4); }
.cs__body p:last-child { margin-bottom: 0; }
.cs__body ul, .cs__body ol { padding-left: 1.5em; margin: var(--s4) 0; }
.cs__body ul { list-style: disc; }
.cs__body ol { list-style: decimal; }
.cs__body li { margin-bottom: var(--s2); color: var(--c-text-2); }
.cs__body strong { color: var(--c-text); font-weight: var(--fw-semi); }
.cs__body a { color: var(--c-brand); text-decoration: underline; }
.cs__body a:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

.cs__h3 { font-size: 1.125rem; font-weight: var(--fw-semi); color: var(--c-text); margin-bottom: var(--s3); }
.cs__sub { margin-top: var(--s6); padding-left: var(--s4); border-left: 3px solid var(--c-border); }

/* Conversion table */
.cs__table-wrap { overflow-x: auto; margin: var(--s6) 0; border-radius: var(--r-md); border: 1px solid var(--c-border); }
.cs__table-wrap table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
@media (max-width: 479px) {
  .cs__table-wrap table { min-width: 540px; }
}
.cs__table-wrap th {
  background: var(--c-bg-alt); padding: 10px 16px;
  font-weight: var(--fw-semi); text-align: left; color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.cs__table-wrap td { padding: 10px 16px; border-bottom: 1px solid var(--c-bg-alt); color: var(--c-text-2); }
.cs__table-wrap tr:last-child td { border-bottom: none; }
.cs__table-wrap tr:nth-child(even) td { background: var(--c-bg); }

/* ── Inner CTA (mid-page) ───────────────────────────────────────────────────── */
.inner-cta {
  background: var(--c-brand-light); border-radius: var(--r-xl);
  padding: var(--s10) var(--s8); margin: var(--s12) 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4);
}
@media (min-width: 600px) {
  .inner-cta { flex-direction: row; align-items: center; justify-content: space-between; }
}
.inner-cta__text {}
.inner-cta__title { font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--c-text); margin-bottom: 6px; }
.inner-cta__sub   { font-size: .9375rem; color: var(--c-text-2); }
@media (max-width: 599px) {
  .inner-cta .gplay-btn { width: 100%; justify-content: center; }
}

/* ── Inner FAQ ──────────────────────────────────────────────────────────────── */
.inner-faq { margin-bottom: var(--s16); }
.inner-faq__title {
  font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: var(--fw-bold);
  color: var(--c-text); margin-bottom: var(--s8); letter-spacing: -.01em;
}
.inner-faq .faq-list { max-width: 100%; margin: 0; }

/* ── Related Tools ──────────────────────────────────────────────────────────── */
.inner-related { margin-bottom: var(--s16); }
.inner-related__title {
  font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: var(--fw-bold);
  color: var(--c-text); margin-bottom: var(--s8); letter-spacing: -.01em;
}

/* ── Legal Page ─────────────────────────────────────────────────────────────── */
.legal-page { padding: calc(var(--header-top) + var(--s12)) 0 var(--s24); }
.legal-page__header { margin: var(--s8) 0 var(--s10); }
.legal-page__title {
  font-size: clamp(2rem, 4vw, 2.75rem); font-weight: var(--fw-xbold);
  color: var(--c-text); margin-bottom: var(--s3); letter-spacing: -.02em;
}
.legal-page__date { font-size: .875rem; color: var(--c-text-3); }
.legal-page__body { max-width: 800px; color: var(--c-text-2); line-height: 1.8; font-size: 1rem; }
.legal-page__body h2 { font-size: 1.375rem; font-weight: var(--fw-bold); color: var(--c-text); margin: var(--s10) 0 var(--s4); }
.legal-page__body h3 { font-size: 1.125rem; font-weight: var(--fw-semi); color: var(--c-text); margin: var(--s6) 0 var(--s3); }
.legal-page__body p  { margin-bottom: var(--s4); }
.legal-page__body ul, .legal-page__body ol { padding-left: 1.5em; margin: var(--s4) 0; }
.legal-page__body ul { list-style: disc; }
.legal-page__body ol { list-style: decimal; }
.legal-page__body li { margin-bottom: var(--s2); }
.legal-page__body a  { color: var(--c-brand); text-decoration: underline; }
.legal-page__body a:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.legal-page__body strong { color: var(--c-text); font-weight: var(--fw-semi); }

/* =============================================================================
   RTL SUPPORT – inner pages (ar, fa, iw)
   ============================================================================= */
[dir="rtl"] {
  .bc__list              { flex-direction: row-reverse; }
  .bc__item::before      { content: '\\'; }
  .bc__item:first-child::before { display: none; }

  .inner-hero__inner     { direction: rtl; }
  .inner-hero__h1,
  .inner-hero__intro     { text-align: right; }
  .inner-hero__actions   { flex-direction: row-reverse; }

  .cs__sub               { padding-left: 0; padding-right: var(--s4);
                           border-left: none; border-right: 3px solid var(--c-border); }
  .cs__body ul,
  .cs__body ol           { padding-left: 0; padding-right: 1.5em; }
  .cs__body,
  .cs__h2,
  .cs__h3                { text-align: right; }

  .cs__table-wrap th     { text-align: right; }

  .inner-cta             { flex-direction: row-reverse; }

  .inner-faq__title,
  .inner-related__title  { text-align: right; }

  .faq-item__q           { flex-direction: row-reverse; }
  .faq-item__a           { text-align: right; }
  .faq-item__a ul,
  .faq-item__a ol        { padding-left: 0; padding-right: 1.5em; }

  .legal-page__title,
  .legal-page__date,
  .legal-page__body      { text-align: right; direction: rtl; }
  .legal-page__body ul,
  .legal-page__body ol   { padding-left: 0; padding-right: 1.5em; }
}