/* ------------------------------------------------------------------
   RESPONSIVE LAYER

   The design this app inherited is a fixed 980px page: a 160px header with
   five absolutely positioned pieces, two floated columns of 314 and 647, and
   a 480px footer whose ten sponsor logos each sit at hard-coded coordinates.
   It has no media queries and the old app shipped no viewport tag, so every
   phone rendered it as a 980px page zoomed out to illegibility.

   Nothing above the breakpoint is touched — on a desktop this file changes
   not one pixel, which is the point: the club's site keeps looking like the
   club's site. Everything below re-flows that fixed design.

   The breakpoint is 1020px rather than 980px so the layout leaves the fixed
   grid slightly before the window reaches its exact width, instead of at the
   moment a horizontal scrollbar would appear.
   ------------------------------------------------------------------ */

@media (max-width: 1019px) {

    /* ---- page frame ---- */

    /* The footer stops being absolutely positioned, so the room the wrapper
       reserved for it goes too. */
    div#wrapper {
        width: auto;
        padding-bottom: 0;
    }

    /* Only the grunge strip: the desktop rule's centred 1580px image would crop to
       whichever slice of texture happens to be in the middle.

       It is scaled to 88px — the height of the header's first row — rather than left
       at its native 160. At full height the strip would run on past the logo and put
       the "Členská zóna / Registrácia za člena" links on top of the red brush stroke,
       where dark grey and club red are both unreadable. On a desktop those links sit
       just under the strip on white; scaling it keeps that relationship. */
    body,
    body.home-page {
        background: url("/assets/design/menu-background-116bd9ae29779bd7dd707a8ce203c297.jpg") repeat-x center top;
        background-size: auto 112px;
        -webkit-text-size-adjust: 100%;
    }

    body.home-page div#menuContainer {
        margin-bottom: 0;
    }

    /* ---- header ---- */

    div#menuContainer {
        height: auto;
        position: static;
        padding: 8px 12px 12px 12px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    div#logo {
        position: static;
        flex: 0 0 auto;
    }

    /* The home page's hero does not appear on a phone, so the logo is what says
       whose site this is. Sized to the strip, the way the desktop logo is sized to
       the 160px header. */
    div#logo img {
        width: 96px;
        height: auto;
        display: block;
    }

    /* Beside the member links and at their weight, not the menu button's. It is a
       preference, not a destination — a red pill next to MENU gave it the same
       standing as the site's whole navigation. On this row it is on white, so it
       keeps the desktop's #4C4C4C and needs no ground of its own.

       Two-letter links are a 26x16 target on a desktop, which is fine for a mouse
       and hopeless for a thumb; the padding is the whole difference. */
    div#langMenu {
        position: static;
        order: 4;
        margin-left: auto;
        font-size: 12px;
    }

    div#langMenu a,
    div#langMenu a:link,
    div#langMenu a:visited {
        display: inline-block;
        padding: 10px 8px;
    }

    /* The Facebook square is the one header element with a duplicate: the top
       menu already carries a Galéria link to the same page. It goes, rather
       than taking a row of its own on a 390px screen. */
    div#facebookLogo {
        display: none;
    }

    /* Below the strip, on white — where the desktop puts it too. flex-grow stays 0
       so the language switch can share the row instead of being pushed off it. */
    div#memberButtons {
        position: static;
        order: 3;
        flex: 0 1 auto;
        text-align: left;
        padding-top: 4px;
    }

    div#memberButtons a,
    div#memberButtons a:link,
    div#memberButtons a:visited {
        margin-left: 0;
        margin-right: 22px;
        display: inline-block;
        /* 44px of vertical target on a design whose links are 12px tall. */
        padding: 12px 0;
    }

    /* ---- top menu, as a disclosure ---- */

    /* Solid, not a translucent wash: the button sits on the header strip, whose
       texture runs from near-white to dark red depending on where the image is
       cropped, and white-on-35%-black is only legible over the dark half. The
       colour is the same red the menu panel it opens uses. */
    #menuToggle {
        order: 2;
        display: block;
        margin-left: auto;
        background: #752021;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 4px;
        color: #FFFFFF;
        font-family: Ginko, Georgia, "URW Bookman L", serif;
        font-size: 17px;
        line-height: 1;
        padding: 11px 14px;
        cursor: pointer;
    }

    /* The menu's links are white, because on a desktop they lie on the dark brush
       stroke of the header strip. Below the breakpoint the menu hangs underneath
       that strip, on white — so it needs to bring its own dark ground with it or
       it renders white on white and the whole menu disappears. The colour is the
       strip's own red, sampled out of menu-background.jpg. */
    div#menu {
        position: static;
        order: 5;
        width: 100%;
        font-size: 20px;
        background: #752021;
    }

    /* Closed by default, and closed is what a visitor with no JavaScript would
       be stuck with — so the script that opens it also marks the header, and
       without that mark the menu simply stays open as a plain list. */
    body.js div#menu {
        display: none;
    }

    body.js div#menu.menu-open {
        display: block;
    }

    div#menu .menuItem {
        display: block;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }

    div#menu a,
    div#menu a:link,
    div#menu a:visited {
        display: block;
        padding: 12px 4px;
    }

    div#menu a:hover {
        /* The 147px hover slab was cut for a horizontal menu row. */
        background: rgba(255, 255, 255, 0.12);
    }

    /* ---- columns ---- */

    /* The section menu is markup-first because that is where it belongs on a
       desktop. On a phone it goes below: the results section's menu runs to 28
       entries, and nobody should scroll fourteen years of links to reach the
       page they asked for. */
    div#contentContainer,
    body.home-page div.layoutContainer.homeColumns {
        display: flex;
        flex-direction: column;
    }

    div#rightContainer {
        order: 1;
    }

    div#leftContainer,
    div#homeSideContainer {
        order: 2;
    }

    div#leftContainer,
    div#rightContainer,
    div#homeSideContainer,
    body.home-page div#rightContainer {
        float: none;
        width: auto;
        margin: 0;
        padding: 0 12px;
    }

    /* The coming-events list on the home page: one line of text each, and the whole
       point of the box is that they are tapped. */
    #comingEvents a.hpTextLink {
        display: inline-block;
        padding: 6px 0 10px 0;
    }

    /* ---- rules and corners cut to a fixed width ---- */

    /* Every one of these is a PNG exactly as wide as the column it underlined
       — 647 for content, 314 for the menu. Stretched to the container instead. */
    #rightContainer h1,
    .calendarEventWrapper,
    .tournamentResultWrapper,
    .homeNewsSection,
    #comingEvents,
    #rightContainer .parLine,
    #leftContainer .submenuLine {
        width: auto;
        background-size: 100% 1px;
    }

    .homeNewsSummaryPanel {
        background-size: 100% auto;
    }

    /* Decorative torn-corner blocks, 90 and 160 pixels of nothing on a phone. */
    #rightContainer .parCorner,
    #leftContainer .submenuCorner {
        display: none;
    }

    /* ---- section menu ---- */

    #leftContainer .submenuHeader {
        padding-top: 8px;
    }

    .submenuItem a {
        padding: 12px 6px;
    }

    .submenuExpanded {
        background-size: 100% 100%;
    }

    .submenuExpanded a {
        padding: 10px 6px;
    }

    /* ---- tables ---- */

    /* Nine columns of results with hard-coded td widths will not fit 390px and
       should not try: the table keeps its shape and scrolls inside its own box,
       so the page itself never scrolls sideways. */
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.layoutTable {
        min-width: 100%;
    }

    /* ---- filter check-boxes ---- */

    form.filterForm .filterLabel {
        display: inline-block;
        padding: 12px 10px 12px 2px;
    }

    form.filterForm input.checkbox {
        width: 26px;
        height: 26px;
        vertical-align: -7px;
    }

    /* ---- tap targets ----

       Everything below exists for one reason: on a touch screen a link has to be
       big enough to hit. The desktop design is built for a mouse and full of
       14-pixel-tall links, several of them inside table rows. Growing them makes
       the tables taller here, which is the right trade on a phone and happens
       nowhere else. The sizes were measured at 390px, not guessed. */

    .submenuHeaderLink {
        display: inline-block;
        padding: 10px 0;
    }

    /* 0.9em lands at 11.7px, under anyone's floor for body text. */
    .submenuExpanded a {
        font-size: 12px;
    }

    /* Every link in the content column, whatever class the club's stored HTML
       happens to give it — naming them one by one only covers the ones already
       written. Vertical padding on an inline link grows the hit box without
       reflowing the paragraph it sits in; on the block-level ones it grows the
       row, which on a phone is the right answer. */
    #rightContainer a,
    #comingEvents a {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* A lone "PDF" is 23px wide, so this one needs width as well as height. */
    #rightContainer a.pdf {
        display: inline-block;
        padding: 6px 8px;
    }

    /* 0.9em again — the results hint and the names inside the tables. */
    .hintText,
    a.tableTextLink {
        font-size: 12px;
    }

    /* Inherited from the Grails cookie bar, where it is 14px tall on a phone too. */
    .stucookie a {
        display: inline-block;
        padding: 6px 0;
    }

    /* Tapping a label focuses its field, so it is a target like any other. */
    #rightContainer label {
        display: inline-block;
        padding: 8px 0;
    }

    /* ---- footer ---- */

    /* footer-background.jpg is 980x480 and the desktop footer is exactly 480 tall,
       so it only ever tiles sideways. Here the footer is as tall as its contents,
       which had the image tiling downwards too — a second red band across the
       middle of the sponsors, and a black strip through them.

       Flat colours instead, both lifted from that same image: the grey of its body
       and, below, the red of the band its menu sits in. */
    div#footerWrapper {
        position: static;
        height: auto;
        padding-bottom: 16px;
        background: #CFCFCF;
    }

    div#footerContainer {
        width: auto;
        height: auto;
        padding: 0 12px;
    }

    /* The band is part of the background image on a desktop, and the menu is one row
       that sits inside it. Wrapped to three rows here, the white links ran off the
       red onto the grey and vanished — so the band becomes the menu's own
       background and follows it however many rows it takes. */
    div#footerMenu {
        position: static;
        background: #680404;
        margin: 0 -12px;
        padding: 4px 12px 8px 12px;
    }

    div#footerMenu > div {
        float: none !important;
    }

    .footerMenuItem {
        display: inline-block;
    }

    .footerMenuItem a {
        display: inline-block;
        padding: 8px 12px 8px 0;
        font-size: 13px;
    }

    /* Ten logos at hard-coded coordinates become a wrapped row. Each keeps its
       own dimensions, so no logo is distorted; the box only stops being placed
       by hand. */
    #sponsorBoxes {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 12px 16px;
        padding: 16px 0 12px 0;
    }

    #sponsorBoxes > div[class^="sponsorBox"] {
        position: static;
        width: auto;
        height: auto;
    }

    /* Three to a row rather than two. Each logo keeps its own aspect ratio —
       background-size:contain letterboxes inside the box the design gave it — so
       capping both dimensions shrinks the wide and the tall ones without distorting
       any of them. Two to a row made the sponsor block 642px tall, which is more
       than a phone screen of logos to scroll past. */
    #sponsorBoxes a[class^="sponsorLink"] {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        max-width: 28vw;
        max-height: 88px;
        min-height: 26px;
    }

    /* 10px of grey credit line is below what anyone should be asked to read, and one
       of the two links in it is the privacy policy.

       The dark ground is not decoration: on a desktop this box sits at the very
       bottom of the 480px footer image, which is near-black there — that is what the
       grey and the club red in it are picked to sit on. Flattening the footer took
       that ground away, so it comes back as a colour, sampled from the same image. */
    div#madeByBox {
        position: static;
        margin: 12px -12px 0 -12px;
        padding: 10px 12px;
        background: #171717;
        text-align: center;
        font-size: 12px;
        line-height: 2.2;
    }

    div#madeByBox a {
        display: inline-block;
        padding: 8px 0;
    }

    /* The admin's category picker is laid out in fixed-width columns. On a phone
       two of them do not fit, so each check-box takes its own line — which is
       also a bigger target for a thumb. */
    .adminForm .checkGrid label {
        width: 100%;
        padding: 7px 0;
    }

    .adminForm .checkGrid.wide label {
        width: 100%;
    }

    /* The small buttons — upload, remove, delete — go back to full size here. */
    /* The compact field row is a desktop shape. On a phone a 84px box next to
       another 84px box is two thumbs fighting for one line. */
    .adminForm .fieldRow {
        display: block;
    }

    .adminForm .fieldRow input[type="number"],
    .adminForm .fieldRow input[type="tel"],
    .adminForm .fieldRow input[type="text"],
    .adminForm .fieldRow .wide input[type="tel"],
    .adminForm .fieldRow .wide input[type="text"] {
        width: 100%;
        max-width: 100%;
    }

    /* The roster form's own heading is what opens it, so it is a tap target like any
       other button — 23px of it is not enough for a thumb. */
    .adminForm summary {
        padding: 9px 0;
    }

    .filterSubmit.smallButton {
        padding: 9px 14px;
    }
}

/* A phone in portrait: the sponsor row gets tighter and the header text drops
   a size, but the layout above already holds — this only stops the widest
   pieces from crowding. */
@media (max-width: 480px) {

    div#menu {
        font-size: 18px;
    }

    #leftContainer .submenuHeader,
    #rightContainer h1,
    .homePageSectionHeader {
        font-size: 1.4em;
    }

    #sponsorBoxes {
        gap: 14px 18px;
    }

    #sponsorBoxes a[class^="sponsorLink"] {
        max-width: 30vw;
    }
}