/*
 * GLOBAL.CSS
 *
 * This file establishes the foundational styles for the Vantive theme.
 * It includes:
 * - CSS Resets (box-sizing, margins, list styles)
 * - Base HTML and Body styling
 * - Default typography for common elements (headings, paragraphs, links)
 * - Definitions for global CSS Custom Properties (variables) for:
 *   - Colors (brand palette, semantic colors)
 *   - Spacing units
 *   - Border radii
 *   - Font families, weights, and variation settings
 *   - Transition timings
 *   - Layout defaults (container widths, padding)
 * - Basic styling for common components like tables and breadcrumbs.
 * - Accessibility considerations (focus-visible, reduced motion).
 * - @font-face declarations for custom webfonts.
 */

/* --- START OF SECTION: Universal Box Sizing & Resets --- */

*,
::before,
::after {
  /*
   * Apply border-box sizing to all elements, including pseudo-elements.
   * This makes layout calculations more intuitive as padding and border
   * do not increase the element's specified width or height.
   */
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  /* Reset default margins for common block-level elements to provide a clean slate. */
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  /*
   * Remove default list styling (bullets/numbers) for lists explicitly
   * marked with role="list". This is often used for lists that are
   * navigation menus or other UI elements where default styling is not desired.
   */
  list-style: none;
}

/* --- END OF SECTION: Universal Box Sizing & Resets --- */

/* --- START OF SECTION: HTML Element Base Styles --- */

html {
  /* Ensure the HTML element takes up at least the full viewport height. */
  block-size: 100%; /* Logical property for height */
  min-block-size: 100vh;

  /* Enable smooth scrolling for anchor links and programmatic scrolling. */
  scroll-behavior: smooth;

  /* Prevent automatic text inflation on mobile browsers. */
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

:focus-visible {
  /*
   * Provides a visible outline for keyboard-focused elements, enhancing accessibility.
   * Uses the current text color for the outline.
   */
  outline: currentColor auto 1px;
  outline-offset: 0.25rem;
}

/* --- END OF SECTION: HTML Element Base Styles --- */

/* --- START OF SECTION: Body Element Base Styles --- */

body {
  /* Default background color (white), also defined via a custom property. */
  background-color: #ffffff;
  background-color: var(--color-white);

  /* Ensure body also takes full available height. */
  block-size: 100%;
  min-block-size: 100vh; /* Minimum height of the viewport. */

  /* Improve font rendering on macOS and WebKit/Blink-based browsers. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */

  /* Prevent horizontal scrolling on the body if content overflows. */
  overflow-x: hidden;

  /* Establishes a positioning context for absolutely positioned children. */
  position: relative;

  /* Optimize text rendering for speed over legibility/geometric precision in some cases. */
  text-rendering: optimizeSpeed;
}

/* --- END OF SECTION: Body Element Base Styles --- */

/* --- START OF SECTION: Default Link Styles (Unclassed) --- */

a:not([class]) {
  /*
   * Styles for anchor tags that do NOT have a class attribute.
   * This targets generic, unstyled links, perhaps from user-generated content.
   */
  font-family: "acumin-variable", system-ui, -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto,
    noto, arial, sans-serif; /* Fallback stack */
  font-family: var(--font-acumin-variable); /* Preferred variable font */

  /* Apply bold font variation settings. */
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
  font-variation-settings: var(--fs-bold);
  font-weight: 400; /* Base weight, actual boldness from font-variation-settings */

  /* Brand color for links. */
  color: #72256b;
  color: var(--color-brand);

  /* Control how text decoration skips ink gaps in letters. */
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

/* --- END OF SECTION: Default Link Styles (Unclassed) --- */

/* --- START OF SECTION: Image and Media Styles --- */

img,
picture {
  /* Ensure images scale down to fit their container and maintain aspect ratio. */
  block-size: auto; /* Height adjusts based on width */
  display: block; /* Remove extra space below inline images */
  max-inline-size: 100%; /* Max width is 100% of parent */
}

/* --- END OF SECTION: Image and Media Styles --- */

/* --- START OF SECTION: Form Element Font Inheritance --- */

input,
button,
textarea,
select {
  /* Ensure form elements inherit font properties from their parent. */
  font: inherit;
}

textarea:not([rows]) {
  /* Provide a default minimum height for textareas without a 'rows' attribute. */
  min-height: 10em;
}

/* --- END OF SECTION: Form Element Font Inheritance --- */

/* --- START OF SECTION: Reduced Motion Accessibility --- */

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    /* Disable smooth scrolling if user prefers reduced motion. */
    scroll-behavior: auto;
  }

  *, /* Targeting all elements is broad, used here for ::before, ::after primarily */
  ::before,
  ::after {
    /* Drastically reduce animation and transition durations for users who prefer reduced motion. */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important; /* Ensure scroll behavior is also instant */
    transition-duration: 0.01ms !important;
  }
}

