@charset "utf-8";
/* ============================================================
   Dirty Squirrels MC
   Design tokens
   ------------------------------------------------------------
   Color:
     --purple-deep   #3B1E5E   deep plum purple (primary, matches
                                 top of the page gradient)
     --purple-shadow #271340   darker purple for gradients/depth
     --gold          #E0A438   warm acorn gold (accent)
     --gold-light    #F0C46B   lighter gold, hover state
     --cream         #F6F1E7   trail-dust cream (background)
     --cream-dk      #EAE1CC   cream shadow / card edge
     --green-accent  #4C8C4A   woodland green (secondary accent,
                                 matches bottom of page gradient)
     --ink           #2A1B3D   dark plum-black body text
   Type:
     Display: 'Bebas Neue'  — bold condensed, reads like a patch
     Body:    'Nunito'      — rounded, friendly, easy to read
   Signature element:
     Content blocks get a stitched-patch treatment: a dashed
     inset border suggesting embroidery, rounded like an old
     club patch. Section breaks use a little acorn mark. Header
     picks up the gradient's purple, footer picks up its green,
     so the card reads as part of the background, not a box
     dropped on top of it.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root {
    --purple-deep: #3B1E5E;
    --purple-shadow: #271340;
    --gold: #E0A438;
    --gold-light: #F0C46B;
    --cream: #F6F1E7;
    --cream-dk: #EAE1CC;
    --green-accent: #4C8C4A;
    --green-shadow: #2F5A2E;
    --ink: #2A1B3D;

    --font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
    --font-body: 'Nunito', 'Century Gothic', Verdana, sans-serif;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: linear-gradient(180deg, #3B1E5E 0%, #5B2E7E 25%, #4A6B3E 75%, #4CAF50 100%);
    min-height: 100%;
}

body#Body {
    margin: 28px auto;
    max-width: 1100px;
    background-color: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    width: calc(100% - 32px);
    border-radius: 36px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

img { max-width: 100%; display: block; }

/* ---------------------------------------------------------
   Header / wordmark
   --------------------------------------------------------- */
#Title {
    background: linear-gradient(180deg, var(--purple-deep) 0%, var(--purple-shadow) 100%);
    padding: 18px 0 0;
    text-align: center;
    border-bottom: 5px solid var(--gold);
    border-top-left-radius: 36px;
    border-top-right-radius: 36px;
}

#Title img,
#Logo {
    width: 100%;
    max-width: 620px;
    height: auto;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   Navigation — patch-style tabs
   --------------------------------------------------------- */
#NavigationBar {
    width: 100%;
    background-color: var(--purple-shadow);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 4px 0;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}

.NavButton {
    float: none;
    width: auto;
    height: auto;
    margin: 6px 4px;
    padding: 10px 20px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.06em;
    color: var(--cream) !important;
    border-radius: 4px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.NavButton a { color: var(--cream) !important; }

.NavButton:hover,
.NavButton a:hover {
    color: var(--gold-light) !important;
}

/* current-page label (a <section> with no link) reads as active, badge-style */
.NavButton:not(:has(a)) {
    color: var(--purple-shadow) !important;
    background-color: var(--gold);
    border-bottom: none;
}

/* ---------------------------------------------------------
   Layout shell
   --------------------------------------------------------- */
#Main {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

/* Section divider with a little acorn mark */
.ornament-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 36px auto;
    max-width: 480px;
}
.ornament-rule::before,
.ornament-rule::after {
    content: "";
    flex: 1;
    height: 2px;
    background-color: var(--gold);
    opacity: 0.55;
}
.ornament-rule .acorn-mark {
    margin: 0 16px;
    flex: none;
    font-size: 20px;
    line-height: 1;
}

/* ---------------------------------------------------------
   Home hero
   --------------------------------------------------------- */
.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    margin-bottom: 8px;
}

.hero-portrait {
    flex: 1 1 320px;
    max-width: 420px;
    background-color: var(--cream-dk);
    padding: 10px;
    box-shadow: 0 10px 24px rgba(48, 32, 18, 0.3);
    border: 2px dashed var(--gold);
    border-radius: 10px;
}

.hero-portrait img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.hero-text { flex: 1 1 380px; }

.hero-text h1 { text-align: left; margin-top: 0; }

.hero-text p { font-size: 20px; line-height: 1.7; }

/* ---------------------------------------------------------
   Headings & body copy
   --------------------------------------------------------- */
h1 {
    font-family: var(--font-display);
    font-size: 48px;
    letter-spacing: 0.03em;
    color: var(--purple-deep);
    text-align: center;
    margin-bottom: 4px;
}

h2 {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.02em;
    font-weight: 400;
    color: var(--gold);
}

h3 {
    font-size: 16px;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--green-accent);
}

.page-intro {
    text-align: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-style: italic;
    font-size: 20px;
    color: var(--green-accent);
    margin-bottom: 8px;
}

.prose p {
    font-size: 18px;
    margin-bottom: 20px;
}

