/* 
Theme Name: Knoxville Newts
Theme URI: https://www.robineaster.com
Description: Custom Theme for Downtown Knoxville
Author: Robin Easter Design
Author URI: https://www.robineaster.com
Template: hello-elementor
Version: 3.4.4
Text Domain: knewts
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: 
*/

/* FONTS
Adobe: Omnium Tagline, Trade Gothic Next LT Pro, Zilla Slab (zilla is a google font too) */

/* variables */
:root{
  --cream: #fff8ee;
  --forest: #224f42;
  --orange: #f7922d;
  --coral: #ff8968;
  --red: #ef4624;
  --rosewood: #630d15;

  --omnium: "omnium-tagline", sans-serif;
  --trade: trade-gothic-next, sans-serif;
  --tradecompress: "trade-gothic-next-compressed", sans-serif;
  --zilla: "zilla-slab", sans-serif;
}


/* general */
body{background:var(--cream)}

/* layout */
.newtmap{flex: 0 0 auto !important}
.clues{flex: 1 1 auto !important}

/* links */
a{
  color: var(--rosewood);
  transition: color .3s ease-in-out;
}
a:hover{color: var(--red)}
@media screen and (max-width: 1024px) {
  nav a:hover{color:var(--cream)}
}


/* typography */
/** Set html to 62.5% so that all the REM measurements throughout are based on 10px sizing. ~1.5rem = 15px **/
html{font-size:62.5%}
body,p{
  color: var(--rosewood);
  font-family: var(--zilla);
}
p{
  font-size:1.9rem;
  letter-spacing: 0.38px;
  line-height: 29px;
  margin-block-end: 3rem;
}
.elementor-widget-text-editor p:last-of-type{margin-block-end:0}
p em{font-style: italic}
.elementor p a{text-decoration:underline}
footer.elementor p a{text-decoration:none}
.dark,.dark p,.dark h2,.dark p a{color:var(--cream)}
.dark p a:hover{color:var(--coral)}
.elementor-widget-text-editor:last-of-type p:last-child{margin-bottom:0}
.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{
  background: url('hr.svg') repeat-x center center;
  background-color: transparent;
  border-block-start: none;
  height: 3px;
}

/* <mark> */
mark{
  background-color: var(--coral);
  color: var(--rosewood);
  font-family: var(--trade);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  padding: 0 2px 2px 4px;
}/* or as span .hylight::after{} */

