/*
 * Blinco Flooring Ltd - components.css
 * Requires framework.css (loaded first - it defines the design tokens).
 *
 * Component surface mirrors Responsee v7 components.css (myresponsee.com,
 * MIT), rebuilt with no JavaScript:
 *   Tabs       -> radio inputs + :checked
 *   Accordion  -> native <details>/<summary>
 *   Modal      -> :target
 *   Tooltip    -> :hover / :focus-within, pre-positioned
 *   Dropdown   -> :hover / :focus-within
 *
 * CONTENTS
 *   1.  Buttons
 *   2.  Tabs
 *   3.  Accordion
 *   4.  Modal
 *   5.  Tooltip
 *   6.  Custom forms
 *   7.  Timeline
 *   8.  Cards + carousel
 *   9.  Alerts + badges
 *   10. Progress + meters
 *   11. Pagination
 *   12. Section + hero helpers
 *   13. Colour + background utilities
 *   14. Print
*/

/* ==========================================================================
   1. BUTTONS
   Rounded by default via --bf-radius-btn, so .rounded-btn is no longer
   needed (it still works, and still pairs with .rounded-full-btn for a
   pill). Opt out with .square-btn.

   Hover uses `filter: brightness()` rather than a hover colour per variant,
   so any new variant - including ones defined in main.css - gets a correct
   hover for free.
   ========================================================================== */
.button,
a.button, a.button:link, a.button:active, a.button:visited,
button.button, input[type="submit"].button {
  align-items: center;
  background: var(--bf-dark);
  border: 0;
  border-radius: var(--bf-radius-btn);
  color: var(--bf-text-invert);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: center;
  letter-spacing: 0.01em;
  line-height: 1.4;
  padding: 0.8rem 1.6rem;
  text-align: center;
  text-decoration: none;
  transition: background var(--bf-transition) 0s,
              box-shadow 0.2s var(--bf-ease),
              transform 0.2s var(--bf-ease),
              filter var(--bf-transition) 0s;
  -webkit-tap-highlight-color: transparent;
}
.button:hover {
  box-shadow: var(--bf-shadow);
  color: var(--bf-text-invert);
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.button:active {
  box-shadow: none;
  filter: brightness(0.96);
  transform: translateY(0);
}

/* Radius modifiers */
.button.rounded-btn      { border-radius: var(--bf-radius-btn); }
.button.rounded-full-btn { border-radius: 100px; }
.button.square-btn       { border-radius: 0; }

/* Colour variants */
.button.primary-btn,
a.button.primary-btn, a.button.primary-btn:link,
a.button.primary-btn:active, a.button.primary-btn:visited {
  background: var(--bf-primary);
}
.button.secondary-btn,
a.button.secondary-btn, a.button.secondary-btn:link,
a.button.secondary-btn:active, a.button.secondary-btn:visited {
  background: var(--bf-dark-light);
}
.button.accent-btn,
a.button.accent-btn, a.button.accent-btn:link,
a.button.accent-btn:active, a.button.accent-btn:visited {
  background: var(--bf-accent);
}
.button.submit-btn,
a.button.submit-btn, a.button.submit-btn:link,
a.button.submit-btn:active, a.button.submit-btn:visited {
  background: var(--bf-success);
}
.button.cancel-btn,
a.button.cancel-btn, a.button.cancel-btn:link,
a.button.cancel-btn:active, a.button.cancel-btn:visited {
  background: var(--bf-danger);
}
.button.reload-btn,
a.button.reload-btn, a.button.reload-btn:link,
a.button.reload-btn:active, a.button.reload-btn:visited {
  background: var(--bf-warning);
}

/* Quiet variants */
.button.outline-btn,
a.button.outline-btn, a.button.outline-btn:link,
a.button.outline-btn:active, a.button.outline-btn:visited {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
  color: var(--bf-primary);
  padding: 0.8rem 1.6rem;
}
.button.outline-btn:hover {
  background: var(--bf-primary);
  box-shadow: var(--bf-shadow);
  color: var(--bf-text-invert);
  filter: none;
}
.button.light-btn,
a.button.light-btn, a.button.light-btn:link,
a.button.light-btn:active, a.button.light-btn:visited {
  background: var(--bf-surface);
  color: var(--bf-heading);
}
.button.light-btn:hover {
  background: var(--bf-surface-alt);
  color: var(--bf-heading);
  filter: none;
}
.button.ghost-btn,
a.button.ghost-btn, a.button.ghost-btn:link,
a.button.ghost-btn:active, a.button.ghost-btn:visited {
  background: transparent;
  color: var(--bf-primary);
}
.button.ghost-btn:hover {
  background: var(--bf-primary-soft);
  box-shadow: none;
  color: var(--bf-primary);
  filter: none;
}

/* Sizes */
.button.small-btn { font-size: 0.75rem; padding: 0.55rem 1.1rem; }
.button.large-btn { font-size: 0.95rem; padding: 1rem 2.1rem; }
.button.full-btn  { display: flex; width: 100%; }

.button.disabled-btn,
.button:disabled {
  box-shadow: none;
  cursor: not-allowed !important;
  filter: none;
  opacity: 0.4;
  pointer-events: none;
  transform: none;
}

/* Icon slot - <i> or <span class="btn-icon">. `gap` on the button handles
   spacing, so no margin is needed. */
.button > i,
.button > .btn-icon {
  align-items: center;
  background: var(--bf-overlay-dark);
  border-radius: 100px;
  color: currentColor;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.8rem;
  height: 1.7em;
  justify-content: center;
  transition: background var(--bf-transition) 0s;
  width: 1.7em;
}
.button.icon-only-btn { padding: 0.8rem; }
.grid .button { width: 100%; }

/* Button row that stays tidy when it wraps */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-gutter);
}
.text-center .button-group { justify-content: center; }

