/* ===== YOU-ON-TV — Global Styles (simple & shared) ===== */

/* Layout scale */
:root{
  --content-w-min: 960px;
  --content-w-vw:  84vw;
  --content-w-max: 1700px;

  --page-pad:   clamp(12px, 2vw, 24px);
  --canvas-pad: clamp(12px, 2vw, 28px);
  --banner-h:   clamp(130px, 10vw, 260px);

  --ink:   #000;
  --ink-2: #333;
  --paper: #fff;
  --rule:  #808080;
  --blue:  #123a86;

  --frame: 2px solid var(--ink);
  --bezel: 0 0 0 4px var(--ink-2);
}

/* Background / type */
html, body { height:100%; margin:0; }
body{
  background:#000 url(/logo.jpg) center top / cover fixed no-repeat;
  font-family: Arial, Helvetica, sans-serif;
  color:#000;
  line-height:1.6;
  /* one place to tune global text size */
  font-size: clamp(18px, 1.2vw + 10px, 22px);
}

/* Links */
a{ color:var(--blue); }

/* Main white panel */
.content{
  width: clamp(var(--content-w-min), var(--content-w-vw), var(--content-w-max));
  margin: clamp(12px, 2vh, 24px) auto clamp(50px, 6vh, 80px);
  padding: var(--page-pad);
  background: var(--paper);
  box-sizing: border-box;
}

.rule{
  width:88%;
  height:2px;
  background:var(--rule);
  border:0;
  margin:10px auto 16px;
}
.rule--narrow{ width:60%; }

/* Banner */
.banner-wrap{ display:flex; justify-content:center; }
.banner{
  width:95%;
  max-width:1300px;
  height:var(--banner-h);
  object-fit:cover;
  object-position:center;
  display:block;
  border:0;
}

/* NAV (image buttons) — one line, tight spacing */
nav[aria-label="Primary"]{ margin: 8px 0 18px; }
nav[aria-label="Primary"] .nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}
nav[aria-label="Primary"] .nav a{ display:block; line-height:0; }
nav[aria-label="Primary"] .nav img{
  display:block; border:0;
  width:105px; height:25px;           /* identical size for every button */
}
@media (max-width: 900px){
  nav[aria-label="Primary"] .nav{ flex-wrap:wrap; gap:8px 10px; }
  nav[aria-label="Primary"] .nav img{ width:92px; height:22px; }
}

/* Framed inner canvas — EVERYTHING centered by default */
.canvas{
  background:var(--paper);
  border:var(--frame);
  box-shadow:var(--bezel);
  padding:var(--canvas-pad);
  text-align:center;                  /* <— global center */
  width:min(98%, 1400px);
  margin:0 auto;
  box-sizing:border-box;
  min-height: clamp(620px, 58vh, 1100px);
}

/* Center lists as a block, keep bullets readable */
.canvas ul, .canvas ol{
  display:inline-block;
  text-align:left;
  margin: 0 auto 1.25em;
  padding-left:1.2em;
}

/* Unified headings */
.page-title{
  color:var(--blue);
  font-family:"Times New Roman", Georgia, serif;
  text-transform:uppercase;
  letter-spacing:.3px;
  margin:.6em 0 .4em;
  font-size: clamp(42px, 6vw, 62px);
  font-weight:700;
}

h2{
  color:var(--blue);
  margin: 1.1em 0 .5em;
  font-size: clamp(26px, 3.8vw, 34px);
}

/* Small helper text */
.small{ font-size:.9em; color:#444; }

/* Footer */
.footer{ font-size:14px; text-align:center; color:#111; }
.footer a{ color:#111; text-decoration:none; }