/* Type */

/*
font-family: 'scandia-web', sans-serif;
font-weight: 400;
font-weight: 400; font-style: italic;
font-weight: 500;
font-weight: 500; font-style: italic;
font-weight: 700;
font-weight: 700; font-style: italic;
*/

html {
  font-size: 16px; 
  font-size: clamp(16px, 1rem + 0.4vw, 19px);
}

/*
320px (small mobile): ~16px (at minimum)
480px (large mobile): ~17.9px
768px (tablet): ~19.1px
1000px+ (desktop): 20px (maxed out) 125% larger
*/

body {
  font-family: 'scandia-web', sans-serif;
  line-height:1.5;
}

.text-balance { text-wrap:balance; }


/* global typography */

h1,h2,h3,h4,h5,h6 { text-wrap:balance; color:inherit; letter-spacing:-0.050rem; }

h1 { font-size: 2.5rem; line-height:1.2; font-weight: 700; margin-top:0px; margin-bottom: 1rem; }
h2 { font-size: 1.5rem; line-height:1.2; font-weight: 700; margin-top:1rem; margin-bottom: 1rem; }
h3 { font-size: 0.8rem; line-height:1.3; font-weight:500; margin-top:1rem; margin-bottom: 1rem; letter-spacing:0.050rem; text-transform:uppercase; } 

h2.on-detail { font-size: 0.85rem; font-weight:700; margin-top:1.5rem; margin-bottom: 1rem; text-transform:uppercase; letter-spacing:0.050rem; }

p, li { font-size:1rem; }
li { margin-bottom:0.25rem; } /* I like to differentiate between line height and items */
p.intro,p.lead { font-weight:inherit; font-size:1.2rem; }

label { color:inherit; }

hr { margin-top: 1.5rem; margin-bottom: 1.5rem; border: 0; border-top: 1px solid var(--cms-blue); opacity:1; }

hr.clearing-spacer { clear:both; background-color:inherit; border:0px; opacity:1; }

a { color:inherit; text-decoration:underline; }
a:hover { color:inherit; text-decoration:underline; }

blockquote,pre { background-color:inherit; } /* override Citylight 9 rules */

.form-boxed {
  margin: 2rem 0;
  padding: 1.5rem 1.5rem 0.5rem 1.5rem;
  background-color: inherit;
  border: 1px solid var(--cms-blue);
}
.form-text {
  color:inherit;
}
.form-control, .form-select {
  background-color:transparent!important;
  color:white!important;
  border-color:var(--cms-blue);
}
.input-group-text { 
  background-color:transparent!important;
  color:var(--cms-gold)!important;
  border-color:var(--cms-blue);
}
.div-advanced-options { border-color:var(--cms-blue);  }
table.table-advanced-events * { background-color:transparent!important; color:var(--cms-chalk)!important; border-color:var(--cms-blue); }



.awesome-box { display:table; width:100%; }
.awesome-box-icon { display:table-cell; width:40px; vertical-align:top; text-align:center; color:var(--cms-gold); }
.awesome-box-link { display:table-cell; width:auto; vertical-align:top; text-align:left; }


/* buttons */

.btn-brand { 
  background-color:var(--cty-abtnlink); 
  border:1px solid var(--cty-abtnlink); 
  color:var(--cms-navy); 
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.050rem; 
  margin: 4px 2px 4px 0px; 
  padding: .275rem 0.9rem .275rem 0.7rem;
  border-radius:0 30px 30px 0;
  transition:var(--cty-transition-hover); 
  text-decoration:none; 
}
.btn-brand:hover,.btn-brand:focus { 
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:var(--cms-navy); 
  text-decoration:none; 
}


.btn-outline-brand { 
  background-color:inherit; 
  border:1px solid var(--cty-abtnlink); 
  color:var(--cty-abtnlink); 
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.050rem; 
  margin: 4px 2px 4px 0px; 
  padding: .275rem 0.9rem .275rem 0.7rem;
  border-radius:0 30px 30px 0; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
}
.btn-outline-brand:hover { 
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:var(--cms-navy); 
  text-decoration:none; 
}