/* ==========================================================================
   2. TABS
   No JS - radio inputs drive it. The radios must come first, named as a
   group, with .tab-nav and .tab-content after them as siblings:

   <div class="tabs">
     <input type="radio" name="t1" id="t1-1" class="tab-radio" checked>
     <input type="radio" name="t1" id="t1-2" class="tab-radio">
     <div class="tab-nav">
       <label for="t1-1" class="tab-label">Carpet</label>
       <label for="t1-2" class="tab-label">Vinyl</label>
     </div>
     <div class="tab-content">
       <div class="tab-item">...</div>
       <div class="tab-item">...</div>
     </div>
   </div>

   Panel n is revealed by radio n, matched on :nth-of-type - so the
   .tab-item divs must be the only element children of .tab-content.
   Supports up to 10 tabs per group.

   Default style is a modern underline. Add .tabs-pill or .tabs-boxed to
   .tab-nav for the alternatives.
   ========================================================================== */
.tabs { position: relative; }

/* --- Default: underline --- */
.tab-nav {
  border-bottom: 1px solid var(--bf-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}
.tab-label {
  background: transparent;
  border-bottom: 2px solid transparent;
  border-radius: var(--bf-radius) var(--bf-radius) 0 0;
  color: var(--bf-text-muted);
  cursor: pointer;
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: -1px;
  padding: 0.8rem 1.15rem;
  transition: color var(--bf-transition) 0s,
              background var(--bf-transition) 0s,
              border-color var(--bf-transition) 0s;
  user-select: none;
  white-space: nowrap;
}
.tab-label:hover {
  background: var(--bf-surface-alt);
  color: var(--bf-heading);
}
.tab-content { text-align: left; }
.tab-content > .tab-label { display: none; }
.tab-item {
  display: none;
  padding: 1.5rem 0;
}

/* --- Pill variant --- */
.tab-nav.tabs-pill {
  background: var(--bf-surface-sunken);
  border-bottom: 0;
  border-radius: 100px;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
}
.tabs-pill .tab-label {
  border-bottom: 0;
  border-radius: 100px;
  margin-bottom: 0;
  padding: 0.55rem 1.3rem;
}
.tabs-pill .tab-label:hover { background: transparent; }

/* --- Boxed variant (folder tabs) --- */
.tab-nav.tabs-boxed { gap: 2px; }
.tabs-boxed .tab-label {
  background: var(--bf-surface-alt);
  border: 1px solid var(--bf-border);
  border-bottom-color: var(--bf-border);
}

/* --- Active pairings: radio n drives label n and panel n --- */
.tab-radio:nth-of-type(1):checked ~ .tab-nav > .tab-label:nth-of-type(1),
.tab-radio:nth-of-type(2):checked ~ .tab-nav > .tab-label:nth-of-type(2),
.tab-radio:nth-of-type(3):checked ~ .tab-nav > .tab-label:nth-of-type(3),
.tab-radio:nth-of-type(4):checked ~ .tab-nav > .tab-label:nth-of-type(4),
.tab-radio:nth-of-type(5):checked ~ .tab-nav > .tab-label:nth-of-type(5),
.tab-radio:nth-of-type(6):checked ~ .tab-nav > .tab-label:nth-of-type(6),
.tab-radio:nth-of-type(7):checked ~ .tab-nav > .tab-label:nth-of-type(7),
.tab-radio:nth-of-type(8):checked ~ .tab-nav > .tab-label:nth-of-type(8),
.tab-radio:nth-of-type(9):checked ~ .tab-nav > .tab-label:nth-of-type(9),
.tab-radio:nth-of-type(10):checked ~ .tab-nav > .tab-label:nth-of-type(10) {
  border-bottom-color: var(--bf-primary);
  color: var(--bf-primary);
}
.tab-radio:nth-of-type(1):checked ~ .tab-nav.tabs-pill > .tab-label:nth-of-type(1),
.tab-radio:nth-of-type(2):checked ~ .tab-nav.tabs-pill > .tab-label:nth-of-type(2),
.tab-radio:nth-of-type(3):checked ~ .tab-nav.tabs-pill > .tab-label:nth-of-type(3),
.tab-radio:nth-of-type(4):checked ~ .tab-nav.tabs-pill > .tab-label:nth-of-type(4),
.tab-radio:nth-of-type(5):checked ~ .tab-nav.tabs-pill > .tab-label:nth-of-type(5),
.tab-radio:nth-of-type(6):checked ~ .tab-nav.tabs-pill > .tab-label:nth-of-type(6),
.tab-radio:nth-of-type(7):checked ~ .tab-nav.tabs-pill > .tab-label:nth-of-type(7),
.tab-radio:nth-of-type(8):checked ~ .tab-nav.tabs-pill > .tab-label:nth-of-type(8),
.tab-radio:nth-of-type(9):checked ~ .tab-nav.tabs-pill > .tab-label:nth-of-type(9),
.tab-radio:nth-of-type(10):checked ~ .tab-nav.tabs-pill > .tab-label:nth-of-type(10) {
  background: var(--bf-surface);
  border-bottom-color: transparent;
  box-shadow: var(--bf-shadow);
  color: var(--bf-heading);
}
.tab-radio:nth-of-type(1):checked ~ .tab-nav.tabs-boxed > .tab-label:nth-of-type(1),
.tab-radio:nth-of-type(2):checked ~ .tab-nav.tabs-boxed > .tab-label:nth-of-type(2),
.tab-radio:nth-of-type(3):checked ~ .tab-nav.tabs-boxed > .tab-label:nth-of-type(3),
.tab-radio:nth-of-type(4):checked ~ .tab-nav.tabs-boxed > .tab-label:nth-of-type(4),
.tab-radio:nth-of-type(5):checked ~ .tab-nav.tabs-boxed > .tab-label:nth-of-type(5),
.tab-radio:nth-of-type(6):checked ~ .tab-nav.tabs-boxed > .tab-label:nth-of-type(6),
.tab-radio:nth-of-type(7):checked ~ .tab-nav.tabs-boxed > .tab-label:nth-of-type(7),
.tab-radio:nth-of-type(8):checked ~ .tab-nav.tabs-boxed > .tab-label:nth-of-type(8),
.tab-radio:nth-of-type(9):checked ~ .tab-nav.tabs-boxed > .tab-label:nth-of-type(9),
.tab-radio:nth-of-type(10):checked ~ .tab-nav.tabs-boxed > .tab-label:nth-of-type(10) {
  background: var(--bf-surface);
  border-bottom-color: var(--bf-surface);
  color: var(--bf-primary);
}
.tab-radio:nth-of-type(1):checked ~ .tab-content > .tab-item:nth-of-type(1),
.tab-radio:nth-of-type(2):checked ~ .tab-content > .tab-item:nth-of-type(2),
.tab-radio:nth-of-type(3):checked ~ .tab-content > .tab-item:nth-of-type(3),
.tab-radio:nth-of-type(4):checked ~ .tab-content > .tab-item:nth-of-type(4),
.tab-radio:nth-of-type(5):checked ~ .tab-content > .tab-item:nth-of-type(5),
.tab-radio:nth-of-type(6):checked ~ .tab-content > .tab-item:nth-of-type(6),
.tab-radio:nth-of-type(7):checked ~ .tab-content > .tab-item:nth-of-type(7),
.tab-radio:nth-of-type(8):checked ~ .tab-content > .tab-item:nth-of-type(8),
.tab-radio:nth-of-type(9):checked ~ .tab-content > .tab-item:nth-of-type(9),
.tab-radio:nth-of-type(10):checked ~ .tab-content > .tab-item:nth-of-type(10) {
  animation: bf-fade-in 0.2s ease-in;
  display: block;
}
.tab-radio:nth-of-type(1):checked ~ .tab-nav > .tab-label:nth-of-type(1),
.tab-radio:nth-of-type(2):checked ~ .tab-nav > .tab-label:nth-of-type(2),
.tab-radio:nth-of-type(3):checked ~ .tab-nav > .tab-label:nth-of-type(3),
.tab-radio:nth-of-type(4):checked ~ .tab-nav > .tab-label:nth-of-type(4),
.tab-radio:nth-of-type(5):checked ~ .tab-nav > .tab-label:nth-of-type(5),
.tab-radio:nth-of-type(6):checked ~ .tab-nav > .tab-label:nth-of-type(6),
.tab-radio:nth-of-type(7):checked ~ .tab-nav > .tab-label:nth-of-type(7),
.tab-radio:nth-of-type(8):checked ~ .tab-nav > .tab-label:nth-of-type(8),
.tab-radio:nth-of-type(9):checked ~ .tab-nav > .tab-label:nth-of-type(9),
.tab-radio:nth-of-type(10):checked ~ .tab-nav > .tab-label:nth-of-type(10) {
  cursor: default;
}
.tab-radio:nth-of-type(1):focus-visible ~ .tab-nav > .tab-label:nth-of-type(1),
.tab-radio:nth-of-type(2):focus-visible ~ .tab-nav > .tab-label:nth-of-type(2),
.tab-radio:nth-of-type(3):focus-visible ~ .tab-nav > .tab-label:nth-of-type(3),
.tab-radio:nth-of-type(4):focus-visible ~ .tab-nav > .tab-label:nth-of-type(4),
.tab-radio:nth-of-type(5):focus-visible ~ .tab-nav > .tab-label:nth-of-type(5),
.tab-radio:nth-of-type(6):focus-visible ~ .tab-nav > .tab-label:nth-of-type(6),
.tab-radio:nth-of-type(7):focus-visible ~ .tab-nav > .tab-label:nth-of-type(7),
.tab-radio:nth-of-type(8):focus-visible ~ .tab-nav > .tab-label:nth-of-type(8),
.tab-radio:nth-of-type(9):focus-visible ~ .tab-nav > .tab-label:nth-of-type(9),
.tab-radio:nth-of-type(10):focus-visible ~ .tab-nav > .tab-label:nth-of-type(10) {
  outline: 2px solid var(--bf-primary);
  outline-offset: -2px;
}
/* Legacy Responsee classes, if you set state server-side */
.tab-item.tab-active { display: block; }
.tab-label.active-btn {
  border-bottom-color: var(--bf-primary);
  color: var(--bf-primary);
  cursor: default;
}
@keyframes bf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media screen and (max-width: 768px) {
  /* Let the tab strip scroll sideways rather than stacking into a wall
     of full-width blocks. */
  .tab-nav {
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav.tabs-pill { display: flex; }
  .tab-label { flex: 0 0 auto; }
}

/* ==========================================================================
   3. ACCORDION
   Native <details> - no JS, keyboard accessible for free. Give every
   <details> in a group the same `name` attribute to make it exclusive.

   <div class="accordion">
     <details class="accordion-section" name="faq" open>
       <summary class="accordion-title">How long does fitting take?</summary>
       <div class="accordion-content">...</div>
     </details>
   </div>
   ========================================================================== */
.accordion { margin-bottom: var(--bf-gutter2x); }
.accordion-section { margin: 5px 0; }
.accordion-section:first-child { margin-top: 0; }
.accordion-section:last-child { margin-bottom: 0; }
.accordion-title {
  background: var(--bf-surface-sunken);
  border-radius: var(--bf-radius);
  color: var(--bf-heading);
  cursor: pointer;
  display: block;
  font-size: 1.1rem;
  list-style: none;
  padding: 15px;
  position: relative;
  transition: background var(--bf-transition) 0s;
  user-select: none;
}
.accordion-title::-webkit-details-marker { display: none; }
.accordion-title::marker { content: ""; }
.accordion-title:hover { background: var(--bf-border); }
/* Chevron marker, drawn with borders */
.accordion-title::before {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  display: inline-block;
  height: 0.4em;
  margin: -0.2em 0.65em 0 0.1em;
  transform: rotate(45deg);
  transition: transform 0.2s ease-in-out;
  vertical-align: middle;
  width: 0.4em;
}
.accordion-section[open] > .accordion-title::before {
  transform: rotate(225deg) translate(-0.15em, -0.15em);
}
.accordion-section[open] > .accordion-title {
  background: var(--bf-primary);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color: var(--bf-text-invert);
}
.accordion-content {
  border: 1px solid var(--bf-border-light);
  border-top: 0;
  padding: 15px;
}
.accordion-section[open] > .accordion-content {
  animation: bf-accordion-open 0.2s ease-out;
}
@keyframes bf-accordion-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Legacy class support */
.active-accordion-section > .accordion-content { display: block; }

/* ==========================================================================
   4. MODAL
   :target driven. Markup:

   <a href="#quote-modal" class="modal-button button">Get a quote</a>

   <div class="modal-wrap" id="quote-modal">
     <a href="#" class="modal-close" aria-label="Close"></a>
     <div class="modal-content">
       <div class="modal">
         <a href="#" class="modal-close-icon" aria-label="Close"></a>
         ...
       </div>
     </div>
   </div>
   ========================================================================== */
.modal-wrap {
  background: var(--bf-scrim);
  bottom: 0;
  display: none;
  left: 0;
  overflow-y: auto;
  padding: 20px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
}
.modal-wrap:target {
  animation: bf-fade-in 0.2s ease-in;
  display: block;
}
/* Scroll-lock the page behind an open modal - replaces the old
   JS-applied body.modal-active class. */
body:has(.modal-wrap:target) { overflow: hidden; }
body.modal-active { overflow: hidden !important; }
.modal-close {
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}
.modal-content {
  clear: left;
  margin: 0 auto;
  max-width: 1140px;
  position: relative;
  width: 100%;
  z-index: 2;
}
.modal-content::after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}
.modal {
  background: var(--bf-surface);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-lg);
  height: auto;
  padding: 2rem;
  position: relative;
  width: 100%;
}
.modal.active-modal { display: block; }
.modal-button, .modal-close-button { cursor: pointer; }
.modal-close-icon {
  cursor: pointer;
  height: 32px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 32px;
  z-index: 3;
}
/* Cross drawn with two rotated bars */
.modal-close-icon::before,
.modal-close-icon::after {
  background: var(--bf-text-muted);
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  transition: background var(--bf-transition) 0s;
  width: 16px;
}
.modal-close-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close-icon::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-close-icon:hover::before,
.modal-close-icon:hover::after { background: var(--bf-danger); }

