/**
 * @file
 * DSFR-inspired animated link underlines for SSE Theme.
 *
 * Strategy: Apply underline to ALL links by default, then exclude specific UI elements.
 * Uses background-image gradient technique for animated effect.
 */

/* ========================================
   CSS Custom Properties for Links
   ======================================== */
:root {
  --link-underline-thickness: 1px;
  --link-underline-thickness-hover: 2px;
  --link-transition-duration: 0.2s;
}

/* ========================================
   Global Link Styles - Apply to ALL links
   ======================================== */

/* Universal link underline - very broad selector */
.dialog-off-canvas-main-canvas a[href] {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease,
              color var(--link-transition-duration) ease !important;
}

.dialog-off-canvas-main-canvas a[href]:hover,
.dialog-off-canvas-main-canvas a[href]:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* ========================================
   Navigation Links - WITH underlines
   ======================================== */

/* Primary navigation */
.primary-nav__menu-link,
.primary-nav a[href] {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease !important;
}

.primary-nav__menu-link:hover,
.primary-nav__menu-link:focus,
.primary-nav a[href]:hover,
.primary-nav a[href]:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* Active nav item - thicker underline */
.primary-nav__menu-link--active-trail,
.primary-nav__menu-link.is-active {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* Mobile navigation links */
.mobile-nav a[href],
.header-nav a[href],
[class*="mobile-nav"] a[href] {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease !important;
}

.mobile-nav a[href]:hover,
.mobile-nav a[href]:focus,
.header-nav a[href]:hover,
.header-nav a[href]:focus,
[class*="mobile-nav"] a[href]:hover,
[class*="mobile-nav"] a[href]:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* Mobile buttons container - no underline */
.mobile-buttons {
  background-image: none !important;
  background-size: 0 !important;
}

/* Buttons INSIDE mobile-buttons - WITH underlines */
.mobile-buttons button,
.mobile-buttons a,
.mobile-buttons > button,
.mobile-buttons > a,
.mobile-nav-button,
.mobile-nav__button,
.nav-primary__button,
.nav-primary__mobile-button,
.header-nav button {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease !important;
}

.mobile-buttons button:hover,
.mobile-buttons button:focus,
.mobile-buttons a:hover,
.mobile-buttons a:focus,
.mobile-buttons > button:hover,
.mobile-buttons > button:focus,
.mobile-buttons > a:hover,
.mobile-buttons > a:focus,
.mobile-nav-button:hover,
.mobile-nav-button:focus,
.mobile-nav__button:hover,
.mobile-nav__button:focus,
.nav-primary__button:hover,
.nav-primary__button:focus,
.header-nav button:hover,
.header-nav button:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* Breadcrumbs */
.breadcrumb a[href],
.breadcrumb__link {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease !important;
}

.breadcrumb a[href]:hover,
.breadcrumb a[href]:focus,
.breadcrumb__link:hover,
.breadcrumb__link:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* Footer links */
.site-footer a[href],
.footer-menu a[href],
.footer-menu__link {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease !important;
}

.site-footer a[href]:hover,
.site-footer a[href]:focus,
.footer-menu a[href]:hover,
.footer-menu a[href]:focus,
.footer-menu__link:hover,
.footer-menu__link:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* ========================================
   Buttons - WITH underlines
   ======================================== */

/* All button variants */
.button,
.btn,
a.button,
a.btn,
a[href].button,
a[href].btn,
.button--small,
.button--primary,
.btn--primary,
.form-submit,
input[type="submit"],
button[type="submit"] {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease,
              background-color var(--link-transition-duration) ease !important;
}

.button:hover,
.button:focus,
.btn:hover,
.btn:focus,
a.button:hover,
a.button:focus,
a.btn:hover,
a.btn:focus,
a[href].button:hover,
a[href].button:focus,
a[href].btn:hover,
a[href].btn:focus,
.button--small:hover,
.button--small:focus,
.button--primary:hover,
.button--primary:focus,
.btn--primary:hover,
.btn--primary:focus,
.form-submit:hover,
.form-submit:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* Session date links - no underline on container, only on CTA */
.session-date-link,
a.session-date-link {
  background-image: none !important;
  background-size: 0 !important;
}

/* Session date CTA - WITH underline */
.session-date-link__cta,
a.session-date-link__cta {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease !important;
}

.session-date-link__cta:hover,
.session-date-link__cta:focus,
a.session-date-link__cta:hover,
a.session-date-link__cta:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* ========================================
   Tabs and Pager - WITH underlines
   ======================================== */

.tabs a[href],
.tabs__link,
.pager a[href],
.pager__link {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease !important;
}

.tabs a[href]:hover,
.tabs a[href]:focus,
.tabs__link:hover,
.tabs__link:focus,
.pager a[href]:hover,
.pager a[href]:focus,
.pager__link:hover,
.pager__link:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* Active tab */
.tabs__link.is-active {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* ========================================
   Card and Teaser Titles - WITH underlines
   ======================================== */

.node__title a[href],
.card__title a[href],
.sse-card__title a[href],
.sse-action__title a[href],
.sse-session__title a[href],
.sse-action-teaser__title a[href],
.sse-session-teaser__title a[href],
.views-field-title a[href] {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease !important;
}

.node__title a[href]:hover,
.node__title a[href]:focus,
.card__title a[href]:hover,
.card__title a[href]:focus,
.sse-card__title a[href]:hover,
.sse-card__title a[href]:focus,
.sse-action__title a[href]:hover,
.sse-action__title a[href]:focus,
.sse-session__title a[href]:hover,
.sse-session__title a[href]:focus,
.sse-action-teaser__title a[href]:hover,
.sse-action-teaser__title a[href]:focus,
.sse-session-teaser__title a[href]:hover,
.sse-session-teaser__title a[href]:focus,
.views-field-title a[href]:hover,
.views-field-title a[href]:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* ========================================
   Modal Links - WITH underlines
   ======================================== */

.sse-modal a[href],
.modal a[href],
.ui-dialog a[href]:not(.ui-dialog-titlebar-close),
.sse-location-modal-link {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease !important;
}

.sse-modal a[href]:hover,
.sse-modal a[href]:focus,
.modal a[href]:hover,
.modal a[href]:focus,
.ui-dialog a[href]:not(.ui-dialog-titlebar-close):hover,
.ui-dialog a[href]:not(.ui-dialog-titlebar-close):focus,
.sse-location-modal-link:hover,
.sse-location-modal-link:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* ========================================
   Elements WITHOUT underlines (exclusions)
   ======================================== */

/* Site branding/logo - no underline */
.site-branding a[href],
.site-branding__name a[href],
.site-branding__logo a[href] {
  background-image: none !important;
  background-size: 0 !important;
}

/* Calendar/FullCalendar events and toolbar - WITH underlines */
.fc a[href],
.fc-event,
.fc-event[href],
a.fc-event,
.fc-event a[href],
.fc-day-grid-event,
.fc-h-event,
[class*="fc-"][class*="event"],
.fullcalendar-view .fc a[href],
.fc-toolbar button,
.fc-header-toolbar button,
.fc-toolbar .fc-button,
.fc-header-toolbar .fc-button,
.fc-toolbar-chunk button,
.fc-prev-button,
.fc-next-button,
.fc-today-button,
.fc-button-primary {
  text-decoration: none !important;
  background-image: linear-gradient(0deg, currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--link-underline-thickness) !important;
  transition: background-size var(--link-transition-duration) ease !important;
}

.fc a[href]:hover,
.fc a[href]:focus,
.fc-event:hover,
.fc-event:focus,
a.fc-event:hover,
a.fc-event:focus,
.fc-toolbar button:hover,
.fc-toolbar button:focus,
.fc-header-toolbar button:hover,
.fc-header-toolbar button:focus,
.fc-toolbar .fc-button:hover,
.fc-toolbar .fc-button:focus,
.fc-prev-button:hover,
.fc-prev-button:focus,
.fc-next-button:hover,
.fc-next-button:focus,
.fc-today-button:hover,
.fc-today-button:focus,
.fc-button-primary:hover,
.fc-button-primary:focus {
  background-size: 100% var(--link-underline-thickness-hover) !important;
}

/* Admin toolbar - no underline */
#toolbar-administration a[href],
.toolbar-bar a[href],
.toolbar-tray a[href],
.toolbar a[href] {
  background-image: none !important;
  background-size: 0 !important;
}

/* Contextual links and admin dropbuttons - no underline */
.contextual-links a[href],
.dropbutton a[href],
.admin-list a[href],
.gin-layer-wrapper a[href],
[id^="edit-actions"] a[href] {
  background-image: none !important;
  background-size: 0 !important;
}

/* Dialog close button - no underline */
.ui-dialog-titlebar-close {
  background-image: none !important;
  background-size: 0 !important;
}

/* Skip link - no underline */
.skip-link {
  background-image: none !important;
  background-size: 0 !important;
}

/* Images wrapped in links - no underline */
a[href] > img,
a[href] > picture,
a[href] > figure {
  background-image: none !important;
}

/* Card cover image-links — keep the brand gradient fallback, not the link
   underline. The cover is an <a>, so the universal underline rule above paints
   a flat grey background-image over the gradient (specificity 0,2,1 + !important
   beats the non-important cover rule in sse-content.css). Restate the brand
   gradient here with higher specificity so empty thumbnails show the gradient
   fallback — matching the homepage Splide card (which paints it on a ::before
   pseudo-element and is therefore unaffected). When a real image is present the
   <img> sits on top of the cover, so this is harmless. */
.dialog-off-canvas-main-canvas a.sse-action-card__cover[href] {
  background-image: linear-gradient(135deg, var(--brand-500), var(--brand-800)) !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Action links (admin) - no underline */
.action-links a[href] {
  background-image: none !important;
  background-size: 0 !important;
}

/* ========================================
   Messages - standard underline
   ======================================== */
.messages a[href],
.messages--status a[href],
.messages--warning a[href],
.messages--error a[href] {
  text-decoration: underline !important;
  background-image: none !important;
  background-size: 0 !important;
}

.messages a[href]:hover,
.messages a[href]:focus {
  text-decoration: none !important;
}