/* ---------------------------------------------------------------------------
   hotelsparos.net — responsive layer.

   ADDED, not edited. css/css.css is the site's own stylesheet and is shipped
   byte-identical; everything below lives in a separate file loaded after it, so
   the desktop design is exactly the original and this only takes effect where
   the fixed-width layout would otherwise break.

   Plan §6.4 is the reason this exists: "the position-1 asset is a .gif from a
   static build. If it is not legible on a phone, the ranking it holds is living
   on borrowed time. Serve it responsively at the same path." The map keeps its
   exact URL; only its rendering changes.

   Palette below is extracted from css/css.css, not chosen:
     #977818 gold · #004474 / #014279 link blue · #373737 body · #d6d1c5 rule
--------------------------------------------------------------------------- */

:root {
    --hp-gold: #977818;
    --hp-blue: #004474;
    --hp-ink: #373737;
    --hp-rule: #d6d1c5;
}

img, object, embed { max-width: 100%; }
img { height: auto; }

/* The archive's markup uses fixed pixel widths throughout. Below the desktop
   breakpoint those become max-widths so the layout can reflow. */
@media (max-width: 1100px) {
    #out, #out2, .container, .main_div, .main_div2 {
        width: auto !important;
        max-width: 100%;
        min-width: 0;
    }
    body { background-attachment: scroll; }
}

@media (max-width: 900px) {
    .main_div_left, .main_div_right,
    .main_div_left2, .main_div_right2 {
        float: none !important;
        width: auto !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 14px;
        padding-right: 14px;
        box-sizing: border-box;
    }

    #flash, #flash .nested { width: auto !important; height: auto !important; }
    #flash .nested img { width: auto; max-width: 62%; height: auto; }

    /* main nav: the tab strip becomes a wrapping row of full-height targets */
    .menu ul {
        display: flex;
        flex-wrap: wrap;
        width: auto !important;
        padding: 0;
        margin: 0;
    }

    .menu ul li {
        float: none !important;
        width: auto !important;
        background: none;
        flex: 1 1 auto;
    }

    .menu ul li a, .menu ul li b, .menu ul li span {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-height: 44px;          /* tap target */
        padding: 8px 12px;
        white-space: nowrap;
    }
}

@media (max-width: 560px) {
    .official { font-size: 11px; }
    .menu ul li a, .menu ul li b, .menu ul li span { font-size: 13px; padding: 8px; }
    .lang_menu .top_div_left, .lang_menu .top_div_right { float: none; text-align: left; }
}

/* --------------------------------------------------------------------------
   The MAP & INFO dropdown was a Milonic/JS menu driven by inline onmouseover.
   The runtime is gone, so it is a CSS-only disclosure on the same markup.
   -------------------------------------------------------------------------- */
.menu li.hp-has-sub { position: relative; }

.menu li.hp-has-sub > ul.hp-sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 400;
    min-width: 210px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--hp-rule);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s;
}

.menu li.hp-has-sub:hover > ul.hp-sub,
.menu li.hp-has-sub:focus-within > ul.hp-sub { opacity: 1; visibility: visible; }

.menu li.hp-has-sub > ul.hp-sub li { float: none !important; width: auto !important; }

.menu li.hp-has-sub > ul.hp-sub a {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 6px 14px;
    color: var(--hp-blue);
    text-align: left;
    justify-content: flex-start;
    white-space: nowrap;
}

.menu li.hp-has-sub > ul.hp-sub a:hover { background: #f3f0e8; color: var(--hp-gold); }

@media (max-width: 900px) {
    .menu li.hp-has-sub > ul.hp-sub {
        position: static;
        opacity: 1;
        visibility: visible;
        border: 0;
        box-shadow: none;
        min-width: 0;
        padding: 0;
        display: none;
    }
    .menu li.hp-has-sub:hover > ul.hp-sub,
    .menu li.hp-has-sub:focus-within > ul.hp-sub { display: block; }
}

/* --------------------------------------------------------------------------
   Sections the plan specifies (§4). Styled to sit inside the original column
   rather than beside it, using the site's own type and colour.
   -------------------------------------------------------------------------- */
.hp-plan { margin: 18px 0 6px; }

.hp-plan h2, .hp-links h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: var(--hp-gold);
    margin: 18px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--hp-rule);
}

.hp-plan p, .hp-links li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.65;
    color: var(--hp-ink);
    margin: 0 0 10px;
}

.hp-plan a, .hp-links a { color: var(--hp-blue); }
.hp-plan em { color: #7a6a4a; }

.hp-links ul { margin: 0; padding-left: 18px; }
.hp-links li { margin-bottom: 6px; }

/* the backlinked images, shown at a real <img src> -- plan §2c */
.hp-figs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 14px 0 4px;
}