/* ---------------------------------------------------------
   Stitched-patch content card
   --------------------------------------------------------- */
.patch-card {
    background-color: #fff;
    border-radius: 14px;
    border: 2px solid var(--purple-deep);
    outline: 2px dashed var(--gold);
    outline-offset: -8px;
    padding: 28px 30px;
    margin-bottom: 28px;
    box-shadow: 0 8px 20px rgba(48, 32, 18, 0.12);
}

/* ---------------------------------------------------------
   Blog day-selector menu — extensible pill tabs
   --------------------------------------------------------- */
.day-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 4px 0 36px;
}

.day-menu a,
.day-menu .active-day {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.05em;
    padding: 8px 24px;
    border-radius: 999px;
    border: 2px solid var(--purple-deep);
    color: var(--purple-deep) !important;
    background-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.day-menu a:hover {
    background-color: var(--purple-deep);
    color: var(--cream) !important;
}

.day-menu .active-day {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--purple-shadow) !important;
}

/* ---------------------------------------------------------
   Blog
   --------------------------------------------------------- */
.blog-entry .prose p { font-size: 18px; }

/* ---------------------------------------------------------
   Galleries — patch-badge frame treatment
   --------------------------------------------------------- */
.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: 0 0 8px;
}

.row > .column {
    float: none;
    width: 150px;
    margin: 0;
    padding: 0;
}

.column img.hover-shadow {
    width: 150px;
    height: 150px;
    object-fit: cover;
    background-color: var(--cream);
    border: 5px solid #fff;
    outline: 3px solid var(--purple-deep);
    outline-offset: -2px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.column img.hover-shadow:hover {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: 0 10px 20px rgba(48, 32, 18, 0.35);
}

/* Modal / lightbox */
.modal {
    display: none;
    position: fixed;
    z-index: 10;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(48, 32, 18, 0.92);
}

.modal-content {
    position: relative;
    background-color: var(--cream);
    margin: auto;
    padding: 10px;
    width: 92%;
    max-width: 800px;
    border: 2px solid var(--gold);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.close {
    color: var(--cream);
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    line-height: 34px;
    text-align: center;
    background-color: rgba(48, 32, 18, 0.75);
    border: 1px solid var(--gold);
    border-radius: 50%;
    font-size: 26px;
    font-weight: bold;
    z-index: 5;
}
.close:hover, .close:focus { color: var(--purple-shadow); background-color: var(--gold); cursor: pointer; }

.mySlides { display: none; }

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 14px;
    margin-top: -24px;
    color: var(--cream);
    background-color: rgba(48, 32, 18, 0.55);
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s ease;
    user-select: none;
}
.next { right: 8px; border-radius: 6px; }
.prev { left: 8px; border-radius: 6px; }
.prev:hover, .next:hover { background-color: var(--gold); color: var(--purple-shadow); }

.numbertext {
    color: var(--gold-light);
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    letter-spacing: 0.08em;
}

/* ---------------------------------------------------------
   Contact page — squirrel roster cards
   --------------------------------------------------------- */
.roster {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.roster-card {
    background-color: #fff;
    border: 2px solid var(--purple-deep);
    outline: 2px dashed var(--gold);
    outline-offset: -7px;
    border-radius: 12px;
    padding: 20px 24px;
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 260px;
    text-align: center;
    box-shadow: 0 8px 18px rgba(48, 32, 18, 0.12);
}

.roster-card h2 { margin: 0 0 8px; font-size: 24px; }

.roster-card h3 {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

.roster-card h3 a { color: var(--green-accent); }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
#FooterEnd {
    width: 100%;
    background: linear-gradient(0deg, var(--green-accent) 0%, var(--green-shadow) 100%);
    border-top: 5px solid var(--gold);
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;
    padding: 30px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

#SocialLinks { float: none; width: auto; height: auto; margin: 0; }

#CopyRight {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    color: var(--cream) !important;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-align: center;
}

.social-icons { margin: 0; padding: 0; }
.social-icons li { display: inline-block; list-style-type: none; }
.social-icons li a { border-bottom: none; }
.social-icons li img {
    width: 44px;
    height: 44px;
    margin-right: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    opacity: 0.95;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.social-icons li img:hover { opacity: 1; transform: translateY(-2px); }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 640px) {
    body#Body { border-radius: 20px; margin: 14px auto; width: calc(100% - 16px); }
    #Title { border-top-left-radius: 20px; border-top-right-radius: 20px; }
    #FooterEnd { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
    body#Body { font-size: 16px; }
    #Main { padding: 32px 16px 48px; }
    .hero { flex-direction: column; }
    .hero-portrait { max-width: 100%; }
    h1 { font-size: 36px; }
    .page-intro { font-size: 17px; }
    .column, .row > .column { width: 130px; }
    .column img.hover-shadow { width: 130px; height: 130px; }
    .NavButton { font-size: 17px; padding: 8px 14px; }
    .patch-card, .roster-card { padding: 20px; }
}