/**
 * Tadreab — design system, header, hero, card panel and CTA footer.
 *
 * Everything down to the "THEME SHELL ADDITIONS" banner is the reference
 * landing page's stylesheet, extracted from its inline <style> block unchanged.
 * Treat it as the source of truth for the design and change it only when the
 * design itself changes.
 *
 * Below that banner is what the reference file had no need for, because it was
 * a single page: the shared content area every other page renders into, the
 * skip link, and the neutralising of the CTA's negative margin on pages that
 * have no card panel for it to tuck under.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --brand-blue: #1b4fa0;
  --brand-blue-light: #2f6fe0;
  --brand-blue-dark: #123870;
  --navy-deep: #14294a;
  --ink: #10161f;
  --muted: #6b7480;
  --paper: #f1f2f4;
  /* The header band. Lighter than the page's own #eeeeee so the row lifts off
     the page instead of dissolving into it — the header is the one element
     that has to stay findable while everything under it scrolls. */
  --header-bg: #f6f7f8;
  --border: #e3e5e9;
  --orange: #f4732a;
  --radius: 24px;
}

html {
  background: #eeeeee;
  overflow-x: hidden;
}

.tdb-wrap {
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  direction: rtl;
  text-align: right;
  color: var(--ink);
  line-height: 1.6;
  background-color: #eeeeee;
  position: relative;
}

/* nothing inside the page should ever push the viewport sideways */
.tdb-wrap img,
.tdb-wrap svg {
  max-width: 100%;
}

/* readability scrim over the photo, strongest on the text side (right in RTL) */
.tdb-wrap::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* subtle paper grain, like the reference */
.tdb-wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

.tdb-wrap > * {
  position: relative;
  z-index: 1;
}

.tdb-wrap a {
  text-decoration: none;
  color: inherit;
}

.tdb-wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tdb-wrap button {
  font-family: inherit;
  cursor: pointer;
}

.tdb-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- HEADER ---------- */
.tdb-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 10px 18px;
}

/* The light band behind the header.
   A pseudo-element rather than a background on .tdb-header, because that
   element is also .tdb-container — it is capped at 1240px, so a background on
   it would stop mid-screen and read as a floating card. This spans the
   viewport while the content stays in the container. It cannot escape the
   header's own stacking context (z-index: 20 above), so z-index: -1 puts it
   behind the header's contents and nothing else. */
.tdb-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--header-bg);
  z-index: -1;
}

.tdb-header-start {
  display: flex;
  align-items: center;
  gap: 22px;
}

.tdb-logo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-direction: row-reverse;
}

.tdb-logo-text {
  line-height: 1.15;
  text-align: right;
}

.tdb-logo-text strong {
  display: block;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.tdb-logo-text span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.4px;
}

.tdb-spark {
  color: var(--brand-blue-light);
  margin-top: 2px;
}

.tdb-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.tdb-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: #46505d;
  position: relative;
  padding-bottom: 8px;
  transition: color 0.25s ease;
}

.tdb-nav a:hover {
  color: var(--brand-blue);
}

.tdb-nav a.active {
  color: var(--brand-blue);
  font-weight: 700;
}

.tdb-nav a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-blue);
  border-radius: 2px;
}

/* ---- "استكشف" menu ----
   The panel is absolutely positioned inside .tdb-menu, so opening it never
   changes the height of the header row. [hidden] does the hiding, which means
   the closed panel is out of the accessibility tree and out of the tab order
   without a second class to keep in sync. */

.tdb-menu {
  position: relative;
}

.tdb-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border: 0;
  background: none;
  font-size: 14.5px;
  font-weight: 600;
  color: #46505d;
  transition: color 0.25s ease;
}

.tdb-menu-toggle:hover,
.tdb-menu-toggle[aria-expanded="true"] {
  color: var(--brand-blue);
}

.tdb-menu-caret {
  display: inline-flex;
  transition: transform 0.22s ease;
}

.tdb-menu-toggle[aria-expanded="true"] .tdb-menu-caret {
  transform: rotate(180deg);
}

