/**
 * @file
 * Blocks, nodes, comments, forum, menus, pager, forms.
 */


/* -- Menus & Action Links ------------------------------------------------- */

.primary-menu {
  position: relative;
  background: color-mix(in srgb, var(--header-bg) 82%, #000);
}

.primary-menu__list,
.page-header ul.menu,
.page-header .block-system-menu-block ul.menu,
.primary-menu ul.menu,
.primary-menu ul:not(.contextual-links) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-s);
  margin: 0;
  padding: 0 var(--gutter, var(--space-m));
  list-style: none;
}

.primary-menu li,
.page-header ul.menu li,
.page-header .block-system-menu-block li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-menu a:not(.contextual *),
.page-header ul.menu a:not(.contextual *),
.page-header .block-system-menu-block a:not(.contextual *) {
  display: inline-block;
  padding: var(--space-2xs) var(--space-xs);
  color: color-mix(in srgb, var(--header-text) 90%, #000);
  text-decoration: none;
}

.primary-menu a:not(.contextual *):hover,
.primary-menu a:not(.contextual *):focus-visible,
.primary-menu a:not(.contextual *).is-active,
.page-header ul.menu a:not(.contextual *):hover,
.page-header ul.menu a:not(.contextual *):focus-visible,
.page-header ul.menu a:not(.contextual *).is-active {
  background: color-mix(in srgb, var(--header-text) 15%, transparent);
}

.primary-menu__toggle {
  display: none;
}

@media (max-width: 47.99rem) {
  .primary-menu__toggle {
    display: block;
    inline-size: 100%;
    padding: var(--space-2xs) var(--gutter, var(--space-m));
    border: 0;
    background: none;
    color: var(--header-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .primary-menu__list,
  .page-header ul.menu,
  .primary-menu ul:not(.contextual-links) {
    display: none;
    flex-direction: column;
    padding-block-end: var(--space-2xs);
  }

  .primary-menu[data-open="true"] .primary-menu__list,
  .primary-menu[data-open="true"] ul:not(.contextual-links) {
    display: flex;
  }
}

/* Ensure contextual module dropdowns work natively in Drupal 11 */
.contextual-links {
  display: none !important;
}

.contextual-region.focus .contextual-links,
.contextual-region:hover .contextual-links,
.contextual-open .contextual-links {
  display: block !important;
}

.contextual-links ul,
.contextual-links li {
  display: block !important;
  list-style: none !important;
}

/* Action Links (e.g. Add Content, Edit, etc.) */
.action-links,
ul.action-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  margin: var(--space-s) 0;
  padding: 0;
  list-style: none;
}

.action-links li,
ul.action-links li {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.action-links a,
ul.action-links a {
  display: inline-block;
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.action-links a:hover,
.action-links a:focus-visible,
ul.action-links a:hover,
ul.action-links a:focus-visible {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

/* Anything inside a coloured bar takes the bar's own foreground; headings and
   meta text carry their own colour tokens and would otherwise sit at 1.3:1
   against the accent in dark mode and 3.4:1 in light. */
.node__header,
.comment__header,
.page-header,
.page-footer {
  --heading-color: currentColor;
}

/* Article styles apply to both nodes and other content such as comments */

article :is(h1, h2, h3, h4, h5, h6) {
  color: var(--accent);
}

article a {
  border-radius: var(--radius);
  padding: var(--space-3xs);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.node__header :is(h1, h2, h3, h4, h5, h6),
.comment__header :is(h1, h2, h3, h4, h5, h6),
.page-header :is(h1, h2, h3, h4, h5, h6),
.page-footer :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

.node__header .node__meta,
.comment__header .comment__meta {
  color: color-mix(in srgb, currentColor 90%, transparent);
}

/* -- Blocks --------------------------------------------------------------- */

.page-sidebar .block {
  margin-block-end: var(--space-m);
  padding: var(--space-s);
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-l);
}

.page-sidebar .block__title {
  margin-block: 0 var(--space-2xs);
  padding-block-end: var(--space-3xs);
  border-block-end: 2px solid var(--sidebar-heading);
  color: var(--sidebar-heading);
  font-size: var(--step-1);
}

.page-sidebar .block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-sidebar .block li + li {
  margin-block-start: var(--space-3xs);
  padding-block-start: var(--space-3xs);
  border-block-start: 1px solid var(--sidebar-border);
}

/* -- Nodes ---------------------------------------------------------------- */

.node {
  margin-block-end: var(--space-l);
  /*border: 1px solid var(--border);*/
  border-radius: var(--radius-l);
  background: var(--surface-raised);
  overflow: hidden;
}

.node__header {
  padding: var(--space-xs) var(--space-s);
  background: var(--accent);
  color: var(--accent-contrast);
}

.node__header a {
  color: currentColor;
}

.node__title {
  margin: 0;
  font-size: var(--step-2);
}

.node__meta {
  color: color-mix(in srgb, var(--accent-contrast) 80%, transparent);
  font-size: var(--step--1);
}

.node__content {
  padding: var(--space-s) 0;
}

.node__content::after {
  content: "";
  display: block;
  clear: both;
}

.node__footer,
.node__footer a {
  padding: var(--space-2xs) var(--space-s);
  border-block-start: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--step--1);
}

.node__footer ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0;
  list-style: none;
  color: var(--text-muted);
}

.node__footer li {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--space-s);
  padding: 0;
  list-style: none;
}

.node .field--name-field-tags,
.node .field--type-entity-reference {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  align-items: baseline;
}

.node .field--type-entity-reference a {
  padding: 0.1em 0.5em;
  border: 1px solid var(--border);
  border-radius: 999px;
  /* The node footer is already the sunken surface, so the pills need the
     raised one to read as pills at all. */
  background: var(--surface-raised);
  color: var(--link);
  text-decoration: none;
  font-size: var(--step--1);
}

/* -- Teaser grid ---------------------------------------------------------- */

.teaser-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

/* -- Footer --------------------------------------------------------------- */

.page-footer .block {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.page-footer .block__title {
  margin-block: 0 var(--space-2xs);
  padding-block-end: var(--space-3xs);
  border-block-end: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-size: var(--step-1);
}

.page-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-footer li + li {
  margin-block-start: var(--space-3xs);
}

/* -- Comments ------------------------------------------------------------- */

.comment {
  margin-block-end: var(--space-m);
  /* border: 1px solid var(--border);*/
  border-radius: var(--radius-l);
  background: var(--surface-raised);
  overflow: hidden;
  border-bottom: 3px solid var(--accent-contrast)!important;
}

.comment__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-2xs) var(--space-s);
  background: var(--accent);
  color: var(--accent-contrast);
}

.comment__header a {
  color: currentColor;
}

.comment__title {
  margin: 0;
  font-size: var(--step-0);
}

.comment__content {
  padding: var(--space-s) 0;
}

.comment .indented {
  margin-inline-start: var(--space-m);
  border-inline-start: 2px solid var(--border);
  padding-inline-start: var(--space-s);
}

/* Comments are closed everywhere after the migration; make that legible
   rather than silently omitting the form. */
.comments-closed {
  padding: var(--space-2xs) var(--space-s);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* -- Forum ---------------------------------------------------------------- */

.forum-table {
  font-size: var(--step--1);
}

.forum-table .forum__title {
  font-size: var(--step-0);
  font-weight: 700;
}

@media (max-width: 47.99rem) {
  .forum-table,
  .forum-table tbody,
  .forum-table tr,
  .forum-table td {
    display: block;
    inline-size: 100%;
  }

  .forum-table thead {
    display: none;
  }

  .forum-table tr {
    margin-block-end: var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .forum-table td {
    border: 0;
  }
}

/* -- Pager ---------------------------------------------------------------- */

.pager__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  justify-content: center;
  margin: var(--space-m) 0;
  padding: 0;
  list-style: none;
}

.pager__item a {
  display: block;
  padding: var(--space-3xs) var(--space-2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
}

.pager__item.is-active {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-contrast);
}

/* -- Forms ---------------------------------------------------------------- */

input,
select,
textarea {
  max-inline-size: 100%;
  padding: var(--space-3xs) var(--space-2xs);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  font: inherit;
}

.button,
button,
input[type="submit"] {
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-contrast);
  font: inherit;
  cursor: pointer;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--text-strong);
}

