/*
 * BWD Media Static Site – Global Styles
 *
 * This stylesheet implements a simple design system based on a 4‑point
 * spacing scale, fluid typography and a limited colour palette. The
 * variables defined on :root allow easy theming without editing
 * individual rules. All CSS in this project is hand authored and
 * commented to facilitate maintenance. See README.md for a summary of
 * design tokens and spacing conventions.
 *
 * MIT Licensed
 */

/* CSS Reset and Box Model */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Base font size uses clamp to scale between 16px and 20px
     depending on viewport width. */
  font-size: clamp(16px, 1vw + 1rem, 20px);
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Prevent horizontal scrolling on the entire page. By setting overflow-x to
   hidden on both html and body elements we ensure no child element can
   create an unintended horizontal scrollbar. */
html,
body {
  overflow-x: hidden;
}

/* Ensure images, iframes and slide‑out forms do not exceed the viewport
   width. This prevents unexpected horizontal scrolling when content
   includes wide media elements or when the enquiry panel is open on
   mobile. */
img,
iframe,
.slide-out-form {
  max-width: 100%;
}

/* Design Tokens */
:root {
  /* Colour palette derived from the existing brand: dark backgrounds
     with bright blue accents. All values meet WCAG 2.2 AA contrast
     ratios. */
  /* Updated colour palette inspired by allblacks.com – predominantly black with white text and subtle grey highlights */
  --color-background: #000000;
  --color-surface: #0a0a0a;
  --color-primary: #ffffff; /* use white for primary buttons/text */
  --color-primary-hover: #cccccc; /* slightly darker grey on hover to maintain legibility against white text */
  --color-secondary: #e6e6e6; /* secondary highlights */
  --color-text: #ffffff;
  --color-muted: #888888;
  --color-border: #333333;
  --color-error: #dc3545;
  --color-success: #198754;

  /* Spacing scale – multiples of 4px for consistent rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Container widths */
  --container-max: 1200px;
  --container-pad: var(--space-4);
}

/* Utility classes */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw + 1rem, 2.25rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw + 1rem, 1.75rem);
}

p,
ul,
ol {
  margin-bottom: var(--space-4);
  /* Allow long URLs or unbroken strings to wrap to avoid causing
     horizontal overflow on narrow screens.  The `anywhere` value
     means words may break at arbitrary points if necessary. */
  overflow-wrap: anywhere;
}

/* Ensure list items and headings can break long words gracefully on
   small devices.  Without this, unbroken URLs or email addresses may
   force the layout wider than the viewport. */
h1, h2, h3, h4, h5, h6, li {
  overflow-wrap: anywhere;
}

ul,
ol {
  padding-left: var(--space-6);
}

/*
 * Links
 *
 * All hyperlinks are underlined by default to ensure they remain
 * distinguishable without relying on colour alone.  Hover and
 * focus states retain the underline while shifting colour to the
 * primary hover shade.  This change improves accessibility for
 * users with colour vision deficiencies.
 */
a {
  color: var(--color-secondary);
  text-decoration: underline;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Skip link for improved accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 100;
  transition: top 0.3s ease;
  border-radius: 4px;
}

.skip-link:focus {
  top: var(--space-2);
}

/* Header */
.site-header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
}

.site-header .logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Navigation */
#nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-text);
  cursor: pointer;
}

nav#primary-navigation {
  display: flex;
}

nav#primary-navigation ul {
  list-style: none;
  display: flex;
  /* Increase gap between main navigation items for improved
     separation and easier tap targets */
  gap: 2rem;
}

nav#primary-navigation li {
  position: relative;
}

/* Prevent the top‑level navigation links (Home, Build, Grow, etc.) from
   breaking across multiple lines.  This keeps compound names such as
   “Case Studies” on a single line. */
nav#primary-navigation > ul > li > a {
  white-space: nowrap;
}

