/*
Theme Name:  Full House UK
Theme URI:   https://bingo-no-depositbonus.uk/
Description: An evening in the bingo hall, as a child of Astra: indigo furniture standing on a cool near-white floor, the colours of the balls for the accents, the ticket grid as the motif, and Chivo and Source Sans 3 shipped inside the theme. Switching it on once settles the Customizer (a 1280px column, the mark against the room menu and an 18+ ball, a drawer on phones, an indigo footer carrying help links above a compliance strip), files the mark and the tab icon in the Media Library, and lays out the two menus. Everything it writes remains yours to edit under Appearance > Customize.
Author:      Full House UK
Template:    astra
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fhuk
*/

/* ==========================================================================
   Tokens. The guides and the offers board read the same names.
   ========================================================================== */
:root {
  --fh-page: #F6F4FB;
  --fh-card: #FFFFFF;
  --fh-page-2: #EDEAF7;
  --fh-hall: #231A52;
  --fh-hall-2: #3B2F80;
  --fh-ink: #1E1A3C;
  --fh-ink-2: #585073;
  --fh-rule: #DCD7EC;
  --fh-ball-red: #D8334A;
  --fh-ball-yellow: #F2B705;
  --fh-ball-green: #197F49;
  --fh-ball-blue: #2E6FD9;
  --fh-cta: #C4396E;
  --fh-cta-hover: #A32B59;
  --fh-good: #0F7A50;
  --fh-bad: #A8341A;
  --fh-radius: 10px;

  --fh-head-face: "Chivo", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fh-body-face: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fh-on-hall: #E4E0F2;
  --fh-lift: 0 24px 46px -24px rgba(35, 26, 82, 0.46), 0 2px 10px rgba(35, 26, 82, 0.07);
  /* The row of called balls that runs under the header and over the footer strip */
  --fh-dots: radial-gradient(circle at 8px 50%, var(--fh-hall-2) 0 3.5px, transparent 3.6px);
}

/* ==========================================================================
   Global: the hall floor, text, links, buttons, focus
   ========================================================================== */
body {
  background-color: var(--fh-page);
  color: var(--fh-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Said again here, after Astra's own rule, so running text and form controls keep the face
   whatever string the Customizer ends up holding for it. */
body,
button,
input,
select,
textarea {
  font-family: var(--fh-body-face);
}
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
  font-family: var(--fh-head-face);
}

h1, h2, h3, h4, h5, h6 { font-variant-numeric: lining-nums; }

::selection { background: var(--fh-ball-yellow); color: var(--fh-ink); }

a { text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--fh-hall); text-decoration-thickness: 2px; }

/* Buttons: Astra paints them raspberry with white text; the weight and the motion live here */
.ast-button,
.button,
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
  font-family: var(--fh-body-face);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  box-shadow: 0 10px 20px -12px rgba(196, 57, 110, 0.75);
}

/* One ring for the whole site: the ball blue reads on the page, on a card and on indigo alike */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--fh-ball-blue);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: none;
}
.site-footer :is(a, button):focus-visible { outline-color: var(--fh-ball-yellow); }

/* Room under the header and above the footer: the guides open with their own heading */
.ast-plain-container .site-content > .ast-container > #primary {
  margin-top: clamp(20px, 3.2vw, 38px);
  margin-bottom: clamp(46px, 5.8vw, 76px);
}

/* ==========================================================================
   Page width: 1280px of content, the same for the header row, the guides and
   the footer, so every edge on the page lines up with the logo. Astra's own
   setting is written to 1280 on the theme's first run; the rule below carries
   the same width to a site set up by an earlier version.
   ========================================================================== */
:root { --wp--custom--ast-content-width-size: 1280px; }
@media (min-width: 922px) {
  .ast-container,
  .site-footer .ast-builder-grid-row-container-inner { max-width: 1320px; }
}
/* Laptops between 1300 and 1480: a wider gutter, so the text is not against the glass */
@media (min-width: 1300px) and (max-width: 1480px) {
  .ast-container { padding-left: 38px; padding-right: 38px; }
  .site-footer .ast-builder-grid-row-container-inner { padding-left: 38px; padding-right: 38px; }
}

/* Back to the top: a called ball, legible on the page and on the footer */
#ast-scroll-top {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--fh-ball-yellow);
  color: var(--fh-ink);
  box-shadow: 0 10px 22px -10px rgba(35, 26, 82, 0.62), inset 0 0 0 3px var(--fh-card);
}
#ast-scroll-top:hover { background-color: var(--fh-card); color: var(--fh-hall); }
#ast-scroll-top .ast-icon svg { fill: currentColor; }

