@charset "UTF-8";
/*
 * Main screen styles for Mind Theme
 *
 * @since   GD_Mind v1.0
*/
/* Import variables and self-contained styles first */
/*
 * SCSS variables and mixins for Mind Theme
 * - Include at the top of other SCSS files
 * - Try to name vars with their type at the start, e.g. @color-background. This
 *   can help with IDE auto-completion.
 *
 * @since   GD_Mind v1.0
*/
/* URL paths */
/* Fonts */
/* Colours */
/* Brand */
/* Measurements */
/* Mixins
- Use CamelCaps to distinguish from normal CSS classes
-----------------------------------------------------------------------------------*/
/*
Media queries
@link	http://davidwalsh.name/write-media-queries-sass
*/
/*
 * Web fonts — Inter (self-hosted)
 *
 * woff2 only, latin subset, font-display: swap. Files live in assets/fonts/inter/
 * (see the README there for the exact files to drop in). The 400 weight is preloaded
 * in header.php.
 *
 * @since   GD_Mind v1.0
*/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/gd-mind/assets/fonts/inter/inter-v20-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/gd-mind/assets/fonts/inter/inter-v20-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/wp-content/themes/gd-mind/assets/fonts/inter/inter-v20-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/wp-content/themes/gd-mind/assets/fonts/inter/inter-v20-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/wp-content/themes/gd-mind/assets/fonts/inter/inter-v20-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/wp-content/themes/gd-mind/assets/fonts/inter/inter-v20-latin-700italic.woff2") format("woff2");
}
/*
 * Accessibility styles for Mind Theme
 * Elements grabbed from Default WordPress Twenty-Sixteen Theme
 *
 * @since   GD_Mind v1.0
*/
/* Text meant only for screen readers */
.says,
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  /* many screen reader and browser combinations announce broken words as they would appear visually */
  word-wrap: normal !important;
}

/* must have higher specificity than alternative color schemes inline styles */
.site .skip-link {
  background-color: #f1f1f1;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
  color: #21759b;
  display: block;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  left: -9999em;
  outline: none;
  padding: 15px 23px 14px;
  text-decoration: none;
  text-transform: none;
  top: -9999em;
}

.logged-in .site .skip-link {
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
}

.site .skip-link:focus {
  clip: auto;
  height: auto;
  left: 6px;
  top: 7px;
  width: auto;
  z-index: 100000;
}

/*
 * Buttons
 *
 * .btn          shared shape + size (chamfered corner), no colour.
 * .btn-{colour} colour scheme on top of .btn (e.g. .btn-lavender-2notch).
 *
 * @since   GD_Mind v1.0
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  /* chamfer top-right + bottom-left corners */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.btn-lavender-2notch {
  background-color: #DCD0FF;
  color: #2A2457;
}
.btn-lavender-2notch:hover, .btn-lavender-2notch:focus-visible {
  background-color: #c9b8ff; /* slightly deeper lavender on hover */
}

.btn-white {
  background-color: #fff;
  color: #112B19;
}
.btn-white:hover, .btn-white:focus-visible {
  background-color: #ececec;
}

/*
 * Page builder — spacing between components
 *
 * Every page-builder section (.page_component) gets equal top + bottom margins. Adjacent vertical
 * margins collapse to a single gap (85px between components), and the first/last components' margins
 * create the gap up to the hero/banner and down to the footer — giving a uniform 85px everywhere
 * (70px at ≤680px). Relies on #content / #main_content_wrapper having no vertical padding.
 *
 * NOTE: rf_page_builder() also outputs per-section `topmargin-remove/-reduce` and
 * `botmargin-remove/-reduce` classes (from the section display options) — style those here if/when
 * those controls are used.
 *
 * @since   GD_Mind v1.0
*/
.page_component {
  margin-top: 85px;
  margin-bottom: 85px;
}
@media (max-width: 680px) {
  .page_component {
    margin-top: 70px;
    margin-bottom: 70px;
  }
}

/*
 * Featured image object-position utilities
 *
 * Applied (via rf_featured_image_position_class()) to any object-fit:cover featured image so its
 * vertical crop can be controlled per post (from the "Image position" setting). Always centred
 * horizontally.
 *
 * @since   GD_Mind v1.0
*/
.objpos-top {
  object-position: center top;
}

.objpos-middle {
  object-position: center center;
}

.objpos-bottom {
  object-position: center bottom;
}

/*
 * WYSIWYG page component (General Content)
 *
 * One or two columns. One column = standard content width or a narrower centred column. Two columns
 * sit side by side on desktop and stack ≤800px, with a per-section choice of which column is on top.
 *
 * NOTE: typography (font sizes/weights/spacing for headings, paragraphs, lists, etc.) is deliberately
 * left for a later pass — this is structure only.
 *
 * @since   GD_Mind v1.0
*/
.wysiwyg {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 600px) {
  .wysiwyg {
    padding: 0 24px;
  }
}

/* One column — narrow variant */
.wysiwyg--narrow {
  max-width: 900px;
}

/* Two columns — 50/50 on desktop, stacked ≤800px */
.wysiwyg--2col {
  display: flex;
  gap: 120px;
}
@media (max-width: 800px) {
  .wysiwyg--2col {
    flex-direction: column;
    gap: 32px;
  }
}
.wysiwyg--2col .wysiwyg_col {
  flex: 1 1 0;
  min-width: 0;
}

/* Mobile stacking order: "bottom" sends column 1 (left on desktop) to the bottom */
@media (max-width: 800px) {
  .wysiwyg--mobstack-bottom {
    flex-direction: column-reverse;
  }
}

/* Content ----------------------------------------------------------------------------------------- */
.wysiwyg_col {
  color: #03163D;
  font-size: 18px;
}
.wysiwyg_col > :first-child {
  margin-top: 0;
}
.wysiwyg_col > :last-child {
  margin-bottom: 0;
}
.wysiwyg_col img {
  max-width: 100%;
  height: auto;
}
.wysiwyg_col {
  /* Headings (sizes in em; letter-spacing %s converted to em) */
}
.wysiwyg_col h1 {
  font-size: 3.375em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 1.25em;
}
.wysiwyg_col h2 {
  font-size: 2.375em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 1em;
}
.wysiwyg_col h3 {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 1em;
}
.wysiwyg_col h4 {
  font-size: 1.625em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.75em;
}
.wysiwyg_col h5 {
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  margin-bottom: 0.75em;
}
.wysiwyg_col h6 {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: 0.75em;
}
.wysiwyg_col {
  /* Body copy */
}
.wysiwyg_col p {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin-bottom: 1em;
}
.wysiwyg_col {
  /* Paragraph style variants (selectable via the editor "Formats" dropdown) */
}
.wysiwyg_col p.small {
  font-size: 0.875em;
  line-height: 1.57;
  margin-bottom: 1.125em;
}
.wysiwyg_col p.highlight {
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 1em;
}
.wysiwyg_col p.banner-special {
  font-size: 3em;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.05em;
  margin-bottom: 1.5em;
}
.wysiwyg_col strong,
.wysiwyg_col b {
  font-weight: 700;
}
.wysiwyg_col em,
.wysiwyg_col i {
  font-style: italic;
}
.wysiwyg_col a {
  font-weight: 700;
  text-decoration: underline;
  color: #112B19;
}
.wysiwyg_col a:hover, .wysiwyg_col a:focus-visible {
  color: #7169B2;
  text-decoration: none;
}
.wysiwyg_col {
  /* Lists (ul = disc, ol = decimal; base.css reset removed default list-style/indent) */
}
.wysiwyg_col ul,
.wysiwyg_col ol {
  margin-bottom: 1.125em;
  padding-left: 1.5em;
  font-size: 0.875em;
  line-height: 1.58;
  letter-spacing: 0;
}
.wysiwyg_col ul {
  list-style: disc;
}
.wysiwyg_col ol {
  list-style: decimal;
}
.wysiwyg_col li {
  margin-bottom: 0.875em;
}
.wysiwyg_col li:last-child {
  margin-bottom: 0;
}
.wysiwyg_col {
  /* Horizontal rule — full column width, 2px, text colour (no dedicated design yet) */
}
.wysiwyg_col hr {
  width: 100%;
  height: 2px;
  margin: 1.5em 0;
  border: 0;
  background-color: #03163D;
}
.wysiwyg_col {
  /* Tables. Each table is wrapped (in PHP) in .wysiwyg_table_wrap so it can scroll horizontally
     only when it can't fit its container (mobile, or a too-wide table on desktop). A "sortable"
     table gets clickable, sort-arrowed column headers (front-end JS reorders the rows). */
}
.wysiwyg_col .wysiwyg_table_wrap {
  overflow-x: auto;
  margin-bottom: 1.5em;
}
.wysiwyg_col table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e6e6e6;
  margin: 0;
}
.wysiwyg_col th,
.wysiwyg_col td {
  padding: 11px 15px;
  font-size: 0.875em;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  border-bottom: 1px solid #e6e6e6;
}
.wysiwyg_col td {
  font-weight: 400;
  color: #636363;
}
.wysiwyg_col th {
  font-weight: 600;
  color: #000;
}
.wysiwyg_col {
  /* Alternating column backgrounds: odd columns white, even columns #fbfbfb */
}
.wysiwyg_col th:nth-child(odd),
.wysiwyg_col td:nth-child(odd) {
  background-color: #fff;
}
.wysiwyg_col th:nth-child(even),
.wysiwyg_col td:nth-child(even) {
  background-color: #fbfbfb;
}
.wysiwyg_col {
  /* "No Wrap" option: keep cell text on one line (the horizontal scroll handles overflow) */
}
.wysiwyg_col table.nowrap th,
.wysiwyg_col table.nowrap td {
  white-space: nowrap;
}
.wysiwyg_col {
  /* Sorted column: highlight its header (aria-sort is set by the sort JS) */
}
.wysiwyg_col table.sortable th[aria-sort] {
  background-color: #DCD0FF;
}
.wysiwyg_col table.sortable th {
  position: relative;
  padding-right: 32px;
  cursor: pointer;
  user-select: none;
}
.wysiwyg_col table.sortable th:hover {
  background-color: rgb(87.6470588235%, 83.4117647059%, 100%);
}
.wysiwyg_col table.sortable th::after {
  content: "";
  position: absolute;
  right: 14px;
  top: calc(11px + 0.7em);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: translateY(-50%);
  opacity: 0.3;
}
.wysiwyg_col table.sortable th:hover::after {
  opacity: 0.6;
}
.wysiwyg_col table.sortable th:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.wysiwyg_col table.sortable th[aria-sort=ascending]::after {
  border-top: 0;
  border-bottom: 5px solid currentColor;
  opacity: 1;
}
.wysiwyg_col table.sortable th[aria-sort=descending]::after {
  opacity: 1;
}
.wysiwyg_col {
  /* Content buttons — apply "btn btn-lavender" / "btn btn-white" to a link via the Formats
     dropdown. Reuse the global .btn base but override sizing/notch/colour for the content context
     (top-right notch only; min-width includes the padding via border-box). */
}
.wysiwyg_col .btn {
  box-sizing: border-box;
  min-width: 235px;
  padding: 20px 25px;
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.wysiwyg_col .btn-lavender {
  background-color: #DCD0FF;
  color: #112B19;
}
.wysiwyg_col .btn-lavender:hover, .wysiwyg_col .btn-lavender:focus-visible {
  background-color: #c9b8ff;
}
.wysiwyg_col .btn-white {
  position: relative;
  isolation: isolate;
  background-color: #DCD0FF;
  color: #112B19;
}
.wysiwyg_col .btn-white::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background-color: #fff;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: background-color 0.2s ease;
}
.wysiwyg_col .btn-white:hover, .wysiwyg_col .btn-white:focus-visible {
  background-color: #DCD0FF;
}
.wysiwyg_col .btn-white:hover::before, .wysiwyg_col .btn-white:focus-visible::before {
  background-color: #ececec;
}
.wysiwyg_col {
  /* Blockquote (max-width is set per layout below) */
}
.wysiwyg_col blockquote {
  margin-bottom: 1.25em;
  padding-left: 80px;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5;
  letter-spacing: -0.01em;
  background: url("/wp-content/themes/gd-mind/assets/img/blockquote.svg") no-repeat left top;
  background-size: 40px 26px;
}
.wysiwyg_col blockquote p {
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-bottom: 0.875em;
}
.wysiwyg_col {
  /* Quote source (also a "Quote Source" option in the Formats dropdown) */
}
.wysiwyg_col p.source {
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 1em;
  font-style: italic;
}
.wysiwyg_col {
  /* Mobile typography — scale down the larger styles and tighten heading spacing ≤800px */
}
@media (max-width: 800px) {
  .wysiwyg_col h2 {
    font-size: 2em;
    margin-bottom: 0.9em;
  }
  .wysiwyg_col h3 {
    font-size: 1.75em;
    margin-bottom: 0.85em;
  }
  .wysiwyg_col h4 {
    font-size: 1.5em;
  }
  .wysiwyg_col p.highlight {
    font-size: 1.25em;
  }
  .wysiwyg_col p.banner-special {
    font-size: 2em;
  }
  .wysiwyg_col blockquote {
    padding-left: 45px;
    background-size: 30px 19px;
  }
}

/* Blockquote max-width varies by layout so it never reaches the content's right edge */
.wysiwyg--default blockquote {
  max-width: 75%;
}
@media (max-width: 800px) {
  .wysiwyg--default blockquote {
    max-width: 85%;
  }
}

.wysiwyg--narrow blockquote {
  max-width: 85%;
}

.wysiwyg--2col blockquote {
  max-width: 92%;
}