/** headings **/
.elementor-widget-heading .elementor-heading-title{line-height:inherit}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: var(--omnium);
}
h1,.h1,.h1 h2,.h1 h3,.h1 h4,.h1 h5,.h1 h6,p.h1,.h1 p{
  font-family: var(--omnium);
  font-size: 8.1rem;
  letter-spacing: 1.6px;
}
h2,.h2,.h2 h1,.h2 h3,.h2 h4,.h2 h5,.h2 h6,p.h2,.h2 p{
  font-family: var(--tradecompress);
  font-size: 5rem;
  letter-spacing: 1.5px;
  line-height: 65px;
  text-transform: uppercase;
}
h3,.h3,.h3 h1,.h3 h2,.h3 h4,.h3 h5,.h3 h6,p.h3,.h3 p{
  color: var(--red);
  font-family: var(--omnium);
  font-size: 4.7rem;
  letter-spacing: 0.94px;
  line-height: 1.1;
}
h4,.h4,.h4 h2,.h4 h3,.h4 h5,.h4 h6,p.h4,.h4 p{
  font-family: var(--trade);
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
h5,.h5,.h5 h2,.h5 h3,.h5 h4,.h5 h6,p.h5,.h5 p{
  font-family: inherit;
}
h6,.h6,.h6 h2,.h6 h3,.h6 h4,.h6 h5,p.h6,.h6 p{
  font-family: inherit;
}

.elementor-heading-title a:hover{color: var(--coral) !important}
footer .elementor-heading-title a:hover{color: var(--cream) !important}

.numberCircle{
  background: var(--red);
  border: 0;
  border-radius: 50%;  
  color: var(--cream);
  display: flex;
   align-items: center;  
   aspect-ratio: 1 / 1;
   justify-content: center;
  font-family: var(--omnium);
  font-size: 2rem;
  width: 3ch; /* Set this to slightly wider than the longest string */
  width: 30px;
  min-width: 30px;
}

/** elementor **/
.elementor-widget-text-editor .elementor-widget-container p:last-child{margin-bottom:0}

/** nav bar **/
nav a{
  color: var(--rosewood);
  font-family: var(--omnium);
  font-size: 3.7rem;
  letter-spacing: 0.74px;
}
nav a.elementor-item-active{color:var(--rosewood) !important}
nav a:hover,nav a.elementor-item-active:hover{color: var(--cream)!important}

/** Footer **/
.elementor-location-footer,.elementor-location-footer .h4 p{
  font-family: var(--trade);
  font-size: 1.8rem;
  letter-spacing: 1.8px;
  line-height: 29.14px;
  text-transform: uppercase;
}
.elementor-location-footer .credit p{
  font-family: var(--zilla);
  font-size: 1.9rem;
  line-height: 29.14px;
  letter-spacing: 0.38px;
  text-transform: initial;
}
.elementor-location-footer .credit,.elementor-location-footer p{color:var(--orange)}


/* Forms */
button,
input,
optgroup,
select,
textarea{
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}
input,
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea{
  border: 2px solid var(--orange);
  border-radius: 0;
  padding: 0.5rem 1rem;
  transition: all .3s ease-in-out;
  width: 100%;
}
input:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus{
  border-color: var(--forest);
  outline: none;
}
button,input{overflow:visible}
button,select{text-transform:none}
[type="button"],
[type="reset"],
[type="submit"],
button{
  width: auto;
  -webkit-appearance: button;
}
[type="button"],
[type="submit"],
button,
.elementor-button{
  background-color: var(--red);
  border: 0;
  border-radius: 16px;
  color: var(--cream);
  display: inline-block;
  font-family: var(--omnium);
  font-size: 3.7rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 15px 28px 19px;
  text-transform: lowercase !important;
  text-align: center;
  transition: all .3s ease-in-out;
  user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
  white-space: nowrap;
}
[type="button"]:not(:disabled),[type="submit"]:not(:disabled),button:not(:disabled){cursor:pointer}
[type="button"]:focus:not(:focus-visible),[type="submit"]:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
[type="button"]:focus,[type="button"]:hover,[type="submit"]:focus,[type="submit"]:hover,button:focus,button:hover,.elementor-button:hover{
  background: var(--rosewood);
  text-decoration: none;
}

.partners svg{
  fill: var(--red);
  transition: all .3s ease-in-out;
}
a:hover .partners svg{
  fill: var(--coral);
}


/* footer */
.elementor-social-icon,.elementor-social-icon svg,.elementor-social-icon path{transition: all .3s}
.elementor-social-icon:hover path{fill: var(--cream)}


/* mobile typography */
@media screen and (max-width: 768px) {
  p{
    font-size: 1.7rem;
    letter-spacing: 0.34px;
    line-height: 26px;}
  h1,.h1,.h1 h2,.h1 h3,.h1 h4,.h1 h5,.h1 h6,p.h1{
    font-size: 4.5rem;
    letter-spacing: 0.9px;
    line-height: 44px;}
  h2,.h2,.h2 h1,.h2 h3,.h2 h4,.h2 h5,.h2 h6,p.h2{
    font-size: 3.5rem;
    letter-spacing: 1.05px;
    line-height: 44px !important;}
  h3,.h3,.h3 h1,.h3 h2,.h3 h4,.h3 h5,.h3 h6,p.h3{
    font-size: 4.0rem;
    letter-spacing: 0.8px;}
  mark{
    font-size: 1.5rem;
    letter-spacing: 1.5px;}
  [type="button"],[type="submit"],button,.elementor-button{
    max-width: 100%;
    text-wrap: auto;}
}