/* SPECIFICITY: every selector below is written as :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui). :is() takes
   the specificity of its most specific argument, so each rule counts as two IDs (2,x,x) although no
   element needs the id "wadi-s". This beats Jannah rules such as "#the-post .entry-content a/ul li/p/img"
   without any !important. */
/* Wadi site UI: tools grid, in-article box, end strip, home block, widget.
   Same tokens and contrast notes as wadi-tools.css. The contour motif appears only in
   the hero, the end strip (and the calculator card header). */
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) {
  --wadi-teal: #0b5d55;
  --wadi-ink: #12312d;
  --wadi-ink-soft: #3f5a56;
  --wadi-mist: #eef4f2;
  --wadi-white: #ffffff;
  --wadi-saffron: #c9871f;
  --wadi-saffron-deep: #8a5a0b;
  --wadi-alert: #b4432f;
  --wadi-line: #c6d6d2;
  --wadi-line-strong: #5f7a75;
  box-sizing: border-box;
  color: var(--wadi-ink);
  font-size: 17px;
  line-height: 1.8;
  text-align: right;
}
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) *, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) *::before, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) *::after { box-sizing: border-box; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) ul { margin: 0; padding: 0; list-style: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) li { margin: 0; padding: 0; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) p { margin: 0; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a { text-decoration: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-icon { flex: none; width: 28px; height: 28px; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-dot { fill: var(--wadi-saffron); stroke: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-contour { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--wadi-teal); opacity: .2; pointer-events: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a:focus-visible { outline: 3px solid var(--wadi-teal); outline-offset: 2px; }

/* Tool links (hero + grid cards, compact rows) */
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tool-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--wadi-ink);
  transition: color .15s, border-color .15s;
}
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tool-link__icon { color: var(--wadi-teal); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tool-link__text { display: block; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tool-link__name { display: block; font-weight: 700; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tool-link__line { display: block; margin-top: 2px; font-size: 15px; line-height: 1.7; color: var(--wadi-ink-soft); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tool-link:hover .wadi-tool-link__name { color: var(--wadi-teal); }

:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--hero,
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--hero .wadi-tool-link,
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--grid .wadi-tool-link {
  height: 100%;
  padding: 16px;
  background: var(--wadi-white);
  border: 1px solid var(--wadi-line);
  border-radius: 10px;
}
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--hero .wadi-tool-link:hover,
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--grid .wadi-tool-link:hover { border-color: var(--wadi-teal); }

/* Hero */
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-hero { position: relative; margin: 1.5em 0; padding: 28px 16px; overflow: hidden; background: var(--wadi-mist); border-radius: 10px; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-hero__inner { position: relative; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-hero__title { margin: 0 0 8px; padding: 0; font-size: 26px; font-weight: 700; line-height: 1.5; color: var(--wadi-ink); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-hero__sub { margin: 0 0 20px; max-width: 46em; color: var(--wadi-ink-soft); }

/* Compact (sidebar, fits 300px) */
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-tools-compact { max-width: 100%; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--compact li { border-bottom: 1px solid var(--wadi-line); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--compact li:last-child { border-bottom: 0; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--compact .wadi-tool-link { align-items: center; gap: 12px; padding: 10px 2px; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--compact .wadi-icon { width: 24px; height: 24px; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--compact .wadi-tool-link__name { font-weight: 600; }

/* In-article box */
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 1.8em 0;
  padding: 16px;
  background: var(--wadi-mist);
  border: 1px solid var(--wadi-line);
  border-radius: 10px;
}
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-related__icon { color: var(--wadi-teal); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-related__text { flex: 1 1 220px; min-width: 0; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-related__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--wadi-teal); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-related__line { margin: 2px 0 0; font-size: 15px; line-height: 1.7; color: var(--wadi-ink); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-btn,
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-btn:visited{
  display: inline-block;
  min-height: 44px;
  padding: 9px 20px;
  background: var(--wadi-teal);
  color: var(--wadi-white);
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color .15s;
}
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-btn:hover{ background: var(--wadi-ink); color: var(--wadi-white); }

/* End strip */
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-endstrip { position: relative; margin: 2em 0 1em; overflow: hidden; background: var(--wadi-mist); border-radius: 10px; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-endstrip .wadi-contour { opacity: .12; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-endstrip__inner { position: relative; padding: 16px; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-endstrip__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-endstrip__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--wadi-teal); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-endstrip__all{ font-size: 15px; color: var(--wadi-teal); text-decoration: underline; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-pills { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px;
  background: var(--wadi-white);
  color: var(--wadi-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--wadi-line);
  border-radius: 999px;
  transition: color .15s, border-color .15s;
}
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-pill:hover { color: var(--wadi-teal); border-color: var(--wadi-teal); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-pill .wadi-icon { width: 20px; height: 20px; color: var(--wadi-teal); }

/* Home categories */
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-cat { margin: 2.2em 0; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-cat__title { margin: 0 0 14px; padding: 0; font-size: 24px; font-weight: 700; line-height: 1.5; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-cat__title a { color: var(--wadi-ink); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-cat__title a:hover { color: var(--wadi-teal); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-trust { margin: 2em 0 1em; padding-top: 14px; border-top: 1px solid var(--wadi-line); font-size: 15px; color: var(--wadi-ink-soft); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-trust a { color: var(--wadi-teal); text-decoration: underline; }

@media (min-width: 640px) {
  :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--hero,
  :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tools--grid { grid-template-columns: 1fr 1fr; }
  :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-hero { padding: 36px 28px; }
}
/* Home category posts: responsive grid, 1 / 2 / 4 columns */
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 16px; width: 100%; max-width: 100%; min-width: 0; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-post { min-width: 0; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-post__link { display: block; min-width: 0; color: var(--wadi-ink); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-post__media { display: block; margin: 0 0 10px; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-post__img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0; padding: 0; float: none; border: 0; border-radius: 10px; box-shadow: none; background: var(--wadi-mist); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-post__title { display: block; font-size: 17px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-post__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; margin-top: 2px; overflow: hidden; font-size: 15px; line-height: 1.7; color: var(--wadi-ink-soft); }

/* Theme resets inside our components (Jannah adds bullets, indents, link colours, p margins). */
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) ul, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) ol { margin: 0; padding: 0; list-style: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) li { margin: 0; padding: 0; list-style: none; background: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) li::before, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) li::after { content: none; display: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) h2::before, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) h2::after { content: none; display: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a { border-bottom: 0; box-shadow: none; background-image: none; text-decoration: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a:visited { text-decoration: none; }

/* Link colours in every state (normal, visited, hover, focus, active).
   "color" is !important ONLY on these non-teal links: Jannah prints inline CSS from its options,
   "#the-post .entry-content a:not(.shortc-button){color:#0b5d55 !important}", which paints the button
   text the same teal as its background. Specificity cannot beat !important, so this is the one place
   it is needed. Links meant to be teal (endstrip "all", trust line) need nothing. */
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-btn, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-btn:visited, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-btn:hover, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-btn:focus, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-btn:active { color: #ffffff !important; text-decoration: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-btn:hover, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-btn:focus { background: var(--wadi-ink); }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-pill, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-pill:visited, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-pill:active { color: var(--wadi-ink) !important; text-decoration: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-pill:hover, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-pill:focus { color: var(--wadi-teal) !important; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-endstrip__all, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-endstrip__all:visited, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-endstrip__all:hover, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-endstrip__all:focus { color: var(--wadi-teal); text-decoration: underline; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-tool-link, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-tool-link:visited, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-tool-link:hover, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-tool-link:focus, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-tool-link:active { color: var(--wadi-ink) !important; text-decoration: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-post__link, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-post__link:visited, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-post__link:hover, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-post__link:focus { color: var(--wadi-ink) !important; text-decoration: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-cat__title a, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-cat__title a:visited { color: var(--wadi-ink) !important; text-decoration: none; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-cat__title a:hover, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-cat__title a:focus { color: var(--wadi-teal) !important; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-trust a, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-trust a:visited, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-trust a:hover, :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-trust a:focus { color: var(--wadi-teal); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-tool-link,
  :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-btn,
  :is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) a.wadi-pill { transition: none; }
}

/* Generic in-article box and visually hidden text */
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-related--generic { display: block; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui).wadi-related--generic .wadi-pills { margin-top: 10px; }
:is(.wadi-ui, #wadi-s #wadi-s .wadi-ui) .wadi-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }