/* Type */

/* FENWICK

font-family: 'fenwick', sans-serif;
font-weight: 400;
  
font-family: 'fenwick', sans-serif;
font-weight: 400;
font-style: italic;

font-family: 'fenwick', sans-serif;
font-weight: 700;
font-style: normal;

font-family: 'fenwick', sans-serif;
font-weight: 700;
font-style: italic;






Avenir LT Pro 45 Book

    font-family: 'avenir-lt-pro', sans-serif;
    font-weight: 300;
    font-style: normal;

Avenir LT Pro 55 Roman

    font-family: 'avenir-lt-pro', sans-serif;
    font-weight: 400;
    font-style: normal;

Avenir LT Pro 55 Oblique

    font-family: 'avenir-lt-pro', sans-serif;
    font-weight: 400;
    font-style: italic;

Avenir LT Pro 65 Medium

    font-family: 'avenir-lt-pro', sans-serif;
    font-weight: 500;
    font-style: normal;

Avenir LT Pro 65 Medium Oblique

    font-family: 'avenir-lt-pro', sans-serif;
    font-weight: 500;
    font-style: italic;

Avenir LT Pro 85 Heavy

    font-family: 'avenir-lt-pro', sans-serif;
    font-weight: 700;
    font-style: normal;

Avenir LT Pro 85 Heavy Oblique

    font-family: 'avenir-lt-pro', sans-serif;
    font-weight: 700;
    font-style: italic;

Avenir LT Pro 95 Black

    font-family: 'avenir-lt-pro', sans-serif;
    font-weight: 800;
    font-style: normal;



*/

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

/*
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: 'avenir-lt-pro', sans-serif; 
  font-optical-sizing: auto; 
  line-height:1.5;
}

.text-condensed { font-family: 'avenir-lt-pro', sans-serif;  }

.f-fenwick { font-family: 'fenwick', sans-serif; }

/* global typography */

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

h1 { font-family: 'fenwick', sans-serif; font-size: 2.56rem; line-height:1.25; font-weight:500; margin-top:0px; margin-bottom: 1rem; }
h2 { font-family: 'fenwick', sans-serif; font-size: 1.518rem; line-height:1.36; font-weight:500; margin-top:1rem; margin-bottom: 1rem; }
h3 { font-size: 1.1rem; line-height:1.5; font-weight:700; } 

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(--cty-linework); opacity:1; }

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

hr.waves { margin-top: 1.5rem; margin-bottom: 1.5rem; border:0; width:237px; height:55px; 
background:url('https://ctycms.com/ca-santa-rosa/waves-teal-237x55.svg') center center no-repeat;
background-size:contain;
}

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

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


/* buttons */

.btn-brand { 
  background-color:var(--cty-abtnlink); 
  border:1px solid var(--cty-abtnlink); 
  color:white; 
  font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.100rem; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem .75rem; 
  transition:var(--cty-transition-hover); 
  text-decoration:none; 
  border-radius:0;
}
.btn-brand:hover,.btn-brand:focus { 
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:white; 
  text-decoration:none; 
}
.btn-brand:active {
  background-color: #003d7a;
  transform: translateY(1px); 
}

.btn-outline-brand { 
  background-color:inherit; 
  border:1px solid var(--cty-abtnlink); 
  color:var(--cty-abtnlink); 
  font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.100rem; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem .75rem; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
   border-radius:0;
}
.btn-outline-brand:hover { 
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:white; 
  text-decoration:none; 
}

.btn-brand-pill { 
  background-color:var(--cty-abtnlink); 
  border:1px solid var(--cty-abtnlink);  
  color:white; 
  font-size:0.8rem; font-weight:400; text-transform:uppercase; letter-spacing:0.100rem; 
  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:selected {  
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:white; 
  text-decoration:none; 
}

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

.btn-naked { 
  color:var(--cty-abtnlink); 
  text-transform:uppercase; 
  letter-spacing:0.050rem; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem 0rem; 
  transition:var(--cty-transition-hover);  
}
.btn-naked:hover { 
  color:var(--cty-abtnhover); 
}


.btn-brand-domino { 
  background-color:var(--cty-abtnlink); 
  border:1px solid var(--cty-abtnlink);  
  color:white; 
  font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.100rem; 
  border-radius:20px; 
  margin: 4px 2px 4px 0px; 
  padding: .275rem 1rem; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
   border-radius:0;
}
.btn-brand-domino:hover {  
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:white; 
  text-decoration:none; 
}

.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:uppercase;
  letter-spacing: 0.050rem;
  color:var(--cms-dark-blue);
  background-color:inherit;
  border:2px solid var(--cms-coral);
  transition:var(--cty-transition-hover); 
   border-radius:24px;
  padding:0.5rem 0.75rem;
  white-space: nowrap;
  margin:4px 3px;
}
.btn-section-filters a:hover { 
  background-color:var(--cms-dark-blue); 
  border-color:var(--cms-dark-blue);  
  color:white; 
  text-decoration: none; 
}
.btn-section-filters a.selected { 
  background-color:var(--cms-dark-blue); 
  border-color:var(--cms-dark-blue); 
  color:white; 
}



/* button group */

.sr-button-group { margin:1rem 0; }
.sr-button-group button { 
  text-decoration:none; 
  font-size:0.7rem;
  line-height:1.8;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing: 0.050rem;
  color:var(--cms-dark-blue);
  background-color:inherit;
  border:2px solid var(--cms-coral);
  transition:var(--cty-transition-hover); 
  border-radius:24px;
  padding:0rem 0.6rem;
  white-space: nowrap;
  margin:4px 3px;
}
.sr-button-group button:hover { 
  background-color:var(--cms-dark-blue); 
  border:2px solid var(--cms-dark-blue);
  color:white;
  text-decoration: none; 
}
.sr-button-group button.button-selected { 
  background-color:var(--cms-dark-blue); 
  border:2px solid var(--cms-dark-blue);
  color:white; 
  text-decoration:none; 
}