/*
Theme Name: ioteq
Description: Custom WordPress theme for ioteq
Version: 1.0.3
Author: ioteq
*/

/* Import Poppins (sans) font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Import Lora (serif) font */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gloock:ital,wght@0,400..700;1,400..700&display=swap');

/* Import Google Sans Code (mono) font */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:wght@100..800&display=swap');

/* Reset and Base Styles - Matching Astro Site */
* {
  box-sizing: border-box;
}

html {
  font-family: 'Poppins', system-ui, sans-serif;
  scroll-behavior: smooth;
  /* Keep "scroll to content" links clear of the floating header */
  scroll-padding-top: calc(4rem + 1rem);
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  font-family: 'Poppins', system-ui, sans-serif;
  line-height: 1.6;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-height: 100vh;
  background: white;
  color: #111827;
  letter-spacing: -0.025em;
  -webkit-font-smoothing: antialiased;
}

/* Remove WordPress default margins */
.wp-block-group {
  margin: 0 !important;
}

.entry-content {
  margin: 0 !important;
}

.site-main {
  margin: 0 !important;
}

.hentry {
  margin: 0 !important;
}

/* Custom CSS Variables - Matching Astro Site */
:root {
  --color-primary: #e1516b;
  --color-primary-500: #e1516b;
  --color-primary-600: #d42b4a;
  --color-primary-700: #b0213b;
  --color-accent: #fb923c;
  /* Height of the header bar. Used for anchor scroll clearance and for the
     top padding of full-height heroes. */
  --header-height: 4rem;
  /* How far the detached header pill - and the mobile menu panel, which is the
     same shape carried down the page - sits in from the viewport edges, and the
     corner radius they share. The radius is half the bar height, so a 4rem bar
     with it reads as a full pill and a full-height panel matches its corners. */
  --header-inset: 1rem;
  --header-pill-radius: 2rem;
}

@media (min-width: 1024px) {
  :root {
    /*--header-inset: 2rem;*/
  }
}

/* The `primary` and `mist` palettes are declared in tailwind.config (header.php)
   and the Play CDN generates every bg-/text-/border- utility from them. They are
   deliberately NOT redeclared here — a `.bg-primary-600 { ... !important }`
   silently kills `hover:bg-primary-700` and every other state variant. */

/* Header Styles */
/* The header sits in the normal document flow as a full-bleed bar, so the top
   of every page looks unchanged. It is sticky, so once the page has scrolled
   past it the bar detaches: the full-bleed background drops away, the inner
   bar becomes a floating pill, and scrolling down slides it out of view. The
   first upward scroll brings it back (see js/main.js). The pill inherits
   whatever background class header.php put on the bar, so both the light and
   the dark header variants keep their colour. */
#main-header {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background-color 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
}

#main-header .header-bar {
  transition: border-radius 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

/* Detached: floating pill, clear of the viewport edges. */
#main-header.is-detached {
  background-color: transparent !important;
  padding-left: var(--header-inset);
  padding-right: var(--header-inset);
  transform: translateY(0);
  transition: transform 0.35s ease, background-color 0.3s ease, padding 0.3s ease,
    opacity 0.2s ease;
}

#main-header.is-detached .header-bar {
  border-radius: 9999px;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.18), 0 2px 6px -2px rgba(0, 0, 0, 0.08);
}

/* Design marks (see src/tailwind.css) frame the corners of the pill's box once
   it detaches, fading in with it. The attached full-bleed bar goes without. */
#main-header .header-bar::before {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#main-header.is-detached .header-bar::before {
  opacity: 1;
}

/* Tucked away while the reader is scrolling down. */
#main-header.is-detached.is-hidden {
  transform: translateY(calc(-100% - 0.75rem));
}

@media (prefers-reduced-motion: reduce) {
  #main-header,
  #main-header.is-detached,
  #main-header .header-bar,
  #main-header .header-bar::before {
    transition: none;
  }
}

/* Mobile Menu Styles */
/* The panel is the header pill continued to the bottom of the viewport: the same
   inset as #main-header.is-detached on all four sides, the same corner radius,
   and - via the background class header.php puts on it - the same colour. The
   page stays visible in the margin around it. */
