:root {
  --primary-color: var(--sienna);
  --secondary-color: var(--bone);
  --headings-color: var(--khaki);
  --links-color: var(--golden-amber);
  --text-color: var(--isabelline);
  --secondary-text-color: var(--taupe);
  --bg-color: var(--eerie-black);
  --sienna: #872E1A;
  --sienna-hover: #A23C27;
  --isabelline: #F8F6F2;
  --bone: #E4DCCD;
  /* --brown-sugar: #AD5A3D; */
  --khaki: #BAAA94;
  --eerie-black: #222528;
  --light-eerie-black: #2E3237;
  --golden-amber: #FFBA49;
  --dun: #DCCFBB;
  --battleship-gray: #9E9589;
  --taupe: #4B4039;
  --taupe-hover: #6B5A50;
  --header-height: 76px;
}

[data-theme="dark"] {
  --text-color: var(--off-white);
  --bg-color: var(--eerie-black);
}

a[href^="tel"] {
  color: inherit; /* Ensures it matches the surrounding text */
  text-decoration: none; /* Removes underline if needed */
}

/* a[href^="mailto"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: inherit;
} */

html {
  -webkit-user-select: auto;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
  interpolate-size: allow-keywords;
}

html:hover {
  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
}

html, body {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  font-family: 'Lato-Regular', sans-serif;
  line-height: 1.6;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  color: var(--text-color);
  background-color: var(--bg-color);
  -webkit-font-smoothing: antialiased; /* Smooth text for WebKit browsers */
  -moz-osx-font-smoothing: grayscale; /* Smooth text for macOS Firefox */
  text-rendering: optimizeLegibility; /* Improves kerning and ligatures */
}

h1 {
  font-family: "Oswald-SemiBold";
  font-size: 3rem;
  color: var(--golden-amber);
}

h2 {
  color: var(--golden-amber);
  font-family: "Oswald-Medium";
  letter-spacing: 0.0375rem;
}

h3 {
  color: var(--golden-amber);
  font-family: "Oswald-Medium";
  letter-spacing: 0.0375rem;
}

/* h1, h2 {
  color: var(--headings-color);
} */

ul {
  list-style: none;
  padding: 0;
}

ul li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: var(--links-color);
}



b {
  font-family: "Lato-Bold";
  font-weight: 400;
}

.wrapper{ 
  padding: 40px;
}

.content-wrapper{
  margin: 0;
  padding: 0;
  position: relative;
}

section {
  padding: 20px;
}


header {
  display: flex;
  position: fixed;
  z-index: 10;
  width: 100%;
  top: 0;
  left: 0;
  padding: 20px;
  height: 165px;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(34, 37, 40, 0.7);
  /* background-color: color-mix(in srgb, var(--eerie-black) 70%, transparent);     */
  color: var(--text-color);
  transition: background-color 0.3s ease;
  border-bottom: 2px solid var(--taupe);
}

header:hover {
  background-color: var(--eerie-black)
}

header.scrolled {
  background-color: var(--eerie-black);
}

header .nav a {
  color: var(--battleship-gray);
  transition: color 0.2s ease;
}

.nav a:hover,
#nav-mobile a:hover {
  color: var(--links-color);
}


.logo img {
  display: flex;
  height: 115px;
  width: 115px;
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 60px;
  margin: auto;
  align-items: center;
  justify-content: end;
  justify-items: end;
}

.nav1,
.nav2 {
  display: flex;
  gap: 60px;
  font-size: 1.05rem;
  letter-spacing: 0.0375rem;
}

.nav1 a,
.nav2 a {
  text-decoration: none;
  font-family: "Oswald-Medium";
  text-transform: uppercase;
}

.mobile-header,
#nav-mobile {
  display: none;
}





section p, section ul {
  margin-bottom: 20px;
}

