/* ============================================================
   WATERCAT CREATIVE – CLEAN STYLESHEET
   PART 1 / 3  →  GLOBAL + LAYOUT + FORMS
   ============================================================ */

/* -------------------
   GLOBAL TYPOGRAPHY
   ------------------- */

/* Front-end */
h1, h2, h3, h4, h5, h6 {
  font-family: "Acumin-Pro-Extra-Condensed", sans-serif;
  font-weight: 700;
}
body, p, li, blockquote {
  font-family: "acumin-pro", sans-serif;
  font-weight: 300;
  line-height: 1.25;
  color: #4b4b4b;
}
button,
.wp-block-button__link,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  font-family: "acumin-pro-wide", sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Editor preview */
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  font-family: "Acumin-Pro-Extra-Condensed", sans-serif;
  font-weight: 700;
}
.editor-styles-wrapper,
.editor-styles-wrapper p,
.editor-styles-wrapper li,
.editor-styles-wrapper blockquote {
  font-family: "acumin-pro", sans-serif;
  font-weight: 300;
  line-height: 1.25;
  color: #4b4b4b;
}
.editor-styles-wrapper .wp-block-button__link,
.editor-styles-wrapper button,
.editor-styles-wrapper input[type="submit"],
.editor-styles-wrapper input[type="button"],
.editor-styles-wrapper input[type="reset"] {
  font-family: "acumin-pro-wide", sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* -------------------
   BUTTONS
   ------------------- */
.btn-shadow {
  transition: all 0.25s ease;
  border-radius: 5px;
  box-shadow: none !important;
}
.btn-shadow:hover {
  box-shadow: 4px 4px 0 #2b2b2b !important;
  border-radius: 4px;
  transform: translate(-1px, -1px);
}

/* -------------------
   GLOBAL LINKS
   ------------------- */
a {
  color: #2b2b2b;
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover,
a:focus-visible {
  color: #999999;
  text-decoration: none;
}

/* Footer / template-part links */
.wp-block-template-part a {
  color: #2b2b2b;
  text-decoration: none;
  transition: color 0.3s ease;
}
.wp-block-template-part a:hover { color: #999999; }

/* -------------------
   TWO-COLUMN STICKY SECTION
   ------------------- */
.twocol-sticky {
  --sticky-top: 96px; /* header offset */
}
body.admin-bar .twocol-sticky { --sticky-top: 128px; }

.twocol-sticky .wp-block-columns { align-items: flex-start; }
.twocol-sticky .col-sticky {
  position: sticky;
  top: var(--sticky-top);
  align-self: flex-start;
  z-index: 2;
}
.twocol-sticky,
.twocol-sticky :where(.wp-block-group, .wp-block-columns, .wp-block-column) {
  overflow: visible !important;
  transform: none !important;
}
@media (max-width: 960px) {
  .twocol-sticky .col-sticky { position: static; top: auto; }
}

/* -------------------
   JETPACK CONTACT FORM
   ------------------- */
.wp-block-jetpack-contact-form.is-style-default .grunion-field-wrap {
  margin: 20px 0 28px;
  font-family: "acumin-pro", sans-serif;
  font-weight: 300;
}
.wp-block-jetpack-contact-form.is-style-default .grunion-field-wrap label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: #2b2b2b;
}
.wp-block-jetpack-contact-form.is-style-default
  input[type="text"],
.wp-block-jetpack-contact-form.is-style-default
  input[type="email"],
.wp-block-jetpack-contact-form.is-style-default
  input[type="url"],
.wp-block-jetpack-contact-form.is-style-default
  input[type="tel"],
.wp-block-jetpack-contact-form.is-style-default
  input[type="number"],
.wp-block-jetpack-contact-form.is-style-default
  input[type="password"],
.wp-block-jetpack-contact-form.is-style-default
  input[type="search"],
.wp-block-jetpack-contact-form.is-style-default select {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #2b2b2b !important;
  border-radius: 0 !important;
  padding: 8px 0 10px;
  color: #2b2b2b;
  font-size: 16px;
  transition: border-color 0.2s ease;
}
.wp-block-jetpack-contact-form.is-style-default
  input:focus,
.wp-block-jetpack-contact-form.is-style-default
  select:focus {
  outline: none !important;
  border-bottom: 1px solid #999999 !important;
}
.wp-block-jetpack-contact-form.is-style-default textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px;
  background: transparent !important;
  color: #2b2b2b;
  border: 1px solid #2b2b2b !important;
  border-radius: 4px !important;
  font-size: 16px;
  transition: border-color 0.2s ease;
}
.wp-block-jetpack-contact-form.is-style-default textarea:focus {
  outline: none !important;
  border: 1px solid #999999 !important;
}
.wp-block-jetpack-contact-form.is-style-default ::placeholder {
  color: #999999;
  opacity: 1;
}

/* -------------------
   CONGLETON PRIDE CASE STUDY
   ------------------- */
body.postid-875 .wp-block-post-title,
body.postid-875 .wp-block-post-title a {
  display: inline-block;
  color: #2b2b2b;
  text-decoration: none;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}
body.postid-875 .wp-block-post-title:hover,
body.postid-875 .wp-block-post-title a:hover {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    90deg,
    #e57373 0%,
    #ff8a65 22%,
    #d8c36a 32%,
    #81c784 50%,
    #64b5f6 75%,
    #ba68c8 100%
  );
  background-size: 200% 100%;
  background-position: 0% 0;
  animation: pride-rainbow-slow 8s ease-in-out forwards;
}
body.postid-875 .wp-block-post-title:not(:hover),
body.postid-875 .wp-block-post-title a:not(:hover) {
  color: #2b2b2b;
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
}
@keyframes pride-rainbow-slow {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* -------------------
   FOOTER PEEK LOGO
   ------------------- */
.footer-peek-logo {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 120%);
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  max-width: 65px;
  width: 100%;
  height: auto;
  transition:
    transform 2s cubic-bezier(0.22,1,0.36,1),
    opacity   2s cubic-bezier(0.22,1,0.36,1);
}
.footer-peek-wrap.is-peeking .footer-peek-logo {
  transform: translate(-50%, -60px);
  opacity: 1;
  z-index: 70;
}
.footer-peek-wrap.is-peeking.is-faded .footer-peek-logo {
  transition:
    transform 2s cubic-bezier(0.22,1,0.36,1),
    opacity   400ms ease-out;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .footer-peek-logo {
    transition: none;
    transform: translate(-50%, -60px);
    opacity: 1;
  }
}

