/* ==========================================================================
   Components ported from the live bufeh.com theme.
   Requires tokens.css. Uses logical properties only (no left/right) so the
   later RTL phase is additive.
   ========================================================================== */

/* --- Utility scale (live theme has fs-7/fs-8 beyond Bootstrap's 1-6) ------ */
.fs-7 { font-size: .8125rem; }
.fs-8 { font-size: .75rem; }

/* --- Brand surfaces ------------------------------------------------------ */
.bg-darkbrown { background-color: var(--c-darkbrown); }
.bg-yellow    { background-color: var(--c-gold); }
.bg-gray      { background-color: #e1e1e1; }

.text-brown   { color: var(--c-olive); }
.text-blue    { color: var(--c-blue); }
.text-blue2   { color: var(--c-blue-dark); }
.text-muted2  { color: var(--c-n-500); }

.link-brown   { color: var(--c-olive); }
.link-brown:hover   { color: var(--c-olive-hover); }
.link-browner { color: var(--c-olive-dark); }
.link-browner:hover { color: #262605; }
.link-hover-white:hover { color: var(--c-n-0); }

/* Signature interaction from the live theme: charcoal button flips to gold. */
.btn-brown {
  background-color: var(--c-charcoal);
  border-color: var(--c-charcoal);
  color: var(--c-n-0);
}
.btn-brown:hover,
.btn-brown:focus {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-charcoal);
}

/* --- Tag links / badges -------------------------------------------------- */
.tag-badge {
  display: inline-block;
  background-color: var(--c-charcoal);
  color: var(--c-n-0);
  font-size: .75rem;
  font-weight: 600;
  padding: .25em .7em;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.tag-badge:hover { background-color: var(--c-gold); color: var(--c-charcoal); }

.link-tag,
.link-tags {
  color: var(--c-blue);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  transition: border-color .15s ease;
}
.link-tag:hover,
.link-tags:hover { border-block-end-color: var(--c-blue); }

/* --- Aspect-ratio image helpers ------------------------------------------ */
.img-cover-1-1,
.img-cover-4-3,
.img-cover-16-9,
.img-cover-fit { width: 100%; object-fit: cover; display: block; }

.img-cover-1-1  { aspect-ratio: 1 / 1; }
.img-cover-4-3  { aspect-ratio: 4 / 3; }
.img-cover-16-9 { aspect-ratio: 16 / 9; }
.img-cover-fit  { height: 100%; }

.thumbnail-50  { width: 50px;  height: 50px;  object-fit: cover; border-radius: var(--radius); }
.thumbnail-75  { width: 75px;  height: 75px;  object-fit: cover; border-radius: var(--radius); }
.thumbnail-100 { width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius); }
.thumbnail-300 { width: 300px; max-width: 100%; object-fit: cover; border-radius: var(--radius); }

/* --- Image overlays (crimson gradient, as on the live site) -------------- */
.img-cover-overlay,
.most-visited-image-overlay,
.latest-podcast-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(133, 10, 14, 0) 35%, rgba(133, 10, 14, .82) 100%);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  color: var(--c-n-0);
}

.most-visited-image,
.latest-podcast-image,
.most-popular-image { position: relative; overflow: hidden; border-radius: var(--radius); }

/* Play button sitting on a podcast cover. */
.latest-podcast-image-overlay-play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--c-gold);
  color: var(--c-darkbrown);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-md);
  transition: transform .2s ease;
}
.latest-podcast-image:hover .latest-podcast-image-overlay-play { transform: translate(-50%, -50%) scale(1.08); }

/* Rank number for the "most visited" list. */
.rank-number {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-gold);
}

/* --- Callout notes ------------------------------------------------------- */
.note {
  border-inline-start: 4px solid var(--border);
  background-color: var(--c-n-50);
  padding: .85rem 1rem;
  border-radius: var(--radius);
  margin-block: 1rem;
}
.note-light   { background-color: var(--c-n-50);  border-inline-start-color: var(--c-n-300); }
.note-info    { background-color: var(--c-n-50);  border-inline-start-color: var(--c-blue-note); }
.note-info strong { color: var(--c-blue-note); }
.note-warning { background-color: #fff8e1;        border-inline-start-color: var(--c-gold); }
.note-danger  { background-color: #fdf2f2;        border-inline-start-color: var(--c-crimson); }
.note-danger strong { color: var(--c-crimson); }
.note-dark    { background-color: var(--c-charcoal); color: var(--c-n-0); border-inline-start-color: var(--c-gold); }

/* --- Section headings ----------------------------------------------------
   Replaces the live site's baked Persian-text PNG banners
   (Most-Visited3x.png etc.), which cannot be reused in an English build. */
.section-heading {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  position: relative;
  padding-block-end: .5rem;
  margin-block-end: 1.25rem;
}
.section-heading::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 56px;
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--c-gold);
}