footer {
  text-align: center;
  padding: 20px;
  background-color: var(--primary-color);
  color: #fff;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* Scrollbar Matching Body */
::-webkit-scrollbar {
  width: 16px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-horizontal {
  height: 16px;
}

/* Utility Classes */
.font-size-3rem {
  font-size: 3rem !important; /* 48px */
}

.font-size-2rem {
  font-size: 2rem !important; /* 32px */
}

.font-size-1-5rem {
  font-size: 1.5rem !important; /* 24px */
}

.font-size-1-125rem {
  font-size: 1.125rem !important; /* 18px */
}

.font-size-1-0625rem {
  font-size: 1.0625rem !important; /* 17px */
}

.font-size-1rem {
  font-size: 1rem !important; /* 16px */
}

.font-size-0-9375rem {
  font-size: 0.9375rem !important; /* 15px */
}

.font-size-0-875rem {
  font-size: 0.875rem !important; /* 14px */
}

.font-size-0-8125rem {
  font-size: 0.8125rem !important; /* 13px */
}

.font-size-0-75rem {
  font-size: 0.75rem !important; /* 12px */
}

.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

/* Text Alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.display-contents{
  display: contents
}

.antialias-off {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision; /* Prioritizes pixel-perfect rendering */
}

.hide-mobile{
  display: none;
}

body.inside-iframe #hero, body.inside-iframe #events-hero, body.inside-iframe #brewery-hero, body.inside-iframe #merchandise-hero{
  height: max-content;
}

@media screen and (max-width: 768px){


  
  h1 {
    font-family: "Oswald-Medium";
    font-weight: 400;
    letter-spacing: 0.01275rem;
    font-size: clamp(2.5rem, 2.5rem + .5vh, 3rem);
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
  }

  h2 {
    font-family: "Oswald-Medium";
    font-weight: 400;
    letter-spacing: 0.0375rem;
    font-size: clamp(1.75rem, 1.75rem + .5vh, 2.25rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  h3 {
    font-family: "Oswald-Medium";
    font-weight: 400;
    letter-spacing: 0.0375rem;
    font-size: clamp(1.1275rem, 1.1275rem + .5vh, 1.3725rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

@media screen and (min-width: 769px) {
  h1 {
    font-family: "Oswald-Medium";
    font-weight: 400;
    letter-spacing: 0.01275rem;
    font-size: clamp(2.5rem, 2.5rem + .5vh, 3rem);
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
  }

  h2 {
    font-family: "Oswald-Medium";
    font-weight: 400;
    letter-spacing: 0.0375rem;
    font-size: clamp(1.75rem, 1.75rem + .5vh, 2.25rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  h3 {
    font-family: "Oswald-Medium";
    font-weight: 400;
    letter-spacing: 0.0375rem;
    font-size: clamp(1.15rem, 1.15rem + .5vh, 1.725rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .hide-desktop{
    display: none;
  }
  section{
    padding: 40px;
  }
  footer p:first-of-type {
    text-align: center !important;
  }
}

/* Fonts */
@font-face {
  font-family: Lato-Thin;
  src: url("/fonts/Lato-Thin.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Lato-Light;
  src: url("/fonts/Lato-Light.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Lato-Regular;
  src: url("/fonts/Lato-Regular.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Lato-Bold;
  src: url("/fonts/Lato-Bold.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Oswald-Light;
  src: url("/fonts/Oswald-Light.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Oswald-Medium;
  src: url("/fonts/Oswald-Medium.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Oswald-Regular;
  src: url("/fonts/Oswald-Regular.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Oswald-SemiBold;
  src: url("/fonts/Oswald-SemiBold.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Oswald-Bold;
  src: url("/fonts/Oswald-Bold.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.cta-button{
  transition: background-color 0.3s ease;
}
.cta-button:hover{
  background-color: var(--sienna-hover);
}

.secondary-button {
background-color: var(--taupe) !important;
}

.secondary-button:hover {
  background-color: var(--taupe-hover) !important;
  }



.tertiary-button {
background-color: var(--eerie-black) !important;
}

.tertiary-button:hover{
  background-color: var(--light-eerie-black) !important;
}