/*
Theme Name: Blood Doctor Pearls
Theme URI: https://pearls.blooddoctor.co/
Author: Dr Abdul Mannan FRCPath FCPS
Author URI: https://blooddoctor.co/
Description: Editorial block theme for Blood Doctor 5-Minute Pearls — professional haematology education for the bench, bedside and viva. Wide clinical layout, announcement ticker, interactive rapid-recall flip cards.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blood-doctor-pearls
Tags: education, blog, one-column, block-patterns, full-site-editing, wide-blocks, accessibility-ready
*/

/* =========================================================================
   0. Fonts — self-hosted
   A render-blocking stylesheet on fonts.googleapis.com paints a blank page for
   as long as the request hangs, which happens on filtered hospital networks.
   These are bundled with the theme so the site never depends on a third party.
   Both are variable fonts: one file covers the whole weight range.
   ========================================================================= */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   1. Design tokens
   ========================================================================= */

:root {
  --bdp-ink:        #0b2a42;
  --bdp-ink-2:      #123f5e;
  --bdp-body:       #2d4657;
  --bdp-muted:      #5d7488;
  --bdp-faint:      #7e93a4;
  --bdp-line:       #dce5ed;
  --bdp-line-2:     #c6d5e1;
  --bdp-wash:       #eef5fa;
  --bdp-wash-2:     #f6fafd;
  --bdp-paper:      #ffffff;
  --bdp-canvas:     #f4f7f9;
  --bdp-accent:     #0b6fa4;
  --bdp-accent-dk:  #08557f;
  --bdp-teal:       #0d7c8d;
  --bdp-teal-wash:  #e8f6f8;
  --bdp-gold:       #8f6410;
  --bdp-gold-wash:  #fdf5e3;
  --bdp-crimson:    #a8332a;
  --bdp-crimson-wash:#fdf0ee;

  --bdp-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bdp-serif: "Source Serif 4", Georgia, "Times New Roman", "Noto Serif", serif;
  --bdp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --bdp-shell: 1320px;   /* header / footer / full-bleed bands */
  --bdp-wide:  1180px;   /* tables, cards, figures */
  --bdp-text:   940px;   /* running prose */
  --bdp-gutter: clamp(16px, 4vw, 40px);

  --bdp-radius: 14px;
  --bdp-radius-sm: 10px;
  --bdp-shadow: 0 10px 30px rgba(11, 42, 66, .09);
  --bdp-shadow-lg: 0 22px 54px rgba(9, 38, 60, .16);
}

/* =========================================================================
   2. Base
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bdp-paper);
  color: var(--bdp-body);
  font-family: var(--bdp-sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  overflow-x: clip;              /* safety net: never a horizontal scrollbar */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body * { box-sizing: border-box; }

img, svg, video, canvas { max-width: 100%; height: auto; }

a { color: var(--bdp-accent); text-underline-offset: .18em; }
a:hover { color: var(--bdp-accent-dk); }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid #6cb8de;
  outline-offset: 3px;
  border-radius: 4px;
}

.bdp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--bdp-ink); color: #fff; padding: .75rem 1.15rem;
  font-weight: 700; border-radius: 0 0 8px 0;
}
.bdp-skip:focus { left: 0; color: #fff; }

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

/* The block-theme root wrapper: full width, we manage our own containers.
   The editor's default block gap would otherwise open a white stripe between
   the header, main and footer, which all butt together by design. */
.wp-site-blocks { max-width: none; }
.wp-site-blocks > * { margin-block: 0; }

/* =========================================================================
   3. Containers
   ========================================================================= */

.bdp-shell   { width: 100%; max-width: var(--bdp-shell); margin-inline: auto; padding-inline: var(--bdp-gutter); }
.bdp-wide    { width: 100%; max-width: var(--bdp-wide);  margin-inline: auto; padding-inline: var(--bdp-gutter); }
.bdp-measure { width: 100%; max-width: var(--bdp-text);  margin-inline: auto; padding-inline: var(--bdp-gutter); }

/* =========================================================================
   4. Announcement ticker
   ========================================================================= */

.bdp-ticker {
  background: linear-gradient(90deg, #08273e 0%, #0b3350 55%, #0f4468 100%);
  color: #dfeef8;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bdp-ticker__viewport { overflow: hidden; }
.bdp-ticker__track {
  display: flex;
  width: max-content;
  padding-block: .62rem;
  animation: bdp-ticker 42s linear infinite;
}
.bdp-ticker:hover .bdp-ticker__track,
.bdp-ticker:focus-within .bdp-ticker__track { animation-play-state: paused; }

.bdp-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-inline: 2.25rem;
  font-size: .84rem;
  font-weight: 650;
  letter-spacing: .015em;
  white-space: nowrap;
}
.bdp-ticker__item::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #4fbfd8;
  box-shadow: 0 0 0 3px rgba(79,191,216,.22);
  flex: none;
}
@keyframes bdp-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .bdp-ticker__track { animation: none; width: 100%; justify-content: center; }
  .bdp-ticker__item + .bdp-ticker__item { display: none; }
  .bdp-ticker__item { white-space: normal; text-align: center; padding-inline: var(--bdp-gutter); }
}

