/*
Theme Name: Al Shammaa — The Herbalist
Theme URI: https://example.com
Author: Al Shammaa
Description: Bilingual (EN/AR) herbal encyclopedia theme with RTL support — herbs, conditions, honey, blends, and suppliers. Design ported from the Al Shammaa app.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: alshammaa
*/

:root {
  --color-primary: #1A5F4A;
  --color-secondary: #C89B3C;
  --color-bg: #F5EFE0;
  --color-accent: #2E8B84;
  --color-text: #2B2A24;
  --color-caution: #B5651D;
  --color-surface: #FFFDF8;
  --color-primary-soft: #E4EEE9;
  --color-border-soft: #E6DFCC;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Cairo', system-ui, 'Noto Sans Arabic', 'Noto Sans', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
html[dir='rtl'] body { font-size: 1.03rem; line-height: 1.85; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--color-primary); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 .4em; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 1.25rem; }
main.wrap { padding-block: 2rem; }
.bullets { white-space: pre-line; }

/* language visibility */
body.lang-ar .l-en { display: none; }
body.lang-en .l-ar { display: none; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(245,239,224,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-soft);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand img { height: 36px; width: 36px; object-fit: contain; }
.brand .logo-fallback { height: 36px; width: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--color-primary); color: var(--color-secondary); font-weight: 800; }
.wordmark { display: flex; flex-direction: column; justify-content: center; line-height: 1; height: 36px; }
.wordmark .l1 { font-size: 16px; font-weight: 800; color: var(--color-primary); }
.wordmark .l2 { font-size: 13px; font-weight: 600; color: rgba(43,42,36,.8); margin-top: 2px; }
.nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.nav a { padding: 6px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: rgba(43,42,36,.8); white-space: nowrap; }
.nav a:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.langtoggle { display: inline-flex; border: 1px solid var(--color-border-soft); background: var(--color-surface); border-radius: 999px; padding: 2px; }
.langtoggle button { border: 0; background: transparent; border-radius: 999px; padding: 4px 12px; font-weight: 700; cursor: pointer; color: rgba(43,42,36,.7); }
.langtoggle button.active { background: var(--color-primary); color: #fff; }
.nav-mobile { display: none; gap: 4px; overflow-x: auto; border-top: 1px solid var(--color-border-soft); padding: 8px 20px; }
@media (max-width: 640px) { .nav .desktop-links { display: none; } .nav-mobile { display: flex; } }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.badge.featured { background: rgba(200,155,60,.15); color: #8a6a1f; box-shadow: inset 0 0 0 1px rgba(200,155,60,.4); }
.badge.primary { background: var(--color-primary); color: #fff; }
.badge.supporting { background: var(--color-primary-soft); color: var(--color-primary); }
.badge.accent { background: rgba(46,139,132,.12); color: var(--color-accent); box-shadow: inset 0 0 0 1px rgba(46,139,132,.25); }
.badge.neutral { background: rgba(230,223,204,.5); color: rgba(43,42,36,.7); }

/* cards / grid */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid var(--color-border-soft); background: var(--color-surface); box-shadow: 0 1px 3px rgba(43,42,36,.06); transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,95,74,.12); }
.card .thumb { position: relative; aspect-ratio: 4/3; background: var(--color-primary-soft); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb .mono { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-primary); color: #fff; font-size: 2rem; font-weight: 800; }
.card .body { padding: 12px; }
.card h3 { font-size: 16px; margin: 0; }
.card .sci { font-size: 12px; font-style: italic; color: rgba(43,42,36,.55); }
.card .badge.featured { position: absolute; top: 8px; inset-inline-start: 8px; }

/* controls */
.controls { display: flex; gap: 12px; flex-direction: column; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .controls { flex-direction: row; } }
.controls input, .controls select { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--color-border-soft); background: var(--color-surface); font: inherit; color: inherit; }
.controls select { max-width: 260px; }
.count { color: rgba(43,42,36,.6); font-size: 14px; margin-bottom: 1rem; }

/* detail */
.panel { border-radius: 18px; border: 1px solid var(--color-border-soft); background: var(--color-surface); box-shadow: 0 1px 3px rgba(43,42,36,.06); }
.detail-head { display: grid; gap: 0; overflow: hidden; }
@media (min-width: 640px) { .detail-head { grid-template-columns: 220px 1fr; } }
.detail-head .hero { position: relative; aspect-ratio: 4/3; background: var(--color-primary-soft); }
.detail-head .hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-head .hero .mono { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-primary); color: #fff; font-size: 3rem; font-weight: 800; }
.detail-head .meta { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--color-border-soft); }
.tabs button { border: 0; background: transparent; border-radius: 8px; padding: 8px 16px; font: inherit; font-weight: 700; color: rgba(43,42,36,.7); cursor: pointer; }
.tabs button.active { background: var(--color-primary); color: #fff; }
.tabs button.active.caution { background: var(--color-caution); }
.tabpanel { padding: 24px; display: none; }
.tabpanel.active { display: block; }
.field { margin-bottom: 20px; }
.field h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: rgba(26,95,74,.7); margin: 0 0 4px; }
.field p { margin: 0; }
.caution-box { border: 1px solid rgba(181,101,29,.3); background: rgba(181,101,29,.08); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.caution-box h4 { color: var(--color-caution); }
.nabawi { border-inline-start: 4px solid var(--color-secondary); background: rgba(200,155,60,.08); padding: 16px; border-radius: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--color-primary); color: #fff; padding: 10px 18px; border-radius: 12px; font-weight: 700; }
.section { margin-block: 2.5rem; }
.hero-lead h1 { font-size: 2.4rem; line-height: 1.1; }
.hero-lead p { font-size: 1.15rem; color: rgba(43,42,36,.75); max-width: 42rem; }
.cond-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.cond-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-border-soft); background: var(--color-surface); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500; }
.cond-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cond-chip .n { background: var(--color-primary-soft); color: var(--color-primary); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.video-wrap { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.site-footer { border-top: 1px solid var(--color-border-soft); color: rgba(43,42,36,.5); font-size: 14px; padding: 2rem 0; }
.research a { color: var(--color-accent); display: block; margin-bottom: 6px; }