/* Shortcode output (mu-plugins/hmbd/shortcodes.php). Colours come from the Astra global palette. */
.hmbd-table-wrap { overflow-x: auto; margin: 1.5em 0; }
.hmbd-table { width: 100%; border-collapse: collapse; font-size: 0.95em; margin: 1.5em 0; }
.hmbd-table-wrap .hmbd-table { margin: 0; }
.hmbd-table caption { caption-side: top; text-align: left; font-weight: 600; padding: 0 0 0.5em; color: var(--ast-global-color-2); }
.hmbd-table th, .hmbd-table td { padding: 0.55em 0.75em; border-bottom: 1px solid var(--ast-global-color-6); text-align: left; vertical-align: top; }
.hmbd-table thead th { background: var(--ast-global-color-4); font-weight: 600; }
.hmbd-table tbody tr:hover { background: var(--ast-global-color-4); }
.hmbd-table tfoot td, .hmbd-table tfoot th { font-weight: 700; border-top: 2px solid var(--ast-global-color-6); }
.hmbd-answer { font-weight: 600; }
.hmbd-answer-box { background: var(--ast-global-color-4); border-left: 4px solid var(--ast-global-color-0); padding: 1em 1.25em; margin: 1.25em 0; border-radius: 4px; }
.hmbd-answer-box p:last-child { margin-bottom: 0; }
/* Phones: one step smaller (14.6px body -> 13.4px cells). A core table block with the hmbd-table class
   puts the class on the <figure>; the figure must not shrink as well, or the cells end up at 11px. */
figure.hmbd-table, .wp-block-table.hmbd-table { font-size: inherit; }
@media (max-width: 544px) { .hmbd-table { font-size: 0.92em; } figure.hmbd-table { font-size: inherit; } .hmbd-table th, .hmbd-table td { padding: 0.45em 0.5em; } }

/* ---- Visual QA fixes (2026-10-21) ---- */

/* Mobile header: the 300px logo + menu toggle overflowed a 390px viewport by 10px. */
@media (max-width: 544px) {
  #ast-mobile-header .custom-logo-link img, #ast-mobile-header .custom-logo { max-width: min(300px, calc(100vw - 130px)); height: auto; }
}

/* Answer box: Astra gives top-level groups 50-100px of block padding; keep the box tight. */
.entry-content > .wp-block-group.hmbd-answer-box,
.entry-content .hmbd-answer-box { padding: 1.1em 1.35em; margin: 0 0 1.75em; }
.hmbd-answer-box > :first-child { margin-top: 0; }
.hmbd-answer-box > :last-child { margin-bottom: 0; }
.hmbd-answer-box ul, .hmbd-answer-box ol { margin: 0.75em 0 0.9em 1.1em; padding-left: 0.4em; }
.hmbd-answer-box li + li { margin-top: 0.3em; }
@media (min-width: 922px) { .entry-content .hmbd-answer-box { padding: 1.4em 1.75em; } }

/* Shortcode tables sit in .hmbd-table-wrap, which scrolls sideways on phones; the table keeps
   full width and readable columns instead of squeezing the last one. */
.hmbd-table-wrap { -webkit-overflow-scrolling: touch; max-width: 100%; }
.hmbd-table td time { white-space: nowrap; }
/* Words never break mid-word; a table that needs more room than the phone has scrolls sideways
   inside .hmbd-table-wrap. Only the Note column of the holiday tables ([hmbd_holidays]: Date, Day,
   Holiday, Note; the first cell holds a <time>) gets a minimum width, so its sentences don't
   become a one-word-per-line column. Month, pay and formula tables size to their content. */
.hmbd-table th, .hmbd-table td { overflow-wrap: normal; word-break: normal; }
@media (max-width: 544px) {
  .hmbd-table:has(> tbody > tr > td:first-child > time):has(> thead th:nth-child(4)) td:nth-child(4) { min-width: 9.5em; }
  /* Long formulas (business-days-excel) may break anywhere, so the prose columns next to them keep
     a readable width instead of one word per line. */
  .entry-content table td code { overflow-wrap: anywhere; word-break: normal; }
  .entry-content table td:has(> code) { min-width: 10em; }
}