/* --- END OF SECTION: Reduced Motion Accessibility --- */

/* --- START OF SECTION: Custom Font Face Declarations --- */

@font-face {
  font-display: swap; /* Ensures text remains visible during font loading. */
  font-family: acumin-variable; /* Variable font for general text. */
  font-style: normal;
  font-weight: 400; /* Base weight for the variable font. */
  src: url(../acumin-variable.woff2) format("woff2"); /* Modern WOFF2 format. */
}

@font-face {
  font-display: swap;
  font-family: inter; /* Font often used for UI elements like buttons. */
  font-style: normal;
  font-weight: 700; /* Bold weight. */
  src: url(../inter-bold.woff2) format("woff2");
}

/* --- END OF SECTION: Custom Font Face Declarations --- */

/* --- START OF SECTION: CSS Custom Properties (Variables) --- */

/*
 * :root and .ck selectors are used to define global custom properties.
 * .ck might be used by a WYSIWYG editor (like CKEditor) to apply these variables
 * within its editing area.
 */

/* --- SUB-SECTION: Border Radii --- */
:root,
.ck {
  --border-radius-none: 0; /* No border radius. */
  --border-radius-sm: 0.25rem; /* Small border radius. */
  --border-radius: 0.75rem; /* Standard border radius. */
  --border-radius-lg: 1.5rem; /* Large border radius. */
  --border-radius-full: 624.375rem; /* Effectively a "pill" shape or full circle. */
}

/* --- SUB-SECTION: Color Palette --- */
:root,
.ck {
  /* Primary Brand Colors */
  --color-plum: #72256b;
  --color-plum-lightest: #ecb6bc;
  --color-plum-light: #8d3a71;
  --color-plum-dark: #490a4d;

  /* Secondary/Accent Colors */
  --color-pine: #105742;
  --color-pine-light: #356962;
  --color-pine-dark: #142128;

  --color-eucalyptus: #6ca074;
  --color-eucalyptus-light: #c3d7c4;
  --color-eucalyptus-dark: #3a6142;

  --color-sage: #cddfd7;
  --color-sage-light: #f0f7f3;
  --color-sage-dark: #a6bdb0;

  /* Neutral & Utility Colors */
  --color-cream: #fffaeb;
  --color-cream-dark: #e3dba6;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey: #49454f; /* A general-purpose grey. */
}

/* --- SUB-SECTION: Semantic Color Variables --- */
/* These variables map palette colors to functional roles in the theme. */
:root,
.ck {
  --color-brand: var(--color-plum); /* Primary brand color. */
  --color-text: var(--color-pine); /* Default text color. */
  --color-shadow: var(--color-plum-lightest); /* Color for shadows. */
  --color-bg: var(--color-white); /* Default background color. */
  --color-bg-brand: var(
    --color-plum
  ); /* Background color using the brand color. */
}

/* --- SUB-SECTION: Form Input Resets (Specific Types) --- */
/* Note: 'font: inherit;' is already defined above for all input types. */
/* These rules are for specific input types or browser-specific resets. */

input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  /* Ensure these input types don't take full width by default. */
  inline-size: auto;
}

/* Remove clear/reveal buttons in IE/Edge for search inputs. */
input[type="search"]::-ms-clear {
  block-size: 0;
  display: none;
  inline-size: 0;
}
input[type="search"]::-ms-reveal {
  block-size: 0;
  display: none;
  inline-size: 0;
}

