:root {
  /* COTC Theme Colors */
  --cotc-heading: #88201B;
  --cotc-red: #CC2207;
  --cotc-menu-red: #be1d2c;
  --cotc-yellow: #FECC0B;
  --cotc-blue: #53C3CD;
  --cotc-tan: #E5C396; /* Placeholder parchment/sand tone */
  --cotc-light-grey: #BBB9B9;
  --cotc-dark-grey: #676868;
  --cotc-white: #FFFFFF;
  --cotc-black: #000000;
  
  /* COTC Gradients */
  --cotc-linear-gradient: linear-gradient(90deg, var(--cotc-red) 0%, var(--cotc-yellow) 50%, var(--cotc-red) 100%);
  --cotc-gradient-darkred: linear-gradient(180deg, #86201A 0%, #000000 100%);
  /* Typography */
  --cotc-copperplate: 'Copperplate', serif;
  --cotc-battlesbridge: 'Battlesbridge';
  --cotc-roboto: 'Roboto', sans-serif;
}

/* COTC Theme Utility Background Classes */
.bg-cotc-black { background-color: var(--cotc-black, #000000) !important; }
.bg-cotc-red { background-color: var(--cotc-red, #CC2207) !important; }
.bg-cotc-menu-red { background-color: var(--cotc-menu-red, #be1d2c) !important; }
.bg-cotc-tan { background-color: var(--cotc-tan, #E5C396) !important; }
.bg-cotc-yellow { background-color: var(--cotc-yellow, #FECC0B) !important; }
.bg-cotc-blue { background-color: var(--cotc-blue, #53C3CD) !important; }

/* =========================================
   BOOTSTRAP 5 GLOBAL OVERRIDES
   Bypass SCSS and control Bootstrap natively
   ========================================= */
:root {
  /* Override Bootstrap's core colors with COTC Pirate Palette */
  --bs-primary: var(--cotc-red);
  --bs-secondary: var(--cotc-dark-grey);
  --bs-warning: var(--cotc-yellow);
  --bs-info: var(--cotc-blue);
  
  /* Make all bootstrap cards transparent by default so our parchment textures show */
  --bs-card-bg: transparent;
  --bs-card-border-color: transparent;
  
  /* Typography */
/*  --bs-font-sans-serif: 'Copperplate', 'Cinzel', serif; */
  --bs-font-sans-serif: var(--cotc-roboto);
  --bs-body-color: var(--cotc-black);
}

body, 
.dialog-off-canvas-main-canvas,
.layout-container {
  background-color: transparent !important;
  overflow-x: hidden;
}
.region.region-top-header {
    width: 100vw;
    display:flex;
    justify-content: space-between;
}
.region-top-header ul.nav.navbar-nav {
    flex-direction: row;
}
.container.d-flex.justify-content-between.align-items-center.py-2 {
    margin: 0;
    max-width: 100%;
}
.region.region-top-header .navbar-brand a.site-title {
    font-size: 1.4em;
}
.navbar-brand a.site-title {
    font-family: var(--cotc-battlesbridge);
    color: var(--cotc-red);
    text-transform: unset;
    font-size: 13px;
    word-spacing: -4px;
    letter-spacing: 1px;
}
.container.d-flex.align-items-center.position-relative {
    margin: 0;
    width: 100vw;
    max-width: 100%;
}
ul.navbar-nav.justify-content-end.flex-wrap.nav-level-0 {
    font-family: var(--cotc-copperplate);
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 1px;
}
.cotc-social-share-buttons {
  display: flex;
  gap:0 !important;
  align-items: center;
}
.position-absolute.end-0.pe-3.d-none.d-md-block.cotc-nav-additional {
 O
 padding-right: 0 !important;
}
.social-share-buttons a {
  color: #555; /* Neutral slate color */
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Accessible hover states */
.social-share-buttons a:hover {
  transform: translateY(-2px);
}
.social-share-buttons id="share-fb":hover { color: #1877F2; }
.social-share-buttons id="share-x":hover { color: #000000; }
.social-share-buttons id="share-linkedin":hover { color: #0077B5; }

svg.svg-inline--fa.fa-facebook path {
    color: var(--cotc-red);
}
svg.svg-inline--fa.fa-instagram path {
    color: var(--cotc-red);
}
svg.svg-inline--fa.fa-instagram path:hover {
    color: var(--cotc-yellow);
}
svg.svg-inline--fa.fa-facebook path:hover {
    color: var(--cotc-yellow);
}

@media (max-width: 767.98px) {
  .region-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Offset the first cutout so it centers perfectly under the header and title */
.parallax-cutout:first-of-type {
  min-height: calc(100vh - var(--header-offset, 130px));
}

@media (min-width: 992px) {
  .parallax-cutout:first-of-type {
    --avail-h: calc(100vh - var(--header-and-title-height, 166px) - 2.5rem);
    --logo-w: min(95vw, 1200px, calc(var(--avail-h) * (800 / 672)));
    min-height: calc(100vh - var(--header-and-title-height, 166px));
    height: calc(100vh - var(--header-and-title-height, 166px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative;
    z-index: 10 !important;
    margin-bottom: calc(var(--logo-w) * (155 / 800) + 2.5rem) !important;
  }
}

.parallax-solid-block {
  position: relative;
  /* Use JS-calculated variable to subtract exact scrollbar physical width */
  width: calc(100vw - var(--scrollbar-width, 0px));
  max-width: 100vw;
  left: 50%;
  margin-left: calc(-50vw + (var(--scrollbar-width, 0px) / 2));
  min-height: 100vh;
  z-index: 2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/*
@font-face {
    font-family: 'Amaznica-Std';
    src:url('../fonts/Amaznica-Std.ttf.woff') format('woff'),
        url('../fonts/Amaznica-Std.ttf.svg#Amaznica-Std') format('svg'),
        url('../fonts/Amaznica-Std.ttf.eot'),
        url('../fonts/Amaznica-Std.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
} */
@font-face {
    font-family: 'Copperplate';
    src:url('../fonts/Copperplate.woff2') format('woff2'),
        url('../fonts/Copperplate.woff') format('woff'),
        url('../fonts/Copperplate.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Copperplate';
    src:url('../fonts/Copperplate-bold.woff2') format('woff2'),
        url('../fonts/Copperplate-bold.woff') format('woff'),
        url('../fonts/Copperplate-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Copperplate';
    src:url('../fonts/Copperplate-bold.woff2') format('woff2'),
        url('../fonts/Copperplate-bold.woff') format('woff'),
        url('../fonts/Copperplate-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
  font-family: 'Copperplate-Lte';
  src:url('../fonts/Copperplate-light.woff2') format('woff2'),
      url('../fonts/Copperplate-light.woff') format('woff'),
      url('../fonts/Copperplate-light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Copperplate-Bld';
  src:url('../fonts/Copperplate-bold.woff2') format('woff2'),
      url('../fonts/Copperplate-bold.woff') format('woff'),
      url('../fonts/Copperplate-bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Battlesbridge';
  src:url('../fonts/Battlesbridge.woff2') format('woff2'),
      url('../fonts/Battlesbridge.woff') format('woff'),
      url('../fonts/Battlesbridge.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src:url('../fonts/roboto.woff2') format('woff2 supports variations'),
      url('../fonts/roboto.woff') format('woff');
  font-weight: normal;
/*  font-stretch: 75% 100%; */
  font-style: normal;
/*  font-display: swap; */
}
@font-face {
  font-family: 'Roboto-Itl';
  src:url('../fonts/roboto-italic.woff2') format('woff2 supports variations'),
      url('../fonts/roboto-italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
/*  font-stretch: 75% 100%; */
/*  font-display: swap; */
}

.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cotc-copperplate);
    color: var(--cotc-heading);
}

.row.gx-3 {}
.canvas-page main {background-color: black;color: white;font-family:'Roboto';letter-spacing:.2px;font-size:1em;line-height:1.5em;}
.canvas-page a {color:white;}
.canvas-page a:hover {color:#88201b;}

.canvas-page main .container .col-md-4:not(:last-child) {border-right: 5px solid #88201b;}
.canvas-page main .container {width: 100%;max-width: 1600px;}
.canvas-page main .container .col-md-4 {padding-right: calc(var(--bs-gutter-x) * 1.0);padding-left: calc(var(--bs-gutter-x) * 1.0);}

/* {
  font-kerning: normal;\
  letter-spacing: 2px;
} */
div#block-pirate-chickens-page-title h1 {
  text-transform: uppercase;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  font-size: 2.0em;
  line-height: 1.2;
  font-weight: 600;
  text-shadow: 2px 2px 0px black;
}
@media (min-width: 768px) {
  div#block-pirate-chickens-page-title h1 {
      font-size: 2.25em;
  }
}
section a.btn.cotc-btn-primary.btn-sm {
  color: var(--cotc-tan);
  border: 1px solid;
}
section a.btn.cotc-btn-primary.btn-sm:hover {
  color: var(--cotc-red);
}
.cotc-footer-link {
  display:block;
  width:100%;
}
div#block-pirate-chickens-footer-hours {
  text-align: center;
}
div#block-pirate-chickens-footer-contact {
  text-align: right;
}
.cotc-credit-cards {
  color: var(--cotc-red);
  font-size: 1.4rem;
}
/* =========================================
   FOOTER STYLES
   ========================================= */
footer[role="contentinfo"] {
  background-color: #1a0e08 !important; /* Very dark espresso wood base */
  background-image: 
    /* Heavy Vignette on edges and top/bottom */
    linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.3) 15%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.95) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.8) 100%),
    /* Uneven vertical planks (uses prime numbers in background-size to prevent repeating patterns) */
    linear-gradient(to right, rgba(0,0,0,0.8) 0px, rgba(0,0,0,0.8) 3px, transparent 3px, transparent 100%),
    linear-gradient(to right, rgba(0,0,0,0.7) 0px, rgba(0,0,0,0.7) 2px, transparent 2px, transparent 100%),
    linear-gradient(to right, rgba(0,0,0,0.9) 0px, rgba(0,0,0,0.9) 4px, transparent 4px, transparent 100%),
    /* Warped stains / burned spots */
    radial-gradient(ellipse 70% 30% at 20% 50%, rgba(0,0,0,0.7) 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 80% 20%, rgba(0,0,0,0.6) 0%, transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 90%, rgba(0,0,0,0.8) 0%, transparent 50%),
    /* Chaotic horizontal grain lines */
    repeating-linear-gradient(to bottom, transparent, transparent 7px, rgba(0,0,0,0.2) 7px, rgba(0,0,0,0.2) 9px),
    repeating-linear-gradient(to bottom, transparent, transparent 13px, rgba(255,255,255,0.02) 13px, rgba(255,255,255,0.02) 14px) !important;
  background-size: 
    100% 100%, 100% 100%, /* Vignettes */
    137px 100%, 211px 100%, 347px 100%, /* Prime number planks for random spacing */
    150% 150%, 120% 120%, 180% 150%, /* Ellipse stains */
    100% 100%, 100% 100% !important; /* Grains */
  background-position: 
    0 0, 0 0, 
    15px 0, 80px 0, 200px 0, 
    0 0, 0 0, 0 0, 
    0 0, 0 0 !important;
  color: var(--cotc-tan) !important;
  padding-top: 4rem;
  padding-bottom: 2rem;
  box-shadow: inset 0 15px 30px rgba(0,0,0,0.8); /* Inner shadow to separate from page */
}

/* Footer container maximized below 991px */
@media (max-width: 991.98px) {
  footer[role="contentinfo"] .container,
  footer[role="contentinfo"] .container-fluid,
  footer[role="contentinfo"] .dev-credits {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

footer[role="contentinfo"] .region-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

/* 3 columns side by side down to 826px */
@media (min-width: 826px) {
  footer[role="contentinfo"] .region-footer {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Stack the 3 blocks centered with 300px width at 825px and below */
@media (max-width: 825px) {
  footer[role="contentinfo"] .region-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2.5rem !important;
  }

  footer[role="contentinfo"] #block-pirate-chickens-footer-location,
  footer[role="contentinfo"] #block-pirate-chickens-footer-hours,
  footer[role="contentinfo"] #block-pirate-chickens-footer-contact {
    width: 300px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  footer[role="contentinfo"] div#block-pirate-chickens-footer-contact,
  footer[role="contentinfo"] div#block-pirate-chickens-footer-hours,
  footer[role="contentinfo"] div#block-pirate-chickens-footer-location {
    text-align: center !important;
  }

  footer[role="contentinfo"] #block-pirate-chickens-footertailblock {
    width: 100% !important;
    text-align: center !important;
  }

  .dev-credits {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }
  .dev-credits .right {
    justify-content: center !important;
  }
}

footer[role="contentinfo"] h4 {
  color: var(--cotc-red);
  font-family: var(--cotc-copperplate);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  letter-spacing: 2px;
}

footer[role="contentinfo"] p,
footer[role="contentinfo"] ul {
  font-family: var(--cotc-roboto);
  color: var(--cotc-tan); /* Made text brighter so it doesn't wash out */
  font-size: 1.1rem;
  line-height: 1.6;
}

footer[role="contentinfo"] a {
  color: var(--cotc-white);
  text-decoration: none;
  transition: color 0.3s;
}

footer[role="contentinfo"] a:hover {
  color: var(--cotc-yellow);
}
div#block-pirate-chickens-footertailblock {
    text-align: center;
    grid-column: 1 / -1;
}
#block-pirate-chickens-footertailblock p.mt-3 {
    font-family: 'Copperplate';
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 2.5px;
}
#block-pirate-chickens-footertailblock p.mt-3 .fa-xs {
    font-size: .5em;
}
.dev-credits {
  margin-top: 0px;
  padding-top: 1.5rem;
  width: 100%;
  display: flex;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--cotc-dark-grey);
  justify-content: space-between;
  font-family: var(--cotc-roboto);
}
.dev-credits .left {flex-shrink: 0;}
.dev-credits .right {display: flex;flex-basis: auto;}
.dev-credits .right a {text-decoration: none;margin: 0 5px;}

/* Compnents */
/* .field.field--name-field-media-image img {float: left;width: 100px;margin: 0 7px;} */
div#diet-key {width: 100%;display: block;float: left;}
div#diet-key h4 {float: left;width: 105px;text-align: center;font-size: 0.9em;margin: 5px 5px;}
div#block-pirate-chickens-dietarykeyforfooddrinkmenu {width: 350px;}
/* --- TOP HEADER & SMART STICKY NAV --- */
.cotc-top-header {
  background-color: var(--cotc-black, #000);
  color: var(--cotc-tan, #F0E6D2);
  border-bottom: 1px solid #8b0000;
  min-height: 40px;
}
nav.navbar.navbar-expand-lg.navbar-dark.text-light.bg-dark.cotc-main-nav {
    border-bottom: 1px solid #8b0000;
}
.cotc-main-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  background-color: var(--cotc-dark-wood, #222); /* Or whatever default nav bg is */
}

.cotc-main-nav.nav-docked {
  box-shadow: 0 4px 15px rgba(0,0,0,0.6);
  background-color: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(10px);
}

.cotc-main-nav.nav-hidden {
  top: -150px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.cotc-nav-branding-wrapper {
  transition: all 0.3s ease;
}

/* 
 * Stage 2 Prep: 
 * You can style .cotc-main-nav.nav-docked .cotc-nav-branding-wrapper here 
 * to slide it over the edge or reveal a hidden logo when docked.
 */

/* --- JOIN THE CREW FOOTER DRAWER --- */
.cotc-footer-drawer-tab {
  background: var(--cotc-dark-wood, #222);
  color: var(--cotc-tan, #F0E6D2);
  border: 2px solid var(--cotc-red, #B22222);
  border-bottom: none;
  padding: 12px 30px;
  border-radius: 12px 12px 0 0;
  font-family: var(--cotc-copperplate, 'Copperplate', serif);
  font-size: 1.3rem;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}

.cotc-footer-drawer-tab:hover {
  color: var(--cotc-white, #fff);
  background-color: var(--cotc-red, #B22222);
}

.cotc-footer-drawer-tab .drawer-icon-toggle {
  transition: transform 0.3s ease;
}

.cotc-footer-drawer-tab[aria-expanded="true"] .drawer-icon-toggle {
  transform: rotate(180deg);
}

.cotc-footer-drawer-content {
  box-shadow: 0 -10px 30px rgba(0,0,0,0.7);
  border-top: 3px solid var(--cotc-red, #B22222);
}

.drawer-inner-bg {
  background: var(--cotc-dark-wood, #222);
  color: var(--cotc-tan, #F0E6D2);
  max-height: 70vh;
  overflow-y: auto;
}

/* --- STICKY FOOTER LAYOUT --- */
.dialog-off-canvas-main-canvas {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main[role="main"] {
  flex: 1 0 auto;
}

/* --- MOBILE NAV ADJUSTMENTS (< 1035px) --- */
@media (max-width: 1034.98px) {
  .cotc-top-header {
    display: none !important;
  }
  .cotc-main-nav {
    border-bottom: 1px solid #8b0000 !important;
    min-height: 45px !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .cotc-main-nav .container,
  .cotc-main-nav .container-fluid {
    --bs-gutter-x: 0;
    min-height: 45px;
    position: relative;
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Force Bootstrap collapse to stay in mobile mode between 992px and 1034.98px */
  .cotc-main-nav.navbar-expand-lg .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }
  .cotc-main-nav.navbar-expand-lg .navbar-collapse.collapsing {
    display: block !important;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
  }
  .cotc-main-nav.navbar-expand-lg .navbar-collapse.show {
    display: block !important;
  }
  .cotc-main-nav.navbar-expand-lg .navbar-toggler {
    display: block !important;
  }
  .cotc-main-nav.navbar-expand-lg {
    flex-wrap: wrap !important;
  }
  .cotc-main-nav.navbar-expand-lg .navbar-nav {
    flex-direction: column !important;
    width: 100% !important;
    padding: 8px 0 !important;
  }
  .cotc-main-nav.navbar-expand-lg .nav-item {
    width: 100% !important;
    border-right: none !important;
    border-left: none !important;
    text-align: center;
  }

  /* Absolutely position branding on mobile so it does NOT stretch navbar height */
  .cotc-nav-branding-wrapper {
    position: absolute !important;
    left: 9px !important;
    top: 22.5px !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 100 !important;
    max-width: calc(100% - 70px) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .cotc-main-nav.nav-docked .cotc-nav-branding-wrapper {
    top: 22.5px !important;
    transform: translateY(-50%) !important;
  }
  .cotc-main-nav .navbar-brand img {
    max-height: 70px !important;
    height: 70px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 2px !important;
  }
  .region-nav-branding a.site-logo.d-block {
    background-color: #212529 !important;
    border-radius: 43px !important;
    position: relative !important;
    top: 18px !important;
    z-index: 1 !important;
    border: 1px solid #8b0000 !important;
    display: block !important;
  }
  .region-nav-branding a.site-title,
  .navbar-dark .navbar-brand a.site-title, 
  .footer-dark .navbar-brand a.site-title {
    color: var(--cotc-red) !important;
    font-family: var(--cotc-battlesbridge);
    font-size: 13px !important;
    word-spacing: -4px;
    letter-spacing: 1px;
    position: relative;
    top: 1px;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap;
    display: inline-block !important;
    max-width: calc(100vw - 160px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .navbar-toggler {
    margin-left: auto !important;
    margin-right: 9px !important;
    margin-top: 5px !important;
    height: 35px;
    padding: 1px 6px;
    --bs-navbar-toggler-focus-width: 0.1rem;
    position: relative;
    z-index: 105;
  }
  .navbar-toggler:focus {
    border-width: var(--bs-navbar-toggler-focus-width);
  }
  div#navbarSupportedContent {
    border-top: 1px solid #8b0000;
    width: 100%;
    background-color: #212529;
    margin-top: 5px;
    position: relative;
    z-index: 10;
    padding-bottom: 12px;
  }
  .cotc-nav-additional {
    position: static !important;
    text-align: center;
    width: 100% !important;
    padding: 10px 0 !important;
  }
  .cotc-nav-additional.d-none.d-md-block {
    display: block !important;
  }
  .cotc-nav-additional.d-md-none {
    display: none !important;
  }
  .cotc-social-share-buttons.d-flex {
    justify-content: center;
    gap: 0 !important;
    padding: 5px 0;
    color: var(--cotc-red);
  }
}

/* --- TRADITIONAL NAV BAR & CANNONBALL BURST (DESKTOP >= 1035px) --- */
.cotc-main-nav {
  padding: 0;
}
.cotc-main-nav .container,
.cotc-main-nav .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
}

@media (min-width: 1035px) {
  .cotc-main-nav .navbar-nav {
    display: flex;
    flex-direction: row;
  }
  .cotc-main-nav .nav-item {
    width: clamp(155px, calc(15.56vw - 6px), 190px);
    text-align: center;
    border-right: 1px solid rgba(240, 230, 210, 0.2);
    position: relative;
  }
  .cotc-main-nav .nav-item:first-child {
    border-left: 1px solid rgba(240, 230, 210, 0.2);
  }
  
  /* Nav Branding fade-in on dock */
  .cotc-nav-branding-wrapper {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%) scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    z-index: 1;
    overflow: visible !important;
  }
  
  .cotc-main-nav.nav-docked .cotc-nav-branding-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
  }

  .cotc-main-nav .navbar-brand {
    overflow: visible !important;
  }

  .cotc-main-nav .navbar-brand > div {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .cotc-main-nav .navbar-brand img {
    max-height: 70px;
    width: auto;
    margin: 0;
    padding: 2px;
    transition: all 0.3s ease;
    height: 70px;
  }

  .region-nav-branding a.site-logo.d-block {
    background-color: #212529;
    border-radius: 43px;
    position: relative;
    top: 18px;
    z-index: 1;
    border: 1px solid #8b0000;
    display: block;
    overflow: visible;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.text-light.bg-dark.cotc-main-nav.nav-docked,
  .cotc-main-nav.nav-docked {
    border-bottom: 1px solid #8b0000 !important;
  }

  .region-nav-branding a.site-title,
  .navbar-dark .navbar-brand a.site-title,
  .cotc-nav-branding-wrapper .navbar-brand a.site-title {
    color: var(--cotc-red) !important;
    font-family: var(--cotc-battlesbridge);
    font-size: 13px;
    word-spacing: -4px;
    letter-spacing: 1px;
    position: relative;
    top: 1px;
    white-space: nowrap;
    display: inline-block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    transition: opacity 0.3s ease, font-size 0.2s ease, visibility 0.3s ease;
  }

  /* Remove background from nav-link so pseudo-elements aren't hidden */
  .cotc-main-nav .nav-link {
    color: var(--cotc-tan, #F0E6D2) !important;
    font-family: var(--cotc-copperplate, 'Copperplate', serif);
    text-transform: uppercase;
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    white-space: nowrap;
    padding: 10px 4px !important;
    line-height: 25px;
    position: relative;
    overflow: hidden;
    display: block;
    z-index: 2;
    background-color: transparent !important;
    transition: color 0.2s ease, text-shadow 0.2s ease;
  }
    z-index: 2;
    background-color: transparent !important;
    transition: color 0.2s ease, text-shadow 0.2s ease;
  }

  .cotc-main-nav {
    max-height: 45px;
    min-height: 45px;
  }
}

/* Nav Branding Responsive Scaling (Desktop >= 1700px Default Size) */
@media (min-width: 1700px) {
  .region-nav-branding a.site-title,
  .navbar-dark .navbar-brand a.site-title,
  .cotc-nav-branding-wrapper .navbar-brand a.site-title {
    font-size: 13px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Nav Branding Responsive Scaling (1580px - 1699.98px: Rapid Linear Scale 13px -> 8px) */
@media (min-width: 1580px) and (max-width: 1699.98px) {
  .region-nav-branding a.site-title,
  .navbar-dark .navbar-brand a.site-title,
  .cotc-nav-branding-wrapper .navbar-brand a.site-title {
    font-size: clamp(8px, calc(4.167vw - 57.83px), 13px) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Nav Branding Fade Out (< 1580px down to 1035px mobile cutoff: text fades out before touching nav buttons) */
@media (min-width: 1035px) and (max-width: 1579.98px) {
  .region-nav-branding a.site-title,
  .navbar-dark .navbar-brand a.site-title,
  .cotc-nav-branding-wrapper .navbar-brand a.site-title {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (min-width: 1035px) {
  
  /* Active state background applied to the parent nav-item */
  .cotc-main-nav .nav-item.active,
  .cotc-main-nav .nav-item:has(.is-active),
  .cotc-main-nav .nav-item:has(.active) {
    background-color: rgba(178, 34, 34, 0.4) !important;
  }

  /* Sizzling / Steaming overlay for active state */
  .cotc-main-nav .nav-link.is-active::after,
  .cotc-main-nav .nav-link.active::after,
  .cotc-main-nav .nav-item.active .nav-link::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
     radial-gradient(circle at 80%, rgba(255, 255, 255, 0.2) 5%, transparent 40%),
     radial-gradient(circle at -30%, rgba(255, 255, 255, 0.2) 20%, transparent 40%); 
    background-size: 150%;
    animation: steamRise 3s linear infinite;
    z-index: -1;
    pointer-events: none;
  }
  
  /* Regular Hover State */
  .cotc-main-nav .nav-item:hover .nav-link {
    background-color: var(--cotc-red, #B22222) !important;
    color: #fff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    transition: background-color 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
  }

  /*
  --- CANNONBALL EFFECTS COMMENTED OUT ---
  .cotc-main-nav .nav-item::before {
    content: '';
    position: absolute;
    ...
  }
  */
}

@keyframes steamRise {
  0% { background-position: 0% 150%, 0% 150%; }
  50% { background-position: 0% -50%, 0% -50%; }
  100% { background-position: 0% 150%, 0% 150%; }
}