.btn-brand-blue { 
  background-color:var(--cms-blue); 
  border:1px solid var(--cms-blue); 
  color:var(--cms-chalk); 
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.050rem; 
  margin: 4px 2px 4px 0px; 
  padding: .275rem 0.9rem .275rem 0.7rem;
  border-radius:0 30px 30px 0;
  transition:var(--cty-transition-hover); 
  text-decoration:none; 
}
.btn-brand-blue:hover,.btn-brand-blue:focus { 
  background-color:var(--cms-blue); 
  border:1px solid var(--cms-blue); 
  color:var(--cms-chalk); 
  text-decoration:none; 
}


.btn-brand-pill { 
  background-color:var(--cty-abtnlink); 
  border:1px solid var(--cty-abtnlink);  
  color:var(--cms-navy); 
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.050rem; 
  border-radius:20px; 
  margin: 4px 2px 4px 0px; 
  padding: .275rem 1rem; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
}
.btn-brand-pill:hover, .btn-brand-pill:focus {  
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:var(--cms-navy); 
  text-decoration:none; 
}

.btn-outline-brand-pill { 
  background-color:inherit; 
  border:1px solid var(--cty-abtnlink); 
  color:var(--cty-abtnlink); 
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.050rem; 
  border-radius:20px; 
  margin: 4px 2px 4px 0px; 
  padding: .275rem 1rem; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
}
.btn-outline-brand-pill:hover, .btn-outline-brand-pill:focus { 
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:var(--cms-navy);
  text-decoration:none; 
}

.btn-naked { 
  color:var(--cms-chalk); 
  text-transform:none; 
  letter-spacing:0.010rem;
  font-size:0.8rem;
  line-height:1.5; 
  font-weight:700;
  margin: 4px 2px 4px 0px; 
  padding: 0; 
  transition:var(--cty-transition-hover);  
  text-decoration:underline;
  text-decoration-color: var(--cms-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  border:0;
}
.btn-naked:hover { 
  color:white; 
  text-decoration:underline;
  text-decoration-color: var(--cms-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}


.btn-brand-domino { 
  background:none; 
  border:0;  
  color:inherit; 
  font-size:0.8rem; font-weight:500; text-transform:none; letter-spacing:0.010rem; 
  border-radius:20px; 
  margin: 4px 2px 4px 0px; 
  padding: 0; 
  transition:var(--cty-transition-hover);  
  text-decoration:underline;
  text-decoration-color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px; 
}

.btn-brand-domino:hover {  
  background:none;  
  border:0;   
  color:inherit; 
  text-decoration:underline;
  text-decoration-color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px; 
}

.add-arrow::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\f178";
  padding-left:8px;
}
.add-angle::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\203a";
  padding-left:8px;
}


/* section filters */

.btn-section-filters { margin:1rem 0; }
.btn-section-filters ul { list-style:none; margin:0; padding:0; text-wrap:balance; }
.btn-section-filters li { display:inline; margin:0; padding:0; }
.btn-section-filters a {
  display:inline-block;
  text-decoration: none;
  font-size:  0.8rem;
  line-height: 1;
  font-weight:700;
  text-transform:none;
  letter-spacing: 0rem;
  color:var(--cms-gold);
  background-color:inherit;
  border:1px solid var(--cms-gold);
  transition:var(--cty-transition-hover); 
  border-radius:2px;
  padding:0.5rem 0.75rem;
  white-space: nowrap;
  margin:4px 3px;
}
.btn-section-filters a:hover { 
  background-color:var(--cms-gold);
  border-color:var(--cms-gold);
  color:var(--cms-navy-600); 
  text-decoration: none; 
}
.btn-section-filters a.selected { 
  background-color:var(--cms-gold);
  border-color:var(--cms-gold);
  color:var(--cms-navy-600);  
}