/*
 * Site header
 *
 * Fixed, transparent overlay over the page's top banner/hero. Shrinks and gains a
 * background once the page is scrolled (the `is-stuck` class is toggled in global.js).
 *
 * Colour is driven by data-header-scheme on .site_header, which sets two custom props:
 *   --header-el        element colour (logo + links)
 *   --header-scroll-bg background colour once scrolled
 * Rule of thumb: light elements get a dark-green scrolled bg; dark elements get a lavender one.
 *
 * @since   GD_Mind v1.0
*/
.site_header {
  /* default scheme: no hero / blog index — dark-green elements on a lavender scrolled bg */
  --header-el: #112B19;
  --header-scroll-bg: #DCD0FF;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  color: var(--header-el);
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site_header[data-header-scheme=hero-light] {
  --header-el: #fff;
  --header-scroll-bg: #112B19;
}
.site_header[data-header-scheme=hero-dark] {
  --header-el: #112B19;
  --header-scroll-bg: #DCD0FF;
}
.site_header[data-header-scheme=post] {
  --header-el: #DCD0FF;
  --header-scroll-bg: #112B19;
}
.site_header.is-stuck {
  background: var(--header-scroll-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.site_header_inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: padding 0.3s ease;
}
.is-stuck .site_header_inner {
  padding: 14px 40px;
}
@media (max-width: 680px) {
  .site_header_inner {
    padding: 20px 24px;
  }
  .is-stuck .site_header_inner {
    padding: 14px 24px;
  }
}
@media (max-width: 480px) {
  .site_header_inner {
    padding: 12px 15px 20px 15px;
  }
}

/* Logo --------------------------------------------------------------------------------------------- */
.site_logo {
  display: inline-flex;
  color: var(--header-el);
}
.site_logo svg {
  display: block;
  width: 150px;
  height: auto;
  transition: width 0.3s ease;
}
.is-stuck .site_logo svg {
  width: 96px;
}
@media (max-width: 680px) {
  .site_logo svg {
    width: 112px;
  }
  .is-stuck .site_logo svg {
    width: 92px;
  }
}

/* Search / menu actions ---------------------------------------------------------------------------- */
.site_header_actions {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  transform: translateY(-20px); /* sit the links higher than the logo's vertical centre */
  transition: transform 0.3s ease;
}
.is-stuck .site_header_actions {
  transform: translateY(-5px);
}
@media (max-width: 680px) {
  .site_header_actions {
    transform: translateY(-10px);
    gap: 24px;
  }
}
@media (max-width: 480px) {
  .site_header_actions {
    transform: none; /* icon-only header — drop the upward nudge */
  }
}

.header_action {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--header-el);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* border spans the whole link (text + icon) so the search icon sits below it */
  border-top: 2px solid currentColor;
  padding-top: 16px;
  padding-left: 2.5rem; /* border overhangs to the left of the text */
  transition: padding-top 0.3s ease;
}
.header_action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.is-stuck .header_action {
  padding-top: 12px;
}
@media (max-width: 680px) {
  .header_action {
    padding-top: 10px;
  }
}
@media (max-width: 480px) {
  .header_action {
    /* icon-only: drop the border + padding */
    border-top: 0;
    padding-top: 0;
    padding-left: 0;
  }
}

.header_action_label {
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.16em;
  transition: font-size 0.3s ease;
}
.is-stuck .header_action_label {
  font-size: 0.875rem;
}
@media (max-width: 680px) {
  .header_action_label {
    font-size: 0.875rem;
  }
}
@media (max-width: 480px) {
  .header_action_label {
    /* hide the label on the icon-only header, but keep it for screen readers
       (the text is also on the button's title attribute) */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.header_action_icon {
  display: inline-flex;
  transform: translateY(-3px); /* optical alignment nudge */
  transition: transform 0.3s ease;
}
.header_action_icon svg {
  display: block;
  width: 22px;
  height: 22px;
  transition: width 0.3s ease, height 0.3s ease;
}
.is-stuck .header_action_icon svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  .is-stuck .header_action_icon svg {
    width: 28px;
    height: 28px;
  }
}
.is-stuck .header_action_icon {
  transform: translateY(-2px);
}
@media (max-width: 680px) {
  .header_action_icon {
    transform: translateY(-2px);
  }
}
@media (max-width: 480px) {
  .header_action_icon {
    transform: none;
  }
  .header_action_icon svg {
    width: 28px;
    height: 28px;
  }
}

/* The menu icon only appears on the icon-only mobile header (≤480px). */
.header_action--menu .header_action_icon {
  display: none;
}
@media (max-width: 480px) {
  .header_action--menu .header_action_icon {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site_header,
  .site_header_inner,
  .site_logo svg,
  .header_action_label,
  .header_action_icon svg {
    transition: none;
  }
}
/*
 * Slide-in main menu (off-canvas panel + scrim)
 *
 * Opened by the header "menu" button. `menu-open` on <body> drives the open state
 * (toggled in global.js). White panel, #2A2457 text.
 *
 * @since   GD_Mind v1.0
*/
.menu_scrim {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(17, 43, 25, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu_panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1101;
  width: min(480px, 100%);
  height: 100%;
  overflow-y: auto;
  background: #fff;
  color: #2A2457;
  transform: translateX(100%);
  transition: transform 0.35s ease;
}

body.menu-open {
  overflow: hidden; /* lock background scroll */
}
body.menu-open .menu_scrim {
  opacity: 1;
  visibility: visible;
}
body.menu-open .menu_panel {
  transform: translateX(0);
}

.menu_panel_inner {
  position: relative;
  padding: 80px 48px 48px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  .menu_panel_inner {
    padding: 72px 28px 40px;
  }
}

.menu_panel_close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  padding: 6px;
  border: 0;
  background: none;
  color: #2A2457;
  cursor: pointer;
}
.menu_panel_close svg {
  display: block;
  width: 24px;
  height: 24px;
}
.menu_panel_close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Navigation -------------------------------------------------------------------------------------- */
.menu_panel_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu_panel_group {
  margin-bottom: 36px;
}

.menu_panel_heading {
  display: block;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(42, 36, 87, 0.15);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.menu_panel_sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu_panel_link {
  color: #2A2457;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.menu_panel_link:hover, .menu_panel_link:focus-visible {
  text-decoration: underline;
}

/* Contact button + social -------------------------------------------------------------------------- */
.menu_panel_contact {
  align-self: flex-start;
  margin: 8px 0 36px;
}

.menu_panel_social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

.menu_panel_social_link {
  display: inline-flex;
  color: #2A2457;
  transition: opacity 0.2s ease;
}
.menu_panel_social_link svg {
  display: block;
  width: 32px;
  height: 32px;
}
.menu_panel_social_link:hover, .menu_panel_social_link:focus-visible {
  opacity: 0.65;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .menu_scrim,
  .menu_panel {
    transition: none;
  }
}
/*
 * Search overlay
 *
 * Full-page fade-in over everything, opened by any [data-search-open] trigger (the header
 * "search" button for now). Body class `search-open` drives the open state (global.js).
 * Generic / placeholder styling — no comp yet. Lavender sheet, dark-green text.
 *
 * @since   GD_Mind v1.0
*/
.search_overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: #DCD0FF;
  color: #112B19;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.search-open {
  overflow: hidden; /* lock background scroll */
}
body.search-open .search_overlay {
  opacity: 1;
  visibility: visible;
}

.search_overlay_inner {
  width: 100%;
  max-width: 760px;
  padding: 40px;
  text-align: center;
}

.search_overlay_close {
  position: fixed;
  top: 24px;
  right: 24px;
  display: inline-flex;
  padding: 6px;
  border: 0;
  background: none;
  color: #112B19;
  cursor: pointer;
}
.search_overlay_close svg {
  display: block;
  width: 28px;
  height: 28px;
}
.search_overlay_close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.search_overlay_heading {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
}

.search_overlay_intro {
  margin: 0 0 32px;
  font-size: 1.0625rem;
}

.search_overlay_form {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid #112B19;
}

.search_overlay_input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 4px;
  border: 0;
  background: none;
  color: #112B19;
  font-family: inherit;
  font-size: 1.25rem;
  line-height: 1.4;
}
.search_overlay_input::placeholder {
  color: rgba(17, 43, 25, 0.55);
}
.search_overlay_input:focus {
  outline: none;
}

.search_overlay_submit {
  flex: none;
  display: inline-flex;
  padding: 8px;
  border: 0;
  background: none;
  color: #112B19;
  cursor: pointer;
}
.search_overlay_submit svg {
  display: block;
  width: 24px;
  height: 24px;
}
.search_overlay_submit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .search_overlay {
    transition: none;
  }
}
/*
 * Page-title banner
 *
 * Sits at the top of non-hero views, under the fixed/transparent header (hence the large
 * top padding to clear it). Two colour variants matched to the header colour schemes:
 *   .page_title--default  lavender bg, dark-green text   (pages / blog index / archives)
 *   .page_title--post     dark-green bg, lavender text   (single posts) + meta row
 *
 * @since   GD_Mind v1.0
*/
.page_title {
  /* top padding clears the (un-shrunk) fixed header + adds the gap above the breadcrumb;
     extra space goes above the content only, not below the title */
  padding: 200px 0 72px;
}
@media (max-width: 980px) {
  .page_title {
    padding: 170px 0 56px;
  }
}
@media (max-width: 600px) {
  .page_title {
    padding: 130px 0 40px;
  }
}

.page_title--default {
  background: #DCD0FF;
  color: #112B19;
}

.page_title--post {
  background: #112B19;
  color: #DCD0FF;
}

/* Extra bottom room so overlapping header media (single posts / no-hero pages) clears the title.
   Only applied when media is actually present (see the `overlap` arg on the page-title part). */
.page_title--overlap {
  padding-bottom: 130px;
}
@media (max-width: 800px) {
  .page_title--overlap {
    padding-bottom: 85px;
  }
}

.page_title_inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 600px) {
  .page_title_inner {
    padding: 0 24px;
  }
}

/* Breadcrumb + meta row --------------------------------------------------------------------------- */
.page_title_top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  margin-bottom: 28px;
}

.breadcrumb_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.breadcrumb_item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb_item:not(:first-child)::before {
  content: "/";
  opacity: 0.6;
}

.breadcrumb_link {
  color: inherit;
  text-decoration: none;
}
.breadcrumb_link:hover, .breadcrumb_link:focus-visible {
  text-decoration: underline;
}

.breadcrumb_current {
  opacity: 0.75;
}

.page_title_meta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page_title_cat {
  color: inherit;
  text-decoration: none;
}
.page_title_cat:hover, .page_title_cat:focus-visible {
  text-decoration: underline;
}

.page_title_sep {
  opacity: 0.5;
}

/* Title ------------------------------------------------------------------------------------------- */
.page_title_heading {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
}

/* Single-post title: lighter weight, and constrained to the header media's width (its 2fr column
   of a 2fr/1fr grid with a 20px gap — same content container, so the widths line up). */
.page_title--post .page_title_heading {
  font-weight: 600;
  max-width: calc((100% - 20px) * 2 / 3);
}
@media (max-width: 800px) {
  .page_title--post .page_title_heading {
    max-width: none;
  }
}