.tdb-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  /* Anchored to the start edge, which is the right one in RTL — the menu hangs
     under its own button rather than reaching across the header. */
  inset-inline-start: 0;
  min-width: 230px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(16, 22, 31, 0.14);
  z-index: 60;
}

.tdb-menu-panel[hidden] {
  display: none;
}

.tdb-menu-panel a,
.tdb-menu-item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: #33404f;
  transition: background 0.18s ease, color 0.18s ease;
}

.tdb-menu-panel a:hover,
.tdb-menu-panel a:focus-visible {
  background: #f2f5fb;
  color: var(--brand-blue);
}

/* "جميع الأقسام" is the escape hatch from a list that only ever shows three
   cards, so it is separated from them rather than reading as a fourth. */
.tdb-menu-all {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-weight: 700;
  color: var(--brand-blue);
}

/* ---- header search ---- */

.tdb-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* No ring, no border change on focus: the caret and the box's own white
   against the grey band are enough to show where you are typing, and the
   halo that used to draw itself here read as an error state. */

.tdb-search-field {
  width: 210px;
  max-width: 34vw;
  padding: 7px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}

.tdb-search-field:focus {
  outline: none;
}

.tdb-search-field::placeholder {
  color: #9aa2ad;
}

.tdb-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  transition: background 0.2s ease;
}

.tdb-search-submit:hover {
  background: var(--brand-blue-dark);
}

.tdb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- account corner ----
   A plain run of flex items: a login button and a register link when logged
   out, a single user icon when logged in. No dropdown, so nothing here needs
   positioning context.

   These rules are duplicated in the quiz plugin's account.css on purpose. That
   stylesheet only loads when the plugin is active; the theme prints the same
   markup from tadreab_account_corner() as a fallback when it is not, and an
   unstyled icon in the header is the one place a missing plugin would actually
   look broken. Same values in both, so whichever wins is the same result. */

.tdb-actions .tqm-account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid #d5d8dd;
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.tdb-actions .tqm-account-link:hover,
.tdb-actions .tqm-account-link:focus-visible {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  box-shadow: 0 8px 18px rgba(27, 79, 160, 0.16);
  transform: translateY(-2px);
}

.tdb-actions .tqm-account-link:active {
  transform: scale(0.96);
}

.tdb-actions .tqm-account-register {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-blue);
  white-space: nowrap;
  padding: 4px 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.tdb-actions .tqm-account-register:hover,
.tdb-actions .tqm-account-register:focus-visible {
  color: var(--brand-blue-dark);
  border-bottom-color: currentColor;
}

/* Log out, beside the account icon. It already carries .tdb-btn.tdb-btn-ghost,
   so this only trims it: a header button that never wraps, and never grows
   taller than the 42px icon it sits next to. */
.tdb-actions .tqm-account-logout {
  white-space: nowrap;
  padding: 9px 16px;
  font-size: 13.5px;
}

.tdb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid transparent;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
  white-space: nowrap;
}

.tdb-btn:active {
  transform: scale(0.97);
}

.tdb-btn-primary {
  background: var(--brand-blue);
  color: #fff;
}

.tdb-btn-primary:hover {
  background: var(--brand-blue-light);
  box-shadow: 0 10px 22px rgba(27, 79, 160, 0.28);
  transform: translateY(-2px);
}

.tdb-btn-ghost {
  background: transparent;
  color: #46505d;
  border-color: #d5d8dd;
}

.tdb-btn-ghost:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.tdb-btn-hero {
  background: var(--brand-blue);
  color: #fff;
  padding: 15px 28px;
  border-radius: 10px;
  font-size: 16px;
  box-shadow: 0 10px 24px rgba(27, 79, 160, 0.25);
}

.tdb-btn-hero:hover {
  background: var(--brand-blue-light);
  transform: translateY(-2px);
}

.tdb-btn-outline {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  border-color: #cfd3d9;
  padding: 15px 26px;
  border-radius: 10px;
  font-size: 16px;
}

.tdb-btn-outline:hover {
  border-color: var(--ink);
  background: #fff;
  transform: translateY(-2px);
}

