/* =========================================================================
   Wadjaro — design tokens + component styles
   Implements the Design Handoff: clay / dark-green / off-white palette,
   Newsreader + Public Sans type, RTL via logical properties.
   Prefix: wj-   |   No hardcoded hex in content — drive everything from :root.
   ========================================================================= */

:root {
  /* Brand palette */
  --wj-clay:      #c96b4a;  /* terracotta accent / CTAs */
  --wj-clay-soft: #f6ece3;  /* tinted clay background */
  --wj-green:     #3d4a42;  /* dark-green trust sections */
  --wj-green-2:   #2f3933;  /* deeper green */
  --wj-bg:        #faf7f3;  /* page surface (off-white) */
  --wj-cream:     #ece5da;  /* secondary surface */
  --wj-ink:       #2a2520;  /* primary text */
  --wj-muted:     #5e564d;  /* secondary text */
  --wj-faint:     #a89a86;  /* labels / meta */
  --wj-line:      #ece4d8;  /* hairline borders */
  --wj-card:      #ffffff;  /* card surface */

  /* Semantic accents */
  --wj-ok:        #3d6b52;  /* "what works" / success green */
  --wj-ok-soft:   #f1f5f1;
  --wj-warn:      #b1492b;  /* mistakes / caution */
  --wj-warn-soft: #fdf3f0;

  /* Type */
  --wj-font-head: 'Newsreader', Georgia, 'Times New Roman', serif;
  --wj-font-body: 'Public Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --wj-font-ar-ui:   'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --wj-font-ar-body: 'Noto Naskh Arabic', 'IBM Plex Sans Arabic', serif;

  /* Shape */
  --wj-radius:  14px;
  --wj-radius-sm: 8px;
  --wj-gap:     1.25rem;
  --wj-content: 1180px;
}

/* ---- Base type ---------------------------------------------------------- */
body { font-family: var(--wj-font-body); color: var(--wj-ink); }
h1, h2, h3, h4, .wj-heading { font-family: var(--wj-font-head); font-weight: 500; letter-spacing: -.01em; }

/* ---- Arabic / RTL typography ------------------------------------------- */
[lang="ar"], [dir="rtl"] { font-family: var(--wj-font-ar-ui); }
[lang="ar"] p, [dir="rtl"] p,
[lang="ar"] li, [dir="rtl"] li { font-family: var(--wj-font-ar-body); line-height: 1.9; letter-spacing: normal; }
/* Keep Latin runs (URLs, numbers, brand) readable inside Arabic text. */
[dir="rtl"] .wj-ltr, .wj-ltr { direction: ltr; unicode-bidi: isolate; }

/* =========================================================================
   Shared component shell
   ========================================================================= */
.wj-callout,
.wj-callout--affiliate,
.wj-callout--mistake,
.wj-callout--sources,
.wj-checklist,
.wj-newsletter,
.wj-card--tool,
.wj-related,
.wj-ad {
  margin-block: var(--wj-gap);
  border: 1px solid var(--wj-line);
  border-radius: var(--wj-radius);
  padding: 1.25rem 1.35rem;
  background: var(--wj-card);
  /* RTL falls out of logical props automatically; text follows direction. */
  text-align: start;
}
.wj-callout h3, .wj-checklist h3, .wj-newsletter h3,
.wj-card--tool h3, .wj-related h3 {
  margin-block: 0 .5rem;
  font-size: 1.15rem;
}

/* ---- Affiliate disclosure (FTC) ---------------------------------------- */
.wj-callout--affiliate {
  background: var(--wj-cream);
  border-color: #e3d9c8;
  font-size: .95rem;
  color: var(--wj-muted);
}

/* ---- Common mistakes ---------------------------------------------------- */
.wj-callout--mistake {
  background: var(--wj-warn-soft);
  border-color: #f1d8cf;
}
.wj-callout--mistake h3 { color: var(--wj-warn); }
.wj-callout--mistake .wj-item { display: flex; gap: .6rem; align-items: flex-start; }
.wj-callout--mistake .wj-item::before { content: "!"; flex: none; font-weight: 700; color: #fff;
  background: var(--wj-clay); inline-size: 1.25rem; block-size: 1.25rem; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; margin-block-start: .15rem; }