@media screen and (max-width: 768px) {
  .modal { padding: 1.5rem 1rem; }
  .modal-wrap { padding: 10px; }
}

/* ==========================================================================
   5. TOOLTIP
   Pre-positioned with transforms so no JS measurement is needed.

   <span class="tooltip-container">Underlay
     <span class="tooltip-content">The cushioning layer beneath.</span>
   </span>
   ========================================================================== */
.tooltip-container {
  border-bottom: 1px dotted currentColor;
  cursor: help;
  font-weight: 600;
  position: relative;
}
.tooltip-content {
  background: var(--bf-dark);
  border-radius: 3px;
  bottom: 100%;
  color: var(--bf-text-invert) !important;
  font-size: 0.8rem;
  font-weight: normal;
  left: 50%;
  line-height: 1.3rem;
  margin-bottom: 10px;
  opacity: 0;
  padding: 0.625rem;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity var(--bf-transition) 0s, visibility var(--bf-transition) 0s;
  visibility: hidden;
  width: max-content;
  max-width: 300px;
  z-index: 10;
}
.tooltip-container:hover > .tooltip-content,
.tooltip-container:focus-within > .tooltip-content {
  opacity: 1;
  visibility: visible;
}
.tooltip-content::after {
  border: 7px solid transparent;
  border-top-color: var(--bf-dark);
  bottom: -14px;
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
}
/* Bottom variant */
.tooltip-content.tooltip-bottom {
  bottom: auto;
  margin-bottom: 0;
  margin-top: 10px;
  top: 100%;
}
.tooltip-content.tooltip-bottom::after {
  border-bottom-color: var(--bf-dark);
  border-top-color: transparent;
  bottom: auto;
  top: -14px;
}

