/* site.css — additions layered on top of the original zil4 theme.
   The theme's CSS and images are the originals recovered from the archive; this
   file only fills gaps the archive could not supply and adds the few things the
   old site did with dead jQuery plugins. */

/* ---------------------------------------------------------------
   Side menu hover
   The theme's hover rules point at <name>2.png variants that were never
   captured by the crawler (CSS-referenced images are not followed). Without
   these rules the menu item would lose its icon entirely on hover. Re-point
   each hover at the base image and get the "lit up" effect with a filter,
   keeping the theme's yellow hover text.
   --------------------------------------------------------------- */
#side_menu li a#home:hover    { background-image: url(/themes/zil4/style/styleimages/homea.png); }
#side_menu li a#new:hover     { background-image: url(/themes/zil4/style/styleimages/new.png); }
#side_menu li a#sale:hover    { background-image: url(/themes/zil4/style/styleimages/sale.png); }
#side_menu li a#vintage:hover { background-image: url(/themes/zil4/style/styleimages/vintage.png); }
#side_menu li a#classic:hover { background-image: url(/themes/zil4/style/styleimages/classic.png); }
#side_menu li a#painting:hover{ background-image: url(/themes/zil4/style/styleimages/painting.png); }
#side_menu li a#news:hover    { background-image: url(/themes/zil4/style/styleimages/newsa.png); }
#side_menu li a#press:hover   { background-image: url(/themes/zil4/style/styleimages/pressa.png); }
#side_menu li a#youtube:hover { background-image: url(/themes/zil4/style/styleimages/youtube.png); }
#side_menu li a#contact:hover { background-image: url(/themes/zil4/style/styleimages/contacta.png); }

#side_menu li a:hover {
  filter: brightness(1.25) saturate(1.15);
}

/* ---------------------------------------------------------------
   Drawer chrome
   The markup for the phone menu is always present but inert on a desktop,
   where the side menu is the original always-visible column.
   --------------------------------------------------------------- */
.menu-bar,
.menu-backdrop,
.menu-close-row {
  display: none;
}
/* Not display:none — the checkbox has to stay focusable for keyboard users on
   a phone, and a hidden-but-present input costs the desktop nothing. */
.menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   Marquee
   Replaces jquery.marquee.js with a CSS animation — same scrolling phone
   number, no plugin. Respects reduced-motion preferences.
   --------------------------------------------------------------- */
.marqueeout { overflow: hidden; }
.marquee {
  white-space: nowrap;
  display: inline-block;
  padding-left: 100%;
  animation: eh-marquee 22s linear infinite;
}
.marqueeout:hover .marquee { animation-play-state: paused; }
@keyframes eh-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; padding-left: 0; }
}

/* ---------------------------------------------------------------
   Sold badge
   New: the old site had no "sold" state, Ed just deleted the tiki. Now he can
   mark it sold and keep the photo on the site.
   --------------------------------------------------------------- */
b.alert.sold {
  color: #b00000;
  letter-spacing: 0.08em;
}
.photo-stack { position: relative; }

/* ---------------------------------------------------------------
   Lightbox
   Replaces fancybox 1.2.1, whose sprite images (fancy_*.png) were also never
   captured. Same behaviour: click a photo, see it big.
   --------------------------------------------------------------- */
#eh-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}
#eh-lightbox.open { display: flex; }
#eh-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
  background: #fff;
}
#eh-lightbox .eh-close {
  position: absolute;
  top: 14px;
  right: 20px;
  color: #fff;
  font: bold 30px/1 Verdana, Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  padding: 6px 12px;
}

/* ---------------------------------------------------------------
   Contact form
   --------------------------------------------------------------- */