/* -- Breadcrumb, tabs, messages ------------------------------------------- */

.breadcrumb ol,
.breadcrumb ul,
nav.breadcrumb ol,
nav.breadcrumb ul,
.block-system-breadcrumb-block ol,
.block-system-breadcrumb-block ul,
[class*="breadcrumb"] ol,
[class*="breadcrumb"] ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  margin: 0 0 var(--space-s);
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.breadcrumb li,
nav.breadcrumb li,
.block-system-breadcrumb-block li,
[class*="breadcrumb"] li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before,
nav.breadcrumb li + li::before,
.block-system-breadcrumb-block li + li::before,
[class*="breadcrumb"] li + li::before {
  content: "/";
  margin-inline: var(--space-3xs);
}


/* -- Tabs & Local Tasks ---------------------------------------------------- */

.tabs,
nav.tabs,
.block--local-tasks-block,
[class*="local-tasks"] {
  margin-block-end: var(--space-s);
}


.tabs ul,
nav.tabs ul,
.block--local-tasks-block > ul,
[class*="local-tasks"] > ul,
ul.tabs,
ul.primary,
ul.secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3xs);
  margin: 0 0 var(--space-s) 0;
  padding: 0;
  border-block-end: 2px solid var(--border);
  list-style: none;
}

.tabs li,
nav.tabs li,
.block--local-tasks-block > ul > li,
[class*="local-tasks"] > ul > li,
ul.tabs li,
ul.primary li,
ul.secondary li {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}


.tabs a,
nav.tabs a,
.block--local-tasks-block > ul > li > a,
[class*="local-tasks"] > ul > li > a,
ul.tabs a,
ul.primary a,
ul.secondary a {
  display: block;
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--border);
  border-block-end: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-raised);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step--1);
  transition: background-color 0.15s ease, color 0.15s ease;
}



.tabs a:hover,
.tabs a:focus-visible,
nav.tabs a:hover,
nav.tabs a:focus-visible,
.block--local-tasks-block > ul > li > a:hover,
.block--local-tasks-block > ul > li > a:focus-visible,
[class*="local-tasks"] > ul > li > a:hover,
[class*="local-tasks"] > ul > li > a:focus-visible,
ul.tabs a:hover,
ul.tabs a:focus-visible,
ul.primary a:hover,
ul.primary a:focus-visible {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--accent);
}

.tabs .is-active a,
nav.tabs .is-active a,
.block--local-tasks-block .is-active,
.block--local-tasks-block a.is-active,
[class*="local-tasks"] .is-active,
[class*="local-tasks"] a.is-active,
ul.tabs .is-active a,
ul.primary .is-active a,
ul.secondary .is-active a {
  background: var(--surface);
  color: var(--text-strong);
  border-color: var(--border);
  border-bottom: 2px solid var(--surface);
  margin-bottom: -2px;
  font-weight: 700;
}