/* ---- Official sources box (YMYL trust) --------------------------------- */
.wj-callout--sources {
  background: var(--wj-ok-soft);
  border-color: #d8e3d9;
}
.wj-callout--sources h3 { color: var(--wj-ok); }
.wj-callout--sources a { word-break: break-word; }

/* ---- Checklist block ---------------------------------------------------- */
.wj-checklist { background: var(--wj-card); }
.wj-checklist__items { list-style: none; margin: 0; padding: 0; }
.wj-checklist__item {
  display: flex; gap: .7rem; align-items: flex-start;
  padding-block: .55rem; border-block-start: 1px solid var(--wj-line);
  min-block-size: 44px; /* tap target */
}
.wj-checklist__item:first-child { border-block-start: 0; }
.wj-checklist__item::before {
  content: ""; flex: none; inline-size: 20px; block-size: 20px; margin-block-start: .1rem;
  border: 2px solid var(--wj-clay); border-radius: 6px;
}

/* ---- Newsletter CTA ----------------------------------------------------- */
.wj-newsletter {
  background: var(--wj-green); color: #e7ede8; border-color: transparent;
}
.wj-newsletter h3 { color: #fbf8f3; }
.wj-newsletter p { color: #c2cdc4; margin: 0; }

/* ---- Tool card ---------------------------------------------------------- */
.wj-card--tool { background: var(--wj-card); }
.wj-card--tool .wj-tool-status {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--wj-clay); background: var(--wj-clay-soft);
  padding: .25rem .6rem; border-radius: 999px; margin-block-end: .5rem;
}

/* ---- Related guides / checklists --------------------------------------- */
.wj-related { background: var(--wj-cream); border-color: #e3d9c8; }
.wj-cta-link {
  display: inline-block; margin-block-start: .5rem; font-weight: 600;
  color: var(--wj-clay); text-decoration: underline; text-underline-offset: 3px;
}

/* ---- Trust / disclaimer strip ------------------------------------------ */
.wj-trust-strip {
  margin-block: var(--wj-gap); padding: .9rem 1.1rem; border-radius: var(--wj-radius-sm);
  background: var(--wj-green); color: #c2cdc4; font-size: .9rem; line-height: 1.6; text-align: start;
}

/* ---- Ad placeholder (reserve height to avoid CLS) ---------------------- */
.wj-ad {
  text-align: center; color: var(--wj-faint); font-size: .85rem; letter-spacing: .04em;
  text-transform: uppercase; background: var(--wj-cream); border-style: dashed;
  display: flex; align-items: center; justify-content: center; min-block-size: 90px;
}

/* =========================================================================
   HOMEPAGE LAYOUT (design component library: hero, grids, bands, cards)
   ========================================================================= */

/* Hide the "Home" page title on the front page (hero carries the H1). */
.home .entry-hero,
.page-id-5 .entry-hero .entry-header,
.home .entry-header .entry-title { display: none; }

/* Section container + rhythm */
.wj-section { max-inline-size: var(--wj-content); margin-inline: auto; padding-block: 3rem; padding-inline: 1.25rem; }
.wj-section__eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wj-clay); margin: 0 0 .4rem; }
.wj-section__title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.3rem); margin: 0 0 1.5rem; }
.wj-section__lead { font-size: 1.05rem; color: var(--wj-muted); max-inline-size: 60ch; margin: -0.6rem 0 1.6rem; }

/* Responsive grids: 1 col mobile -> 2 tablet -> 3/2 desktop */
.wj-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .wj-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .wj-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .wj-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .wj-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Generic card */
.wj-card { background: var(--wj-card); border: 1px solid var(--wj-line); border-radius: var(--wj-radius);
  padding: 1.4rem 1.45rem; block-size: 100%; }
.wj-card__title { font-size: 1.2rem; margin: .1rem 0 .4rem; }
.wj-card__title a { color: var(--wj-ink); text-decoration: none; }
.wj-card__title a:hover { color: var(--wj-clay); }
.wj-card__blurb { color: var(--wj-muted); font-size: .95rem; margin: 0; }
.wj-card__icon { font-size: 1.7rem; line-height: 1; margin: 0 0 .6rem; }
.wj-card__kicker, .wj-card__meta { font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wj-faint); }
.wj-card--guide .wp-block-post-featured-image, .wj-card--guide img { border-radius: var(--wj-radius-sm); overflow: hidden; aspect-ratio: 16/9; object-fit: cover; }