.skip-link.screen-reader-text:focus {
  background: var(--fh-hall);
  color: var(--fh-card);
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--fh-lift);
}

/* ==========================================================================
   The 18+ ball. In the header, in the phone drawer and on the footer strip.
   ========================================================================== */
.fhuk-ball18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fh-ball-yellow);
  box-shadow: inset 0 0 0 3px var(--fh-card), inset 0 0 0 5px var(--fh-ball-yellow);
  color: var(--fh-ink);
  font-family: var(--fh-head-face);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ast-header-html-1 .ast-builder-html-element { line-height: 1; }
#ast-desktop-header .ast-header-html-1 { margin-left: 14px; }

/* The name is drawn into the logo, so Astra's gap for a site title beside it is not wanted */
.site-header .ast-logo-title-inline .site-logo-img,
.site-header .site-logo-img { padding-right: 0; }

/* ==========================================================================
   Header: a white bar over a row of called balls
   ========================================================================== */
#masthead { position: relative; z-index: 99; }
#masthead::after {
  content: "";
  display: block;
  height: 9px;
  background-image: var(--fh-dots);
  background-size: 16px 100%;
  background-repeat: repeat-x;
  border-bottom: 1px solid var(--fh-rule);
}
#masthead .main-header-bar { border-bottom: 0; }

/* ==========================================================================
   Desktop menu and its hall-card panels
   ========================================================================== */
@media (min-width: 922px) {
  /* Astra's own link box runs the whole height of the bar. Leaving it that tall means a pointer
     travelling toward the panel never crosses dead space; the pill and the dot sit over it. */
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
    position: relative;
    z-index: 0;
    padding-left: 11px;
    padding-right: 11px;
    font-weight: 700;
  }
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 2px;
    right: 2px;
    top: 50%;
    height: 38px;
    margin-top: -19px;
    border-radius: 999px;
    background-color: transparent;
    transition: background-color 0.15s ease;
  }
  #ast-desktop-header .main-header-menu > .menu-item:hover > .menu-link::before,
  #ast-desktop-header .main-header-menu > .menu-item.focus > .menu-link::before {
    background-color: var(--fh-page-2);
  }
  /* The section you are reading: a called ball under its name */
  #ast-desktop-header .main-header-menu > .current-menu-ancestor > .menu-link::after,
  #ast-desktop-header .main-header-menu > .current-menu-item > .menu-link::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: 13px 0 0 -12px;
    border-radius: 50%;
    background: var(--fh-cta);
  }
  /* Astra holds the arrow 10px clear of the name. Seven rooms, a mark and the ball have to share
     one line, and that spacing alone costs more than the line has to give, so it is pulled in. */
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle { margin-left: 0; }
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle .ast-arrow-svg { margin-left: 3px; }

  /* The panel: a card off the hall wall, with the called balls along its top edge */
  #ast-desktop-header .main-header-menu > .menu-item > .sub-menu {
    top: calc(100% - 12px);
    width: 304px;
    padding: 19px 10px 12px;
    border: 1px solid var(--fh-rule);
    border-radius: var(--fh-radius);
    background-color: var(--fh-card);
    background-image: var(--fh-dots);
    background-size: 16px 9px;
    background-repeat: repeat-x;
    background-position: 2px 0;
    box-shadow: var(--fh-lift);
  }
  /* A lip of the same depth as the gap, so the panel does not close mid-reach */
  #ast-desktop-header .main-header-menu > .menu-item > .sub-menu::before { height: 12px; }

  /* Past eight guides a room needs the width of two columns to stay on one screen */
  #ast-desktop-header .main-header-menu > .fhuk-set--pair > .sub-menu {
    width: 596px;
    column-count: 2;
    column-gap: 8px;
  }
  #ast-desktop-header .main-header-menu > .fhuk-set--pair > .sub-menu > .menu-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  #ast-desktop-header .main-header-menu > .fhuk-set--pair > .sub-menu > .fhuk-next-col {
    break-before: column;
    -webkit-column-break-before: always;
  }

  /* Room on both sides: the opening group hangs right, the closing pair hang left, everything
     between is centred on its own name. No panel reaches past the window edge. */
  #ast-desktop-header .main-header-menu > .fhuk-set--left:hover > .sub-menu,
  #ast-desktop-header .main-header-menu > .fhuk-set--left.focus > .sub-menu,
  #ast-desktop-header .main-header-menu > .fhuk-set--left > .sub-menu.toggled-on {
    left: auto;
    right: 0;
  }
  #ast-desktop-header .main-header-menu > .fhuk-set--centre:hover > .sub-menu,
  #ast-desktop-header .main-header-menu > .fhuk-set--centre.focus > .sub-menu,
  #ast-desktop-header .main-header-menu > .fhuk-set--centre > .sub-menu.toggled-on {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  /* Entries: a ticket line with an empty ball that gets daubed on the way past */
  #ast-desktop-header .main-header-menu .sub-menu .menu-item { border: 0; }
  #ast-desktop-header .main-header-menu .sub-menu .menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--fh-ink);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    transition: background-color 0.12s ease;
  }
  #ast-desktop-header .main-header-menu .sub-menu .menu-link > .ast-icon { display: none; }
  #ast-desktop-header .main-header-menu .sub-menu .menu-link::before {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--fh-rule);
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
  }

  /* The head of a section inside a panel: its hub, and the home page in the bingo panel */
  #ast-desktop-header .main-header-menu .sub-menu .fhuk-head > .menu-link {
    font-family: var(--fh-head-face);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  #ast-desktop-header .main-header-menu .sub-menu .fhuk-head > .menu-link::before {
    background: var(--fh-ball-yellow);
    box-shadow: inset 0 0 0 2px var(--fh-ball-yellow);
  }
  #ast-desktop-header .main-header-menu .sub-menu > .fhuk-head:not(:first-child):not(.fhuk-next-col) {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--fh-rule);
  }

  /* Hovered, focused and current: the ball is daubed raspberry */
  #ast-desktop-header .main-header-menu .sub-menu .menu-item:hover > .menu-link,
  #ast-desktop-header .main-header-menu .sub-menu .menu-item > .menu-link:focus-visible {
    background-color: var(--fh-page-2);
    color: var(--fh-ink);
  }
  #ast-desktop-header .main-header-menu .sub-menu .menu-item:hover > .menu-link::before,
  #ast-desktop-header .main-header-menu .sub-menu .menu-item > .menu-link:focus-visible::before,
  #ast-desktop-header .main-header-menu .sub-menu .current-menu-item > .menu-link::before {
    background: var(--fh-cta);
    box-shadow: inset 0 0 0 2px var(--fh-cta);
  }
  #ast-desktop-header .main-header-menu .sub-menu .current-menu-item > .menu-link {
    background-color: var(--fh-page-2);
    font-weight: 600;
  }
}