.op-accordion {
  --op-accordion-color: var(--cms-chalk);
  --op-accordion-bg:transparent;  /* color of clickable body background */
  --op-accordion-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;
  --op-accordion-border-color: var(--cms-blue);
  --op-accordion-border-width: var(--bs-border-width);
  --op-accordion-border-radius: var(--bs-border-radius);
  --op-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --op-accordion-btn-padding-x: 1.25rem;
  --op-accordion-btn-padding-y: 1rem;
  --op-accordion-btn-color: var(--cms-chalk); /* color of clickable header text */
  --op-accordion-btn-bg: transparent; /* color of clickable header background */
  --op-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f2b044'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --op-accordion-btn-icon-width: 1.25rem;
  --op-accordion-btn-icon-transform: rotate(-180deg);
  --op-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --op-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f2b044'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --op-accordion-btn-focus-border-color: #86b7fe; 
  --op-accordion-btn-focus-box-shadow: 0; /* 0 0 0 0.25rem rgba(13, 110, 253, 0.25); */
  --op-accordion-body-padding-x: 1.25rem;
  --op-accordion-body-padding-y: 1rem;
  --op-accordion-active-color: var(--cms-chalk);
  --op-accordion-active-bg: transparent;
}

.op-accordion { margin:1rem 0 1.5rem 0; 
  background-color:var(--cms-navy-600);
  border:10px solid var(--cms-navy-600);
  border-radius:var(--bs-border-radius);
 
}

.op-accordion .accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--op-accordion-btn-padding-y) var(--op-accordion-btn-padding-x);
  color: var(--op-accordion-btn-color);
  text-align: left; /* Reset button style */
  background-color: var(--op-accordion-btn-bg);
  border: 0;
  border-radius:0;
  overflow-anchor: none;
  /*transition(var(--op-accordion-transition));*/
  font-size:1.1rem; 
  font-weight:700; /* we add */

  &:not(.collapsed) {
    color: var(--op-accordion-active-color);
    background-color: var(--op-accordion-active-bg);
    box-shadow: inset 0 calc(-1 * var(--op-accordion-border-width)) 0 var(--op-accordion-border-color); /* stylelint-disable-line function-disallowed-list */
    outline: 0;
    box-shadow: var(--op-accordion-btn-focus-box-shadow);

    &::after {
      background-image: var(--op-accordion-btn-active-icon);
      transform: var(--op-accordion-btn-icon-transform);
    }
  }

  /* Accordion icon*/
  &::after {
    flex-shrink: 0;
    width: var(--op-accordion-btn-icon-width);
    height: var(--op-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--op-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--op-accordion-btn-icon-width);
  }

  &:hover {
    z-index: 2;
  }

  &:focus {
    z-index: 3;
    border-color: var(--op-accordion-btn-focus-border-color);
    outline: 0;
    box-shadow: var(--op-accordion-btn-focus-box-shadow);
  }
}

.op-accordion .accordion-header {
  margin-bottom: 0;
}

.op-accordion .accordion-item {
  color: var(--op-accordion-color);
  background-color: var(--op-accordion-bg);
  border: var(--op-accordion-border-width) solid var(--op-accordion-border-color);
}

.op-accordion .accordion-body {
  padding: var(--op-accordion-body-padding-y) var(--op-accordion-body-padding-x);
  padding:1rem 1.25rem 0.5rem 1.25rem;
}
@media all and (min-width: 768px) {
  .op-accordion .accordion-body {
    padding-right:4rem;
  }
}


/* Flush accordion items
 Remove borders and border-radius to keep accordion items edge-to-edge.*/

.op-accordion .accordion-flush {
  .accordion-collapse {
    border-width: 0;
  }

  .accordion-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;

    &:first-child { border-top: 0; }
    &:last-child { border-bottom: 0; }

    .accordion-button {
      &,
      &.collapsed {
        border-radius:0;
      }
    }
  }
}