.hp-figs figure { margin: 0; max-width: 100%; }

.hp-figs img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--hp-rule);
    background: #fff;
}

.hp-figs figcaption {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #7a6a4a;
    margin-top: 4px;
    max-width: 340px;
}

/* h1 must exist and be visible without disturbing the original heading scale */
.main_div_left > h1, .main_div_left2 > h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 19px;
    font-weight: bold;
    color: var(--hp-gold);
    margin: 0 0 8px;
}

/* missing-image fallback, wired in js/site.js and tested */
img.hp-img-missing {
    background: repeating-linear-gradient(135deg, #efece3 0 10px, #e6e2d6 10px 20px);
    min-height: 48px;
    object-fit: contain;
}

.hp-skip {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.hp-skip:focus {
    position: fixed; top: 8px; left: 8px; z-index: 999;
    width: auto; height: auto; margin: 0; padding: 10px 16px;
    overflow: visible; clip: auto; clip-path: none;
    background: var(--hp-gold); color: #fff;
}

a:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Hero slideshow.

   #myFlashDiv holds one <div><img></div> per slide. The page's own inline
   <style> stacks them with position:absolute and Flash cross-faded them. The
   markup and that positioning are untouched; the crossfade below replaces the
   plugin. Two slides on the homepage, one on most inner pages.
--------------------------------------------------------------------------- */
.hp-slides { position: relative; overflow: hidden; }

/* the first slide stays in flow so the container keeps the original height */
.hp-slides > div:first-child { position: relative !important; }

.hp-slides > div {
    animation: hp-fade 12s infinite;
    opacity: 0;
}

.hp-slides > div:first-child { animation-delay: 0s; }
.hp-slides > div:nth-child(2) { animation-delay: 6s; }

/* a container with only one slide must not blink */
.hp-slides > div:first-child:last-child { animation: none; opacity: 1; }

@keyframes hp-fade {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    46%  { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 0; }
}

.hp-slides img { display: block; max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
    .hp-slides > div { animation: none; }
    .hp-slides > div:first-child { opacity: 1; }
    .hp-slides > div:not(:first-child) { display: none; }
}

/* ---------------------------------------------------------------------------
   Measured, not guessed: every page overflowed by 574px at a 320px viewport.
   The culprit is the fixed-width hero container (#flash / #myFlashDiv, 892px)
   and the fixed-width table/div shells the 2006-era markup uses throughout.
   Nothing above 1100px is affected.
--------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    #flash, #myFlashDiv, #myFlashDiv2, .hp-slides, .hp-slides > div,
    .white, .footer, .footer2, .lang_menu, .menu, #anylinkmenu1,
    .main_div_left, .main_div_right, .main_div_left2, .main_div_right2 {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hp-slides > div, .hp-slides img, #flash img { width: auto !important; max-width: 100% !important; }

    table { max-width: 100%; }
    td, th { word-break: break-word; }

    /* the archive sets width/height attributes on the hero and logo images */
    img[width] { max-width: 100%; height: auto; }

    body { overflow-x: hidden; }
}

/* Tap targets. The original is a 2006 desktop layout: footer links, language
   switcher and gallery links all render well under 44px on a phone. */
@media (max-width: 900px) {
    .footer a, .footer2 a, .lang a, .menu-gal a, .subtitle2 a,
    #cr_text a, .main_div_left a, .main_div_right a, .hp-figs a,
    .hp-plan a, .hp-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* inline links inside a sentence stay inline -- only standalone ones grow */
    .main_div_left p a, .main_div_right p a, .hp-plan p a, .main_div_left li a {
        display: inline;
        min-height: 0;
    }

    .footer a, .footer2 a, .menu-gal a, .lang a { padding: 0 6px; }
}

/* Measured at 320px: .official, .top_div_left and ul.menu-gal each compute to a
   hard 892px and each overhang by 572px. Named explicitly rather than guessed. */
@media (max-width: 1100px) {
    .official, .top_div_left, .top_div_right, ul.menu-gal, ul.menu-v, .over {
        width: auto !important;
        max-width: 100% !important;
    }

    ul.menu-gal { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-left: 0; }
    ul.menu-gal li { float: none !important; width: auto !important; }
}

@media (max-width: 900px) {
    /* the language switcher and gallery links become real targets */
    .lang span, .lang a, ul.menu-gal a { min-height: 44px; display: inline-flex; align-items: center; }

    /* form fields: 22px tall in the original, and under 16px triggers iOS zoom */
    input.field, input[type="text"], input[type="email"], textarea, select {
        min-height: 44px;
        font-size: 16px;
        max-width: 100%;
        box-sizing: border-box;
    }
    textarea { min-height: 96px; }
    input[type="submit"], input[type="button"], button { min-height: 44px; min-width: 44px; }
}

/* The Greek pages use .official_gr rather than .official, and the logo link in
   .nested is a 287x14 hit area. Both measured, not assumed. */
@media (max-width: 1100px) {
    .official_gr, [class^="official"], [class*=" official"] {
        width: auto !important;
        max-width: 100% !important;
    }
}

@media (max-width: 900px) {
    .nested > a { display: inline-block; min-height: 44px; }
    .nested > a img { display: block; }
    .lang a, .lang span { padding: 0 10px; }
}

/* Final measured pass: the EN/GR links are 39x44 (short text, full height) and
   the reservation/contact form tables overhang by 250px at 320. */
@media (max-width: 900px) {
    .lang a, .lang span { min-width: 44px; justify-content: center; }

    form table, form td, form tr, form tbody { display: block; width: auto !important; max-width: 100%; }
    form td { padding: 2px 0; }
    form input.field, form input, form textarea, form select { width: 100% !important; }
    .main_div_left table, .main_div_right table { display: block; overflow-x: auto; max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   Legibility pass. Everything below was measured at 320px with the elements
   named, not guessed at; the desktop rendering is untouched because every rule
   sits inside a phone-width media query.
--------------------------------------------------------------------------- */

/* The plan's image block draws a 1px border and the box was content-box, so a
   max-width:100% image came out 322px wide inside a 320px viewport and was the
   only thing overflowing the whole site. Two pixels, on three pages, and it
   still counts as a horizontal scrollbar. */
.hp-figs img { box-sizing: border-box; }

@media (max-width: 900px) {
    /* The original is a 2006 fixed-width desktop layout and sets 9-11px type in
       twenty places: the OFFICIAL WEBSITE badge (9px), the footer link row, the
       sidebar copy, the map captions, the form hints -- and the NAP block, which
       is the single most important text on a hotel page. That is readable at
       arm's length on a monitor and not on a phone, where 12px is the floor.
       Named individually so nothing else in the type scale moves. */
    #addr, #addr b, #addr a, .main_div_right, .main_div_right li, .main_div_right td,
    .footer, .footer a, .footer2, .footer2 a, .map, .map a,
    .official, .official_gr, .cr_nl, #cr_text, #cr_text a {
        font-size: 12px;
    }

    /* form hints: 9px and 10px in the original */
    .req, .small-text { font-size: 12px; }

    /* Form controls under 16px make iOS Safari zoom the whole page on focus.
       The earlier rule listed bare `textarea` and `select` (specificity 0,0,1)
       against css.css's `.field` and `.button` (0,1,0) and lost every time --
       the rule was present, correct and inert. Match the class instead.
       The date selects then turned out to carry .field2, not .field -- a second
       class, also 12px, that the first version of this list did not mention and
       so did not fix. Both are named now. */
    .field, .field2, .form2, input.field, textarea.field, select.field,
    input[type="text"], input[type="email"], input[type="tel"], textarea, select,
    .button, input.button, input[type="submit"], input[type="button"], button {
        font-size: 16px;
    }

    /* .field2 also pins width:176px, which stops the selects filling the row */
    .field2, .form2 { width: 100%; max-width: 100%; box-sizing: border-box; }
}

/* ---------------------------------------------------------------------------
   Absolute positioning calibrated for one screen width. Two blocks in the
   original are positioned against the 892px desktop layout and land on top of
   the content on a phone. Both were visible in a screenshot and invisible to a
   probe that only measures widths -- which is why hp_mobile.py now checks that
   the landmark blocks do not intersect.
--------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    /* .menu { position:absolute; padding-top:440px } puts the tab strip exactly
       under the 440px desktop hero. On a phone the hero is ~180px tall, so the
       strip landed in the middle of the body copy -- and taking no space, the
       paragraphs ran straight underneath it.
       #out2's source order is .menu then #flash, so the flex order below keeps
       the hero above the navigation, the way the desktop renders it. */
    #out2 { display: flex; flex-direction: column; }
    #flash { order: 1; }
    .menu {
        order: 2;
        position: static !important;
        padding-top: 0 !important;
        float: none !important;
    }
    #out2 > .clear { order: 3; }

    /* .top_div_right { position:absolute; right:0 } sat the EN|GR switcher on
       top of the RESERVATIONS button once .top_div_left stopped being 892px. */
    .lang_menu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 2px 12px;
    }
    .top_div_left  { order: 1; flex: 1 1 auto; height: auto !important; }
    .top_div_right { order: 2; position: static !important; float: none !important; }
    .lang, .menu-gal { padding-top: 0 !important; }
    .lang_menu > .clear { display: none; }
}