/* Nora theme helpers */

/*
  Apply to a wrapper element (e.g. `.o-container`) when the page theme color equals `#A24D6F`.
  This sets the core CSS variables used by other Nora classes.
*/
.nora-theme--lila {
  --color-custom: #a24d6f;
  --color-primary: #a24d6f;
  /* Exact card background base color for "Lila". */
  --nora-card-theme-color: #ecdbe2;
  --nora-card-theme-hover-color: #c9bac0;
}

/*
  Apply to a wrapper element (e.g. `.o-container`) when the page theme color equals `#EA0B44`.
  Same purpose as `.nora-theme--lila`, but for the "Hallon" theme.
*/
.nora-theme--hallon {
  --color-custom: #ea0b44;
  --color-primary: #ea0b44;
  /* Exact card background base color for "Hallon". */
  --nora-card-theme-color: #fef3f6;
  --nora-card-theme-hover-color: #d8cfd1;
}

/*
  Apply to a wrapper element (e.g. `.o-container`) when the page theme color equals `#0156B8`.
*/
.nora-theme--bla {
  --color-custom: #0156b8;
  --color-primary: #0156b8;
  /* Exact card background base color for "Blå". */
  --nora-card-theme-color: #e6edf6;
  --nora-card-theme-hover-color: #cdd9e7;
}

/*
  Apply to a wrapper element (e.g. `.o-container`) when the page theme color equals `#009844`.
*/
.nora-theme--primargron {
  --color-custom: #009844;
  --color-primary: #009844;
  --nora-card-theme-color: #eef8f2;
  --nora-card-theme-hover-color: #e5f5ec;
}

/*
  Apply to a wrapper element (e.g. `.o-container`) when the page theme color equals `#986706`.
*/
.nora-theme--orange {
  --color-custom: #986706;
  --color-primary: #986706;
  --nora-card-theme-color: #fff0d2;
  --nora-card-theme-hover-color: #fdd381;
}

/*
  Apply to a wrapper element (e.g. `.o-container`) when the page theme color equals `#7D7442`.
*/
.nora-theme--gul {
  --color-custom: #7d7442;
  --color-primary: #7d7442;
  --nora-card-theme-color: #fef8d8;
  --nora-card-theme-hover-color: #fded9d;
}

/*
  Apply to a wrapper element (e.g. `.o-container`) when the page theme color equals `#6A6659`.
*/
.nora-theme--beige {
  --color-custom: #6a6659;
  --color-primary: #6a6659;
  --nora-card-theme-color: #f6f4ec;
  --nora-card-theme-hover-color: #efe9d1;
}

/*
  Apply to a wrapper element (e.g. `.o-container`) when the page theme color equals `#047F90`.
*/
.nora-theme--turkos {
  --color-custom: #047f90;
  --color-primary: #047f90;
  --nora-card-theme-color: #cde5e9;
  --nora-card-theme-hover-color: #81bfc7;
}

/*
  Applies to cards on `one-page.blade.php`.
  Uses `--nora-card-theme-color` as the exact base card color.
*/
.nora-card-theme {
  /* Card background theme colors. */
  --nora-card-bg: var(--nora-card-theme-color);
  --nora-card-hover-bg: var(
    --nora-card-theme-hover-color,
    color-mix(in srgb, var(--nora-card-theme-color) 85%, black)
  );
  background-color: var(--nora-card-bg) !important;
}
.nora-card-theme:hover {
  background-color: var(--nora-card-hover-bg) !important;
}

/*
  Page title (used by `one-page.blade.php`).
  Requires `--color-custom` to be set on an ancestor element.
*/
#page-title {
  color: var(--color-custom) !important;
}

/*
  Theme-colored child links in both supported navigation presentations.
  Their packages own the stable wrapper classes; this plugin owns Nora's
  page-theme presentation.
*/
body.nora-has-fargtema
  :is(
    .mod-navigation-buttons,
    .municipio-theme-extensions-below-title-navigation
  ) {
  --color-focus-outline: var(--color-custom);
  --nora-navigation-button-text-color: #000;
}

body.nora-has-fargtema
  :is(
    .mod-navigation-buttons,
    .municipio-theme-extensions-below-title-navigation
  )
  .c-button__filled,
body.nora-has-fargtema
  :is(
    .mod-navigation-buttons,
    .municipio-theme-extensions-below-title-navigation
  )
  .c-button__filled:visited {
  --c-button-color: var(--nora-card-theme-color);
  --c-button-secondary-color: var(--nora-card-theme-color);
  --c-button-color-contrasting: var(--nora-navigation-button-text-color);
  --c-button-secondary-color-contrasting: var(
    --nora-navigation-button-text-color
  );
  background-color: var(--nora-card-theme-color);
  color: var(--nora-navigation-button-text-color);
}

body.nora-has-fargtema
  :is(
    .mod-navigation-buttons,
    .municipio-theme-extensions-below-title-navigation
  )
  .c-button__filled:hover,