nav#primary-navigation li a {
  color: var(--color-text);
  font-weight: 500;
  padding: var(--space-2) 0;
}

nav#primary-navigation li a:hover,
nav#primary-navigation li a:focus {
  color: var(--color-primary);
}

/* Submenu */
nav#primary-navigation li .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-3);
  /* Provide enough width for long service names while allowing
     multi‑line wrapping.  A maximum width prevents the menu from
     stretching too wide on large screens. */
  min-width: 260px;
  max-width: 320px;
  white-space: normal;
  line-height: 1.4;
  z-index: 10;
}

nav#primary-navigation li:hover .submenu,
nav#primary-navigation li:focus-within .submenu {
  display: block;
}

nav#primary-navigation .submenu li {
  margin-bottom: var(--space-3);
  display: block;
}

nav#primary-navigation .submenu li a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-secondary);
  font-weight: 500;
  white-space: normal;
  line-height: 1.4;
}
nav#primary-navigation .submenu li a:hover,
nav#primary-navigation .submenu li a:focus {
  color: var(--color-primary);
  background-color: var(--color-border);
}

nav#primary-navigation .submenu li:last-child {
  margin-bottom: 0;
}

/* Mobile navigation */
@media (max-width: 768px) {
  #nav-toggle {
    display: block;
  }
  nav#primary-navigation {
    /* Hide the menu by default on mobile.  It will become a full‑screen overlay when opened. */
    display: none;
    flex-direction: column;
    padding: var(--space-4) 0;
  }
    /* When the menu is open, transform it into a full‑screen overlay that slides over
       the page content.  Use a high z‑index to ensure it sits above all other
       elements and allow vertical scrolling if the menu is long. */
    nav#primary-navigation.open {
      display: flex;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      overflow-y: auto;
      background-color: var(--color-surface);
      padding: var(--space-8) var(--space-6);
      /* Raise the z-index substantially so the mobile navigation overlay sits
         above all other interactive elements such as slide‑out forms,
         floating buttons and font‑size controls. This solves issues on
         service detail pages where menu links were unclickable on mobile
         because the overlay was rendered underneath other elements. */
      z-index: 9999;
      /* Ensure the mobile navigation overlay receives pointer events.  Without
         this explicit property some overlapping elements could steal the
         click/touch events, leaving the menu links unresponsive on
         certain pages. */
      pointer-events: auto;
    }
    nav#primary-navigation ul {
      flex-direction: column;
      gap: var(--space-6);
    }
    nav#primary-navigation.open li {
      margin-bottom: var(--space-6);
    }
    nav#primary-navigation .submenu {
      /* Ensure submenus stack underneath their parent links within the overlay */
      position: static;
      border: none;
      padding-left: var(--space-4);
      margin-top: var(--space-2);
    }
    nav#primary-navigation.open .submenu li {
      margin-bottom: var(--space-4);
    }

    /* Hide the search bar and text‑to‑speech button when the mobile
       navigation overlay is open.  This prevents the input and
       additional controls from overlapping the menu items and keeps
       the focus on navigation. */
    nav#primary-navigation.open ~ .search-form,
    nav#primary-navigation.open ~ .tts-button {
      display: none !important;
    }
}

/* Hero section */
.hero {
  position: relative;
  background-color: var(--color-surface);
  background-image: url('../media/hero-bg.png');
  background-size: cover;
  background-position: center;
  color: var(--color-text);
  padding: var(--space-16) 0;
  text-align: center;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
  z-index: 0;
}

.hero .hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hero h1 {
  margin-bottom: var(--space-4);
}

.hero p {
  margin-bottom: var(--space-6);
}

/* Buttons */
.btn-primary {
  display: inline-block;
  background-color: var(--color-primary);
  color: #000;
  padding: var(--space-3) var(--space-6);
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-hover);
  color: #000;
}

/* Secondary button style for less prominent calls to action */
.btn-secondary {
  display: inline-block;
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  padding: var(--space-3) var(--space-6);
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-primary);
  color: #000;
}