/* ============================================================
   WATERCAT CREATIVE – CLEAN STYLESHEET
   PART 2 / 3  →  HEADER + HERO
   ============================================================ */

/* -------------------------------
   BASE VARIABLES
   ------------------------------- */
:root {
  --wc-header-height: 72px;
  --wc-brand-dark: #2b2b2b;
  --wc-light: #fff;
  --wc-cream: #faf9f2;
}

/* -------------------------------
   FIXED HEADER (shared structure)
   ------------------------------- */
.hoat-header,
.wp-block-group.alignwide.is-content-justification-space-between.is-nowrap.is-layout-flex {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  color: var(--wc-brand-dark);
  background: var(--wc-cream);
  padding: clamp(10px, 1vw, 10px) clamp(24px, 4vw, 60px) 10px;
  isolation: isolate;
  border: none;
  box-shadow: none;
  transition: background .25s ease, color .25s ease;
}

/* Divider line (single source of truth) */
.hoat-header::after,
.wp-block-group.alignwide.is-content-justification-space-between.is-nowrap.is-layout-flex::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--wc-brand-dark);
  pointer-events: none;
  z-index: 1;
  transform: scaleY(0.5);
  transform-origin: bottom;
}

/* Background layer (ensures cream always paints) */
.hoat-header::before,
.wp-block-group.alignwide.is-content-justification-space-between.is-nowrap.is-layout-flex::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wc-cream);
  pointer-events: none;
  z-index: -1;
  transition: background .25s ease;
}

/* -------------------------------
   HOMEPAGE – TRANSPARENT OVER HERO
   ------------------------------- */
body.home:not(.wc-after-hero) .hoat-header,
body.home:not(.wc-after-hero)
  .wp-block-group.alignwide.is-content-justification-space-between.is-nowrap.is-layout-flex {
  background: transparent !important;
  color: var(--wc-light) !important;
  padding-bottom: 0;
}
body.home:not(.wc-after-hero) .hoat-header::before,
body.home:not(.wc-after-hero)
  .wp-block-group.alignwide.is-content-justification-space-between.is-nowrap.is-layout-flex::before {
  background: transparent !important;
}
body.home:not(.wc-after-hero) .hoat-header::after,
body.home:not(.wc-after-hero)
  .wp-block-group.alignwide.is-content-justification-space-between.is-nowrap.is-layout-flex::after {
  content: none !important;   /* hide divider over hero */
}