.tdb-cta a.tdb-btn-light,
.tdb-wrap a.tdb-btn-light {
  background: #fff;
  color: var(--ink);
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 15px;
}

.tdb-wrap a.tdb-btn-primary {
  color: #fff;
}

.tdb-wrap a.tdb-btn-hero {
  color: #fff;
}

.tdb-btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
}

.tdb-burger {
  display: none;
  background: none;
  border: none;
  padding: 6px;
}

.tdb-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* burger turns into an X while the menu is open */
.tdb-burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.tdb-burger.is-open span:nth-child(2) {
  opacity: 0;
}

.tdb-burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- HERO ---------- */
.tdb-hero {
  background-color: #eeeeee;
  position: relative;
}

.tdb-hero .tdb-container {
  position: relative;
  height: 100%;
}

.tdb-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  max-width: 760px;
  object-fit: contain;
  object-position: top right;
  pointer-events: none;
  z-index: 0;
}

.tdb-hero-content {
  padding-top: 120px;
  padding-bottom: 40px;
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin-inline-start: auto;
  margin-inline-end: 10%;
  /* pulls the content box 10% further right, overlapping the image;
     content stays readable since z-index:2 sits above the image */
}

.tdb-hero-title {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 24px;
  letter-spacing: -1px;
  text-wrap: balance;
}

.tdb-hero-title .accent {
  color: var(--brand-blue);
}

.tdb-hero-desc {
  font-size: 17px;
  color: #5b646f;
  margin: 0 0 34px;
  line-height: 1.75;
}

.tdb-hero-cta {
  display: flex;
  gap: 14px;
  margin-bottom: 54px;
  flex-wrap: wrap;
  margin-right: 50px;
}

.tdb-stats {
  display: flex;
  padding-top: 22px;
  border-top: 1px solid #dcdfe4;
  margin-bottom: 44px;
  margin-right: 54px;
}

.border-rl {
  border-left: 1px solid #dcdfe4;
  border-right: 1px solid #dcdfe4;
}

.tdb-stat {
  padding: 0 26px;
}

.tdb-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  direction: ltr;
  text-align: right;
}

.tdb-stat span {
  font-size: 13px;
  color: var(--muted);
}

.tdb-trust-label {
  font-size: 13px;
  font-weight: 700;
  color: #4c5561;
  margin: 0 0 18px;
  margin-right: 80px;
}

.tdb-trust-logos {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-right: 80px;
}

.tdb-tlogo {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9aa2ac;
  font-size: 12px;
  font-weight: 700;
  transition: color 0.25s ease;
}

.tdb-tlogo:hover {
  color: #66707c;
}

.tdb-tlogo svg {
  flex-shrink: 0;
}

/* ---------- FEATURES / CARDS PANEL ---------- */
.tdb-features-section {
  position: relative;
  z-index: 3;
  padding: 200px 32px 130px;
  /* .tdb-cta is pulled up 110px and is opaque navy, so without the bottom
     padding it would cover the panel — and that is exactly where the
     start buttons sit. */
  direction: ltr;
  background-color: #eeeeee;
}

.tdb-features-panel {
  max-width: 1240px;
  margin: 0 auto;
  /* frosted glass so bg.jpeg reads through the panel */
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 44px 0 44px 44px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(16, 22, 31, 0.18);
}

/* Static intro block */
.tdb-static-intro {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* Arabic copy, so this column reads right-to-left even though the panel
     itself stays LTR to keep intro-left / cards-right ordering */
  direction: rtl;
  text-align: right;
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

.tdb-static-intro h2 {
  font-size: 38px;
  font-weight: 900;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 20px;
  letter-spacing: -1px;
}

.tdb-static-intro p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 auto;
}

