/* ==========================================================================
   zion-page.css — site-wide styles for the PHP version of ZionKing.com
   Converted from the classic-ASP site (inline <font>/<table> markup).

   Goals:
     1. Preserve the original desktop look (700px-wide layout, Rasta banner).
     2. Make every page fit phones with no horizontal scrolling.

   Responsive strategy:
     - .pageWrap caps content at 700px but is fluid below that.
     - Content images never exceed their container (max-width:100%).
     - The banner has two modes: the original sliced-image table on desktop
       (.bannerDesktop) and a compact, tappable stack on phones
       (.bannerMobile), swapped at the 720px breakpoint.
   ========================================================================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: #7C876D;                 /* original <body bgcolor> */
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

img { border: 0; }

/* Links (ported from the inline <style> in zion-index.asp) */
a:link    { color: blue;  text-decoration: none; }
a:visited { color: blue;  text-decoration: none; }
a:hover   { color: #ff9900; text-decoration: none; font-weight: bold; }
a:active  { color: green; text-decoration: none; }

/* --------------------------------------------------------------------------
   Page content wrapper — caps at the original 700px, fluid on small screens
   -------------------------------------------------------------------------- */
.pageWrap {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
}

/* Content images shrink to fit narrow screens instead of overflowing. */
.pageWrap img { max-width: 100%; height: auto; }

.copyNote {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: bold;
}
.copyNote img { width: 12px; height: 12px; vertical-align: middle; }

/* --------------------------------------------------------------------------
   Homepage: CD release + blog link
   -------------------------------------------------------------------------- */
.cdRelease { margin-top: 16px; }
.blogLink  { margin: 14px 0 24px; font-size: 16px; }

/* Homepage trio of photos — 3 across on desktop, wrap/stack on phones. */
.photoRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.photoRow figure { margin: 0; }
.photoRow img { display: block; }

/* --------------------------------------------------------------------------
   Banner — DESKTOP (original sliced-image table, shown >= 720px)
   -------------------------------------------------------------------------- */
.bannerDesktop { display: block; }
.bannerDesktop table { margin: 0 auto; border-collapse: collapse; }
/* display:block removes the inline baseline gap under <img> in <td> that
   standards mode (our <!DOCTYPE html>) introduces. Without this the sliced
   GIFs don't tile and the Rasta stripes/buttons misalign. The original ASP
   had no doctype, so it rendered in quirks mode and tiled seamlessly. */
.bannerDesktop td  { padding: 0; line-height: 0; font-size: 0; }
.bannerDesktop img { display: block; }
.bannerDesktop a   { display: block; }
.bannerMobile  { display: none; }

/* --------------------------------------------------------------------------
   Banner — MOBILE (compact, tappable; shown < 720px)

   The full-width red strip (r1_c1) caused a "too wide / separated" look when
   stacked above the 320px crest. But the ZIONKING emblem is split across the
   two slices (top of the logo in r1_c1, bottom in r2_c5), so dropping r1_c1
   clipped the top of the logo. Fix: zion-crest-top.gif is the CENTER 320px of
   r1_c1 (the emblem top only, no wide red bar). Stacked flush above the crest
   at the same width, the two slices reassemble the complete logo.
   -------------------------------------------------------------------------- */
.bannerTop   { display: block; width: 86%; max-width: 320px; height: auto; margin: 10px auto 0; }
.bannerCrest { display: block; width: 86%; max-width: 320px; height: auto; margin: 0 auto 6px; }
.bannerNav   { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px 0 4px; }
.bannerNav a { display: inline-block; padding: 8px; line-height: 0; }   /* padding = larger tap target */
.bannerNav img { display: block; height: auto; max-width: 100%; }

@media (max-width: 719px) {
  .bannerDesktop { display: none; }
  .bannerMobile  { display: block; }
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.galleryTitle {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: #000;
  margin: 16px 0;
}

/* Group list (zion-gallery.php) */
.groupList {
  margin: 0 auto;
  background-color: #CD853F;
  border-collapse: collapse;
  font-size: 16px;
}
.groupList td { text-align: center; }
.groupList a { font-weight: bold; line-height: 1.8; }

/* A single thumbnail / full image + its credit (show-group, image-zoom) */
.galleryItem { margin: 0 auto 24px; }
.galleryItem img { max-width: 100%; height: auto; }

/* Page-range navigation (show-group) — centered, wraps, tappable */
.galleryNav {
  margin: 12px auto;
  border-collapse: collapse;
  font-size: 14px;
}
.galleryNav td {
  padding: 8px 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
.galleryNav a { display: inline-block; padding: 4px 6px; }

/* --------------------------------------------------------------------------
   Music landing page
   -------------------------------------------------------------------------- */
.musicBuy { font-size: 15px; margin: 4px 0 24px; }
.musicBuy a { color: #ffff00; }
.musicSub  { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; margin: 8px 0 16px; }

.cdChoices { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin: 8px 0 24px; }
.cdChoice  { width: 240px; max-width: 90%; }
.cdChoice h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; margin: 0 0 8px; }
.cdChoice img { width: 220px; max-width: 100%; height: auto; }

/* CD release page (zionking-cd) */
.cdNames    { font: bold 18px Verdana, Arial, Helvetica, sans-serif; line-height: 1.5; margin: 4px 0 14px; }
.cdAvail    { font-size: 14px; color: #ffff00; line-height: 1.5; margin: 0 0 8px; }
.cdProducer { font-size: 14px; margin: 18px 0; }

/* --------------------------------------------------------------------------
   CD listening page (HTML5 audio playlist player)
   -------------------------------------------------------------------------- */
.cdPlayer { max-width: 520px; margin: 0 auto 24px; }
.cdCover  { width: 260px; max-width: 70%; height: auto; margin: 0 auto 14px; display: block; }
.cdAudio  { width: 100%; max-width: 460px; margin: 6px auto 4px; display: block; }
.nowPlaying { min-height: 1.3em; margin: 8px 0 12px; font-weight: bold; color: #1a1a1a; }

.trackList { list-style: none; padding: 0; margin: 0 auto; max-width: 460px; text-align: left;
             background: rgba(255,255,255,0.12); border: 1px solid rgba(0,0,0,0.25); border-radius: 4px; }
.trackList li { border-bottom: 1px solid rgba(0,0,0,0.18); }
.trackList li:last-child { border-bottom: 0; }
.track { display: block; width: 100%; text-align: left; cursor: pointer;
         background: none; border: 0; padding: 11px 14px; font: 14px Verdana, Arial, Helvetica, sans-serif; color: #002; }
.track:hover, .track:focus { background: rgba(255,255,255,0.3); outline: none; }
.trackList li.playing { background: #CD853F; }
.trackList li.playing .track { font-weight: bold; color: #000; }

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.contactForm { max-width: 520px; margin: 0 auto; text-align: left; }
.contactForm label {
  display: block; margin: 14px 0 4px;
  font: bold 14px Verdana, Arial, Helvetica, sans-serif;
}
.contactForm input[type="text"],
.contactForm input[type="email"],
.contactForm select,
.contactForm textarea {
  width: 100%; padding: 9px;
  font: 14px Verdana, Arial, Helvetica, sans-serif;
  border: 1px solid #555; border-radius: 3px; background: #fff; color: #000;
}
.contactForm textarea { resize: vertical; }
.contactForm button {
  margin-top: 18px; padding: 11px 26px; cursor: pointer;
  font: bold 15px Verdana, Arial, Helvetica, sans-serif;
  background: #CD853F; color: #000; border: 1px solid #555; border-radius: 4px;
}
.contactForm button:hover { background: #e0a05a; }
/* honeypot — visually hidden, off-screen, not announced */
.contactForm .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formErrors {
  max-width: 520px; margin: 0 auto 16px; padding: 10px 14px; text-align: left;
  color: #7a0000; background: #fff6d6; border: 1px solid #a00; border-radius: 4px;
  font: 14px Verdana, Arial, Helvetica, sans-serif;
}
.formOk { font: bold 18px Verdana, Arial, Helvetica, sans-serif; color: #063; }

/* CyloCaptcha security check */
.captchaBox { margin-top: 6px; }
.captchaLink { margin: 6px 0; font-size: 13px; }
.captchaNote { margin: 4px 0 0; font-size: 12px; color: #333; }
/* The widget's empty <td>s carry an invalid width="2px"/height="2px"; without
   this they inflate to the inherited font size. font-size:0 + explicit 4px
   cells render the grid at a readable, deterministic size. */
#testPad { font-size: 0; line-height: 0; overflow-x: auto; padding: 8px; background: #efe7de;
           border: 1px solid #555; border-radius: 3px; display: inline-block; max-width: 100%; }
#testPad table { width: auto; max-width: none; }
#testPad td td { width: 4px; height: 4px; padding: 0; }

/* --------------------------------------------------------------------------
   Footer (zion-close)
   -------------------------------------------------------------------------- */
.siteFooter { text-align: center; padding: 24px 10px 32px; }
.siteFooter .flag { width: 284px; max-width: 80%; height: auto; }
.siteFooter .copyright { display: block; margin-top: 10px; font-size: 13px; font-weight: bold; }
.siteFooter .copyright img { width: 12px; height: 12px; vertical-align: middle; }