/* -------------------------------
   HERO SECTION
   ------------------------------- */
.hero-observed {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.hero-observed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.home .wp-site-blocks > .hero-observed:first-child,
body.home .wp-site-blocks > .wp-block-cover:first-child,
body.home .wp-site-blocks > .wp-block-video:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.home .wp-site-blocks {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Make sure main content leaves space for fixed header */
body.wc-after-hero main,
body.wc-after-hero .wp-site-blocks > main,
body.wc-after-hero .site-content {
  padding-top: var(--wc-header-height);
}

/* -------------------------------
   LOGO – SVG IMAGE
   ------------------------------- */
.hoat-header .wp-block-image img[src$=".svg"],
.hoat-header .wp-block-site-logo img[src$=".svg"] {
  display: block !important;
  width: 165px !important;
  height: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none;
}

/* White logo over hero video */
body.home:not(.wc-after-hero)
  .hoat-header .wp-block-image img[src$=".svg"],
body.home:not(.wc-after-hero)
  .hoat-header .wp-block-site-logo img[src$=".svg"] {
  filter: brightness(0) invert(1);
}

/* Original-colour logo after hero + on subpages */
body.home.wc-after-hero
  .hoat-header .wp-block-image img[src$=".svg"],
body.wc-after-hero
  .hoat-header .wp-block-site-logo img[src$=".svg"],
body:not(.home)
  .hoat-header .wp-block-image img[src$=".svg"],
body:not(.home)
  .hoat-header .wp-block-site-logo img[src$=".svg"] {
  filter: none;
}

/* -------------------------------
   NAVIGATION + MENU
   ------------------------------- */
.hoat-header .wp-block-navigation,
.hoat-header .wp-block-navigation a,
.hoat-header .wp-block-navigation__responsive-container,
.hoat-header .wp-block-navigation__responsive-container a {
  color: currentColor !important;
  text-decoration: none;
}
.hoat-header .wp-block-navigation a:where(:not([style*="color"])) {
  color: currentColor !important;
}

/* Mobile toggle icons follow colour */
.hoat-header button.wp-block-navigation__responsive-container-open,
.hoat-header button.wp-block-navigation__responsive-container-close {
  color: currentColor !important;
}
.hoat-header button.wp-block-navigation__responsive-container-open svg *,
.hoat-header button.wp-block-navigation__responsive-container-close svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Submenus: transparent over hero, cream after */
.hoat-header .wp-block-navigation__submenu-container {
  background: transparent !important;
  border: 0;
}
body.wc-after-hero .hoat-header .wp-block-navigation__submenu-container {
  background: var(--wc-cream) !important;
}

/* Hover + focus: faint underline */
.hoat-header .wp-block-navigation a {
  text-decoration: none;
  box-shadow: none;
  transition: box-shadow 0.25s ease;
}
.hoat-header .wp-block-navigation a:hover,
.hoat-header .wp-block-navigation a:focus-visible {
  box-shadow: inset 0 -1px 0 currentColor;
  outline: none;
}

/* Active page underline */
.hoat-header .wp-block-navigation-item__content[aria-current="page"] {
  box-shadow: inset 0 -1px 0 currentColor;
}

/* ============================================================
   WATERCAT CREATIVE – CLEAN STYLESHEET
   PART 3 / 3  →  PRELOADER + FOOTER
   ============================================================ */

/* -------------------
   PRELOADER OVERLAY
   ------------------- */
#wc-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #faf9f2;               /* brand cream background */
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.45s ease;
}
#wc-preloader .wc-pre__inner {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 24px;
}
#wc-preloader .wc-pre__logo {
  width: clamp(140px, 22vw, 260px);
  height: auto;
  display: block;
  transform: translateY(8px) scale(0.96);
  opacity: 0;
  animation:
    wc-pre-in 700ms cubic-bezier(.22,1,.36,1) forwards,
    wc-pre-breathe 2.2s ease-in-out 700ms infinite;
}
body.wc-loaded #wc-preloader {
  opacity: 0;
  pointer-events: none;
}