/* Remove WebKit-specific search input decorations. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* --- SUB-SECTION: Layout Variables --- */
:root,
.ck {
  /* Padding for component wrappers. */
  --l-component-wrapper-padding-block: var(--spacing-4); /* Vertical padding. */
  --l-component-wrapper-padding-inline: var(
    --spacing-4
  ); /* Horizontal padding. */

  /* Max width for main content containers. */
  --l-component-container-max-width: 90rem;

  /* Responsive padding adjustments for smaller component wrappers. */
  --l-component-wrapper-padding-block-sm: var(--spacing-9);
  --l-component-container-padding-inline: var(
    --spacing-106
  ); /* Default container horizontal padding. */
  --l-component-wrapper-padding-inline-sm: var(--spacing-102);

  /* Padding for inner wrappers within components. */
  --l-component-inner-wrapper-padding-inline: var(--spacing-2);
}

/* --- SUB-SECTION: Layout Helper Classes --- */
.l-component-container {
  /* Centers the container and restricts its maximum width. */
  margin-inline: auto;
  max-width: 90rem; /* Fallback */
  max-width: var(--l-component-container-max-width);
  padding-inline: 1rem; /* Fallback */
  padding-inline: var(--l-component-container-padding-inline);
}

/*
 * Complex selector targeting specific nested structures to adjust padding.
 * Purpose: Removes top padding on certain .l-component-wrapper-sm elements
 * when they are preceded by other specific components within an .l-component-container.
 * This is likely to prevent double-padding issues in stacked components.
 *
 * Breakdown:
 * - `.l-component-container > div` : Direct child div of the container.
 * - `:not(.text-feature):not(.table):not(.cta-feature):not(.card-group-news)`: Excludes specific component types.
 * - `:is(.filter-country):not(:first-child)`: If it's a .filter-country and not the first such div.
 * - `> .l-component-wrapper-sm .filter-country__filter`: Targets the filter element within.
 */
.l-component-container
  > div:not(.text-feature):not(.table):not(.cta-feature):not(
    .card-group-news
  ):is(.filter-country):not(:first-child)
  > .l-component-wrapper-sm
  .filter-country__filter {
  padding-block-start: 0; /* Remove top padding. */
}

/*
 * Similar to the above, this selector adjusts top padding for .l-component-wrapper-sm
 * or .l-component-wrapper when they follow a non-excluded div sibling.
 */
.l-component-container
  > div:not(.text-feature):not(.table):not(.cta-feature):not(.card-group-news)
  + div /* An immediately following sibling div */
  > .l-component-wrapper-sm,
.l-component-container
  > div:not(.text-feature):not(.table):not(.cta-feature):not(.card-group-news)
  + div
  > .l-component-wrapper {
  padding-block-start: 0; /* Remove top padding. */
}

.l-component-wrapper {
  /* Default padding for general component wrappers. */
  padding-block: 2rem; /* Fallback */
  padding-block: var(--l-component-wrapper-padding-block);
  padding-inline: 2rem; /* Fallback */
  padding-inline: var(--l-component-wrapper-padding-inline);
}
@media (min-width: 600px) {
  .l-component-wrapper {
    /* Adjust padding variables for larger screens. */
    --l-component-wrapper-padding-block: var(--spacing-12);
    --l-component-wrapper-padding-inline: var(--spacing-4);
  }
}

.l-component-wrapper-sm {
  /* Padding for smaller or more compact component wrappers. */
  padding-block: 4.5rem; /* Fallback */
  padding-block: var(--l-component-wrapper-padding-block-sm);
  padding-inline: 0.75rem; /* Fallback */
  padding-inline: var(--l-component-wrapper-padding-inline-sm);
}
@media (min-width: 600px) {
  .l-component-wrapper-sm {
    /* Adjust padding variables for larger screens. */
    --l-component-wrapper-padding-block-sm: var(--spacing-12);
    --l-component-wrapper-padding-inline-sm: var(--spacing-106);
  }
}

.l-component-inner-wrapper {
  /* Padding for elements nested inside component wrappers, creating an inner content area. */
  padding-inline: 1.5rem; /* Fallback */
  padding-inline: var(--l-component-inner-wrapper-padding-inline);
}

/* --- SUB-SECTION: Media Element Styles (Extended) --- */
img,
svg,
video {
  /* General styling for various media types. */
  block-size: auto; /* Maintain aspect ratio. */
  max-inline-size: 100%; /* Ensure they don't overflow their container. */
}

img {
  /* Specific styles for images. */
  background-repeat: no-repeat; /* For cases where images might have backgrounds. */
  background-size: cover; /* If a background is used, cover the area. */
  font-style: italic; /* For alt text if image fails to load. */
  shape-margin: 0.46875rem; /* Margin for CSS shapes if used with float. */
  vertical-align: middle; /* Common alignment for images. */
}

iframe {
  /* Ensure iframes are responsive and don't overflow. */
  max-width: 100%;
}

/* --- SUB-SECTION: Spacing Scale --- */
/* Defines a consistent scale for margins, paddings, and gaps. */
:root,
.ck {
  --spacing-0: 0rem;
  --spacing-01: 0.0625rem; /* 1px */
  --spacing-02: 0.125rem; /* 2px */
  --spacing-04: 0.25rem; /* 4px */
  --spacing-05: 0.3125rem; /* 5px */
  --spacing-1: 0.5rem; /* 8px */
  --spacing-102: 0.75rem; /* 12px */
  --spacing-106: 1rem; /* 16px */
  --spacing-2: 1.5rem; /* 24px */
  --spacing-4: 2rem; /* 32px */
  --spacing-5: 2.5rem; /* 40px */
  --spacing-6: 3rem; /* 48px */
  --spacing-7: 3.5rem; /* 56px */
  --spacing-8: 4rem; /* 64px */
  --spacing-9: 4.5rem; /* 72px */
  --spacing-10: 5rem; /* 80px */
  --spacing-11: 5.5rem; /* 88px */
  --spacing-12: 6rem; /* 96px */
  --spacing-13: 6.5rem; /* 104px */
  --spacing-14: 7rem; /* 112px */
  --spacing-15: 7.5rem; /* 120px */
}

/* --- SUB-SECTION: Transition Variables --- */
:root,
.ck {
  --trns-duration: 0.2s; /* Default transition duration. */
  --trns-type: ease-in-out; /* Default transition timing function. */
}

/* --- SUB-SECTION: Font System Variables --- */
:root,
.ck {
  /* Fallback font stack. */
  --font-fallback: system-ui, -apple-system, blinkmacsystemfont, avenir next,
    avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
    sans-serif;
  /* Primary variable font with fallback. */
  --font-acumin-variable: "acumin-variable", var(--font-fallback);
  /* Font for buttons, using Inter with fallback. */
  --font-button: "inter", var(--font-fallback);

  /* Font Variation Settings (for variable fonts like Acumin) */
  /* Format: "axis" value, "axis" value, "wght" value */
  --fs-regular: "slnt" 0, "wdth" 100, "wght" 400; /* Regular style */
  --fs-bold: "slnt" 0, "wdth" 100, "wght" 700; /* Bold style */
  --fs-wide-medium: "slnt" 0, "wdth" 115, "wght" 500; /* Wide medium */
  --fs-wide-bold: "slnt" 0, "wdth" 115, "wght" 700; /* Wide bold */
  --fs-wide-bold-italic: "slnt" -12, "wdth" 115, "wght" 700; /* Wide bold italic */
  --fs-wide-ultra-black: "slnt" 0, "wdth" 115, "wght" 900; /* Wide ultra black */
}

/* --- SUB-SECTION: Font Weight Variables --- */
/* Standard numeric font weights. */
:root,
.ck {
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-book: 400; /* Alias for regular */
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;
}

/* --- SUB-SECTION: Content Width --- */
:root,
.ck {
  /* Maximum width for readable text content blocks. */
  --content-max-width: 48rem;
}

/* --- END OF SECTION: CSS Custom Properties (Variables) --- */

/* --- START OF SECTION: Typography Base Styles --- */

p {
  /* Default paragraph styling. */
  color: #105742; /* Fallback */
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.5; /* Standard line height for readability. */
  max-width: 48rem; /* Fallback */
  max-width: var(--content-max-width); /* Limit width for readability. */
}

p:not(:first-of-type) {
  /* Add top margin to paragraphs that are not the first of their type in a container. */
  margin-block-start: 1rem;
}

sup {
  /* Styling for superscript text. */
  font-size: 0.7em;
  vertical-align: top;
}

a {
  /* General styling for all anchor tags (can be overridden by more specific rules). */
  /* Uses Acumin Variable for links by default. */
  font-family: "acumin-variable", system-ui, -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto,
    noto, arial, sans-serif;
  font-family: var(--font-acumin-variable);
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
  font-variation-settings: var(--fs-bold);
  font-weight: 400; /* Base weight, boldness from font-variation-settings. */
  color: #72256b; /* Fallback */
  color: var(--color-brand);

  /* Overrides to use 'Inter' font for links, making them consistent with buttons. */
  font-family: "inter", system-ui, -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto,
    noto, arial, sans-serif;
  font-family: var(--font-button);
  line-height: 1.25;
  text-decoration: none; /* Remove default underline. */
  transition: color 0.3s ease-in-out; /* Smooth color transition on hover/focus. */
}

a:active,
a:hover,
a:focus {
  /* Add underline on hover, focus, and active states. */
  text-decoration: underline;
  text-decoration-color: currentColor; /* Underline matches text color. */
}

/* Styling for external links, identified by [data-extlink] attribute (often added by JS or Drupal modules). */
a:is([data-extlink]):not(.button) {
  display: inline-block; /* Allows vertical alignment of icon. */
  line-height: 1.25;
  vertical-align: middle;
  word-break: break-word; /* Prevent long URLs from breaking layout. */
}
a:is([data-extlink]):not(.button) svg.external-link-icon {
  /* Styling for the SVG icon used to indicate an external link. */
  block-size: 1rem;
  display: inline-block;
  inline-size: 1rem;
  inset-block-start: -0.125rem; /* Fine-tune vertical position. */
  line-height: 1.25;
  margin-inline-start: 0.375rem; /* Space between text and icon. */
  min-inline-size: 1rem;
  padding: 0;
  position: relative;
  vertical-align: middle;
}

strong,
b {
  /* Styling for bold text. */
  font-family: "acumin-variable", system-ui, -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto,
    noto, arial, sans-serif;
  font-family: var(--font-acumin-variable);
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
  font-variation-settings: var(--fs-bold);
  font-weight: 400; /* Base weight, actual boldness from font-variation-settings. */
}

/* --- END OF SECTION: Typography Base Styles --- */

/* --- START OF SECTION: Breadcrumb Component --- */
.breadcrumb {
  /* Spacing below the breadcrumb trail. */
  margin-block-end: 1.5rem; /* Fallback */
  margin-block-end: var(--spacing-2);
}
@media (min-width: 768px) {
  .breadcrumb {
    margin-block-end: 2rem; /* Fallback */
    margin-block-end: var(--spacing-4);
  }
}

.breadcrumb ol {
  /* Styling for the ordered list used in breadcrumbs. */
  list-style: none; /* Remove default numbering. */
  padding-inline-start: 0; /* Remove default left padding. */
  align-items: center; /* Vertically align items. */
  display: flex; /* Use flexbox for layout. */
  gap: 0.75rem; /* Fallback */
  gap: var(--spacing-102); /* Space between breadcrumb items. */
  margin: 0; /* Reset margin. */
}

.breadcrumb ol li {
  /* Styling for individual breadcrumb list items. */
  display: inline-block; /* Default display for li, reiterated. */
  color: #ffffff; /* Fallback - this color implies breadcrumbs are often on a dark background. */
  color: var(--color-white);
  font-family: "inter", system-ui, -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto,
    noto, arial, sans-serif;
  font-family: var(--font-button); /* Uses button font. */
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700; /* Fallback */
  font-weight: var(--fw-bold);
  font-variation-settings: normal; /* Reset any inherited font variations. */
  line-height: normal;
}

.breadcrumb ol li a {
  /* Links within breadcrumbs inherit the list item's color. */
  color: currentColor;
}

.breadcrumb ol li:not(:last-child) {
  /* Styling for breadcrumb items that are not the last one (i.e., have a separator). */
  align-items: center;
  display: flex;
  gap: 0.75rem; /* Fallback */
  gap: var(--spacing-102);
  position: relative; /* For positioning the ::after pseudo-element. */
}