/* --- Sticky footer -------------------------------------------------------
   Keeps the footer pinned to the bottom of the viewport on short pages while
   still flowing naturally on long ones. Pairs with `mt-auto` on <footer>. */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
body > main { flex: 1 0 auto; }

/* --- Blog archive --------------------------------------------------------
   Full-width editorial layout: a hero band, a single filter/sort toolbar, and
   a 3-up recipe grid. The hero breaks out of main.container to full-bleed, then
   re-centres its own inner content; the top padding of main.py-4 is absorbed by
   a negative margin so the band sits flush under the header. */
.blog-hero {
  margin-inline: calc(50% - 50vw);
  margin-block-start: -1.5rem;   /* cancel main.py-4 top padding */
  padding-block: 3.25rem 2.75rem;
  background:
    radial-gradient(1100px 260px at 82% -40%, rgba(255, 204, 1, .18), transparent 70%),
    var(--c-n-0);
  border-block-end: 1px solid var(--border);
}
.blog-hero-inner {
  max-inline-size: 1140px;   /* matches Bootstrap .container at xl */
  margin-inline: auto;
  padding-inline: var(--bs-gutter-x, .75rem);
}
.blog-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-olive);
  margin-block-end: .85rem;
}
.blog-eyebrow::before {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  background: var(--c-gold);
}
.blog-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--c-charcoal);
  letter-spacing: -.015em;
  margin: 0 0 .5rem;
}
.blog-sub { color: var(--c-n-500); font-size: 1.05rem; max-inline-size: 56ch; margin: 0; }

.blog-body { padding-block-start: 1.75rem; }

/* Toolbar — tag chips (left), count + sort (right). */
.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-block-end: 1px solid var(--border);
  margin-block-end: 2rem;
}
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-n-700);
  background: var(--c-n-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .35rem .9rem;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover { border-color: var(--c-charcoal); color: var(--c-charcoal); }
.chip.active { background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-n-0); }
.chip.active:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-charcoal); }

.toolbar-right { display: flex; align-items: center; gap: 1rem; }
.result-count { color: var(--c-n-500); font-size: .85rem; white-space: nowrap; }
.sort-select { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--c-n-500); }

/* --- Recipe detail hero ---------------------------------------------------
   Full-bleed cover band at the top of a single post, using the recipe's own
   cover image. Breaks out of main.container the same way .blog-hero does,
   then fades to --body-bg at its base so the title reads cleanly underneath. */
.recipe-hero {
  position: relative;
  margin-inline: calc(50% - 50vw);
  margin-block-start: -1.5rem;   /* cancel main.py-4 top padding */
  block-size: clamp(220px, 32vw, 460px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.recipe-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, var(--body-bg) 100%);
}
.sort-select select {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding-block: .35rem;
  padding-inline: .9rem 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-charcoal);
  background-color: var(--c-n-0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2331302e' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  cursor: pointer;
}
[dir="rtl"] .sort-select select {
  padding-inline: 2rem .9rem;
  background-position: left .8rem center;
}
.sort-select select:focus {
  outline: none;
  border-color: var(--c-charcoal);
  box-shadow: 0 0 0 .2rem rgba(255, 204, 1, .25);
}

/* 3-up grid → 2-up tablet → 1-up mobile. */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 992px) { .recipe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .recipe-grid { grid-template-columns: 1fr; } }

.blog-empty { grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; color: var(--c-n-500); }
.blog-empty .bi { font-size: 2.5rem; color: var(--c-gold); }

/* --- Header ---------------------------------------------------------------
   Sticky, white, light theme. Nav links carry a gold underline that grows from
   the centre on hover and marks the active page — the header's echo of the
   footer's gold-tick motif. Search is a pill with a gold focus ring. */
.site-nav {
  background-color: var(--c-n-0);
  border-block-end: 1px solid var(--border);
  box-shadow: 0 .25rem .75rem rgba(37, 9, 9, .05);
}