/* =========================================================================
   5. Header
   ========================================================================= */

.bdp-header {
  background: var(--bdp-paper);
  border-bottom: 1px solid var(--bdp-line);
}
.bdp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
  padding-block: .85rem;
}
.bdp-brand { display: inline-flex; flex-direction: column; gap: .12rem; text-decoration: none; }
.bdp-brand__name {
  color: var(--bdp-ink);
  font-family: var(--bdp-sans);
  font-size: 1.24rem;
  font-weight: 750;
  letter-spacing: -.032em;
  line-height: 1.1;
}
.bdp-brand__sub {
  color: var(--bdp-muted);
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.bdp-brand:hover .bdp-brand__name { color: var(--bdp-accent-dk); }

.bdp-nav { display: flex; align-items: center; gap: 1.9rem; }
.bdp-nav a {
  color: var(--bdp-muted);
  font-size: .93rem;
  font-weight: 640;
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.bdp-nav a:hover { color: var(--bdp-ink); border-bottom-color: var(--bdp-line-2); }
.bdp-nav a[aria-current="page"] { color: var(--bdp-ink); border-bottom-color: var(--bdp-accent); }
.bdp-nav a.bdp-nav__cta {
  display: inline-flex;
  align-items: center;
  background: var(--bdp-ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  line-height: 1.2;
  min-height: 40px;
  padding: .5rem 1.25rem;
  font-weight: 700;
}
.bdp-nav a.bdp-nav__cta:hover { background: var(--bdp-accent-dk); color: #fff; }

@media (max-width: 860px) {
  .bdp-header__inner { flex-direction: column; align-items: stretch; gap: .85rem; padding-block: 1rem; min-height: 0; }
  .bdp-nav { flex-wrap: wrap; gap: .5rem 1.35rem; }
  .bdp-nav a { font-size: .9rem; }
  .bdp-nav a.bdp-nav__cta { min-height: 38px; padding: .42rem 1.05rem; }
}

/* =========================================================================
   6. Footer
   ========================================================================= */

.bdp-footer {
  background: var(--bdp-canvas);
  border-top: 1px solid var(--bdp-line);
}
.bdp-footer__grid {
  display: grid;
  grid-template-columns: 2.3fr 1fr 1fr 1.2fr;
  gap: 2.75rem;
  padding-block: 3.75rem 2.5rem;
}
.bdp-footer__name {
  color: var(--bdp-ink);
  font-family: var(--bdp-sans);
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -.04em;
  margin: 0 0 .35rem;
}
.bdp-footer__sub {
  color: var(--bdp-muted);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .085em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.bdp-footer__blurb { color: var(--bdp-muted); font-size: .95rem; margin: 0; max-width: 46ch; }
.bdp-footer h2 {
  color: var(--bdp-ink);
  font-family: var(--bdp-sans);
  font-size: .8rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 1.05rem;
  padding: 0;
  border: 0;
}
.bdp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.bdp-footer li { margin: 0; }
.bdp-footer ul a { color: var(--bdp-muted); font-size: .93rem; font-weight: 620; text-decoration: none; }
.bdp-footer ul a:hover { color: var(--bdp-ink); text-decoration: underline; }
.bdp-footer__note { color: var(--bdp-faint); font-size: .86rem; line-height: 1.6; margin: .9rem 0 0; }

.bdp-footer__bar {
  border-top: 1px solid var(--bdp-line-2);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.35rem 2.75rem;
  color: var(--bdp-faint);
  font-size: .85rem;
}
.bdp-footer__bar p { margin: 0; }

@media (max-width: 980px) { .bdp-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.25rem; } }
@media (max-width: 620px) {
  .bdp-footer__grid { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.75rem 2rem; }
  /* Comfortable tap targets: footer links are only ~18px tall unaided. */
  .bdp-footer ul { gap: 0; }
  .bdp-footer ul a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* =========================================================================
   7. Prose
   ========================================================================= */

.bdp-prose { padding-block: 0 1rem; padding-inline: var(--bdp-gutter); }
.bdp-prose > * { margin-inline: auto; max-width: var(--bdp-text); }
.bdp-prose > .bdp-table,
.bdp-prose > .bdp-figure,
.bdp-prose > .bdp-cards,
.bdp-prose > .bdp-checklist,
.bdp-prose > .alignwide { max-width: var(--bdp-wide); }
.bdp-prose > .bdp-bleed,
.bdp-prose > .bdp-full,
.bdp-prose > .alignfull { max-width: none; }

.bdp-prose p, .bdp-prose ul, .bdp-prose ol { margin: 0 auto 1.25rem; }
.bdp-prose li { margin: 0 0 .5rem; }
.bdp-prose ul, .bdp-prose ol { padding-left: 1.35rem; }
.bdp-prose li::marker { color: var(--bdp-accent); }
.bdp-prose strong { color: var(--bdp-ink); font-weight: 700; }

.bdp-prose h2 {
  color: var(--bdp-ink);
  font-family: var(--bdp-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.18;
  margin: 3.4rem auto 1.1rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--bdp-line);
}
.bdp-prose h2 { scroll-margin-top: 1.5rem; }
.bdp-prose h3 {
  color: var(--bdp-ink-2);
  font-family: var(--bdp-sans);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
  margin: 2.1rem auto .6rem;
}
.bdp-prose h4 {
  color: var(--bdp-ink-2);
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 1.75rem auto .5rem;
}

.bdp-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--bdp-teal);
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .85rem;
}

/* =========================================================================
   8. Hero
   ========================================================================= */

.bdp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(112deg, #08273e 0%, #0b3350 48%, #124265 78%, #16537c 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bdp-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 380px at 88% -10%, rgba(79,191,216,.22), transparent 62%),
    radial-gradient(620px 320px at 4% 110%, rgba(168,51,42,.16), transparent 64%);
}
.bdp-hero__inner { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.6rem, 6vw, 4.5rem); }
.bdp-hero .bdp-kicker { color: #7fd3e8; }
.bdp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.bdp-hero__aside {
  border: 1px solid rgba(160, 206, 232, .3);
  background: rgba(255, 255, 255, .06);
  border-radius: var(--bdp-radius);
  padding: 1.6rem 1.7rem;
}
.bdp-hero__aside-title {
  color: #7fd3e8;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
}
.bdp-hero__aside ul { list-style: none; margin: 0; padding: 0; }
.bdp-hero__aside li {
  margin: 0;
  padding: .85rem 0;
  border-top: 1px solid rgba(160, 206, 232, .2);
}
.bdp-hero__aside li:first-child { border-top: 0; padding-top: 0; }
.bdp-hero__aside li:last-child { padding-bottom: 0; }
.bdp-hero__aside strong { display: block; color: #fff; font-size: .96rem; font-weight: 700; letter-spacing: -.01em; }
.bdp-hero__aside span { display: block; color: #b3d2e5; font-size: .87rem; line-height: 1.5; margin-top: .18rem; }
.bdp-hero__aside a { display: block; color: #cfe9f6; text-decoration: none; }
.bdp-hero__aside a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 980px) {
  .bdp-hero__grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

.bdp-hero h1 {
  color: #fff;
  font-family: var(--bdp-serif);
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.04;
  margin: 0 0 1rem;
  max-width: 24ch;
}
.bdp-hero__grid h1 { max-width: 16ch; }
.bdp-hero__lede {
  color: #cfe3f0;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.62;
  margin: 0;
  max-width: 62ch;
}
.bdp-hero__meta {
  display: flex; flex-wrap: wrap; gap: .55rem .75rem;
  margin: 1.85rem 0 0;
  padding: 0; list-style: none;
}
.bdp-hero__meta li {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(160,206,232,.32);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  color: #dbeaf5;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.25;
  min-height: 34px;
  padding: .3rem .95rem;
  margin: 0;
}
.bdp-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.bdp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  min-height: 46px;
  padding: .72rem 1.75rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.bdp-btn--primary { background: #fff; color: var(--bdp-ink); }
.bdp-btn--primary:hover { background: #dcecf6; color: var(--bdp-ink); }
.bdp-btn--ghost { border-color: rgba(179,214,236,.45); color: #dbeaf5; }
.bdp-btn--ghost:hover { border-color: #9ed2ea; color: #fff; background: rgba(255,255,255,.07); }
.bdp-btn--solid { background: var(--bdp-ink); color: #fff; }
.bdp-btn--solid:hover { background: var(--bdp-accent-dk); color: #fff; }

/* Three-up trust strip under the hero */
.bdp-strip { background: var(--bdp-wash-2); border-bottom: 1px solid var(--bdp-line); }
.bdp-strip__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-block: 0;
}
.bdp-strip__grid > div {
  padding: 1.85rem 1.9rem 1.85rem 0;
  border-right: 1px solid var(--bdp-line);
}
.bdp-strip__grid > div:first-child { padding-left: 0; }
.bdp-strip__grid > div:not(:first-child) { padding-left: 1.9rem; }
.bdp-strip__grid > div:last-child { border-right: 0; padding-right: 0; }
.bdp-strip h3 {
  color: var(--bdp-ink);
  font-size: .78rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  margin: 0 0 .45rem;
}
.bdp-strip p { color: var(--bdp-muted); font-size: .95rem; line-height: 1.6; margin: 0; }

@media (max-width: 820px) {
  .bdp-strip__grid { grid-template-columns: 1fr; }
  .bdp-strip__grid > div { border-right: 0; border-bottom: 1px solid var(--bdp-line); padding: 1.35rem 0 !important; }
  .bdp-strip__grid > div:last-child { border-bottom: 0; }
}

/* =========================================================================
   9. Sections
   ========================================================================= */

/* Full-bleed bands butt up against each other: the block editor's default
   24px block gap would show as a white stripe between them. */
.bdp-hero,
.bdp-strip,
.bdp-section,
.bdp-cta,
.bdp-pagehead,
.bdp-prose { margin-block: 0; }

.bdp-section { padding-block: clamp(3rem, 6vw, 4.75rem); }
.bdp-section--tint { background: var(--bdp-wash-2); border-block: 1px solid var(--bdp-line); }
.bdp-section__head { max-width: 62ch; margin: 0 0 2.25rem; }
.bdp-section__head h2 {
  color: var(--bdp-ink);
  font-family: var(--bdp-serif);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.14;
  margin: 0 0 .75rem;
  padding: 0; border: 0;
}
.bdp-section__head p { color: var(--bdp-muted); font-size: 1.06rem; margin: 0; }

/* =========================================================================
   10. Pearl index cards
   ========================================================================= */

.bdp-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.5rem;
}
.bdp-index__card {
  display: flex; flex-direction: column;
  background: var(--bdp-paper);
  border: 1px solid var(--bdp-line);
  border-radius: var(--bdp-radius);
  box-shadow: var(--bdp-shadow);
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.bdp-index__card:hover { transform: translateY(-3px); box-shadow: var(--bdp-shadow-lg); border-color: var(--bdp-line-2); }
.bdp-index__card > span,
.bdp-index__body > span { display: block; }
.bdp-index__rail { height: 4px; background: linear-gradient(90deg, var(--bdp-accent), var(--bdp-teal)); }
.bdp-index__card > .bdp-index__body {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1;
  padding: 1.65rem 1.7rem 1.75rem;
}
.bdp-index__tag {
  color: var(--bdp-teal);
  font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
}
.bdp-index__title {
  color: var(--bdp-ink);
  font-family: var(--bdp-serif);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
}
.bdp-index__desc { color: var(--bdp-muted); font-size: .97rem; line-height: 1.62; }
.bdp-index__more { color: var(--bdp-accent); font-size: .9rem; font-weight: 700; margin-top: auto; padding-top: .5rem; }
.bdp-index__card--soon { background: var(--bdp-wash); box-shadow: none; border-style: dashed; }
.bdp-index__card--soon .bdp-index__rail { background: var(--bdp-line-2); }
.bdp-index__card--soon .bdp-index__title { color: var(--bdp-ink-2); }
.bdp-index__card--soon .bdp-index__more { color: var(--bdp-faint); }

/* =========================================================================
   11. Article components
   ========================================================================= */

.bdp-pearl {
  background: var(--bdp-wash);
  border: 1px solid var(--bdp-line-2);
  border-left: 5px solid var(--bdp-accent);
  border-radius: var(--bdp-radius-sm);
  color: var(--bdp-ink);
  font-size: 1.06rem;
  font-weight: 640;
  line-height: 1.62;
  margin: 1.9rem auto;
  padding: 1.2rem 1.45rem;
}
.bdp-pearl__label {
  display: block;
  color: var(--bdp-accent-dk);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .35rem;
}

.bdp-note {
  border: 1px solid var(--bdp-line);
  border-left: 5px solid var(--bdp-teal);
  background: var(--bdp-teal-wash);
  border-radius: var(--bdp-radius-sm);
  margin: 1.75rem auto;
  padding: 1.15rem 1.4rem;
}
.bdp-note--caution { border-left-color: var(--bdp-gold); background: var(--bdp-gold-wash); }
.bdp-note--stop    { border-left-color: var(--bdp-crimson); background: var(--bdp-crimson-wash); }
.bdp-note p:last-child { margin-bottom: 0; }
.bdp-note__label {
  display: block;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .3rem;
  color: var(--bdp-teal);
}
.bdp-note--caution .bdp-note__label { color: var(--bdp-gold); }
.bdp-note--stop .bdp-note__label { color: var(--bdp-crimson); }

/* Tables — scroll inside their own container, never the page */
.bdp-table { margin: 1.9rem auto; max-width: var(--bdp-wide); }
.bdp-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--bdp-radius-sm); border: 1px solid var(--bdp-line-2); }
.bdp-table table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .95rem; background: var(--bdp-paper); }
.bdp-table caption {
  caption-side: top; text-align: left;
  color: var(--bdp-muted); font-size: .85rem; font-weight: 650;
  padding-bottom: .6rem;
}
.bdp-table th, .bdp-table td { border-bottom: 1px solid var(--bdp-line); padding: .82rem 1rem; text-align: left; vertical-align: top; }
.bdp-table thead th {
  background: var(--bdp-ink); color: #fff; font-weight: 700;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 0;
}
.bdp-table tbody tr:nth-child(even) td { background: var(--bdp-wash-2); }
.bdp-table tbody tr:last-child td { border-bottom: 0; }
.bdp-table td strong { color: var(--bdp-ink); }

/* Shown only on a table whose columns genuinely run off-screen (class set in
   pearls.js), so a phone reader knows a column is hidden to the right. */
.bdp-table.is-scrollable::after {
  content: "Swipe the table to see every column";
  display: block;
  margin-top: .55rem;
  color: var(--bdp-muted);
  font-size: .82rem;
  font-weight: 650;
}
@media (min-width: 821px) {
  .bdp-table.is-scrollable::after { content: "Scroll the table sideways to see every column"; }
}

/* Infographic / figures */
.bdp-figure { margin: 2.25rem auto; max-width: var(--bdp-wide); }
.bdp-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--bdp-line-2);
  border-radius: var(--bdp-radius);
  box-shadow: var(--bdp-shadow);
  background: var(--bdp-paper);
}
.bdp-figure figcaption { color: var(--bdp-muted); font-size: .9rem; line-height: 1.6; margin-top: .8rem; }

/* Checklist */
.bdp-checklist {
  background: var(--bdp-paper);
  border: 1px solid var(--bdp-line-2);
  border-radius: var(--bdp-radius);
  box-shadow: var(--bdp-shadow);
  margin: 2rem auto;
  padding: 1.6rem 1.75rem;
}
.bdp-checklist h3 { margin-top: 0; }
.bdp-checklist ol { counter-reset: bdp-c; list-style: none; margin: 0; padding: 0; }
.bdp-checklist li {
  counter-increment: bdp-c;
  position: relative;
  padding-left: 2.35rem;
  margin: 0 0 .8rem;
  color: var(--bdp-ink);
  font-weight: 620;
}
.bdp-checklist li:last-child { margin-bottom: 0; }
.bdp-checklist li::before {
  content: counter(bdp-c);
  position: absolute; left: 0; top: .12rem;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  background: var(--bdp-wash); color: var(--bdp-accent-dk);
  border: 1px solid var(--bdp-line-2);
  border-radius: 50%;
  font-size: .78rem; font-weight: 800;
}

/* Section number badge */
.bdp-num {
  display: inline-grid; place-items: center;
  width: 1.85rem; height: 1.85rem;
  margin-right: .6rem;
  border-radius: 50%;
  background: var(--bdp-ink); color: #fff;
  font-family: var(--bdp-sans);
  font-size: .85rem; font-weight: 750;
  vertical-align: .1em;
}

/* Disclaimer */
.bdp-disclaimer {
  border-top: 1px solid var(--bdp-line);
  color: var(--bdp-faint);
  font-size: .9rem;
  line-height: 1.65;
  margin: 3rem auto 0;
  padding-top: 1.25rem;
}

/* Components sit inside .bdp-prose, so they must out-specify the generic
   element rules above — otherwise `margin: 0 auto` collapses their spacing
   and `padding-left` from the list rule indents them. */
.bdp-prose > .bdp-pearl      { margin: 1.9rem auto; }
.bdp-prose > .bdp-note       { margin: 1.75rem auto; }
.bdp-prose > .bdp-table      { margin: 1.9rem auto; }
.bdp-prose > .bdp-figure     { margin: 2.25rem auto; }
.bdp-prose > .bdp-checklist  { margin: 2rem auto; }
.bdp-prose > .bdp-cards      { margin: 1.9rem auto; padding-left: 0; }
.bdp-prose > .bdp-disclaimer { margin: 3rem auto 0; }
.bdp-prose .bdp-checklist ol { margin: 0; padding: 0; }
.bdp-prose .bdp-cards > li   { margin: 0; }
.bdp-prose .bdp-note p:last-child { margin-bottom: 0; }

/* =========================================================================
   12. Rapid-recall flip cards
   Two per row on desktop, one per row on mobile.
   Both faces share one grid cell, so the card grows to fit the taller face
   and nothing is ever clipped.
   ========================================================================= */

.bdp-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
  margin: 1.9rem auto;
  max-width: var(--bdp-wide);
  padding: 0;
  list-style: none;
}
.bdp-cards > li { margin: 0; }

.bdp-card {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  margin: 0;
  padding: 0;
  perspective: 1600px;
  text-align: left;
  width: 100%;
  height: 100%;
  border-radius: var(--bdp-radius);
}
.bdp-card:focus-visible { outline: 3px solid #6cb8de; outline-offset: 4px; }

.bdp-card__inner {
  display: grid;
  height: 100%;
  min-height: 210px;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .72, .28, 1);
}
.bdp-card[aria-expanded="true"] .bdp-card__inner { transform: rotateY(180deg); }

.bdp-card__face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--bdp-line-2);
  border-radius: var(--bdp-radius);
  box-shadow: var(--bdp-shadow);
  background: var(--bdp-paper);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.bdp-card__face--back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, #0b2a42 0%, #103c5b 100%);
  border-color: #0b2a42;
}
.bdp-card:hover .bdp-card__face { box-shadow: var(--bdp-shadow-lg); border-color: var(--bdp-accent); }
.bdp-card:hover .bdp-card__face--back { border-color: #16537c; }

.bdp-card__tag {
  color: var(--bdp-teal);
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.bdp-card__face--back .bdp-card__tag { color: #7fd3e8; }

.bdp-card__text {
  color: var(--bdp-ink);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.42;
  margin-block: auto;
}
.bdp-card__face--back .bdp-card__text { color: #fff; font-weight: 620; }

.bdp-card__cue {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--bdp-muted);
  font-size: .82rem;
  font-weight: 700;
}
.bdp-card__cue::after {
  content: "";
  width: 14px; height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V1L7 6l5 5V7a6 6 0 1 1-6 6H4a8 8 0 1 0 8-8z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V1L7 6l5 5V7a6 6 0 1 1-6 6H4a8 8 0 1 0 8-8z'/%3E%3C/svg%3E");
}
.bdp-card__face--back .bdp-card__cue { color: #a9cfe4; }

.bdp-cards__hint { color: var(--bdp-muted); font-size: .95rem; margin: 0 0 1.25rem; }

@media (max-width: 820px) {
  .bdp-cards { grid-template-columns: 1fr; gap: 1.1rem; }
  .bdp-card__inner { min-height: 190px; }
  .bdp-card__face { padding: 1.35rem 1.4rem; }
  .bdp-card__text { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bdp-card__inner { transition: none; }
  .bdp-index__card { transition: none; }
  a.bdp-index__card:hover { transform: none; }
}

/* No-JS: show both faces stacked rather than an unusable half-card. */
.no-js .bdp-card { cursor: default; perspective: none; }
.no-js .bdp-card__inner { display: block; min-height: 0; transform: none !important; }
.no-js .bdp-card__face { backface-visibility: visible; transform: none !important; margin-bottom: .75rem; }

/* =========================================================================
   13. Contact / closing strip
   ========================================================================= */

.bdp-cta {
  background: linear-gradient(112deg, #08273e 0%, #0b3350 55%, #124265 100%);
  color: #fff;
}
.bdp-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
.bdp-cta h2 {
  color: #fff;
  font-family: var(--bdp-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.18;
  margin: 0 0 .5rem;
  padding: 0; border: 0;
}
.bdp-cta p { color: #cfe3f0; margin: 0; max-width: 56ch; }

/* =========================================================================
   14. Page header band (default page template)
   ========================================================================= */

.bdp-pagehead { background: var(--bdp-wash-2); border-bottom: 1px solid var(--bdp-line); }
.bdp-pagehead__inner { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bdp-pagehead h1 {
  color: var(--bdp-ink);
  font-family: var(--bdp-serif);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.08;
  margin: 0;
  max-width: 22ch;
}
.bdp-pagehead p { color: var(--bdp-muted); font-size: 1.08rem; margin: .9rem 0 0; max-width: 62ch; }

/* =========================================================================
   15. Editor-created (core block) content fallbacks
   ========================================================================= */

.bdp-prose .wp-block-table { max-width: var(--bdp-wide); overflow-x: auto; }
.bdp-prose .wp-block-table table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.bdp-prose .wp-block-table th,
.bdp-prose .wp-block-table td { border: 1px solid var(--bdp-line); padding: .8rem 1rem; text-align: left; }
.bdp-prose .wp-block-table thead th { background: var(--bdp-ink); color: #fff; }
.bdp-prose .wp-block-image { max-width: var(--bdp-wide); }
.bdp-prose .wp-block-image img { border-radius: var(--bdp-radius); }
.bdp-prose blockquote {
  border-left: 4px solid var(--bdp-accent);
  color: var(--bdp-ink);
  font-size: 1.08rem;
  margin: 1.9rem auto;
  padding: .3rem 0 .3rem 1.35rem;
}
.bdp-prose code {
  background: var(--bdp-wash);
  border-radius: 4px;
  font-family: var(--bdp-mono);
  font-size: .92em;
  padding: .1em .35em;
}
.bdp-prose hr { border: 0; border-top: 1px solid var(--bdp-line); margin: 2.75rem auto; }
.bdp-prose .alignwide { max-width: var(--bdp-wide); }
.bdp-prose .alignfull { max-width: none; }

/* =========================================================================
   16. 404 / search
   ========================================================================= */

.bdp-simple { padding-block: clamp(3.5rem, 8vw, 6rem); text-align: left; }
.bdp-simple h1 {
  color: var(--bdp-ink);
  font-family: var(--bdp-serif);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.1;
  margin: 0 0 1rem;
}
.bdp-simple p { color: var(--bdp-muted); font-size: 1.06rem; max-width: 60ch; }

/* =========================================================================
   17. Print
   ========================================================================= */

@media print {
  .bdp-ticker, .bdp-header, .bdp-footer, .bdp-cta { display: none !important; }
  .bdp-card__inner { display: block !important; transform: none !important; }
  .bdp-card__face { position: static !important; backface-visibility: visible !important; transform: none !important; box-shadow: none; page-break-inside: avoid; }
  .bdp-card__face--back { background: #fff !important; color: #000 !important; }
  .bdp-card__face--back .bdp-card__text, .bdp-card__face--back .bdp-card__tag { color: #000 !important; }
  body { font-size: 11pt; }
}