/*
 * Page Hero
 *
 * Full-bleed hero above the page content (the fixed/transparent header overlays its top).
 * Types: image / slideshow / video. `--light` = light text on a dark tint; `--dark` = dark
 * text on a light tint. Content is bottom-aligned. Slideshow slowly zooms + crossfades (JS).
 *
 * @since   GD_Mind v1.0
*/
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}

/* All hero types fill the viewport height; min-height (not height) lets the hero grow if the
   content is ever taller, so it can't be clipped off the top. Media is object-fit: cover. */
.hero--image,
.hero--slideshow,
.hero--video {
  min-height: 100vh;
}

/* Text / tint per colour scheme --------------------------------------------------------------------- */
.hero--light {
  color: #fff;
}

.hero--dark {
  color: #112B19;
}

.hero--tinted::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero--tinted.hero--light::after {
  background: rgba(0, 0, 0, 0.5); /* dark tint behind light text — colour/opacity TBC */
}

.hero--tinted.hero--dark::after {
  background: rgba(255, 255, 255, 0.5); /* light tint behind dark text — colour/opacity TBC */
}

/* Media layer --------------------------------------------------------------------------------------- */
.hero_media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero_media img,
.hero_picture,
.hero_video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slideshow */
.hero_slides {
  position: absolute;
  inset: 0;
}

.hero_slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* crossfade duration (opacity) + zoom duration/scale (transform) are set inline by JS
     from the Theme Settings zoom/transition times. */
}
.hero_slide.is-active {
  opacity: 1;
}
.hero_slide img {
  transform: scale(1);
}

/* Pause / play control (slideshow only) */
.hero_pause {
  /* wide screens: bottom-right of the content block, in line with the CTAs */
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.hero_pause:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.hero_pause {
  /* ≤680px: drop into the flow below the CTAs (bottom-left); content shifts up to make room */
}
@media (max-width: 680px) {
  .hero_pause {
    position: static;
    margin-top: 17px;
  }
}

.hero_pause_icon {
  display: inline-flex;
}
.hero_pause_icon svg {
  display: block;
  width: 40px;
  height: 40px;
}
@media (max-width: 680px) {
  .hero_pause_icon svg {
    width: 32px;
    height: 32px;
  }
}

.hero_pause_icon--play {
  display: none;
}

.hero_pause.is-paused .hero_pause_icon--pause {
  display: none;
}
.hero_pause.is-paused .hero_pause_icon--play {
  display: inline-flex;
}

/* Video: swap desktop / mobile sources when a mobile video is provided */
.hero_video--mobile {
  display: none;
}

@media (max-width: 680px) {
  .hero_video--desktop {
    display: none;
  }
  .hero_video--mobile {
    display: block;
  }
}
/* Content ------------------------------------------------------------------------------------------- */
.hero_inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px 80px;
}
@media (max-width: 600px) {
  .hero_inner {
    padding: 0 24px 10px;
  }
}

/* When the sticky CTA is present it becomes a fixed bottom bar ≤980px; ≤600px give the hero extra
   bottom padding so its pause/play control clears the bar. */
@media (max-width: 600px) {
  .has_sticky .hero_inner {
    padding: 0 24px 60px;
  }
}

.hero_content {
  position: relative;
  max-width: 45rem;
}

.hero_title {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
}
@media (max-width: 600px) {
  .hero_title {
    font-size: 2rem;
  }
}

.hero_intro {
  margin: 20px 0 0;
  font-size: 1.125rem;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .hero_intro {
    font-size: 1rem;
  }
}

.hero_ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

/*
 * Featured Content Block (C-FCB) — page-builder "Feature Block"
 *
 * Full-viewport-width background image / crossfading slideshow (~viewport height). A dark-green
 * content card (title, text, button, pagination) starts at the slide's vertical midpoint on the
 * left and overhangs the slide's bottom edge. Decorative triangle pattern + purple glow sit over
 * the image on the right; pause/play sits just right of the card near the slide's bottom.
 *
 * ≤800px it restructures: image on top, a full-width green panel below with an arch top overlapping
 * the image, centred content + pagination (pattern/glow + pause hidden).
 *
 * NOTE: the triangle pattern and mobile arch are CSS approximations of the comp — iterate as needed.
 *
 * @since   GD_Mind v1.0
*/
.fcb {
  position: relative;
  padding-bottom: 60px;
  overflow: hidden;
}
@media (max-width: 800px) {
  .fcb {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
}

/* Media (slides) ---------------------------------------------------------------------------------- */
.fcb_media {
  position: relative;
  height: 84vh;
  min-height: 600px;
  overflow: hidden;
}
@media (max-width: 800px) {
  .fcb_media {
    height: 75vh;
    min-height: 0;
    max-height: 540px;
  }
}

.fcb_slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(0);
  z-index: 1;
}

/* incoming: fades in (behind), no slide. --fcb-trans is set from the CMS transition time by JS. */
.fcb_slide.is-active {
  opacity: 1;
  z-index: 2;
  transition: opacity var(--fcb-trans, 0.8s) ease;
}

/* outgoing: rides on top, slides right over the full transition while fading out in ~half that
   time (so the cross-fade completes before it reaches halfway off-screen). */
.fcb_slide.is-leaving {
  opacity: 0;
  transform: translateX(100%);
  z-index: 3;
  transition: transform var(--fcb-trans, 0.8s) ease-in, opacity calc(var(--fcb-trans, 0.8s) * 0.5) ease;
  /* mobile: plain cross-fade (the slide-right doesn't work on narrow screens) */
}
@media (max-width: 800px) {
  .fcb_slide.is-leaving {
    transform: none;
    transition: opacity var(--fcb-trans, 0.8s) ease;
  }
}

.fcb:not(.fcb--slideshow) .fcb_slide {
  opacity: 1;
}

.fcb_picture,
.fcb_picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Per-slide vertical crop position (always centred horizontally; default center = no override) */
.fcb_slide--top .fcb_picture img {
  object-position: center top;
}

.fcb_slide--bottom .fcb_picture img {
  object-position: center bottom;
}

/* Decorative overlays (desktop only) -------------------------------------------------------------- */
.fcb_pattern {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 60px;
  z-index: 2;
  width: max(420px, 35%);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M5 5h9L5 14z' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E");
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%);
  mask-image: linear-gradient(to right, transparent, #000 55%);
}
@media (max-width: 800px) {
  .fcb_pattern {
    display: none;
  }
}

.fcb_glow {
  position: absolute;
  right: 0;
  bottom: 60px;
  z-index: 2;
  width: 45%;
  height: 55%;
  pointer-events: none;
  background: radial-gradient(ellipse at bottom right, rgba(113, 105, 178, 0.55), rgba(113, 105, 178, 0) 70%);
}
@media (max-width: 800px) {
  .fcb_glow {
    display: none;
  }
}

/* Content card ------------------------------------------------------------------------------------ */
.fcb_inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 800px) {
  .fcb_inner {
    position: static;
    max-width: none;
    padding: 0;
  }
}

.fcb_card {
  box-sizing: border-box;
  position: absolute;
  left: 40px;
  top: calc(84vh / 2);
  bottom: 0;
  width: 500px;
  display: flex;
  flex-direction: column;
  padding: 52px 56px 20px;
  background: #112B19;
  color: #fff;
  /* chamfered top-right corner */
  clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%);
}
@media (max-width: 800px) {
  .fcb_card {
    position: static;
    width: calc(100% - 30px);
    max-width: 400px;
    margin: -100px auto 0;
    padding: 88px 28px 40px;
    clip-path: none;
    /* arch (dome) top edge — its base sits on the image's bottom edge */
    border-radius: 50% 50% 0 0/100px 100px 0 0;
  }
}

/* Centred content region — fills the space above the pagination; keeps title/text/button
   horizontally + vertically centred without overlapping the bottom-pinned pagination. */
.fcb_card_content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.fcb_title {
  margin: 0;
  color: #DCD0FF;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
}
@media (max-width: 800px) {
  .fcb_title {
    font-size: 1.75rem;
  }
}

.fcb_text {
  margin: 20px 0 0;
  color: #DCD0FF;
  font-size: 1.0625rem;
  line-height: 1.6;
}
@media (max-width: 800px) {
  .fcb_text {
    font-size: 1rem;
  }
}

