/* fekr-ui 1.0 — the shared look of every Fekr Bonyan site (decision D16, docs/MASTER-ARCHITECTURE.md).
   Copy this file into a service as public/css/fekr-ui.css and note the version in its CLAUDE.md; do not edit the copy.
   Fonts: IRANSansX from /static/fonts/iransans/ (licensed), Vazirmatn as fallback. Colours come from the logo. */
@font-face { font-family: 'IRANSansX'; src: url('../fonts/iransans/iransans-regular.woff2') format('woff2'), url('../fonts/iransans/iransans-regular.woff') format('woff'); font-weight: 300 500; font-display: swap; }
@font-face { font-family: 'IRANSansX'; src: url('../fonts/iransans/iransans-bold.woff2') format('woff2'), url('../fonts/iransans/iransans-bold.woff') format('woff'); font-weight: 600 900; font-display: swap; }

:root {
  --fb-ink: #0f2419;        /* deep forest: headings, dark bands, footer */
  --fb-text: #26352c;
  --fb-muted: #5d6b62;
  --fb-paper: #f4f6f2;      /* page background */
  --fb-surface: #ffffff;
  --fb-line: #dde6e0;
  --fb-brand: #1f7a43;      /* logo green: links, secondary buttons */
  --fb-brand-dark: #145a30;
  --fb-brand-soft: #e4f2e8;
  --fb-lime: #a9c83b;       /* logo leaf: small marks */
  --fb-warm: #b9722a;       /* the one main action (book, sign up) */
  --fb-warm-dark: #9c5d1f;
  --fb-radius: 14px;
  --fb-font: 'IRANSansX', 'Vazirmatn', Tahoma, sans-serif;
  --fb-wrap: 1120px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fb-paper); color: var(--fb-text); font-family: var(--fb-font); font-size: 16px; line-height: 1.85; font-feature-settings: "ss02"; direction: rtl; }
a { color: var(--fb-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { color: var(--fb-ink); line-height: 1.45; text-wrap: balance; margin: 0 0 .5em; }
:focus-visible { outline: 3px solid var(--fb-lime); outline-offset: 2px; border-radius: 6px; }
[dir="ltr"], .ltr { direction: ltr; unicode-bidi: isolate; font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
.fb-wrap { max-width: var(--fb-wrap); margin: 0 auto; padding-inline: 20px; }
.fb-justify { text-align: justify; font-kerning: none; }

/* buttons */
.fb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font: inherit; font-weight: 700; border: 1.5px solid transparent; cursor: pointer; text-decoration: none !important; transition: background .15s, color .15s; }
.fb-btn-warm { background: var(--fb-warm); color: #fff; }
.fb-btn-warm:hover { background: var(--fb-warm-dark); }
.fb-btn-line { border-color: var(--fb-brand); color: var(--fb-brand); background: transparent; }
.fb-btn-line:hover { background: var(--fb-brand-soft); }

/* header */
.fb-top { background: var(--fb-surface); border-bottom: 1px solid var(--fb-line); position: relative; z-index: 20; }
.fb-top .fb-wrap { display: flex; align-items: center; gap: 18px; min-height: 66px; }
.fb-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--fb-ink); text-decoration: none !important; }
.fb-brand img { width: 38px; height: 38px; }
.fb-nav { display: flex; gap: 4px; margin-inline-start: auto; align-items: center; }
.fb-nav > a, .fb-nav details > summary { color: var(--fb-text); padding: 8px 10px; border-radius: 8px; font-size: .95rem; cursor: pointer; list-style: none; text-decoration: none; }
.fb-nav > a:hover, .fb-nav details > summary:hover { background: var(--fb-brand-soft); color: var(--fb-brand); }
.fb-nav > a.fb-btn-warm, .fb-nav > a.fb-btn-warm:hover { color: #fff; background: var(--fb-warm); padding: 0 18px; }
.fb-nav > a.fb-btn-warm:hover { background: var(--fb-warm-dark); }
.fb-nav details { position: relative; }
.fb-nav details > summary::-webkit-details-marker { display: none; }
.fb-nav details > summary::after { content: " ▾"; font-size: .7em; color: var(--fb-muted); }
.fb-nav details > div { position: absolute; inset-inline-start: 0; top: calc(100% + 6px); background: var(--fb-surface); border: 1px solid var(--fb-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 36, 25, .12); padding: 8px; min-width: 230px; display: grid; }
.fb-nav details > div a { padding: 8px 12px; border-radius: 8px; color: var(--fb-text); }
.fb-nav details > div a:hover { background: var(--fb-brand-soft); text-decoration: none; }
.fb-search { display: flex; }
.fb-search input { width: 150px; border: 1px solid var(--fb-line); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .9rem; background: var(--fb-paper); }
.fb-menu-btn { display: none; margin-inline-start: auto; background: none; border: 1px solid var(--fb-line); border-radius: 10px; padding: 6px 12px; font: inherit; cursor: pointer; }

/* cards */
.fb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fb-card { background: var(--fb-surface); border: 1px solid var(--fb-line); border-radius: var(--fb-radius); overflow: hidden; display: flex; flex-direction: column; color: inherit; text-decoration: none !important; transition: border-color .15s, transform .15s; min-width: 0; }
.fb-card:hover { border-color: var(--fb-brand); transform: translateY(-2px); }
.fb-card .fb-card-img { aspect-ratio: 16 / 9; background: var(--fb-brand-soft) url('../img/fekr-mark.png') center / 56px no-repeat; }
.fb-card .fb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-card .fb-card-body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.fb-card h3 { font-size: 1.02rem; margin: 0; color: var(--fb-ink); }
.fb-card p { margin: 0; font-size: .88rem; color: var(--fb-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fb-card time { font-size: .8rem; color: var(--fb-brand); }

/* footer */
.fb-foot { background: var(--fb-ink); color: #b9cbc1; padding-block: 44px 24px; font-size: .92rem; margin-top: 56px; }
.fb-foot .fb-wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.fb-foot h3 { color: #fff; font-size: 1rem; margin-bottom: 10px; }
.fb-foot a { color: #dfe9e3; }
.fb-foot nav { display: grid; gap: 6px; }
.fb-foot .fb-owner { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.fb-foot .fb-owner img { height: 58px; width: auto; background: #fff; border-radius: 8px; padding: 4px; }
.fb-foot .fb-motto { display: block; color: var(--fb-lime); font-size: .86rem; margin-top: 4px; }
.fb-foot .fb-copy { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 14px; font-size: .8rem; color: #8aa396; }

@media (max-width: 900px) {
  .fb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb-foot .fb-wrap { grid-template-columns: 1fr 1fr; }
  .fb-foot .fb-about { grid-column: 1 / -1; }
  .fb-menu-btn { display: inline-block; }
  .fb-nav { display: none; position: absolute; top: 100%; inset-inline: 0; background: var(--fb-surface); border-bottom: 1px solid var(--fb-line); flex-direction: column; align-items: stretch; padding: 10px 16px 16px; }
  .fb-top.open .fb-nav { display: flex; }
  .fb-nav details > div { position: static; box-shadow: none; border: 0; padding: 0 12px; }
  .fb-search input { width: 100%; }
}
@media (max-width: 600px) {
  .fb-wrap { padding-inline: 16px; }
  .fb-cards, .fb-foot .fb-wrap { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }