/* ==========================================================================
   Alpha Business Advisory — stylesheet

   BRAND IS A PLACEHOLDER. Alpha have not supplied colours, fonts or a logo, so
   the palette below is a considered default for an accounting practice — deep
   navy for trust, a warm brass accent so it is not another cold blue site — and
   the type is a system stack so nothing depends on a font we have no licence
   for. Every colour and font lives in the token block below and nowhere else,
   so swapping in the real brand is an edit to :root, not a hunt through a file.

   STRUCTURE
     1. Tokens
     2. Base
     3. Header  (PHP)
     4. Footer  (PHP)
     5. Forms   (PHP page-contact template)
     6. Block layer — everything a client edits, styled on CORE BLOCK markup

   The split at 6 matters. Page content is real Gutenberg blocks, and this same
   file is loaded into the editor, so a section class must style only what sits
   on the block itself. Anything that assumes a wrapper the editor cannot
   produce will look right on the page and wrong in the editor.

   No drop shadows, no pure white, hairline borders.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Colour (PLACEHOLDER — replace when the brand arrives). Kept in step with
     the palette in theme.json; change both or the editor offers stale swatches. */
  --navy:       #12324B;
  --navy-deep:  #0C2436;
  --brass:      #B98A3E;  /* fills only: icon tiles, tick marks, buttons on navy */
  /* Text sibling. #B98A3E is a 2.75:1 contrast on the cream band — well under
     WCAG AA 4.5 for the small uppercase eyebrow it was being used for. The
     brand fill is kept as-is and this darker sibling carries any brass TEXT on
     a light surface: 4.65 on paper-alt, 5.03 on paper, 5.25 on white. */
  --brass-text: #89662E;
  --brass-soft: #E8D8BC;
  --slate:      #5A6B78;
  --paper:      #FBFAF8;
  --paper-alt:  #F3F1EC;
  --line:       #E2DED6;
  --ink:        #1B2A35;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  --r-sm: 4px;
  --r-card: 8px;

  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(52px, 7vw, 84px);
  --hairline: 1px solid var(--line);
}

/* ---- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--navy-deep); }
h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.01em; }
h2 { font-size: clamp(24px, 3.4vw, 33px); }
h3 { font-size: 19px; }
h4 { font-size: 16.5px; }

/* The header and footer must line up with the block content below them. Block
   content is constrained to exactly --maxw by WordPress and gets its side
   padding from theme.json's root padding, so a plain max-width:--maxw here
   would sit --gutter further in and the logo would not align with the H1.
   Adding the gutter to the max-width puts the inner edges in the same place. */
.container { width: 100%; max-width: calc(var(--maxw) + (2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; }
.skip-link:focus { left: 8px; top: 8px; }

/* Visible focus everywhere — an accountant's site gets used on keyboards. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.icon { flex: 0 0 auto; }

/* Buttons used by the PHP templates (header CTA, form submit). Core block
   buttons are handled in section 6 and are styled to match these exactly. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-sm); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); background: var(--paper-alt); }

/* ---- 3. Header ---------------------------------------------------------- */
.topbar { background: var(--navy-deep); color: #D8E2EA; font-size: 13.5px; }
.topbar-inner { display: flex; gap: 24px; align-items: center; justify-content: flex-end; min-height: 40px; flex-wrap: wrap; }
.topbar-item { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.topbar-item:hover { color: #fff; }
.topbar .icon { opacity: .75; }

.nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: var(--hairline); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; position: relative; }

.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.05; }
.brand-mark { font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--navy-deep); letter-spacing: .01em; }
.brand-sub { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.custom-logo { max-height: 52px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-link { display: block; padding: 9px 13px; border-radius: var(--r-sm); font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.nav-link:hover { background: var(--paper-alt); }
.nav-link.is-active { color: var(--navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brass); }
.nav-cta { margin-left: 10px; }

.nav-toggle { display: none; width: 42px; height: 42px; background: none; border: var(--hairline); border-radius: var(--r-sm); cursor: pointer; padding: 11px 9px; }
.nav-toggle span { display: block; height: 2px; background: var(--navy-deep); border-radius: 2px; }
.nav-toggle span + span { margin-top: 4px; }

/* ---- Breadcrumbs -------------------------------------------------------- */
.crumbs { background: var(--paper); border-bottom: var(--hairline); font-size: 13.5px; }
.crumbs .container { display: flex; align-items: center; gap: 8px; min-height: 40px; flex-wrap: wrap; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--line); }
.crumbs [aria-current] { color: var(--ink); }
/* The breadcrumb sits between a sticky nav and a page-head band, so it must not
   double up the band's own top border. */
.crumbs + main > .entry-content > .wp-block-group.page-head { border-top: 0; }

/* ---- 4. Footer ---------------------------------------------------------- */
.footer { background: var(--navy-deep); color: #C3D0DA; padding-top: var(--section-y); font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: clamp(28px, 5vw, 56px); padding-bottom: 40px; }
.footer .brand-mark { color: #fff; }
.footer .brand-sub { color: #8CA3B4; }
.footer-blurb { margin: 14px 0 0; max-width: 34ch; }

/* These three are shared with the light contact panel, so they default to
   READABLE-ON-LIGHT and the dark footer overrides them. Defining them white
   here instead is how the contact page ended up with a white heading and pale
   links on a cream panel — invisible, and only caught by looking at it. */
.footer-h { font-family: var(--serif); font-size: 16px; color: var(--navy-deep); margin: 0 0 14px; }
.footer-list { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
.footer-list a { color: var(--navy); text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }

.footer .footer-h { color: #fff; }
.footer .footer-list a { color: #C3D0DA; }
.footer .footer-list a:hover { color: #fff; }

.footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact .icon { color: var(--brass); margin-top: 3px; }
.footer-social { display: flex; gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.footer-social a { color: #C3D0DA; font-size: 14px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 22px 30px; font-size: 13.5px; color: #8CA3B4; }
.footer-bottom p { margin: 0; }
.footer-disclaimer { margin-top: 8px !important; max-width: 78ch; }

/* ---- 5. Forms ----------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.contact-details { background: var(--paper-alt); border: var(--hairline); border-radius: var(--r-card); padding: 26px 24px; }

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.req { color: var(--brass-text); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15.5px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background-color: #fff; width: 100%;
}
/* A `background` shorthand here would wipe the custom caret on the select. */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235A6B78' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px;
}
.field textarea { resize: vertical; }
.form-note { font-size: 13.5px; color: var(--slate); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { border: var(--hairline); border-radius: var(--r-card); padding: 22px 24px; }
.notice-ok { background: #F0F6F1; border-color: #C6DCC9; }
.notice-ok h2 { font-size: 22px; margin: 0 0 8px; }
.notice-err { background: #FCF2F2; border-color: #E8C9C9; }
.notice p { margin: 0; }

/* ==========================================================================
   6. BLOCK LAYER
   Everything below styles CORE block markup carrying our class names. This is
   what the client edits, and this same file is loaded into the editor.
   ========================================================================== */

/* Sections are full-width groups. WordPress's constrained layout supplies the
   max width and side padding from theme.json, so a section styles the band
   only — never assume a .container child here. */
.wp-block-group.section { padding-block: var(--section-y); }
.entry-content > .wp-block-group.section { margin-block: 0; }

/* Text roles.
   margin-inline:0 is load-bearing. A constrained layout centres any child that
   has a max-width, so a lede with `max-width: 62ch` gets `margin-inline:auto`
   from WordPress and floats into the middle of the column, out of line with the
   heading above it. Pinning the left margin is what keeps it left-aligned. */
p.eyebrow { font-size: 12.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--brass-text); font-weight: 700; }
/* On a navy band the darkened text sibling would be the WRONG way round — it is
   darker than the surface. The original brass is 5.12:1 there, so it wins. */
.band p.eyebrow { color: var(--brass); }
/* Keeping a narrow measure LEFT-ALIGNED inside a full-width constrained group.
   Two things fight here. WordPress emits `margin-left/right: auto !important`
   on every child of a constrained group, so anything with a max-width is
   force-centred — hence !important to override it. But simply zeroing the
   margin is wrong too: the child's containing block is the full-width padded
   group, not the 1160px column, so margin-left:0 parks the text at the padding
   edge, further left than the heading beside it.
   The offset below reproduces exactly what WordPress's own centring computes —
   half the leftover space — so a narrow paragraph starts on the same vertical
   line as the full-width heading above it. Inside a narrower parent (a column)
   the calc goes negative and max() clamps it to 0, which is the right answer
   there too. */
p.lede,
p.section-lede {
  color: var(--slate);
  margin-left: max(0px, calc((100% - var(--maxw)) / 2)) !important;
  margin-right: auto !important;
}
p.lede { font-size: clamp(16.5px, 2vw, 19px); max-width: 62ch; }
p.section-lede { max-width: 640px; }
p.muted, .muted { color: var(--slate); }

/* The icon tile.
   Drawn from a CLASS rather than a shortcode in the content. A shortcode shows
   as raw `[alpha_icon ...]` text in the block editor, which makes the cards
   look broken to whoever is editing them; a class renders identically in the
   editor and on the page, because the editor loads this stylesheet too. Add
   `icon-book`, `icon-receipt`, `icon-trend` or `icon-compass` to a card's
   Additional CSS class to change it. Unknown or absent = no tile, no gap. */
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--r-card);
  background: var(--brass-soft); color: var(--navy-deep);
}

[class*="icon-"]::before {
  content: none; /* only the four below opt in */
}
.icon-book::before, .icon-receipt::before, .icon-trend::before, .icon-compass::before {
  content: ""; display: block; width: 48px; height: 48px; margin-bottom: 14px;
  border-radius: var(--r-card); background-color: var(--brass-soft);
  background-repeat: no-repeat; background-position: center; background-size: 24px 24px;
}
.icon-book::before    { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2436' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }
.icon-receipt::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2436' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l3-2 3 2 3-2 3 2 3-2 1 2V2l-1 2-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M8 8h8'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 16h5'/%3E%3C/svg%3E"); }
.icon-trend::before   { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2436' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 7-7'/%3E%3Cpath d='M14 8h6v6'/%3E%3C/svg%3E"); }
.icon-compass::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2436' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }

/* Hero + page head bands */
.wp-block-group.hero { background: linear-gradient(180deg, var(--paper-alt) 0%, var(--paper) 100%); border-bottom: var(--hairline); }
.wp-block-group.page-head { background: var(--paper-alt); border-bottom: var(--hairline); padding-block: clamp(40px, 6vw, 68px); }

/* Card grid — a columns block with .cards, each column with .card */
.wp-block-columns.cards { gap: 20px !important; align-items: stretch; }
.wp-block-columns.cards > .wp-block-column.card {
  background: #fff; border: var(--hairline); border-radius: var(--r-card);
  padding: 26px 22px;
}
.cards > .card > * { margin-block: 0 10px; }
.cards > .card > *:last-child { margin-bottom: 0; }
.cards > .card h3 { margin-bottom: 6px; }
.cards > .card p { color: var(--slate); font-size: 15px; }
/* The last paragraph in a card is the "Read more" link on the service cards.
   Styled as a link cue rather than body text, and pushed to the bottom so the
   cards' links line up even when the descriptions run to different lengths. */
.cards > .card { display: flex; flex-direction: column; }
.cards > .card > p:last-child:has(a) { margin-top: auto; padding-top: 6px; }
.cards > .card a { color: var(--navy); font-weight: 600; text-decoration: none; }
.cards > .card a:hover { text-decoration: underline; }
.cards > .card a::after { content: " \2192"; }

/* Dark band */
.wp-block-group.band { background: var(--navy-deep); color: #E6EDF2; }
.band h1, .band h2, .band h3, .band h4 { color: #fff; }
.band p, .band li { color: #C3D0DA; }
.band .wp-block-button__link { background: var(--brass); color: var(--navy-deep); }
.band .wp-block-button__link:hover { background: #C99A4E; }

/* Tick lists */
.wp-block-list.ticks { list-style: none; padding-left: 0; display: grid; gap: 11px; margin-block: 0; }
.wp-block-list.ticks li {
  position: relative; padding-left: 28px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B98A3E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 0 top .42em; background-size: 16px 16px;
}
.band .wp-block-list.ticks li { padding: 13px 15px 13px 42px; background-color: rgba(255,255,255,.05); border-radius: var(--r-card); background-position: left 15px top 1em; }

/* Service blocks */
.wp-block-group.service-block { scroll-margin-top: 90px; }
.wp-block-group.service-block.is-alt { background: var(--paper-alt); }
.service-block p.service-lede { font-size: 17.5px; color: var(--navy); font-weight: 500; }
.service-block .wp-block-list.ticks { background: #fff; border: var(--hairline); border-radius: var(--r-card); padding: 22px; }
.service-block.is-alt .wp-block-list.ticks { background: var(--paper); }

/* Area pills */
.wp-block-list.area-list { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 9px; margin-block: 0; }
.wp-block-list.area-list li { padding: 7px 15px; background: #fff; border: var(--hairline); border-radius: 999px; font-size: 14.5px; color: var(--slate); }

/* CTA band */
.wp-block-group.cta { background: var(--paper-alt); border-top: var(--hairline); border-bottom: var(--hairline); text-align: center; }
.cta .wp-block-buttons { justify-content: center; }
.cta p { color: var(--slate); }

/* Core buttons, matched to .btn above */
.wp-block-button__link { background-color: var(--navy); color: #fff; border-radius: var(--r-sm); font-weight: 600; font-size: 15px; padding: 11px 20px; text-decoration: none; }
.wp-block-button__link:hover { background-color: var(--navy-deep); color: #fff; text-decoration: none; }
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent; color: var(--navy); border: 1px solid var(--line);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--navy); background-color: var(--paper-alt); color: var(--navy); }

/* FAQ accordion — core details block */
.wp-block-details { border: var(--hairline); border-radius: var(--r-card); background: #fff; padding: 16px 20px; }
.wp-block-details summary { font-weight: 600; cursor: pointer; color: var(--navy-deep); font-family: var(--serif); font-size: 16.5px; }
.wp-block-details p { color: var(--slate); margin-bottom: 0; }

/* Prose inside a plain page */
.entry-content .prose { max-width: 72ch; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* The nav has 4 links plus a CTA beside a wordmark. It runs out of room well
   before a phone width, so the drawer starts at 860px — measured, not guessed
   at 768 because that is the usual number. */
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: var(--hairline); padding: 8px var(--gutter) 16px;
  }
  .nav-links.is-open { display: flex; }
  .nav-link { padding: 12px 4px; border-radius: 0; }
  .nav-link.is-active { box-shadow: inset 3px 0 0 var(--brass); padding-left: 12px; }
  .nav-cta { margin: 10px 0 0; }
  .nav-cta .btn { width: 100%; }
}

@media (max-width: 640px) {
  .field-row, .footer-grid { grid-template-columns: 1fr; }
  .topbar-inner { justify-content: center; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- Search / archive results ------------------------------------------- */
.result { padding-block: 20px; border-bottom: var(--hairline); }
.result:last-of-type { border-bottom: 0; }
.result h2 { font-size: 21px; margin-bottom: 6px; }
.result h2 a { text-decoration: none; }
.result h2 a:hover { text-decoration: underline; }
.result p { color: var(--slate); margin: 0; }
.wp-block-post-navigation-link, .navigation.pagination { margin-top: 28px; }
.pagination .page-numbers { padding: 8px 13px; border: var(--hairline); border-radius: var(--r-sm); text-decoration: none; margin-right: 6px; display: inline-block; }
.pagination .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ==========================================================================
   PRINT
   An accountant's contact details and fee answers do get printed and handed
   round. Strip the furniture, keep the substance, and make links useful on
   paper by showing where they point.
   ========================================================================== */
@media print {
  .topbar, .nav, .crumbs, .cta, .skip-link, .wp-block-buttons, .contact-form { display: none !important; }

  body { background: #fff; color: #000; font-size: 11.5pt; }
  .section { padding-block: 12pt; }
  .wp-block-group.band, .wp-block-group.hero, .wp-block-group.page-head,
  .wp-block-group.section { background: #fff !important; border: 0 !important; }
  .band h1, .band h2, .band h3, .band p, .band li { color: #000 !important; }
  .band .wp-block-list.ticks li { background: none !important; }

  h1, h2, h3 { color: #000; page-break-after: avoid; }
  .cards > .card, .service-block .wp-block-list.ticks, .contact-details {
    border: 1px solid #999 !important; background: #fff !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  /* Icon tiles are decorative; they only waste toner. */
  .icon-book::before, .icon-receipt::before, .icon-trend::before, .icon-compass::before { display: none; }

  /* A printed page cannot be clicked, so spell the destination out — but only
     for real destinations, not for in-page anchors or mailto/tel which read
     perfectly well as their own link text. */
  .entry-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }
  .entry-content a[href^="#"]::after,
  .entry-content a[href^="mailto"]::after,
  .entry-content a[href^="tel"]::after { content: ""; }

  /* Answers are the reason the page gets printed. CSS alone CANNOT open a
     <details> — the browser collapses it in its own shadow DOM, so a
     display:block here reports as applied and changes nothing you can see.
     assets/js/main.js sets the open attribute on beforeprint; this only keeps
     an opened one from being split across a page break. */
  .wp-block-details { border: 1px solid #999 !important; break-inside: avoid; }

  .footer { background: #fff !important; color: #000 !important; border-top: 1px solid #999; padding-top: 12pt; }
  .footer .footer-h, .footer .footer-list a, .footer .brand-mark, .footer .brand-sub { color: #000 !important; }
  .footer-social, .footer-bottom { display: none; }
}