.fcb_button {
  margin-top: 44px;
}
@media (max-width: 800px) {
  .fcb_button {
    margin-top: 32px;
  }
}

/* Slideshow controls ------------------------------------------------------------------------------ */
.fcb_pause {
  position: absolute;
  left: calc(40px + 500px + 25px);
  bottom: calc(60px + 30px);
  z-index: 4;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.fcb_pause:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.fcb_pause {
  /* mobile: move to the top-right of the image (decoupled from the card) */
}
@media (max-width: 800px) {
  .fcb_pause {
    top: 10px;
    right: 15px;
    left: auto;
    bottom: auto;
  }
}

.fcb_pause_icon {
  display: inline-flex;
}
.fcb_pause_icon svg {
  display: block;
  width: 44px;
  height: 44px;
}

.fcb_pause_icon--play {
  display: none;
}

.fcb_pause.is-paused .fcb_pause_icon--pause {
  display: none;
}
.fcb_pause.is-paused .fcb_pause_icon--play {
  display: inline-flex;
}

/* Pagination — inside the card, centred, 20px above the card's bottom (via the card's bottom
   padding). It's the last flex child, so the centred content region above it fills the rest. */
.fcb_pagination {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
@media (max-width: 800px) {
  .fcb_pagination {
    margin-top: 28px;
  }
}

.fcb_dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: rgba(220, 208, 255, 0.4);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
.fcb_dot.is-active {
  width: 34px;
  background: #DCD0FF;
}
.fcb_dot:focus-visible {
  outline: 2px solid #DCD0FF;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fcb_slide {
    transition: none;
  }
  .fcb_dot {
    transition: none;
  }
}
/*
 * Logo carousel (page component; data from the logo-carousel CPT)
 *
 * Title + intro (content width, side by side on desktop → stacked on mobile), a full-viewport-width
 * continuously-scrolling track (logos duplicated for a seamless loop; JS sets the animation
 * duration from the px/s speed), then a black pause/play button. Reduced-motion → paused by default.
 *
 * @since   GD_Mind v1.0
*/
.logo_carousel_content {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 600px) {
  .logo_carousel_content {
    padding: 0 24px;
  }
}

/* Title + intro ------------------------------------------------------------------------------------ */
.logo_carousel_head {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 90px;
}
@media (max-width: 680px) {
  .logo_carousel_head {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 70px;
  }
}

.logo_carousel_title {
  flex: 0 0 30%;
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
}
@media (max-width: 680px) {
  .logo_carousel_title {
    flex: 0 0 auto;
  }
}

.logo_carousel_intro {
  flex: 1 1 auto;
  line-height: 1.5;
}
.logo_carousel_intro > :first-child {
  margin-top: 0;
}
.logo_carousel_intro > :last-child {
  margin-bottom: 0;
}

/* Full-bleed scrolling track ----------------------------------------------------------------------- */
.logo_carousel_viewport {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
}

.logo_carousel_track {
  display: flex;
  width: max-content;
  /* animation-duration is set inline by JS from (one group's width ÷ px-per-second speed) */
  animation: logo-carousel-scroll linear infinite;
}

.logo_carousel.is-paused .logo_carousel_track {
  animation-play-state: paused;
}

.logo_carousel_group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo_carousel_item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 70px; /* 70 + 70 = 140px between logos */
}
@media (max-width: 680px) {
  .logo_carousel_item {
    padding: 0 60px; /* 120px between logos */
  }
}
@media (max-width: 480px) {
  .logo_carousel_item {
    padding: 0 40px; /* 80px between logos */
  }
}

.logo_carousel_link {
  display: inline-flex;
}

.logo_carousel_logo_img {
  display: block;
  width: auto;
  height: 70px;
  max-width: none;
}
@media (max-width: 680px) {
  .logo_carousel_logo_img {
    height: 60px;
  }
}
@media (max-width: 480px) {
  .logo_carousel_logo_img {
    height: 50px;
  }
}

@keyframes logo-carousel-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* Pause / play (black) ----------------------------------------------------------------------------- */
.logo_carousel_controls {
  margin-top: 70px;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px; /* pause button 20px inside the content column's right edge */
}
@media (max-width: 680px) {
  .logo_carousel_controls {
    margin-top: 50px;
  }
}

.logo_carousel_pause {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  cursor: pointer;
}
.logo_carousel_pause:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

.logo_carousel_pause_icon {
  display: inline-flex;
}
.logo_carousel_pause_icon svg {
  display: block;
  width: 40px;
  height: 40px;
}

.logo_carousel_pause_icon--play {
  display: none;
}

.logo_carousel.is-paused .logo_carousel_pause_icon--pause {
  display: none;
}
.logo_carousel.is-paused .logo_carousel_pause_icon--play {
  display: inline-flex;
}

/*
 * Item Card Block (News posts)
 *
 * Heading (+ "view all") then a 2-col grid: a large feature card (image with overlaid date/title)
 * beside a column of two smaller cards (image over date/title). Content width.
 * (Desktop layout per the comp; a basic single-column stack kicks in ≤680px — responsive to be
 * refined later.)
 *
 * @since   GD_Mind v1.0
*/
.item_cards {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 600px) {
  .item_cards {
    padding: 0 24px;
  }
}

/* Heading row ------------------------------------------------------------------------------------- */
.item_cards_head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 680px) {
  .item_cards_head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.item_cards_title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: #112B19;
}

.item_cards_viewall {
  color: #7169B2;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-left: 2px solid #E1006A; /* the divider between the heading and the link */
  padding-left: 20px;
}
.item_cards_viewall:hover, .item_cards_viewall:focus-visible {
  text-decoration: underline;
}
@media (max-width: 680px) {
  .item_cards_viewall {
    border-left: 0;
    padding-left: 0;
  }
}

/* Grid -------------------------------------------------------------------------------------------- */
.item_cards_grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 680px) {
  .item_cards_grid {
    grid-template-columns: 1fr;
  }
}

.item_cards_col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}

/* Cards ------------------------------------------------------------------------------------------- */
.item_card {
  display: block;
  overflow: hidden;
  background: #f2f2f2; /* fallback if a post has no featured image */
  text-decoration: none;
}

.item_card_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.item_card:hover .item_card_img,
.item_card:focus-visible .item_card_img {
  transform: scale(1.04);
}

/* Feature card */
.item_card--feature {
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  position: relative;
  min-height: 420px;
  color: #fff;
  background: #112B19;
}
@media (max-width: 680px) {
  .item_card--feature {
    min-height: 320px;
  }
}
.item_card--feature .item_card_media {
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  position: absolute;
  inset: 0;
}
.item_card--feature::after {
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 55%);
}
.item_card--feature .item_card_overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: 32px;
}
.item_card--feature .item_card_headline {
  margin: 8px 0 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
}
.item_card--feature .item_card_date {
  font-size: 0.8125rem;
}

/* Small cards */
.item_card--small {
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #112B19;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}
.item_card--small .item_card_thumb {
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f2f2f2;
}
.item_card--small .item_card_thumb .item_card_img {
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
}
.item_card--small .item_card_body {
  border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  padding: 20px 24px 24px;
}
.item_card--small .item_card_date {
  font-size: 0.8125rem;
  color: rgba(17, 43, 25, 0.7);
}
.item_card--small .item_card_headline {
  margin: 8px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .item_card_img {
    transition: none;
  }
  .item_card:hover .item_card_img,
  .item_card:focus-visible .item_card_img {
    transform: none;
  }
}
/*
 * CTA Block page component
 *
 * A grid of square CTAs, three per row (extra blocks wrap onto further rows). Each block links to a
 * page/post or URL and shows a title + short line of text.
 *
 * BASE STATE ONLY for now: #F7F8FA panel, #2A2457 text. The hover state (dark-green fill, white
 * text, top-right notch, bottom-right arrow, faint watermark) is a later pass once the SVGs land.
 *
 * @since   GD_Mind v1.0
*/
.cta_block {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 600px) {
  .cta_block {
    padding: 0 24px;
  }
}

.cta_block_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 980px) {
  .cta_block_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .cta_block_grid {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
    gap: 24px;
  }
}

