/* 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; }
}

/* ---------------------------------------------------------------
   Home page slideshow
   The theme hides every slide and leaves showing them to cycle, which site.js
   starts only once the photos have loaded. Until then, show the first slide
   in the normal flow so the box has its real height and the text sits below
   it; cycle takes over its display once it starts.
   --------------------------------------------------------------- */
.slideshow1 > .primary0:first-child { display: block; }

/* ---------------------------------------------------------------
   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; }
}