/**
 * @file
 * Olivero Theme Color Overrides - Light/Dark Mode Support
 *
 * This file overrides Olivero's hardcoded colors with our semantic tokens
 * to enable automatic light/dark mode switching across the entire site.
 *
 * Strategy: Override high-specificity Olivero selectors with our tokens
 *
 * IMPORTANT: Exclude admin UI elements (#toolbar-administration, .ui-dialog, etc.)
 * to prevent theme from affecting Drupal's admin interface.
 */

/**
 * Olivero core's base.css (web/core/themes/olivero/css/base/base.css) sets
 * `body { hyphens: auto; }`. It loads AFTER the drupal_cms_olivero base
 * theme's own `body { hyphens: none; }` (css/base/base.css), so it silently
 * wins and re-enables browser auto-hyphenation site-wide — this project's
 * own base theme already declares the intent to disable it.
 *
 * On narrow/mobile flex rows (e.g. the session detail badges, "Localiser"
 * button) this causes ugly mid-word hyphen breaks such as "Lo-ca-li-ser" or
 * "Dé-tails". Restore the intended, already-declared behavior.
 * Unlayered + !important so it wins regardless of @layer ordering.
 */
body {
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

@layer base {
  /* ========================================
     Scope Limitation
     ======================================== */

  /* Exclude admin toolbar and dialogs from theme overrides */
  /* This prevents our theme from interfering with Drupal's admin UI */

  /* ========================================
     Global Base Styles
     ======================================== */

  /* Only apply to the main front canvas, not the admin toolbar */
  .dialog-off-canvas-main-canvas {
    background-color: var(--color-bg) !important;
    color: var(--color-fg) !important;
  }

  /* When the admin toolbar is present, the canvas still gets themed */
  body.toolbar-fixed .dialog-off-canvas-main-canvas {
    background-color: var(--color-bg) !important;
    color: var(--color-fg) !important;
  }

  /* Ensure ALL wrapper elements inherit the theme background */
  #page-wrapper,
  #page,
  .layout-main-wrapper,
  .layout-main,
  .main-content,
  .main-content__container {
    background-color: var(--color-bg) !important;
    color: var(--color-fg) !important;
    width: 100% !important;
  }

  /* ========================================
     Layout width fixes
     ======================================== */
  /*
   * Olivero limits the overall page wrapper to --max-bg-color, which
   * prevents full-bleed background across very wide screens. For our
   * frontend, we want the background to span 100% while the inner
   * .container remains constrained by --max-width. Override the core
   * rule here.
   */
  .page-wrapper {
    max-width: none !important; /* allow full-width background */
    width: 100% !important;
  }

  /* ========================================
     Layout Builder Section Width Support
     ======================================== */
  /*
   * Olivero's grid CSS (grid.css, layout-content-narrow.css, layout-content-medium.css)
   * is deregistered via hook_library_info_alter() in sse_theme.theme.
   *
   * This section provides a simpler replacement layout system that:
   * 1. Removes the old grid-full / layout--content-narrow constraints
   * 2. Allows Layout Builder sections and UI Styles to control width
   * 3. Centers content by default with a max-width container
   */

  /* Remove overflow hidden that would clip full-width sections */
  .main-content,
  .main-content__container,
  .layout-main-wrapper,
  .layout-main {
    overflow-x: visible !important;
  }

  /* Allow full-width sections to break out of container */
  .main-content__container {
    max-width: 100% !important;
  }

  /* Reset Olivero's wide-content negative margin behavior globally */
  .layout-builder .wide-content,
  .block--layout-builder .wide-content,
  [class*="block-views"] .wide-content {
    margin-inline: 0 !important;
    width: 100% !important;
  }

  /* Ensure Layout Builder sections can expand */
  main[role="main"] {
    overflow-x: visible;
  }

.main-content__container {
    padding-block-start: 0 !important;
}

  /* ========================================
     Replacement Layout System (Grid CSS Removed)
     ======================================== */
  /*
   * Since Olivero's grid.css is deregistered, provide a simple
   * block-based layout that centers content appropriately.
   */

  /* .grid-full class no longer has CSS Grid - use block layout */
  .grid-full {
    display: block !important;
    width: 100%;
  }

  /* .layout--content-narrow should not constrain via grid-column */
  .layout--content-narrow,
  .layout--content-medium {
    display: block !important;
    width: 100% !important;
  }

  /* Node content uses full width, Layout Builder controls sections */
  .node .node__content {
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Layout Builder sections take full available width by default */
  .layout-builder__section,
  .layout {
    width: 100%;
  }

  /* Views and blocks inside Layout Builder respect their container */
  .views-element-container,
  .block-views {
    width: 100%;
    max-width: 100%;
  }

  /* ========================================
     Default Content Centering (for non-Layout Builder pages)
     ======================================== */
  /*
   * For basic node pages without Layout Builder, provide centered
   * content with a reasonable max-width (similar to what Olivero's
   * layout--content-narrow provided, but without the CSS Grid).
   */
  .node:not(.node--layout-builder) .node__content {
    max-width: var(--max-width, 1440px);
    margin-inline: auto;
  }

  /* But not the toolbar itself - it keeps its own styles */

  /* ========================================
     Admin UI Exclusions
     ======================================== */

  /* Explicitly preserve Drupal admin UI styles */
  #toolbar-administration,
  #toolbar-administration *,
  .toolbar-bar,
  .toolbar-bar *,
  .toolbar-tray,
  .toolbar-tray *,
  .ui-dialog,
  .ui-dialog *,
  .ui-widget,
  .ui-widget *,
  #admin-toolbar,
  #admin-toolbar *,
  .contextual-region .contextual,
  .contextual-links,
  .dropbutton-wrapper,
  [id^="edit-actions"] button,
  [id^="edit-actions"] input,
  .gin-layer-wrapper,
  .gin-layer-wrapper * {
    /* Reset any overrides - let Drupal handle admin UI */
    /* background-color: revert !important;
    color: revert !important;
    border-color: revert !important; */
  }

  /* ========================================
     Header & Site Branding
     ======================================== */

  .site-header,
  .region-header {
    background-color: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border) !important;
  }

  .site-header__inner {
    width: 100% !important;
  }

  /* Header inner wrappers must also be themed */
  .site-header__fixable,
  .site-header__initial,
  .site-header__inner,
  .site-header__inner__container,
  .site-header .container {
    background-color: var(--color-surface) !important;
  }

  .site-branding__name a {
    color: var(--color-fg) !important;
  }

  .site-branding__name a:hover {
    color: var(--color-link) !important;
  }

  .site-branding__slogan {
    color: var(--color-fg-muted) !important;
  }

  /* Site branding block and inner elements */

  .site-branding {
    align-items: center;
  }

  .site-branding__logo {
    background-color: #fff;
    border-radius: 15px;
  }

  .site-branding,
  .site-branding__inner,
  .site-branding__text {
    background-color: transparent !important;
  }

  /* All blocks within the header must inherit the header background */
  .site-header .block,
  .site-header .region {
    background-color: transparent !important;
  }

  /* ========================================
     Navigation Menus
     ======================================== */
  #header-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  #block-sse-theme-main-menu {
    display: flex;
    flex-direction: column;
    flex: 1 0 100%;
  }

  /* Primary menu */
  .primary-nav,
  .primary-nav__menu,
  .primary-nav__menu-item {
    background-color: transparent !important;
  }

  .primary-nav__menu-link {
    color: var(--color-fg) !important;
  }

  .primary-nav__menu-link:hover,
  .primary-nav__menu-link:focus {
    color: var(--color-link) !important;
    background-color: var(--color-elevated) !important;
  }

  .primary-nav__menu-link--active-trail,
  .primary-nav__menu-link.is-active {
    color: var(--color-link) !important;
    border-bottom-color: var(--color-link) !important;
  }

  /* Secondary menu */
  .secondary-nav__menu-link {
    color: var(--color-fg-muted) !important;
  }

  .secondary-nav__menu-link:hover,
  .secondary-nav__menu-link:focus {
    color: var(--color-link) !important;
  }

  /* Mobile menu */
  .mobile-nav-wrapper,
  .header-nav {
    border-block-start-color: var(--color-border) !important;
    background-color: var(--color-surface) !important;
    border-top-width: 0 !important;
  }

  .mobile-nav__cover,
  .header-nav-overlay {
    background-color: color-mix(in oklab, var(--color-fg) 50%, transparent) !important;
  }

  /* Mobile buttons container */
  .mobile-buttons {
    background-color: transparent !important;
    margin-block-start: 0 !important;
    display: flex;
    align-items: center;
  }

  /* Off-canvas logo — full-width white banner with the brand mark centred at a
     comfortable size. Olivero caps `.site-branding__logo img` at
     max-height:var(--sp2) (~24px) with width:auto, both UNLAYERED, so a plain
     layered rule loses; the `!important`s below win from inside @layer base.
     The logo is near-square, so a fixed max-height (not width:100%) keeps it a
     tidy banner rather than a giant square. The white plate lets the multicolour
     mark read against the dark off-canvas background. */
  .mobile-nav__logo {
    display: block;
    padding: var(--sp1-5);
    margin-bottom: var(--sp1);
    border-bottom: 1px solid var(--color-border);
  }

  .mobile-nav__logo a.site-branding__logo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--sp1-5);
    background: #fff;
    border-radius: var(--radius-lg, 10px);
    box-sizing: border-box;
  }

  .mobile-nav__logo img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 96px !important;
    display: block;
  }

  /* ========================================
     Footer
     ======================================== */

  .site-footer {
    background-color: var(--color-surface) !important;
    background-image: none !important;
    border-top: 1px solid var(--color-border) !important;
    color: var(--color-fg) !important;
  }

  .site-footer__inner {
    margin: 0 auto;
    background-color: var(--color-surface) !important;
  }

  .site-footer__top,
  .site-footer__bottom {
    background-color: transparent !important;
    border-color: var(--color-border) !important;
  }

  .site-footer a {
    color: var(--color-link) !important;
  }

  .site-footer a:hover,
  .site-footer a:focus {
    color: var(--color-link-hover) !important;
  }

  /* Footer menu */
  .footer-menu__link {
    color: var(--color-fg-muted) !important;
  }

  .footer-menu__link:hover,
  .footer-menu__link:focus {
    color: var(--color-link) !important;
  }

  /* ========================================
     Breadcrumbs
     ======================================== */
  #block-sse-theme-breadcrumbs {
    margin: 0 auto;
    max-width: var(--max-width);
    background-color: transparent;
  }
  .breadcrumb {
    border-bottom: 1px solid var(--color-border) !important;
    padding: 0.5rem 0 !important;
  }

  .breadcrumb__link {
    color: var(--color-link) !important;
  }

  .breadcrumb__link:hover,
  .breadcrumb__link:focus {
    color: var(--color-link-hover) !important;
  }

  /* ========================================
     Content Area
     ======================================== */

  .layout-content,
  .region-content,
  .region--highlighted,
  .region--breadcrumb {
    background-color: transparent !important;
  }

  /* Titles and headings - exclude admin UI */
  .layout-container h1:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container h2:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container h3:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container h4:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container h5:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container h6:not(#toolbar-administration *):not(.ui-dialog *),
  .page-title,
  .block__title:not(#toolbar-administration *),
  .node__title {
    color: var(--color-fg) !important;
    margin-block: var(--sp0-5) !important; /* Reduced from var(--sp) */
  }

  @media (min-width: 43.75rem) {
    .layout-container h1:not(#toolbar-administration *):not(.ui-dialog *),
    .layout-container h2:not(#toolbar-administration *):not(.ui-dialog *),
    .layout-container h3:not(#toolbar-administration *):not(.ui-dialog *),
    .layout-container h4:not(#toolbar-administration *):not(.ui-dialog *),
    .layout-container h5:not(#toolbar-administration *):not(.ui-dialog *),
    .layout-container h6:not(#toolbar-administration *):not(.ui-dialog *),
    .page-title,
    .block__title:not(#toolbar-administration *),
    .node__title {
      margin-block: var(--sp) !important; /* Reduced from var(--sp2) */
    }
  }

  .node__content {
    padding-block-end: var(--sp) !important;
  }

  /* Node meta spacing */
  .node__meta {
    margin-block-end: var(--sp0-5) !important;
  }

  /* ========================================
     FullCalendar Overrides
     ======================================== */

  /* Fix calendar cells to fit sse_theme color tokens */
  .fc-view .fc-day-grid .fc-day.fc-widget-content,
  .fc-view .fc-time-grid .fc-day.fc-widget-content {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
  }

  /* Wednesday and Today highlights */
  .fc-view .fc-day.fc-wed {
    /* Optional: subtle hint for specific days if needed, otherwise keep surface */
    background-color: var(--color-surface);
  }

  .fc-view .fc-day.fc-today {
    background-color: var(--color-elevated) !important;
    font-weight: bold !important;
  }

  /* Remove background color from header cells and skeleton layers */
  .fc-view .fc-head-container .fc-widget-header,
  .fc-view .fc-day-header,
  .fc-view .fc-content-skeleton,
  .fc-view .fc-content-skeleton .fc-day-top,
  .fc-view .fc-content-skeleton table,
  .fc-view .fc-content-skeleton td {
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--color-border) !important;
    color: var(--color-fg) !important;
  }

  /* Override global table striping for FullCalendar skeleton - must come after */
  .fc .fc-content-skeleton tbody tr,
  .fc .fc-content-skeleton tbody tr:nth-child(odd),
  .fc .fc-content-skeleton tbody tr:nth-child(even),
  .fc .fc-content-skeleton thead tr,
  .fc .fc-bg tbody tr,
  .fc .fc-bg tbody tr:nth-child(odd),
  .fc .fc-bg tbody tr:nth-child(even) {
    background-color: transparent !important;
  }

  /* Ensure fc-today shows through the skeleton layer */
  .fc-view .fc-day.fc-today,
  .fc .fc-day-grid .fc-day.fc-today {
    background-color: var(--color-elevated) !important;
  }

  /* Make today cell stand out with a subtle border effect */
  .fc .fc-bg td.fc-day.fc-today {
    background-color: var(--color-elevated) !important;
    position: relative;
    z-index: 0;
  }

  .fc-view .fc-list-heading td {
    background-color: var(--color-elevated) !important;
    color: var(--color-fg) !important;
    border-color: var(--color-border) !important;
  }

  /* Text colors for calendar */
  .fc-view .fc-day-number,
  .fc-view .fc-axis {
    color: var(--color-fg);
  }

  .fc-view .fc-event {
    border-radius: 4px;
    padding: 2px 4px;
  }

  @media (min-width: 31.25rem) {
    .node__meta {
      margin-block-end: var(--sp) !important;
    }
  }

  @media (min-width: 62.5rem) {
    .node__content {
      padding-block-end: var(--sp1-5) !important;
    }
  }

  /* Links - exclude admin UI */
  .layout-container a:not(#toolbar-administration *):not(.ui-dialog *):not(.contextual-links a):not(.dropbutton a),
  .region-content a:not(#toolbar-administration *),
  .site-footer a:not(#toolbar-administration *) {
    color: var(--color-link);
    /* text-decoration handled by DSFR-style animated underline above */
  }

  .layout-container a:not(#toolbar-administration *):not(.ui-dialog *):hover,
  .layout-container a:not(#toolbar-administration *):not(.ui-dialog *):focus {
    color: var(--color-link-hover);
  }

  .layout-container a:not(#toolbar-administration *):not(.ui-dialog *):visited {
    color: var(--color-link-visited);
  }

  /* Paragraphs and text - exclude admin UI */
  .layout-container p:not(#toolbar-administration *),
  .layout-container li:not(#toolbar-administration *),
  .region-content td,
  .region-content th,
  .region-content dd,
  .region-content dt {
    color: var(--color-fg);
  }

  /* ========================================
     Blocks & Regions
     ======================================== */

  .block {
    background-color: transparent !important;
  }

  .sidebar .block {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
  }

  /* ========================================
     Forms & Form Elements
     ======================================== */

  /* Exclude admin forms */
  .layout-container input[type="text"]:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container input[type="email"]:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container input[type="tel"]:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container input[type="password"]:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container input[type="search"]:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container input[type="url"]:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container input[type="number"]:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container textarea:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container select:not(#toolbar-administration *):not(.ui-dialog *) {
    background-color: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-fg) !important;
  }

  .layout-container input:not(#toolbar-administration *):not(.ui-dialog *):focus,
  .layout-container textarea:not(#toolbar-administration *):not(.ui-dialog *):focus,
  .layout-container select:not(#toolbar-administration *):not(.ui-dialog *):focus {
    border-color: var(--color-focus) !important;
    outline: 2px solid var(--color-focus) !important;
    outline-offset: 2px;
  }

  /* Form labels */
  .layout-container label:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container .form-item__label:not(#toolbar-administration *):not(.ui-dialog *) {
    color: var(--color-fg) !important;
  }

  .layout-container .form-item__description:not(#toolbar-administration *):not(.ui-dialog *) {
    color: var(--color-fg-muted) !important;
  }

  /* Checkboxes and radios */
  .layout-container input[type="checkbox"]:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container input[type="radio"]:not(#toolbar-administration *):not(.ui-dialog *) {
    border-color: var(--color-border) !important;
  }

  .layout-container input[type="checkbox"]:not(#toolbar-administration *):not(.ui-dialog *):checked,
  .layout-container input[type="radio"]:not(#toolbar-administration *):not(.ui-dialog *):checked {
    background-color: var(--color-link) !important;
    border-color: var(--color-link) !important;
  }

  /* ========================================
     Buttons & Actions
     ======================================== */

  /* Base buttons - ensure proper contrast */
  .layout-container .button:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container .btn:not(#toolbar-administration *):not(.ui-dialog *) {
    background-color: var(--color-link) !important;
    color: var(--color-bg) !important;
  }

  .layout-container .button:hover:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container .btn:hover:not(#toolbar-administration *):not(.ui-dialog *) {
    background-color: var(--color-link-hover) !important;
    color: var(--color-bg) !important;
  }

  /* Primary buttons - high contrast in both modes */
  .layout-container .button--primary:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container .btn--primary:not(#toolbar-administration *):not(.ui-dialog *) {
    background-color: var(--brand-600) !important;
    color: var(--neutral-0) !important; /* Always white text */
    border: 1px solid var(--brand-700) !important;
  }

  .layout-container .button--primary:hover:not(#toolbar-administration *):not(.ui-dialog *),
  .layout-container .btn--primary:hover:not(#toolbar-administration *):not(.ui-dialog *) {
    background-color: var(--brand-700) !important;
    color: var(--neutral-0) !important; /* Always white text */
    border-color: var(--brand-800) !important;
  }

  /* Dark mode adjustments for primary buttons */
  html[data-theme="dark"] .layout-container .button--primary:not(#toolbar-administration *):not(.ui-dialog *),
  html[data-theme="dark"] .layout-container .btn--primary:not(#toolbar-administration *):not(.ui-dialog *) {
    background-color: var(--brand-500) !important;
    color: var(--neutral-950) !important; /* Dark text on bright button in dark mode */
    border-color: var(--brand-400) !important;
  }

  html[data-theme="dark"] .layout-container .button--primary:hover:not(#toolbar-administration *):not(.ui-dialog *),
  html[data-theme="dark"] .layout-container .btn--primary:hover:not(#toolbar-administration *):not(.ui-dialog *) {
    background-color: var(--brand-400) !important;
    color: var(--neutral-950) !important; /* Dark text on bright button in dark mode */
    border-color: var(--brand-300) !important;
  }

  /* ========================================
     Tables
     ======================================== */

  table {
    border-color: var(--color-border) !important;
  }

  th {
    background-color: var(--color-elevated) !important;
    color: var(--color-fg) !important;
    border-color: var(--color-border) !important;
  }

  td {
    border-color: var(--color-border) !important;
  }

  tr:hover {
    background-color: var(--color-surface) !important;
  }

  /* Striped tables */
  tbody tr:nth-child(odd) {
    background-color: var(--color-surface) !important;
  }

  tbody tr:nth-child(even) {
    background-color: var(--color-bg) !important;
  }

  /* Override striping for FullCalendar tables (higher specificity) */
  .fc tr:hover,
  .fc tbody tr:nth-child(odd),
  .fc tbody tr:nth-child(even),
  .fc thead tr {
    background-color: transparent !important;
  }

  /* ========================================
     Messages & Alerts
     ======================================== */

  .messages {
    border-radius: 4px;
    padding: 1rem;
  }

  .messages--status {
    background-color: var(--color-success-bg) !important;
    border: 1px solid var(--color-success-fg) !important;
    color: var(--color-success-fg) !important;
  }

  .messages--warning {
    background-color: var(--color-warning-bg) !important;
    border: 1px solid var(--color-warning-fg) !important;
    color: var(--color-warning-fg) !important;
  }

  .messages--error {
    background-color: var(--color-danger-bg) !important;
    border: 1px solid var(--color-danger-fg) !important;
    color: var(--color-danger-fg) !important;
  }

  .messages--info {
    background-color: var(--color-info-bg) !important;
    border: 1px solid var(--color-info-fg) !important;
    color: var(--color-info-fg) !important;
  }

  /* ========================================
     Tabs
     ======================================== */

  .tabs {
    border-bottom: 1px solid var(--color-border) !important;
  }

  .tabs__tab {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
  }

  .tabs__link {
    color: var(--color-fg-muted) !important;
  }

  .tabs__link:hover,
  .tabs__link:focus {
    color: var(--color-fg) !important;
    background-color: var(--color-elevated) !important;
  }

  .tabs__link.is-active {
    background-color: var(--color-bg) !important;
    color: var(--color-fg) !important;
    border-bottom-color: var(--color-bg) !important;
  }

  /* ========================================
     Pager
     ======================================== */

  .pager__item {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
  }

  .pager__link {
    color: var(--color-link) !important;
  }

  .pager__link:hover,
  .pager__link:focus {
    background-color: var(--color-elevated) !important;
  }

  .pager__item--active {
    background-color: var(--color-link) !important;
    border-color: var(--color-link) !important;
  }

  .pager__item--active .pager__link {
    color: var(--color-bg) !important;
  }

  /* ========================================
     Search Form
     ======================================== */

  .search-block-form {
    background-color: var(--color-surface) !important;
  }

  .search-block-form__input {
    background-color: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-fg) !important;
  }

  /* ========================================
     Views
     ======================================== */

  .views-exposed-form {

  }

  .view-filters {
    background-color: transparent !important;
  }

  .views-table {
    background-color: var(--color-bg) !important;
  }

  .views-row {
    border-color: var(--color-border) !important;
  }

  /* ========================================
     Node & Comment Styles
     ======================================== */

  .node,
  .comment {
    background-color: transparent !important;
    border: 0px solid transparent !important;
  }

  .node__meta,
  .comment__meta {
    color: var(--color-fg-muted) !important;
  }

  .node__submitted,
  .comment__submitted {
    color: var(--color-fg-subtle) !important;
  }

  /* ========================================
     Drupal Toolbar (Admin) - EXPLICITLY EXCLUDED
     ======================================== */

  /* Admin toolbar uses its own color scheme - DO NOT THEME */
  /* This section intentionally left empty */

  /* ========================================
     FullCalendar Overrides
     ======================================== */

  .fc {
    background-color: var(--color-bg) !important;
    color: var(--color-fg) !important;
  }

  .fc-theme-standard td,
  .fc-theme-standard th {
    border-color: var(--color-border) !important;
  }

  .fc-button {
    background-color: var(--brand-900) !important;
    border-color: var(--brand-500) !important;
    color: var(--color-bg) !important;
  }

  .fc-button:hover {
    background-color: var(--brand-500) !important;
  }

  .fc-button-primary:disabled {
    background-color: var(--color-fg-subtle) !important;
    border-color: var(--color-fg-subtle) !important;
  }

  .fc-day-today {
    background-color: var(--color-elevated) !important;
  }

  .fc .fc-daygrid-day-number {
    color: var(--color-fg) !important;
  }

  .fc-col-header-cell {
    background-color: var(--color-surface) !important;
  }

  .fc-event {
    border-color: var(--color-link) !important;
    background-color: var(--color-link) !important;
    color: var(--color-bg) !important;
  }

  .fc-event:hover {
    background-color: var(--color-link-hover) !important;
  }

  /* ========================================
     Field Groups & Details
     ======================================== */

  details {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
  }

  summary {
    background-color: var(--color-elevated) !important;
    color: var(--color-fg) !important;
  }

  summary:hover,
  summary:focus {
    background-color: var(--color-surface) !important;
  }

  /* ========================================
     Misc Components
     ======================================== */

  /* NOTE: Contextual links, dropbuttons, and admin-related UI elements are
     explicitly excluded from theming via the admin exclusion rules above */

  /* Tooltips - only in content area */
  .layout-container .tooltip:not(#toolbar-administration *) {
    background-color: var(--color-elevated) !important;
    color: var(--color-fg) !important;
    border: 1px solid var(--color-border) !important;
  }

  /* Progress bars - only in content area */
  .layout-container .progress:not(#toolbar-administration *) {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
  }

  .layout-container .progress__bar:not(#toolbar-administration *) {
    background-color: var(--color-link) !important;
  }

  /* ========================================
     Code & Preformatted Text
     ======================================== */

  code,
  pre {
    background-color: var(--color-elevated) !important;
    color: var(--color-fg) !important;
    border: 1px solid var(--color-border) !important;
  }

  /* ========================================
     Blockquotes
     ======================================== */

  blockquote {
    background-color: var(--color-surface) !important;
    border-left: 4px solid var(--color-link) !important;
    color: var(--color-fg-muted) !important;
  }

  /* ========================================
     Highlighted Content
     ======================================== */

  .region-highlighted {
    background-color: var(--color-info-bg) !important;
    color: var(--color-info-fg) !important;
    border: 1px solid var(--color-info-fg) !important;
  }

  /* ========================================
     Skip Link
     ======================================== */

  .skip-link {
    background-color: var(--color-link) !important;
    color: var(--color-bg) !important;
  }

  .skip-link:focus {
    background-color: var(--color-link-hover) !important;
  }


  .node__content {
    padding-bottom: 0 !important;
    padding-block-end: 0 !important;
  }
}

/* ========================================
   Calendar
   ======================================== */

/* ========================================
   Messages Placeholder for AJAX
   ======================================== */

/*
 * The sse-messages-placeholder is injected by sse_theme_preprocess_page()
 * to ensure [data-drupal-messages] always exists in the DOM for AJAX
 * message insertion (e.g., webform confirmation messages).
 *
 * Hide the placeholder visually when empty, but keep it in the DOM.
 */
.sse-messages-placeholder:empty,
.sse-messages-placeholder:not(:has(.messages)) {
  display: none;
}

/* When messages are inserted via AJAX, show the container */
.sse-messages-placeholder:has(.messages) {
  display: block;
}

/* Fallback messages container created by JS when no messages region exists */
.sse-fallback-messages:empty,
.sse-fallback-messages:not(:has(.messages)) {
  display: none;
}

.sse-fallback-messages:has(.messages) {
  display: block;
}

/* ========================================
   SAML Login Page
   ======================================== */

.comue-saml-login {
  display: flex;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.comue-saml-login__button {
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 28rem;
}

/* ========================================
   Link Underline Styles
   Moved to css/links.css for better organization and higher specificity
   ======================================== */

/* ========================================
   Font family consistency override
   Olivero applies --font-serif to .text-content / .cke_editable / blockquote.
   We force the sans-serif stack to stay consistent with the rest of the site.
   ======================================== */
.text-content,
.cke_editable,
.text-content blockquote {
  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}