:root {
    --ff-navy:      #1a3a5c;
    --ff-navy-dk:   #122740;
    --ff-crimson:   #8B1A1A;
    --ff-blue:      #2E6DA4;
    --ff-blue-btn:  #1a7ae0;
    --ff-blue-lt:   #e8f2fb;
    --ff-tile-bg:   #d6e8f7;
    --ff-white:     #ffffff;
    --ff-charcoal:  #333333;
    --ff-gray:      #6b7280;
    --ff-border:    #dde6ee;
    --ff-section-alt: #f4f8fc;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Open Sans', sans-serif;
    /* Bavarian diamond tile background — matches frankenmuthfun.com exactly */
    background-color: var(--ff-tile-bg);
    background-image:
            repeating-linear-gradient(45deg,  rgba(255,255,255,.6) 0, rgba(255,255,255,.6) 1px, transparent 0, transparent 50%),
            repeating-linear-gradient(-45deg, rgba(255,255,255,.6) 0, rgba(255,255,255,.6) 1px, transparent 0, transparent 50%);
    background-size: 38px 38px;
    color: var(--ff-charcoal);
}

h1, h2, h3, h4 { font-family: 'Bree Serif', Georgia, serif; }

/* ── BREADCRUMB ── */
.breadcrumb-wrap { background: var(--ff-white); border-bottom: 1px solid var(--ff-border); }
.breadcrumb-item a { color: var(--ff-blue); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--ff-gray);  }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ff-gray); }

/* ── HERO ── */
.hero {
    background: linear-gradient(160deg, var(--ff-navy-dk) 0%, var(--ff-navy) 60%, #255b94 100%);
    padding: 70px 0 55px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
            repeating-linear-gradient(45deg,  rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 0, transparent 50%),
            repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 0, transparent 50%);
    background-size: 28px 28px;
    pointer-events: none;
}