.contact-error { color: #b00000; font-weight: bold; }
.xar-form-label { display: inline-block; min-width: 9em; }
.xar-form-input-wrapper { margin: 0 0 10px 0; }
.xar-form-submit {
  font-size: 15px;
  padding: 8px 18px;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   Small screens

   The theme is a fixed 975px layout from the 2000s and is meant to look that
   way — this section changes no colours, fonts, borders or images. It only
   unpins the widths the theme hard-codes in pixels, so the same design reflows
   onto a phone instead of forcing a sideways scroll.

   !important is unavoidable here: the page carries the original inline
   style="float: left; width: 225px" attributes on every thumbnail cell, and an
   inline style outranks any selector. Keeping that markup was the point, so the
   overrides have to outrank it.
   --------------------------------------------------------------- */
@media (max-width: 780px) {
  /* The outer frame and the banner. */
  div.main {
    width: auto !important;
    margin: 0 !important;
    border-width: 2px;
  }
  div.main > a.img img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* left.jpg and right.jpg are fixed-size decorative column edges. They cannot
     scale, so at this width they are dropped rather than cropped. */
  div.left,
  div.right {
    float: none !important;
    width: auto !important;
    background-image: none !important;
  }
  /* min-height: 500px sizes the desktop sidebar to the page; stacked, it is
     just a blank gap between the menu and the content. */
  div.left { min-height: 0 !important; }

  /* The side menu becomes two columns of tappable buttons. The theme floats
     each li, which leaves the ul zero-height and the menu overlapping the page;
     a grid both fixes that and gives even rows. */
  /* The menu becomes a drawer. Ten full-width buttons with 96px carvings is
     about a screen and a half of menu before any content, so on a phone it
     slides in over the page instead of sitting above it.

     Driven by a checkbox rather than script: the published site is static
     files on a CDN, and the navigation must not depend on JS loading. site.js
     only adds Escape-to-close and closing after a tap. */
  #side_menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 70;
    width: 86%;
    max-width: 330px;
    margin: 0;
    padding: 10px 10px 24px 10px;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #D9E6FF;
    border-right: 3px solid #228ECD;
    box-shadow: 4px 0 22px rgba(0, 0, 0, .35);
    transform: translateX(-102%);
    transition: transform .25s ease;
  }
  .menu-toggle:checked ~ #side_menu { transform: none; }

  /* The bar that opens it, styled as one of the site's own buttons. */
  .menu-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 8px;
    padding: 14px 16px;
    background-color: #709BFF;
    border: 3px outset #228ECD;
    color: #ffffff;
    font-weight: 700;
    font-size: 118%;
    letter-spacing: .04em;
    cursor: pointer;
    user-select: none;
  }
  .menu-bars {
    width: 26px;
    height: 3px;
    background: #ffffff;
    box-shadow: 0 8px 0 #ffffff, 0 -8px 0 #ffffff;
  }
  /* Keyboard users tab to the hidden checkbox, so show focus on the bar. */
  .menu-toggle:focus-visible ~ .menu-bar { outline: 3px solid #ffff00; outline-offset: 2px; }

  .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .menu-toggle:checked ~ .menu-backdrop { opacity: 1; pointer-events: auto; }

  .menu-close-row { display: block; margin: 0 0 4px 0; }
  .menu-close {
    display: block;
    padding: 10px 6px;
    color: #0B298B;
    font-weight: 700;
    font-size: 105%;
    text-align: right;
    cursor: pointer;
  }
  /* superfish pins the vertical menu and every item to 10em (~160px), which
     would leave the grid one narrow column against a wide blank. */
  ul.sf-vertical,
  ul.sf-vertical li,
  ul.sf-menu li {
    float: none !important;
    width: auto !important;
  }
  /* Each menu image is a whole 150x75 button plate with the tiki in its left
     ~50px and the rest painted the exact button colour (#709BFF), so the plate
     can be scaled up freely — the overspill is indistinguishable from the
     background. Sizing it to the row height therefore sizes the tiki:
     tiki width is 50/75 of the row. A 96px row gives a ~64px carving, which is
     the point of the menu rather than a favicon beside the words. */
  #side_menu li a {
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    width: auto !important;
    height: auto !important;
    min-height: 96px;
    margin: 0 !important;
    padding: 10px 14px 10px 78px !important;
    background-position: left center !important;
    background-size: auto 100% !important;
    font-size: 115%;
  }

  /* Content column. min-height: 600px leaves a tall blank on short pages. */
  div.content {
    margin: 8px !important;
    padding: 14px 10px 10px 10px !important;
    min-height: 0 !important;
    width: auto !important;
  }
  .xar-mod-body { width: auto !important; }
  .xar-mod-title {
    font-size: 150% !important;
    letter-spacing: .03em;
  }

  /* The right-hand feature photo and the home page slideshow. */
  .floatright {
    float: none !important;
    width: auto !important;
    margin: 0 auto 16px auto !important;
    text-align: center;
  }
  .slideshow1 { margin: 0 auto; }

  /* Thumbnail grid: two per row, sized by the screen rather than by 225px.
     inline-block instead of float so uneven captions cannot snag a row. */
  div.content div[style*="float: left"] {
    float: none !important;
    display: inline-block;
    vertical-align: top;
    width: 48% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 0 18px 0 !important;
    text-align: center;
  }

  /* Every block the theme pins to a pixel width, and the photos inside them. */
  div.photo,
  div.photo-stack,
  div.photo2,
  div.content div[style*="margin: 0 auto"] {
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  div.content img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* The scrolling banner must not widen the page. */
  div.marqueeout { overflow: hidden; }

  /* Contact form: size="50" inputs are far wider than a phone. */
  #contactform input[type=text],
  #contactform textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* iOS zooms the page in on anything smaller */
  }
  #contactform label { display: block; margin-bottom: 4px; }

  .marginLeft { padding: 0 10px; }
  div.copyright { padding: 0 10px 10px 10px; }
  div.copyright .floatright { float: none !important; }
}

/* Very narrow phones: one thumbnail per row rather than two cramped ones. */
@media (max-width: 340px) {
  div.content div[style*="float: left"] { width: 100% !important; }
}