body.nora-has-fargtema
  :is(
    .mod-navigation-buttons,
    .municipio-theme-extensions-below-title-navigation
  )
  .c-button__filled:active,
body.nora-has-fargtema
  :is(
    .mod-navigation-buttons,
    .municipio-theme-extensions-below-title-navigation
  )
  .c-button__filled:visited:hover,
body.nora-has-fargtema
  :is(
    .mod-navigation-buttons,
    .municipio-theme-extensions-below-title-navigation
  )
  .c-button__filled:visited:active {
  --c-button-color: var(--nora-card-theme-hover-color);
  --c-button-secondary-color: var(--nora-card-theme-hover-color);
  background-color: var(--nora-card-theme-hover-color);
  color: var(--nora-navigation-button-text-color);
}

body.nora-has-fargtema
  :is(
    .mod-navigation-buttons,
    .municipio-theme-extensions-below-title-navigation
  )
  .c-button__filled:focus-visible,
body.nora-has-fargtema
  :is(
    .mod-navigation-buttons,
    .municipio-theme-extensions-below-title-navigation
  )
  .c-button__filled:visited:focus-visible {
  --c-button-color: var(--nora-card-theme-color);
  --c-button-secondary-color: var(--nora-card-theme-color);
  background-color: var(--nora-card-theme-color);
  color: var(--nora-navigation-button-text-color);
}

/* Keep the selected palette exact instead of adding Button's white/black overlay. */
body.nora-has-fargtema
  :is(
    .mod-navigation-buttons,
    .municipio-theme-extensions-below-title-navigation
  )
  .c-button__filled::after {
  background: transparent !important;
  opacity: 0 !important;
}

/*
  Neutral module groups: force heading color to secondary.
*/
.mx-module-group--bg-neutral h2,
.mx-module-group--bg-neutral h3,
.modularity-module-group--neutral h2,
.modularity-module-group--neutral h3 {
  color: var(--color-secondary) !important;
}

.modularity-event-index__content .c-card {
  text-align: left !important;
}

.c-datebadge .c-datebadge__daymonth,
.c-datebadge .c-datebadge__time {
  border-radius: 99% !important;
}

.c-datebadge .c-datebadge__daymonth .c-datebadge__date {
  font-size: calc(
    var(--c-datebadge-size, calc(var(--base, 8px) * 5)) * 0.6
  ) !important;
}

/*
  Module group spacing override.
  Keeps the same selector logic and breakpoints as core (`56em`, `78em`),
  but increases vertical spacing slightly.
*/
.mx-module-group:not(.mx-module-group--bg-transparent:first-child) {
  --mx-module-group-padding-top: calc(
    var(--base, 8px) * var(--o-grid-gap, 4) * 1.3
  );
}

@media (min-width: 56em) {
  .mx-module-group:not(.mx-module-group--bg-transparent:first-child) {
    --mx-module-group-padding-top: calc(
      var(--base, 8px) * var(--o-grid-gap, 4) * 1.3
    );
  }
}

@media (min-width: 78em) {
  .mx-module-group:not(.mx-module-group--bg-transparent:first-child) {
    --mx-module-group-padding-top: calc(
      var(--base, 15px) * var(--o-grid-gap, 4) * 1
    );
  }
}

.mx-module-group:not(.mx-module-group--bg-transparent:last-child) {
  --mx-module-group-padding-bottom: calc(
    var(--base, 8px) * var(--o-grid-gap, 4) * 1.3
  );
}

@media (min-width: 56em) {
  .mx-module-group:not(.mx-module-group--bg-transparent:last-child) {
    --mx-module-group-padding-bottom: calc(
      var(--base, 8px) * var(--o-grid-gap, 4) * 1.3
    );
  }
}

@media (min-width: 78em) {
  .mx-module-group:not(.mx-module-group--bg-transparent:last-child) {
    --mx-module-group-padding-bottom: calc(
      var(--base, 15px) * var(--o-grid-gap, 4) * 1
    );
  }
}

/*
  Nora owns the card presentation. The package's auto-fit grid handles narrow
  layouts, while the accepted homepage presentation caps wide desktop at three
  columns.
*/

.mod-navigation-grid--nora .mod-navigation-grid__title {
  font-size: 1.125rem;
  text-decoration: none;
}

.mod-navigation-grid--nora .mod-navigation-grid__description {
  align-self: start;
  margin-block-start: 0;
  line-height: 1.5;
}

.mod-navigation-grid--nora .mod-navigation-grid__link {
  align-content: start;
  gap: 0.5rem 1rem;
  padding: 24px;
}

.mod-navigation-grid--nora .mod-navigation-grid__link:focus {
  text-decoration: none;
}

.mod-navigation-grid--nora .mod-navigation-grid__icon {
  margin-inline-start: -0.25em;
  font-size: 40px;
  line-height: 0.85;
}

@media (min-width: 78em) {
  .mod-navigation-grid--nora-front {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}