.cta_block_item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1/1;
  padding: 48px;
  background-color: #f7f8fa;
  color: #2A2457;
  text-decoration: none;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%);
  transition: background-color 0.8s ease, color 0.8s ease, clip-path 0.8s ease;
}
@media (max-width: 1200px) {
  .cta_block_item {
    padding: 24px;
  }
}
@media (max-width: 980px) {
  .cta_block_item {
    padding: 48px;
  }
}
@media (max-width: 480px) {
  .cta_block_item {
    padding: 24px;
  }
}
.cta_block_item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--cta-watermark, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.cta_block_item::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  width: 20px;
  height: 20px;
  background: url("/wp-content/themes/gd-mind/assets/img/cta-block-arrow.svg") no-repeat center center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.cta_block_item:hover, .cta_block_item:focus-visible {
  background-color: #112B19;
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
.cta_block_item:hover::before, .cta_block_item:focus-visible::before {
  opacity: var(--cta-watermark-opacity, 1);
}
.cta_block_item:hover::after, .cta_block_item:focus-visible::after {
  opacity: 1;
}
.cta_block_item:hover .cta_block_item_text, .cta_block_item:focus-visible .cta_block_item_text {
  color: rgba(255, 255, 255, 0.85);
}

.cta_block_item_body {
  position: relative;
  z-index: 1;
}

.cta_block_item_title {
  margin: 0 0 16px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: inherit;
}

.cta_block_item_text {
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(42, 36, 87, 0.8);
  transition: color 0.8s ease;
}

/*
 * Link list (page component; data from the link-list CPT)
 *
 * Optional title + intro (title left / intro right, like the logo carousel head), then a list of
 * rows. "With images" rows: logo/image left, text aligned with the intro column. "Just text" rows:
 * text from the left edge. Linked rows hover (light-grey background, text nudges right, an up-right
 * arrow fades in); "No link" rows have no hover.
 *
 * @since   GD_Mind v1.0
*/
.link_list {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 600px) {
  .link_list {
    padding: 0 24px;
  }
}

/* Title + intro ----------------------------------------------------------------------------------- */
.link_list_head {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 72px;
}
@media (max-width: 800px) {
  .link_list_head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }
}

.link_list_title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: #112B19;
}

.link_list_intro {
  line-height: 1.5;
}
.link_list_intro > :first-child {
  margin-top: 0;
}
.link_list_intro > :last-child {
  margin-bottom: 0;
}

/* Rows -------------------------------------------------------------------------------------------- */
.link_list_row {
  display: grid;
  align-items: center;
  gap: 0 40px;
  /* right padding insets the arrow from the line end and keeps the shifted text clear of it */
  padding: 26px 25px 26px 0;
  border-bottom: 1px solid rgba(42, 36, 87, 0.15);
  color: #112B19;
  text-decoration: none;
}
@media (max-width: 800px) {
  .link_list_row {
    padding: 22px 25px 22px 0;
  }
}
.link_list_row {
  /* ≤680px: no arrow, so reclaim the right inset */
}
@media (max-width: 680px) {
  .link_list_row {
    padding: 22px 0;
  }
}

/* image lists: media | text | arrow ; text lists: text | arrow */
.link_list--image .link_list_row {
  grid-template-columns: 30% 1fr auto;
  /* ≤800px: image stacks above the text; text + arrow share the row below */
}
@media (max-width: 800px) {
  .link_list--image .link_list_row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "media media" "text  arrow";
    align-items: end;
  }
  .link_list--image .link_list_row .link_list_row_media {
    grid-area: media;
    margin-bottom: 16px;
  }
  .link_list--image .link_list_row .link_list_row_text {
    grid-area: text;
  }
  .link_list--image .link_list_row .link_list_row_arrow {
    grid-area: arrow;
  }
}
.link_list--image .link_list_row {
  /* ≤680px: arrow removed — image over full-width text */
}
@media (max-width: 680px) {
  .link_list--image .link_list_row {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "text";
    align-items: start;
  }
}

.link_list--text .link_list_row {
  grid-template-columns: 1fr auto;
  /* ≤680px: arrow removed — text spans the full width */
}
@media (max-width: 680px) {
  .link_list--text .link_list_row {
    grid-template-columns: 1fr;
  }
}

.link_list_row_media {
  display: flex;
  align-items: center;
  max-width: 300px;
}

.link_list_row_img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 48px;
}

.link_list_row_text {
  font-size: 1.125rem;
  line-height: 1.35;
  transition: transform 0.25s ease;
}
@media (max-width: 680px) {
  .link_list_row_text {
    font-size: 1rem;
  }
}

.link_list_row_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2A2457;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.link_list_row_arrow svg {
  display: block;
  width: 48px;
  height: 48px;
}
@media (max-width: 680px) {
  .link_list_row_arrow {
    display: none;
  }
}

/* Linked rows: hover / focus state */
.link_list_row--link {
  cursor: pointer;
}
.link_list_row--link:hover, .link_list_row--link:focus-visible {
  background: #EFF0F4;
}
.link_list_row--link:hover .link_list_row_text, .link_list_row--link:focus-visible .link_list_row_text {
  transform: translateX(16px);
}
.link_list_row--link:hover .link_list_row_arrow, .link_list_row--link:focus-visible .link_list_row_arrow {
  opacity: 1;
  transform: translateX(0);
}
.link_list_row--link:focus-visible {
  outline: 2px solid #2A2457;
  outline-offset: -2px;
}
.link_list_row--link {
  /* ≤680px: keep only the background change — no arrow, no text shift */
}
@media (max-width: 680px) {
  .link_list_row--link:hover .link_list_row_text, .link_list_row--link:focus-visible .link_list_row_text {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .link_list_row_text,
  .link_list_row_arrow {
    transition: none;
  }
  .link_list_row--link:hover .link_list_row_text,
  .link_list_row--link:focus-visible .link_list_row_text {
    transform: none;
  }
}
/*
 * News listing (blog index + category/network archives)
 *
 * Featured 3 (reuses .item_cards_grid styling) → filters → post rows → Load More.
 * Desktop: featured grid shown, first 3 rows hidden. ≤680px: grid hidden, all posts as rows,
 * filters sit above the list. (Row internals stack ≤680px.)
 *
 * @since   GD_Mind v1.0
*/
.news_listing {
  max-width: 1300px;
  margin: 64px auto 0;
  padding: 0 40px;
}
@media (max-width: 800px) {
  .news_listing {
    margin-top: 40px;
    padding: 0 24px;
  }
}

/* Featured grid (desktop only; hidden ≤800 where the top 3 show as rows instead) */
.news_featured {
  margin-bottom: 48px;
}
@media (max-width: 800px) {
  .news_featured {
    display: none;
  }
}

/* Filters ----------------------------------------------------------------------------------------- */
.news_filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(42, 36, 87, 0.15);
}

.news_filter {
  position: relative;
}

.news_filter_select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 200px;
  padding: 12px 44px 12px 16px;
  border: 1px solid rgba(42, 36, 87, 0.3);
  border-radius: 0;
  background: #fff;
  color: #2A2457;
  font-family: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}

.news_filter::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 42%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #2A2457;
  border-bottom: 2px solid #2A2457;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

/* Rows -------------------------------------------------------------------------------------------- */
.news_rows {
  display: flex;
  flex-direction: column;
}