/* ---- Hero -------------------------------------------------------------- */
.wj-hero { background: linear-gradient(180deg, var(--wj-cream), var(--wj-bg)); }
.wj-hero__inner { max-inline-size: var(--wj-content); margin-inline: auto; padding-block: clamp(2.5rem, 1rem + 6vw, 5rem); padding-inline: 1.25rem; }
.wj-hero__title { font-size: clamp(2rem, 1.2rem + 4vw, 3.4rem); line-height: 1.08; margin: 0 0 1rem; }
.wj-hero__sub { font-size: 1.15rem; color: var(--wj-muted); max-inline-size: 46ch; margin: 0 0 1.6rem; }
.wj-hero__cols { gap: 2rem; align-items: center; }

/* Hero checklist preview card */
.wj-hero__card { background: var(--wj-card); border: 1px solid var(--wj-line); border-radius: var(--wj-radius);
  padding: 1.4rem 1.5rem; box-shadow: 0 30px 60px -40px rgba(61,74,66,.5); }
.wj-hero__card-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wj-faint); margin: 0 0 .8rem; }
.wj-hero__card .wj-checklist__item { font-size: .98rem; }
.wj-hero__card .wj-checklist__item.is-done { color: var(--wj-faint); text-decoration: line-through; }
.wj-hero__card .wj-checklist__item.is-done::before { background: var(--wj-clay); border-color: var(--wj-clay); }
.wj-progress { block-size: 8px; border-radius: 999px; background: var(--wj-cream); overflow: hidden; margin-block: 1rem .4rem; }
.wj-progress__fill { display: block; block-size: 100%; background: var(--wj-clay); border-start-start-radius: 999px; border-end-start-radius: 999px; }
.wj-progress__label { font-size: .82rem; color: var(--wj-muted); margin: 0; }

/* ---- Buttons ----------------------------------------------------------- */
.wj-btn .wp-block-button__link, a.wj-btn { border-radius: 999px; font-weight: 600; padding: .7rem 1.4rem; }
.wj-btn--primary .wp-block-button__link { background: var(--wj-clay); color: #fff; border: 1px solid var(--wj-clay); }
.wj-btn--primary .wp-block-button__link:hover { background: #b85b3d; border-color: #b85b3d; }
.wj-btn--ghost .wp-block-button__link { background: transparent; color: var(--wj-green); border: 1px solid #cdbfaf; }
.wj-btn--ghost .wp-block-button__link:hover { background: var(--wj-cream); }

/* ---- Full-bleed band (works in boxed themes, no alignfull needed) ------ */
.wj-band { margin-inline: calc(50% - 50vw); padding-block: 3.25rem; }
.wj-band__inner { max-inline-size: var(--wj-content); margin-inline: auto; padding-inline: 1.25rem; }
.wj-band--green { background: var(--wj-green); color: #e7ede8; }
.wj-band--green .wj-section__title, .wj-band--green .wj-section__eyebrow { color: #fbf8f3; }
.wj-band--green .wj-section__eyebrow { color: var(--wj-clay); }
.wj-band--green .wj-section__lead { color: #c2cdc4; }

/* ---- Featured checklist cards (on green band) -------------------------- */
.wj-card--checklist { background: #475549; border-color: #51604f; color: #e7ede8; }
.wj-card--checklist .wj-card__title a { color: #fbf8f3; }
.wj-card--checklist .wj-card__title a:hover { color: var(--wj-clay); }
.wj-card--checklist .wj-card__blurb { color: #c2cdc4; }
.wj-chip { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255,255,255,.12); color: #e7ede8; padding: .25rem .6rem; border-radius: 999px; margin-block-end: .6rem; }

/* ---- Empty state ------------------------------------------------------- */
.wj-empty { color: var(--wj-muted); font-style: italic; }

/* =========================================================================
   Directional fixes (only where logical props are not enough)
   ========================================================================= */
[dir="rtl"] .wj-cta-link::after { content: " ←"; }
[dir="ltr"] .wj-cta-link::after { content: " →"; }