/*
Theme Name: Contentor-hs
Theme URI: https://hallonsoda.se/
Author: Anders Larsson
Description: Fristående, optimerat Contentor-tema baserat på APStract Base och APStract Contentor.
Version: 1.0.0
Text Domain: contentor-hs
*/

/* Fonts are loaded via functions.php for cacheable, non-blocking browser hints. */

/* ========== CSS Custom Properties ========== */
:root {
  /* Colors */
  --color-primary: #7367f0;
  --color-secondary: #4ecdcc;
  --color-text: #191919;
  --color-text-light: #444;
  --color-text-muted: #666;
  --color-text-gray: #999;
  --color-text-light-gray: #bbb;
  --color-background: #f9fafb;
  --color-white: #fff;
  --color-border: #ececec;
  --color-shadow: rgba(20, 24, 38, 0.08);
  --color-shadow-light: rgba(44, 119, 231, 0.07);
  
  /* Layout */
  --max-width: 1200px;
  --border-radius: 0.7rem;
  --border-radius-large: 1.1rem;
  --transition: 0.25s ease;
  --transition-smooth: 0.4s cubic-bezier(.77,0,.18,1);
  
  /* Typography */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --font-family: var(--font-sans);
  --font-size-base: 1rem;
  --font-size-large: 1.2rem;
  --line-height-base: 1.65;
  --hero-title-size: 3.5rem;     /* 56px — display token, midpoint of 48–64px */
  --hero-subtitle-size: 1.25rem;  /* 20px — lead token */
  --section-separator-height: 60px;
  --hero-separator-height: 99px;

  /* Buttons */
  --button-radius: 10px;
  --button-padding-y: 0.9rem;
  --button-padding-x: 1.5rem;
  --button-font-size: 1rem;
  --button-font-weight: 700;
  --button-line-height: 1.1;
  --button-shadow: 0 8px 18px rgba(15, 26, 255, 0.16);
  --button-shadow-hover: 0 12px 24px rgba(15, 26, 255, 0.22);
  --button-primary-bg: var(--contentor-blue, hsl(231.06, 100%, 53.92%));
  --button-primary-bg-hover: var(--contentor-blue-dark, hsl(231, 100%, 40%));
  --button-primary-text: #ffffff;
  --button-secondary-bg: transparent;
  --button-secondary-bg-hover: rgba(15, 26, 255, 0.06);
  --button-secondary-text: var(--contentor-blue, hsl(231.06, 100%, 53.92%));
  --button-secondary-border: var(--contentor-blue, hsl(231.06, 100%, 53.92%));
  --button-text-link: var(--color-text, #191919);
}

/* Single mobile step — keep the desktop scale stable down to the hamburger
   breakpoint (1024px), then drop to a phone-friendly size. */
@media (max-width: 720px) {
  :root {
    --hero-title-size: 2.5rem;   /* 40px — bottom of display token range */
    --hero-subtitle-size: 1.0625rem; /* 17px — matches body */
  }
}

/* ========== Base & Body ========== */
html {
  overflow-x: clip;
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-background);
  color: var(--color-text);
  overflow-x: clip;
  max-width: 100vw;
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* ========== Sticky Footer Layout ========== */

/* ========== Universal Card Base Style ========== */
.aps-card-base {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px var(--color-shadow);
  padding: 20px;
  transition: var(--transition);
}

.aps-card-base:hover {
  box-shadow: 0 4px 16px var(--color-shadow-light);
  transform: translateY(-2px);
}

/* ========== Global List Styling ========== */
/* Första nivån av listor - punkten/siffran linjerar med texten */
ul, ol {
  padding-left: 1.2em;
  margin: 1em 0;
  list-style-position: outside; /* Punkten/siffran utanför textområdet för korrekt radjustering */
}

/* Konsistent li-styling för alla block */
li {
  list-style: inherit !important;
  margin-bottom: 0.3rem;
}

/* Nästlade listor (andra nivån och djupare) behåller standardbeteende */
ul ul, ol ol, ul ol, ol ul {
  padding-left: 1.5em;
  list-style-position: outside; /* Standardbeteende för nästlade listor */
}

/* Block width adjustments */
.alignwide {
    max-width: 1200px;
}

.alignfull {
    max-width: 100%;
    width: 100%;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Nullställ WP-block-margins för heading och paragraf i våra block */

/* ========== Responsive video embeds (YouTube, Vimeo etc) ========== */
.wp-block-embed.is-type-video .wp-block-embed__wrapper,
.wp-block-embed-youtube .wp-block-embed__wrapper,
.wp-block-embed-vimeo .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  width: 100%;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
.wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.wp-block-embed-vimeo .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* ========== Button Components ========== */
.theme-buttons,
.hs-buttons {
  display: flex;
  gap: 1.3rem;
  flex-wrap: wrap;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  justify-content: flex-start;
}

/* --- Buttons (reusable) --- */
.theme-buttons a,
.hs-buttons a {
  display: inline-block;
  text-align: center;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 1rem;
  text-decoration: none;
  font-size: 0.7rem;
  transition: all .3s cubic-bezier(.68,-0.2,.4,1.2);
  box-shadow:
    0 2px 5px #0003,
    inset 0 0 0 1px #0001,
    inset 0 2px #fff3;
  border: none;
  cursor: pointer;
  font-weight: 600;
  min-width: 110px;
}

.theme-buttons .primary,
.hs-buttons .primary {
  background-color: #2c77e7;
  background-image: linear-gradient(#617fe3, #3e63dd);
  color: #eef5ff !important;
}

.theme-buttons .primary:hover,
.theme-buttons .primary:focus,
.hs-buttons .primary:hover,
.hs-buttons .primary:focus {
  background-color: #205bc4;
  background-image: linear-gradient(#3e63dd, #205bc4);
  color: #fff !important;
}

.theme-buttons .secondary,
.hs-buttons .secondary {
  background-color: #eef5ff;
  color: #2c77e7 !important;
}

.theme-buttons .secondary:hover,
.theme-buttons .secondary:focus,
.hs-buttons .secondary:hover,
.hs-buttons .secondary:focus {
  background-color: #e2e8f7;
  color: #1d4078 !important;
  border-color: #205bc4;
}

/* Text link variant - tighter gap when container has text links */
.hs-buttons:has(.text) {
  gap: 0.25rem;
}

.hs-buttons .text:first-child {
  margin-top: 0.4rem !important;
}

.theme-buttons .text,
.hs-buttons .text {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  padding: 0.15rem 0 !important;
  margin: 0 !important;
  min-width: auto !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  width: 100%;
  flex-basis: 100%;
  justify-content: flex-start;
  text-align: left;
}

.hs-buttons .text .hs-buttons__chevron {
  display: inline-flex;
  transition: transform 0.2s ease;
}

.theme-buttons .text:hover,
.theme-buttons .text:focus,
.hs-buttons .text:hover,
.hs-buttons .text:focus {
  background: none !important;
  box-shadow: none !important;
  transform: none;
  text-decoration: underline;
}

.hs-buttons .text:hover .hs-buttons__chevron {
  transform: translateX(3px);
}

/* ========== HERO BLOCK ========== */
/* --- Layout och Flex för container --- */
.hs-hero__container {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  min-height: 340px;
  overflow: visible;
  /* CSS-variabler --image-ratio och --text-ratio kommer från inline style på detta element */
}
/* --- Bilddel --- */
.hs-hero__media {
  position: relative;
  z-index: 1;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-hero__media img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
}
/* --- Textdel --- */
.hs-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: none;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  position: static;
  z-index: 2;
  overflow: hidden;
  padding: 0;
  word-wrap: break-word;
  min-width: 0;
}
.hs-hero--img-left .hs-hero__inner {
  text-align: right;
  align-items: flex-end;
}
.hs-hero--img-right .hs-hero__inner {
  text-align: left;
  align-items: flex-start;
}
/* Hero typography is consolidated in ONE block at the bottom of the file
   under "Site typography → Hero". All .hs-hero__* rules live there. */

/* ========== Section Wrapper System ========== */
/* 
 * Redaktören använder wp-block-hs-section-wrapper för centrerat innehåll
 * Allt utanför wrapper = edge-to-edge (medvetet val)
 * Enkelt och förutsägbart system
 */

/* APS Section Wrapper - theme handles visual styling only */
.wp-block-hs-section-wrapper .section-wrapper__container {
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  padding: 1.5rem 1.5rem;
  box-sizing: border-box;
}

/* Full-width containers (not handled by section-wrapper plugin) */
.wp-block-cover,
.wp-block-group.alignfull {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.wp-block-hs-section-wrapper:last-child {
  margin-bottom: 0 !important;
}

/* Ensure no gaps between main content and footer */
#main-content {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
}

#main-content:last-child,
main:last-child {
  margin-bottom: 0 !important;
}

/* Remove any default WordPress block spacing at page bottom */
.wp-block:last-child,
.wp-block-group:last-child,
.wp-block-hs-section-wrapper:last-child {
  margin-bottom: 0 !important;
}

/* Ensure body has no bottom spacing */
body {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Reset - ta bort all annan spacing som kan störa */
* {
  box-sizing: border-box;
}

/* --- Responsivitet Hero --- */
@media (max-width: 1200px) {
  .hs-hero__container {
    max-width: 98vw;
  }
}
@media (max-width: 768px) {
  .hs-hero__container {
    flex-direction: column;
    min-height: 0;
    gap: 2rem;
  }
  .hs-hero__media,
  .hs-hero__inner {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }
  .hs-hero__media {
    order: -1; /* Visa alltid bilden först på mobil */
  }
  .hs-hero__media img {
    max-width: 90vw;
    max-height: 50vh;
    min-height: 300px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
  }
  .hs-hero__inner {
    text-align: center !important;
    align-items: center !important;
    padding: 1rem;
  }
}
@media (max-width: 600px) {
  .hs-hero__container {
    gap: 1.5rem;
  }
  .hs-hero__inner { 
    padding: 0.8rem 1rem;
  }
  .hs-hero__media img {
    border-radius: var(--border-radius);
    max-width: 95vw;
    max-height: 45vh;
    min-height: 250px;
    width: auto;
    height: auto;
    object-fit: cover;
  }
  .hs-hero__title { 
    margin-bottom: 0.8rem;
  }
}


/* === APStract Grid Cards List Styles === */
.hs-grid-cards__inner-content ul,
.hs-grid-cards__inner-content ol {
  list-style: initial !important;
  margin-bottom: 1rem;
  list-style-position: outside !important; /* Punkten utanför för korrekt radjustering */
  padding-left: 1.2em !important; /* Korrekt indentering */
}

.hs-grid-cards__inner-content ul {
  list-style-type: disc !important;
}

.hs-grid-cards__inner-content ol {
  list-style-type: decimal !important;
}

/* Nästlade listor i APStract Grid Cards */
.hs-grid-cards__inner-content ul ul,
.hs-grid-cards__inner-content ol ol,
.hs-grid-cards__inner-content ul ol,
.hs-grid-cards__inner-content ol ul {
  padding-left: 1.5em !important;
  list-style-position: outside !important;
}

/* === Grid Item Block === */
.grid-item-block {
  background: #fff;
  border-radius: 1.1em;
  box-shadow: 0 2px 8px rgba(44, 119, 231, 0.07);
  padding: 2.2em 1.6em 1.6em 1.6em;
  margin: 0 auto;
  text-align: center;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
}

.grid-item-block__icon {
  font-size: 2.7rem;
  color: #2c77e7;
  margin-bottom: 0.2em;
}
.grid-item-block__heading {
  font-size: 1.32rem;
  font-weight: 500;
  margin: 0 0 0.3em 0;
}
.grid-item-block__video {
  width: 100%;
  max-width: 360px;
  margin: 0 auto 1em auto;
}
.grid-item-block__video iframe {
  width: 100%;
  border-radius: 0.7em;
  aspect-ratio: 16/9;
  min-height: 180px;
  background: #eef2f6;
}
.grid-item-block__text {
  font-size: 1.04rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 700px) {
  .grid-item-block {
    max-width: 98vw;
    padding: 1.3em 0.5em 1.3em 0.5em;
  }
}

.card-grid-block__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}
/* Uppdaterad för att matcha hs-grid-cards design */
.card-item-block {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px var(--color-shadow);
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 280px;
  transition: var(--transition);
}
.card-item-block__icon {
  font-size: 2.6rem;
  color: #4ecdcc;
  margin-bottom: 1.1rem;
}
.card-item-block__title {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 0.9rem 0;
  color: #2c77e7;
}
.card-item-block__video {
  width: 100%;
  margin: 1.2rem 0;
  border-radius: 0.9rem;
  overflow: hidden;
}
.card-item-block__text {
  color: #444;
  font-size: 1.09rem;
  line-height: 1.5;
}

/* Gör grid responsivt */
@media (max-width: 900px) {
  .card-grid-block__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .card-item-block {
    min-height: 0;
  }
}

.hs-grid-cards {
  display: grid;
  gap: 24px;
}

.hs-grid-cards--small {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.hs-grid-cards--medium {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.hs-grid-cards--large {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

/* ========== Section Wrapper Theme Presets ========== */
/* 
 * Base theme does NOT define section wrapper presets
 * Child themes should define their own site-specific presets
 * This ensures clean separation and avoids style conflicts
 */

/* ========== APStract Buttons Styling ========== */
.hs-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.hs-buttons a {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
}

.hs-buttons a.primary {
  background: var(--site-primary, var(--color-primary));
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(115, 103, 240, 0.2);
}

.hs-buttons a.primary:hover {
  background: var(--site-secondary, var(--color-secondary));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(115, 103, 240, 0.3);
}

.hs-buttons a.secondary {
  background: transparent;
  color: var(--site-primary, var(--color-primary));
  border-color: var(--site-primary, var(--color-primary));
}

.hs-buttons a.secondary:hover {
  background: var(--site-primary, var(--color-primary));
  color: #ffffff;
  transform: translateY(-1px);
}

.hs-buttons .hs-buttons__icon {
  margin-right: 8px;
}

/* Responsive knapp-styling */
@media (max-width: 768px) {
  .hs-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .hs-buttons a {
    width: 100%;
    justify-content: center;
  }
}

/* ========== 404 Error Page ========== */
.error-404-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
}

.error-404-content {
  max-width: 600px;
  text-align: center;
  width: 100%;
}

.error-404-header {
  margin-bottom: 2rem;
}

.error-404-title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--site-primary, var(--color-primary));
  margin: 0 0 1rem 0;
  line-height: 1.2;
  text-shadow: 0 4px 12px rgba(115, 103, 240, 0.1);
}

.error-404-subtitle {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.error-404-message {
  margin-bottom: 2.5rem;
}

.error-404-message p {
  font-size: 1.1rem;
  color: var(--color-text-light);
  margin: 0;
  line-height: 1.6;
}

.error-404-actions {
  margin-bottom: 2.5rem;
}

.error-404-actions .btn {
  display: inline-block;
  background: var(--site-primary, var(--color-primary));
  color: #ffffff;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  transition: var(--transition);
  border: none;
  box-shadow: 0 2px 8px rgba(115, 103, 240, 0.2);
}

.error-404-actions .btn:hover {
  background: var(--site-secondary, var(--color-secondary));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(115, 103, 240, 0.3);
}


/* Responsive 404 */
@media (max-width: 768px) {
  .error-404-page {
    min-height: 50vh;
    padding: 1rem;
  }
  
  .error-404-title {
    font-size: 2.5rem;
  }
  
  .error-404-subtitle {
    font-size: 1.4rem;
  }
}

/* ========== Contentor Site Styles ========== */
/* Site-specific customizations for Contentor */
/* Parent styles are loaded via functions.php wp_enqueue_style() */

/* Import Roboto font from Google Fonts */

/* Heading defaults are defined at the end of this file under "Site typography",
   using :where() so any class-targeted block/plugin rule wins automatically. */

/* Contentor: optional green frame for core/image block */
.wp-block-image.is-style-contentor-green-frame img {
  border: 6px solid var(--contentor-green);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* Custom colors for Contentor site - Contentor Brand Colors */
:root {
  /* Primary brand colors - Contentor's actual brand colors */
  --site-primary: hsl(231.06, 100%, 53.92%);
  /* Contentor Blue #0f1aff */
  --site-secondary: hsla(155.38, 100%, 45.88%, 1);
  /* Contentor Green #00ea6e */

  /* Extended color palette */
  --contentor-blue-light: hsl(231, 90%, 85%);
  /* Lighter version of brand blue */
  --contentor-blue: hsl(231.06, 100%, 53.92%);
  /* Main brand blue */
  --contentor-blue-dark: hsl(231, 100%, 40%);
  /* Darker brand blue */
  --contentor-green: hsla(155.38, 100%, 45.88%, 1);
  /* Main brand green */
  --contentor-green-dark: hsl(155, 100%, 35%);
  /* Darker brand green */
  --contentor-gray-light: #f8fafc;
  --contentor-gray: #64748b;
  --contentor-gray-dark: #1e293b;

  /* Button colors for different presets */
  --button-primary-default: hsl(231.06, 100%, 53.92%);
  --button-primary-hover: hsl(231, 100%, 40%);
  --button-secondary-default: hsla(155.38, 100%, 45.88%, 1);
  --button-secondary-hover: hsl(155, 100%, 35%);
}

/* ========== Section Wrapper Preset Styles for Contentor ========== */

.wp-block-hs-section-wrapper.theme-preset--light {
  background: #ffffff !important;
  color: var(--color-text) !important;
  border: none;
  box-shadow: none;
}

.wp-block-hs-section-wrapper.theme-preset--gray-light {
  background: #f8fafc !important;
  color: var(--color-text) !important;
  border: none;
  box-shadow: none;
}

.wp-block-hs-section-wrapper.theme-preset--contentor-blue {
  background: var(--contentor-blue) !important;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 12px hsla(231, 100%, 53%, 0.3);
}

.wp-block-hs-section-wrapper.theme-preset--contentor-blue-light {
  background: var(--contentor-blue-light) !important;
  color: #1e293b !important;
  border: none;
  box-shadow: 0 2px 8px hsla(231, 90%, 85%, 0.2);
}

.wp-block-hs-section-wrapper.theme-preset--contentor-green {
  background: var(--contentor-green) !important;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 12px hsla(155, 100%, 45%, 0.3);
}

.wp-block-hs-section-wrapper.theme-preset--contentor-gradient {
  background: linear-gradient(135deg, var(--contentor-blue) 0%, var(--contentor-green) 100%) !important;
  background-size: 200% 200% !important;
  animation: subtle-shift 12s ease-in-out infinite;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 12px hsla(231, 100%, 53%, 0.3);
}

.wp-block-hs-section-wrapper.theme-preset--contentor-dark {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: none;
  box-shadow: 0 4px 12px rgba(30, 41, 59, 0.5);
}

.wp-block-hs-section-wrapper.theme-preset--contentor-professional {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Force light text for headings/body inside dark presets — overrides
   the explicit color on :where(h1..h6), p, li which would otherwise win
   over inherited color from the wrapper. */
.theme-preset--contentor-blue :is(h1, h2, h3, h4, h5, h6, p, li, blockquote),
.theme-preset--contentor-green :is(h1, h2, h3, h4, h5, h6, p, li, blockquote),
.theme-preset--contentor-gradient :is(h1, h2, h3, h4, h5, h6, p, li, blockquote),
.theme-preset--contentor-dark :is(h1, h2, h3, h4, h5, h6, p, li, blockquote) {
  color: #ffffff;
}

/* h6 eyebrow keeps a slightly muted tone even on dark */
.theme-preset--contentor-blue h6,
.theme-preset--contentor-green h6,
.theme-preset--contentor-gradient h6,
.theme-preset--contentor-dark h6 {
  color: rgba(255, 255, 255, 0.75);
}

/* Graphic effect: bottom color uses next section preset */
.wp-block-hs-section-wrapper.theme-preset_next--light {
  --section-effect-outside-bottom: #ffffff;
}

.wp-block-hs-section-wrapper.theme-preset_next--gray-light {
  --section-effect-outside-bottom: #f8fafc;
}

.wp-block-hs-section-wrapper.theme-preset_next--contentor-blue {
  --section-effect-outside-bottom: var(--contentor-blue);
}

.wp-block-hs-section-wrapper.theme-preset_next--contentor-blue-light {
  --section-effect-outside-bottom: var(--contentor-blue-light);
}

.wp-block-hs-section-wrapper.theme-preset_next--contentor-green {
  --section-effect-outside-bottom: var(--contentor-green);
}

.wp-block-hs-section-wrapper.theme-preset_next--contentor-gradient {
  --section-effect-outside-bottom: var(--contentor-blue);
}

.wp-block-hs-section-wrapper.theme-preset_next--contentor-dark {
  --section-effect-outside-bottom: #1e293b;
}

.wp-block-hs-section-wrapper.theme-preset_next--contentor-professional {
  --section-effect-outside-bottom: #ffffff;
}

/* Animation for gradient preset */
@keyframes subtle-shift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* ========== Graphic Effects for Section Wrapper ========== */

/* Grönt Streck and Separator use the same calm separator treatment. */
.wp-block-hs-section-wrapper.graphic-effect--gront-streck--top,
.wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator--top,
.wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator-diagonal--top {
  position: relative;
  padding-top: var(--section-separator-height) !important;
  overflow: visible;
}

.wp-block-hs-section-wrapper.graphic-effect--gront-streck--bottom,
.wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator--bottom,
.wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator-diagonal--bottom {
  position: relative;
  padding-bottom: var(--section-separator-height) !important;
  overflow: visible;
}

.wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator-diagonal--bottom.no-padding-bottom {
  padding-bottom: var(--section-separator-height) !important;
}

.wp-block-hs-section-wrapper.graphic-effect--gront-streck--bottom::after,
.wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator--bottom::after,
.wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator-diagonal--bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--section-separator-height);
  background-color: var(--section-effect-outside-bottom, #ffffff);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 60" preserveAspectRatio="none"><path d="M0,25 Q600,45 1200,20 L1200,60 L0,60 Z" fill="black"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 60" preserveAspectRatio="none"><path d="M0,25 Q600,45 1200,20 L1200,60 L0,60 Z" fill="black"/></svg>');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 1;
}

.gradient-header-hero .wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator-diagonal--bottom,
.gradient-header-hero .wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator-diagonal--bottom.no-padding-bottom {
  padding-bottom: var(--hero-separator-height) !important;
}

.gradient-header-hero .wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator-diagonal--bottom::after {
  height: var(--hero-separator-height);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 99" preserveAspectRatio="none"><path d="M1200,91 Q600,32 0,8 L0,99 L1200,99 Z" fill="black"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 99" preserveAspectRatio="none"><path d="M1200,91 Q600,32 0,8 L0,99 L1200,99 Z" fill="black"/></svg>');
}

/* ========== Responsive video embeds ========== */
.aps-video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  width: 100%;
  margin: 1.5rem 0;
  border-radius: 8px;
}

.aps-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ========== Universal button styling for all button types ========== */

/* Contentor button size override - larger, more prominent buttons */
.hs-buttons a,
.hs-buttons button {
  font-size: 1.05rem !important;
  padding: 1rem 1.75rem !important;
  border-radius: 12px !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Standard button style - both APStract buttons and lead form */
.hs-buttons a.primary,
.hs-buttons button.primary,
.hs-lead-form__submit {
  background: var(--button-primary-default) !important;
  color: #ffffff !important;
  border: 2px solid transparent !important;
}

.hs-buttons a.primary:hover,
.hs-buttons button.primary:hover,
.hs-lead-form__submit:hover {
  background: var(--button-primary-hover) !important;
  color: #ffffff !important;
}

.hs-buttons a.secondary {
  background: transparent !important;
  color: var(--button-primary-default) !important;
  border: 2px solid var(--button-primary-default) !important;
}

.hs-buttons a.secondary:hover {
  background: var(--button-primary-default) !important;
  color: #ffffff !important;
}

/* Text link variant */
.hs-buttons:has(a.text) {
  gap: 0.25rem !important;
}

.hs-buttons a.text {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: currentColor !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-width: auto !important;
}

.hs-buttons a.text:hover {
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: underline !important;
}

/* ========== Preset-specific button colors - applies to ALL button types ========== */

/* Dark preset - lighter buttons on dark background */
.theme-preset--contentor-dark .hs-buttons a.primary,
.theme-preset--contentor-dark .hs-buttons button.primary,
.theme-preset--contentor-dark .hs-lead-form__submit {
  background: var(--contentor-green) !important;
  color: #000000 !important;
  border: 2px solid transparent !important;
}

.theme-preset--contentor-dark .hs-buttons a.primary:hover,
.theme-preset--contentor-dark .hs-buttons button.primary:hover,
.theme-preset--contentor-dark .hs-lead-form__submit:hover {
  background: var(--contentor-green-dark) !important;
  color: #000000 !important;
}

.theme-preset--contentor-dark .hs-buttons a.secondary,
.theme-preset--contentor-dark .hs-buttons button.secondary {
  background: transparent !important;
  color: var(--contentor-green) !important;
  border: 2px solid var(--contentor-green) !important;
}

.theme-preset--contentor-dark .hs-buttons a.secondary:hover,
.theme-preset--contentor-dark .hs-buttons button.secondary:hover {
  background: var(--contentor-green) !important;
  color: #000000 !important;
}

.theme-preset--contentor-dark .hs-buttons a.text {
  color: #ffffff !important;
}

/* Blue preset - green accent buttons for contrast */
.theme-preset--contentor-blue .hs-buttons a.primary,
.theme-preset--contentor-blue .hs-buttons button.primary,
.theme-preset--contentor-blue .hs-lead-form__submit {
  background: var(--contentor-green) !important;
  color: #000000 !important;
  border: 2px solid transparent !important;
  box-shadow: 0 2px 8px hsla(155, 100%, 45%, 0.3) !important;
}

.theme-preset--contentor-blue .hs-buttons a.primary:hover,
.theme-preset--contentor-blue .hs-buttons button.primary:hover,
.theme-preset--contentor-blue .hs-lead-form__submit:hover {
  background: var(--contentor-green-dark) !important;
  color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px hsla(155, 100%, 35%, 0.4) !important;
}

.theme-preset--contentor-blue .hs-buttons a.secondary,
.theme-preset--contentor-blue .hs-buttons button.secondary {
  background: #ffffff !important;
  color: var(--contentor-green) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3) !important;
}

.theme-preset--contentor-blue .hs-buttons a.secondary:hover,
.theme-preset--contentor-blue .hs-buttons button.secondary:hover {
  background: var(--contentor-green) !important;
  color: #000000 !important;
  border-color: var(--contentor-green) !important;
  transform: translateY(-1px) !important;
}

.theme-preset--contentor-blue .hs-buttons a.text {
  color: #ffffff !important;
}

/* Green preset - blue accent buttons */
.theme-preset--contentor-green .hs-buttons a.primary,
.theme-preset--contentor-green .hs-buttons button.primary,
.theme-preset--contentor-green .hs-lead-form__submit {
  background: var(--contentor-blue) !important;
  color: #ffffff !important;
  border: 2px solid transparent !important;
  box-shadow: 0 2px 8px hsla(231, 100%, 53%, 0.3) !important;
}

.theme-preset--contentor-green .hs-buttons a.primary:hover,
.theme-preset--contentor-green .hs-buttons button.primary:hover,
.theme-preset--contentor-green .hs-lead-form__submit:hover {
  background: var(--contentor-blue-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px hsla(231, 100%, 40%, 0.4) !important;
}

.theme-preset--contentor-green .hs-buttons a.secondary,
.theme-preset--contentor-green .hs-buttons button.secondary {
  background: #ffffff !important;
  color: var(--contentor-blue) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3) !important;
}

.theme-preset--contentor-green .hs-buttons a.secondary:hover,
.theme-preset--contentor-green .hs-buttons button.secondary:hover {
  background: var(--contentor-blue) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.theme-preset--contentor-green .hs-buttons a.text {
  color: #ffffff !important;
}

/* Gradient preset - white buttons for best contrast */
.theme-preset--contentor-gradient .hs-buttons a.primary,
.theme-preset--contentor-gradient .hs-buttons button.primary,
.theme-preset--contentor-gradient .hs-lead-form__submit {
  background: #ffffff !important;
  color: var(--contentor-blue) !important;
  border: 2px solid transparent !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important;
}

.theme-preset--contentor-gradient .hs-buttons a.primary:hover,
.theme-preset--contentor-gradient .hs-buttons button.primary:hover,
.theme-preset--contentor-gradient .hs-lead-form__submit:hover {
  background: #f1f5f9 !important;
  color: var(--contentor-blue-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.4) !important;
}

.theme-preset--contentor-gradient .hs-buttons a.secondary,
.theme-preset--contentor-gradient .hs-buttons button.secondary {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

.theme-preset--contentor-gradient .hs-buttons a.secondary:hover,
.theme-preset--contentor-gradient .hs-buttons button.secondary:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.theme-preset--contentor-gradient .hs-buttons a.text {
  color: #ffffff !important;
}

/* Light blue preset - dark buttons for contrast */
.theme-preset--contentor-blue-light .hs-buttons a.primary,
.theme-preset--contentor-blue-light .hs-buttons button.primary,
.theme-preset--contentor-blue-light .hs-lead-form__submit {
  background: var(--contentor-blue-dark) !important;
  color: #ffffff !important;
  border: 2px solid transparent !important;
  box-shadow: 0 2px 8px hsla(231, 100%, 40%, 0.3) !important;
}

.theme-preset--contentor-blue-light .hs-buttons a.primary:hover,
.theme-preset--contentor-blue-light .hs-buttons button.primary:hover,
.theme-preset--contentor-blue-light .hs-lead-form__submit:hover {
  background: var(--contentor-blue) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px hsla(231, 100%, 53%, 0.4) !important;
}

.theme-preset--contentor-blue-light .hs-buttons a.secondary,
.theme-preset--contentor-blue-light .hs-buttons button.secondary {
  background: #ffffff !important;
  color: var(--contentor-blue-dark) !important;
  border: 2px solid var(--contentor-blue-dark) !important;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.8) !important;
}

.theme-preset--contentor-blue-light .hs-buttons a.secondary:hover,
.theme-preset--contentor-blue-light .hs-buttons button.secondary:hover {
  background: var(--contentor-blue-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.theme-preset--contentor-blue-light .hs-buttons a.text {
  color: var(--contentor-blue-dark) !important;
}

/* Light blue preset - list link hover uses blue instead of green */
.theme-preset--contentor-blue-light .aps-multi-cpt-list__link:hover {
  color: var(--contentor-blue-dark);
}

/* Light blue preset - newsletter button uses blue instead of green */
.theme-preset--contentor-blue-light .contentor-footer__newsletter-button {
  background: var(--contentor-blue-dark);
  color: #ffffff;
  box-shadow: 0 2px 8px hsla(231, 100%, 40%, 0.3);
}

.theme-preset--contentor-blue-light .contentor-footer__newsletter-button:hover {
  background: var(--contentor-blue);
  box-shadow: 0 4px 12px hsla(231, 100%, 53%, 0.4);
}

/* ========== Lead Form button consistency ========== */
.hs-lead-form__submit {
  background: var(--button-primary-default) !important;
  border: 2px solid transparent !important;
  border-radius: var(--border-radius) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 12px 24px !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
  transition: var(--transition) !important;
  cursor: pointer !important;
  align-self: flex-start !important;
}

.hs-lead-form__submit:hover {
  background: var(--button-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4) !important;
}

.hs-lead-form__submit:disabled {
  background: #ccc !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ========== Columns vertical alignment ========== */
/* Align column tops evenly — remove uneven heading margins */
.section-wrapper__container .wp-block-column>*:first-child {
  margin-top: 0;
}

.section-wrapper__container .wp-block-column .aps-cta>*:first-child {
  margin-top: 0;
}

/* ========== Block spacing optimizations ========== */

/* Reduce excessive top margins on common blocks */
.wp-block-group,
.wp-block-columns,
.wp-block-hs-text-columns,
.wp-block-hs-lead-form,
.wp-block-hs-faq {
  margin-top: 1.5rem !important;
}

/* First block in content should have minimal top margin */
.entry-content>*:first-child,
.wp-block-post-content>*:first-child {
  margin-top: 0.5rem !important;
}

/* Ensure reasonable spacing between blocks */
.wp-block-group+.wp-block-group,
.wp-block-columns+.wp-block-columns,
.wp-block-hs-text-columns+.wp-block-hs-text-columns,
.wp-block-hs-lead-form+.wp-block-hs-lead-form,
.wp-block-hs-faq+.wp-block-hs-faq {
  margin-top: 2rem !important;
}

/* ========== Mobile optimizations ========== */

/* Mobile margin adjustments */
@media (max-width: 768px) {
  .wp-block-hs-section-wrapper .section-wrapper__container {
    padding: 1.5rem 0.5rem !important;
  }

  .hs-hero__inner {
    padding: 0.8rem 0.5rem !important;
  }

  /* Universal mobile button styling - full width on mobile */
  .hs-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }

  .hs-buttons a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Lead form button full width */
  .hs-lead-form__submit {
    width: 100% !important;
    align-self: stretch !important;
    justify-content: center !important;
  }
}

/* Grid Cards mobile responsiveness */
@media (max-width: 768px) {
  .hs-grid-cards {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .hs-grid-cards__box {
    min-width: auto !important;
    flex: none !important;
    width: 100% !important;
  }
}

/* Grid cards have their own white background regardless of section preset,
   so re-assert dark text on the card itself and on its descendants — this
   undoes the white-on-dark inheritance that section presets apply. */
:is(
  .theme-preset--contentor-blue,
  .theme-preset--contentor-blue-light,
  .theme-preset--contentor-green,
  .theme-preset--contentor-gradient,
  .theme-preset--contentor-dark
) :is(.hs-grid-cards__box, .hs-grid-cards__box-edit),
:is(
  .theme-preset--contentor-blue,
  .theme-preset--contentor-blue-light,
  .theme-preset--contentor-green,
  .theme-preset--contentor-gradient,
  .theme-preset--contentor-dark
) :is(.hs-grid-cards__box, .hs-grid-cards__box-edit) :is(h1, h2, h3, h4, h5, h6, p, li, blockquote) {
  color: #1e293b;
}

/* h6 eyebrow inside cards keeps its muted tone */
:is(
  .theme-preset--contentor-blue,
  .theme-preset--contentor-blue-light,
  .theme-preset--contentor-green,
  .theme-preset--contentor-gradient,
  .theme-preset--contentor-dark
) :is(.hs-grid-cards__box, .hs-grid-cards__box-edit) h6 {
  color: var(--ink-500);
}

@media (max-width: 480px) {
  .hs-grid-cards {
    gap: 0.8rem !important;
  }
}

/* Contentor: reduce grid card image footprint while keeping it responsive */
.wp-block-hs-grid-box.hs-grid-cards__box .hs-grid-cards__img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: clamp(140px, 60%, 220px) !important;
  max-height: clamp(80px, 18vw, 140px) !important;
  margin: 0 auto 1rem !important;
  object-fit: contain;
}

@media (max-width: 480px) {
  .wp-block-hs-grid-box.hs-grid-cards__box .hs-grid-cards__img {
    max-width: 80% !important;
    max-height: 120px !important;
  }
}

/* FAQ Block mobile improvements */
@media (max-width: 767px) {
  .hs-faq .hs-faq__item {
    display: block !important;
    grid-template-columns: none !important;
    position: relative !important;
  }

  .hs-faq .hs-faq__item__question {
    padding: 1rem 3rem 1rem 1rem !important;
    display: flex !important;
    align-items: center !important;
  }

  .hs-faq .hs-faq__item__toggle {
    position: absolute !important;
    right: 1rem !important;
    top: 1rem !important;
    transform: translateY(0.5rem) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 10 !important;
  }

  .hs-faq .hs-faq__item__answer {
    grid-column: unset !important;
  }
}

/* Grid cards: card layout and hover effects */
.hs-grid-cards .hs-grid-cards__box {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.hs-grid-cards .hs-grid-cards__box.has-card-link {
  cursor: pointer;
}

.hs-grid-cards .hs-grid-cards__box:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
}

.hs-grid-cards .hs-grid-cards__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hs-grid-cards .hs-grid-cards__inner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Push only actual button/CTA blocks to the bottom of the card. Earlier
   versions targeted >*:last-child which also caught a lone paragraph,
   leaving a big gap between the heading and the text. */
.hs-grid-cards .hs-grid-cards__inner-content .wp-block-hs-buttons,
.hs-grid-cards .hs-grid-cards__inner-content .wp-block-buttons,
.hs-grid-cards .hs-grid-cards__inner-content .wp-block-hs-cta,
.hs-grid-cards__box .hs-grid-cards__text-content .wp-block-hs-buttons,
.hs-grid-cards__box .hs-grid-cards__text-content .wp-block-buttons,
.hs-grid-cards__box .hs-grid-cards__text-content .wp-block-hs-cta {
  margin-top: auto !important;
}

/* Ensure the text content area expands to fill available space */
.hs-grid-cards__box .hs-grid-cards__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.hs-grid-cards__box .hs-grid-cards__text-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.hs-grid-cards .customer-case-grid__link,
.hs-grid-cards .aps-multi-cpt-card__link {
  margin-top: auto;
}

.hs-grid-cards .customer-case-grid__link::before,
.hs-grid-cards .aps-multi-cpt-card__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Media & Text block: remove content padding and inline margins when stacked on mobile */
@media (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content {
    padding: 1rem 0 !important;
  }

  .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Editor inherits all base theme styles - minimal overrides needed */
.block-editor-block-list__layout .hs-buttons a {
  min-height: 44px !important;
  min-width: 80px !important;
}

/* ========== Scroll-Triggered Reveal Animations ========== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay for inner blocks if needed */
.reveal-on-scroll.is-visible .wp-block-column {
  animation: reveal-stagger 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes reveal-stagger {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== Animated Gradient Header ========== */
/* Based on Squarespace gradient system - uses actual Contentor brand colors */

.contentor-gradient-header {
  position: relative;
  width: 100%;
  /* Height determined by content (nav + hero) */
  overflow: visible;
  /* Allow content to overlap */
  /* z-index intentionally omitted — creating a stacking context here
     would trap the fixed nav (z-index: 10000) inside it, causing
     page sections to paint over the menu when scrolling. */
  background-color: #0f1aff;
  /* Fallback: Contentor Blue if WebGL canvas fails to render */
}

.contentor-gradient-header .page-section {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Stack nav and hero vertically */
  align-items: stretch;
  box-sizing: border-box;
  min-height: 100%;
  width: 100%;
  padding-top: 0;
}

.contentor-gradient-header .section-background,
.contentor-gradient-header .section-background .section-background-content,
.contentor-gradient-header .section-background .section-background-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* No background when ?animation=false */
.contentor-gradient-header .no-gradient-animation .section-background {
  display: none;
}

.contentor-gradient-header .section-background-canvas {
  overflow: hidden;
}

.contentor-gradient-header .gradient-header-content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  width: 100%;
  background: rgba(0, 0, 0, 0.08);
  /* Very subtle dark tint */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 1.5rem 0;
  transition: all 0.3s ease;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
}

/* Darker background when scrolled down */
.contentor-gradient-header .gradient-header-content.scrolled {
  background: rgba(0, 0, 0, 0.85);
  /* Dark background for contrast */
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

.contentor-gradient-header .gradient-header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0 3rem;
  gap: 2rem;
}

/* Logo styling in gradient header */
.contentor-gradient-header .gradient-header-logo {
  flex: 0 0 auto;
  margin-right: auto;
}

/* Mobile Menu Toggle (Hamburger) */
.contentor-gradient-header .mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 32px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  position: relative;
}

.contentor-gradient-header .mobile-menu-toggle .hamburger-line {
  width: 100%;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.contentor-gradient-header .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.contentor-gradient-header .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.contentor-gradient-header .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.contentor-gradient-header .gradient-header-logo img,
.contentor-gradient-header .gradient-header-logo .custom-logo {
  height: clamp(32px, 2.8vw, 40px);
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

.contentor-gradient-header .site-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Desktop Navigation */
.contentor-gradient-header .gradient-header-nav-desktop {
  flex: 0 0 auto;
  display: flex;
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu li {
  display: flex;
  align-items: center;
  position: relative;
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
  position: relative;
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: hsla(155.38, 100%, 45.88%, 1);
  /* Contentor green */
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu a:hover,
.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu a:focus {
  color: hsla(155.38, 100%, 45.88%, 1);
  /* Contentor green */
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu a:hover::before,
.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu a:focus::before {
  width: 100%;
}

/* Current menu item - desktop main nav */
.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .current-menu-item > a,
.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .current-menu-ancestor > a {
  color: hsla(155.38, 100%, 45.88%, 1);
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .current-menu-item > a::before,
.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .current-menu-ancestor > a::before {
  width: 100%;
}

/* Desktop Submenu styling */
.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: rgba(15, 26, 255, 0.98);
  border-radius: 4px;
  padding: 0.75rem 0;
  margin-top: 0.75rem;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 10001;
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu li:hover>.sub-menu,
.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu li:focus-within>.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .sub-menu li {
  display: block;
  width: 100%;
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .sub-menu a {
  display: block;
  width: 100%;
  padding: 0.65rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  background: transparent;
  text-align: left;
  position: relative;
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .sub-menu a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background: hsla(155.38, 100%, 45.88%, 1);
  transition: all 0.3s ease;
  transform: translateY(-50%);
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .sub-menu a:hover,
.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .sub-menu a:focus {
  color: hsla(155.38, 100%, 45.88%, 1);
  padding-left: 2rem;
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .sub-menu a:hover::before,
.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .sub-menu a:focus::before {
  width: 1rem;
}

/* Current menu item - desktop submenu */
.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .sub-menu .current-menu-item > a {
  color: hsla(155.38, 100%, 45.88%, 1);
  padding-left: 2rem;
}

.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .sub-menu .current-menu-item > a::before {
  width: 1rem;
}

/* Desktop Submenu indicator (arrow) */
.contentor-gradient-header .gradient-header-nav-desktop .gradient-nav-menu .menu-item-has-children>a::after {
  content: "↓";
  margin-left: 0.4rem;
  font-size: 0.85rem;
  opacity: 0.8;
  transition: all 0.3s ease;
  display: inline-block;
}

/* Hide mobile menu on desktop */
.gradient-header-menu {
  display: none;
}

/* Language Switcher Dropdown */
.contentor-gradient-header .gradient-header-language {
  display: flex;
  align-items: center;
  position: relative;
}

/* Hide mobile menu versions on desktop */
.contentor-gradient-header .gradient-header-cta-mobile,
.contentor-gradient-header .gradient-header-language-mobile,
.gradient-header-menu .gradient-header-login-mobile {
  display: none;
}

/* Login Dropdown (desktop) */
.contentor-gradient-header .gradient-header-login {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.contentor-gradient-header .login-dropdown {
  position: relative;
}

.contentor-gradient-header .login-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: #ffffff;
  padding: 0.5rem 0.75rem;
  height: 2.25rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.contentor-gradient-header .login-dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.contentor-gradient-header .login-dropdown-toggle .login-arrow {
  font-size: 0.65rem;
  opacity: 0.7;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.contentor-gradient-header .login-dropdown-toggle[aria-expanded="true"] .login-arrow {
  transform: rotate(180deg);
}

.contentor-gradient-header .login-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 200px;
  background: rgba(15, 26, 51, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0.5rem 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

.contentor-gradient-header .login-dropdown.active .login-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.contentor-gradient-header .login-dropdown-menu li {
  display: block;
}

.contentor-gradient-header .login-dropdown-menu a {
  display: block;
  padding: 0.65rem 1.25rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  transition: all 0.2s ease;
}

.contentor-gradient-header .login-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  padding-left: 1.5rem;
}

/* Reusable menu divider — a thin separator line between menu items.
   Add the `menu-divider` class to a menu item (Appearance → Menus → CSS
   Classes), or use the login menu walker's "---" item. The colour uses
   currentColor so it adapts to the menu's text colour and stays visible on
   both light and dark backgrounds. */
.menu-divider {
  height: 1px;
  margin: 0.4rem 1rem;
  padding: 0;
  background: currentColor;
  opacity: 0.18;
  list-style: none;
  pointer-events: none;
}

/* When the class sits on a real (linked) menu item, hide its content so
   only the line shows. Harmless for the login walker's empty <li>. */
.menu-divider > a {
  display: none;
}

/* Keep the dark login dropdown's exact original look. */
.contentor-gradient-header .login-dropdown-menu .menu-divider,
.gradient-header-menu .login-dropdown-menu .menu-divider {
  background: rgba(255, 255, 255, 0.15);
  opacity: 1;
}

.contentor-gradient-header .language-dropdown {
  position: relative;
}

.contentor-gradient-header .language-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  height: 2.25rem;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contentor-gradient-header .language-dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.contentor-gradient-header .language-dropdown-toggle .lang-flag {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Language name - always visible on desktop */
.contentor-gradient-header .language-dropdown-toggle .lang-name {
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* Hide language name on smaller screens when closed */
@media (max-width: 1400px) {
  .contentor-gradient-header .language-dropdown-toggle .lang-name {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
  }

  /* Show language name when dropdown is open */
  .contentor-gradient-header .language-dropdown.active .language-dropdown-toggle .lang-name {
    max-width: 200px;
    opacity: 1;
    margin-left: 0.25rem;
  }
}

.contentor-gradient-header .language-dropdown-toggle .lang-arrow {
  font-size: 0.7rem;
  opacity: 0.7;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.contentor-gradient-header .language-dropdown-toggle[aria-expanded="true"] .lang-arrow {
  transform: rotate(180deg);
}

.contentor-gradient-header .language-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 200px;
  background: rgba(15, 26, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.5rem 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 10001;
  max-height: 400px;
  overflow-y: auto;
}

.contentor-gradient-header .language-dropdown.active .language-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.contentor-gradient-header .language-dropdown-menu li {
  display: block;
}

.contentor-gradient-header .language-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.contentor-gradient-header .language-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.contentor-gradient-header .language-dropdown-menu .current-lang a {
  background: rgba(0, 234, 110, 0.15);
  color: hsla(155.38, 100%, 45.88%, 1);
}

.contentor-gradient-header .language-dropdown-menu .lang-flag {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.contentor-gradient-header .language-dropdown-menu .lang-name {
  white-space: nowrap;
}

/* CTA Button */
.contentor-gradient-header .gradient-header-cta {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex: 0 0 auto;
}

.contentor-gradient-header .gradient-cta-button {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.75rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* CTA Primary Style (Green) - Optimized for accessibility with dark text */
.contentor-gradient-header .gradient-cta-button.cta-primary {
  background-color: #00ea6e !important;
  background-image: none !important;
  color: #1e293b !important;
  border: none !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 10px 20px -5px rgba(0, 234, 110, 0.3) !important;
  letter-spacing: 0.03em;
}

.contentor-gradient-header .gradient-cta-button.cta-primary:hover {
  background-color: #00ff7f !important;
  color: #1e293b !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 15px 30px -5px rgba(0, 234, 110, 0.4) !important;
}

/* CTA Secondary Style (Blue) */
.contentor-gradient-header .gradient-cta-button.cta-secondary {
  background: hsl(231.06, 100%, 53.92%);
  /* Contentor blue */
  color: #ffffff;
  border: 2px solid hsl(231.06, 100%, 53.92%);
}

.contentor-gradient-header .gradient-cta-button.cta-secondary:hover {
  background: hsl(231.06, 100%, 63%);
  border-color: hsl(231.06, 100%, 63%);
  transform: translateY(-2px);
}

/* CTA Outline Style */
.contentor-gradient-header .gradient-cta-button.cta-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.contentor-gradient-header .gradient-cta-button.cta-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* Hero wrapper inside gradient header */
.gradient-header-hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  z-index: 10;
  padding-top: 80px;
  /* Space below fixed nav */
}

/* First block inside gradient header gets transparent background */
.gradient-header-hero .wp-block-hs-section-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0;
}

/* Content inside hero should be visible */
.gradient-header-hero .wp-block-hs-section-wrapper>* {
  position: relative;
  z-index: 2;
}

/* Hero Content Button Overrides for Accessibility & Premium Feel */
body .gradient-header-hero .hs-buttons a.primary,
body .gradient-header-hero .hs-buttons button.primary {
  background-color: #00ea6e !important;
  background-image: none !important;
  color: #1e293b !important;
  border: none !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 20px 40px -10px rgba(0, 234, 110, 0.4) !important;
  letter-spacing: 0.02em;
  transform: translateY(0);
}

body .gradient-header-hero .hs-buttons a.primary:hover,
body .gradient-header-hero .hs-buttons button.primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  background-color: #00ff7f !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 234, 110, 0.5) !important;
}

/* Ghost style for secondary buttons in hero */
.gradient-header-hero .hs-buttons a.secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

.gradient-header-hero .hs-buttons a.secondary:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Responsive gradient header height - Mobile Menu @ 1024px */
@media (max-width: 1024px) {

  /* Show hamburger menu */
  .contentor-gradient-header .mobile-menu-toggle {
    display: flex;
  }

  /* Hide desktop navigation */
  .contentor-gradient-header .gradient-header-nav-desktop {
    display: none !important;
  }

  /* Show mobile menu overlay */
  .gradient-header-menu {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 26, 255, 0.98);
    padding: 2rem 2rem 3rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
    z-index: 10002;
    flex-direction: column;
  }

  /* Show menu when active */
  .gradient-header-menu.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Mobile menu close button */
  .gradient-header-menu .mobile-menu-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gradient-header-menu .mobile-menu-close .close-icon {
    font-size: 3rem;
    color: #ffffff;
    font-weight: 300;
    line-height: 1;
    transition: all 0.3s ease;
  }

  .gradient-header-menu .mobile-menu-close:hover .close-icon {
    color: hsla(155.38, 100%, 45.88%, 1);
    transform: rotate(90deg);
  }

  /* Mobile menu logo */
  .gradient-header-menu .mobile-menu-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0 3rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    flex: 0 0 auto;
  }

  .gradient-header-menu .mobile-menu-logo img,
  .gradient-header-menu .mobile-menu-logo .custom-logo {
    height: 48px;
    width: auto;
    display: block;
  }

  .gradient-header-menu .mobile-menu-logo .site-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
  }

  .gradient-header-menu .gradient-nav-menu-mobile {
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    list-style: none;
  }

  .gradient-header-menu .gradient-nav-menu-mobile>li {
    width: 100%;
    border-bottom: none;
    display: block;
    position: relative;
  }

  .gradient-header-menu .gradient-nav-menu-mobile>li>a {
    width: 100%;
    text-align: left;
    padding: 1.25rem 1rem;
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
  }

  /* Arrow for items with children */
  .gradient-header-menu .gradient-nav-menu-mobile .menu-item-has-children>a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }

  /* Submenus in mobile - expand downward */
  .gradient-header-menu .gradient-nav-menu-mobile .sub-menu {
    display: none;
    position: static;
    flex-direction: column;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    list-style: none;
  }

  .gradient-header-menu .gradient-nav-menu-mobile .sub-menu.active {
    display: block;
  }

  .gradient-header-menu .gradient-nav-menu-mobile .sub-menu li {
    border-bottom: none;
    display: block;
    width: 100%;
    padding: 0;
  }

  .gradient-header-menu .gradient-nav-menu-mobile .sub-menu a {
    padding: 1rem 1rem 1rem 2.5rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    opacity: 0.95;
    font-weight: 400;
    position: relative;
    color: #ffffff;
    text-decoration: none;
  }

  .gradient-header-menu .gradient-nav-menu-mobile .sub-menu a::before {
    content: '→';
    position: absolute;
    left: 1.5rem;
    opacity: 0.7;
    font-size: 0.9rem;
  }

  .gradient-header-menu .gradient-nav-menu-mobile .sub-menu a:hover::before {
    opacity: 1;
  }

  /* Current menu item - mobile */
  .gradient-header-menu .gradient-nav-menu-mobile .current-menu-item > a,
  .gradient-header-menu .gradient-nav-menu-mobile .current-menu-ancestor > a {
    color: hsla(155.38, 100%, 45.88%, 1);
  }

  .gradient-header-menu .gradient-nav-menu-mobile .sub-menu .current-menu-item > a {
    color: hsla(155.38, 100%, 45.88%, 1);
    opacity: 1;
  }

  .gradient-header-menu .gradient-nav-menu-mobile .sub-menu .current-menu-item > a::before {
    opacity: 1;
    color: hsla(155.38, 100%, 45.88%, 1);
  }

  .gradient-header-menu .gradient-nav-menu-mobile .menu-item-has-children>a::after {
    content: '▼';
    font-size: 0.75rem;
    transition: transform 0.3s ease;
    opacity: 0.8;
    margin-left: auto;
  }

  .gradient-header-menu .gradient-nav-menu-mobile .menu-item-has-children.active>a::after {
    transform: rotate(-180deg);
  }
}

/* Mobile menu adjustments - move elements inside menu */
@media (max-width: 1024px) {

  /* Hide desktop versions of language switcher, CTA and login */
  .contentor-gradient-header .gradient-header-language-desktop,
  .contentor-gradient-header .gradient-header-cta-desktop,
  .contentor-gradient-header .gradient-header-login-desktop {
    display: none !important;
  }

  /* Login dropdown in mobile menu */
  .gradient-header-menu .gradient-header-login-mobile {
    display: block !important;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    flex: 0 0 auto;
  }

  .gradient-header-menu .gradient-header-login-mobile .login-dropdown {
    width: 100%;
    position: relative;
  }

  .gradient-header-menu .gradient-header-login-mobile .login-dropdown-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #ffffff;
    background: rgba(8, 10, 28, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .gradient-header-menu .gradient-header-login-mobile .login-dropdown-toggle .login-arrow {
    transform: rotate(0deg);
  }

  .gradient-header-menu .gradient-header-login-mobile .login-dropdown.active .login-dropdown-toggle .login-arrow {
    transform: rotate(180deg);
  }

  .gradient-header-menu .gradient-header-login-mobile .login-dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(8, 10, 28, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    display: none;
  }

  .gradient-header-menu .gradient-header-login-mobile .login-dropdown.active .login-dropdown-menu {
    display: block;
  }

  .gradient-header-menu .gradient-header-login-mobile .login-dropdown-menu li {
    display: block;
    list-style: none;
  }

  .gradient-header-menu .gradient-header-login-mobile .login-dropdown-menu a {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    padding: 0.85rem 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .gradient-header-menu .gradient-header-login-mobile .login-dropdown-menu li + li:not(.menu-divider) a {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .gradient-header-menu .gradient-header-login-mobile .login-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding-left: 1.5rem;
  }

  /* CTA button styling in mobile menu */
  .gradient-header-menu .gradient-header-cta-mobile {
    display: block !important;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: none;
    width: 100%;
    flex: 0 0 auto;
  }

  .gradient-header-menu .gradient-header-cta-mobile .gradient-cta-button {
    width: 100% !important;
    display: block !important;
    text-align: center;
    padding: 1rem 2rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  /* CTA Primary Style in mobile menu */
  .gradient-header-menu .gradient-cta-button.cta-primary {
    background: hsla(155.38, 100%, 45.88%, 1);
    color: #ffffff;
    border: 2px solid hsla(155.38, 100%, 45.88%, 1);
  }

  .gradient-header-menu .gradient-cta-button.cta-primary:hover {
    background: hsla(155.38, 100%, 55%, 1);
    border-color: hsla(155.38, 100%, 55%, 1);
  }

  /* CTA Secondary Style in mobile menu */
  .gradient-header-menu .gradient-cta-button.cta-secondary {
    background: hsl(231.06, 100%, 53.92%);
    color: #ffffff;
    border: 2px solid hsl(231.06, 100%, 53.92%);
  }

  .gradient-header-menu .gradient-cta-button.cta-secondary:hover {
    background: hsl(231.06, 100%, 63%);
    border-color: hsl(231.06, 100%, 63%);
  }

  /* CTA Outline Style in mobile menu */
  .gradient-header-menu .gradient-cta-button.cta-outline {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.7);
  }

  .gradient-header-menu .gradient-cta-button.cta-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
  }

  /* Language switcher styling in mobile menu - at bottom, opens upward */
  .gradient-header-menu .gradient-header-language-mobile {
    display: block !important;
    margin-top: 2rem;
    padding-top: 2rem;
    padding-bottom: 1rem;
    border-top: none;
    width: 100%;
    flex: 0 0 auto;
  }

  .gradient-header-menu .gradient-header-language-mobile .language-dropdown {
    width: 100%;
    position: relative;
  }

  .gradient-header-menu .gradient-header-language-mobile .language-dropdown-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    color: #ffffff;
    background: rgba(8, 10, 28, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .gradient-header-menu .gradient-header-language-mobile .language-dropdown-toggle .lang-name {
    max-width: none !important;
    opacity: 1 !important;
  }

  .gradient-header-menu .gradient-header-language-mobile .language-dropdown-toggle .lang-arrow {
    transform: rotate(180deg);
  }

  .gradient-header-menu .gradient-header-language-mobile .language-dropdown.active .language-dropdown-toggle .lang-arrow {
    transform: rotate(0deg);
  }

  .gradient-header-menu .gradient-header-language-mobile .language-dropdown-menu {
    position: absolute;
    top: auto;
    bottom: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    background: rgba(8, 10, 28, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 0.5rem 0;
    list-style: none;
  }

  .gradient-header-menu .gradient-header-language-mobile .language-dropdown.active .language-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .gradient-header-menu .gradient-header-language-mobile .language-dropdown-menu li {
    display: block;
  }

  .gradient-header-menu .gradient-header-language-mobile .language-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
  }

  .gradient-header-menu .gradient-header-language-mobile .language-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }

  .gradient-header-menu .gradient-header-language-mobile .language-dropdown-menu .current-lang a {
    background: rgba(0, 234, 110, 0.15);
    color: hsla(155.38, 100%, 45.88%, 1);
  }
}

@media (max-width: 480px) {

  /* Logo and hamburger closer to edges on mobile */
  .contentor-gradient-header .gradient-header-content {
    padding: 0.75rem 0;
  }

  .contentor-gradient-header .gradient-header-inner {
    padding: 0 1rem;
  }

  /* Customer logos: 2 columns centered on mobile instead of 1 */
  .wp-block-hs-customers .customer-logos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    justify-items: center !important;
  }
}

/* ── Customer Logo Refinements ── */
.wp-block-hs-customers .customer-logo-wrapper {
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Light Mode: White logos on dark/gradient backgrounds */
.wp-block-hs-customers.color-mode--light .customer-logo-wrapper {
  opacity: 0.7;
}

/* Dark Mode: Dark logos on light backgrounds */
.wp-block-hs-customers.color-mode--dark .customer-logo-wrapper {
  opacity: 0.5;
}

/* Interactive Pop: Works for both images and links */
.wp-block-hs-customers .customer-logo-item:hover .customer-logo-wrapper,
.wp-block-hs-customers .customer-logo-link:hover .customer-logo-wrapper {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}

/* Reduce gap between hero/swoosh section and following content section */
.wp-block-hs-section-wrapper.theme-preset_prev--contentor-blue {
  padding-top: 0.5rem;
}

/* ========== CONTENTOR FOOTER ========== */

.contentor-footer {
  background: #1e293b;
  color: #f8fafc;
  font-size: 0.95rem;
}

/* When the AI-translation floating bar is shown, reserve breathing room below
   the last footer section (the certifications/logos band) so the fixed bar
   never sits tight against the logos. Padding goes on __certifications — not
   .contentor-footer — so the gap inherits that section's darker background
   (rgba(0,0,0,.3)) instead of the lighter footer base. The plugin adds
   .apst-has-floating-disclaimer to <body> and publishes the bar's height as
   --apst-disclaimer-bar-height (see APST_Frontend_Disclaimer). */
.apst-has-floating-disclaimer .contentor-footer__certifications {
  padding-bottom: calc(var(--apst-disclaimer-bar-height, 0px) + 48px);
  border-bottom: none;
}

.contentor-footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Main footer section with columns */
.contentor-footer__main {
  padding: 4rem 0 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contentor-footer__main .contentor-footer__container {
  display: grid;
  grid-template-columns: 1fr 2fr 1.5fr;
  gap: 3rem;
  align-items: start;
}

.contentor-footer__column {
  display: flex;
  flex-direction: column;
}

/* Brand & Contact column */
.contentor-footer__logo {
  margin-bottom: 1.5rem;
}

.contentor-footer__logo img {
  max-width: 180px;
  height: auto;
}

/* Headings */
.contentor-footer__heading {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 1.25rem 0;
  color: #ffffff;
}

/* Contact list (under logo) */
.contentor-footer__brand .contentor-footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contentor-footer__brand .contentor-footer__contact-list li {
  margin-bottom: 0.9rem;
  line-height: 1.6;
  color: rgba(248, 250, 252, 0.75);
  font-size: 0.9rem;
}

.contentor-footer__brand .contentor-footer__contact-list li:first-child {
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

.contentor-footer__brand .contentor-footer__contact-list a {
  color: var(--contentor-green);
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 600;
}

.contentor-footer__brand .contentor-footer__contact-list a:hover {
  color: #ffffff;
}

/* Navigation column - supports multi-column layout with submenus */
.contentor-footer__nav-wrapper {
  grid-column: span 1;
}

.contentor-footer__navigation {
  margin: 0;
}

.contentor-footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem 2rem;
}

.contentor-footer__menu>li {
  margin-bottom: 0;
}

.contentor-footer__menu>li>a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.3s ease;
  display: inline-block;
  margin-bottom: 0.75rem;
}

.contentor-footer__menu>li>a:hover {
  color: var(--contentor-green);
}

/* Submenus */
.contentor-footer__menu .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}

.contentor-footer__menu .sub-menu li {
  margin-bottom: 0.6rem;
}

.contentor-footer__menu .sub-menu a {
  color: rgba(248, 250, 252, 0.75);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
  display: inline-block;
  position: relative;
  padding-left: 1.4rem;
  margin-left: -1.4rem;
}

.contentor-footer__menu .sub-menu a:before {
  content: "→";
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contentor-footer__menu .sub-menu a:hover {
  color: var(--contentor-green);
}

.contentor-footer__menu .sub-menu a:hover:before {
  opacity: 1;
}

/* Newsletter column - Clean and simple */
.contentor-footer__newsletter .contentor-footer__heading {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: #ffffff;
  font-weight: 600;
}

.contentor-footer__newsletter-text {
  color: rgba(248, 250, 252, 0.8);
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
  font-size: 0.9rem;
}

.contentor-footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

.contentor-footer__newsletter-input-wrapper {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
}

.contentor-footer__newsletter-input {
  flex: 1;
  padding: 1rem 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.contentor-footer__newsletter-input:focus {
  outline: none;
  border-color: var(--contentor-green);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 4px rgba(0, 234, 110, 0.1);
}

.contentor-footer__newsletter-input::placeholder {
  color: rgba(248, 250, 252, 0.5);
}

.contentor-footer__newsletter-button {
  padding: 1rem 2rem;
  background: var(--contentor-green);
  color: #000000;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 234, 110, 0.2);
  white-space: nowrap;
  flex-shrink: 0;
}

.contentor-footer__newsletter-button:hover {
  background: var(--contentor-green-dark);
  box-shadow: 0 4px 12px rgba(0, 234, 110, 0.25);
}

.contentor-footer__newsletter-button:active {
  transform: translateY(0);
}

.contentor-footer__newsletter-consent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.8rem;
  color: rgba(248, 250, 252, 0.7);
  cursor: pointer;
  text-align: left;
}

.contentor-footer__newsletter-consent input[type="checkbox"] {
  margin-top: 0.2rem;
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--contentor-green);
}

.contentor-footer__newsletter-consent a {
  color: var(--contentor-green);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.contentor-footer__newsletter-consent a:hover {
  border-bottom-color: var(--contentor-green);
}

/* Language Switcher - Full width at bottom of main section */
.contentor-footer__language-wrapper {
  padding: 2rem 1.5rem 0;
  margin-top: 2rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.contentor-footer__language {
  width: 100%;
}

/* Certifications & Social section - two columns */
.contentor-footer__certifications {
  background: rgba(0, 0, 0, 0.3);
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contentor-footer__cert-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap;
}

.contentor-footer__cert-section,
.contentor-footer__social-section {
  flex: 1;
  min-width: 250px;
}

.contentor-footer__cert-title,
.contentor-footer__social-title {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(248, 250, 252, 0.7);
  margin: 0 0 1.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contentor-footer__cert-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.contentor-footer__cert-logo {
  display: block;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.contentor-footer__cert-logo:hover {
  opacity: 1;
  transform: translateY(-4px);
}

.contentor-footer__cert-logo img {
  display: block;
  width: auto;
  height: 40px;
  max-width: 150px;
  object-fit: contain;
}

/* Social links in certifications section */
.contentor-footer__certifications .contentor-footer__social {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
}

/* Bottom bar with language switcher */
.contentor-footer__bottom {
  padding: 1.5rem 0;
  background: rgba(0, 0, 0, 0.2);
}

.contentor-footer__bottom-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Language switcher - Full width at bottom */
.footer-language-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.footer-language-list li {
  display: inline-block;
}

.footer-language-list a {
  color: rgba(248, 250, 252, 0.7);
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.footer-language-list .lang-flag {
  font-size: 1.2rem;
  line-height: 1;
}

.footer-language-list .lang-name {
  font-weight: 500;
}

.footer-language-list a:hover,
.footer-language-list .current-lang a {
  background: var(--contentor-green);
  border-color: var(--contentor-green);
  color: #000000;
}

.footer-language-list .current-lang a .lang-flag,
.footer-language-list .current-lang a .lang-name {
  color: #000000;
}

.contentor-footer__social {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.contentor-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(248, 250, 252, 0.8);
  transition: all 0.3s ease;
  text-decoration: none;
}

.contentor-footer__social-link:hover {
  background: var(--contentor-green);
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 234, 110, 0.3);
}

.contentor-footer__social-link svg {
  width: 20px;
  height: 20px;
}

/* Tablet responsive */
@media (max-width: 1024px) {
  .contentor-footer__main .contentor-footer__container {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3.5rem;
  }

  .contentor-footer__brand {
    grid-column: 1;
  }

  .contentor-footer__nav-wrapper {
    grid-column: 2;
  }

  .contentor-footer__newsletter {
    grid-column: 1 / -1;
  }

  .contentor-footer__menu {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
  }

  .contentor-footer__cert-content {
    gap: 3rem;
  }

  .contentor-footer__cert-logos {
    gap: 2rem;
  }

  .contentor-footer__cert-logo img {
    max-width: 120px;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .contentor-footer__main {
    padding: 3rem 0 2rem;
  }

  .contentor-footer__main .contentor-footer__container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .contentor-footer__brand,
  .contentor-footer__nav-wrapper,
  .contentor-footer__newsletter {
    grid-column: 1;
  }

  .contentor-footer__newsletter .contentor-footer__heading {
    font-size: 1.1rem;
  }

  .contentor-footer__menu {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .contentor-footer__menu .sub-menu {
    margin-left: 0;
    margin-top: 0.5rem;
  }

  /* Stack certifications and social vertically on mobile */
  .contentor-footer__cert-content {
    flex-direction: column;
    gap: 2.5rem;
  }

  .contentor-footer__cert-section,
  .contentor-footer__social-section {
    min-width: 100%;
  }

  .contentor-footer__cert-logos {
    gap: 1.5rem;
  }

  .contentor-footer__cert-logo img {
    max-width: 100px;
  }

  /* Language switcher mobile */
  .contentor-footer__language-wrapper {
    padding: 1.5rem 0 0;
    margin-top: 1.5rem;
  }

  .footer-language-list {
    gap: 0.5rem;
  }

  .footer-language-list a {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
  }
}

/* Small mobile - stack newsletter input and button */
@media (max-width: 600px) {
  .contentor-footer__newsletter-input-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .contentor-footer__newsletter-input {
    width: 100%;
  }

  .contentor-footer__newsletter-button {
    width: 100%;
  }
}

/* Any additional site-specific styles for Contentor */
.wp-block-hs-section-wrapper .section-wrapper__effect-stroke {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}


.wp-block-hs-section-wrapper.graphic-effect--gront-streck--bottom::before,
.wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator--bottom .section-wrapper__effect-stroke--separator,
.wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator-diagonal--bottom .section-wrapper__effect-stroke--separator-diagonal {
  height: var(--section-separator-height);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 60" preserveAspectRatio="none"><path d="M0,25 Q600,45 1200,20" stroke="%2300ea6e" stroke-width="8" fill="none"/></svg>');
}

.wp-block-hs-section-wrapper.graphic-effect--gront-streck--bottom::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

.gradient-header-hero .wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator-diagonal--bottom .section-wrapper__effect-stroke--separator-diagonal {
  height: var(--hero-separator-height);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 99" preserveAspectRatio="none"><path d="M1200,91 Q600,32 0,8" stroke="%2300ea6e" stroke-width="8" fill="none"/></svg>');
}

/* Editor sync for Contentor-specific section effects and grid images */
.block-editor-block-list__layout .wp-block-hs-section-wrapper:has(+ .wp-block-hs-section-wrapper.theme-preset--light) {
  --section-effect-outside-bottom: #ffffff;
}

.block-editor-block-list__layout .wp-block-hs-section-wrapper:has(+ .wp-block-hs-section-wrapper.theme-preset--gray-light) {
  --section-effect-outside-bottom: #f8fafc;
}

.block-editor-block-list__layout .wp-block-hs-section-wrapper:has(+ .wp-block-hs-section-wrapper.theme-preset--contentor-blue) {
  --section-effect-outside-bottom: var(--contentor-blue);
}

.block-editor-block-list__layout .wp-block-hs-section-wrapper:has(+ .wp-block-hs-section-wrapper.theme-preset--contentor-blue-light) {
  --section-effect-outside-bottom: var(--contentor-blue-light);
}

.block-editor-block-list__layout .wp-block-hs-section-wrapper:has(+ .wp-block-hs-section-wrapper.theme-preset--contentor-green) {
  --section-effect-outside-bottom: var(--contentor-green);
}

.block-editor-block-list__layout .wp-block-hs-section-wrapper:has(+ .wp-block-hs-section-wrapper.theme-preset--contentor-gradient) {
  --section-effect-outside-bottom: var(--contentor-blue);
}

.block-editor-block-list__layout .wp-block-hs-section-wrapper:has(+ .wp-block-hs-section-wrapper.theme-preset--contentor-dark) {
  --section-effect-outside-bottom: #1e293b;
}

.block-editor-block-list__layout .wp-block-hs-section-wrapper:has(+ .wp-block-hs-section-wrapper.theme-preset--contentor-professional) {
  --section-effect-outside-bottom: #ffffff;
}

.block-editor-block-list__layout .wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator--bottom::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 60" preserveAspectRatio="none"><path d="M0,25 Q600,45 1200,20" stroke="%2300ea6e" stroke-width="8" fill="none"/></svg>');
  pointer-events: none;
  z-index: 2;
}

.block-editor-block-list__layout .wp-block-hs-section-wrapper.graphic-effect--gront-streck-separator-diagonal--bottom::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 125px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 125" preserveAspectRatio="none"><path d="M1200,115 Q600,40 0,10" stroke="%2300ea6e" stroke-width="8" fill="none"/></svg>');
  pointer-events: none;
  z-index: 2;
}

.block-editor-block-list__layout .wp-block-hs-grid-box .hs-grid-cards__image-wrapper img,
.block-editor-block-list__layout .wp-block-hs-grid-box .aps_media__preview-wrapper img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: clamp(140px, 60%, 220px) !important;
  max-height: clamp(80px, 18vw, 140px) !important;
  margin: 0 auto 1rem !important;
  object-fit: contain;
}

@media (max-width: 480px) {

  .block-editor-block-list__layout .wp-block-hs-grid-box .hs-grid-cards__image-wrapper img,
  .block-editor-block-list__layout .wp-block-hs-grid-box .aps_media__preview-wrapper img {
    max-width: 80% !important;
    max-height: 120px !important;
  }
}

/* Hero typography is consolidated at the bottom of this file under
   "Site typography → Hero". */

.aps-news-full-width {
  margin-bottom: 2.5rem;
  font-size: 1.1rem;
  line-height: 1.75;
  color: #1e293b;
}

.aps-news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 3rem;
}

.aps-news-layout__main {
  min-width: 0;
  font-size: 1.1rem;
  line-height: 1.75;
  /* Increased for better legibility */
  color: #1e293b;
}

.aps-news-ingress {
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #0f172a;
  font-weight: 500;
}

.aps-news-language {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.95rem;
  color: #475569;
  margin-bottom: 1.5rem;
}

.aps-news-language__current {
  font-weight: 600;
  color: #0f172a;
}

.aps-news-language__sep {
  color: #94a3b8;
}

.aps-news-language__label {
  font-weight: 600;
  color: #0f172a;
}

.aps-news-language__translations {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.aps-news-language__link {
  color: #0f172a;
  text-decoration: none;
}

.aps-news-language__link:hover {
  text-decoration: underline;
}

/* Sidebar shell: no sticky here — article sidebars are usually
   taller than the viewport (Läs också + CTA + Fler artiklar), so
   sticky would either stutter or trap the user at the top. Let it
   scroll naturally with the article. */
.aps-news-layout__sidebar {
  align-self: start;
}

.aps-news-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* If we ever want to put the big grey card back, uncomment this block:
.aps-news-sidebar {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}
*/

.aps-news-sidebar__module {
  margin: 0;
}

.aps-news-sidebar__module-eyebrow {
  margin: 0 0 0.75rem;
}

.aps-news-sidebar__module-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
  margin: 0 0 0.75rem;
}

.aps-news-sidebar__content {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #334155;
}

/* Sidebar Table Styling */
.aps-news-sidebar__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.aps-news-sidebar__content table th,
.aps-news-sidebar__content table td {
  padding: 0.75rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.aps-news-sidebar__content table th {
  font-weight: 700;
  color: #0f172a;
  border-bottom-width: 2px;
}

.aps-news-sidebar__content table tr:nth-child(even) {
  background-color: #f1f5f9;
  /* Zebra striping */
}

.aps-news-sidebar__content table tr:hover {
  background-color: #eef2ff;
  /* Subtle hover effect */
}

/* "Läs också" — kuraterade länkar redaktören valt manuellt.
   Samma eyebrow-stil som "Fler artiklar" så de två "läs mer"-
   modulerna pratar samma visuella språk. */
.aps-news-sidebar__related-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.aps-news-sidebar__related-link-anchor {
  color: var(--color-text, #191919);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.35;
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
  transition: color 0.15s ease;
}

.aps-news-sidebar__related-link-anchor:hover {
  color: var(--contentor-green, #00b35a);
}

.aps-news-sidebar__related-link-arrow {
  transition: transform 0.15s ease;
}

.aps-news-sidebar__related-link-anchor:hover .aps-news-sidebar__related-link-arrow {
  transform: translateX(3px);
}

/* "Fler artiklar" — kurerad lista med thumbnail, kategori-chip och
   tidsindikator. Varje rad är klickbar; hover-grepp ligger på länken
   så hela arean fungerar som klickyta. */
.aps-news-sidebar__more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.aps-news-sidebar__more-item {
  margin: 0;
}

.aps-news-sidebar__more-link {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.aps-news-sidebar__more-link:hover {
  background-color: #f8fafc;
}

.aps-news-sidebar__more-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: #e2e8f0;
  display: block;
}

.aps-news-sidebar__more-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder tints when no featured image is set — keyed by the
   same six-palette names used by .hs-filter-bar__chip-dot--*. */
.aps-news-sidebar__more-thumb--green   { background: #d1fae5; }
.aps-news-sidebar__more-thumb--blue    { background: #dbeafe; }
.aps-news-sidebar__more-thumb--amber   { background: #fef3c7; }
.aps-news-sidebar__more-thumb--red     { background: #fee2e2; }
.aps-news-sidebar__more-thumb--purple  { background: #ede9fe; }
.aps-news-sidebar__more-thumb--teal    { background: #ccfbf1; }

.aps-news-sidebar__more-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.aps-news-sidebar__more-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.2;
}

.aps-news-sidebar__more-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.aps-news-sidebar__more-sep {
  color: #cbd5e1;
}

.aps-news-sidebar__more-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0f172a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s ease;
}

.aps-news-sidebar__more-link:hover .aps-news-sidebar__more-title {
  color: var(--contentor-green, #00b35a);
}

.aps-news-sidebar__more-empty {
  color: #475569;
  font-size: 0.95rem;
  margin: 0;
}

/* Time indicator (text + optional play-icon for podcast/video). */
.aps-multi-cpt-time {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
}

.aps-multi-cpt-time__icon {
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.85;
}

@media (max-width: 1100px) {
  .aps-news-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .aps-news-layout__sidebar {
    position: static;
    margin-top: 2rem;
  }
}

/* ── Article/Blog: Prev/Next Navigation ── */
.aps-news-section-footer {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.aps-news-footer {
  padding-top: 2.5rem;
}

/* Article prev/next: green-themed button pair. Prev is an outlined
   ghost button, next is a soft-filled solid — same green family for
   both. Calmer than the original (1px border, no drop shadow, no
   translateY) but still clearly button-shaped. */
body.single-contentor_articles .case-nav,
body.single-contentor_blog .case-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

body.single-contentor_articles .case-nav__prev,
body.single-contentor_articles .case-nav__next,
body.single-contentor_blog .case-nav__prev,
body.single-contentor_blog .case-nav__next {
  min-width: 0;
  display: flex;
}

body.single-contentor_articles .case-nav__next,
body.single-contentor_blog .case-nav__next {
  justify-content: flex-end;
}

body.single-contentor_articles .case-nav__link,
body.single-contentor_blog .case-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  border-radius: 12px;
  border: 1px solid var(--contentor-green, #00b35a);
  text-decoration: none;
  color: #0f172a;
  min-width: 0;
  max-width: 100%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.single-contentor_articles .case-nav__prev .case-nav__link,
body.single-contentor_blog .case-nav__prev .case-nav__link {
  background: transparent;
}

body.single-contentor_articles .case-nav__next .case-nav__link,
body.single-contentor_blog .case-nav__next .case-nav__link {
  background: rgba(0, 234, 110, 0.12);
}

body.single-contentor_articles .case-nav__prev .case-nav__link:hover,
body.single-contentor_blog .case-nav__prev .case-nav__link:hover {
  background: rgba(0, 234, 110, 0.08);
}

body.single-contentor_articles .case-nav__next .case-nav__link:hover,
body.single-contentor_blog .case-nav__next .case-nav__link:hover {
  background: rgba(0, 234, 110, 0.2);
}

body.single-contentor_articles .case-nav__arrow,
body.single-contentor_blog .case-nav__arrow {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--contentor-green-dark, #00b35a);
  line-height: 1;
  transition: transform 0.15s ease;
}

body.single-contentor_articles .case-nav__prev .case-nav__link:hover .case-nav__arrow,
body.single-contentor_blog .case-nav__prev .case-nav__link:hover .case-nav__arrow {
  transform: translateX(-3px);
}

body.single-contentor_articles .case-nav__next .case-nav__link:hover .case-nav__arrow,
body.single-contentor_blog .case-nav__next .case-nav__link:hover .case-nav__arrow {
  transform: translateX(3px);
}

body.single-contentor_articles .case-nav__meta,
body.single-contentor_blog .case-nav__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

body.single-contentor_articles .case-nav__next .case-nav__meta,
body.single-contentor_blog .case-nav__next .case-nav__meta {
  text-align: right;
}

body.single-contentor_articles .case-nav__label,
body.single-contentor_blog .case-nav__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--contentor-green-dark, #00b35a);
}

body.single-contentor_articles .case-nav__title,
body.single-contentor_blog .case-nav__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 540px) {

  body.single-contentor_articles .case-nav,
  body.single-contentor_blog .case-nav {
    grid-template-columns: 1fr;
  }

  body.single-contentor_articles .case-nav__next,
  body.single-contentor_blog .case-nav__next {
    justify-content: flex-start;
  }

  body.single-contentor_articles .case-nav__link,
  body.single-contentor_blog .case-nav__link {
    width: 100%;
  }
}

/* ── Responsive Visibility Utilities ── */
/* Add via block's "Advanced > Additional CSS class(es)" in the editor */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .hide-on-desktop {
    display: none !important;
  }
}

/* --- Pricing Comparison: Premium Enterprise Row --- */
.hs-pricing-comparison__enterprise-row-wrapper {
  margin-top: 1.5rem;
  width: 100%;
}

.hs-pricing-comparison__card.is-enterprise-row {
  flex-direction: column;
  background: rgba(15, 26, 255, 0.03);
  /* Subtle blue tint */
  padding: 2.5rem;
}

.is-enterprise-row .hs-pricing-comparison__plan-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.is-enterprise-row .hs-pricing-comparison__plan-name {
  margin-bottom: 0.25rem;
  font-size: 1.5rem;
}

.is-enterprise-row .hs-pricing-comparison__tagline {
  font-size: 1.1rem;
}

.is-enterprise-row .hs-pricing-comparison__price {
  font-size: 2.25rem;
  margin-top: 0;
}

.is-enterprise-row .hs-pricing-comparison__features {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem 2rem !important;
  margin: 0 0 2rem 0 !important;
}

.is-enterprise-row .hs-pricing-comparison__cta {
  align-self: flex-start;
  min-width: 240px;
}

.is-enterprise-row .hs-pricing-comparison__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Responsive Enterprise Row */
@media (max-width: 1024px) {
  .is-enterprise-row .hs-pricing-comparison__features {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .hs-pricing-comparison__card.is-enterprise-row {
    padding: 1.75rem;
  }

  .is-enterprise-row .hs-pricing-comparison__plan-header {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
  }

  .is-enterprise-row .hs-pricing-comparison__features {
    grid-template-columns: 1fr !important;
  }

  .is-enterprise-row .hs-pricing-comparison__card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}

/* --- APStract Customer Testimonials: Stability Fix --- */
.wp-block-hs-customer-testimonials .hs-customer-testimonials__slides {
  display: grid !important;
  grid-template-areas: "slide";
  align-items: center;
  /* Vertically center shorter content */
  min-height: 380px;
  /* Safe minimum to avoid collapses */
}

.wp-block-hs-customer-testimonials .hs-customer-testimonials__slide {
  grid-area: slide;
  display: flex !important;
  /* Override display: none from base block */
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
  pointer-events: none;
  margin: 0 auto;
}

.wp-block-hs-customer-testimonials .hs-customer-testimonials__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Ensure the quote takes up available space but doesn't force height unnecessarily */
.wp-block-hs-customer-testimonials .hs-customer-testimonials__quote {
  margin-bottom: 2.5rem;
}

.wp-block-hs-customer-testimonials .hs-customer-testimonials__meta {
  margin-top: auto;
  /* Push meta to bottom of its flex container */
  padding-bottom: 1rem;
}

/* Responsive adjustments for the Grid fix */
@media (max-width: 768px) {
  .wp-block-hs-customer-testimonials .hs-customer-testimonials__slides {
    min-height: 480px;
    /* More room for wrapped text on mobile */
  }
}

.contentor-404-languages {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 1rem;
  text-align: center;
}

.contentor-404-languages__headline {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 600;
  color: #374151;
  margin: 0 0 1.5rem;
}

.contentor-404-languages__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.contentor-404-languages__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 100px;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.contentor-404-languages__chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.contentor-404-languages__chip--active {
  background: var(--contentor-blue, #3b5fe5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 95, 229, 0.3);
}

.contentor-404-languages__flag {
  font-size: 1.1em;
  line-height: 1;
}

@media (max-width: 600px) {
  .contentor-404-languages__chip {
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
  }
}

/* ========== Contentor Button System Normalization ========== */

.theme-preset--contentor-blue,
.theme-preset--contentor-dark,
.theme-preset--contentor-gradient,
.contentor-gradient-header,
.gradient-header-menu,
.contentor-footer {
  --button-primary-bg: var(--contentor-green);
  --button-primary-bg-hover: var(--contentor-green-dark);
  --button-primary-text: #07111f;
  --button-secondary-bg: transparent;
  --button-secondary-bg-hover: rgba(255, 255, 255, 0.1);
  --button-secondary-text: #ffffff;
  --button-secondary-border: rgba(255, 255, 255, 0.52);
  --button-text-link: #ffffff;
  --button-shadow: 0 8px 18px rgba(0, 234, 110, 0.18);
  --button-shadow-hover: 0 12px 24px rgba(0, 234, 110, 0.24);
}

.theme-preset--contentor-green {
  --button-primary-bg: var(--contentor-blue);
  --button-primary-bg-hover: var(--contentor-blue-dark);
  --button-primary-text: #ffffff;
  --button-secondary-text: #ffffff;
  --button-secondary-border: rgba(255, 255, 255, 0.64);
  --button-secondary-bg-hover: rgba(255, 255, 255, 0.12);
  --button-text-link: #ffffff;
}

.theme-preset--contentor-blue-light {
  --button-primary-bg: var(--contentor-blue-dark);
  --button-primary-bg-hover: var(--contentor-blue);
  --button-primary-text: #ffffff;
  --button-secondary-text: var(--contentor-blue-dark);
  --button-secondary-border: var(--contentor-blue-dark);
  --button-secondary-bg-hover: rgba(15, 26, 255, 0.08);
  --button-text-link: var(--contentor-blue-dark);
}

.hs-buttons,
.theme-buttons {
  gap: 0.85rem !important;
  align-items: center;
}

.hs-buttons a:not(.text),
.hs-buttons button:not(.text),
.theme-buttons a:not(.text),
.contentor-gradient-header .gradient-cta-button,
.gradient-header-menu .gradient-cta-button,
.contentor-footer__newsletter-button,
.hs-lead-form__submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: var(--button-padding-y) var(--button-padding-x) !important;
  border-radius: var(--button-radius) !important;
  border: 2px solid transparent !important;
  font-size: var(--button-font-size) !important;
  font-weight: var(--button-font-weight) !important;
  line-height: var(--button-line-height) !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

.hs-buttons a.primary,
.hs-buttons button.primary,
.theme-buttons .primary,
.contentor-gradient-header .gradient-cta-button.cta-primary,
.gradient-header-menu .gradient-cta-button.cta-primary,
.contentor-footer__newsletter-button,
.hs-lead-form__submit {
  background: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
  border-color: transparent !important;
  box-shadow: var(--button-shadow) !important;
}

.hs-buttons a.primary:hover,
.hs-buttons button.primary:hover,
.theme-buttons .primary:hover,
.theme-buttons .primary:focus,
.contentor-gradient-header .gradient-cta-button.cta-primary:hover,
.gradient-header-menu .gradient-cta-button.cta-primary:hover,
.contentor-footer__newsletter-button:hover,
.hs-lead-form__submit:hover {
  background: var(--button-primary-bg-hover) !important;
  color: var(--button-primary-text) !important;
  box-shadow: var(--button-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

.hs-buttons a.secondary,
.hs-buttons button.secondary,
.theme-buttons .secondary,
.contentor-gradient-header .gradient-cta-button.cta-secondary,
.contentor-gradient-header .gradient-cta-button.cta-outline,
.gradient-header-menu .gradient-cta-button.cta-secondary,
.gradient-header-menu .gradient-cta-button.cta-outline {
  background: var(--button-secondary-bg) !important;
  color: var(--button-secondary-text) !important;
  border-color: var(--button-secondary-border) !important;
  box-shadow: none !important;
}

.hs-buttons a.secondary:hover,
.hs-buttons button.secondary:hover,
.theme-buttons .secondary:hover,
.theme-buttons .secondary:focus,
.contentor-gradient-header .gradient-cta-button.cta-secondary:hover,
.contentor-gradient-header .gradient-cta-button.cta-outline:hover,
.gradient-header-menu .gradient-cta-button.cta-secondary:hover,
.gradient-header-menu .gradient-cta-button.cta-outline:hover {
  background: var(--button-secondary-bg-hover) !important;
  color: var(--button-secondary-text) !important;
  border-color: var(--button-secondary-border) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.hs-buttons a.text,
.theme-buttons .text {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35em !important;
  width: auto !important;
  flex-basis: auto !important;
  min-height: auto !important;
  min-width: 0 !important;
  padding: 0.15rem 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--button-text-link) !important;
  box-shadow: none !important;
  font-size: var(--button-font-size) !important;
  font-weight: var(--button-font-weight) !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

.hs-buttons:has(a.text) {
  gap: 0.3rem !important;
}

.hs-buttons a.text {
  width: 100% !important;
  flex-basis: 100% !important;
  justify-content: flex-start !important;
}

.hs-buttons a.text:first-child {
  margin-top: 0.4rem !important;
}

.hs-buttons a.text:hover,
.theme-buttons .text:hover,
.theme-buttons .text:focus {
  background: transparent !important;
  color: var(--button-text-link) !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
}

.footer-language-list a,
.contentor-gradient-header .language-dropdown-toggle,
.gradient-header-menu .gradient-header-language-mobile .language-dropdown-toggle {
  border-radius: var(--button-radius) !important;
}

@media (max-width: 640px) {
  .gradient-header-hero,
  .gradient-header-hero .wp-block-hs-section-wrapper,
  .gradient-header-hero .section-wrapper__container,
  .gradient-header-hero .hs-hero__container,
  .gradient-header-hero .hs-hero__inner,
  .gradient-header-hero .hs-buttons {
    max-width: 100% !important;
  }

  .gradient-header-hero .section-wrapper__container,
  .gradient-header-hero .hs-hero__container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .gradient-header-hero .hs-hero__inner {
    overflow: visible;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .gradient-header-hero .hs-hero__title,
  .gradient-header-hero .hs-hero__text,
  .gradient-header-hero .hs-hero__text p {
    width: calc(100vw - 2rem) !important;
    max-width: 100% !important;
  }

  .gradient-header-hero .hs-buttons a:not(.text),
  .gradient-header-hero .hs-buttons button:not(.text) {
    width: calc(100vw - 2rem) !important;
    max-width: 100% !important;
  }
}

/* Mobile eyebrow tweak (eyebrow itself is defined in "Site typography → Hero") */
@media (max-width: 480px) {
  .hs-hero__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
}

/* ==========================================================================
   hs-filter-bar — search/sort/categories card
   ========================================================================== */
.hs-filter-bar {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 2rem));
  margin: -2.5rem auto 2.5rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
  padding: 1.25rem 1.5rem;
}

.hs-filter-bar__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hs-filter-bar__search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  background: #fff;
  transition: border-color 0.15s ease;
}

.hs-filter-bar__search:focus-within {
  border-color: #94a3b8;
}

.hs-filter-bar__search-icon {
  color: #64748b;
  flex-shrink: 0;
}

.hs-filter-bar__search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.9375rem;
  color: #0f172a;
}

.hs-filter-bar__search-input::placeholder {
  color: #94a3b8;
}

.hs-filter-bar__search-input:disabled {
  cursor: not-allowed;
}

.hs-filter-bar__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  margin-right: 0.5rem;
}

.hs-filter-bar__sort {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: flex-end;
}

.hs-filter-bar__sort-btn {
  border: 0;
  background: transparent;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
}

.hs-filter-bar__sort-btn.is-active {
  background: #0f172a;
  color: #fff;
}

.hs-filter-bar__sort-btn:disabled {
  cursor: not-allowed;
}

.hs-filter-bar__categories {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid #f1f5f9;
  padding-top: 1rem;
}

.hs-filter-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hs-filter-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.hs-filter-bar__chip.is-active {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

.hs-filter-bar__chip.is-active .hs-filter-bar__chip-dot {
  display: none;
}

.hs-filter-bar__chip:disabled {
  cursor: not-allowed;
}

.hs-filter-bar__chip-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--chip-dot, #cbd5e1);
  flex-shrink: 0;
}

.hs-filter-bar__chip.is-chip-static {
  background: #fff;
  cursor: default;
}

.hs-filter-bar__chip-dot--green  { --chip-dot: #10b981; }
.hs-filter-bar__chip-dot--blue   { --chip-dot: #3b82f6; }
.hs-filter-bar__chip-dot--amber  { --chip-dot: #f59e0b; }
.hs-filter-bar__chip-dot--red    { --chip-dot: #ef4444; }
.hs-filter-bar__chip-dot--purple { --chip-dot: #8b5cf6; }
.hs-filter-bar__chip-dot--teal   { --chip-dot: #14b8a6; }

@media (min-width: 768px) {
  .hs-filter-bar__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "search sort"
      "categories categories";
    align-items: center;
  }
  .hs-filter-bar__search { grid-area: search; }
  .hs-filter-bar__sort { grid-area: sort; }
  .hs-filter-bar__categories { grid-area: categories; }
}

@media (max-width: 480px) {
  .hs-filter-bar {
    margin-top: -1.5rem;
    padding: 1rem;
    border-radius: 12px;
  }

  .hs-filter-bar__categories {
    flex-direction: column;
    align-items: flex-start;
  }

  .hs-filter-bar__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 0.25rem;
  }

  .hs-filter-bar__chip {
    flex-shrink: 0;
  }
}

/* ==========================================================================
   aps-multi-cpt-listing — featured (full-width) + 2/3 + 1/3 sidebar layout
   ========================================================================== */
.aps-multi-cpt-listing.has-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.aps-multi-cpt-listing__featured-row {
  width: 100%;
}

.aps-multi-cpt-listing__bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: stretch;
}

.aps-multi-cpt-listing__main {
  min-width: 0;
}

.aps-multi-cpt-listing__sidebar {
  min-width: 0;
}

.aps-multi-cpt-listing__sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 110px;
}

@media (max-width: 1024px) {
  .aps-multi-cpt-listing__bottom-row {
    grid-template-columns: 1fr;
  }

  .aps-multi-cpt-listing__sidebar-inner {
    position: static;
  }
}

/* hs-popular — numbered list of popular posts (sits directly on background) */
.hs-popular {
  padding: 0.5rem 0 0;
  background: transparent;
}

.hs-popular__title {
  margin: 0 0 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #475569;
  line-height: 1;
}

/* Newsletter sits in a card */
.hs-side-card.hs-newsletter,
.hs-side-card.hs-side-card--cta {
  background: #0f172a;
  color: #f1f5f9;
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* Adapt CTA-rendered markup to the dark sidebar block. The CTA system
   outputs generic .aps-cta__* classes; we recolor them in this context
   without touching the plugin CSS. */
.hs-side-card--cta .aps-cta__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.75rem;
}

.hs-side-card--cta .aps-cta__text {
  font-size: 1rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0 0 1.25rem;
}

.hs-side-card--cta input[type="email"],
.hs-side-card--cta input[type="text"],
.hs-side-card--cta input[type="tel"] {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  font-size: 0.9375rem;
  outline: 0;
  box-sizing: border-box;
}

.hs-side-card--cta input::placeholder {
  color: #64748b;
}

.hs-side-card--cta .aps-newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #94a3b8;
  margin-top: 0.75rem;
}

.hs-side-card--cta .aps-newsletter-consent input[type="checkbox"] {
  margin-top: 0.15em;
  flex-shrink: 0;
  accent-color: #10b981;
}

/* Stack input and button vertically — the inline layout is cramped in
   a sidebar's narrow column and the input becomes nearly unreadable. */
.hs-side-card--cta .contentor-footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hs-side-card--cta .contentor-footer__newsletter-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

/* The global button rules below this section use !important everywhere
   (search for var(--button-primary-bg) — they reset background to blue),
   so the sidebar override has to use !important too to land. */
.hs-side-card--cta .contentor-footer__newsletter-button,
.hs-side-card--cta .aps-button--primary {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem !important;
  background: #10b981 !important;
  color: #fff !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  text-align: center;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: none !important;
}

.hs-side-card--cta .contentor-footer__newsletter-button:hover,
.hs-side-card--cta .aps-button--primary:hover {
  background: #0fa372 !important;
  transform: none !important;
}

.hs-newsletter__title {
  margin: 0 0 0.75rem;
}

.hs-popular__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: popular;
}

.hs-popular__item {
  counter-increment: popular;
  padding: 0.85rem 0;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.hs-popular__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.hs-popular__item::before {
  content: counter(popular);
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #10b981;
  flex-shrink: 0;
  min-width: 1.5ch;
}

.hs-popular__link {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: #0f172a;
  text-decoration: none;
}

.hs-popular__link:hover {
  color: var(--contentor-blue);
}

.hs-newsletter__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #10b981;
}

.hs-newsletter__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.75rem;
}

.hs-newsletter__description {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 1.25rem;
}

.hs-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hs-newsletter__input {
  border: 0;
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  font-size: 0.9375rem;
  outline: 0;
}

.hs-newsletter__input::placeholder {
  color: #64748b;
}

.hs-newsletter__submit {
  border: 0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  background: #10b981;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.hs-newsletter__submit:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

/* ==========================================================================
   aps-multi-cpt-card--featured — large two-column highlight card
   ========================================================================== */
/* Base shared styling for any featured/wide card */
.aps-multi-cpt-card--featured {
  background: #fff;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Periodic wide card inside the grid: vertical layout, spans both columns.
   Selector chains 3 classes to beat the hs-blocks plugin's flex-basis
   rule (.hs-grid-cards--<size> .hs-grid-cards__box, 2 classes) which
   would otherwise keep this card at the regular size column. */
.hs-grid-cards .hs-grid-cards__box.aps-multi-cpt-card--featured {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  flex: 1 1 100%;
  min-width: 100%;
}

.aps-multi-cpt-card--featured,
.aps-multi-cpt-card--featured * {
  text-decoration: none;
}

.aps-multi-cpt-card--featured .aps-multi-cpt-card__title,
.aps-multi-cpt-card--featured .aps-multi-cpt-card__excerpt,
.aps-multi-cpt-card--featured .aps-multi-cpt-card__author,
.aps-multi-cpt-card--featured .aps-multi-cpt-card__reading-time,
.aps-multi-cpt-card--featured time {
  color: inherit;
}

.aps-multi-cpt-card--featured:hover {
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
}

.aps-multi-cpt-card--featured .aps-multi-cpt-card__image {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
}

.aps-multi-cpt-card--featured .aps-multi-cpt-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aps-multi-cpt-card__image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      135deg,
      #ece7df 0 12px,
      #d8d2c6 12px 14px
    );
  color: #6b6453;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.aps-multi-cpt-card--featured .aps-multi-cpt-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.75rem 1.75rem;
}

.aps-multi-cpt-card--featured .aps-multi-cpt-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.aps-multi-cpt-card--featured .aps-multi-cpt-card__status {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #10b981;
}

.aps-multi-cpt-card--featured .aps-multi-cpt-card__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.1;
  margin: 0;
  color: #0f172a;
}

.aps-multi-cpt-card--featured .aps-multi-cpt-card__excerpt {
  font-size: 1rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

.aps-multi-cpt-card--featured .aps-multi-cpt-card__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: #475569;
  margin-top: 0.5rem;
}

.aps-multi-cpt-card__avatar-stack {
  display: inline-flex;
  align-items: center;
  margin-right: 0.25rem;
}

.aps-multi-cpt-card__avatar-stack .aps-multi-cpt-card__avatar + .aps-multi-cpt-card__avatar {
  margin-left: -0.65rem;
}

.aps-multi-cpt-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #cfe3ff;
  color: #1e3a8a;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 0.25rem;
  overflow: hidden;
  box-shadow: 0 0 0 2px #fff;
}

.aps-multi-cpt-card__avatar-stack .aps-multi-cpt-card__avatar {
  margin-right: 0;
}

.aps-multi-cpt-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aps-multi-cpt-card__author {
  font-weight: 600;
  color: #0f172a;
}

.aps-multi-cpt-card__author-more {
  font-weight: 500;
  color: #64748b;
}

.aps-multi-cpt-card__meta-sep {
  opacity: 0.5;
}

@media (max-width: 768px) {
  .aps-multi-cpt-card--featured .aps-multi-cpt-card__body {
    padding: 1.25rem;
  }
}

/* Top featured-hero — side-by-side dynamic layout. Lives in __featured-row, never inside .hs-grid-cards. */
.aps-multi-cpt-listing__featured-row .aps-multi-cpt-card--featured-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch;
  min-height: 440px;
}

.aps-multi-cpt-listing__featured-row .aps-multi-cpt-card--featured-hero .aps-multi-cpt-card__image {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  aspect-ratio: auto;
  border-radius: 0 !important;
  overflow: hidden;
  align-self: stretch;
}

.aps-multi-cpt-card--featured-hero .aps-multi-cpt-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aps-multi-cpt-card--featured-hero .aps-multi-cpt-card__body {
  justify-content: center;
  gap: 1.25rem;
  padding: 3rem 3rem 3rem 2.5rem;
}

@media (max-width: 768px) {
  .aps-multi-cpt-card--featured-hero {
    display: flex;
    flex-direction: column;
  }

  .aps-multi-cpt-card--featured-hero .aps-multi-cpt-card__image {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .aps-multi-cpt-card--featured-hero .aps-multi-cpt-card__body {
    padding: 1.5rem;
  }
}

/* ==========================================================================
   aps-multi-cpt-card (standard) — striped placeholder + meta layout
   ========================================================================== */
.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured) {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured):hover {
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05);
  transform: translateY(-2px);
}

.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured) .aps-multi-cpt-card__image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured) .aps-multi-cpt-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aps-multi-cpt-card__image--blue     .aps-multi-cpt-card__image-placeholder {
  background: repeating-linear-gradient(135deg, #dde9f7 0 12px, #c8d8eb 12px 14px);
  color: #2f4a73;
}
.aps-multi-cpt-card__image--mint     .aps-multi-cpt-card__image-placeholder {
  background: repeating-linear-gradient(135deg, #dceee2 0 12px, #c5e0cf 12px 14px);
  color: #2f5a44;
}
.aps-multi-cpt-card__image--green    .aps-multi-cpt-card__image-placeholder {
  background: repeating-linear-gradient(135deg, #cce6d3 0 12px, #b2d6bc 12px 14px);
  color: #1f4a30;
}
.aps-multi-cpt-card__image--beige    .aps-multi-cpt-card__image-placeholder {
  background: repeating-linear-gradient(135deg, #ece7df 0 12px, #d8d2c6 12px 14px);
  color: #6b6453;
}
.aps-multi-cpt-card__image--lavender .aps-multi-cpt-card__image-placeholder {
  background: repeating-linear-gradient(135deg, #e4dff2 0 12px, #cdc5e3 12px 14px);
  color: #4b3e75;
}

.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured) .aps-multi-cpt-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.15rem 1.15rem;
  flex: 1;
}

.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured) .aps-multi-cpt-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-size: 0.8125rem;
  color: #64748b;
}

.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured) .aps-multi-cpt-card__date {
  font-weight: 500;
}

.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured) .aps-multi-cpt-card__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0;
  color: #0f172a;
}

.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured) .aps-multi-cpt-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #475569;
  margin: 0;
  flex: 1;
}

.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured) .aps-multi-cpt-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #64748b;
  padding-top: 0.5rem;
}

.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured) .aps-multi-cpt-card__avatar {
  background: #d1fae5;
  color: #065f46;
}

.hs-grid-cards a.aps-card-base:not(.aps-multi-cpt-card--featured) .aps-multi-cpt-card__author {
  font-weight: 600;
  color: #0f172a;
}

/* ==========================================================================
   aps-multi-cpt-list — compact list layout
   ========================================================================== */
.aps-multi-cpt-listing.layout-list .aps-multi-cpt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aps-multi-cpt-list__item {
  margin: 0;
  border-bottom: 1px solid #e5e7eb;
}

.aps-multi-cpt-list__item:first-child {
  border-top: 1px solid #e5e7eb;
}

.aps-multi-cpt-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem 1.5rem;
  padding: 1rem 0.25rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.aps-multi-cpt-list__row:hover {
  background: #f8fafc;
}

.aps-multi-cpt-list__title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
  color: #0f172a;
  grid-column: 1;
}

.aps-multi-cpt-list__row:hover .aps-multi-cpt-list__title {
  color: var(--contentor-blue);
}

.aps-multi-cpt-list__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-size: 0.8125rem;
  color: #64748b;
  white-space: nowrap;
  grid-column: 2;
  grid-row: 1;
}

.aps-multi-cpt-list__excerpt {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #64748b;
  margin: 0.35rem 0 0;
  grid-column: 1;
  grid-row: 2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .aps-multi-cpt-list__row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .aps-multi-cpt-list__eyebrow {
    grid-column: 1;
    grid-row: 1;
    flex-wrap: wrap;
  }

  .aps-multi-cpt-list__title {
    grid-row: 2;
  }

  .aps-multi-cpt-list__excerpt {
    grid-row: 3;
  }
}

/* ==========================================================================
   hs-year-archive — chronological grid grouped by year, with sticky year nav
   ========================================================================== */
.aps-multi-cpt-listing.layout-year-grid {
  display: block;
}

.hs-year-archive {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

.hs-year-archive__nav {
  position: sticky;
  top: 110px;
}

.hs-year-archive__nav-label {
  margin: 0 0 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #475569;
}

.hs-year-archive__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid #e2e8f0;
}

.hs-year-archive__nav-item {
  position: relative;
  margin: 0;
}

.hs-year-archive__nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--contentor-green, #00ea6e);
}

.hs-year-archive__nav-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0 0.5rem 1.25rem;
  text-decoration: none;
  color: #475569;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.hs-year-archive__nav-link:hover {
  color: #0f172a;
}

.hs-year-archive__nav-item.is-active .hs-year-archive__nav-link {
  color: #0f172a;
  font-weight: 700;
}

.hs-year-archive__nav-count {
  font-size: 0.85rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.hs-year-archive__main {
  min-width: 0;
}

.hs-year-archive__section {
  margin-bottom: 4rem;
}

.hs-year-archive__section:last-child {
  margin-bottom: 0;
}

.hs-year-archive__section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #0f172a;
  margin-bottom: 2rem;
}

.hs-year-archive__year {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  margin: 0;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.hs-year-archive__year-count {
  margin: 0;
  font-size: 0.85rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.hs-year-archive__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  row-gap: 0;
}

.hs-year-archive__item {
  border-bottom: 1px solid #e2e8f0;
}

.hs-year-archive__link {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.5rem 0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}

.hs-year-archive__link:hover {
  transform: translateX(2px);
}

.hs-year-archive__link:hover .hs-year-archive__title {
  color: var(--contentor-blue, #2c5282);
}

.hs-year-archive__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.hs-year-archive__meta time {
  font-variant-numeric: tabular-nums;
}

.hs-year-archive__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0;
  color: #0f172a;
  transition: color 0.15s ease;
}

.hs-year-archive__byline {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
}

.hs-year-archive__byline-sep {
  opacity: 0.5;
  margin: 0 0.15rem;
}

@media (max-width: 900px) {
  .hs-year-archive {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hs-year-archive__nav {
    position: static;
  }

  .hs-year-archive__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-left: 0;
  }

  .hs-year-archive__nav-item {
    border: 1px solid #e2e8f0;
    border-radius: 999px;
  }

  .hs-year-archive__nav-item.is-active {
    border-color: var(--contentor-green, #00ea6e);
  }

  .hs-year-archive__nav-item.is-active::before {
    display: none;
  }

  .hs-year-archive__nav-link {
    padding: 0.4rem 0.9rem;
    gap: 0.5rem;
  }
}

@media (max-width: 600px) {
  .hs-year-archive__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Site typography — one system across the whole site
   Fonts: Geist (everything) / Geist Mono (data, code, IDs, timestamps)
   Heroes keep their own scale via the opt-out at the bottom of this block.
   ========================================================================== */

:root {
  --site-mono: var(--font-mono);

  /* Ink scale (text on light backgrounds — components on dark/colored
     backgrounds set their own color). */
  --ink-1000: #0a0e1a;
  --ink-800:  #1d2334;
  --ink-700:  #2a3145;
  --ink-500:  #5b6478;
  --ink-400:  #7a8294;
  --ink-300:  #94a3b8;

  --read-width: 680px;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-800);
}

/* Body copy in main content areas — :where() = 0 specificity, so any
   class-targeted plugin/theme rule wins automatically without an opt-out. */
:where(main p, main li, .section-wrapper__container p, .section-wrapper__container li) {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--ink-800);
  text-wrap: pretty;
}

/* Long-form articles: 18px / 1.75 with a hard cap on inline-size so
   line length stays in the readable 60–70ch band even when the grid
   column is wider. Applied to direct children only so block-level
   patterns inside (grid-cards, columns, quote callouts) can break
   out to full width. */
:where(.aps-news-layout__main p, .aps-news-layout__main li) {
  font-size: 1.125rem;
  line-height: 1.75;
  letter-spacing: -0.005em;
}

:where(.aps-news-layout__main > p,
       .aps-news-layout__main > ul,
       .aps-news-layout__main > ol) {
  max-inline-size: 65ch;
}

/* Section markers — short green accent line above every H2 inside the
   article body, helping the eye find section breaks in long reads. */
.aps-news-layout__main h2 {
  position: relative;
  margin-top: 2.5em;
}

.aps-news-layout__main h2::before {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  background: var(--contentor-green, #00ea6e);
  margin-bottom: 0.75rem;
  border-radius: 2px;
}

.aps-news-layout__main > h2:first-child {
  margin-top: 0;
}

:where(main p + p, .section-wrapper__container p + p) {
  margin-top: 1.1em;
}

/* Heading scale — Geist 600 with negative letter-spacing scaling with size.
   :where() lets .hs-hero__title and other block-specific class rules override
   naturally without an opt-out block. */
:where(h1) {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.25rem, 4vw, 2.5rem); /* 36–40px */
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink-1000);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

:where(h2) {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.875rem; /* 30px */
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink-1000);
  margin: 2em 0 0.4em;
  text-wrap: balance;
}

:where(h3) {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.375rem; /* 22px */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-1000);
  margin: 1.6em 0 0.3em;
  text-wrap: balance;
}

:where(h4) {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.125rem; /* 18px */
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink-1000);
  margin: 1.4em 0 0.25em;
  text-wrap: balance;
}

:where(h5) {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-1000);
  margin: 1.3em 0 0.2em;
  text-wrap: balance;
}

/* h6 = eyebrow / kicker: Geist 700, uppercase, 0.12em tracking */
:where(h6) {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem; /* 12px */
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 1.3em 0 0.25em;
}

/* First heading inside a section — no extra top margin */
.section-wrapper__container > h1:first-child,
.section-wrapper__container > h2:first-child,
.section-wrapper__container > h3:first-child,
main > section > h1:first-child,
main > section > h2:first-child,
main > section > h3:first-child {
  margin-top: 0;
}

/* Blockquotes — kept in sync with .hs-quote--lead in
   assets/css/blocks/blockquote.css so native and shortcode quotes
   share typography and spacing. Stroke is a simple border-left, so
   it always spans the full element height (including any cite). */
blockquote {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink-1000);
  border-left: 4px solid var(--contentor-green, #00ea6e);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 2.5rem 0;
  text-wrap: pretty;
}

blockquote cite {
  display: block;
  margin-top: 1rem;
  /* Mirror <p>'s natural 1em (≈ 1.5rem) bottom margin so the stroke
     keeps the same bottom breathing room when a cite is present. */
  margin-bottom: 1.5rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.9375rem; /* 15px — matches .hs-quote__cite */
  line-height: 1.4;
  color: var(--color-text-light, #444);
}

@media (max-width: 480px) {
  blockquote {
    margin: 2rem 0;
    padding-left: 1.125rem;
    font-size: 1.25rem;
  }
}

/* Captions — caption token: 13px Geist 500 */
figcaption,
.wp-block-image figcaption {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-500);
  margin-top: 0.6rem;
}

/* Small / secondary text */
:where(small, .text-small) {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-500);
}

/* Code / mono */
code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em; /* ~13px in 16px context */
  font-variant-numeric: tabular-nums;
}

/* Tabular numerals on dates, times, and any explicit mono usage */
time,
.mono,
.mono-sm {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.mono-sm {
  font-size: 0.8125rem; /* 13px */
  line-height: 1.4;
}

/* ============================================================
   Site typography → Hero (.hs-hero)
   ONE source of truth for hero typography. Applies to:
   - Block-rendered hero (.hs-hero with __container/__media/__inner)
   - Text-only hero (.hs-hero--text-only) used by article single,
     archive, 404. Both variants share the same __title/__text/__eyebrow.
   ============================================================ */

.hs-hero--text-only {
  max-width: 70%;
}

.hs-hero__eyebrow {
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.9;
}

.hs-hero__eyebrow span[aria-hidden="true"] {
  opacity: 0.6;
}

.hs-hero__title {
  font-family: var(--font-sans);
  /* !important defeats the inline `font-size: Xvw` the hero block writes per
     post — we want one standard hero size across the site, driven by
     --hero-title-size. */
  font-size: var(--hero-title-size) !important;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: inherit;
  margin: 0 0 0.6rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
  max-width: 100%;
}

.hs-hero__text,
.hs-hero__text p {
  font-family: var(--font-sans);
  font-size: var(--hero-subtitle-size);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: inherit;
  margin: 0 0 1rem;
  max-width: 100%;
}

.hs-hero__text p {
  margin: 0.5rem 0 1rem;
}

/* Buttons inside a hero */
.hs-hero__buttons {
  margin-top: 1.5rem;
  justify-content: flex-start;
}

/* On the contentor-blue preset (used by all the gradient-header heroes),
   primary buttons invert to white. */
.theme-preset--contentor-blue .hs-hero__buttons a.primary,
.theme-preset--contentor-blue .hs-hero a.primary {
  background: #fff;
  color: var(--site-primary, #2c77e7) !important;
}

.theme-preset--contentor-blue .hs-hero__buttons a.primary:hover,
.theme-preset--contentor-blue .hs-hero a.primary:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
}

/* Mobile scale */
@media (max-width: 1100px) {
  .hs-hero--text-only { max-width: 85%; }
}

@media (max-width: 720px) {
  .hs-hero--text-only { max-width: 100%; }
  .hs-hero__title { margin-bottom: 0.8rem; }
}

/* ---- Article-specific layout extras (apply where the elements actually exist) ---- */

/* Constrain reading width in article main column */
.aps-news-layout__main {
  max-width: var(--read-width);
}

/* Lead / ingress */
.aps-news-ingress {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink-1000);
  margin-bottom: 2rem;
  max-width: var(--read-width);
  text-wrap: pretty;
}

/* Article body links — subtle underline */
.aps-news-layout__main a {
  color: var(--site-primary, #0c2c5a);
  text-decoration: underline;
  text-decoration-color: rgba(12, 44, 90, 0.3);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}

.aps-news-layout__main a:hover {
  text-decoration-color: currentColor;
}

/* Mobile scale-down */
@media (max-width: 768px) {
  main p,
  main li,
  .section-wrapper__container p,
  .section-wrapper__container li {
    font-size: 1.0625rem;
    line-height: 1.65;
  }

  h1 { font-size: clamp(1.875rem, 6vw, 2.5rem); }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.25rem; }

  .aps-news-ingress { font-size: 1.125rem; }
}