/* INTERNAL */
.app-logo
{
  content: url("https://stkaskelotpublictest.blob.core.windows.net/branding/valg/stemmeland-logo-light-100.png");
  padding: 4px 0;
}

/* Active main-menu item underline */
.active-link {
  border-bottom-color: var(--stemmeland-red) !important;
}

/* Top line on teasers / cards (accent and primary) */
.mat-mdc-card.card_accent_header,
.mat-mdc-card.card_primary_header {
  border-top-color: var(--stemmeland-red) !important;
}

/* COLOURS */

:root {
  --stemmeland-red: #B3262E;       /* Stemmerød, brand red (logo shield) */
  --stemmeland-red-deep: #8A1C23;  /* deep Stemmerød, panel background */
  --stemmeland-on-red: #FFFFFF;
}

/* EXTERNAL */

.navbar-background
{
  background-color: var(--stemmeland-red-deep) !important;
  background-image:
    /* faint mountain silhouette along the bottom, echoing the shield */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpolygon points='0,120 0,80 90,30 130,60 190,10 260,75 300,50 400,95 400,120' fill='%23FFFFFF' fill-opacity='0.06'/%3E%3C/svg%3E"),
    /* deep red at the top, brand red at the bottom */
    linear-gradient(180deg, var(--stemmeland-red-deep) 0%, var(--stemmeland-red) 100%) !important;
  background-repeat: no-repeat !important;
  background-position: bottom center, center !important;
  background-size: 100% 28%, cover !important;
}

.logo {
  width: 100% !important;
  content: url("https://stkaskelotpublictest.blob.core.windows.net/branding/valg/stemmeland-logo-dark-600x600.png") !important;
  padding: 0 40px;
}

.navbar-background li a {
    color: var(--stemmeland-on-red);
}

.navbar-background li a.activated {
  border: 1px solid var(--stemmeland-on-red) !important;
}

/* Keyboard focus stays visible against the red */
.navbar-background li a:focus-visible {
  outline: 2px solid var(--stemmeland-on-red);
  outline-offset: 3px;
}

/* Button */

.pink-background {
  background-color: #333 !important;
}

@media (max-width: 1023px) {
  .logo {
      padding: 30px 40% !important;
  }
}