/* Motion keyframes */
@keyframes wc-pre-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes wc-pre-breathe {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  #wc-preloader .wc-pre__logo {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* -------------------
   FOOTER PEEK LOGO
   ------------------- */
.footer-peek-logo {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 120%);
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  max-width: 65px;
  width: 100%;
  height: auto;
  transition:
    transform 2s cubic-bezier(0.22,1,0.36,1),
    opacity   2s cubic-bezier(0.22,1,0.36,1);
}
.footer-peek-wrap.is-peeking .footer-peek-logo {
  transform: translate(-50%, -60px);
  opacity: 1;
  z-index: 70;
}
.footer-peek-wrap.is-peeking.is-faded .footer-peek-logo {
  transition:
    transform 2s cubic-bezier(0.22,1,0.36,1),
    opacity   400ms ease-out;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .footer-peek-logo {
    transition: none;
    transform: translate(-50%, -60px);
    opacity: 1;
  }
}


/* === Force hero to start at pixel 0 by shifting video up 32px === */
/* Homepage only, while header is transparent */
body.home:not(.wc-after-hero) .hero-observed {
  position: relative;
  height: calc(100vh + 32px) !important; /* grow container */
  margin-top: -32px !important;          /* pull up into the top edge */
  overflow: hidden !important;
}

/* If you used a Cover block as hero, catch that too */
body.home:not(.wc-after-hero) .wp-block-cover:first-child {
  position: relative;
  height: calc(100vh + 32px) !important;
  margin-top: -32px !important;
  overflow: hidden !important;
}

/* Shift the actual video up so the 32px offset is hidden at the top */
body.home:not(.wc-after-hero) .hero-observed video,
body.home:not(.wc-after-hero) .wp-block-cover:first-child video {
  position: absolute !important;
  top: -32px !important; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: calc(100% + 32px) !important; /* keep full coverage */
  object-fit: cover !important;
}


/* === HOMEPAGE HERO FIX – menu turns white over video === */

/* Make navigation + links white only on homepage while hero is visible */
body.home:not(.wc-after-hero) .hoat-header .wp-block-navigation,
body.home:not(.wc-after-hero) .hoat-header .wp-block-navigation * {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
  text-decoration: none !important;
}

/* Also ensure responsive (mobile) icons follow suit */
body.home:not(.wc-after-hero)
  .hoat-header button.wp-block-navigation__responsive-container-open,
body.home:not(.wc-after-hero)
  .hoat-header button.wp-block-navigation__responsive-container-close {
  color: #fff !important;
}
body.home:not(.wc-after-hero)
  .hoat-header button.wp-block-navigation__responsive-container-open svg *,
body.home:not(.wc-after-hero)
  .hoat-header button.wp-block-navigation__responsive-container-close svg * {
  fill: #fff !important;
  stroke: #fff !important;
}





/* ============================================================
   GLOBAL FADE-IN-UP (refined Watercat motion)
   ============================================================ */

@keyframes wc-fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(12px);      /* soft upward drift */
    filter: blur(2px);                /* faint blur for smoothness */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Class applied on scroll */
.animate-fadeInUp {
  opacity: 0;
  animation: wc-fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: opacity, transform, filter;
}

/* Reduce motion – no animation */
@media (prefers-reduced-motion: reduce) {
  .animate-fadeInUp {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ============================================================
   MOBILE TWEAKS (no desktop changes)
   ============================================================ */
@media (max-width: 768px) {

  /* 1) Footer icon: not sticky, only shows when you reach it */
  .footer-peek-logo {
    position: static !important;      /* leave document flow */
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    display: block !important;
    margin: 16px auto 0 !important;   /* centre nicely */
  }
  .footer-peek-wrap.is-peeking .footer-peek-logo,
  .footer-peek-wrap.is-peeking.is-faded .footer-peek-logo {
    transform: none !important;
    opacity: 1 !important;
  }

  /* 2) Secondary pages: halve the extra top breathing room */
  body:not(.home) main,
  body:not(.home) .wp-site-blocks > main,
  body:not(.home) .site-content {
    /* was var(--wc-header-height) + 32px */
    padding-top: calc(var(--wc-header-height) + 1px) !important;
  }

  /* 3) Mobile menu: ensure black text on white when panel is open,
        even over the white-on-hero homepage state */
  /* Panel shell */
  body.home:not(.wc-after-hero) .hoat-header
    .wp-block-navigation__responsive-container.is-menu-open {
    background: #fff !important;
    color: #111 !important;
  }
  /* Panel content + links + nested items */
  body.home:not(.wc-after-hero) .hoat-header
    .wp-block-navigation__responsive-container.is-menu-open *,
  body.home:not(.wc-after-hero) .hoat-header
    .wp-block-navigation__responsive-container.is-menu-open a,
  body.home:not(.wc-after-hero) .hoat-header
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: #111 !important;
    fill: #111 !important;
    stroke: #111 !important;
    text-decoration: none !important;
    font-size: 18px;                /* keep the larger size you liked */
    line-height: 1.6;
  }
  /* Icons (hamburger/close) inside the open panel */
  body.home:not(.wc-after-hero) .hoat-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-open,
  body.home:not(.wc-after-hero) .hoat-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close,
  body.home:not(.wc-after-hero) .hoat-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-open svg *,
  body.home:not(.wc-after-hero) .hoat-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close svg * {
    color: #111 !important;
    fill:  #111 !important;
    stroke:#111 !important;
  }

  /* Keep submenus white too */
  body.home:not(.wc-after-hero) .hoat-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    background: #fff !important;
  }
}