/* Core table blocks: match the shortcode table style (light rules, tinted header). */
.entry-content .wp-block-table { margin: 1.5em 0; }
.entry-content .wp-block-table table { margin: 0; border-collapse: collapse; font-size: 0.95em; }
.entry-content .wp-block-table th, .entry-content .wp-block-table td { border: 0; border-bottom: 1px solid var(--ast-global-color-6); padding: 0.55em 0.75em; text-align: left; vertical-align: top; }
.entry-content .wp-block-table thead { border-bottom: 2px solid var(--ast-global-color-6); }
.entry-content .wp-block-table thead th, .entry-content .wp-block-table thead td { background: var(--ast-global-color-4); font-weight: 600; }
.entry-content .wp-block-table figcaption, .entry-content .wp-block-table caption { text-align: left; font-size: 0.9em; color: var(--ast-global-color-3); }
@media (max-width: 544px) {
  .entry-content .wp-block-table table { font-size: 0.92em; }
  .entry-content .wp-block-table th, .entry-content .wp-block-table td { padding: 0.45em 0.5em; }
}

/* FAQ: wp:details blocks as bordered, tappable rows. */
.entry-content .wp-block-details { border: 1px solid var(--ast-global-color-6); border-radius: 6px; background: var(--ast-global-color-5); margin: 0 0 0.6em; padding: 0; }
.entry-content .wp-block-details summary { cursor: pointer; list-style: none; position: relative; padding: 0.85em 2.75em 0.85em 1em; font-weight: 600; color: var(--ast-global-color-2); line-height: 1.4; }
.entry-content .wp-block-details summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details summary::after { content: "+"; position: absolute; right: 1em; top: 50%; transform: translateY(-50%); font-size: 1.3em; font-weight: 400; line-height: 1; color: var(--ast-global-color-0); }
.entry-content .wp-block-details[open] summary::after { content: "\2212"; }
.entry-content .wp-block-details summary:focus-visible { outline: 2px solid var(--ast-global-color-0); outline-offset: 2px; border-radius: 6px; }
.entry-content .wp-block-details[open] summary { border-bottom: 1px solid var(--ast-global-color-6); }
.entry-content .wp-block-details > :not(summary) { margin: 0.8em 1em; }
.entry-content .wp-block-details > :last-child:not(summary) { margin-bottom: 1em; }
.entry-content .wp-block-details + :not(.wp-block-details) { margin-top: 2em; }

/* Small JS tools (days/weeks/years ago). */
.hmbd-tool { background: var(--ast-global-color-4); border: 1px solid var(--ast-global-color-6); border-radius: 6px; padding: 1.1em 1.25em; margin: 1.25em 0 1.75em; }
.hmbd-tool > p:first-child { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.35em 0.75em; margin-bottom: 0.9em; }
.hmbd-tool label { font-weight: 600; font-size: 0.9em; flex: 0 0 auto; }
.hmbd-tool input, .hmbd-tool select { flex: 1 1 10em; min-width: 0; max-width: 100%; }
/* One control style for every tool: same height (44px tap target), padding and white field.
   Astra gives date inputs the tinted secondary colour (they looked disabled), selects 6px/10px
   padding and text inputs 12px/16px; tool CSS files should not set heights of their own.
   16px (not rem: Astra's root is 14.6px below 922px) also stops iOS zooming in on focus. */