.hero .badge-category {
    background: var(--ff-blue-btn); color: #fff;
    font-size: .7rem; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; padding: .3em .85em;
    border-radius: 3px; display: inline-block; margin-bottom: .75rem;
}
.hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.18; color: #fff; }
.hero .subtitle { color: rgba(255,255,255,.8); font-size: 1rem; max-width: 540px; font-family: 'Open Sans', sans-serif; }
.hero .stars { color: #ffc107; }
.hero .rating-text { color: rgba(255,255,255,.75); font-size: .85rem; }

/* ── BUTTONS ── */
.btn-primary-ff {
    background-color: var(--ff-blue-btn); color: #fff; font-weight: 700;
    border: none; padding: .6em 1.5em; border-radius: 4px; font-size: .9rem;
    transition: background .2s, transform .15s; text-decoration: none; display: inline-block;
}
.btn-primary-ff:hover { background-color: #155fba; color: #fff; transform: translateY(-1px); }
.btn-outline-white {
    border: 2px solid rgba(255,255,255,.6); color: #fff; font-weight: 600;
    padding: .55em 1.4em; border-radius: 4px; font-size: .9rem;
    transition: border-color .2s, background .2s; text-decoration: none; display: inline-block;
}
.btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
.btn-blue-outline {
    border: 2px solid var(--ff-blue); color: var(--ff-blue); font-weight: 700;
    padding: .5em 1.3em; border-radius: 4px; font-size: .88rem;
    transition: all .2s; text-decoration: none; display: inline-block;
}
.btn-blue-outline:hover { background: var(--ff-blue); color: #fff; }

/* ── QUICK INFO STRIP ── */
.quick-info { background: var(--ff-navy); border-top: 3px solid var(--ff-blue-btn); }
.quick-info .qi-item { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.9); font-weight: 600; font-size: .85rem; }
.quick-info .qi-item i { color: #ffc107; font-size: 1rem; }

/* ── SECTION LABELS ── */
.section-label { font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ff-blue); font-family: 'Open Sans', sans-serif; }
.section-title { font-size: clamp(1.45rem, 2.8vw, 1.9rem); color: var(--ff-crimson); }
.section-divider { width: 44px; height: 3px; background: var(--ff-crimson); border: none; margin: 0 0 1.4rem; }

/* ── CONTENT AREA ── */
.content-area { background: var(--ff-white); }
.content-area p { line-height: 1.8; color: var(--ff-charcoal); }
.content-area a { color: var(--ff-blue); }
.content-area a:hover { color: var(--ff-crimson); }

/* ── SIDEBAR ── */
.sidebar { background: var(--ff-white); border: 1px solid var(--ff-border); border-radius: 4px; }
.sidebar-title { font-family: 'Open Sans', sans-serif; font-size: .88rem; font-weight: 700; color: var(--ff-charcoal); padding: .75rem 1rem; border-bottom: 1px solid var(--ff-border); background: var(--ff-section-alt); }
.sidebar-link { display: flex; align-items: center; justify-content: space-between; padding: .55rem 1rem; border-bottom: 1px solid #f0f0f0; text-decoration: none; color: var(--ff-blue); font-size: .88rem; font-weight: 600; transition: background .15s; }
.sidebar-link:last-child { border-bottom: none; }
.sidebar-link:hover { background: var(--ff-blue-lt); color: var(--ff-crimson); }
.sidebar-link.active { background: var(--ff-blue-lt); color: var(--ff-crimson); }
.sidebar-badge { background: var(--ff-navy); color: #fff; font-size: .7rem; font-weight: 700; padding: .15em .55em; border-radius: 20px; min-width: 22px; text-align: center; }

/* ── INFO CARDS ── */
.info-card { background: var(--ff-white); border-radius: 6px; border: 1px solid var(--ff-border); }
.info-card .card-icon { width: 46px; height: 46px; background: var(--ff-blue-lt); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; color: var(--ff-blue); }
.info-card h3 { color: var(--ff-crimson); }
.hours-row { border-bottom: 1px solid #f0f0f0; padding: .4rem 0; font-size: .88rem; }
.hours-row:last-child { border-bottom: none; }
.hours-row .day { font-weight: 700; min-width: 110px; display: inline-block; }
.hours-open { color: #2d6a4f; font-weight: 600; }

/* ── HIGHLIGHTS ── */
.highlight-item { display: flex; gap: 12px; align-items: flex-start; }
.highlight-icon { width: 40px; height: 40px; background: var(--ff-blue-lt); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; color: var(--ff-blue); }

/* ── REVIEWS ── */
.review-card { background: var(--ff-white); border: 1px solid var(--ff-border); border-radius: 6px; border-top: 3px solid var(--ff-blue); }
.review-card .stars { color: #ffc107; font-size: .85rem; }
.review-card blockquote { font-size: .9rem; color: #444; border: none; padding: 0; margin: 0; font-style: italic; line-height: 1.7; }
.review-card .reviewer { font-weight: 700; font-size: .82rem; color: var(--ff-navy); }

/* ── FAQ ── */
.faq-section .accordion-button { font-family: 'Open Sans', sans-serif; font-weight: 700; color: var(--ff-navy); background-color: var(--ff-white); font-size: .93rem; }
.faq-section .accordion-button:not(.collapsed) { color: var(--ff-crimson); background-color: var(--ff-blue-lt); box-shadow: none; }
.faq-section .accordion-item { border: 1px solid var(--ff-border); border-radius: 5px !important; margin-bottom: .5rem; overflow: hidden; }
.faq-section .accordion-body { color: #555; font-size: .92rem; line-height: 1.7; }

/* ── CTA BANNER ── */
.cta-banner { background: linear-gradient(135deg, var(--ff-navy-dk), var(--ff-navy)); }

/* ── TAG PILLS ── */
.tag-pill { display: inline-block; background: var(--ff-blue-lt); color: var(--ff-blue); border-radius: 3px; padding: .22em .75em; font-size: .76rem; font-weight: 700; letter-spacing: .4px; border: 1px solid #c5dcf0; }

/* ── NEARBY CARDS ── */
.nearby-card { background: var(--ff-white); border: 1px solid var(--ff-border); border-radius: 6px; text-align: center; transition: box-shadow .2s; text-decoration: none; display: block; color: inherit; }
.nearby-card:hover { box-shadow: 0 4px 16px rgba(26,58,92,.12); }
.nearby-card strong { color: var(--ff-navy); font-size: .88rem; display: block; }
.nearby-card:hover strong { color: var(--ff-crimson); }

/* ── FOOTER ── */
footer { background-color: var(--ff-navy); color: rgba(255,255,255,.65); font-size: .84rem; }
footer a { color: #7eb8e8; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
footer hr { border-color: rgba(255,255,255,.12); }

@media (max-width: 576px) {
    .hero { padding: 45px 0 35px; }
    .hero::after { font-size: 8rem; }
}


.placeholder-img{
    background:
            linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02)),
            repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0, rgba(0,0,0,.05) 12px, rgba(0,0,0,.02) 12px, rgba(0,0,0,.02) 24px);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .75rem;
    width: 100%;
    height: 100%;
    min-height: 140px;
    display:flex;
    align-items:center;
    justify-content:center;
    color: rgba(0,0,0,.45);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
















.navbar {
    background-color: #102f5b;
    color: #FFFFFF;
    font-family: 'Bree Serif', serif;
    padding:10px;
}

.navbar a
{
    color:#FFFFFF;
}
.navbar-collapse
{
    z-index:5;
    background:#102f5b;
    padding:10px;
}
.navbar .navbar-nav .nav-link
{
    font-size: 1.3em;
    color: #FFFFFF;
}
.navbar .navbar-nav .nav-link:hover
{
    color:#0492c7;
}

.navbar .form-floating {color:black}

.accordion-button
{
    background-color: #E7F1FF;
}

h1,h2,h3 {color:#903}

p.firstpara { margin-top:5px}
p.firstpara:first-child:first-letter {
    color: #903;
    float: left;
    font-family: Georgia;
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
}

.footer-content a {
    color: #EE4747;
    text-decoration: none
}

.footer-content a:hover,
.footer-content a:focus {
    color: #F97676;
    text-decoration: none
}

.footer-content a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

.page-foot
{
    color:#FFFFFF;
    padding-bottom:0;
    background-color: #102f5b;
    padding-top:10px;
}

.page-foot h4 { color:#FFFFFF}

a {text-decoration: none}
a:hover{color:#903}