/* ==========================================================================
   6. CUSTOM FORMS
   Add class="customform" to the <form>.
   ========================================================================== */
form.customform input,
form.customform select,
form.customform textarea,
form.customform button {
  font-family: inherit;
  font-size: 0.9rem;
  margin-bottom: var(--bf-gutter2x);
}
form.customform label {
  color: var(--bf-heading);
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
form.customform input,
form.customform textarea,
form.customform select {
  background: var(--bf-surface-alt);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  color: var(--bf-text);
  padding: 0.625rem;
  transition: background var(--bf-transition) 0s,
              border-color var(--bf-transition) 0s;
  width: 100%;
}
form.customform input,
form.customform select { height: 2.7rem; }
form.customform textarea {
  min-height: 8rem;
  resize: vertical;
}
form.customform input:hover,
form.customform textarea:hover,
form.customform select:hover {
  background: var(--bf-surface);
}
form.customform input:focus,
form.customform textarea:focus,
form.customform select:focus {
  background: var(--bf-surface);
  border-color: var(--bf-primary);
  box-shadow: 0 0 0 3px var(--bf-primary-ring);
  outline: 0;
}
form.customform input::placeholder,
form.customform textarea::placeholder { color: var(--bf-text-muted); }
form.customform input[type="file"] {
  height: auto;
  max-height: 2.7rem;
  min-height: 2.7rem;
  padding: 0.4rem;
}
form.customform input[type="radio"],
form.customform input[type="checkbox"] {
  accent-color: var(--bf-primary);
  height: auto;
  margin-bottom: 0;
  margin-right: var(--bf-gutter);
  padding: 0;
  vertical-align: middle;
  width: auto;
}
form.customform input[type="radio"] + label,
form.customform input[type="checkbox"] + label {
  display: inline-block;
  font-weight: normal;
  margin-bottom: 0;
}
form.customform input[type="range"] {
  accent-color: var(--bf-primary);
  background: none;
  border: 0;
  height: auto;
  padding: 0;
}
form.customform option { padding: var(--bf-gutter); }
form.customform select[multiple="multiple"] { height: auto; }
form.customform button,
form.customform input[type="submit"] {
  background: var(--bf-primary);
  border: 0 none;
  border-radius: var(--bf-radius);
  color: var(--bf-text-invert);
  cursor: pointer;
  height: 2.7rem;
  padding: var(--bf-gutter);
  transition: background var(--bf-transition) 0s;
  width: 100%;
}
form.customform button:hover,
form.customform input[type="submit"]:hover {
  background: var(--bf-primary-hover);
}
form.customform fieldset {
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  margin-bottom: var(--bf-gutter2x);
  padding: var(--bf-gutter2x);
}
form.customform legend {
  color: var(--bf-heading);
  font-weight: 600;
  padding: 0 0.5rem;
}
form.customform .form-hint {
  color: var(--bf-text-muted);
  display: block;
  font-size: 0.75rem;
  margin: -0.9rem 0 var(--bf-gutter2x);
}
/* Native validation styling, only after the field has been touched */
form.customform input:not(:placeholder-shown):invalid,
form.customform textarea:not(:placeholder-shown):invalid {
  border-color: var(--bf-danger);
}
form.customform .required::after {
  color: var(--bf-danger);
  content: " *";
}

/* ==========================================================================
   7. TIMELINE
   ========================================================================== */
.timeline-container {
  margin: 0 auto;
  padding: 20px 0;
  position: relative;
  width: 100%;
}
.timeline-container::before {
  background: var(--bf-border);
  content: "";
  height: 100%;
  left: 18px;
  position: absolute;
  top: 0;
  width: 4px;
}
.timeline-block {
  clear: both;
  margin: 2rem 0;
  position: relative;
}
.timeline-block::after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}
.timeline-block:first-child { margin-top: 0; }
.timeline-block:last-child  { margin-bottom: 0; }
.timeline-icon {
  background: var(--bf-primary);
  border-radius: 50%;
  height: 40px;
  left: 0;
  line-height: 40px;
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: 0;
  width: 40px;
}
.timeline-icon i,
.timeline-icon span {
  color: var(--bf-text-invert);
  font-size: 1rem;
}
.timeline-icon img {
  min-height: 100%;
  min-width: 100%;
  top: 0;
  width: auto;
}
.timeline-content {
  background: var(--bf-surface-alt);
  border-radius: var(--bf-radius);
  margin-left: 60px;
  padding: 1em;
  position: relative;
  text-align: left;
}
.timeline-content::after {
  clear: both;
  content: "";
  display: table;
}
.timeline-content::before {
  border: 11px solid transparent;
  border-right: 11px solid var(--bf-surface-alt);
  content: "";
  height: 0;
  position: absolute;
  right: 100%;
  top: 16px;
  width: 0;
}
.timeline-content .timeline-date {
  color: var(--bf-heading);
  display: inline-block;
  float: left;
  font-size: 1.5rem;
}