#mobile-menu {
  position: fixed;
  top: var(--header-inset);
  right: var(--header-inset);
  bottom: var(--header-inset);
  left: var(--header-inset);
  z-index: 50;
  border-radius: var(--header-pill-radius);
  overflow: hidden; /* clip the content to the rounded corners */
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.18), 0 2px 6px -2px rgba(0, 0, 0, 0.08);
}

#mobile-menu.show {
  display: flex !important;
  animation: fadeIn 0.25s ease-out forwards;
}

/* The panel stands in for the header while it is open, so the real header gets
   out of the way instead of showing through the margin above it. */
body.mobile-menu-open #main-header {
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Button Styles */
.btn-primary {
  background-color: #d42b4a !important;
  border-color: #d42b4a !important;
  color: white !important;
  padding: 0.75rem 2rem !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover {
  background-color: #b0213b !important;
  border-color: #b0213b !important;
  color: white !important;
  text-decoration: none !important;
}

/* Hero Section Styles - Matching Astro Component */
.hero-section {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

/* Full height styling only for hero with background image */
.hero-with-bg {
  height: 100vh; /* Full viewport height */
  min-height: 600px; /* Minimum height on small screens */
  overflow: hidden; /* Prevent scrolling within the section */
  margin-top: 0; /* The header is out of flow, so the hero already starts at the top */
  padding-top: var(--header-height); /* Keep hero content clear of the header bar */
}

/* No background hero - let it size based on content with proper spacing */
.hero-no-bg {
  min-height: auto;
  margin-top: 0; /* No negative margin needed */
  padding-top: 0; /* No header offset padding needed */
  margin-bottom: 4rem; /* Add significant spacing to prevent overlap with following sections */
  padding-bottom: 2rem; /* Additional padding for extra clearance */
  background-color: white;
}

/* Background image container styling */
.hero-with-bg > div:first-child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: #111827;
}

/* Image styling to ensure full coverage */
.hero-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hero content container */
.hero-content {
  position: relative;
  z-index: 10;
}

.hero-content-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

/* Hero text styling */
.hero-tagline {
  font-size: 1.5rem;
  font-weight: 600;
  color: #e1516b;
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 4rem;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.hero-title-with-bg {
  color: white;
}

.hero-title-no-bg {
  color: #111827;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2.5rem;
  opacity: 0.9;
  line-height: 1.4;
}

.hero-subtitle-with-bg {
  color: white;
}

.hero-subtitle-no-bg {
  color: #374151;
}

/* Hero actions */
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  text-align: center;
  border-radius: 9999px;
  transition: all 0.3s ease;
  font-weight: 500;
  text-decoration: none;
}

.hero-action-primary {
  background-color: #d42b4a;
  color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.hero-action-primary:hover {
  background-color: #b0213b;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  color: white;
  text-decoration: none;
}

.hero-action-secondary {
  color: #111827;
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.hero-action-secondary:hover {
  background-color: #f9fafb;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  color: #111827;
  text-decoration: none;
}

/* Responsive design for hero */
@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
  }
  
  .hero-content {
    padding: 1.5rem 2rem;
  }
}

@media (min-width: 768px) {
  .hero-no-bg {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  .hero-content {
    padding: 1.5rem 5rem;
  }
  
  .hero-content-inner {
    grid-template-columns: 4fr 2fr;
  }
  
  .hero-title {
    font-size: 3rem;
  }
}

@media (min-width: 768px) {
  .hero-with-bg {
    height: 70vh;
  }

  .hero-title {
    font-size: 2.5rem;
    line-height: 3.25rem;
  }
  
  .hero-content-inner .hero-secondary {
    display: block;
  }
}

@media (min-width: 1024px) {

  /* Trim the content padding so it still fits the shorter hero */
  .hero-with-bg .hero-content {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .hero-title {
    font-size: 3rem;
    line-height: 3.75rem;
  }
  
  .hero-content-inner .hero-secondary {
    display: block;
  }
}

/* Outcomes Section Styles */
.outcomes-section {
  padding: 4rem 0;
}

.outcome-item {
  margin-bottom: 6rem;
}

.outcome-content {
  padding: 2rem 0;
}

.outcome-image {
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* FAQ Styles */
.faq-section {
  padding: 4rem 0 6rem 0;
  background: white;
}

.faq-item {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 2rem;
}

.faq-question {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  text-align: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.5rem;
  margin: -0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.faq-question:hover {
  background: rgba(243, 244, 246, 0.5);
}

.faq-question:focus {
  outline: 2px solid #e1516b;
  outline-offset: 2px;
}

.faq-answer {
  margin-top: 1rem;
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.75;
}

.faq-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #9ca3af;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.faq-icon.rotate-45 {
  transform: rotate(45deg);
}

/* Responsive Design */
@media (max-width: 639px) {
  .outcome-item {
    margin-bottom: 4rem;
  }
  
  .outcome-content {
    padding: 1rem 0;
  }
}

@media (max-width: 767px) {
  .hero-content {
    padding: 4rem 1rem;
    min-height: 70vh;
  }
}

/* Utility Classes */
.text-balance {
  text-wrap: balance;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.arrow-base {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.arrow-animated {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform: translate(0, 0);
  opacity: 0;
}

.group:hover .arrow-base {
  transform: translate(16px, 0);
  opacity: 0;
}

.group:hover .arrow-animated {
  transform: translate(16px, 0);
  opacity: 1;
}


/* WordPress Core Overrides - Remove default styling */
#wpadminbar {
  display: none !important;
}

.admin-bar body {
  margin-top: 0 !important;
}

.site {
  margin: 0 !important;
  padding: 0 !important;
}

.site-inner {
  margin: 0 !important;
  padding: 0 !important;
}

.content-area {
  margin: 0 !important;
  padding: 0 !important;
}

.site-main {
  margin: 0 !important;
  padding: 0 !important;
}

.hentry {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.entry-content {
  margin: 0 !important;
  padding: 0 !important;
}

.entry-header {
  display: none !important;
}

.entry-footer {
  display: none !important;
}

.post-navigation {
  display: none !important;
}

.comment-navigation {
  display: none !important;
}

.comments-area {
  display: none !important;
}

.sidebar {
  display: none !important;
}

.widget-area {
  display: none !important;
}

/* Remove Twenty Twenty-X theme styles */
.wp-site-blocks {
  margin: 0 !important;
  padding: 0 !important;
}

.wp-block-group {
  margin: 0 !important;
  padding: 0 !important;
}

.wp-block-group__inner-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* WordPress specific overrides */
.wp-block-image {
  margin: 0 !important;
}

.wp-block-group__inner-container {
  margin: 0 !important;
}

.entry-header {
  display: none !important;
}

.entry-footer {
  display: none !important;
}

.site-header {
  margin: 0 !important;
  padding: 0 !important;
}

.site-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Tailwind utilities are generated at runtime by the Play CDN (see
   ioteq_enqueue_assets() in functions.php). Do not re-declare them here: a
   hand-rolled `.px-4 { ... !important }` beats every responsive variant the
   CDN generates (`md:px-8`, `lg:px-12`, ...), because !important wins over
   non-!important regardless of specificity or source order. Anything below
   this point should be genuinely custom to the theme. */

/* Prose Styles - Matching Tailwind Typography */
.prose {
  color: #374151;
  max-width: 65ch;
  line-height: 1.75;
}

.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose p:first-child {
  margin-top: 0;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose h1 {
  color: #111827;
  font-weight: 600;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose h2 {
  color: #111827;
  font-weight: 600;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose h3 {
  color: #111827;
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose h4 {
  color: #111827;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose h5 {
  color: #111827;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose h6 {
  color: #111827;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose a {
  color: #d42b4a;
  text-decoration: underline;
  font-weight: 500;
}

.prose a:hover {
  color: #b0213b;
}

.prose strong {
  color: #111827;
  font-weight: 600;
}

.prose ul {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.prose ol {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose blockquote {
  font-weight: 500;
  font-style: italic;
  color: #111827;
  border-left-width: 0.25rem;
  border-left-color: #e5e7eb;
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}

.prose code {
  color: #111827;
  font-weight: 600;
  font-size: 0.875em;
  background-color: #f3f4f6;
  padding: 0.2em 0.4em;
  border-radius: 0.375rem;
}

.prose pre {
  color: #e5e7eb;
  background-color: #374151;
  overflow-x: auto;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding: 0.8571429em 1.1428571em;
}

.prose img {
  margin-top: 2em;
  margin-bottom: 2em;
  max-width: 100%;
  height: auto;
}

.prose table {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose th {
  color: #111827;
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}

.prose td {
  vertical-align: baseline;
  padding-right: 0.5714286em;
  padding-top: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}

/* Prose size variants */
.prose-lg {
  font-size: 1.125em;
  line-height: 1.7777778;
}

.prose-lg p {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}

.prose-lg h1 {
  font-size: 2.6666667em;
  margin-top: 0;
  margin-bottom: 0.8333333em;
  line-height: 1;
}

.prose-lg h2 {
  font-size: 1.6666667em;
  margin-top: 1.8666667em;
  margin-bottom: 1.0666667em;
  line-height: 1.3333333;
}

.prose-lg h3 {
  font-size: 1.3333333em;
  margin-top: 1.6666667em;
  margin-bottom: 0.6666667em;
  line-height: 1.5;
}

/* Prose utility classes */
.prose.max-w-none {
  max-width: none;
}

.prose-primary a {
  color: #e1516b;
}

.prose-primary a:hover {
  color: #d42b4a;
}

/* Gallery content slider */
.gallery-section-container {
  overflow-x: hidden;
}

/* Scrollable gallery.
   The row lines up with every other container on the page: same 80rem cap and
   the same side padding, so the outer cards sit flush with the heading above
   them at any width. The stage is a three column grid - gutter, container,
   gutter - and the paging zones take the gutters, the only space they can have
   without covering a card.

   --gallery-gutter mirrors the Tailwind padding the page's containers use. The
   default follows `px-4 sm:px-6 lg:px-8`, which the section templates use; a
   page built on a single `px-8` adds .gallery-gutter-flat. */
.scrollable-gallery {
  position: relative;
  width: 100%;
  --gallery-gutter: 1rem;
  --gallery-container-max: 80rem;
}

/* Breakpoints in rem, the units Tailwind's own sm/lg use, so the gutter steps
   land on exactly the same widths as the containers it is matching. */
@media (min-width: 40rem) {
  .scrollable-gallery {
    --gallery-gutter: 1.5rem;
  }
}

@media (min-width: 64rem) {
  .scrollable-gallery {
    --gallery-gutter: 2rem;
  }
}

/* Pages whose containers are a single `px-8` have no breakpoint steps to match,
   so the gutter holds at 2rem from the narrowest width up. Specificity, not
   order, keeps this ahead of the stepped default above. */
.scrollable-gallery.gallery-gutter-flat {
  --gallery-gutter: 2rem;
}

.gallery-stage {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    calc(min(100%, var(--gallery-container-max)) - (var(--gallery-gutter) * 2))
    minmax(0, 1fr);
}

/* Clicking either side of the row pages it. Transparent, and kept to the
   gutters so it never sits on top of a card. */
.gallery-zone {
  grid-row: 1;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.gallery-zone-prev { grid-column: 1; }
.gallery-zone-next { grid-column: 3; }

.gallery-zone:disabled {
  cursor: default;
}

.gallery-container {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Horizontal drags belong to the swipe handler, vertical ones to the page. */
  touch-action: pan-y;
}

.gallery-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  gap: 2rem;
  justify-content: flex-start;
}

.gallery-item {
  flex: 0 0 auto;
  width: var(--gallery-item-width, 100%);
}

.gallery-link,
.gallery-content {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease-in-out;
}

.gallery-image {
  position: relative;
  width: 100%;
  /* Cards resize with the row; the image holds its shape. */
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: 0;
  background: #f3f4f6;
}

.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease-in-out;
}

.gallery-link:hover .gallery-image img {
  transform: scale(1.05);
}

.gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  color: #9ca3af;
  gap: 0.5rem;
}

.gallery-placeholder span {
  font-size: 0.875rem;
  font-weight: 500;
}

.gallery-title {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  text-align: center;
}

/* Light text for dark backgrounds */
.scrollable-gallery.dark-theme .gallery-title {
  color: #ffffff;
}

/* Page indicators */
.gallery-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.gallery-dot {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.2);
  cursor: pointer;
  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.gallery-dot:hover {
  background: rgba(17, 24, 39, 0.35);
}

.gallery-dot.is-active {
  width: 2.25rem;
  background: #e1516b;
}

.gallery-dot.is-active:hover {
  background: #e1516b;
}

.scrollable-gallery.dark-theme .gallery-dot {
  background: #ffffff;
}

.scrollable-gallery.dark-theme .gallery-dot:hover {
  background: #ffffff;
}

.scrollable-gallery.dark-theme .gallery-dot.is-active,
.scrollable-gallery.dark-theme .gallery-dot.is-active:hover {
  background: #e1516b;
}

/* Responsive adjustments. Section padding and heading sizes come from the
   Tailwind classes in the template, so only layout is set here. */
@media (min-width: 769px) and (max-width: 1400px) {
  .gallery-track {
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .gallery-track {
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  /* Swipe and the dots carry the paging at this size - the gutters are too
     narrow to hit. The row keeps its width either way. */
  .gallery-zone {
    display: none;
  }

  .gallery-dots {
    margin-top: 2rem;
  }
}

/* Split background section.
   A section whose content stays inside the page's 80rem container while each
   half of a two column grid paints a background that runs to the edge of the
   viewport.

   The two colours are laid down by the section itself, as a pair of absolutely
   positioned halves, rather than by the columns. The section is full width, so
   its 50% is the centre of the viewport, which is also the centre of the
   centred container and therefore the centre of the grid's gap - the seam
   lands exactly between the two columns at any width, with no vw units and so
   no scrollbar rounding. The markup inside is an ordinary container and grid.

   Colours are variables so a page can override them on the section itself. */
.split-bg {
  --split-bg-left: #fff;
  --split-bg-right: var(--color-olive-300);
  position: relative;
}

.split-bg::before,
.split-bg::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 50%;
  z-index: 0;
}

.split-bg::before {
  inset-inline-start: 0;
  background: var(--split-bg-left);
}

.split-bg::after {
  inset-inline-end: 0;
  background: var(--split-bg-right);
}

/* The container, above the two halves. */
.split-bg > * {
  position: relative;
  z-index: 1;
}

/* Below lg the columns stack, so a vertical seam is meaningless: the left
   colour becomes the background of the whole section and the second column
   carries its own. Bleeding that column out only has to cancel the container's
   `px-4`, because below 80rem the container is already the full width of the
   page - `mx-auto` has no margins to undo. Keep the padding here in step with
   the container's gutter. */
@media (max-width: 63.999rem) {
  .split-bg::before {
    width: 100%;
  }

  .split-bg::after {
    display: none;
  }

  .split-bg-right {
    margin-inline: -2rem;
    padding-inline: 2rem;
  }
}

/* Client logo slider.
   The front page's logo wall as a carousel: the row lives in an overflow-hidden
   viewport and steps one logo at a time, driven by the arrows beside the
   heading and by an auto timer. main.js sizes the columns - the same 2 -> 3 ->
   4 -> 6 steps the static wall on the About page gets from its grid - and
   clones enough logos onto the end that stepping left never runs out of row.

   Nothing here is conditional on main.js having run except the arrows, which
   the template ships hidden: with no JS the track is simply a row of logos. */
.logo-slider__viewport {
  overflow: hidden;
}

.logo-slider__track {
  display: flex;
  align-items: center;
  /* gap-x-16, the gutter the static wall uses. */
  gap: 4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Ease-out (quint): quick to leave, long settle into place. */
  transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The width is a calc() written by main.js, so the columns divide the row
   exactly. The fallback keeps the row readable before the first measure. */
.logo-slider__item {
  flex: 0 0 auto;
  width: var(--logo-slider-item-width, 50%);
}

/* The wrap back to the start of the set is a jump, not a slide: it lands on
   the same logos the track already shows, so with the transition off it cannot
   be seen. */
.logo-slider__track.is-jumping {
  transition: none;
}

/* Below Tailwind's sm the row is two logos wide, where a 4rem gutter eats most
   of it. */
@media (max-width: 39.999rem) {
  .logo-slider__track {
    gap: 2rem;
  }
}

/* The arrows hang in the container's px-8 gutters either side of the row -
   outside the viewport, so they never cover a logo, and the row keeps the
   heading's edges. Their width is the gutter's. */
.logo-slider__stage {
  position: relative;
}

.logo-slider__arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.logo-slider__arrow--prev { right: 100%; }
.logo-slider__arrow--next { left: 100%; }

.logo-slider__arrow:hover {
  opacity: 1;
}

.logo-slider__arrow:focus-visible {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: -2px;
  border-radius: 2px;
}

/* The timer is left switched off in main.js; the arrows still page, just
   without the slide. */
@media (prefers-reduced-motion: reduce) {
  .logo-slider__track {
    transition: none;
  }
}