.news_row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 80px;
  align-items: stretch;
  padding: 32px 0;
  border-bottom: 1px solid rgba(42, 36, 87, 0.12);
}
.news_row .news_row_body {
  position: relative;
  padding-bottom: 40px;
}
@media (max-width: 800px) {
  .news_row .news_row_body {
    padding-bottom: 0;
  }
}
@media (max-width: 800px) {
  .news_row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* In the news listing the first 3 posts appear in the featured grid, so their rows are hidden on
   desktop. Scoped to .news_rows so other reusers of .news_row (e.g. search results) show all rows. */
.news_rows > .news_row:nth-child(-n+3) {
  display: none;
}
@media (max-width: 800px) {
  .news_rows > .news_row:nth-child(-n+3) {
    display: grid;
  }
}

/* Featured grid turned off (CMS toggle): there's no grid, so every row must show at all widths —
   don't hide the first 3. Higher specificity than the rule above, so it wins. */
.news_listing--no-featured .news_rows > .news_row:nth-child(-n+3) {
  display: grid;
}

.news_row_media {
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  display: block;
  overflow: hidden;
  align-self: start;
  max-width: 300px;
  background: #f2f2f2;
}
@media (max-width: 800px) {
  .news_row_media {
    max-width: 100%;
  }
}

.news_row_img {
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  display: block;
  width: 100%;
  height: auto;
  max-width: 300px;
}
@media (max-width: 800px) {
  .news_row_img {
    max-width: 100%;
  }
}

.news_row_date {
  font-size: 0.8125rem;
  color: rgba(17, 43, 25, 0.7);
}

.news_row_title {
  margin: 8px 0 24px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
}
.news_row_title a {
  color: #2A2457;
  text-decoration: none;
}
.news_row_title a:hover, .news_row_title a:focus-visible {
  text-decoration: underline;
}

.news_row_excerpt {
  margin: 0 0 16px;
  line-height: 1.55;
  color: rgba(17, 43, 25, 0.85);
}

.news_row_more {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #2A2457;
  font-weight: 400;
  text-decoration: none;
}
@media (max-width: 800px) {
  .news_row_more {
    position: relative;
    bottom: unset;
    left: unset;
  }
}
.news_row_more:hover, .news_row_more:focus-visible {
  text-decoration: underline;
}

/* Load more --------------------------------------------------------------------------------------- */
.news_loadmore_wrap {
  margin: 48px 0;
  text-align: center;
}

.news_loadmore[hidden] {
  display: none;
}

.news_loadmore.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/*
 * Single post template
 *
 * Header media (featured image / uploaded video / YouTube embed) with an optional caption beside it,
 * overlapping the bottom of the dark-green page-title banner. Followed by the page-builder content
 * and (optionally) a "Related Articles" block that reuses the Item Card Block markup.
 *
 * (Desktop first — mobile handled in a later pass.)
 *
 * @since   GD_Mind v1.0
*/
/* Header media ------------------------------------------------------------------------------------ */
.post_header_media {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: -90px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 600px) {
  .post_header_media {
    padding: 0 24px;
  }
}
.post_header_media {
  /* ≤800px: smaller overlap, stacked */
}
@media (max-width: 800px) {
  .post_header_media {
    margin-top: -45px;
    grid-template-columns: 1fr;
  }
}

.post_media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 5px;
  background: #112B19;
}

.post_media_el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post_media_embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.post_media_caption {
  align-self: start;
  /* the media overlaps the banner by $post-media-overlap; push the caption down so it starts
     35px below the green banner's bottom edge */
  margin-top: calc(90px + 35px);
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(17, 43, 25, 0.7);
}
@media (max-width: 800px) {
  .post_media_caption {
    margin-top: 0;
  }
}

/* Video-file play button */
.post_media_play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.post_media_play svg {
  display: block;
  width: 72px;
  height: 72px;
}
.post_media_play:hover, .post_media_play:focus-visible {
  opacity: 0.85;
}
.post_media_play:focus-visible {
  outline: 2px solid #DCD0FF;
  outline-offset: 4px;
}
.post_media_play.is-hidden {
  display: none;
}

/* Related Articles -------------------------------------------------------------------------------- */
/* Reuses the .item_cards* styling; just the surrounding spacing here. */
.related_posts {
  margin-bottom: 85px;
}

/*
 * Search results (SearchWP)
 *
 * Refine form + two lists (Posts / Pages) side-by-side on desktop, stacked ≤800px. Each list has a
 * count and its own Load More. Rows reuse the .news_row card (with a smaller thumbnail here, since
 * each list sits in a narrower column).
 *
 * @since   GD_Mind v1.0
*/
.search_results {
  max-width: 1300px;
  margin: 64px auto 90px;
  padding: 0 40px;
}
@media (max-width: 600px) {
  .search_results {
    margin: 40px auto 64px;
    padding: 0 24px;
  }
}

/* Refine form ------------------------------------------------------------------------------------- */
.search_results_form {
  display: flex;
  gap: 12px;
  max-width: 640px;
  margin-bottom: 56px;
}
.search_results_form input[type=search] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid rgba(42, 36, 87, 0.3);
  background: #fff;
  color: #03163D;
  font: inherit;
}
.search_results_form .btn {
  flex: 0 0 auto;
}

/* Two lists --------------------------------------------------------------------------------------- */
.search_results_cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 980px) {
  .search_results_cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.search_col_head {
  margin: 0 0 8px;
  padding-bottom: 16px;
  border-bottom: 2px solid #DCD0FF;
  font-size: 1.5rem;
  font-weight: 700;
  color: #112B19;
}

.search_col_count {
  font-weight: 400;
  color: rgba(17, 43, 25, 0.6);
}

.search_col_empty {
  margin: 16px 0 0;
  color: rgba(17, 43, 25, 0.7);
}

/* Rows reuse .news_row, but rendered as a lighter, compact card: small thumbnail, top-aligned,
   read-more inline (not pinned to the bottom), tighter spacing. */
.search_col_rows .news_row {
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 0;
}

.search_col_rows .news_row_body {
  padding-bottom: 0;
}

.search_col_rows .news_row_more {
  position: static;
}

.search_col_rows .news_row_title {
  margin: 2px 0 6px;
  font-size: 1.0625rem;
}

.search_col_rows .news_row_excerpt {
  margin-bottom: 8px;
}

/* Pages don't have a meaningful publish date in this context — hide it for the Pages column */
.search_col--page .news_row_date {
  display: none;
}

.search_loadmore_wrap {
  margin-top: 32px;
}

/* JS sets [hidden] when there are no more results; override .btn's display so it actually hides */
.search_loadmore[hidden] {
  display: none;
}

.search_no_results {
  font-size: 1.125rem;
  line-height: 1.5;
  color: #112B19;
}

/*
 * Sitemap ([rf_sitemap] shortcode)
 *
 * Simple linked title lists (Pages / Posts / Categories / Networks). The shortcode normally lives
 * inside a WYSIWYG block, so every rule is scoped under .sitemap to out-specify the WYSIWYG
 * typography (.wysiwyg_col h2/ul/li/a). Lists flow into two columns and stack ≤980px.
 *
 * @since   GD_Mind v1.0
*/
.sitemap {
  column-count: 2;
  column-gap: 64px;
}
@media (max-width: 980px) {
  .sitemap {
    column-count: 1;
  }
}
.sitemap {
  /* Each list stays whole within a column; the margin is the gap between stacked lists. */
}
.sitemap .sitemap_col {
  break-inside: avoid;
  margin-bottom: 48px;
}
.sitemap .sitemap_col_title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #DCD0FF;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #112B19;
}
.sitemap .sitemap_list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
}
.sitemap .sitemap_item {
  margin: 0 0 10px;
  line-height: 1.4;
}
.sitemap .sitemap_item a {
  color: #03163D;
  font-weight: 400;
  text-decoration: none;
}
.sitemap .sitemap_item a:hover, .sitemap .sitemap_item a:focus-visible {
  color: #7169B2;
  text-decoration: underline;
}

/*
 * 404 (Page Not Found)
 *
 * Lavender banner (auto-height: breadcrumb + title, with 70px below the title — so the title always
 * sits 70px above the band's bottom at any width) transitioning to a white body (message + button).
 * The 404 illustration overlaps on the right, spanning both zones. Stacks ≤800px (illustration below).
 *
 * @since   GD_Mind v1.0
*/
.error404 {
  position: relative;
  background: #fff;
}

.error404_inner {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 600px) {
  .error404_inner {
    padding: 0 24px;
  }
}

/* Banner (lavender) — auto height; top padding clears the fixed header, bottom padding is the
   70px space below the title. */
.error404_banner {
  background: #DCD0FF;
  color: #112B19;
}

.error404_banner .error404_inner {
  padding-top: 280px;
  padding-bottom: 70px;
}
@media (max-width: 980px) {
  .error404_banner .error404_inner {
    padding-top: 200px;
  }
}
@media (max-width: 800px) {
  .error404_banner .error404_inner {
    padding-top: 150px;
  }
}
@media (max-width: 600px) {
  .error404_banner .error404_inner {
    padding-top: 130px;
  }
}

.error404_breadcrumb {
  margin-bottom: 40px;
}

.error404_title {
  margin: 0;
  max-width: 46%;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: #112B19;
}
@media (max-width: 800px) {
  .error404_title {
    max-width: none;
  }
}

