/* =========================================================
   Bearo Casino — custom.css
   Warm beekeeper bear aesthetic, no JS dependencies.
   ========================================================= */

:root {
    --honey-50:  #FFF8E6;
    --honey-100: #FFEFC2;
    --honey-200: #FFE08A;
    --honey-300: #FFD05C;
    --honey-400: #FFC02E;
    --honey-500: #F4A100;
    --honey-600: #D78A00;
    --honey-700: #A86700;
    --honey-800: #7A4900;
    --meadow-50:  #F1F8EE;
    --meadow-100: #DCEDD2;
    --meadow-200: #B6DBA1;
    --meadow-500: #4B8E33;
    --meadow-600: #3A7028;
    --meadow-700: #2C5520;
    --cream-50:  #FFFDF6;
    --cream-100: #FFF8E6;
    --cream-200: #FBEFCD;
    --wood-300: #A87F4D;
    --wood-500: #6B4A24;
    --wood-600: #503615;
    --wood-700: #3A2710;
    --sky-soft: #CDEAF7;
    --flower-yellow: #FFD25C;
    --flower-purple: #9B6FBF;
    --amber-glow: #FFB531;
}

/* ---------- Base & smooth scrolling --------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body { background-color: var(--cream-50); }
::selection { background: var(--honey-300); color: var(--wood-700); }

/* ---------- Honeycomb pattern background --------- */
.honeycomb-pattern {
    background-color: transparent;
    background-image:
        linear-gradient(60deg, transparent 25%, rgba(244,161,0,.55) 25%, rgba(244,161,0,.55) 26%, transparent 26%, transparent 74%, rgba(244,161,0,.55) 74%, rgba(244,161,0,.55) 75%, transparent 75%),
        linear-gradient(120deg, transparent 25%, rgba(244,161,0,.55) 25%, rgba(244,161,0,.55) 26%, transparent 26%, transparent 74%, rgba(244,161,0,.55) 74%, rgba(244,161,0,.55) 75%, transparent 75%),
        linear-gradient(rgba(244,161,0,.55) 1px, transparent 1px);
    background-size: 56px 32px;
    background-position: 0 0, 0 0, 0 16px;
}

/* ---------- Header / Nav --------- */
#site-header.is-scrolled .header-inner {
    background-color: rgba(255, 253, 246, 0.95);
    box-shadow: 0 8px 24px -12px rgba(80, 54, 21, 0.18);
}
.nav-link {
    position: relative;
    padding: 0.55rem 0.95rem;
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 700;
    color: var(--wood-600);
    border-radius: 999px;
    transition: color .25s ease, background-color .25s ease;
}
.nav-link:hover { color: var(--honey-700); background: var(--honey-50); }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--honey-400), var(--amber-glow));
    border-radius: 2px;
    transition: width .25s ease, left .25s ease;
}
.nav-link:hover::after { width: 60%; left: 20%; }

.mobile-nav-link {
    display: block;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 700;
    color: var(--wood-700);
    background: var(--cream-50);
    transition: background .2s ease, color .2s ease;
}
.mobile-nav-link:hover { background: var(--honey-100); color: var(--honey-800); }

.logo-mark { transition: transform .35s cubic-bezier(.16,1,.3,1); }
a:hover .logo-mark { transform: rotate(-6deg) scale(1.05); }

/* ---------- CTAs --------- */
.cta-honey {
    background: linear-gradient(135deg, var(--honey-300) 0%, var(--honey-400) 50%, var(--honey-500) 100%);
    color: var(--wood-700);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.cta-honey::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s ease;
    z-index: -1;
}
.cta-honey:hover::before { transform: translateX(100%); }
.cta-honey:hover { transform: translateY(-2px); }

.cta-wood {
    background: var(--wood-700);
    color: var(--cream-50);
    position: relative;
}
.cta-wood:hover { background: var(--wood-600); transform: translateY(-2px); }