/* ============================================================
   MOBILE – CONSISTENT MENU TEXT SIZE (ALL PAGES)
   ============================================================ */
@media (max-width: 768px) {
  /* Make all mobile nav links larger, everywhere */
  .hoat-header .wp-block-navigation__responsive-container.is-menu-open a,
  .hoat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 18px !important;
    line-height: 1.6 !important;
    padding: 10px 0 !important;
  }

  /* Maintain colour behaviour */
  /* Default (subpages and after-hero) */
  body:not(.home),
  body.wc-after-hero {
    --wc-mobile-menu-bg: #fff;
    --wc-mobile-menu-text: #111;
  }
  /* Homepage over hero – keep white text on transparent */
  body.home:not(.wc-after-hero) {
    --wc-mobile-menu-bg: transparent;
    --wc-mobile-menu-text: #fff;
  }

  /* Apply colour vars */
  .hoat-header .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--wc-mobile-menu-bg) !important;
  }
  .hoat-header .wp-block-navigation__responsive-container.is-menu-open a,
  .hoat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: var(--wc-mobile-menu-text) !important;
    fill: var(--wc-mobile-menu-text) !important;
    stroke: var(--wc-mobile-menu-text) !important;
  }
  .hoat-header .wp-block-navigation__responsive-container.is-menu-open svg * {
    fill: var(--wc-mobile-menu-text) !important;
    stroke: var(--wc-mobile-menu-text) !important;
  }
}


/* ============================================================
   RESPONSIVE VISIBILITY HELPERS
   ============================================================ */

/* Desktop = anything wider than 768px */
.show-mobile-only { display: none !important; }
.show-desktop-only { display: block !important; }

@media (max-width: 768px) {
  .show-mobile-only { display: block !important; }
  .show-desktop-only { display: none !important; }
}

.hidden-image {
  display: none !important;
  visibility: hidden !important;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ============================================================
   Restore hero overlay to 20% on the new static Home
   (handles .home, .front-page and page templates)
   ============================================================ */

/* If you're using a Cover block’s built-in overlay */
body.home .wp-block-cover.hero-observed .wp-block-cover__background,
body.front-page .wp-block-cover.hero-observed .wp-block-cover__background,
body.page-template-front-page .wp-block-cover.hero-observed .wp-block-cover__background {
  opacity: .2 !important;   /* 20% */
}

/* If you’re using a manual overlay via ::before on the hero container */
body.home .hero-observed::before,
body.front-page .hero-observed::before,
body.page-template-front-page .hero-observed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .1 !important;   /* 20% */
  pointer-events: none;
  z-index: 1;
}

/* Make sure the video itself isn’t being darkened */
body.home .hero-observed video,
body.front-page .hero-observed video,
body.page-template-front-page .hero-observed video {
  filter: none !important;
}

/* Ensure the header’s background layer stays transparent while on the hero
   (otherwise it can look like a full overlay) */
body.home:not(.wc-after-hero) .hoat-header::before,
body.front-page:not(.wc-after-hero) .hoat-header::before,
body.page-template-front-page:not(.wc-after-hero) .hoat-header::before {
  background: transparent !important;
}

/* Make bold text properly bold in body copy */
strong,
b {
  font-weight: 500; /* or 700 if you want it punchier */
}

/* Disable WordPress text balancing everywhere */
.wp-block-heading,
h1, h2, h3, h4, h5, h6 {
  text-wrap: wrap !important;      /* override text-wrap: balance */
  overflow-wrap: normal !important;
  white-space: normal !important;
}

/* Catch the new WP classes */
.has-text-wrap-balance,
.has-text-wrap-pretty {
  text-wrap: wrap !important;
}

/* Base styling shared by both */
.hero-video-desktop,
.hero-video-mobile {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  margin: 0 !important;
  padding: 0 !important;
  transition: opacity 0.4s ease;
}