.tdb-subscribe-box {
  margin-top: 32px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- PLUGIN CARDS INSIDE THE PANEL ----------
   The [tadreab_cards] shortcode outputs .tqm-cats. These rules make it
   behave as the panel's flex child, in place of the old hardcoded
   carousel. min-width:0 is the important one — without it a flex child
   refuses to shrink below its content width and the panel overflows. */
.tdb-features-panel .tqm-cats {
  flex-grow: 1;
  width: auto;
  min-width: 0;
  --tqm-gap: 22px;
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* the wall centres and pads itself by default; inside the panel it
   shouldn't, so the cards bleed off the right edge as before */
.tdb-features-panel .tqm-cats-marquee {
  max-width: none;
  margin: 0;
  padding: 0;
}

.tdb-features-panel .tqm-cat-card {
  min-height: 430px;
}

/* ---------- CTA FOOTER ---------- */
.tdb-cta {
  background: var(--navy-deep);
  padding: 70px 0 20px;
  margin-top: -110px;
  color: #fff;
  z-index: 3;
}

.tdb-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tdb-cta-text h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 6px;
  color: #fdfeff;
}

.tdb-cta-text p {
  margin: 0;
  color: #9aa8bd;
  font-size: 14.5px;
}

.tdb-cta-bottom {
  padding-top: 22px;
  text-align: center;
  font-size: 12.5px;
  color: #7c8899;
}

/* ==========================================================
   RESPONSIVE — 1180 / 1080 / 980 / 720 / 560 / 400
   ========================================================== */

@media (max-width: 1180px) {
  /* the hero text box no longer needs to dodge the photo this hard */
  .tdb-hero-content {
    margin-inline-end: 4%;
  }

  /* Between here and the burger breakpoint the header row carries the logo,
     the menu, the search box, the account icon and log out. The search field
     is the only one of those that can give ground without losing meaning. */
  .tdb-nav {
    gap: 18px;
  }

  .tdb-search-field {
    width: 150px;
  }
}

@media (max-width: 1080px) {
  .tdb-features-section {
    padding-top: 150px;
  }

  .tdb-static-intro {
    width: 300px;
  }

  .tdb-static-intro h2 {
    font-size: 32px;
  }
}

/* ---- tablet and below: burger nav, photo becomes a backdrop ---- */
@media (max-width: 980px) {
  .tdb-nav {
    display: none;
  }

  /* opened by the burger via a class, not inline styles, so it can't get
     stuck open when the viewport grows back past the breakpoint */
  .tdb-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: absolute;
    top: 84px;
    inset-inline-start: 18px;
    inset-inline-end: 18px;
    background: #fff;
    padding: 18px 22px;
    border-radius: 14px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12);
    z-index: 50;
  }

  .tdb-nav.is-open a {
    padding-bottom: 0;
    font-size: 16px;
  }

  /* The burger sheet holds the search box, and only that. The "استكشف" menu
     stays out here beside the logo at every width — it is the site's table of
     contents, and burying a two-tap disclosure inside another one is how a
     phone visitor stops finding the catalogue at all. */
  .tdb-nav.is-open .tdb-search {
    width: 100%;
  }

  .tdb-nav.is-open .tdb-search-field {
    width: 100%;
    max-width: none;
  }

  /* Tighter against the wordmark once the row has less to hold. */
  .tdb-header-start {
    gap: 14px;
  }

  .tdb-burger {
    display: block;
  }

  /* The photo becomes a full-bleed backdrop. It sits at z-index 0, not
     -1: a negative z-index puts it BEHIND .tdb-hero's own opaque
     background, which made it invisible on every phone. */
  .tdb-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }

  .tdb-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(241, 242, 244, 0.86);
    z-index: 1;
    pointer-events: none;
  }

  .tdb-hero-content {
    margin-inline-start: 0;
    margin-inline-end: 0;
    max-width: 100%;
    padding-top: 80px;
    padding-bottom: 64px;
  }

  /* These hardcoded right offsets exist to clear the desktop photo. There
     is no photo to clear once it is a backdrop, and left in place they
     shove the content off the side of a phone. */
  .tdb-hero-cta,
  .tdb-stats,
  .tdb-trust-label,
  .tdb-trust-logos {
    margin-right: 0;
  }

  .tdb-hero-cta {
    margin-bottom: 40px;
  }

  .tdb-stats {
    margin-bottom: 34px;
  }

  .tdb-features-section {
    padding: 110px 24px 130px;
  }

  .tdb-features-panel {
    flex-direction: column;
    gap: 32px;
    /* symmetric padding now that the cards sit below the intro instead of
       bleeding off the right edge */
    padding: 32px 24px;
  }

  .tdb-static-intro {
    width: 100%;
  }

  .tdb-static-intro h2 {
    font-size: 30px;
  }

  .tdb-static-intro p {
    margin-bottom: 0;
  }

  .tdb-subscribe-box {
    max-width: 420px;
  }
}