@media only screen and (min-width: 1141px) {
  .timeline-container::before {
    left: 50%;
    margin-left: -2px;
  }
  .timeline-block { margin: 4em 0; }
  .timeline-block:first-child { margin-top: 0; }
  .timeline-block:last-child  { margin-bottom: 0; }
  .timeline-icon {
    height: 60px;
    left: 50%;
    line-height: 60px;
    margin-left: -30px;
    width: 60px;
  }
  .timeline-icon i,
  .timeline-icon span { font-size: 2rem; }
  .timeline-content {
    margin-left: 0;
    padding: 15px;
    text-align: right;
    width: 45%;
  }
  .timeline-content .timeline-date {
    left: 121%;
    position: absolute;
    text-align: left;
    top: 0;
    width: 100%;
  }
  .timeline-content::before {
    border-left: 11px solid var(--bf-surface-alt);
    border-right: 0;
    left: 100%;
  }
  .timeline-block:nth-child(even) .timeline-content {
    float: right;
    text-align: left;
  }
  .timeline-block:nth-child(even) .timeline-content::before {
    border-color: transparent;
    border-right: 11px solid var(--bf-surface-alt);
    left: auto;
    right: 100%;
    top: 24px;
  }
  .timeline-block:nth-child(even) .timeline-content .timeline-date {
    left: auto;
    right: 121%;
    text-align: right;
  }
}

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.card {
  background: var(--bf-surface);
  border-radius: var(--bf-radius-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: box-shadow var(--bf-transition) 0s,
              transform var(--bf-transition) 0s;
}
.card.card-hover:hover {
  box-shadow: var(--bf-shadow-lg);
  transform: translateY(-3px);
}
.card-media {
  margin: 0;
  overflow: hidden;
  position: relative;
}
.card-media img {
  transition: transform 0.35s ease-out;
  width: 100%;
}
.card.card-hover:hover .card-media img { transform: scale(1.05); }
.card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--bf-gutter2x);
}
.card-title {
  color: var(--bf-heading);
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}
.card-text { flex: 1 1 auto; }
.card-footer {
  border-top: 1px solid var(--bf-border-light);
  margin-top: var(--bf-gutter2x);
  padding-top: var(--bf-gutter);
}
.card-price {
  color: var(--bf-primary);
  font-size: 1.4rem;
  font-weight: 700;
}
.card-price small {
  color: var(--bf-text-muted);
  font-weight: normal;
}