.breadcrumb ol li:not(:last-child)::after {
  /* The separator (e.g., '>') between breadcrumb items. */
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%20fill%3D%22%23fff%22%3E%20%20%20%3Cpath%20d%3D%22M8.54002%203.33099V5.68299L0.77002%208.88899V6.56499L6.24402%204.50699L0.77002%202.42099V0.110992L8.54002%203.33099Z%22%20fill%3D%22%23ffffff%22%2F%3E%20%3C%2Fsvg%3E")
    no-repeat center center; /* SVG used as separator icon. */
  block-size: 0.5625rem;
  content: ""; /* Required for pseudo-elements. */
  inline-size: 0.5625rem;
  position: relative; /* Adjusted if needed relative to the flex item. */
}
/* --- END OF SECTION: Breadcrumb Component --- */

/* --- START OF SECTION: AJAX Progress Indicator (Drupal) --- */
/*
 * Styling for Drupal's AJAX progress indicators (throbbers/spinners).
 * This customizes the appearance of the loading animation.
 */
.ajax-progress.ajax-progress-fullscreen,
.ajax-progress.ajax-progress-throbber {
  /* Define sizes for the spinner. */
  --outer-size: 2.8rem;
  --inner-size: 2rem;
  --border-size: 0.4rem;

  /* Layout for the spinner container. */
  align-items: center;
  background: #ffffff; /* Fallback */
  background: var(--color-white);
  block-size: var(--outer-size);
  border-radius: 50%; /* Circular shape. */
  display: flex;
  flex-direction: column;
  font-size: 0; /* Collapse text nodes. */
  inline-size: var(--outer-size);
  justify-content: center;
  line-height: 0;
  padding: 0;
}

/* Smaller version of the spinner. */
.ajax-progress.ajax-progress-fullscreen:is(.ajax-progress-throbber),
.ajax-progress.ajax-progress-throbber:is(.ajax-progress-throbber) {
  --outer-size: 1.8rem;
  --inner-size: 1rem;
  --border-size: 0.2rem;
}

/* The animated part of the spinner. */
.ajax-progress.ajax-progress-fullscreen:before,
.ajax-progress.ajax-progress-throbber:before {
  /* Keyframe animations for the spinner effect. */
  animation: poly-anim 0.8s infinite linear alternate,
    /* Controls the clipping path. */ transform-anim 1.6s infinite linear; /* Controls rotation and scaling. */
  aspect-ratio: 1; /* Maintain a square shape. */
  background: none;
  block-size: var(--inner-size);
  border-radius: 50%;
  border: var(--border-size) solid #72256b; /* Fallback */
  border: var(--border-size) solid var(--color-brand); /* Uses brand color for the border. */
  content: "";
  display: inline-block;
  inline-size: var(--inner-size);
  padding: 0px;
}

.ajax-progress.ajax-progress-fullscreen .throbber,
.ajax-progress.ajax-progress-throbber .throbber {
  /* Hide the default throbber image if this custom CSS is applied. */
  display: none;
}