@media (max-width: 720px) {
  .tdb-container {
    padding: 0 22px;
  }

  .tdb-hero-desc {
    font-size: 16px;
    margin-bottom: 28px;
  }

  .tdb-stat {
    padding: 0 18px;
  }

  .tdb-trust-logos {
    gap: 16px 20px;
  }
}

@media (max-width: 560px) {
  .tdb-container {
    padding: 0 18px;
  }

  .tdb-header {
    padding: 18px 10px 14px;
    gap: 12px;
  }

  .tdb-logo-text strong {
    font-size: 22px;
  }

  .tdb-logo-text span {
    font-size: 10.5px;
  }

  /* On a phone the header keeps LOG IN and drops the marketing CTA — the
     reverse of what it used to do. "ابدأ الآن" is repeated by the hero and
     by the CTA band at the foot of every page, so losing it from the header
     costs nothing; hiding log-in left a signed-out visitor on a phone with
     no way into their account at all. */
  .tdb-actions .tqm-account-cta,
  .tdb-actions .tqm-account-register {
    display: none;
  }

  .tdb-actions .tqm-account-login {
    padding: 9px 14px;
    font-size: 13px;
  }

  /* The menu keeps its place beside the wordmark, just quieter. */
  .tdb-header-start {
    gap: 10px;
  }

  .tdb-menu-toggle {
    font-size: 13.5px;
    padding: 6px 2px;
  }

  .tdb-actions .tqm-account-link {
    width: 38px;
    height: 38px;
  }

  /* Log out stays at every width: it is the point of moving it into the
     header, and on a shared phone it is the control that matters most. */
  .tdb-actions .tqm-account-logout {
    padding: 8px 12px;
    font-size: 12.5px;
  }

  .tdb-hero-content {
    padding-top: 56px;
    padding-bottom: 48px;
  }

  /* full-width stacked buttons are far easier to hit than two half-width
     ones squeezed onto one line */
  .tdb-hero-cta {
    gap: 10px;
    margin-bottom: 32px;
  }

  .tdb-hero-cta .tdb-btn {
    flex: 1 1 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
  }

  /* three equal columns instead of a flex row that overflows */
  .tdb-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 30px;
  }

  .tdb-stat {
    padding: 0 8px;
    text-align: center;
  }

  .tdb-stat strong {
    font-size: 19px;
    text-align: center;
  }

  .tdb-stat span {
    font-size: 11.5px;
    line-height: 1.4;
    display: block;
  }

  .tdb-trust-label {
    font-size: 12px;
    margin-bottom: 14px;
  }

  .tdb-trust-logos {
    gap: 12px 16px;
  }

  .tdb-tlogo {
    font-size: 11px;
    gap: 5px;
  }

  .tdb-tlogo svg {
    width: 18px;
    height: 18px;
  }

  .tdb-features-section {
    padding: 80px 16px 130px;
  }

  .tdb-features-panel {
    padding: 26px 16px;
    gap: 26px;
  }

  .tdb-static-intro h2 {
    font-size: 26px;
    margin-bottom: 14px;
  }

  .tdb-static-intro p {
    font-size: 14px;
  }

  .tdb-cta {
    padding: 150px 0 32px;
  }

  /* heading first, button underneath — reads better stacked */
  .tdb-cta-inner {
    flex-direction: column-reverse;
    align-items: stretch;
    text-align: center;
    gap: 18px;
  }

  .tdb-cta-inner .tdb-btn-light {
    justify-content: center;
  }

  .tdb-cta-text h2 {
    font-size: 21px;
  }
}

