/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */


html {
  font-size: 16px;
}

:root {
  /* Colours */
  --brand-primary: #244742;
  --brand-secondary: #d66d4d;
  --brand-accent: #fcc04e;
  --color-bg: #f6f4e7;
  --constant-bg: #f6f4e7;
  --color-text: #0b0c0c;
  --color-text-inverse: #ffffff;
  --color-border: #b1b4b6;
  --color-focus: #ffdd00;
  --hero-title: #244742;
  --hero-bg: #f6f4e7;

  /* Fonts */
  --font-heading: "Nunito", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;

  /* Typography scale */
  --font-size-h1: 4rem;
  --font-size-h2: 3rem;
  --font-size-h3: 2.5rem;
  --font-size-h4: 2.25rem;
  --font-size-h5: 1.75rem;
  --font-size-h6: 1.5rem;
  --font-size-body: 1rem;
  --font-size-lead: 1.3rem;

  --line-height-body: 1.6;
  --line-height-heading: 1.2;
}

/* =========================================================
   2. BRAND OVERRIDES
   ========================================================= */

[data-brand="energy-at-home"] {
  --color-bg: #244742;
  --color-text: #0b0c0c;
  --brand-primary: #d66d4d;
  --brand-secondary: #FCC04E;
  --hero-title: #FFFFFF;
  --hero-bg: #244742;
  --auto-quote-color: #244742;
  --auto-quote-text: #99C954;
  --brand-landing-primary: #FCC04E;
}

[data-brand="energy-in-your-community"] {
  --color-bg: #00697d;
  --color-text: #0b0c0c;
  --brand-primary: #00697d;
  --brand-secondary: #d66d4d;
  --hero-title: #FFFFFF;
  --hero-bg: #00697D;
  --auto-quote-color: #BF2359;
  --auto-quote-text: #FFFFFF;
  --brand-landing-primary: #C4E5E0;
}

/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

h1 { font-size: var(--font-size-h1); margin-bottom: 1rem;}
h2 { font-size: var(--font-size-h2); margin-bottom: 1rem;}
h3 { font-size: var(--font-size-h3); margin-bottom: 1rem;}
h4 { font-size: var(--font-size-h4); margin-bottom: 1rem;}
h5 { font-size: var(--font-size-h5); margin-bottom: 0.5rem;}
h6 { font-size: var(--font-size-h6); margin-bottom: 0.75rem;}

.lead {
  font-size: var(--font-size-lead);
  max-width: 60ch;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 4px solid #d66d4d;
}

.lead:has(+ .lead) {
  border-bottom: 0;
}

.content {
  max-width: 65ch;
}

li {
  font-size: var(--font-size-body);
  
}
ul li::marker {
  color: #A06903 /*var(--brand-secondary)*/;
}

/* =========================================================
   4. ACCORDION
   ========================================================= 

.accordion {
  border-bottom: 1px solid var(--color-border);
}

.accordion__header {
  width: 100%;
  background: none;
  border: none;
  padding: 1rem 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.accordion__icon::after {
  content: "▼";
  transition: transform 0.2s;
}

.accordion.is-open .accordion__icon::after {
  transform: rotate(180deg);
}

.accordion__panel[hidden]{
  display: none;
  padding-bottom: 1rem;
}

.accordion.is-open .accordion__panel {
  display: block;
}
*/

/* ==========================================================
   NEW ACCORDION
   ========================================================== */

.accordion-group {
  display: flex;
  flex-direction: column;
  /*gap: 1rem;*/
}

.accordion {
  background: var(--color-surface-alt, #e9e7dd);
}
.accordion:not(:last-child) {
  border-bottom: solid 1px rgb(128, 128, 128);
}


.accordion__header {
  width: 100%;
  border: 0;
  background: transparent;
  /*padding: /*1rem*//* 0 1.5rem;*/

  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: pointer;
  text-align: left;

  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  /*font-weight: 700;*/
  color: var(--color-text);
}
.accordion > p:nth-child(1) {
  margin: 0;
}

.accordion__title {
  flex: 1;
  color:var(--color-text);
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
}

.accordion.is-open .accordion__header {
  background: var(--color-primary, #f7c725);
  font-weight: 700;
}

.accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: 1rem;

  width: 1rem;
  height: 1rem;

  transition: transform .2s ease;
}

.accordion__icon::before {
  content: "›";
  font-size: 1.25rem;
  line-height: 1;
}

.accordion.is-open .accordion__icon {
  transform: rotate(90deg);
}

/* NEW */ 
.accordion__panel {
  background: #fff;

  height: 0;
  overflow: hidden;

  opacity: 0;
  transform: translateY(-10px);

  transition:
    height .4s cubic-bezier(.4, 0, .2, 1),
    opacity .25s ease,
    transform .25s ease;
}

.accordion.is-open .accordion__panel {
  opacity: 1;
  transform: translateY(0);
}
/* NEW END */


.accordion__content {
  padding: 1.5rem;
}

.accordion__content > *:first-child {
  margin-top: 0;
}

.accordion__content > *:last-child {
  margin-bottom: 0;
}
.accordion:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: hidden; /* Keeps child backgrounds from overlapping the curve */
}
.accordion:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden; /* Keeps child backgrounds from overlapping the curve */
}