/* ---------- Hero scenery --------- */
.hero-meadow { padding-top: 1rem; }
.hero-sky {
    background: linear-gradient(180deg, var(--sky-soft) 0%, #FFF8E6 55%, var(--meadow-50) 100%);
}
.hero-photo {
    overflow: hidden;
}
.hero-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
/* Subtle cream protection only where text actually lives:
   - top-left soft radial behind the H1
   - thin bottom gradient for stat cards
   - right side stays clean (bonus card has its own background)
   The bear, hives and beehives all remain visible. */
.hero-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 65% at 25% 30%, rgba(255, 248, 230, 0.78) 0%, rgba(255, 248, 230, 0.45) 40%, rgba(255, 248, 230, 0) 75%),
        linear-gradient(180deg, rgba(205, 234, 247, 0.15) 0%, rgba(205, 234, 247, 0) 22%, rgba(255, 253, 246, 0) 70%, rgba(255, 253, 246, 0.85) 100%);
}
@media (max-width: 1024px) {
    .hero-photo-overlay {
        background: linear-gradient(180deg, rgba(255, 248, 230, 0.55) 0%, rgba(255, 248, 230, 0.85) 60%, rgba(255, 253, 246, 0.95) 100%);
    }
}
.hero-grass {
    background:
        radial-gradient(ellipse 800px 80px at 20% 100%, rgba(75, 142, 51, 0.25), transparent 70%),
        radial-gradient(ellipse 800px 80px at 80% 100%, rgba(75, 142, 51, 0.25), transparent 70%),
        linear-gradient(180deg, transparent 0%, var(--meadow-100) 60%, var(--meadow-200) 100%);
}
.hero-flowers::before, .hero-flowers::after {
    content: '';
    position: absolute;
    bottom: 8%;
    width: 14px; height: 14px;
    border-radius: 50%;
    box-shadow:
        100px 0 0 -2px var(--flower-yellow),
        260px -10px 0 -3px var(--flower-purple),
        420px 5px 0 -2px var(--honey-300),
        580px -8px 0 -3px var(--flower-yellow),
        740px 3px 0 -2px var(--flower-purple),
        900px -6px 0 -3px var(--honey-300),
        1080px 0 0 -2px var(--flower-yellow);
}
.hero-flowers::before { left: -50px; opacity: .85; }
.hero-flowers::after { left: -150px; bottom: 4%; opacity: .55; }

/* Stats card */
.hero-stat {
    background: rgba(255, 253, 246, 0.7);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(244, 161, 0, 0.25);
    border-radius: 1.25rem;
    padding: 0.85rem 1rem;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.hero-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(244, 161, 0, .35); }

/* Bonus chip */
.bonus-chip {
    background: var(--meadow-100);
    color: var(--meadow-700);
    border: 1px solid var(--meadow-200);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ---------- Bonus cards --------- */
.bonus-card {
    background: var(--cream-50);
    border: 1px solid var(--cream-200);
    border-radius: 1.5rem;
    padding: 1.75rem;
    position: relative;
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .25s ease;
    overflow: hidden;
}
.bonus-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(244,161,0,.08) 100%);
    pointer-events: none;
}
.bonus-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(80, 54, 21, 0.22);
    border-color: var(--honey-300);
}
.bonus-card-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1rem;
    transition: transform .35s ease;
}
.bonus-card:hover .bonus-card-icon { transform: rotate(-6deg) scale(1.05); }
.bonus-card-tag {
    display: inline-block;
    background: var(--meadow-100);
    color: var(--meadow-700);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 0.6rem;
}
.bonus-card-cta {
    display: inline-flex;
    align-items: center;
    color: var(--honey-700);
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    transition: color .2s ease, transform .2s ease;
}
.bonus-card-cta:hover { color: var(--wood-700); transform: translateX(2px); }

/* Honey shine on the heading */
.honey-shine {
    background: linear-gradient(90deg, var(--honey-500), var(--amber-glow), var(--honey-500));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: honeyShine 4s ease-in-out infinite;
}
@keyframes honeyShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ---------- Game tabs and cards --------- */
.game-tab {
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 700;
    color: var(--wood-600);
    background: var(--cream-50);
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all .25s ease;
}
.game-tab:hover { background: var(--honey-100); color: var(--honey-800); border-color: var(--honey-200); }
.game-tab.is-active {
    background: linear-gradient(135deg, var(--honey-300), var(--honey-500));
    color: var(--wood-700);
    border-color: var(--honey-600);
    box-shadow: 0 8px 20px -10px rgba(244, 161, 0, .55);
}

.games-panel { display: none; animation: fadeUp .4s ease both; }
.games-panel.is-active { display: block; }

