:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    /* Accessible companion to --primary, for solid buttons carrying white
       text. White on --primary is only 2.84:1, which fails WCAG AA; this
       deeper shade of the same hue reaches 4.59:1 while still reading as
       brand orange. Use --primary for accents/borders/large display type,
       --primaryDeep wherever white text sits on a filled brand background. */
    --primaryDeep: #d1451c;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
            --blackjackGreen: #0f6b4f;
        --blackjackGreenDark: #083f31;
        --blackjackGold: #ffba43;
        --blackjackRed: #d93434;
        --blackjackInk: #121212;
        --blackjackSoft: #fff8ec;
}
body.dark-mode a:visited {
    color: white;
}

body.dark-mode a {
    color: white;   
}
body {
    margin: 0;
    padding: 0;
    padding-bottom: 5.5rem;
}

@media only screen and (min-width: 48rem) {
    body {
        padding-bottom: 6.5rem;
    }
}
*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

/* Add this as it's own dark.css file and linked on all pages */
/*-- -------------------------- -->
<---      Core Dark Styles      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  :root {
    --dark: #121212;
    --medium: #282828;
    --accent: #404040;
    --bodyTextColorWhite: #fafbfc;
  }
  body.dark-mode {
    background-color: var(--dark);
  }
  body.dark-mode p,
  body.dark-mode li,
  body.dark-mode h1,
  body.dark-mode h2,
  body.dark-mode h3,
  body.dark-mode h4,
  body.dark-mode h5,
  body.dark-mode h6,
  body.dark-mode .cs-title,
  body.dark-mode .cs-text,
  body.dark-mode .cs-li {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode .light {
    display: none;
  }
  body.dark-mode .dark {
    display: block !important;
  }
  .dark {
    /* class used to hide elements that only need to be seen when dark mode is enabled */
    display: none;
  }
}
/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    transform: translate(-50%, -150%);
    opacity: 0;
  }
  /* #dark-mode-toggle {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3.75rem;
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
  } */
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5625rem;
    height: 1.5625rem;
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s,
                opacity 0.3s,
                fill 0.3s;
    fill: #000;
  }
  #dark-mode-toggle .cs-sun {
    z-index: 1;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: transform 0.3s,
                opacity 0.3s;
  }
}
/* Desktop */
@media only screen and (min-width: 64rem) {
  #dark-mode-toggle {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin-left: 1.875rem;
    margin-bottom: 0rem;
  }
  #dark-mode-toggle .cs-moon {
    /* change to whatever you need it to be */
    /* fill: #fff; */
  }
}
                                

/*  Quick Addition */
.logor {
	color: #000;

}
body.dark-mode .logor {
	color: #fff;
} 

/* #dark-mode-toggle {
    justify-content: center;
    align-items: center;
    margin: auto;
} */

/* --- PWA install banner (js/pwa-install.js) --- */
.pwa-install-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    max-width: 30rem;
    margin: 0 auto;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: #ffffff;
    color: var(--bodyTextColor);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.9rem;
    animation: pwaBannerIn 0.3s ease;
}
.pwa-install-banner__text { flex: 1 1 12rem; }
.pwa-install-banner__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.pwa-install-banner__action { white-space: nowrap; }
.pwa-install-banner__close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--bodyTextColor);
    padding: 0 0.25rem;
}
@keyframes pwaBannerIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
body.dark-mode .pwa-install-banner {
    background: #1f1f1f;
    color: var(--bodyTextColorWhite);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .pwa-install-banner__close { color: var(--bodyTextColorWhite); }