/* ==========================================================================
   8b. CAROUSEL / SLIDER
   Replaces the Owl Carousel jQuery plugin with native scroll-snap. Swipe on
   touch, drag or shift-scroll on desktop, and the dots are plain anchors
   that rely on `scroll-behavior: smooth`.

   <div class="carousel">
     <div class="carousel-track">
       <div class="carousel-item" id="slide-1">...</div>
       <div class="carousel-item" id="slide-2">...</div>
     </div>
     <div class="carousel-dots">
       <a href="#slide-1" aria-label="Slide 1"></a>
       <a href="#slide-2" aria-label="Slide 2"></a>
     </div>
   </div>

   Add .carousel-2up / .carousel-3up / .carousel-4up to the track to show
   several items at once (always 1-up below 768px).
   ========================================================================== */
.carousel { position: relative; width: 100%; }
.carousel-track {
  -ms-overflow-style: none;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.carousel-track.carousel-2up .carousel-item { flex-basis: 50%; }
.carousel-track.carousel-3up .carousel-item { flex-basis: 33.3333%; }
.carousel-track.carousel-4up .carousel-item { flex-basis: 25%; }
.carousel-track.carousel-gap { gap: var(--bf-gutter2x); }
.carousel-item img { width: 100%; }

.carousel-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: var(--bf-gutter2x) 0 0;
}
.carousel-dots a {
  background: var(--bf-border);
  border-radius: 100px;
  display: block;
  height: 10px;
  transition: background var(--bf-transition) 0s, width var(--bf-transition) 0s;
  width: 10px;
}
.carousel-dots a:hover,
.carousel-dots a:focus-visible { background: var(--bf-primary); }
/* Highlight the dot pointing at the slide currently targeted */
.carousel:has(#slide-1:target) .carousel-dots a[href="#slide-1"],
.carousel:has(#slide-2:target) .carousel-dots a[href="#slide-2"],
.carousel:has(#slide-3:target) .carousel-dots a[href="#slide-3"],
.carousel:has(#slide-4:target) .carousel-dots a[href="#slide-4"],
.carousel:has(#slide-5:target) .carousel-dots a[href="#slide-5"],
.carousel:has(#slide-6:target) .carousel-dots a[href="#slide-6"] {
  background: var(--bf-primary);
  width: 26px;
}
/* Dots on a dark/overlaid hero */
.carousel-dots.dots-light a { background: rgb(255 255 255 / 0.4); }
.carousel-dots.dots-light a:hover { background: var(--bf-text-invert); }

@media screen and (max-width: 768px) {
  .carousel-track.carousel-2up .carousel-item,
  .carousel-track.carousel-3up .carousel-item,
  .carousel-track.carousel-4up .carousel-item { flex-basis: 100%; }
}

/* ==========================================================================
   9. ALERTS + BADGES
   ========================================================================== */
.alert {
  border-left: 4px solid var(--bf-dark-light);
  border-radius: var(--bf-radius);
  background: var(--bf-surface-alt);
  font-size: 0.85rem;
  margin-bottom: var(--bf-gutter2x);
  padding: var(--bf-gutter2x);
}
.alert.alert-success { border-left-color: var(--bf-success); }
.alert.alert-warning { border-left-color: var(--bf-warning); }
.alert.alert-danger  { border-left-color: var(--bf-danger); }
.alert.alert-info {
  background: var(--bf-primary-soft);
  border-left-color: var(--bf-primary);
}
.alert-title {
  color: var(--bf-heading);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.badge {
  background: var(--bf-surface-sunken);
  border-radius: 100px;
  color: var(--bf-heading);
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.35rem 0.7rem;
  text-transform: uppercase;
  vertical-align: middle;
}
.badge.badge-primary { background: var(--bf-primary); color: var(--bf-text-invert); }
.badge.badge-dark    { background: var(--bf-dark);    color: var(--bf-text-invert); }
.badge.badge-success { background: var(--bf-success); color: var(--bf-text-invert); }
.badge.badge-danger  { background: var(--bf-danger);  color: var(--bf-text-invert); }

/* ==========================================================================
   10. PROGRESS + METERS
   ========================================================================== */
.progress {
  background: var(--bf-surface-sunken);
  border-radius: 100px;
  height: 8px;
  overflow: hidden;
  width: 100%;
}
.progress-bar {
  background: var(--bf-primary);
  border-radius: 100px;
  display: block;
  height: 100%;
  transition: width 0.3s ease-out;
}
.stat {
  text-align: center;
}
.stat-value {
  color: var(--bf-primary);
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
}
.stat-label {
  color: var(--bf-text-muted);
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   11. PAGINATION
   ========================================================================== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
}
.pagination a,
.pagination span {
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  color: var(--bf-text);
  display: block;
  font-size: 0.85rem;
  min-width: 2.2rem;
  padding: 0.5rem 0.75rem;
  text-align: center;
}
.pagination a:hover {
  background: var(--bf-surface-alt);
  border-color: var(--bf-primary);
  color: var(--bf-primary);
}
.pagination .active-item a,
.pagination .active-item span {
  background: var(--bf-primary);
  border-color: var(--bf-primary);
  color: var(--bf-text-invert);
}

/* ==========================================================================
   12. SECTION + HERO HELPERS
   ========================================================================== */
.section { padding: 4rem 0; }
.section.section-tight { padding: 2rem 0; }
.section.section-loose { padding: 6rem 0; }
.section-title {
  margin-bottom: 2.5rem;
  text-align: center;
}
.section-title h2 { margin-bottom: 0.5rem; }
.section-title p {
  color: var(--bf-text-muted);
  font-size: 1rem;
  margin: 0 auto;
  max-width: 44rem;
}
.section-eyebrow {
  color: var(--bf-primary);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.hero {
  align-items: center;
  background-color: var(--bf-dark);
  background-position: center;
  background-size: cover;
  display: flex;
  min-height: 70vh;
  position: relative;
}
.hero.hero-short { min-height: 42vh; }
.hero > * { position: relative; z-index: 2; width: 100%; }
.hero-overlay::before {
  background: linear-gradient(
    to right,
    rgb(var(--bf-dark-rgb) / 0.82) 0%,
    rgb(var(--bf-dark-rgb) / 0.45) 100%
  );
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.hero h1, .hero h2, .hero p { color: var(--bf-text-invert); }
.hero p { font-size: 1rem; max-width: 36rem; }

/* Media panel that fills its column edge-to-edge */
.media-panel {
  min-height: 24rem;
  background-position: center;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .section { padding: 2.5rem 0; }
  .section.section-loose { padding: 3rem 0; }
  .hero { min-height: 60vh; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.4rem; }
}

/* ==========================================================================
   13. COLOUR + BACKGROUND UTILITIES
   ========================================================================== */
.bg-dark    { background: var(--bf-dark); }
.bg-dark-mid{ background: var(--bf-dark-mid); }
.bg-primary { background: var(--bf-primary); }
.bg-accent  { background: var(--bf-accent); }
.bg-white   { background: var(--bf-surface); }
.bg-light   { background: var(--bf-surface-alt); }
.bg-sunken  { background: var(--bf-surface-sunken); }

.bg-dark, .bg-dark-mid, .bg-primary, .bg-accent {
  color: var(--bf-text-invert);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark-mid h1, .bg-dark-mid h2, .bg-dark-mid h3,
.bg-dark-mid h4, .bg-dark-mid h5, .bg-dark-mid h6,
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-accent h1, .bg-accent h2, .bg-accent h3,
.bg-accent h4, .bg-accent h5, .bg-accent h6 {
  color: var(--bf-text-invert);
}
.text-primary { color: var(--bf-primary) !important; }
.text-accent  { color: var(--bf-accent) !important; }
.text-dark    { color: var(--bf-heading) !important; }
.text-muted   { color: var(--bf-text-muted) !important; }
.text-white   { color: var(--bf-text-invert) !important; }
.text-upper   { letter-spacing: 0.06em; text-transform: uppercase; }
.text-bold    { font-weight: 700; }

.rounded      { border-radius: var(--bf-radius); }
.rounded-lg   { border-radius: var(--bf-radius-lg); }
.rounded-full { border-radius: 100px; }
.shadow       { box-shadow: var(--bf-shadow); }
.shadow-lg    { box-shadow: var(--bf-shadow-lg); }
.bordered     { border: 1px solid var(--bf-border); }
.border-top   { border-top: 1px solid var(--bf-border); }
.border-bottom{ border-bottom: 1px solid var(--bf-border); }

/* ==========================================================================
   14. PRINT
   ========================================================================== */
@media print {
  /* Print ink values, not site colours. */
  body { background: white; color: black; }
  nav, .top-nav, .nav-text, .slide-nav, .slide-nav-button,
  .modal-wrap, .button { display: none !important; }
  .box, .card { border: 1px solid silver; box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.7rem; }
}