/*! Hub WordPress additions. Loaded after hub.css (the reference stylesheet, kept byte for byte).
   Only WordPress-specific needs live here: admin bar, editor content, Gravity Forms, WooCommerce. */

/* ---------- Shell ---------- */
#main-content:focus { outline: none; }
.screen-reader-text { clip-path: inset(50%); white-space: nowrap; border: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; }
.screen-reader-text:focus { clip-path: none; width: auto; height: auto; margin: 0; z-index: 100; }

/* Footer base row: links keep the muted base color (reference text tone). */
.ftr-base a { color: inherit; }

/* Sticky header below the admin bar. */
.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) { .admin-bar .hdr { top: 46px; } }
@media (max-width: 600px) { .admin-bar .hdr { top: 0; } }
.admin-bar .mnav { max-height: calc(100dvh - 68px - 46px); }

/* Mobile sheet only below the desktop breakpoint (hub.css hides it at 1060px+). */
.mnav[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .dropdown { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Editor content (posts, pages, KB, guides) ---------- */
.hub-content { overflow-wrap: anywhere; }
.hub-content > :first-child { margin-top: 0; }
.hub-content h1 { margin: 2em 0 .6em; font-size: 1.9rem; }
.hub-content h4, .hub-content h5, .hub-content h6 { margin: 1.4em 0 .5em; font-size: 1.05rem; }
.hub-content img, .hub-content video, .hub-content iframe, .hub-content embed, .hub-content object { max-width: 100%; }
.hub-content img { height: auto; }
.hub-content figure { margin: 1.6em 0; }
.hub-content figcaption, .hub-content .wp-caption-text, .hub-content .wp-element-caption { color: var(--ink-2); font-size: .9rem; margin-top: .5em; }
.hub-content .wp-caption { max-width: 100%; }
.hub-content .alignleft { float: left; margin: .3em 1.4em 1em 0; }
.hub-content .alignright { float: right; margin: .3em 0 1em 1.4em; }
.hub-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
@media (max-width: 600px) { .hub-content .alignleft, .hub-content .alignright { float: none; margin: 1em 0; } }
.hub-content blockquote { margin: 1.4em 0; }
.hub-content hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.hub-content pre { background: var(--char-2, #262223); color: #f1ebe5; padding: 16px; border-radius: 3px; overflow-x: auto; font-size: .9rem; margin: 0 0 1em; }
.hub-content code { font-family: var(--app-font-mono, monospace); font-size: .92em; }
.hub-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95rem; display: block; overflow-x: auto; }
.hub-content th, .hub-content td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.hub-content th { background: var(--sage); }
.hub-content .wp-block-embed__wrapper, .hub-content .wp-embed-aspect-16-9 .wp-block-embed__wrapper { position: relative; }
.hub-content .wp-has-aspect-ratio .wp-block-embed__wrapper:before { content: ""; display: block; padding-top: 56.25%; }
.hub-content .wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-content .wp-block-image img { border-radius: 3px; }
.hub-content .wp-block-button__link, .hub-content .button { display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px; background: var(--red); color: #fff; font-weight: 650; text-decoration: none; border-radius: 2px; }
.hub-content .wp-block-button__link:hover, .hub-content .button:hover { background: var(--teal-dark); }
.hub-content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; }
.hub-content .wp-block-column { flex: 1 1 260px; min-width: 0; }
.hub-content .wp-block-gallery, .hub-content .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.hub-content .post-password-form input[type="password"] { background: var(--panel); min-height: 46px; border: 1.5px solid #cfc4b9; border-radius: 3px; padding: 0 14px; font: inherit; }
.hub-content .post-password-form input[type="submit"] { min-height: 46px; padding: 0 20px; background: var(--red); color: #fff; font-weight: 650; border: 0; border-radius: 2px; cursor: pointer; }
.hub-featured { width: 100%; height: auto; border-radius: 3px; margin: 0 0 2em; }

/* ---------- Forms: demo, contact, thank-you, 404 (forms agent) ----------
   Gravity Forms 2.9 markup (gravity-theme or orbital) made to look like the reference
   .form / .field / .input / .alert / .btn. Selectors start with .hub to beat GF's own CSS. */
/* Reference bug fix: .form .two only became a grid at 700px+, so stacked fields touched on phones. */
.form .two { display: grid; gap: var(--s4); }
/* Reference bug fix: "Choose your path" / 404 audience links ran together inline ("stores →Veterinary").
   Keep the reference layout (links wrap inline, two per row, 43px rows) but put a gap after each arrow.
   A flex-wrap column-gap only applies between links on the same row, so rows wrap exactly where the
   reference wraps; the heading takes a full row. */
.hub-pathlinks { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 7px; }
.hub-pathlinks > * { flex: 0 0 auto; max-width: 100%; }
.hub-pathlinks > .h-3 { flex-basis: 100%; }
.hub-gf { min-width: 0; }
.hub-gf > .h-3 { margin: 0; }
.form > [data-hub-form-summary]:empty { display: none; }
/* Keep error summaries and GF anchors clear of the sticky header when focused or scrolled to. */
.form > [data-hub-form-summary], .form .field .input, .hub .gform_wrapper .gform_anchor, .hub .gform_wrapper .gform_validation_errors, .hub .gform_wrapper .gfield input, .hub .gform_wrapper .gfield select, .hub .gform_wrapper .gfield textarea { scroll-margin-top: 110px; }
.hub .gform_wrapper, .hub .gform_wrapper.gravity-theme, .hub .gform_wrapper.gform-theme { font: inherit; color: var(--navy); margin: 0; max-width: none; }
.hub .gform_wrapper form { margin: 0; }
.hub .gform_wrapper .gform_heading, .hub .gform_wrapper .gform_required_legend { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hub .gform_wrapper .gform_body, .hub .gform_wrapper .gform-body { margin: 0; padding: 0; }
.hub .gform_wrapper .gform_fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s4); row-gap: var(--s4); margin: 0; padding: 0; list-style: none; width: 100%; }
.hub .gform_wrapper .gform_fields > .gfield { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
@media (min-width: 700px) {
  .hub .gform_wrapper .gform_fields > .gfield--width-half { grid-column: span 6; }
  .hub .gform_wrapper .gform_fields > .gfield--width-third { grid-column: span 4; }
  .hub .gform_wrapper .gform_fields > .gfield--width-two-thirds { grid-column: span 8; }
  .hub .gform_wrapper .gform_fields > .gfield--width-quarter { grid-column: span 3; }
  .hub .gform_wrapper .gform_fields > .gfield--width-three-quarter { grid-column: span 9; }
  .hub .gform_wrapper .gform_fields > .gfield--width-five-twelfths { grid-column: span 5; }
  .hub .gform_wrapper .gform_fields > .gfield--width-seven-twelfths { grid-column: span 7; }
}
.hub .gform_wrapper .gform_validation_container, .hub .gform_wrapper .gfield--type-honeypot, .hub .gform_wrapper .gform_hidden, .hub .gform_wrapper .gfield--type-hidden, .hub .gform_wrapper .gfield_visibility_hidden { display: none !important; }
.hub .gform_wrapper .gfield_label, .hub .gform_wrapper .gform-field-label--type-sub, .hub .gform_wrapper legend.gfield_label { display: block; margin: 0 0 6px; padding: 0; font: inherit; font-size: 15px; font-weight: 650; line-height: 1.6; color: var(--navy); }
.hub .gform_wrapper .gfield_required { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hub .gform_wrapper .opt { color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.hub .gform_wrapper .ginput_container { margin: 0; padding: 0; }
.hub .gform_wrapper .gfield input[type="text"], .hub .gform_wrapper .gfield input[type="email"], .hub .gform_wrapper .gfield input[type="tel"], .hub .gform_wrapper .gfield input[type="url"], .hub .gform_wrapper .gfield input[type="number"], .hub .gform_wrapper .gfield input[type="password"], .hub .gform_wrapper .gfield input[type="date"], .hub .gform_wrapper .gfield input[type="search"], .hub .gform_wrapper .gfield select, .hub .gform_wrapper .gfield textarea {
  background: var(--panel); width: 100%; max-width: none; min-height: 46px; height: auto; margin: 0; font: inherit; color: var(--navy); border: 1.5px solid #cfc4b9; border-radius: 3px; padding: 0 14px; box-shadow: none;
}
.hub .gform_wrapper .gfield textarea { display: block; resize: vertical; min-height: 130px; height: 130px; padding: 12px 14px; }
.hub .gform_wrapper .gfield select { appearance: auto; -webkit-appearance: auto; background-image: none; padding: 0 14px; }
.hub .gform_wrapper .gfield input::placeholder, .hub .gform_wrapper .gfield textarea::placeholder { color: #8a817c; opacity: 1; }
.hub .gform_wrapper .gfield input:focus, .hub .gform_wrapper .gfield select:focus, .hub .gform_wrapper .gfield textarea:focus { border-color: var(--teal); outline: 3px solid #c4202b40; outline-offset: 0; box-shadow: none; }
.hub .gform_wrapper .gfield input[aria-invalid="true"], .hub .gform_wrapper .gfield select[aria-invalid="true"], .hub .gform_wrapper .gfield textarea[aria-invalid="true"], .hub .gform_wrapper .gfield_error .ginput_container input, .hub .gform_wrapper .gfield_error .ginput_container select, .hub .gform_wrapper .gfield_error .ginput_container textarea { border-color: #b3261e; }
.hub .gform_wrapper .gfield_error .gfield_label, .hub .gform_wrapper .gfield_error legend { color: var(--navy); }
.hub .gform_wrapper .gfield_description, .hub .gform_wrapper .ginput_counter { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 6px 0 0; padding: 0; }
.hub .gform_wrapper .field_description_above .gfield_description:not(.validation_message) { margin: 0 0 8px; }
.hub .gform_wrapper .ginput_counter { font-size: 13px; }
.hub .gform_wrapper .gfield .gfield_validation_message, .hub .gform_wrapper .gfield .validation_message { color: #a3241c; margin: 6px 0 0; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.5; background: none; border: 0; border-radius: 0; }
.hub .gform_wrapper .gform_validation_errors { margin: 0 0 var(--s4); padding: 14px 16px; border: 1px solid #e7b9b5; border-radius: 3px; background: #fbeceb; color: #6e1a14; font-size: 15.5px; box-shadow: none; }
.hub .gform_wrapper .gform_validation_errors:focus { outline: 3px solid #c4202b40; outline-offset: 2px; }
.hub .gform_wrapper .gform_validation_errors > h2, .hub .gform_wrapper .gform_validation_errors .gform_submission_error { display: block; margin: 0; padding: 0; font: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.5; color: #6e1a14; }
.hub .gform_wrapper .gform_validation_errors .gform-icon { display: none; }
.hub .gform_wrapper .gform_validation_errors > ol { margin: 6px 0 0 18px; padding: 0; list-style: disc; }
.hub .gform_wrapper .gform_validation_errors > ol li { margin: 0; padding: 0; font-size: 15.5px; color: #6e1a14; list-style: disc; }
.hub .gform_wrapper .gform_validation_errors > ol a { color: inherit; text-decoration: none; }
.hub .gform_wrapper .gform_validation_errors > ol a:hover, .hub .gform_wrapper .gform_validation_errors > ol a:focus-visible { text-decoration: underline; }
.hub .gform_wrapper .gsection { margin: 0 0 -6px; padding: 0; border: 0; }
.hub .gform_wrapper .gsection_title { margin: 0; padding: 0; font: inherit; font-size: 14.5px; font-weight: 400; line-height: 1.6; color: var(--ink-2); }
.hub .gform_wrapper .gsection_description { margin: 0; padding: 0; font-size: 14.5px; color: var(--ink-2); }
.hub .gform_wrapper .gsection_description:empty { display: none; }
.hub .gform_wrapper .ginput_complex { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.hub .gform_wrapper .ginput_complex > span, .hub .gform_wrapper .ginput_complex .ginput_full { margin: 0; padding: 0; width: auto; }
.hub .gform_wrapper .ginput_complex label, .hub .gform_wrapper .gform-field-label--type-sub { margin: 4px 0 0; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
/* Choices as cards (radio, checkbox, consent). */
.hub .gform_wrapper .gfield_checkbox, .hub .gform_wrapper .gfield_radio { display: grid; gap: 8px; margin: 0; padding: 0; }
.hub .gform_wrapper .gchoice, .hub .gform_wrapper .ginput_container_consent { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; background: var(--panel); border: 1.5px solid #cfc4b9; border-radius: 3px; }
.hub .gform_wrapper .gchoice:has(input:checked), .hub .gform_wrapper .ginput_container_consent:has(input:checked) { border-color: var(--red); background: var(--teal-tint); }
.hub .gform_wrapper .gchoice:focus-within, .hub .gform_wrapper .ginput_container_consent:focus-within { outline: 3px solid #c4202b40; }
.hub .gform_wrapper .gchoice input, .hub .gform_wrapper .ginput_container_consent input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
.hub .gform_wrapper .gchoice label, .hub .gform_wrapper .ginput_container_consent label { margin: 0; padding: 0; max-width: none; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--navy); cursor: pointer; }
/* Footer and submit: the input is turned into <button class="btn btn-primary"> (inc/hub/forms.php). */
.hub .gform_wrapper .gform_footer, .hub .gform_wrapper .gform_page_footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: var(--s4) 0 0; padding: 0; border: 0; }
.hub .gform_wrapper .gform_footer .gform_button, .hub .gform_wrapper .gform_footer input[type="submit"], .hub .gform_wrapper .gform_page_footer .button {
  cursor: pointer; border: 1.5px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 50px; margin: 0; padding: 0 22px;
  font: inherit; font-size: 16px; font-weight: 650; line-height: 1.2; letter-spacing: -.005em; border-radius: 2px; background: var(--red); color: #fff; box-shadow: none; transition: background-color .18s, transform .18s;
}
.hub .gform_wrapper .gform_footer .gform_button:hover, .hub .gform_wrapper .gform_footer input[type="submit"]:hover, .hub .gform_wrapper .gform_page_footer .button:hover { background: var(--teal-dark); color: #fff; }
.hub .gform_wrapper .gform_footer .gform_button:focus-visible { outline: 3px solid #c4202b80; outline-offset: 2px; }
.hub .gform_wrapper .gform_ajax_spinner, .hub .gform_wrapper .gform-loader { margin-left: 10px; vertical-align: middle; }
.hub .gform_confirmation_wrapper, .hub .gform_confirmation_message { margin: 0; padding: 14px 16px; border: 1px solid #cfc4b9; border-radius: 3px; background: var(--teal-tint); color: var(--teal-dark); font-size: 15.5px; }
.hub .gform_confirmation_wrapper .gform_confirmation_message { padding: 0; border: 0; }

/* ---------- WooCommerce (catalog, product, cart, checkout, account) ---------- */
.hub-woo { color: var(--navy); }
.hub-woo a { color: var(--teal); }
.hub-woo .button, .hub-woo button.button, .hub-woo input.button, .hub-woo a.button, .hub-woo .checkout-button, .hub-woo #place_order,
.hub-woo .wc-block-components-button:not(.is-link) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; background: var(--red); color: #fff !important; font: inherit; font-weight: 650;
  border: 0; border-radius: 2px; text-decoration: none; cursor: pointer;
}
.hub-woo .button:hover, .hub-woo #place_order:hover, .hub-woo .wc-block-components-button:not(.is-link):hover { background: var(--teal-dark); }
.hub-woo input[type="text"], .hub-woo input[type="email"], .hub-woo input[type="tel"], .hub-woo input[type="password"], .hub-woo input[type="number"], .hub-woo select, .hub-woo textarea {
  background: var(--panel); min-height: 46px; font: inherit; color: var(--navy); border: 1.5px solid #cfc4b9; border-radius: 3px; padding: 0 14px;
}
.hub-woo table { width: 100%; border-collapse: collapse; }
.hub-woo th, .hub-woo td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; }
.hub-woo ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; list-style: none; padding: 0; }
.hub-woo .woocommerce-message, .hub-woo .woocommerce-info, .hub-woo .woocommerce-error { list-style: none; border: 1.5px solid var(--line); border-left: 4px solid var(--red); background: var(--panel); padding: 12px 16px; margin: 0 0 20px; border-radius: 3px; }
.hub-woo .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.hub-woo .woocommerce-MyAccount-navigation a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 14px; border: 1.5px solid var(--navy); color: var(--navy); text-decoration: none; border-radius: 2px; }
.hub-woo .woocommerce-MyAccount-navigation .is-active a { background: var(--navy); color: var(--paper); }

/* ---------- Page: home ---------- */
/* Reference bug: `.statement p` (display font, 3.6rem) also hits the sample-record caption inside the
   statement's app window, so it overflowed the window. Restore the normal small .ui-note caption. */
.statement .ui-note { font-family: inherit; font-size: 11.5px; font-weight: 400; line-height: 1.4; letter-spacing: normal; max-width: none; color: var(--ink-2); }

/* ---------- Dynamic views: blog, posts, archives, search, pages ---------- */
/* Reference post bodies keep the .prose-ukm h2 top margin under the "Historical article." note. */
.hub-content.hub-post-body > h2:first-child { margin-top: 2em; }
.hub-page-gap { align-self: center; color: var(--ink-2); padding: 0 4px; }
.hub-page-links { margin-top: 32px; }
.hub-featured-fig { margin: 0 0 32px; }
.hub-featured-fig .hub-featured { margin: 0; border-radius: 3px; }
.hub-post-tags { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hub-post-tags a.tag { text-decoration: none; }
.hub-post-tags a.tag:hover { background: var(--char); color: #fff; }
.hub-search-form { display: flex; gap: 12px; max-width: 680px; margin: 0 0 40px; }
.hub-search-form .input { flex: 1; min-height: 50px; min-width: 0; }
.hub-search-form .btn { flex: none; }
@media (max-width: 520px) { .hub-search-form { flex-direction: column; } }
.hub-search-empty { margin-top: 8px; }
.hub-toc { margin: 0 0 32px; padding: 20px 24px; border-left: 3px solid var(--red); }
.hub-toc .eyebrow { margin: 0 0 10px; font-size: 12px; }
.hub-toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; list-style: decimal; }
.hub-toc li::marker { color: var(--red); font-family: var(--app-font-mono); font-size: 13px; }
.hub-toc li.lvl-3 { margin-left: 1em; list-style: circle; font-size: .95em; }
.hub-toc a { color: var(--navy); text-decoration: none; font-weight: 600; }
.hub-toc a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.hub-legal-contact { margin-top: 48px; }
.prose-ukm.hub-content :is(h2, h3)[id] { scroll-margin-top: 96px; }
.prose-ukm.hub-content blockquote { border-left-color: var(--red); font-style: italic; margin-left: 0; }
.prose-ukm.hub-content pre { font-family: var(--app-font-mono); }
.prose-ukm.hub-content :not(pre) > code { background: var(--sage); padding: .1em .35em; border-radius: 2px; }
.prose-ukm.hub-content th { background: var(--sage); font-weight: 650; }
.prose-ukm.hub-content img { border-radius: 3px; }

/* ---------- Knowledge Base (signed-in customers) ---------- */
.hub-kb-account { background: var(--char-2); border: 1px solid var(--char-3); border-left: 3px solid var(--red); padding: 24px; display: grid; gap: 12px; border-radius: 3px; }
.hub-kb-account p { margin: 0; color: var(--on-dark); }
.hub-kb-account strong { color: #fbf7f3; }
.hub-kb-account .eyebrow { color: #ff9a90; }
.hub-kb-account .btn { min-height: 44px; }
.hub-kb-group .linkrows { align-self: start; }
.hub-kb-group .linkrow .tag { background: var(--clay-tint); color: #6c3214; }
@media (max-width: 899px) { .hub-kb-group { grid-template-columns: 1fr; } }
.hub-topic-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hub-topic { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 3px; color: var(--navy); text-decoration: none; }
.hub-topic:hover { background: #fff; }
.hub-topic:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.hub-kb-layout { display: grid; gap: var(--s7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .hub-kb-layout { grid-template-columns: minmax(0, 1fr) 300px; } .hub-kb-aside { position: sticky; top: 100px; align-self: start; } }
.hub-kb-main .prose-ukm { max-width: 72ch; }
.hub-kb-aside { display: grid; gap: 16px; }
.hub-kb-aside .hub-toc { margin: 0; }
.hub-kb-side { padding: 20px 24px; display: grid; gap: 14px; }
.hub-kb-side .eyebrow { margin: 0; font-size: 12px; }
.hub-kb-side ul { list-style: none; margin: 0; padding: 0; display: grid; }
.hub-kb-side li a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--navy); text-decoration: none; font-weight: 600; font-size: 15px; }
.hub-kb-side li a:hover span:first-child, .hub-kb-side li a[aria-current] span:first-child { color: var(--red); }
.hub-kb-side li a[aria-current] { box-shadow: inset 3px 0 0 var(--red); padding-left: 10px; }
.hub-kb-video { position: relative; margin: 1.6em 0; aspect-ratio: 16 / 9; background: var(--char); border-radius: 3px; overflow: hidden; }
.hub-kb-video iframe, .hub-kb-video video, .hub-kb-video embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Sign in (/login/, markup from inc/redesign/kb-private.php) ---------- */
.hub-login { background: var(--char); color: var(--on-dark); padding: var(--s8) 0 var(--s9); position: relative; overflow: hidden; }
.hub-login::before { content: ""; position: absolute; top: 0; right: 0; width: min(28vw, 340px); height: 14px; background: var(--red); }
.hub-login::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#ffffff09 1px, #0000 1px), linear-gradient(90deg, #ffffff09 1px, #0000 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(100deg, #0000 30%, #000); mask-image: linear-gradient(100deg, #0000 30%, #000); }
.hub-login__grid { position: relative; z-index: 1; display: grid; gap: var(--s7); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .hub-login__grid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: var(--s8); } }
.hub-login__aside h2 { color: #fbf7f3; }
.hub-login__aside .checklist li { color: var(--on-dark); }
.hub-login__aside .checklist li::before { border-color: var(--red); background-image: linear-gradient(var(--red), var(--red)); }
.hub-login__help { color: var(--on-dark-2); }
.hub-login__help .tlink { color: #ff9a90; }
.hub-login .ukm-login, .hub-login .ukm-container, .hub-login .ukm-login__inner { display: block; padding: 0; margin: 0; max-width: none; background: none; }
.hub-login .ukm-login__card { background: var(--panel); color: var(--navy); border-radius: 3px; border-top: 4px solid var(--red); padding: 32px; box-shadow: 14px 14px 0 var(--red); display: grid; gap: 16px; }
@media (max-width: 520px) { .hub-login .ukm-login__card { padding: 24px 20px; box-shadow: 8px 8px 0 var(--red); } }
.hub-login .ukm-eyebrow { margin: 0; font-family: var(--app-font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 10px; }
.hub-login .ukm-eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--red); }
.hub-login .ukm-login__title { margin: 0; color: var(--navy); font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; }
.hub-login .ukm-login__intro { margin: 0; color: var(--ink-2); }
.hub-login .ukm-login__form form { display: grid; gap: 16px; margin: 0; }
.hub-login .ukm-login__form p { margin: 0; }
.hub-login .ukm-login__form label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 650; color: var(--navy); }
.hub-login .ukm-login__form input[type="text"], .hub-login .ukm-login__form input[type="email"], .hub-login .ukm-login__form input[type="password"] { width: 100%; min-height: 50px; padding: 0 14px; font: inherit; color: var(--navy); background: #fff; border: 1.5px solid #cfc4b9; border-radius: 3px; }
.hub-login .ukm-login__form input:focus { border-color: var(--red); outline: 3px solid #c4202b40; outline-offset: 0; }
.hub-login .ukm-login__form input[aria-invalid="true"] { border-color: #b3261e; }
.hub-login .ukm-login__form .login-remember label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; font-size: 15px; cursor: pointer; }
.hub-login .ukm-login__form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--red); margin: 0; }
.hub-login .ukm-login__form input[type="submit"], .hub-login .ukm-login__form button[type="submit"] { width: 100%; min-height: 52px; border: 0; border-radius: 2px; background: var(--red); color: #fff; font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; }
.hub-login .ukm-login__form input[type="submit"]:hover { background: var(--teal-dark, #9e1a23); }
.hub-login .ukm-login__form input[type="submit"]:focus-visible { outline: 3px solid var(--char); outline-offset: 2px; }
.hub-login .ukm-login__links { list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.hub-login .ukm-login__links a, .hub-login .ukm-login__who a { color: var(--red); font-weight: 650; text-underline-offset: 3px; }
.hub-login .ukm-notice, .hub-login .ukm-form-errors { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 3px; border: 1.5px solid var(--line); border-left: 4px solid var(--red); background: var(--clay-tint); color: #4b2a17; }
.hub-login .ukm-notice p, .hub-login .ukm-form-errors p { margin: 0; }
.hub-login .ukm-notice--success { border-left-color: #2f7a4a; background: #e8f2ea; color: #1d4a2c; }
.hub-login .ukm-form-errors { border-color: #a3241c; background: #fbeceb; color: #a3241c; font-weight: 600; }
.hub-login .ukm-form-errors:focus { outline: 3px solid #c4202b40; }
.hub-login .ukm-icon { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.hub-login .ukm-login__who { margin: 0; font-size: 15px; }

/* ---------- pet_kb breed reference ---------- */
.hub-card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hub-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; }
.hub-card:hover { border-color: var(--char); }
.hub-card__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hub-card__body { padding: 18px 20px 20px; display: grid; gap: 8px; justify-items: start; }
.hub-card__body .h-3 { margin: 0; }
.hub-card__body a { color: var(--navy); text-decoration: none; }
.hub-card__body a::after { content: ""; position: absolute; inset: 0; }
.hub-card__body a:focus-visible { outline: none; }
.hub-card:focus-within { outline: 3px solid var(--red); outline-offset: 2px; }
.hub-facts tbody th { width: 38%; }

/* Password-protected content (functions.php ukm_protected() form with inline styles). */
.hub-content div:has(> form[action*="postpass"]) { text-align: left !important; font-size: inherit !important; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 3px; padding: 24px; max-width: 640px; }
.hub-content div:has(> form[action*="postpass"]) > p { font-size: 1.05rem !important; margin: 0 0 16px !important; color: var(--navy); }
.hub-content form[action*="postpass"] p { margin: 0 0 12px; }
.hub-content form[action*="postpass"] label { display: block; font-size: 15px; font-weight: 650; margin-bottom: 6px; }
.hub-content form[action*="postpass"] input[type="password"] { width: 100%; max-width: 360px; min-height: 48px; margin: 0 !important; padding: 0 14px !important; font: inherit !important; color: var(--navy); background: #fff; border: 1.5px solid #cfc4b9; border-radius: 3px; }
.hub-content form[action*="postpass"] input[type="password"]:focus { border-color: var(--red); outline: 3px solid #c4202b40; outline-offset: 0; }
.hub-content form[action*="postpass"] input[type="submit"] { min-height: 50px; padding: 0 22px !important; font: inherit !important; font-weight: 650 !important; background: var(--red) !important; border: 0 !important; border-radius: 2px; color: #fff; cursor: pointer; }
.hub-content form[action*="postpass"] input[type="submit"]:hover { background: var(--teal-dark, #9e1a23) !important; }
.hub-login__aside .h-2 { margin-bottom: 4px; }
.hub-narrow { max-width: 860px; }
.hub-toc li.lvl-3 { counter-increment: list-item 0; }

/* ---------- Accessibility fixes (a11y-func fixer) ---------- */
/* Decorative footer wordmark: drawn from CSS so axe color-contrast does not test the 1.18:1 tone-on-tone text.
   footer.php prints an empty aria-hidden <p class="ftr-big">. */
.ftr-big::before { content: "Unified Kennel Management"; }
/* Pricing: highlighted step number on red was #1c1a1b (2.95:1). Black gives about 3.5:1 for large text. */
.steps3 > div.hl .big-n { color: #000; }
/* Mock window bars: inline opacity:.85 on the org name confuses axe's background lookup.
   Same rendered tone as a solid color (#d9d2cc at 85% over #1c1a1b). */
.ui-bar > span[style*="opacity:0.85"] { opacity: 1 !important; color: #bdb6b1; }
/* No-JS fallback (an inline head script adds html.hub-js, so none of this applies, or flashes, with JS on).
   hub.css hides [hidden] with !important inside @layer base, so the overrides sit in that layer too. */
@layer base {
  html:not(.hub-js) .nav-item:hover > .dropdown[hidden],
  html:not(.hub-js) .nav-item:focus-within > .dropdown[hidden] { display: block !important; }
  @media (max-width: 1059.98px) {
    html:not(.hub-js) .mnav[hidden] { display: block !important; }
  }
}
html:not(.hub-js) .nav-item > .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
@media (max-width: 1059.98px) {
  html:not(.hub-js) .menu-btn { display: none !important; }
  html:not(.hub-js) .hdr { position: static; }
  html:not(.hub-js) .mnav { max-height: none; overflow: visible; }
}