/* ==========================================================================
   responsive.css  -  first-pass mobile overlay (Path A)
   --------------------------------------------------------------------------
   Layered on top of style.css / main.css. Everything is scoped inside media
   queries so the desktop design (>= 981px) is left exactly as-is. Below that
   the fixed 885px layout is unwound into a single fluid column so the site is
   usable on phones/tablets without horizontal scrolling.

   This is intentionally an overlay, not a rewrite (that is Path B). A few
   decorative, pixel-anchored bits are simply hidden on small screens.
   ========================================================================== */

/* Hamburger toggle exists in the markup at all widths but is only shown on
   mobile (below). On desktop the menu displays normally and these are hidden. */
#menuToggle, .hamburger, .menuBackdrop { display: none; }

@media (max-width: 1100px)
{
    /* ---- global fluidity / no sideways scroll -------------------------- */
    html, body            { overflow-x: hidden; }
    #container            { min-width: 0 !important; overflow-x: hidden; padding-top: 44px !important; } /* room for the fixed top bar */
    #wrapper              { width: auto !important; max-width: 100%;
                            margin: 20px 8px 0 !important; }
    #wrapper, #header, #content, #mainContent, #menu,
    .greenBlock, .grayBlock, .sheetBox, .sheetBoxText, .sheetBoxHeader,
    .sheetBoxFooter, .mainNavBlock, #postit
                          { box-sizing: border-box; }
    img                   { max-width: 100%; height: auto; }

    /* ---- hide pixel-anchored decoration ------------------------------- */
    #whiteBlockL, #whiteBlockR, #greenLine, #likeUs, .flower,
    #shadowT, #shadowTL, #shadowTR, #shadowL, #shadowR,
    #shadowB, #shadowBL, #shadowBR, #calendarArrow,
    #timelineContainer, #timeline   /* 908px-wide widget, breaks the column */
                          { display: none !important; }

    /* ---- header: stack instead of absolute positioning ---------------- */
    #header
    {
        height: auto !important;
        display: flex;
        flex-direction: row;            /* sun details + today's date side by side */
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 10px 5px 12px;
    }
    #header > a, #header > div, #header > p, #header > section
    {
        position: static !important;
        top: auto !important; left: auto !important;
        right: auto !important; bottom: auto !important;
        float: none !important;
    }
    /* On mobile the logo lives in the sticky top bar (right side), using the
       clean shadow-free logo. It's fixed, so it no longer takes header space. */
    a#logo
    {
        position: fixed !important;
        top: 5px !important;
        right: 10px !important;
        left: auto !important;
        width: 96px !important;
        height: 38px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 3px 7px !important;
        box-sizing: border-box !important;
        z-index: 1002 !important;         /* above the sticky bar */
        background-color: #fff !important; /* white chip so the logo reads on green */
        border-radius: 4px !important;
        background-image: url('layout/logoHeader.png') !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        filter: none !important;
    }
    div#calendar
    {
        width: 112px !important;
        height: 104px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        margin: 0 !important;
        padding: 9px 6px 6px 6px !important;
    }
    div#calendar p#today     { font-size: 11px !important; margin-bottom: 0 !important; }
    div#calendar p#todayDay  { font-size: 30px !important; line-height: 33px !important; }
    div#calendar p#todayDate { font-size: 10px !important; }
    div#calendar p#saintsDay { font-size: 10px !important; line-height: 11px !important; margin: 0 3px !important; }
    a#nextOccasion { width: 100% !important; max-width: 407px;
                     background-size: contain !important;
                     background-repeat: no-repeat !important;
                     margin: 6px auto !important; }
    div#sunBlock   { width: auto !important; max-width: 210px !important; text-align: left !important;
                     font-size: 11px !important; line-height: 15px !important;
                     background-position: left top !important; padding: 40px 0 0 0 !important; }
    div#fb, div#gpProfile, a#rss { margin: 6px auto !important; }

    /* ---- body: menu + content become one column ----------------------- */
    #menu
    {
        float: none !important;
        position: fixed !important;      /* rolls out from under the sticky top bar */
        top: 44px !important;            /* directly below the bar */
        left: 10px !important;
        right: auto !important;
        width: 176px !important;
        max-width: calc(100% - 20px) !important;
        margin: 0 !important;
        max-height: 0 !important;        /* rolled up (closed) */
        overflow: hidden !important;
        z-index: 1000 !important;
        box-shadow: 0 8px 20px rgba(0,0,0,.35) !important;
        transition: max-height .3s ease !important;
    }
    /* Desktop widened the panel to 196px; keep the mobile roll-out at 176px
       (matches #menu above) so the inner panels don't overflow it. The wider
       menu li (173px) still fits long labels like "Dzień Nauczyciela". */
    #menuT, #menuContent, #menuB
    {
        width: 176px !important;
        background-size: auto !important;
    }
    #mainContent
    {
        float: none !important;          /* was float:left */
        clear: both;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* ---- hamburger menu ---------------------------------------------- */
    .hamburger
    {
        display: block;
        position: fixed;                 /* sticky top bar holding the menu button */
        top: 0; left: 0; right: 0;
        z-index: 1001;                   /* above the rolled-out menu and backdrop */
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 12px 16px 12px 48px;
        background: #9fc221;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        line-height: 20px;
        text-align: left;
        border-radius: 0;
        box-shadow: 0 2px 6px rgba(0,0,0,.25);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }
    .hamburger span
    {
        position: absolute;
        left: 16px;
        width: 22px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        transition: transform .2s, opacity .2s, top .2s;
    }
    .hamburger span:nth-child(1) { top: 16px; }
    .hamburger span:nth-child(2) { top: 22px; }
    .hamburger span:nth-child(3) { top: 28px; }

    /* roll the menu open (out from under the sticky bar) when ticked */
    #menuToggle:checked ~ #menu
    {
        max-height: calc(100vh - 54px) !important;
        overflow-y: auto !important;
    }
    /* dim the page behind the open menu; tapping the backdrop closes it.
       A separate fixed element (not the button's ::before) so it sits below
       the menu/button in the root stacking order rather than being trapped
       inside the fixed button's own stacking context. */
    #menuToggle:checked ~ .menuBackdrop
    {
        display: block;
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;   /* explicit for older mobile browsers */
        background: rgba(0,0,0,.4);
        z-index: 999;
    }

    /* morph the three bars into an X while open */
    #menuToggle:checked ~ .hamburger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
    #menuToggle:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
    #menuToggle:checked ~ .hamburger span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

    /* ---- content blocks go fluid -------------------------------------- */
    .greenBlock, .grayBlock
                     { width: auto !important; max-width: 100% !important; }

    .sheetBox        { width: auto !important; max-width: 100% !important;
                       float: none !important; margin: 0 0 30px !important; }
    .sheetBoxHeader,
    .sheetBoxText,
    .sheetBoxFooter  { width: auto !important; margin-left: 0 !important; }
    .sheetBoxShadowB { width: 100% !important; background-size: 100% 17px; }

    /* footer sub-blocks (votes / rating / author) stop floating */
    .voteBox, .ratingHeader, .authorHeader, .whenHeader,
    .zyczeniaInfo    { float: none !important; width: auto !important;
                       height: auto !important; margin: 4px 0 !important; }

    /* category sort bar: unwind the absolute select/counters */
    .mainNavBlock    { width: 100% !important; height: auto !important; }
    .mainNavBlock select,
    .mainNavBlock .amount,
    .mainNavBlock .page
    {
        position: static !important; display: block;
        width: auto !important; max-width: 100% !important; margin: 6px auto !important;
        left: auto !important; right: auto !important; top: auto !important;
    }

    /* "post-it" occasions note: its fixed 292px height clipped the taller
       mobile list and let the footer overlap it. Let it grow and drop the
       fixed-size graphic for a plain readable card. */
    #postit
    {
        float: none !important;
        height: auto !important;
        width: auto !important;
        max-width: 300px;
        background: #fbf7b0 !important;
        padding: 15px !important;
        margin: 10px auto !important;
    }
    table#sticky     { width: auto !important; margin: 0 auto !important; }
    table#sticky tr td:first-child { width: auto !important; }

    /* ---- ads: never let a fixed banner blow out the width ------------- */
    #adH728x90, #adV160x600, #adH200x200, #adH336x280, .cad, .ad
    {
        max-width: 100% !important;
        float: none !important;
        margin: 8px auto !important;
        overflow: hidden;
    }
    /* the 200x200 slot reserves a fixed 200px even when unfilled, leaving a
       big empty gap above the "post-it" note on mobile - collapse it. */
    #adH200x200 { display: none !important; }
}

/* --------- phones: drop the widest fixed ad units + tighten ----------- */
@media (max-width: 560px)
{
    #wrapper        { margin: 15px 5px 0 !important; }
    #adH728x90, #adV160x600 { display: none !important; }
    a#nextOccasion  { display: none !important; } /* 407px graphic, too wide */
    .greenBlock, .grayBlock { padding: 8px !important; }
    body            { font-size: 13px; }
}