.hmbd-tool input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
.hmbd-tool select { box-sizing: border-box; height: auto; min-height: 2.75em; padding: 0.5em 0.75em; font-size: 16px; line-height: 1.4; background-color: #fff; }
.hmbd-tool button { min-height: 44px; }
/* Results: the main line is 1.05em with plain <strong>; secondary lines are 0.92em. */
.hmbd-tool [aria-live] strong { font-size: inherit; }
.hmbd-tool [id$="-extra"] { font-size: 0.92em; }
.hmbd-tool [aria-live] { margin: 0; padding-top: 0.8em; border-top: 1px solid var(--ast-global-color-6); font-size: 1.05em; }
.hmbd-tool [aria-live] + p { margin: 0.4em 0 0; }
@media (max-width: 544px) {
  .hmbd-tool > p:first-child { flex-direction: column; align-items: stretch; }
  .hmbd-tool input, .hmbd-tool select { flex: 0 0 auto; width: 100%; }
}

/* Content pages (not the homepage, not Spectra-built pages like contact): readable column and a heading scale where H1 > H2 > H3. */
body.single-post .site-content > .ast-container { max-width: 960px; }
body.page:not(.home):not(:has(.wp-block-uagb-container)) .entry-header,
body.page:not(.home):not(:has(.wp-block-uagb-container)) .entry-content > :not(.alignfull):not(.alignwide) { max-width: 840px; margin-left: auto; margin-right: auto; }
body:not(.home):not(:has(.wp-block-uagb-container)) header.entry-header .entry-title,
body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content h1 { font-size: 2.25rem; line-height: 1.2; }
body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content h2 { font-size: 1.75rem; line-height: 1.25; margin: 1.6em auto 0.55em; }
body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content h3 { font-size: 1.35rem; line-height: 1.3; margin: 1.4em auto 0.5em; }
body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content h4 { font-size: 1.15rem; line-height: 1.35; margin: 1.25em auto 0.45em; }
body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content > h2:first-child, body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content > h1:first-child { margin-top: 0; }
body:not(.home):not(:has(.wp-block-uagb-container)) .ast-related-posts-title { font-size: 1.75rem; }
body.page:not(.home):not(:has(.wp-block-uagb-container)) .site-content > .ast-container { padding-top: 2em; }
@media (max-width: 921px) {
  body:not(.home):not(:has(.wp-block-uagb-container)) header.entry-header .entry-title, body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content h1 { font-size: 1.9rem; }
  body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content h2, body:not(.home):not(:has(.wp-block-uagb-container)) .ast-related-posts-title { font-size: 1.5rem; }
  body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content h3 { font-size: 1.25rem; }
}
@media (max-width: 544px) {
  body:not(.home):not(:has(.wp-block-uagb-container)) header.entry-header .entry-title, body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content h1 { font-size: 1.65rem; }
  body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content h2, body:not(.home):not(:has(.wp-block-uagb-container)) .ast-related-posts-title { font-size: 1.35rem; }
  body:not(.home):not(:has(.wp-block-uagb-container)) .entry-content h3 { font-size: 1.15rem; }
  body.page:not(.home):not(:has(.wp-block-uagb-container)) .site-content > .ast-container { padding-top: 1.25em; }
}
/* Astra puts a 30px drop shadow on every figure in posts; a table is not a photo. */
.ast-article-single figure.wp-block-table { box-shadow: none; }
/* Phones: edge shadows show that a table scrolls sideways (shadow hides once scrolled to that edge). */
@media (max-width: 544px) {
  .hmbd-table-wrap, .entry-content .wp-block-table {
    background:
      linear-gradient(to right, var(--ast-global-color-5) 30%, rgba(255,255,255,0)),
      linear-gradient(to left, var(--ast-global-color-5) 30%, rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(26,14,0,.18), rgba(26,14,0,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(26,14,0,.18), rgba(26,14,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}
/* Plain pages: the footer sat flush against the last paragraph or form button. */
body.page:not(.home) .site-footer { margin-top: 3em; border-top: 1px solid var(--ast-global-color-6); }
/* FAQ rows: brand-coloured press state instead of the browser's blue tap flash. */
.entry-content .wp-block-details summary { -webkit-tap-highlight-color: transparent; }
.entry-content .wp-block-details summary:hover, .entry-content .wp-block-details summary:active { background: var(--ast-global-color-4); border-radius: 6px 6px 0 0; }
/* Fixed-layout core tables split words ("Wednesda/y") on phones; let columns size to content there. */
@media (max-width: 544px) {
  .entry-content .wp-block-table .has-fixed-layout { table-layout: auto; }
  .entry-content .wp-block-table .has-fixed-layout td, .entry-content .wp-block-table .has-fixed-layout th { word-break: normal; overflow-wrap: normal; }
}