/* Container for dual header call‑to‑action buttons */
.header-ctas {
  margin-left: auto;
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* Cookie consent banner styles */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-dark);
  color: var(--color-light);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  font-size: 0.875rem;
}
.cookie-banner a {
  color: var(--color-primary);
  text-decoration: underline;
}
.cookie-banner button {
  margin-top: var(--space-2);
}

/* Intent popup overlay and modal */
.intent-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.intent-popup-modal {
  background: var(--color-surface);
  padding: var(--space-6);
  max-width: 420px;
  width: 90%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.intent-popup-modal h2 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-size: 1.5rem;
}
.intent-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.intent-options button {
  padding: var(--space-3);
  background: var(--color-primary);
  border: none;
  color: #000;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}
.intent-options button:hover,
.intent-options button:focus {
  background: var(--color-primary-hover);
}
.intent-popup-modal .intent-close {
  display: block;
  margin: 0 auto;
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/*
 * Slide‑out enquiry form
 *
 * The slide‑out form is used on service pages for quick enquiries.
 * It sits fixed on the right edge of the viewport and can be
 * toggled into view by a floating button.  An overlay darkens the
 * background when the form is open to draw focus and trap click
 * events.  Focus styles are inherited from global button rules.
 */
.slide-out-form {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 420px;
  background-color: var(--color-surface);
  padding: var(--space-6);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  z-index: 200;
}

.slide-out-form.open {
  transform: translateX(0);
}

.slide-out-form h2 {
  margin-top: 0;
  color: var(--color-primary);
}

.form-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 150;
}

.form-overlay.open {
  visibility: visible;
  opacity: 1;
}

/*
 * Font size controls
 *
 * A pair of floating buttons allow users to increase or decrease
 * the site’s base font size.  They are fixed to the bottom‑right of
 * the viewport and have clear focus outlines.  These controls
 * respect browser zoom and are purely additive for users who need
 * additional text enlargement.
 */
.font-size-controls {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 300;
}

.font-size-controls button {
  background-color: var(--color-primary);
  color: #000;
  border: none;
  padding: var(--space-2) var(--space-3);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.font-size-controls button:focus {
  outline: 2px dashed var(--color-primary);
  outline-offset: 2px;
}

/* Increase touch target size for font size controls. On all devices these
   buttons should be at least 44×44 px to meet mobile accessibility
   guidelines. We enlarge the padding and ensure a minimum width and
   height so the controls are easy to tap without overlapping each
   other. */
.font-size-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-3);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
 * SEO audit modal
 *
 * The audit modal is a centred dialog used on the SEO & SEM page to collect
 * a visitor’s website URL and email address. It uses a fixed overlay to
 * darken the background and a card‑like modal for the form.  The design
 * follows the same aesthetic as the slide‑out enquiry form and respects
 * mobile breakpoints by capping the width to the viewport.  When the
 * `.open` class is added via JavaScript, the elements become visible.
 */
.seo-audit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 300;
}
.seo-audit-overlay.open {
  visibility: visible;
  opacity: 1;
}
.seo-audit-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background-color: var(--color-surface);
  color: var(--color-text);
  max-width: 500px;
  width: 90%;
  padding: var(--space-6);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 350;
}
.seo-audit-modal.open {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.seo-audit-modal h2 {
  margin-top: 0;
  color: var(--color-primary);
}
.seo-audit-modal .form-group {
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
}
.seo-audit-modal label {
  margin-bottom: var(--space-2);
  font-weight: 600;
}
.seo-audit-modal input {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-3);
  border-radius: 4px;
}
.seo-audit-modal .error-message {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: var(--space-1);
}
.seo-audit-modal .btn-primary,
.seo-audit-modal .btn-secondary {
  margin-top: var(--space-3);
}
.seo-audit-modal .btn-secondary {
  background-color: var(--color-border);
  color: var(--color-text);
}