.site-nav .navbar-brand {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--c-charcoal);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.site-nav .navbar-brand .bi { color: var(--c-gold); font-size: 1.2rem; }

/* Nav links — center-grown gold underline; doubles as the active marker. */
.site-nav .nav-link {
  position: relative;
  font-weight: 600;
  color: var(--c-n-700);
  padding-inline: .15rem;
  margin-inline: .6rem;
  transition: color .2s ease;
}
.site-nav .nav-link::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: -2px;
  transform: translateX(-50%);
  inline-size: 0;
  block-size: 2px;
  background: var(--c-gold);
  border-radius: 2px;
  transition: inline-size .22s ease;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active { color: var(--c-charcoal); }
.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after { inline-size: 100%; }

/* Search — pill that lights up with a gold ring on focus. */
.nav-search { position: relative; }
.nav-search .bi-search {
  position: absolute;
  inset-inline-start: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-n-400);
  pointer-events: none;
  font-size: .9rem;
}
.nav-search .form-control {
  border-radius: var(--radius-pill);
  border-color: var(--border);
  background: var(--c-n-50);
  padding-inline-start: 2.2rem;
  min-inline-size: 190px;
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.nav-search .form-control:focus {
  background: var(--c-n-0);
  border-color: var(--c-charcoal);
  box-shadow: 0 0 0 .2rem rgba(255, 204, 1, .25);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-link::after { transition: none; }
}

/* --- Footer --------------------------------------------------------------
   Light, border-top (matching bufeh.com), laid out as a three-zone band:
   brand+newsletter | site links | social+notice, over a bottom bar. */
.site-footer {
  background-color: var(--c-n-0);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Zone grid — collapses to a centred single column on small screens. */
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr 1.1fr;
  padding-block: 3rem;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
}

/* Zone 1 — brand + newsletter */
.footer-brand-name {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c-charcoal);
  letter-spacing: -.01em;
  margin: 0 0 .35rem;
}
.footer-tagline { color: var(--c-n-500); margin: 0 0 1.25rem; max-width: 32ch; }
.footer-subscribe { max-width: 340px; }
@media (max-width: 768px) {
  .footer-tagline,
  .footer-subscribe { margin-inline: auto; }
}

/* Zone titles — eyebrow with a gold tick (the footer's recurring motif). */
.footer-col-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-n-700);
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.footer-col-title::before {
  content: "";
  inline-size: 14px;
  block-size: 2px;
  background: var(--c-gold);
  display: inline-block;
}
@media (max-width: 768px) {
  .footer-col-title::before { display: none; }
}

/* Zone 2 — site links */
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-links a {
  color: var(--c-n-700);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: color .2s ease, transform .2s ease;
}
.footer-links a:hover { color: var(--c-olive); transform: translateX(3px); }
[dir="rtl"] .footer-links a:hover { transform: translateX(-3px); }
@media (max-width: 768px) {
  .footer-links a:hover { transform: none; }
}

/* Zone 3 — notice */
.footer-notice { color: var(--c-n-400); }

/* Signature gold hairline dividing the zones from the bottom bar. */
.footer-hairline {
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 20%, var(--c-gold) 80%, transparent);
  opacity: .7;
}

/* Bottom bar — copyright + dev credit. */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.5rem;
}
@media (max-width: 768px) {
  .footer-bottom { justify-content: center; text-align: center; }
}
.footer-legal { color: var(--c-n-500); }
.footer-legal a { color: var(--c-n-700); font-weight: 700; text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; text-underline-offset: .3em; }

/* Underline-on-hover, ported from the live theme's .link-hu */
.link-hu { text-decoration: none; transition: all .3s; }
.link-hu:hover { text-decoration: underline; text-underline-offset: .3em; }

.social-link {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--c-n-50);
  color: var(--c-n-700);
  border: 1px solid var(--border);
  font-size: 1.05rem;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.social-link:hover {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-charcoal) !important;
  transform: translateY(-3px);
}

.opacity-80 { opacity: .8; }

/* Background-image logo box, ported from the live theme. Width comes from the
   wrapper, height is set inline per logo. */
.logo-cover {
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.footer-credit {
  display: inline-block;
  opacity: .65;
  transition: opacity .2s ease;
}
.footer-credit:hover { opacity: 1; }