/* Show desktop, hide mobile by default */
.hero-video-desktop { display: block; }
.hero-video-mobile  { display: none; }

/* Mobile swap */
@media (max-width: 768px) {
  .hero-video-desktop { display: none !important; }
  .hero-video-mobile  { display: block !important; }
}

/* Mobile H2 size */
@media (max-width: 767px) {
  h3 {
    font-size: 1.6rem; /* adjust as needed */
    line-height: 1.2;
  }
}

/* Desktop stays unchanged — no desktop CSS needed */

/* Mobile H2 size */
@media (max-width: 767px) {
  h2 {
    font-size: 2.3rem; /* adjust as needed */
    line-height: 1.2;
  }
}

/* Desktop stays unchanged — no desktop CSS needed */

.hover-reveal {
  position: relative;
  overflow: hidden;
}

.hover-reveal img {
  display: block;
}

.hover-reveal p {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: centre;
  justify-content: centre;
  text-align: centre;
  padding: 1rem;
  background: rgba(0,0,0,0.55); /* dark overlay */
  colour: #fff;                 /* text colour */
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* show on hover */
.hover-reveal:hover p {
  opacity: 1;
}

.skip-link {
  background: #000000;
  color: #ffffff;
}

.skip-link:focus {
  top: 0;
  left: 0;
  z-index: 9999;
}

a:not(.wp-block-button__link) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a:not(.wp-block-button__link):hover,
a:not(.wp-block-button__link):focus-visible {
  text-decoration-thickness: 2px;
}

/* Link-in-bio pages: remove underlines from all links */
body.page-id-2321 a,
body.page-id-2421 a,
body.page-id-1988 a {
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

body.page-id-2321 a:hover,
body.page-id-2321 a:focus-visible,
body.page-id-2421 a:hover,
body.page-id-2421 a:focus-visible,
body.page-id-1988 a:hover,
body.page-id-1988 a:focus-visible {
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}


/* === MailerLite embed: make it full width === */
.ml-form-embedContainer,
.ml-form-embedContainer .ml-form-align-center,
.ml-form-embedContainer .ml-form-embedWrapper,
.ml-form-embedContainer .ml-form-embedWrapper.embedForm {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* Remove the “table-cell” centring behaviour */
.ml-form-embedContainer .ml-form-align-default {
  display: block !important;
  text-align: left !important;
}

/* === MailerLite: inputs match WCC form style === */
.ml-form-embedContainer input[type="email"],
.ml-form-embedContainer input[type="text"],
.ml-form-embedContainer input[type="tel"],
.ml-form-embedContainer input[type="url"] {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #2b2b2b !important;
  border-radius: 0 !important;
  padding: 8px 0 10px !important;
  color: #2b2b2b !important;
  font-family: "acumin-pro", sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  box-shadow: none !important;
}

.ml-form-embedContainer input::placeholder {
  color: #999999 !important;
  opacity: 1 !important;
}

.ml-form-embedContainer input:focus {
  outline: none !important;
  border-bottom-color: #999999 !important;
}

/* === MailerLite: button matches your WCC button styling === */
.ml-form-embedContainer .ml-form-embedSubmit button.primary {
  width: 100% !important;
  border: none !important;
  border-radius: !important;
  background: #2b2b2b !important;
  color: #ffffff !important;
  font-family: "acumin-pro-wide", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Optional: match your .btn-shadow hover behaviour */
.ml-form-embedContainer .ml-form-embedSubmit button.primary:hover,
.ml-form-embedContainer .ml-form-embedSubmit button.primary:focus-visible {
  box-shadow: 0px 0px 0 #2b2b2b !important;
  transform: translate(-1px, -1px) !important;
  outline: none !important;
}

/* === MailerLite: remove embed “card” look === */
.ml-form-embedContainer .ml-form-embedWrapper {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.ml-form-embedContainer .ml-form-embedBody {
  padding: 0 !important;
}

/* Kill any wrapper border/outline */
#mlb2-35844698,
#mlb2-35844698 .ml-form-embedWrapper,
#mlb2-35844698 .ml-form-embedBody {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  ul,
  ol {
    padding-left: 1.5rem;
  }
}

@media (max-width: 600px) {
  .wp-block-post-content ul,
  .wp-block-post-content ol,
  .entry-content ul,
  .entry-content ol {
    padding-left: 1.5rem !important;
    margin-left: 0 !important;
    list-style-position: outside !important;
  }
}