/* The bar carries a mark, seven room names and the ball. Below the full column the names close
   up a step at a time, and the mark gives way, rather than any of it dropping to a second line. */
@media (min-width: 922px) and (max-width: 1179px) {
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 8px; padding-right: 8px; }
  #ast-desktop-header .ast-header-html-1 { margin-left: 8px; }
}
@media (min-width: 922px) and (max-width: 1079px) {
  #ast-desktop-header .custom-logo-link img { width: 176px; max-width: 176px; }
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 7px; padding-right: 7px; font-size: 15px; }
  #ast-desktop-header .main-header-menu > .fhuk-set--pair > .sub-menu { width: 556px; }
}
@media (min-width: 922px) and (max-width: 979px) {
  #ast-desktop-header .custom-logo-link img { width: 150px; max-width: 150px; }
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 5px; padding-right: 5px; font-size: 14.5px; }
  #ast-desktop-header .ast-header-html-1 { margin-left: 4px; }
  #ast-desktop-header .fhuk-ball18 { width: 40px; height: 40px; font-size: 12.5px; }
  #ast-desktop-header .main-header-menu > .fhuk-set--pair > .sub-menu { width: 520px; }
}

/* ==========================================================================
   Phone header and the drawer (Astra switches over below 922px)
   ========================================================================== */
#ast-mobile-header .ast-header-html-1 { margin-right: 10px; padding: 0; }
#ast-mobile-header .fhuk-ball18 { width: 40px; height: 40px; font-size: 12.5px; }

#ast-mobile-header .ast-button-wrap { flex: none; }
#ast-mobile-header .menu-toggle.main-header-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 15px;
}
#ast-mobile-header .menu-toggle .mobile-menu-wrap { display: inline-flex; }
#ast-mobile-header .menu-toggle .mobile-menu-wrap .mobile-menu {
  padding: 0;
  color: var(--fh-card);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Small phones: the row keeps to one line; under 341px the button is the icon alone
   (its name stays in the markup for anyone listening to the page) */