/* Keyframes for the polygon clipping animation (poly-anim). */
@keyframes poly-anim {
  /* Defines a series of clip-path polygons to create a "wipe" effect. */
  0% {
    -webkit-clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      50% 0%,
      50% 0%,
      50% 0%,
      50% 0%
    );
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5% {
    -webkit-clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      100% 0%
    );
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      100% 0%
    );
  }
  25% {
    -webkit-clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      100% 100%,
      100% 100%
    );
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      100% 100%,
      100% 100%
    );
  }
  50% {
    -webkit-clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  62.5% {
    -webkit-clip-path: polygon(
      50% 50%,
      100% 0,
      100% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
    clip-path: polygon(
      50% 50%,
      100% 0,
      100% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  75% {
    -webkit-clip-path: polygon(
      50% 50%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      50% 100%,
      0% 100%
    );
    clip-path: polygon(
      50% 50%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  100% {
    -webkit-clip-path: polygon(
      50% 50%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      0% 100%
    );
    clip-path: polygon(
      50% 50%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      0% 100%
    );
  }
}

/* Keyframes for the transform animation (transform-anim). */
@keyframes transform-anim {
  /* Controls rotation and vertical scaling to create a dynamic effect. */
  0% {
    transform: scaleY(1) rotate(0deg);
  }
  49.99% {
    transform: scaleY(1) rotate(135deg);
  }
  50% {
    transform: scaleY(-1) rotate(0deg); /* Flips the element vertically. */
  }
  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}
/* --- END OF SECTION: AJAX Progress Indicator (Drupal) --- */

/* --- START OF SECTION: Table Styles --- */
table {
  background-color: #ffffff; /* Fallback */
  background-color: var(--color-white);
  border-collapse: collapse; /* Standard table border behavior. */
  width: 100%; /* Make tables take full available width. */
}

table thead th,
table tbody th,
table thead td,
table tbody td {
  /* Common styling for all table cells (headers and data). */
  font-family: "acumin-variable", system-ui, -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto,
    noto, arial, sans-serif;
  font-family: var(--font-acumin-variable);
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 400;
  font-variation-settings: var(--fs-regular);
  font-weight: 400;
  block-size: 4.5rem; /* Fallback */
  block-size: var(--spacing-9); /* Cell height. */
  padding-block: 0.25rem; /* Fallback */
  padding-block: var(--spacing-04);
  padding-inline: 2rem; /* Fallback */
  padding-inline: var(--spacing-4);
  text-align: start; /* Align text to the start (left in LTR, right in RTL). */
}

table thead th {
  /* Styling for table header cells. */
  background-color: #142128; /* Fallback */
  background-color: var(--color-pine-dark); /* Dark background for headers. */
  border: 1px solid #105742; /* Fallback */
  border: 1px solid var(--color-pine);
  color: #ffffff; /* Fallback */
  color: var(--color-white); /* Light text on dark background. */
  font-weight: 900; /* Fallback */
  font-weight: var(--fw-black); /* Very bold font weight. */
  line-height: 1.125;
  text-align: left; /* Explicitly left-aligned for LTR. */
}

table tbody th {
  /* Styling for row header cells within the table body (e.g., first cell in a row). */
  background-color: #f0f7f3; /* Fallback */
  background-color: var(--color-sage-light); /* Light sage background. */
  border: 1px solid #cddfd7; /* Fallback */
  border: 1px solid var(--color-sage);
  color: #105742; /* Fallback */
  color: var(--color-text);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400; /* Fallback */
  font-weight: var(--fw-regular);
  line-height: 1.5;
  text-align: start;
}

table tbody td {
  /* Styling for standard data cells in the table body. */
  border: 1px solid #cddfd7; /* Fallback */
  border: 1px solid var(--color-sage);
  line-height: 1.125;
}

/* --- SUB-SECTION: Table Utility Classes --- */
.table__border {
  /* Wrapper class to provide a border and rounded corners for the table, and handle overflow. */
  border: 1px solid #cddfd7; /* Fallback */
  border: 1px solid var(--color-sage);
  border-radius: 0.75rem; /* Fallback */
  border-radius: var(--border-radius);
  /*
   * Negative margin trick to make the bordered container appear flush
   * if its parent has padding. The calculation makes the inline-size
   * slightly wider than 100% to counteract the parent's padding effect.
   * `var(--spacing-102)` is 0.75rem.
   */
  inline-size: calc(100% + 0.75rem * -1);
  inline-size: calc(100% + var(--spacing-102) * -1);
  margin-inline-start: 0;
  overflow: hidden; /* Clip content outside rounded corners. */
  overflow-x: auto; /* Allow horizontal scrolling for wide tables. */
}
@media (min-width: 1200px) {
  .table__border {
    /* On larger screens, horizontal overflow might not be needed or desired. */
    overflow-x: visible;
  }
}

.table__header {
  /* Adds bottom margin to a table header section/element. */
  margin-block-end: 4rem; /* Fallback */
  margin-block-end: var(--spacing-8);
}

table tbody tr.table__row-highlight td,
table tbody tr.table__row-highlight th {
  /* Styling for highlighted rows within the table body. */
  background-color: #105742; /* Fallback */
  background-color: var(--color-pine); /* Pine color for background. */
  block-size: 3rem; /* Fallback */
  block-size: var(--spacing-6); /* Custom height for highlighted rows. */
  border: 1px solid #105742; /* Fallback */
  border: 1px solid var(--color-pine);
  color: #ffffff; /* Fallback */
  color: var(--color-white); /* White text. */
  font-weight: 700; /* Fallback */
  font-weight: var(--fw-bold); /* Bold text. */
  line-height: 1.125;
  padding-block: 0.25rem; /* Fallback */
  padding-block: var(--spacing-04);
  padding-inline: 2rem; /* Fallback */
  padding-inline: var(--spacing-4);
  text-align: start;
}
table tbody tr.table__row-highlight td *,
table tbody tr.table__row-highlight th * {
  /* Ensure all child elements within a highlighted row also use white text. */
  color: #ffffff; /* Fallback */
  color: var(--color-white);
}
/* --- END OF SECTION: Table Styles --- */

/* --- START OF SECTION: Heading Styles (H1-H4) --- */
:where(h1, h2, h3, h4) {
  /*
   * Uses :where() to apply styles with zero specificity, making them easy to override.
   * Common styles for h1, h2, h3, h4.
   */
  color: #105742; /* Fallback */
  color: var(--color-text);
  text-wrap: balance; /* Improves text wrapping for multi-line headings. */
}

:where(h1, h2, h3, h4):is(h1) {
  /* Targets H1 */
  font-family: "acumin-variable", system-ui, -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto,
    noto, arial, sans-serif;
  font-family: var(--font-acumin-variable);
  font-variation-settings: "slnt" 0, "wdth" 115, "wght" 700;
  font-variation-settings: var(--fs-wide-bold); /* Wide bold style. */
  font-weight: 400; /* Base weight. */
  font-size: 1.8125rem;
  line-height: 1.5;
}

:where(h1, h2, h3, h4):is(h2) {
  /* Targets H2 */
  font-family: "acumin-variable", system-ui, -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto,
    noto, arial, sans-serif;
  font-family: var(--font-acumin-variable);
  font-variation-settings: "slnt" 0, "wdth" 115, "wght" 500;
  font-variation-settings: var(--fs-wide-medium); /* Wide medium style. */
  font-weight: 400;
  font-size: 1.8125rem;
  line-height: 1.42;
}

:where(h1, h2, h3, h4):is(h3) {
  /* Targets H3 */
  font-family: "acumin-variable", system-ui, -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto,
    noto, arial, sans-serif;
  font-family: var(--font-acumin-variable);
  font-variation-settings: "slnt" 0, "wdth" 115, "wght" 500;
  font-variation-settings: var(--fs-wide-medium); /* Wide medium style. */
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.5;
}

:where(h1, h2, h3, h4):is(h4) {
  /* Targets H4 */
  font-family: "acumin-variable", system-ui, -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto,
    noto, arial, sans-serif;
  font-family: var(--font-acumin-variable);
  font-variation-settings: "slnt" 0, "wdth" 115, "wght" 700;
  font-variation-settings: var(--fs-wide-bold); /* Wide bold style. */
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
}
/* --- END OF SECTION: Heading Styles (H1-H4) --- */

/* --- START OF SECTION: HTML Scroll Lock Utility --- */
html {
  /* Reiteration for clarity, already defined above. */
  min-block-size: 100vh;
}
html.lock {
  /* Utility class to prevent scrolling on the HTML element (e.g., when a modal is open). */
  block-size: auto; /* Can conflict with 100vh, careful usage needed. */
  overflow: hidden; /* Prevents scrolling. */
}
html.lock body {
  /* Also prevent scrolling on the body when html.lock is active. */
  overflow: hidden;
}
/* --- END OF SECTION: HTML Scroll Lock Utility --- */

/* --- START OF SECTION: Body Default Font and Text Styling --- */
body {
  /* Default font settings for the entire body content. */
  font-family: "acumin-variable", system-ui, -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, ubuntu, roboto,
    noto, arial, sans-serif;
  font-family: var(--font-acumin-variable);
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 400;
  font-variation-settings: var(--fs-regular); /* Regular font style. */
  font-weight: 400; /* Base weight. */
  color: #105742; /* Fallback */
  color: var(--color-text); /* Default text color. */
  font-size: 1rem; /* Base font size. */
  line-height: 1.5; /* Default line height. */
  overflow-x: hidden; /* Reiteration, already defined. Prevents horizontal scroll. */
  width: 100%; /* Ensure body takes full width. */
}
/* --- END OF SECTION: Body Default Font and Text Styling --- */