:root {
  /* COTC Theme Colors */
  --cotc-heading: #88201B;
  --cotc-red: #CC2207;
  --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%);

  /* Typography */
  --cotc-copperplate: 'Copperplate', serif;
  --cotc-battlesbridge: 'Battlesbridge';
  --cotc-roboto: 'Roboto', sans-serif;
}

/* =========================================
   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;
}

.navbar-dark .navbar-brand a.site-title {
    font-family: var(--cotc-battlesbridge);
    text-transform: unset;
    font-size: 0.5em;
    word-spacing: -4px;
}

.parallax-backgrounds-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-color: var(--cotc-black);
}

.parallax-backgrounds-wrapper .bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.parallax-backgrounds-wrapper .bg-layer.active,
.parallax-backgrounds-wrapper .bg-layer.is-active {
  opacity: 1;
}

.parallax-backgrounds-wrapper .bg-layer img,
.parallax-backgrounds-wrapper .bg-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.parallax-foreground {
  position: relative;
  z-index: 10;
}

.parallax-cutout {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}

.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-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.25em;
    font-weight: 600;
}


/* =========================================
   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[role="contentinfo"] .region-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

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

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);
}

.dev-credits {
  margin-top: 3rem;
  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;}