/* File: /public_html/php/ui.css
 * Purpose: Shared UI styles for header/footer + basic page helpers
 */

:root{
  --tns-black:#000;
  --tns-white:#fff;
}

body{
  margin:0;
  font-family:Georgia, serif;
  background:#fff;
  color:#000;
}

/* ===== Top bar header ===== */
header.topbar{
  background:var(--tns-black);
  color:var(--tns-white);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 12px 6px 0; /* left flush */
}

header.topbar .brand{
  display:flex;
  align-items:center;
  margin-left:0;
}

header.topbar .brand img{
  width:48px;
  height:48px;
  display:block;
  margin-right:1px; /* title tight to icon */
}

header.topbar .brand-title{
  font-size:16px;        /* smaller so it fits mobile */
  font-weight:bold;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:58vw;        /* keeps room for lang on right */
}

header.topbar .lang{
  font-size:12px;
  font-weight:bold;
  opacity:.85;
  white-space:nowrap;
}

/* ===== Footer ===== */
footer.site-footer{
  margin-top:32px;
  padding:18px 14px;

  font-size:13px;
  opacity:.85;
  text-align:center;
}

/* Optional: a simple page container */
.tns-wrap{
  width:min(440px,92vw);
  margin:0 auto;
  padding:18px 0 28px;
}

/* PREVIEW PAGE (preview.php) */
.pv-box{border:1px solid #000;padding:44px 34px;text-align:center;box-sizing:border-box;}
.pv-thumbs{display:flex;gap:6px;justify-content:center;align-items:flex-start;margin:14px 0 16px;}
.pv-thumb{flex:0 0 auto;width:120px;padding:1px;border:1px solid #000;cursor:pointer;box-sizing:border-box;background:#fff;}
.pv-thumb img{display:block;width:120px;height:auto;}
.pv-desc{font-size:16px;line-height:1.35;margin:0 0 14px;max-width:none;text-align:left;}
.pv-subhead{margin:6px 0 10px;font-weight:700;opacity:.9;}
.pv-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:14px;}
.pv-btn{display:inline-block;background:#000;color:#fff;text-decoration:none;padding:14px 18px;font-size:18px;border-radius:3px;min-width:210px;text-align:center;}
.pv-btn.pv-alt{background:#fff;color:#000;border:1px solid #000;}

/* lightbox */
.pv-lb{position:fixed;inset:0;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;padding:18px;z-index:9999;}
.pv-lb.open{display:flex;}
.pv-lb img{max-width:min(92vw,520px);height:auto;border:2px solid #fff;background:#000;}
.pv-lb .close{position:fixed;top:14px;right:14px;background:#fff;border:1px solid #000;padding:8px 10px;font-weight:700;cursor:pointer;}
body.pv-lb-open{overflow:hidden;}

/* tracking pixel */
.tns-px{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;}