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

/* ---------------------------------------------------------------
   Masthead
   Wraps the banner and the menu so a phone can pin them as one block. On a
   desktop it is not a box at all: the banner and the floated menu column lay
   out exactly as they did without it.
   --------------------------------------------------------------- */
.masthead { display: contents; }

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

/* ---------------------------------------------------------------
   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;
  }
  .masthead > a.img img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* flow-root, not block: the Menu bar's bottom margin would otherwise
     collapse out through div.left and the masthead, so pinned, the white gap
     below the bar was missing and the page showed through it. */
  .masthead { display: flow-root; }

  /* 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;
    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.
     No top margin: the Menu bar's 8px bottom margin above it is the gap (the
     masthead contains that margin, so the two no longer collapse into one). */
  div.content {
    margin: 0 8px 8px 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; }

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

/* Pinned header. On a phone the banner and the Menu bar stay at the top and
   the page scrolls underneath them. Not on a short screen (a small phone held
   sideways): there the pair would cover half of it.

   The drawer and its backdrop sit inside the masthead, so their z-indexes now
   rank within its stacking context; the masthead's 50 is above the page, and
   only the lightbox, appended to body at 9999, goes over it. cycle numbers its
   slides' z-index up from the slide count, so the slideshow is isolated: with
   50 slides they would otherwise slide over the header.

   This also stops the page jumping to the top when Menu is tapped: the label
   focuses the hidden checkbox, and the browser scrolled to wherever that was.
   Pinned, it is always on screen. */
@media (max-width: 780px) and (min-height: 500px) {
  .masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  }
  .slideshow1 { isolation: isolate; }
  /* Whatever the browser scrolls to by itself (a focused contact field)
     stops below the header, not under it. site.js measures the height. */
  div.right * { scroll-margin-top: var(--masthead-h, 0px); }
}

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

/* ---------------------------------------------------------------
   Photos in a page's words
   New: a photo in the words is an ordinary <img class="ph ..."> in one of
   three sizes and three places; a caption is just words under it. "Large in
   the middle" with Bigger words under it is the old home page's captioned
   photo, and "small on the right" the old photo at the top right of History;
   both are kept looking as they did. Mirrored for the editor in admin.css, so
   what Ed sees is what he gets.
   --------------------------------------------------------------- */
img.ph { display: block; max-width: 100%; height: auto; }
img.ph-small { width: 250px; }
img.ph-medium { width: 360px; }
img.ph-large { width: 550px; }
img.ph-center { margin: 25px auto 4px; clear: both; }
img.ph-left { float: left; margin: 4px 18px 12px 0; }
img.ph-right { float: right; margin: 4px 0 12px 18px; }