@media (max-width: 400px) {
  #ast-mobile-header .ast-builder-grid-row { column-gap: 12px; }
  #ast-mobile-header .custom-logo-link img { width: 142px; max-width: 142px; }
  #ast-mobile-header .fhuk-ball18 { width: 36px; height: 36px; font-size: 11.5px; }
  #ast-mobile-header .ast-header-html-1 { margin-right: 8px; }
  #ast-mobile-header .menu-toggle.main-header-menu-toggle { padding: 8px 12px; }
}
@media (max-width: 340px) {
  #ast-mobile-header .custom-logo-link img { width: 128px; max-width: 128px; }
  #ast-mobile-header .menu-toggle .mobile-menu-wrap { display: none; }
}

.ast-mobile-popup-drawer .ast-mobile-popup-inner {
  max-width: min(92%, 420px);
  box-shadow: -18px 0 42px -24px rgba(35, 26, 82, 0.55);
}
.ast-mobile-popup-drawer .ast-mobile-popup-header {
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 4px 20px;
}
.ast-mobile-popup-drawer .ast-mobile-popup-header::before {
  content: "Pick a room";
  color: var(--fh-ink-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fh-card);
  box-shadow: inset 0 0 0 1px var(--fh-rule);
}
/* The dotted outline Astra reaches for here is replaced by the site-wide ring */
.ast-mobile-popup-drawer.active .ast-mobile-popup-header .menu-toggle-close:focus,
#ast-scroll-top:focus { border: 0; }

/* A raspberry edge marks whichever room the open guide belongs to */
#ast-hf-mobile-menu > .current-menu-ancestor > .menu-link,
#ast-hf-mobile-menu > .current-menu-item > .menu-link { box-shadow: inset 4px 0 0 var(--fh-cta); }

/* The accordion: one card per group, opened by its name */
#ast-hf-mobile-menu { padding: 6px 14px 4px; background: transparent; }
#ast-hf-mobile-menu > .menu-item {
  margin-bottom: 8px;
  border: 1px solid var(--fh-rule);
  border-radius: var(--fh-radius);
  background: var(--fh-card);
  overflow: hidden;
}
#ast-hf-mobile-menu > .menu-item > .menu-link {
  padding: 14px 54px 14px 16px;
  background: var(--fh-card);
  color: var(--fh-ink);
  font-family: var(--fh-head-face);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
#ast-hf-mobile-menu > .ast-submenu-expanded > .menu-link { background: var(--fh-page-2); }
#ast-hf-mobile-menu > .menu-item > .ast-menu-toggle {
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--fh-hall);
}
#ast-hf-mobile-menu > .menu-item > .ast-menu-toggle .ast-icon svg { margin-top: 0; }
#ast-hf-mobile-menu .sub-menu { padding: 2px 0 8px; background: var(--fh-card); }
#ast-hf-mobile-menu .sub-menu .menu-item { border: 0; }
#ast-hf-mobile-menu .sub-menu .menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--fh-page-2);
  background: var(--fh-card);
  color: var(--fh-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}
#ast-hf-mobile-menu .sub-menu .menu-item:first-child > .menu-link { border-top: 0; }
#ast-hf-mobile-menu .sub-menu .menu-link > .ast-icon { display: none; }
#ast-hf-mobile-menu .sub-menu .menu-link::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--fh-rule);
}
#ast-hf-mobile-menu .sub-menu .fhuk-head > .menu-link { font-weight: 600; }
#ast-hf-mobile-menu .sub-menu .fhuk-head > .menu-link::before {
  background: var(--fh-ball-yellow);
  box-shadow: inset 0 0 0 2px var(--fh-ball-yellow);
}
#ast-hf-mobile-menu .sub-menu .current-menu-item > .menu-link { background: var(--fh-page-2); font-weight: 600; }
#ast-hf-mobile-menu .sub-menu .current-menu-item > .menu-link::before {
  background: var(--fh-cta);
  box-shadow: inset 0 0 0 2px var(--fh-cta);
}