@media (max-width: 400px) {
  .tdb-logo-text span {
    display: none;
  }

  .tdb-actions .tdb-btn {
    padding: 9px 14px;
    font-size: 13px;
  }

  .tdb-stat {
    padding: 0 4px;
  }

  .tdb-stat strong {
    font-size: 17px;
  }

  .tdb-stat span {
    font-size: 10.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tdb-wrap *,
  .tdb-wrap *::before,
  .tdb-wrap *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================
   THEME SHELL ADDITIONS
   Everything above is the reference design, untouched. Below is what a
   multi-page site needs and a single HTML file did not.
   ========================================================== */

body {
  margin: 0;
}

/* The wordmark is a link in the theme (it was a plain span in the reference),
   and may be replaced by an uploaded logo. */
a.tdb-logo-text {
  display: block;
}

.tdb-logo .custom-logo-link {
  display: block;
}

.tdb-logo .custom-logo {
  max-height: 48px;
  width: auto;
  height: auto;
}

/* Keyboard-only skip link. Visible the moment it is focused, and nowhere else. */
.tdb-skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  z-index: 999;
}

.tdb-skip-link:focus {
  inset-inline-start: 16px;
  top: 16px;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  background: #fff;
  color: var(--brand-blue);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(16, 22, 31, 0.2);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible focus everywhere. The reference had no keyboard states at all. */
.tdb-wrap a:focus-visible,
.tdb-wrap button:focus-visible,
.tdb-wrap input:focus-visible,
.tdb-wrap select:focus-visible,
.tdb-wrap textarea:focus-visible,
.tdb-wrap summary:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

/* ---------- SHARED CONTENT AREA (every page that is not the landing page) ----------
   The footer CTA is pulled up 110px so it tucks under the landing page's card
   panel. An inner page has no panel there, so the main area carries the same
   130px of bottom padding the features section does — the footer markup stays
   identical between templates, which is the point. */
.tdb-main {
  padding-bottom: 130px;
}

.tdb-page-head {
  padding: 56px 0 28px;
}

.tdb-page-head h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}

.tdb-page-head .tdb-page-sub {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15.5px;
}

.tdb-panel {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(16, 22, 31, 0.18);
  padding: 34px;
}

.tdb-entry {
  font-size: 16.5px;
  line-height: 1.85;
  color: #2b333d;
}

.tdb-entry > *:first-child {
  margin-top: 0;
}

.tdb-entry > *:last-child {
  margin-bottom: 0;
}

.tdb-entry h1,
.tdb-entry h2,
.tdb-entry h3,
.tdb-entry h4 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.3;
  margin: 1.8em 0 0.6em;
}

.tdb-entry h2 {
  font-size: 28px;
}

.tdb-entry h3 {
  font-size: 22px;
}

.tdb-entry h4 {
  font-size: 18px;
}

.tdb-entry p,
.tdb-entry ul,
.tdb-entry ol {
  margin: 0 0 1.2em;
}

.tdb-entry ul,
.tdb-entry ol {
  padding-inline-start: 1.4em;
}

.tdb-entry ul {
  list-style: disc;
}

.tdb-entry ol {
  list-style: decimal;
}

.tdb-entry li {
  margin-bottom: 0.5em;
}

.tdb-entry a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tdb-entry a:hover {
  color: var(--brand-blue-light);
}

.tdb-entry img,
.tdb-entry iframe {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.tdb-entry blockquote {
  margin: 1.6em 0;
  padding: 4px 20px;
  border-inline-start: 4px solid var(--brand-blue);
  color: #46505d;
}

.tdb-entry code,
.tdb-entry pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  direction: ltr;
  text-align: left;
}

.tdb-entry pre {
  background: #10161f;
  color: #e8ecf2;
  padding: 18px 20px;
  border-radius: 12px;
  overflow-x: auto;
}

.tdb-entry table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
}

.tdb-entry th,
.tdb-entry td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: right;
}

