/**
 * AKABIA brand polish on top of Gin.
 *
 * Accent color is NOT set here: Gin's own accent.js generates the
 * [data-gin-accent="custom"] custom-properties block straight from the
 * "accent_color" theme setting (see config/install/akabia_gin.settings.yml,
 * accent_color: '#1d19a9' — AKABIA's primary indigo, same as the drop in
 * the akabia.fr logo). Everything below reads that same --gin-color-primary
 * (and its -rgb/-hover/-active variants), so it re-tints automatically if
 * the accent color setting ever changes.
 */

:root {
  /* Plus Jakarta Sans stands in for Google Sans Flex (not freely
   * redistributable): a similarly geometric, rounded grotesque, self-hosted
   * via the akabia_gin/fonts library. The rest of the stack is Gin's own
   * default (--gin-font in gin/dist/css/theme/variables.css) spelled out
   * literally: referencing var(--gin-font) here would self-reference the
   * property being defined, which CSS treats as a cyclic (invalid) value
   * and silently drops the whole font-family everywhere. */
  --gin-font: "Plus Jakarta Sans", Ginter, Inter, "Helvetica Neue", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

/* Headings and interactive labels get the heavier end of the variable
 * font's weight range so the "nuance" reads as a distinct display voice,
 * not just a body-copy swap. */
h1, h2, h3,
.gin--vertical-toolbar .toolbar-menu a,
.button,
.action-link,
.local-actions__item .button {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* A soft indigo glow behind the active/hovered nav item, tinted from the
 * live accent color rather than a fixed gray, so the whole sidebar reads
 * as "on brand" and not just a single blue logo bolted onto a gray UI. */
.gin-secondary-toolbar .toolbar-button.is-active,
.toolbar-menu a.is-active,
.toolbar-menu a:hover {
  background-color: rgba(var(--gin-color-primary-rgb, 29, 25, 169), .08);
  border-radius: var(--gin-border-m, .5rem);
}

/* Primary buttons: a subtle top-to-bottom gradient between the accent and
 * its darker "active" shade (both already computed by Gin's accent.js),
 * instead of a flat fill — adds depth without introducing a new hue. */
.button--primary,
.gin-button-tabs input[type="submit"] {
  background-image: linear-gradient(
    180deg,
    var(--gin-color-primary, #1d19a9),
    var(--gin-color-primary-active, #17138a)
  );
  border-color: var(--gin-color-primary-active, #17138a);
}

.button--primary:hover {
  background-image: linear-gradient(
    180deg,
    var(--gin-color-primary-hover, #1a1698),
    var(--gin-color-primary-active, #17138a)
  );
}

/* Branded login screen: Gin Login already shows a random stock photo as an
 * <img> (set via inline styles/JS, so it can't be replaced from a
 * stylesheet — any background-image here would lose to that inline img).
 * An indigo duotone wash on top, via ::after, brands it without hiding the
 * photo entirely. */
body.gin-login .user-form-page__wallpaper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    var(--gin-color-primary, #1d19a9) 0%,
    color-mix(in srgb, var(--gin-color-primary, #1d19a9) 70%, #08063f) 100%
  );
  mix-blend-mode: multiply;
  opacity: .8;
}

/* The "AKABIA Portal" top-level toolbar link (the akabia_portal module's
 * dashboard route) has no entry in Gin's toolbar icon set, so it falls
 * back to Gin's generic placeholder glyph (sprite.svg#fallback-view) — a
 * plain outlined square with no real meaning next to the brand logo.
 *
 * Gin assigns icons via a CSS custom property, not a plain background- or
 * mask-image: ".toolbar .toolbar-bar .toolbar-icon:before" reads
 * "mask-image: var(--icon)", and each route sets --icon on a matching,
 * fully-qualified ".toolbar .toolbar-bar .toolbar-icon-<route>::before"
 * selector (gin/dist/css/components/toolbar.css). Matching that exact
 * selector shape (3 chained classes) is what it takes to win — a bare
 * ".toolbar-icon-akabia-portal-dashboard::before" is a weaker selector and
 * silently loses the cascade. Reusing Gin's own "reports" glyph (closest
 * existing match for a monitoring dashboard) keeps it visually consistent
 * with every other toolbar icon instead of introducing a one-off SVG.
 *
 * The URL is site-root-relative, not relative to this file: browsers
 * resolve a url() carried through a CSS custom property against the
 * stylesheet where the var() is actually consumed (Gin's own
 * toolbar.css), not the one where --icon was set — a path relative to
 * *this* file resolves from the wrong directory and 404s. */
.toolbar .toolbar-bar .toolbar-icon-akabia-portal-dashboard::before {
  --icon: url("/themes/contrib/gin/dist/media/sprite.svg#reports-view");
}

/* Only logo sizing lives here beyond this point: Gin/Drupal's navigation
 * templates render a custom theme logo at whatever native size the SVG
 * reports, with no built-in cap, so an oversized source file renders
 * oversized. Capped across every place Gin shows the theme logo (classic
 * toolbar, new navigation sidebar, login page) rather than guessing which
 * one applies.
 *
 * Gin itself sizes these images with rules like
 * ".toolbar .toolbar-bar .toolbar-icon-home { width: 100%; }" (classic
 * toolbar) and ".admin-toolbar__logo img { width: 40px; }" (new nav
 * sidebar) — both more specific (3-4 chained classes) than a bare
 * ".toolbar-icon-home" or ".admin-toolbar__logo img" rule here, so this
 * used to silently lose the cascade and the logo rendered at whatever
 * size Gin's own layout math produced (visibly oversized/overflowing its
 * ~34px toolbar slot). !important is the straightforward way to win a
 * fixed brand-asset size cap against Gin's own escalating specificity,
 * rather than chasing every selector variant Gin ships.
 */
.admin-toolbar__logo img,
.toolbar-logo img,
.toolbar-icon-home,
.toolbar-menu__logo img,
.user-logo,
.page-node-type-user-login-form .site-logo img,
.site-logo img {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  object-fit: contain;
}

/* Except on the login page: there the logo is Gin Login's own
 * (public://logo-akabia.png, the drop plus the "akabia" wordmark), which
 * the 28px icon cap above shrank to an unreadable speck. It reuses the
 * toolbar's ".toolbar-logo img.toolbar-icon-home" markup, so out-rank that
 * cap explicitly. */
body.gin-login .user-form-page .toolbar-logo img.toolbar-icon-home {
  width: 180px !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
}

/* Classic (horizontal) toolbar only: recenter the now-smaller logo inside
 * its fixed-height row instead of leaving it stretched/top-aligned. */
.toolbar .toolbar-bar .toolbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * "Actualités" teaser grid (see the akabia_portal module's actualites
 * view: row = rendered entity / teaser, style = grid). Targets only the
 * class names Drupal core always adds in template_preprocess_node()
 * (node--type-*, node--view-mode-*, field--name-*), not template-specific
 * markup, since the exact node/teaser template can vary by theme. Colors
 * and radii from the portal tokens (akabia_portal/tokens, loaded by the
 * shell).
 */

/* The filter bar (PortalUiHooks::alterActualitesExposedForm()), above the
 * grid. */
.view-id-actualites form.ak-filterbar {
  margin-bottom: 16px;
}

/* Views' core grid style renders ".views-row > .views-col" rows with an
 * inline "width: 20%" per column. One CSS grid instead: the row wrappers
 * step aside (display: contents) so every card is a grid item, as many
 * columns as fit, the same gutter everywhere and equal heights per line. */
.view-id-actualites .views-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin: 0;
}

.view-id-actualites .views-view-grid .views-row {
  display: contents;
}

/* Their clearfix pseudo-elements would otherwise each take a grid cell. */
.view-id-actualites .views-view-grid::before,
.view-id-actualites .views-view-grid::after,
.view-id-actualites .views-view-grid .views-row::before,
.view-id-actualites .views-view-grid .views-row::after {
  display: none;
}

/* !important: beats Views' inline "width: 20%". */
.view-id-actualites .views-view-grid .views-col {
  width: auto !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.view-id-actualites .node--type-actualite.node--view-mode-teaser {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ak-surface);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-card);
  overflow: hidden;
  box-shadow: 0 1px 2px oklch(0.2 0.03 265 / .05);
  transition: box-shadow .2s ease, transform .2s ease;
}

.view-id-actualites .node--type-actualite.node--view-mode-teaser:hover {
  box-shadow: 0 4px 12px oklch(0.2 0.03 265 / .1);
  transform: translateY(-2px);
}

.view-id-actualites .field--name-field-image {
  margin: 0;
}

.view-id-actualites .field--name-field-image img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* The title is a bare "<h2><a>...</a></h2>" here: Claro's node.html.twig
 * (the active suggestion for this teaser — confirmed via THEME DEBUG
 * output) never adds a ".node__title" class the way other core themes do,
 * so a ".node__title" rule silently matches nothing and the link rendered
 * with the browser's raw blue/underlined defaults. Targeting the actual
 * "> h2 a" it renders instead. */
.view-id-actualites .node--type-actualite.node--view-mode-teaser > h2 {
  margin: 1.1rem 1.25rem .9rem;
  font-size: 1.05rem;
  line-height: 1.35;
}

.view-id-actualites .node--type-actualite.node--view-mode-teaser > h2 a {
  color: var(--ak-ink);
  font-weight: 700;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.view-id-actualites .node--type-actualite.node--view-mode-teaser > h2 a:hover {
  color: var(--ak-accent);
  text-decoration: underline;
}

/* "Submitted by Anonyme (non vérifié) on ..." is meaningless noise for
 * auto-imported news items — turned off at the content-type level
 * (node.type.actualite: display_submitted: false) rather than hidden here,
 * so it disappears from the full node page too, not just this view. This
 * rule is just a safety net in case that setting ever gets flipped back. */
.view-id-actualites .node--type-actualite.node--view-mode-teaser .node__meta {
  display: none;
}

/* node__content holds every field and the links: a column filling the
 * card, so "En savoir plus" (margin-top: auto below) sits at the bottom
 * of every card of a line. The image stays full-bleed; the other children
 * get the card's side margin. */
.view-id-actualites .node--type-actualite.node--view-mode-teaser .node__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.view-id-actualites .node--type-actualite.node--view-mode-teaser .node__content > :not(.field--name-field-image) {
  margin-right: 1.25rem;
  margin-left: 1.25rem;
}

/* Category pills: shrink-wrapped, same side margin and spacing. */
.view-id-actualites .field--name-field-categorie,
.view-id-actualites .field--name-field-sous-categorie {
  align-self: flex-start;
  max-width: calc(100% - 2.5rem);
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .65rem;
  border-radius: var(--ak-radius-pill);
  background: var(--ak-accent-soft);
  color: var(--ak-accent);
  margin-top: .6rem;
}

.view-id-actualites .field--name-field-categorie {
  margin-top: .9rem;
}

.view-id-actualites .field--name-field-date-publication {
  font-size: .8rem;
  color: var(--ak-muted);
  margin-top: .6rem;
}

/* The excerpt capped at five lines: cards of a line stay comparable. */
.view-id-actualites .field--name-body {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ak-text-2);
  margin-top: .6rem;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The link field has no separate title (auto-imported, URI only), so the
 * formatter falls back to printing the raw trimmed URL — shown here as a
 * compact, muted "source" chip instead of a long raw blue hyperlink. */
.view-id-actualites .field--name-field-source-url {
  margin-top: .85rem;
  overflow: hidden;
}

.view-id-actualites .field--name-field-source-url a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ak-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-id-actualites .field--name-field-source-url a::before {
  content: '↗';
  flex-shrink: 0;
}

.view-id-actualites .field--name-field-source-url a:hover {
  color: var(--ak-accent);
  text-decoration: underline;
}

/* "En savoir plus": Claro's default plain text link, restyled as the
 * card's call to action, pinned to the bottom of the card. */
.view-id-actualites .node--type-actualite.node--view-mode-teaser .node__links {
  margin-top: auto;
  margin-bottom: 1.25rem;
  padding-top: .75rem;
  border-top: 1px solid var(--ak-border);
}

/* Breathing room between the last field and the pinned footer. */
.view-id-actualites .node--type-actualite.node--view-mode-teaser .node__content > :has(+ .node__links) {
  margin-bottom: 1rem;
}

.view-id-actualites .node--type-actualite.node--view-mode-teaser .node__links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.view-id-actualites .node-readmore a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ak-accent);
  text-decoration: none;
}

.view-id-actualites .node-readmore a::after {
  content: '→';
  transition: transform .15s ease;
}

.view-id-actualites .node-readmore a:hover {
  text-decoration: underline;
}

.view-id-actualites .node-readmore a:hover::after {
  transform: translateX(3px);
}