/*
 * Chamber of Commerce membership logo
 *
 * We size the logo modestly within the trust cues area and allow
 * responsive scaling by setting only the max‑width.  It inherits
 * height automatically.
 */
.trust-cues .chamber-logo {
  max-width: 160px;
  height: auto;
  margin: var(--space-2) 0;
}

/* Trust cues images: unify height for badges/logos so they align neatly.
   Instead of sizing each logo individually we set a consistent
   maximum height and allow width to adjust to preserve aspect ratio.
   A right margin separates adjacent logos. */
.trust-cues img {
  max-height: 48px;
  width: auto;
  margin-right: var(--space-4);
  display: inline-block;
}

/* Global image sizing to prevent horizontal overflow on narrow screens. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * Scheduling widget wrapper
 *
 * We provide a distinct container for the embedded Calendly widget
 * so that it has sufficient contrast against the page background and
 * maintains an accessible size. The wrapper uses the site’s colour
 * tokens for borders and padding, ensuring the widget is easy to see
 * and interact with. The inner #schedule-widget div is given a
 * minimum height so it doesn’t collapse while the external script loads.
 */
.schedule-widget-wrapper {
  background-color: var(--color-surface);
  border: 2px solid var(--color-primary);
  padding: var(--space-4);
  margin-top: var(--space-4);
  border-radius: 8px;
  overflow: hidden;
}

#schedule-widget {
  min-height: 600px;
}

/* Responsive adjustments for the text‑to‑speech (Listen) button.
 * On narrow screens the full “Listen” label can cause horizontal
 * overflow. We hide the text label and rely on the icon with an
 * accessible aria‑label. Padding and margin are reduced to keep the
 * button compact while maintaining a minimum touch area. */
@media (max-width: 600px) {
  /* Allow header items to wrap onto multiple lines on very narrow
     screens. This prevents the combination of logo, hamburger button,
     navigation actions and other buttons from forcing a horizontal
     scroll bar. */
  .site-header .nav-wrapper {
    flex-wrap: wrap;
  }
  nav#primary-navigation ul {
    gap: var(--space-3);
  }
}
  .tts-button .tts-label {
    display: none;
  }
  .tts-button {
    margin-left: var(--space-2);
    padding: var(--space-2);
    min-width: 44px;
    min-height: 44px;
  }
}

/* Make the slide‑out enquiry form occupy the full screen width on
 * smaller devices. Without this override the form retains a fixed
 * max‑width of 420px, which can create off‑screen overflow on
 * narrow viewports. */
@media (max-width: 600px) {
  .slide-out-form {
    max-width: 100%;
    width: 100%;
    padding: var(--space-4);
  }
}

/* Section styling */
section {
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border);
}

section:last-of-type {
  border-bottom: none;
}

/* Services grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
}

.service-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-6);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease;
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.service-card h3 {
  margin-bottom: var(--space-3);
}

.service-card p {
  flex-grow: 1;
}

.service-card a {
  align-self: flex-start;
  margin-top: var(--space-4);
  font-weight: 600;
}

/* FAQ accordion */
.faq {
  margin-top: var(--space-6);
}

.faq-item + .faq-item {
  margin-top: var(--space-4);
}

.faq-question {
  width: 100%;
  text-align: left;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-3);
  font-weight: 600;
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.faq-answer.open {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  max-height: 1000px; /* large enough to show all content */
}