/* =========================================================
   5. CARDS
   ========================================================= */

.card {
  padding: 1.5rem;
  border-radius: 8px;
}

/* Link cards */
.card--link {
  background: #f6f4e7;
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.card--link:hover {
  transform: translateY(-2px);
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
}

.card__arrow {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.card__meta {
  font-size: 0.875rem;
}

.card--quote {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

/* .card--quote::after {
  content: "";
  position: absolute;

  width: 280px;
  height: 280px;

  bottom: -100px;
  right: -80px;

  background-image: url('../assets/images/CEN-circle-mark-RGB-DIGITAL.svg');
  background-repeat: no-repeat;
  background-size: contain;

  opacity: 0.12;

  pointer-events: none;
  z-index: 1;
}*/




.quote--green {
  --watermark-colour: #d7ece7;
}

.quote--orange {
  --watermark-colour: #9c5a00;
}

.quote--pink {
  --watermark-colour: #f48ab4;
}


.card--quote::after {
  content: "";
  background-color: var(--watermark-colour);

  -webkit-mask: url('../assets/images/CEN-circle-mark-RGB-DIGITAL.svg') no-repeat center;
  -webkit-mask-size: contain;

  mask: url('../assets/images/CEN-circle-mark-RGB-DIGITAL.svg') no-repeat center;
  mask-size: contain;

  opacity: .12;
  
  content: "";
  position: absolute;

  width: 300px;
  height: 300px;

  bottom: -140px;
  right: 85px;

}


.card--quote > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   6. GRID
   ========================================================= */

.grid {
  display: grid;
  gap: 1rem;
}

.grid--cards {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grid--cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   7. FOCUS (ACCESSIBILITY)
   ========================================================= */

:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* =========================================================
   8. BUTTONS
   ========================================================= */



.btn {
  text-decoration: none;
  background: var(--hero-bg);
  padding: 0.5rem;
  color: var(--hero-title);
  border-radius: 8px;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25;
  display: inline-block;
}
main.community-energy-network .btn {
 background: #244742;
 color: #FFFFFF;
}
main.community-energy-network .btn-l {
    background: #f7c725;
    font-size: 1.25rem;
    line-height: 1.11111;
    color: var(--color-text);
}

@media (max-width: 600px) {
  .btn {
    /*font-size: 19px;*/
    font-size: 1rem;
    line-height: 1.31579;
    
  }
}

.btn-l {
  background: #f7c725;
  font-size: 1.25rem;
  line-height: 1.11111;
  color: var(--color-text);
}

@media (max-width: 600px) {
  .btn-l {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.25;
  }
}

/* =========================================================
   8b. FILTERS
   ========================================================= */

.cen-filter {
  text-decoration: none;
  background: /*var(--hero-bg)*/;
  padding: 0.5rem;
  color: /*var(--hero-title)*/ black;
  border-radius: 8px;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25;
  display: inline-block;
}
#edit-submit-blog, #edit-reset-blog {
  text-decoration: none;
  /*background: var(--hero-bg);*/
  padding: 0.5rem;
  /*color: var(--hero-title);*/
  border-radius: 8px;
  font-weight: 400;
  /*font-size: 1rem;*/
  /*line-height: 1.25;*/
  display: inline-block;
  background: #f7c725;
  font-size: 1.25rem;
  line-height: 1.11111;
  color: var(--color-text);
}
#edit-submit-blog:hover {
  cursor: pointer;
}


/* =========================================================
   9. EDIT LINKS
   ========================================================= */


#block-cen-tabs > ul > li, #block-cen-localgov-tabs-base > ul > li {
  display: inline-block;
  margin-top: 1rem;
  background: white;
  padding: 0.5rem;
}


.aside {
  border-top: none;
  /*margin: 2rem 0;*/
  background: #FFF;
  border-radius: 1rem;
  padding: 2rem;
}

/* =========================================================
   10. PAGE ELEMENTS
   ========================================================= */
.hero-banner {
  margin-bottom:4rem;
}   
.cen-hero-img img {
  width: 100%;
  height: auto;
}
.cen-read-time {
  float: right;
  clear: both;
}
.content-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

/* Content type */
.tag--type {
  background: #006b3f; /* CEN green */
  color: #fff;
}

/* Topics 
.tag--topic {
  background: #fff;
  border: 2px solid #006b3f;
  color: #006b3f;
}*/
.cen-topic-item > div > div {
  display: inline;
  background: #fff;
  border: 2px solid #006b3f;
  color: #006b3f;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}

/* =========================================================
   11. VIEW GRID ELEMENTS
   ========================================================= */

/*.cen-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cen-grid .cen-grid-top {
  width: 100%;
}

.cen-grid > .views-element-container {
  grid-column: 1 / -1;
}
.cen-grid-top > .view-content,
.cen-grid-top .views-row,
.cen-grid-top > div {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 2rem;
  align-items: center;
}

.cen-grid-top .featured-image img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 0.5rem;
}

.cen-grid-top .featured-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cen-grid-top .featured-content {
  font-size: 1.75rem;
  font-weight: 700;
}

.cen-grid-top .featured-content p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

@media (max-width: 768px) {
  .cen-grid-top > .view-content,
  .cen-grid-top .views-row,
  .cen-grid-top > div {
    grid-template-columns: 1fr;
  }
}*/

/* =====================================================
   MAIN BLOG GRID
   ===================================================== */

.cen-grid-3, .cen-section-grid-3 > div, .cen-grid-3-only {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.cen-grid-4, .cen-section-grid-4 > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.cen-grid.events-view.cen-grid-4.no-top-margin {
  margin-top: 0;
}
.cen-grid h3 {
  font-size: 1.3rem;
}
/* Header */
.cen-grid > header {
  grid-column: 1 / -1;
}

/* Exposed filter form */
.cen-grid > form.views-exposed-form {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}
.cen-grid > form.views-exposed-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }

.cen-grid .form-actions { display: flex; gap: 1rem; align-items: flex-end; }

.cen-grid .form-actions .form-group { margin-bottom: 0; }
.cen-grid .govuk-form-group {
  margin-bottom: 0;
}

@media (min-width: 40.0625em) {
  #views-exposed-form-blog-page-1 .govuk-form-group {
    margin-bottom: 0;
  }
}

/* Featured story */
.cen-grid > .views-element-container {
  grid-column: 1 / -1;
}

/* Featured story spans all columns */

.cen-grid > .views-element-container {
  grid-column: 1 / -1;
}


/* =====================================================
   FEATURED STORY
   ===================================================== */

.cen-grid-top .featured-post-link.gold {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 2rem;
  align-items: /*center*/ flex-start;
  background: #FCC04E /*#fff*/;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
  text-decoration: none;
  color: inherit;
}
.cen-grid-top .featured-post-link.grey {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 2rem;
  align-items: /*center*/ flex-start;
  background: #C4E5E0;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
  text-decoration: none;
  color: inherit;
}
.cen-grid-top .featured-post-link.green {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 2rem;
  align-items: /*center*/ flex-start;
  background: #99C954;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
  text-decoration: none;
  color: 244742;
}

.featured-post-link {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 2rem;

  color: inherit;
  text-decoration: none;
}

.latest-post-link {


  color: inherit;
  text-decoration: none;
}

.featured-post-link:hover, .latest-post-link:hover {
  text-decoration: none;
}

.featured-post-link:hover img, .latest-post-link:hover img {
  transform: scale(1.02);
}

.featured-post-link h3, .latest-post-link h3 {
  font-size: 1.3rem;
  margin: 1rem 1rem 0 0;
  }
  
	

/* Featured image */

.featured-image img {
  width: 100%;
  height: 100%;
  min-height: 350px;

  display: block;
  object-fit: cover;

  border-radius: 0.75rem;
}

/* Featured text */

.featured-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.featured-content h2,
.featured-content .title {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.15;
}

.featured-content p {
  margin: 0;
  line-height: 1.7;
  font-size: 1.125rem;
}


/* =====================================================
   GRID CARDS
   ===================================================== */

.cen-grid-item {
  position: relative;

  display: flex;
  flex-direction: column;

  background: #ffffff;

  border-radius: 1rem;

  overflow: hidden;

  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}
/*.cen-section-grid-item {
  position: relative;
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
  transition: transform .2s ease, box-shadow .2s ease;
}*/

.cen-section-grid-3 > div > div {
  position: relative;
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}

.cen-grid-item:hover, .cen-section-grid-item:hover {
  transform: translateY(-4px);

  box-shadow: 0 6px 20px rgb(0 0 0 / 15%);
}


/* =====================================================
   CARD IMAGES
   ===================================================== */

.cen-grid-thumb img {
  width: 100%;
  display: block;
  float: none;
  clear: both;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.cen-section-grid-thumb img {
  width: 100%;
  display: block;
  float: none;
  clear: both;
  aspect-ratio: revert;
  object-fit: contain;
  height: auto;
}


/* =====================================================
   CARD CONTENT
   ===================================================== */

/* You may need to adjust selectors depending on
   how your fields render */

.cen-grid-item .views-field-title,
.cen-grid-item .views-field-body,
.cen-grid-item .views-field-field-summary {
  padding-inline: 1rem;
}

.cen-grid-item .views-field-title {
  padding-top: 1rem;
}

/*.cen-grid-item p {
  margin: 1rem;
  line-height: 1.6;
}*/


/* =====================================================
   WHOLE CARD CLICKABLE
   ===================================================== */

/*
Assumes the title field is linked
(Link this field to content in Views)
*/

.cen-grid-item {
  position: relative;
  z-index: 99;
}
.cen-grid-item-gold {
  background: #FCC04E;
  z-index: 99;
}
.cen-grid-item-grey {
  background: #C4E5E0;
  z-index: 99;
}
.cen-grid-item-green {
  background: #244742;
  color: #99C954;
}
.cen-grid-item-blue {
  background: #00697d;
  color: #FFFFFF;
}

.cen-grid-item a::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;
}


/* Keep actual link text selectable */

.cen-grid-item a {
  position: relative;
  z-index: 2;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1024px) {

  .cen-grid-3, .cen-grid-4,  .cen-section-grid-3 > div,  .cen-section-grid-4 > div
   {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cen-grid-3-only {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .featured-post-link {
    grid-template-columns: 1fr;
  }

  .featured-image img {
    min-height: 300px;
  }
}

@media (max-width: 768px) {

  .cen-grid-3, .cen-grid-4,  .cen-section-grid-3 > div,  .cen-section-grid-4 > div, .cen-grid-3-only {
    grid-template-columns: 1fr;
  }

  .cen-grid-top .featured-post-link, .cen-grid-top .featured-post-link.gold {
    grid-template-columns: 1fr;
  }

  .featured-image img {
    min-height: 250px;
  }
}

/* =====================================================
   BLOG PAGE
   ===================================================== */

.blog-meta div {
  display: inline;
  padding-bottom: 1rem;
  clear: both;
}
.blog-meta {
  margin: 1rem 0;
}
.cen-card-icon-home-trans {
  width: 4rem;
}
.cen-card-icon-arrow-trans {
  width: 4rem;
  float: right;
}
.featured-image {
  display: contents;
}
.cen-topic-view > ul {
    padding-inline-start: 0;
    margin: 0;
}
.cen-topic-view > ul > li {
  display: inline-block;
  /*background: #006b3f;*/
  border: 2px solid #006b3f;
  color: #006b3f;
  border-radius: 999px;
  padding: 0.035rem 0.8rem;
  margin-inline: 0.125rem;
  margin-bottom: 0.5rem;
}
.cen-grid-item-green .cen-topic-view > ul > li {
  border: 2px solid #99C954;
  color: #99C954; 
}
.cen-grid-item-blue .cen-topic-view > ul > li {
  border: 2px solid #FFFFFF;
  color: #FFFFFF; 
}
/*.featured-content > .cen-topic-view > ul > li {
  border: 2px solid #000000;
  color: #000000;
}*/
.normal-post .featured-content {
  margin: 1rem;
}
.cen-hero-img img {
  border-radius: 0.75rem;
  margin-top: 1rem;
}
/* =====================================================
   EVENTS LISTING PAGE OVERRIDE
   ===================================================== */

.event-meta {
  border-bottom: 1px solid;
  line-height: 1 !important;
}

/* =====================================================
   SECTION PAGE  
   ===================================================== */

.cen-section-page-body {
  margin: 2rem 0;
  background: #FFF;
  border-radius: 1rem;
  padding: 2rem;
}

/* =====================================================
   RHS ASIDE  
   ===================================================== */
.cen-sideblock h2 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px;
}
.cen-sideblock-links li {
  list-style: none;
}
.cen-sideblock-links ul {
  padding-left: 0;
}
/* =====================================================
   HEADER MENUS  
   ===================================================== */
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.brand-links {
  margin-bottom: 1rem;
}

.header-navigation ul {
  /*display: flex;*/
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.brand-links.core, .brand-links.core a, .header-navigation.core, .header-navigation.core a, .brand-links.community-energy-network, .brand-links.community-energy-network a {
  color: #000000;
  }
.brand-links.energy-at-home, .brand-links.energy-in-your-community {
  color: #FFF;
}
/* DROP DOWN STYLES */
/* =====================================================
   TOP LEVEL MENU
   ===================================================== */

.header-menu {
    display: flex;
    align-items: /*center*/ baseline;
    gap: 2rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

/* =====================================================
   TOP LEVEL MENU ITEMS
   ===================================================== */

.header-menu__item, .side-menu__item {
    position: relative;
    list-style: none;
}
.header-navigation.community-energy-network a {
    color: #000000;
}
.header-menu__item > a {
    display: flex;
    align-items: center;

    text-decoration: none;
    font-weight: 600;

    padding: 0.5rem 0;
}

/* =====================================================
   ARROW FOR ITEMS WITH CHILDREN
   ===================================================== */

.header-menu__item--expanded > a::after {
    content: "";

    width: 0;
    height: 0;

    margin-left: 0.5rem;

    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid currentColor;

    transition: transform 0.2s ease;
}

/* Rotate arrow when open */

.header-menu__item--expanded:hover > a::after,
.header-menu__item--expanded:focus-within > a::after {
    transform: rotate(180deg);
}

/* =====================================================
   SUBMENU
   ===================================================== */
.header-submenu {
    display: none;

    position: absolute;
    top: calc(100%);
    left: 0;
    /*width: max-content;*/
    width: 350px;
    min-width: 280px;
    margin: 0;
    padding: 1rem;
    list-style: none;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    border-radius: 0.5rem;
    z-index: 9999;
}
.header-submenu a {
white-space: normal;
word-break: break-word;
}
/* =====================================================
   SHOW SUBMENU
   ===================================================== */

.header-menu__item:hover > .header-submenu,
.header-menu__item:focus-within > .header-submenu {
    display: block;
}

/* =====================================================
   SUBMENU ITEMS
   ===================================================== */

.header-submenu .header-menu__item {
    margin-bottom: 0.5rem;
}

.header-submenu .header-menu__item:last-child {
    margin-bottom: 0;
}

.header-submenu a {
    display: block;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 4px;
    color: #000000;
}

/* =====================================================
   HOVER STATES
   ===================================================== */

.header-menu > .header-menu__item > a:hover,
.header-menu > .header-menu__item > a:focus {
    text-decoration: underline;
}

.header-submenu a:hover,
.header-submenu a:focus {
    background: #f3f2f1;
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */

.header-menu a:focus {
    outline: 3px solid #ffdd00;
    outline-offset: 2px;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 1024px) {

    .header-menu {
        flex-direction: /*column*/ row;
        align-items: flex-start;
    }

    /*.header-submenu {
        position: static;

        display: none;

        min-width: auto;

        padding-left: 1rem;

        box-shadow: none;

        background: transparent;
    } */

}
/* =====================================================
   MOBILE/DESKTOP MENU SWITCHING
   ===================================================== */
   /* Default = desktop */

.header-navigation {
    display: block;
}

.call-out {
    display: none;
    z-index: 9999;
    margin-right: 1rem;
}
.sidenav {
  background: #000000;
  }
.side-menu {
  padding-left: 1rem;
}
.side-menu-container .header-menu {
  display: unset;
  }
.side-menu-container {
  padding: 1rem;
}
@media (max-width: 768px) {

    .header-navigation, .brand-links {
        display: none;
    }

    .call-out {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  /*-ms-flex-direction: row-reverse;
          flex-direction: row-reverse;*/
}

}


@media (max-width: 768px) {
    .call-out {
        display: block;
        right: 0;
        position: absolute;
    }
}

/* =====================================================
   EXPERIMENTAL
   ===================================================== */

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.logo {
    /*flex-shrink: 0;*/
    flex: 1;
}

.header-right {
    flex: 2;
    min-width: 0;
}

.header-menu > li:last-child > .header-submenu,.header-menu > li:nth-last-child(2) > .header-submenu {
left: auto;
right: 0;
}