/*
 * VIPPost - mobile layer
 * ----------------------------------------------------------------------------
 * The theme is a 2010 Kubrick derivative built on a fixed 801px column, with no
 * viewport meta and no media queries: on a phone the page rendered 801px wide
 * inside a ~390px screen, so the right-hand side of every line (including the
 * phone number) was simply cut off.
 *
 * This file is loaded AFTER style.css and only overrides what a narrow screen
 * needs. Nothing here changes the desktop rendering: every rule lives inside a
 * max-width media query, so above 820px the original design is untouched.
 */

/* ---------- shared safety net (applies at every width) ---------------------- */
img,
embed,
object,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Long words / URLs must not force a horizontal scrollbar on a narrow screen. */
#content,
#sidebar,
.entry {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* The mobile menu button is injected by mobile-menu.js on every screen size;
   the desktop bar has no use for it. */
.vp-nav-toggle {
    display: none;
}

/* functions.php wraps phone numbers in tel: links. They must keep looking like
   the plain text they replaced, otherwise the desktop design would change.
   The #content prefix is needed: style.css colours links with "#content a",
   which outweighs a plain class selector. */
#content a.vp-tel,
#content a.vp-tel:hover,
#content a.vp-tel:visited,
.entry a.vp-tel,
.entry a.vp-tel:hover,
.entry a.vp-tel:visited {
    color: inherit;
    text-decoration: inherit;
}

/* ---------- phones and small tablets --------------------------------------- */
@media screen and (max-width: 820px) {

    /* The fixed 801px shell becomes fluid. These four are the only elements
       that carried the hard width; everything else is inside them. */
    #page,
    #header,
    #headerimg,
    #footer {
        width: auto !important;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    #page {
        margin-top: 0;
        border-left: 0;
        border-right: 0;
    }

    /* The header holds BOTH the banner image and the nav bar (see header.php),
       so it must stay auto-height -- constraining it pushed the menu out on top
       of the page text. Only the image div gets the banner's aspect ratio. */
    #header {
        height: auto !important;
        min-height: 0 !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        overflow: hidden;              /* contain the floated nav inside it */
    }

    #headerimg {
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 801 / 120;       /* images/vippost_logo.png is 801x120 */
    }

    /* Content column: the theme floats a narrow column next to a sidebar. On a
       phone they stack, full width, with comfortable padding. */
    #content,
    .narrowcolumn,
    .widecolumn,
    #sidebar {
        float: none !important;
        width: auto !important;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 16px !important;
    }

    #content {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Body text: the original 1.1em on a 801px column is small on a phone, and
       justified text with long Hungarian words leaves ugly gaps. */
    body,
    #content p,
    .entry p {
        font-size: 16px;
        line-height: 1.6;
        text-align: left !important;
    }

    #content h1,
    #content h2,
    .entry h1,
    .entry h2 {
        font-size: 1.4em;
        line-height: 1.25;
    }

    /* The three service buttons sit in a right-hand column on desktop; stack
       them under the text and let them fill the width. */
    #sidebar img,
    #sidebar a img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 0 10px 0;
    }

    #sidebar ul,
    #sidebar li {
        list-style: none;
        margin: 0;
        padding: 0;
        width: auto;
        float: none;
    }

    /* ---- navigation ------------------------------------------------------ */
    /* The menu is a fixed-width bar (.menutarto 801px, #dropmenu 700px) whose
       items float left, so on a phone it overflowed and wrapped mid-bar. Here it
       becomes a plain vertical list: full-width rows, tall enough to tap (44px is
       the accepted minimum), and the hover-positioned submenus are shown inline
       because a touch screen has no hover.

       That list is 10 rows tall, which filled the whole first screen, so it is
       collapsed behind a button. The collapse is scoped to html.vp-js (set by
       mobile-menu.js): with no JS the menu stays open rather than unreachable. */
    /* header.php puts a 10px inline gap above the menu bar; on a phone it just
       leaves a strip of page background between the banner and the button. */
    #header > div[style*="margin-top"] {
        margin-top: 0 !important;
    }

    .vp-nav-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        padding: 12px 16px;
        border: 0;
        border-top: 1px solid #3a3a3a;
        background: #1a1a1a;
        color: #fff;
        font: inherit;
        font-size: 16px;
        text-align: left;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Hamburger drawn in CSS so the theme needs no new image asset. */
    .vp-nav-toggle-icon {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 2px;
        background: #fff;
        box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
    }

    .vp-nav-toggle[aria-expanded="true"] {
        background: #2a2a2a;
    }

    html.vp-js .menutarto #dropmenu {
        display: none !important;
    }

    html.vp-js .menutarto.vp-nav-open #dropmenu {
        display: block !important;
    }
    .menutarto,
    .kozepmenu,
    #kozepmenub,
    #dropmenu,
    #dropmenu ul,
    #dropmenu li ul {
        float: none !important;
        position: static !important;
        width: auto !important;
        max-width: 100%;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background-image: none !important;
    }

    /* the decorative bar end-caps are 801px-era art, drop them */
    .balmenuveg,
    .jobbmenuveg {
        display: none !important;
    }

    .menutarto {
        background: #1a1a1a !important;
        border-top: 1px solid #3a3a3a;
    }

    #dropmenu li {
        float: none !important;
        position: static !important;
        height: auto !important;
        width: auto !important;
        border-bottom: 1px solid rgba(255, 255, 255, .10);
    }

    /* the theme injects a 0px spacer <li>; it would show as an empty row */
    #dropmenu li[style*="width:0"] {
        display: none !important;
    }

    #dropmenu a {
        display: block !important;
        /* the links themselves are floated in the desktop bar; left floated they
           do not grow their <li>, so every row collapsed to 0px and the items
           overlapped the text below */
        float: none !important;
        height: auto !important;
        min-height: 44px;
        box-sizing: border-box;
        padding: 12px 16px !important;
        line-height: 1.35 !important;
        font-size: 16px !important;
        border-right: 0 !important;
        border-left: 0 !important;
        white-space: normal !important;
        background-image: none !important;
    }

    /* Submenus: the plugin's JS sets an inline display:none and reveals them on
       hover. A touch screen has no hover, so they would be unreachable -- show
       them inline, indented under their parent (!important beats the inline style). */
    #dropmenu ul {
        display: block !important;
        top: auto !important;
        left: auto !important;
        border-top: 0 !important;
        background: transparent !important;
    }

    #dropmenu ul a {
        padding-left: 34px !important;
        font-size: 15px !important;
        opacity: .9;
    }

    /* ---- footer ---------------------------------------------------------- */
    #footer {
        padding: 14px 16px !important;
        text-align: center;
        height: auto !important;
        background-image: none !important;
    }

    #footer p {
        margin: 4px 0;
        font-size: 13px;
        line-height: 1.5;
    }

    /* footer.php hardcodes two floated boxes (200px + 601px) inline; stack them */
    #footer div[style] {
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        text-align: center !important;
        margin: 3px 0;
        font-size: 13px;
        line-height: 1.5;
    }

    /* Page content written in the WP editor often carries inline pixel widths
       (e.g. <div style="width:400px">). Those are what still pushed the layout
       wider than the screen, so neutralise them inside the content area only. */
    #content [style*="width"],
    .entry [style*="width"] {
        width: auto !important;
        max-width: 100% !important;
    }

    #content img[style*="width"],
    .entry img[style*="width"] {
        height: auto !important;
    }

    /* Tables here are layout, not data: a two-column reference list and rows of
       label/value price pairs. At 390px a 50% cell is ~190px wide, which chopped
       company names in half and interleaved the two columns. Stack the cells. */
    #content table,
    #content tbody,
    #content tr,
    #content td,
    #content th,
    .entry table,
    .entry tbody,
    .entry tr,
    .entry td,
    .entry th {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* The theme justifies text; on a ~190px column that left huge word gaps. */
    #content td,
    #content th,
    .entry td,
    .entry th {
        text-align: left !important;
        padding-left: 0 !important;
    }

    /* Phone numbers are the primary call to action on this site: make them
       obvious tap targets. */
    #content a[href^="tel:"],
    .entry a[href^="tel:"] {
        display: inline-block;
        padding: 4px 0;
    }
}

/* ---------- very narrow phones --------------------------------------------- */
@media screen and (max-width: 400px) {
    #content,
    .narrowcolumn,
    .widecolumn,
    #sidebar {
        padding: 0 12px !important;
    }

    body,
    #content p,
    .entry p {
        font-size: 15px;
    }
}