/* Form styles */
.contact-form {
  display: grid;
  /* Use a flexible grid that adapts to the available width.  Each form
     group will span at least 240px and grow to fill remaining space.
     This baseline prevents fields from collapsing too small on
     tablet/desktop while remaining flexible on mobile. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--color-text);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-3);
  border-radius: 4px;
  font-size: 1rem;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Customise the select dropdown arrow for the service picker */
.contact-form select {
  appearance: none;
  background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZGRkIiB2aWV3Qm94PSIwIDAgMTAuMTEgNi42NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwbDQuNzIgNC4yOGMuMTYuMTUuMzcuMjMuNTkuMjNzLjQzLS4wOC41OS0uMjNsNC43Mi00LjI4VjBIMHoiLz48L3N2Zz4=');
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 0.75rem;
}

.contact-form .error-message {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: var(--space-1);
}

.contact-form .required {
  color: var(--color-primary);
  margin-left: var(--space-1);
}

.contact-form .btn-primary {
  grid-column: span 2;
  justify-self: start;
  /* Enhance visual prominence of the contact form submit button. On a dark
     background, the global primary button colour (#fff) appears as an
     unstyled white rectangle. Use a light grey surface colour and subtle
     border to improve legibility while maintaining brand contrast. */
  background-color: var(--color-secondary);
  color: #000;
  border: 1px solid var(--color-primary-hover);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover/focus state for the contact form button */
.contact-form .btn-primary:hover,
.contact-form .btn-primary:focus {
  background-color: var(--color-primary-hover);
  color: #000;
}

@media (max-width: 600px) {
  /* On very narrow screens stack all form controls into a single column
     and allow the submit button to occupy the full width.  This avoids
     horizontal scrolling on mobile and ensures each field is easily
     tappable. */
  .contact-form {
    grid-template-columns: 1fr;
  }
  .contact-form .btn-primary {
    grid-column: span 1;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * Mobile header adjustments
 *
 * On narrow screens the search bar and "Listen" button should remain fully
 * visible and tappable. Without these overrides the search input would
 * shrink to roughly 80% width and the text‑to‑speech button would wrap
 * awkwardly or disappear. We wrap the controls in .nav-actions and allow
 * them to wrap onto multiple lines. The search input grows to fill the
 * available space while the TTS button maintains its natural size. The
 * "Listen" label is hidden on very small screens to save horizontal space
 * but the icon remains so the button is still discoverable. All touch
 * targets meet the recommended 44×44 px minimum.
 */
@media (max-width: 768px) {
  .nav-actions {
    flex-wrap: wrap;
    width: 100%;
    margin-top: var(--space-3);
  }
  .nav-actions .search-form {
    flex: 1 1 100%;
    order: 1;
    display: flex;
    width: 100%;
    margin-right: 0;
    margin-bottom: var(--space-2);
  }
  .nav-actions .search-form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .nav-actions .search-form button {
    flex: 0 0 auto;
  }
  .nav-actions .tts-button {
    order: 2;
    margin-left: 0;
    margin-top: 0;
    padding: var(--space-2);
    font-size: 0.75rem;
  }
  /* Hide the textual label on the TTS button to conserve horizontal space on
     small screens. The icon remains and an aria-label provides context for
     screen readers. */
  .tts-button .tts-label {
    display: none;
  }
  /* Increase the minimum touch area for the TTS button to meet WCAG 2.1
     guidelines (~44×44 px). */
  .tts-button {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
}

/* Footer */
footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0;
  color: var(--color-text);
  margin-top: auto;
}

footer .footer-columns {
  display: grid;
  /* Increase the minimum width of each column to prevent long
     addresses from overlapping with other content and provide more
     breathing room on wider screens. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6) var(--space-8);
  row-gap: var(--space-8);
}

/* Footer bottom bar for copyright notice */
.footer-bottom {
  text-align: center;
  padding: var(--space-4) 0;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
}

/* Responsive logo styles */
/* Show the full wordmark on larger screens, hide the icon */
/* Override display rules from the base header styles using !important to take precedence */
.logo .logo-desktop {
  display: block !important;
  height: 48px; /* fixed height for consistent alignment */
  width: auto;
  max-width: 160px; /* constrain width so the full wordmark is visible without crowding */
  object-fit: contain;
}
.logo .logo-mobile {
  display: none !important;
  height: 40px; /* adjust as needed */
}

@media (max-width: 768px) {
  /* On tablets and phones, hide the wordmark and show the icon */
  .logo .logo-desktop {
    display: none !important;
  }
  .logo .logo-mobile {
    display: block !important;
  }
}

/*
 * Footer layout and readability fixes
 * Use CSS Grid with a minimum column width to prevent overlap on larger
 * screens. Set consistent gaps between columns and rows. Ensure that
 * long addresses or list items wrap gracefully by breaking words when
 * necessary and limiting the maximum width.
 */
footer .footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;        /* horizontal and vertical spacing between columns */
  row-gap: 2rem;
}

footer .footer-columns address,
footer .footer-columns ul li {
  line-height: 1.4;
  word-break: break-word;
  max-width: 100%;
}

/* Make footer links touch-friendly */
footer .footer-columns ul li a {
  display: inline-block;
  padding: 4px 0;
}

footer h4 {
  margin-bottom: var(--space-3);
  font-size: 1.125rem;
}

footer ul {
  list-style: none;
}

footer ul li {
  margin-bottom: var(--space-2);
  /* Make the entire link area clickable and improve touch targets */
  line-height: 1.5;
}

footer ul li a {
  display: inline-block;
  padding: 4px 0;
}

footer a {
  color: var(--color-secondary);
}

footer a:hover,
footer a:focus {
  color: var(--color-primary-hover);
}

/* Trust cues section */
.trust-cues {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
}
.trust-cues img {
  height: 40px;
  width: auto;
  /*
   * Do not invert trust‑cue logos.  We previously applied a brightness/invert
   * filter to recolour images to white for a dark footer; however this
   * obscured colourful logos like the Waikato Chamber of Commerce badge.
   * Instead leave the original colours intact so brand marks are
   * recognisable and accessible.
   */
  filter: none;
}
.trust-cues p {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Responsive images and media */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * Digital Boost badge
 *
 * This rule previously inverted the Digital Boost logo to improve contrast
 * against dark footers.  The Digital Boost badge has been removed from
 * the site, so the selector remains empty as a harmless stub.  Keeping an
 * empty rule avoids referencing a non‑existent class elsewhere in the
 * stylesheet and makes it easy to reintroduce the badge in future.
 */
.digital-boost-logo {
  /* intentionally left blank */
}

/*
 * Quick Enquiry slide‑out form
 *
 * The slide‑out panel on service pages contains a simplified contact form.
 * To ensure excellent usability on mobile devices, the form uses a flex
 * column layout and full‑width inputs.  Touch targets meet the 44×44 px
 * minimum and spacing between fields is consistent.  The parent
 * `.slide-out-form` container is already capped at a reasonable width.
 */
.quick-enquiry-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quick-enquiry-form .form-group {
  display: flex;
  flex-direction: column;
}
.quick-enquiry-form label {
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--color-text);
}
.quick-enquiry-form input,
.quick-enquiry-form select {
  width: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-3);
  border-radius: 4px;
  font-size: 1rem;
}
.quick-enquiry-form input:focus,
.quick-enquiry-form select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.quick-enquiry-form .error-message {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: var(--space-1);
}
.quick-enquiry-form .required {
  color: var(--color-primary);
  margin-left: var(--space-1);
}

/*
 * Contact form overrides for narrow screens
 *
 * On extremely narrow screens the inline `grid-column: span 2` style on
 * certain form groups can cause unexpected overflow because the element
 * attempts to span two columns even when only one column exists.  This
 * override forces all grid‑spanning groups to collapse to a single
 * column on mobile.  It uses an attribute selector to target inline
 * styles containing "grid-column".  The `!important` flag ensures
 * precedence over the inline style attribute.
 */
@media (max-width: 600px) {
  .contact-form [style*="grid-column"] {
    grid-column: span 1 !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===================================== */
/* Custom styles for accessibility and new features */
/* ===================================== */

/* Search form in header */
.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-6);
}

.search-form input[type="search"] {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: 4px;
  font-size: 0.875rem;
  min-width: 160px;
}

.search-form button {
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1rem;
  cursor: pointer;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-form button:hover,
.search-form button:focus {
  color: var(--color-primary-hover);
}

/* Generic icon styling for search and listen buttons */
/* Generic icon styling for search and listen buttons.  Use a slightly
   larger size for improved visibility and invert the colours to
   contrast against the dark background.  Add a small margin to
   separate the icon from adjacent text. */
.icon {
  height: 1.2em;
  width: 1.2em;
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--space-1);
  filter: invert(1);
}

/* TTS button styling */
.tts-button {
  margin-left: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.875rem;
}
/* Hover and focus state for the TTS button */
.tts-button:hover,
.tts-button:focus {
  background-color: var(--color-border);
}

/* Pressed state for the TTS button: invert colours for readability */
.tts-button[aria-pressed="true"] {
  background-color: var(--color-primary);
  color: #000;
}

/* Remove duplicate .tts-button rule defined above */

/* Logo image */
/* Increase the logo size slightly and ensure it sits inline with
   navigation items.  Wrap the logo link in flex to vertically
   center the image.  Add a right margin to separate from menu. */
.site-header .logo,
.site-logo {
  display: flex;
  align-items: center;
}

.site-header .logo img,
.site-logo {
  height: 48px;
  width: auto;
  margin-right: var(--space-4);
  display: block;
}

/* Duplicate pressed state removed; handled earlier */

/* Carousel component */
.carousel-section {
  background-color: var(--color-surface);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-slide {
  display: none;
  position: relative;
}

.carousel-slide.active {
  display: block;
}

.carousel-slide img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

.carousel-slide .caption {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  background-color: rgba(0, 0, 0, 0.6);
  padding: var(--space-4);
  border-radius: 4px;
  max-width: 60%;
}

.carousel-slide .caption h2 {
  margin-bottom: var(--space-2);
  font-size: 1.5rem;
}

.carousel-slide .caption p {
  margin-bottom: var(--space-3);
  font-size: 1rem;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  padding: var(--space-2);
  cursor: pointer;
  z-index: 2;
}

.carousel-control.prev {
  left: var(--space-4);
}

.carousel-control.next {
  right: var(--space-4);
}

.carousel-play-pause {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 1rem;
  padding: var(--space-2);
  cursor: pointer;
  border-radius: 4px;
  z-index: 2;
}

.carousel-indicators {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  z-index: 2;
}

.carousel-indicators button {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: transparent;
  cursor: pointer;
}

.carousel-indicators button.active,
.carousel-indicators button:hover,
.carousel-indicators button:focus {
  background-color: #fff;
}

/* Sidebar navigation for service pages */
.content-with-sidebar {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.sidebar-nav {
  position: sticky;
  top: var(--space-10);
  min-width: 200px;
  max-width: 240px;
  align-self: flex-start;
}

.sidebar-nav ul {
  list-style: none;
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-4);
}

.sidebar-nav li + li {
  margin-top: var(--space-3);
}

.sidebar-nav a {
  color: var(--color-secondary);
  font-size: 0.875rem;
}

.sidebar-nav a:hover,
.sidebar-nav a:focus {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Search results page */
.search-results .search-item {
  margin-bottom: var(--space-8);
}

.search-results h3 a {
  color: var(--color-primary);
}

.search-results mark {
  background-color: var(--color-primary);
  color: #000;
  padding: 0 2px;
  border-radius: 2px;
}

/* Responsive adjustments for carousel and sidebar */
@media (max-width: 768px) {
  .carousel-slide img {
    height: 200px;
  }
  .carousel-slide .caption {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-4);
    max-width: 90%;
  }
  .content-with-sidebar {
    flex-direction: column;
  }
  .sidebar-nav {
    position: static;
    max-width: none;
    margin-bottom: var(--space-6);
  }
}

/* Ensure the desktop logo never shrinks or gets clipped */
.site-header .logo {
  flex-shrink: 0;
  margin-right: var(--space-4);
}
.logo .logo-desktop {
  height: 48px;
  width: auto;
  max-width: 160px;        /* adjust as needed for your cropped logo */
  object-fit: contain;
}

/* Improved flex layout for navigation bar */
/*
 * On large screens the header navigation should stay on a single line.  We
 * wrap this rule inside a min‑width media query so that narrow viewports
 * fall back to the mobile behaviour defined earlier (flex‑wrap: wrap).  The
 * previous unconditional rule caused the header to refuse wrapping on
 * mobile, which in turn prevented the hamburger button from becoming
 * accessible on some service pages.  Restricting it to wider viewports
 * resolves this bug.
 */
@media (min-width: 769px) {
  .site-header .nav-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
}
nav#primary-navigation {
  flex-grow: 1;           /* nav takes available width between logo and actions */
}
nav#primary-navigation ul {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}
/* Position search and TTS buttons on the far right */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-left: var(--space-4);
}
.nav-actions .search-form input[type="search"] {
  min-width: 160px;
}

/* Prevent navigation link wrapping */
nav#primary-navigation > ul > li > a {
  white-space: nowrap;
}

/* Center header on very large screens */
@media (min-width: 1440px) {
  .site-header .nav-wrapper {
    max-width: 1440px;
    margin: 0 auto;
  }
}

/* ---------------------------------------------------------------------------
 * Responsive text wrapping
 *
 * Long words, URLs or product names can occasionally cause horizontal
 * scrolling on small devices.  Allow the browser to break words at
 * arbitrary points within paragraphs and list items so that lines wrap
 * gracefully within their containers.
 */
p,
li {
  overflow-wrap: anywhere;
}

/* Breadcrumbs */
.breadcrumb {
  /* Improved spacing to avoid overlapping the sticky header and provide clearer separation */
  margin: var(--space-4) 0 var(--space-4);
  font-size: 0.875rem;
  color: var(--color-muted, #6b7280);
}
.breadcrumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.breadcrumb-item { display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; opacity: .6; }
.breadcrumb-link { text-decoration: none; color: inherit; }
.breadcrumb-link:hover, .breadcrumb-link:focus { text-decoration: underline; }
.breadcrumb-current { color: var(--color-ink, #111827); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .breadcrumb { animation: fadeIn .3s ease-out both; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(-2px);} to {opacity:1; transform:none;} }
}


    /* Footer Build/Grow layout */
    .footer-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:.25rem}
    .footer-services-head{font-weight:600;margin:.25rem 0}
    .footer-services .footer-links{list-style:none;margin:0;padding:0}
    .footer-services .footer-links li{margin:.2rem 0}
    .footer-view-all{margin-top:.5rem}
    @media (max-width:640px){.footer-services{grid-template-columns:1fr}}
    


        /* Cookie/Analytics consent banner */
        :root{ --consent-offset: 0px; }
        .cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#0a0a0a;color:#fff;
          padding: .75rem clamp(12px,2vw,24px) calc(clamp(12px,2vw,24px) + env(safe-area-inset-right));
          border-top: 1px solid rgba(255,255,255,.12); display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
        .cookie-consent__text{flex:1;min-width:220px;font-size:.95rem;line-height:1.4}
        .cookie-consent__actions{display:flex;gap:.5rem;align-items:center}
        .cookie-consent button{background:#13aaff;color:#fff;border:0;border-radius:4px;padding:.5rem .8rem;cursor:pointer}
        .cookie-consent a{color:#9ddcff;text-decoration:underline}
        @supports (padding: env(safe-area-inset-bottom)) {.cookie-consent{padding-bottom: calc(.75rem + env(safe-area-inset-bottom));}}
        /* Lift bottom-right accessibility tools above banner when shown */
        .font-size-controls{bottom: calc(20px + var(--consent-offset)) !important;}