/* Banner Core Styles - Shared across desktop and mobile */

/* ============================================================
   BANNER CONTAINER - Compressed height
   ============================================================ */

.banner-container {
    position: relative;
    width: 100%;
    height: 140px; /* Reduced from ~180px */
    background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 70%, #B8E6B8 100%);
    overflow: hidden;
    border-bottom: none;
}

/* ============================================================
   ABOUT BUTTON - In upper left corner of banner
   ============================================================ */

.banner-about-btn {
    position: absolute;
    top: 8px;        /* ← ADJUST: Distance from top edge */
    left: 8px;       /* ← ADJUST: Distance from left edge */
    z-index: 15;     /* Above all banner elements */
    background: rgba(135, 206, 235, 0.85);
    color: white;
    border: 2px solid #87CEEB;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.banner-about-btn:hover {
    background: white;
    border-color: #667eea;
    transform: scale(1.05);
}

.banner-about-btn:active {
    transform: scale(0.95);
}
/* ============================================================
   RESET LINKS BUTTON - In upper right corner of banner
   ============================================================ */

.banner-reset-btn {
    position: absolute;
    top: 8px;        /* ← ADJUST: Distance from top (match About button) */
    right: 8px;      /* ← ADJUST: Distance from right edge */
    z-index: 15;     /* Above all banner elements */
    background: rgba(255, 255, 255, 0.85);
    color: #333;
    border: 2px solid #87CEEB;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.banner-reset-btn:hover {
    background: white;
    border-color: #667eea;
    transform: scale(1.05);
}

.banner-reset-btn:active {
    transform: scale(0.95);
}

/* ============================================================
   TEXT ELEMENTS - Adjusted positioning for compressed banner
   ============================================================ */

.banner-text {
    position: absolute;
    top: 15px;       /* ← ADJUST: Distance from top - move title up/down */
    left: 80%;       /* ← ADJUST: Change to move left/right (e.g., 45% moves left) */
    transform: translateX(-50%);
    font-family: 'Georgia', serif;
    font-size: 32px; /* ← ADJUST: Make title bigger/smaller */
    font-weight: bold;
    color: #2c3e50;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
    z-index: 10;
    white-space: nowrap;
}

.banner-byline {
    position: absolute;
    top: 120px;       /* ← ADJUST: Distance from top - move byline up/down */
    left: 15%;       /* ← ADJUST: Change to move left/right */
    transform: translateX(-50%);
    font-family: 'Georgia', serif;
    font-size: 14px; /* ← ADJUST: Make byline bigger/smaller */
    font-style: italic;
    text-align: left;
    color: #34495e;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
    z-index: 10;
    white-space: nowrap;
}

/* INTEGRATED DISCLAIMER at bottom of banner */
.banner-disclaimer {
    position: absolute;
    bottom: 4px;     /* ← ADJUST: Distance from bottom - move disclaimer up/down */
    left: 50%;       /* ← ADJUST: Change to move left/right */
    transform: translateX(-50%);
    font-family: 'Georgia', serif;
    font-size: 11px; /* ← ADJUST: Make disclaimer bigger/smaller */
    color: #555;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9);
    z-index: 10;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 8px;
    border-radius: 3px;
}

/* ============================================================
   CITY SKYLINE - Adjusted positioning
   ============================================================ */

.city {
    position: absolute;
    left: 25%;       /* ← ADJUST: Change to move skyline left/right (e.g., 45% moves left) */
    transform: translateX(-50%);
    bottom: 35px;    /* ← ADJUST: Distance from bottom - move skyline up/down */
    z-index: 2;
}

.building {
    fill: #999999;
    stroke: #333333;
    stroke-width: 1;
}

/* ============================================================
   HILL - Adjusted positioning
   ============================================================ */

.hill {
    position: absolute;
    bottom: 0;       /* ← Usually stays at 0, but can adjust if needed */
    left: 0;
    width: 100%;
    height: 60px;    /* ← ADJUST: Make hill taller/shorter */
    z-index: 3;
}

.grass-blade {
    stroke: #2E7D32;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}

/* ============================================================
   RABBIT HOLE (Desktop/Tablet only) - Adjusted positioning
   ============================================================ */

.rabbit-hole {
    position: absolute;
    bottom: 20px;    /* ← ADJUST: Distance from bottom - move hole up/down */
    right: 25%;      /* ← ADJUST: Distance from right - move hole left/right */
    z-index: 4;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.rabbit-hole:hover {
    transform: scale(1.05);
}

.hole-opening {
    fill: #1a1a1a;
}

.hole-edge {
    stroke: #2E7D32;
    stroke-width: 2;
    fill: none;
}

/* ============================================================
   BUSH (Mobile only) - Adjusted positioning
   ============================================================ */

.bush {
    position: absolute;
    bottom: 20px;    /* ← ADJUST: Distance from bottom - move bush up/down */
    right: 25%;      /* ← ADJUST: Distance from right - move bush left/right */
    z-index: 4;
}

/* ============================================================
   RABBIT - Adjusted positioning and animation
   ============================================================ */

.rabbit {
    position: absolute;
    bottom: 15px;    /* ← ADJUST: Distance from bottom - move rabbit up/down */
    left: 50%;       /* ← ADJUST: Distance from left - move rabbit left/right */
    z-index: 5;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    opacity 0.6s ease;
    cursor: pointer;
}

.rabbit:hover {
    transform: translateY(-5px);
}

.rabbit.hiding {
    transform: translateY(80px); /* Adjusted for smaller rabbit */
    opacity: 0;
}

/* Rabbit SVG elements */
.rabbit-body {
    fill: #D2B48C;
    stroke: #333;
    stroke-width: 1.5;
}

.rabbit-jacket {
    fill: #4169E1;
    stroke: #333;
    stroke-width: 1.5;
}

.rabbit-ear {
    fill: white;
    stroke: #333;
    stroke-width: 1.5;
}

.rabbit-ear-inner {
    fill: #FFB6C1;
    stroke: none;
}

.rabbit-eye {
    fill: #333;
}

.rabbit-nose {
    fill: #FFB6C1;
}

/* ============================================================
   RESPONSIVE BEHAVIOR
   ============================================================ */

/* Desktop/Tablet - show rabbit hole, hide bush */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* Mobile - hide rabbit hole, show bush */
@media screen and (max-width: 768px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .banner-container {
        height: 120px;
    }

    .banner-text {
        font-size: 28px;
        top: 12px;
    }

    .banner-byline {
        font-size: 12px;
        top: 45px;
    }

    .banner-disclaimer {
        font-size: 10px;
        bottom: 3px;
        padding: 1px 6px;
    }

    .banner-about-btn {
        top: 6px;
        left: 6px;
        font-size: 12px;
        padding: 3px 10px;
    }

    .city {
        bottom: 38px;
    }

    .hill {
        height: 45px;
    }

    .rabbit {
        bottom: 18px;
        left: 25%;
    }

    .bush {
        bottom: 18px;
    }
}

@media screen and (max-width: 480px) {
    .banner-container {
        height: 100px;
    }

    .banner-text {
        font-size: 24px;
        top: 10px;
    }

    .banner-byline {
        font-size: 11px;
        top: 38px;
    }

    .banner-disclaimer {
        font-size: 9px;
    }

    .banner-about-btn {
        top: 5px;
        left: 5px;
        font-size: 11px;
        padding: 2px 8px;
    }

    .city {
        bottom: 32px;
        transform: translateX(-50%) scale(0.9);
    }

    .hill {
        height: 40px;
    }

    .rabbit {
        bottom: 15px;
    }

    .bush {
        bottom: 15px;
    }
}


/* ============================================================
   QUICK ADJUSTMENT GUIDE
   ============================================================

   All the lines marked with "← ADJUST:" above are safe to change!

   COMMON ADJUSTMENTS:

   1. Move "Story-free Press" title:
      - Line 44-45: Change "top" (up/down) and "left" (left/right)
      - Use percentages for left: 50% = centered, 40% = left, 60% = right

   2. Move disclaimer text:
      - Line 64-65: Change "bottom" (up/down) and "left" (left/right)

   3. Move rabbit hole:
      - Line 109-110: Change "bottom" (up/down) and "right" (left/right)
      - Use percentages: 25% = current, 30% = more left, 20% = more right

   4. Move skyline/buildings:
      - Line 95-97: Change "bottom" (up/down) and "left" (left/right)

   5. Move rabbit:
      - Line 142-143: Change "bottom" (up/down) and "left" (left/right)

   TIPS:
   - Save file and refresh browser to see changes
   - Use browser DevTools (F12) to try values live before saving
   - Percentages work better than pixels for responsive design

   ============================================================ */