.game-card {
    background: var(--cream-50);
    border-radius: 1.25rem;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
    border: 1px solid var(--cream-200);
}
.game-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px -18px rgba(80, 54, 21, 0.3);
}
.game-card:focus-visible {
    outline: 3px solid var(--honey-500);
    outline-offset: 3px;
}
.game-card:hover .game-card-play { transform: scale(1.08); }
.game-card-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.game-card-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.45;
}
.game-card-emoji {
    font-size: 3.5rem;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
    transition: transform .35s ease;
}
.game-card:hover .game-card-emoji { transform: scale(1.1) rotate(-4deg); }
.game-card-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.game-card:hover .game-card-cover { transform: scale(1.06); }
.game-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(58, 39, 16, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
}
.game-card:hover .game-card-overlay { opacity: 1; }
.game-card-play {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--honey-300), var(--honey-500));
    color: var(--wood-700);
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -8px rgba(244, 161, 0, .7);
    transition: transform .25s ease;
}
.game-card-play:hover { transform: scale(1.08); }
.game-card-tag {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: rgba(255, 253, 246, 0.92);
    color: var(--wood-700);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.game-card-body { padding: 0.85rem 1rem 1rem; }

/* ---------- VIP tiers --------- */
.vip-tier {
    background: rgba(255, 253, 246, 0.06);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 253, 246, 0.12);
    border-radius: 1.5rem;
    padding: 1.75rem;
    transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.vip-tier:hover {
    transform: translateY(-6px);
    background: rgba(255, 253, 246, 0.1);
    border-color: var(--honey-400);
}
.vip-tier-badge {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: rgba(255, 253, 246, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: transform .35s ease;
}
.vip-tier:hover .vip-tier-badge { transform: rotate(-8deg); }
.vip-tier-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.vip-tier-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: rgba(255, 248, 230, 0.85);
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.9rem;
}
.vip-tier-list li i {
    color: var(--honey-300);
    width: 20px;
    text-align: center;
}

.vip-perk {
    background: rgba(255, 253, 246, 0.06);
    border: 1px solid rgba(255, 253, 246, 0.12);
    border-radius: 1.25rem;
    padding: 1.25rem;
}

/* ---------- Payments --------- */
.payment-badge {
    background: var(--cream-50);
    border: 1px solid var(--cream-200);
    border-radius: 1rem;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.payment-badge:hover {
    transform: translateY(-3px);
    border-color: var(--honey-300);
    box-shadow: 0 12px 24px -14px rgba(80, 54, 21, 0.25);
}
.payment-logo {
    width: 56px; height: 36px;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: .03em;
}
.payment-name {
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--wood-600);
}
.payment-info {
    background: var(--cream-50);
    border-radius: 1.5rem;
    padding: 1.75rem;
    border: 1px solid var(--cream-200);
}

/* ---------- Trust --------- */
.trust-mini {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--cream-50);
    border: 1px solid var(--cream-200);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    transition: transform .2s ease, border-color .2s ease;
}
.trust-mini:hover { transform: translateY(-2px); border-color: var(--honey-300); }
.trust-mini i { font-size: 1.4rem; flex-shrink: 0; }
.trust-mini span { font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif; font-size: 0.9rem; color: var(--wood-600); line-height: 1.3; }
.trust-mini strong { font-weight: 800; color: var(--wood-700); }

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.trust-num {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 12px;
    background: var(--honey-200);
    color: var(--wood-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 900;
    font-size: 0.85rem;
}

/* ---------- FAQ --------- */
.faq-item {
    background: var(--cream-50);
    border: 1px solid var(--cream-200);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item[open] { border-color: var(--honey-300); box-shadow: 0 12px 28px -16px rgba(80, 54, 21, 0.2); }
.faq-summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 800;
    color: var(--wood-700);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-icon {
    color: var(--honey-700);
    transition: transform .25s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-body {
    padding: 0 1.25rem 1.25rem;
    color: var(--wood-500);
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Support tiles */
.support-tile {
    background: var(--cream-50);
    border: 1px solid var(--cream-200);
    border-radius: 1.25rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform .25s ease, border-color .25s ease;
}
.support-tile:hover { transform: translateY(-3px); border-color: var(--honey-300); }

/* ---------- Footer --------- */
.footer-link {
    color: rgba(255, 248, 230, 0.7);
    transition: color .2s ease, padding-left .2s ease;
    font-family: 'Nunito', system-ui, sans-serif;
}
.footer-link:hover { color: var(--honey-300); padding-left: 4px; }
.footer-social {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cream-50);
    background: rgba(255, 253, 246, 0.08);
    border: 1px solid rgba(255, 253, 246, 0.12);
    transition: all .25s ease;
}
.footer-social:hover {
    background: var(--honey-400);
    color: var(--wood-700);
    transform: translateY(-2px);
}
.footer-trust-badge {
    background: rgba(255, 253, 246, 0.08);
    border: 1px solid rgba(255, 253, 246, 0.12);
    color: rgba(255, 248, 230, 0.85);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- Animations: bees, pollen, fade --------- */
.bee {
    position: absolute;
    display: inline-block;
    line-height: 0;
    filter: drop-shadow(0 6px 10px rgba(80, 54, 21, 0.25));
    animation: beeFloat 14s ease-in-out infinite;
    will-change: transform;
}
.bee img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}
.bee-1 { top: 18%; left: 6%;  width: 60px; animation-delay: 0s; }
.bee-2 { top: 30%; right: 8%; width: 78px; animation-delay: 4s; animation-direction: reverse; }
.bee-3 { bottom: 24%; left: 36%; width: 64px; animation-delay: 8s; }
@media (max-width: 640px) {
    .bee-1 { width: 44px; left: 4%; }
    .bee-2 { width: 56px; right: 4%; }
    .bee-3 { width: 48px; }
}
@keyframes beeFloat {
    0%   { transform: translate(0, 0) rotate(-8deg); }
    20%  { transform: translate(60px, -28px) rotate(6deg); }
    40%  { transform: translate(140px, 16px) rotate(-4deg); }
    60%  { transform: translate(80px, 60px) rotate(8deg); }
    80%  { transform: translate(-20px, 32px) rotate(-6deg); }
    100% { transform: translate(0, 0) rotate(-8deg); }
}

.pollen { z-index: 1; }
.pollen span {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--honey-300) 0%, transparent 70%);
    opacity: 0.7;
    animation: pollenRise 16s linear infinite;
}
.pollen span:nth-child(1) { left: 10%; bottom: -10px; animation-delay:  0s; }
.pollen span:nth-child(2) { left: 22%; bottom: -10px; animation-delay:  3s; }
.pollen span:nth-child(3) { left: 36%; bottom: -10px; animation-delay:  6s; }
.pollen span:nth-child(4) { left: 48%; bottom: -10px; animation-delay:  1s; }
.pollen span:nth-child(5) { left: 60%; bottom: -10px; animation-delay:  9s; }
.pollen span:nth-child(6) { left: 72%; bottom: -10px; animation-delay: 12s; }
.pollen span:nth-child(7) { left: 84%; bottom: -10px; animation-delay:  4s; }
.pollen span:nth-child(8) { left: 92%; bottom: -10px; animation-delay:  7s; }
@keyframes pollenRise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.8; }
    50%  { transform: translateY(-280px) translateX(40px); opacity: 0.6; }
    100% { transform: translateY(-560px) translateX(-20px); opacity: 0; }
}

/* Fade-up entrance */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp .8s ease both; }
.animate-delay-1 { animation-delay: .12s; }
.animate-delay-2 { animation-delay: .24s; }
.animate-delay-3 { animation-delay: .36s; }
.animate-delay-4 { animation-delay: .48s; }

/* Honey jar gentle bob */
.honey-jar-icon { animation: jarBob 5s ease-in-out infinite; }
@keyframes jarBob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-6px) rotate(2deg); }
}

/* Beehive emblem subtle shimmer */
.beehive-emblem { animation: hiveBreathe 6s ease-in-out infinite; }
@keyframes hiveBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

/* Hero bonus card slight tilt on hover */
.hero-bonus-card { transition: transform .5s ease, box-shadow .5s ease; }
.hero-bonus-card:hover {
    transform: translateY(-4px) rotate(-0.3deg);
    box-shadow: 0 28px 60px -28px rgba(80, 54, 21, 0.4);
}

/* Print friendly */
@media print {
    .floating-bees, .pollen, #site-header { display: none; }
}

/* Section spacing tweak for small screens */
@media (max-width: 640px) {
    section { scroll-margin-top: 80px; }
}
section[id] { scroll-margin-top: 90px; }