/* Body (white) — message + button, with its own top padding (never jammed against the banner). */
.error404_body {
  min-height: 320px;
}
@media (max-width: 800px) {
  .error404_body {
    min-height: 0;
  }
}

.error404_body .error404_inner {
  padding-top: 56px;
  padding-bottom: 90px;
}
@media (max-width: 800px) {
  .error404_body .error404_inner {
    padding-bottom: 48px;
  }
}

.error404_content {
  max-width: 46%;
  color: #112B19;
}
@media (max-width: 800px) {
  .error404_content {
    max-width: none;
  }
}

.error404_message {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.error404_button {
  margin-top: 32px;
}

/* Illustration — overlaps on the right (spanning banner → body); stacks below ≤800px. */
.error404_media {
  position: absolute;
  top: 140px;
  right: max(40px, (100% - 1300px) / 2 + 40px);
  width: min(52%, 700px);
  pointer-events: none;
}
.error404_media img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 980px) {
  .error404_media {
    top: 100px;
  }
}
@media (max-width: 800px) {
  .error404_media {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    max-width: 480px;
    margin: 8px auto 0;
    pointer-events: auto;
  }
}

/*
 * Site footer
 *
 * Two rows, each two columns (flex):
 *   Row 1: logo  |  contact details + social icons   (space-between)
 *   Row 2: gov graphic  |  footer menu + copyright    (flex-start, gap)
 * Columns wrap / stack on smaller screens.
 *
 * @since   GD_Mind v1.0
*/
.site_footer {
  background-color: #112B19;
  color: #DCD0FF;
  padding: 64px 0;
}
@media (max-width: 600px) {
  .site_footer {
    padding: 48px 0;
  }
}
.site_footer a {
  color: #DCD0FF;
  text-decoration: none;
}
.site_footer a:hover, .site_footer a:focus-visible {
  text-decoration: underline;
}

.site_footer_inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
@media (max-width: 600px) {
  .site_footer_inner {
    padding: 0 24px;
    gap: 40px;
  }
}

/* Rows ------------------------------------------------------------------------------------------- */
.footer_row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.footer_row--top {
  justify-content: space-between;
  align-items: flex-start;
}

.footer_row--bottom {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px 80px;
}

/* Logo ------------------------------------------------------------------------------------------- */
.footer_logo {
  display: inline-block;
  color: #DCD0FF;
}
.footer_logo svg {
  display: block;
  width: 156px;
  height: auto;
}

/* Contact + social column ------------------------------------------------------------------------ */
.footer_contact_col {
  flex: 0 1 auto; /* shrink to content — don't fill the row */
  display: flex;
  flex-direction: column; /* contact block on top, social icons below */
  gap: 28px; /* default cross-axis (stretch) left-aligns icons with the contact text */
}

.footer_contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer_contact_item {
  display: flex;
  gap: 24px;
  align-items: baseline;
}

.footer_contact_label {
  min-width: 3.5em;
}

/* Social icons */
.footer_social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 27px;
  align-items: center;
}

.footer_social_link {
  display: inline-flex;
  color: #DCD0FF;
  transition: color 0.2s ease;
}
.footer_social_link svg {
  display: block;
  width: 32px;
  height: 32px;
}
.footer_social_link:hover, .footer_social_link:focus-visible {
  color: #fff; /* brighten to white (icons use currentColor) */
  text-decoration: none;
}

/* Government graphic ----------------------------------------------------------------------------- */
.footer_gov_col {
  flex: 0 1 auto;
}

.footer_gov_image {
  display: block;
  width: auto;
  max-width: 340px;
  height: auto;
}
@media (max-width: 420px) {
  .footer_gov_image {
    max-width: 100%; /* avoid overflow on very narrow screens (down to 360px) */
  }
}

/* Menu + copyright column ------------------------------------------------------------------------ */
.footer_legal_col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 10px; /* nudge down to visually align with the crest, which has internal top whitespace */
}

.footer_menu_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: 0.875em;
}
@media (max-width: 600px) {
  .footer_menu_list {
    flex-direction: column;
  }
}

.footer_copyright {
  margin: 0;
  font-size: 0.875em;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .footer_copyright {
    padding-top: 16px;
    border-top: 1px solid #DCD0FF;
  }
}

/*
 * Sticky CTA
 *
 * Fixed to the bottom of the viewport, 20px inside the right edge of the content column, linking
 * to the department site. Rendered in footer.php on pages/posts per Theme Settings + per-post
 * toggle. Image or text variant, on a #2A2457 block with the top-right corner cut off.
 * (Desktop sizing for now — responsive pass later.)
 *
 * @since   GD_Mind v1.0
*/
.sticky_cta {
  position: fixed;
  bottom: 0;
  /* 20px inside the right edge of the content column (falls back to 20px from the viewport
     on screens narrower than the content width) */
  right: max(20px, (100vw - 1300px) / 2 + 20px);
  z-index: 900;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 35px;
  background: #2A2457;
  color: #fff;
  text-decoration: none;
  /* rectangular with the top-right corner cut off */
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
.sticky_cta:focus-visible {
  outline: 2px solid #DCD0FF;
  outline-offset: 3px;
}

/* image variant: fixed 300×100 (image fits the 230×50 content box after padding) */
.sticky_cta--image {
  width: 300px;
  height: 100px;
}

/* text variant: min size so it can grow if the text needs it (admins advised to keep within 300×100) */
.sticky_cta--text {
  min-width: 300px;
  min-height: 100px;
}

.sticky_cta_image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.sticky_cta_text {
  color: #fff;
  font-size: 1.4em;
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
}

/* ≤1300 (content width): slightly smaller so it doesn't crowd the narrower viewport */
@media (max-width: 1300px) {
  .sticky_cta {
    padding: 20px 30px 20px 20px;
  }
  .sticky_cta--image {
    width: 260px;
    height: 80px;
  }
}
/* ≤980: becomes a full-width fixed bar pinned to the bottom of the viewport. The image (or text)
   sits on the right, 35px in from the screen edge. The whole bar is the link (it's an <a>). */
@media (max-width: 980px) {
  .sticky_cta {
    left: 0;
    right: 0;
    height: 50px;
    justify-content: flex-end;
    padding: 0 35px 0 20px;
    clip-path: none;
  }
  .sticky_cta--image,
  .sticky_cta--text {
    width: auto;
    height: 50px;
    min-width: 0;
    min-height: 0;
  }
  .sticky_cta_image {
    max-height: 30px;
  }
  .sticky_cta_text {
    font-size: 1em;
  }
}
/* Extra bottom padding so footer content clears the fixed CTA at the very bottom of the page */
.site_footer.has-sticky-cta {
  padding-bottom: 214px;
}
@media (max-width: 980px) {
  .site_footer.has-sticky-cta {
    padding-bottom: 80px;
  }
}

/*
 * WordPress admin bar offset
 *
 * For logged-in users the admin bar is fixed over the top of the viewport. Core's
 * `html { margin-top }` only shifts normal-flow content, so our position:fixed header and
 * full-screen overlays would sit *under* the bar. Offset them by the admin bar height via a
 * custom property, using WordPress's own breakpoints:
 *   - ≥ 783px : bar is 32px, fixed
 *   - ≤ 782px : bar is 46px, fixed
 *   - ≤ 600px : bar becomes position:absolute (scrolls away) → no offset needed
 *
 * Imported last so these `top` values win over each component's own.
 *
 * @since   GD_Mind v1.0
*/
body {
  --admin-bar-h: 0px;
}

body.admin-bar {
  --admin-bar-h: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --admin-bar-h: 46px;
  }
}
@media screen and (max-width: 600px) {
  body.admin-bar {
    --admin-bar-h: 0px;
  }
}
.site_header {
  top: var(--admin-bar-h);
}

.menu_scrim,
.search_overlay {
  top: var(--admin-bar-h);
}

.menu_panel {
  top: var(--admin-bar-h);
  height: calc(100% - var(--admin-bar-h));
}

/* Clip horizontal overflow at the root so full-bleed elements (e.g. the logo carousel's 100vw
   track) can't widen the body and shift the layout. `clip` (not hidden) avoids creating a scroll
   container, so it doesn't affect the fixed header / overlays. See the logo-carousel full-bleed. */
html {
  overflow-x: clip;
}

body, textarea {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #000;
  background-color: #fff;
}

body {
  min-height: 100vh;
}

/*# sourceMappingURL=screen.css.map */