/* ---------- ARCHIVE / POST LIST ---------- */
.tdb-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.tdb-post-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tdb-post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -18px rgba(16, 22, 31, 0.3);
}

.tdb-post-card .tdb-post-thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.tdb-post-card .tdb-post-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.tdb-post-card h2 {
  font-size: 19px;
  font-weight: 800;
  margin: 0;
  line-height: 1.4;
}

.tdb-post-meta {
  font-size: 12.5px;
  color: var(--muted);
}

.tdb-post-card p {
  margin: 0;
  color: #5b646f;
  font-size: 14.5px;
  line-height: 1.8;
}

.tdb-more {
  margin-top: auto;
  font-weight: 700;
  font-size: 14px;
  color: var(--brand-blue);
}

.tdb-pagination {
  margin-top: 40px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.tdb-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 700;
  font-size: 14px;
}

.tdb-pagination .page-numbers.current,
.tdb-pagination .page-numbers:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

/* ---------- WIDGETS / SIDEBAR ---------- */
.tdb-layout-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

.tdb-widget {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 20px;
}

.tdb-widget-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 12px;
}

.tdb-widget ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
}

/* ---------- NOTICES, shared by the dashboard and the auth page ---------- */
.tdb-notice {
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 20px;
  border: 1px solid transparent;
}

.tdb-notice--info {
  background: #eaf1fc;
  border-color: #cddefa;
  color: #1d3f77;
}

.tdb-notice--success {
  background: #e8f6ee;
  border-color: #c4e6d3;
  color: #1c6340;
}

.tdb-notice--error {
  background: #fdecec;
  border-color: #f7cdcd;
  color: #8f2222;
}

.tdb-notice p {
  margin: 0 0 6px;
}

.tdb-notice p:last-child {
  margin-bottom: 0;
}

/* ---------- FOOTER NAV ---------- */
.tdb-footer-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding: 22px 0 0;
  font-size: 14px;
}

.tdb-footer-nav a {
  color: #9aa8bd;
  transition: color 0.25s ease;
}

.tdb-footer-nav a:hover {
  color: #fff;
}

/* ---------- ODDS AND ENDS ---------- */
.tdb-page-thumb {
  margin: 0 0 26px;
}

.tdb-page-thumb img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

.tdb-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
  font-size: 14.5px;
  font-weight: 700;
}

.tdb-post-nav a {
  color: var(--brand-blue);
}

.tdb-404-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tdb-comments {
  margin-top: 26px;
}

.tdb-comments-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 18px;
}

.tdb-comment-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.tdb-comment-list ul.children {
  list-style: none;
  margin: 14px 0 0;
  padding-inline-start: 22px;
}

.tdb-comment-list .comment-body {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
  background: #fff;
}

.tdb-link-pages {
  margin-top: 20px;
  font-weight: 700;
}

/* The features panel runs LTR to keep intro-left / cards-right ordering, so an
   admin notice rendered inside it has to opt back into RTL for its own text. */
.tdb-cards-missing {
  direction: rtl;
  text-align: right;
  flex-grow: 1;
}

/* The landing page's own editable copy, if the front page is a static page.
   The features section above it already carries the top spacing. */
.tdb-front-extra {
  padding-top: 0;
}

/* ---------- CTA ON INNER PAGES ----------
   Identical markup to the landing page; only the overlap that exists to tuck it
   under the card panel is removed, because there is no panel here. */
.tdb-inner-page .tdb-cta {
  margin-top: 0;
  padding-top: 60px;
}

@media (max-width: 560px) {
  .tdb-inner-page .tdb-cta {
    padding-top: 46px;
  }
}

@media (max-width: 980px) {
  .tdb-layout-with-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .tdb-main {
    padding-bottom: 110px;
  }

  .tdb-panel {
    padding: 26px 20px;
  }
}

@media (max-width: 560px) {
  .tdb-page-head {
    padding: 36px 0 20px;
  }

  .tdb-panel {
    padding: 22px 16px;
    border-radius: 12px;
  }

  .tdb-entry {
    font-size: 16px;
  }
}