/* What sits below the rooms once the drawer is open */
.fhuk-drawer-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 18px;
  color: var(--fh-ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.fhuk-drawer-note a { color: var(--fh-hall-2); font-weight: 600; white-space: nowrap; }
.fhuk-ball18--small { width: 38px; height: 38px; font-size: 12px; }
.ast-mobile-popup-content .ast-header-html-2 { padding: 4px 20px 0; }

/* ==========================================================================
   Footer: the indigo hall, its three columns, and the strip that closes the page
   ========================================================================== */
.site-footer { color: var(--fh-on-hall); }
/* Lines the columns up with the bar above them once the window drops under 1220px */
.site-footer .ast-builder-grid-row-container-inner { padding-left: 20px; padding-right: 20px; }
.site-footer .site-primary-footer-wrap { padding-top: 54px; padding-bottom: 42px; }
.site-footer .site-primary-footer-wrap .ast-builder-grid-row { gap: 38px 54px; }
.site-footer .ast-builder-html-element { color: var(--fh-on-hall); font-size: 15px; line-height: 1.6; }
.site-footer .ast-builder-html-element a { color: var(--fh-card); text-decoration: underline; text-underline-offset: 0.15em; }
.site-footer .ast-builder-html-element a:hover { color: var(--fh-ball-yellow); }

.fhuk-foot-logo { margin: 0 0 16px; }
.fhuk-foot-logo img { display: block; width: 206px; max-width: 100%; height: auto; }
.fhuk-foot-logo--plain { color: var(--fh-card); font-family: var(--fh-head-face); font-size: 24px; font-weight: 900; }
.fhuk-foot-blurb { max-width: 30em; margin: 0; }

.fhuk-foot-head,
.site-footer .footer-nav-wrap::before {
  display: block;
  margin: 2px 0 14px;
  color: var(--fh-ball-yellow);
  font-family: var(--fh-head-face);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}
.site-footer .footer-nav-wrap::before { content: "Site pages"; margin-top: 0; }
.site-footer .ast-builder-html-element .fhuk-foot-head { margin-top: 0; }

.fhuk-tel { white-space: nowrap; }
.fhuk-foot-help { margin: 0; padding: 0; list-style: none; }
.fhuk-foot-help li { margin: 0; padding: 9px 0; border-top: 1px solid rgba(220, 215, 236, 0.22); }
.fhuk-foot-help li:first-child { padding-top: 0; border-top: 0; }
.fhuk-foot-help strong { color: var(--fh-card); font-weight: 700; }

.site-footer #astra-footer-menu { gap: 2px; }
.site-footer #astra-footer-menu .menu-item { margin: 0; }
.site-footer #astra-footer-menu .menu-link {
  display: inline-block;
  padding: 5px 0;
  color: var(--fh-card);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.site-footer #astra-footer-menu .menu-link:hover,
.site-footer #astra-footer-menu .current-menu-item > .menu-link {
  color: var(--fh-ball-yellow);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The compliance strip: a deeper band under a row of called balls */
.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
  position: relative;
  padding-top: 24px;
  padding-bottom: 26px;
  background-color: var(--fh-ink);
}
.site-footer .site-below-footer-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  background-image: radial-gradient(circle at 8px 50%, rgba(242, 183, 5, 0.75) 0 3.5px, transparent 3.6px);
  background-size: 16px 100%;
  background-repeat: repeat-x;
}
.ast-footer-copyright p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  color: var(--fh-on-hall);
  font-size: 14px;
  line-height: 1.55;
}
.ast-footer-copyright a { color: var(--fh-card); text-decoration: underline; text-underline-offset: 0.15em; }
.ast-footer-copyright a:hover { color: var(--fh-ball-yellow); }
.fhuk-ball18--strip {
  width: 44px;
  height: 44px;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--fh-ball-yellow);
  color: var(--fh-card);
}
.fhuk-strip-line { flex: 1 1 32em; }
.fhuk-strip-small { flex: 1 1 100%; color: rgba(228, 224, 242, 0.8); font-size: 13px; }

@media (max-width: 921px) {
  .site-footer .site-primary-footer-wrap { padding-top: 42px; padding-bottom: 30px; }
  .site-footer .site-primary-footer-wrap .ast-builder-grid-row { gap: 30px 28px; }
}
@media (max-width: 544px) {
  .site-footer .site-primary-footer-wrap .site-footer-section { margin-bottom: 0; }
  .site-footer #astra-footer-menu { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .fhuk-strip-line { flex-basis: 100%; }
  /* leaves the closing line room to clear the ball in the corner */
  .site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] { padding-bottom: 78px; }
}

/* ==========================================================================
   Print: no header furniture, no drawer, no footer columns
   ========================================================================== */
@media print {
  #masthead::after,
  .ast-header-html-1,
  .ast-mobile-popup-drawer,
  .site-footer .site-primary-footer-wrap { display: none !important; }
  .site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] { background: none; }
  .site-footer .site-below-footer-wrap::before { display: none; }
  .ast-footer-copyright p, .ast-footer-copyright a { color: #000; }
}

/* Nothing animates for a reader who has asked their system for stillness */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}