/* ============================================================
   HBHS OLD BOYS' DATABASE — STAGED RESKIN  (low-risk, stage 1)
   ------------------------------------------------------------
   Restyles ONLY the content area: headings, body text, links,
   sidebar buttons, form buttons, inputs, tables. It deliberately
   does NOT touch the page background, header, nav bar, or footer —
   so there is no risk of unreadable dark-on-dark text or an
   invisible gold-on-gold nav on the legacy images.

   Use this for the FIRST live deploy. Once confirmed across all
   page types, switch the <link> to hbhs-reskin.css (the full
   version: maroon canvas + reskinned header/nav/footer).

   Deploy: upload to /files/css/, then in a layout block append:
     <link rel="stylesheet" href="/files/css/hbhs-reskin-staged.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Cormorant:wght@500;600;700&family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

:root{
  --ob-maroon:#4a1010;
  --ob-gold:#9e8f67;
  --ob-tan:#f7f5eb;
  --ob-white:#ffffff;
  --ob-ink:#4a4744;
  --ob-line:#e7e2d2;
  --ob-serif:'Cormorant',Georgia,serif;
  --ob-mono:'Roboto Mono',monospace;
  --ob-body:'Hanken Grotesk','Open Sans',system-ui,sans-serif;
}

/* ---- Content typography (no background changes) ------------ */
#content{ font-family:var(--ob-body); font-weight:300; }
#content p, #content li, #content td, #content label{ font-family:var(--ob-body)!important; font-size:16px; color:var(--ob-ink); line-height:1.6; }

#content h1{ font-family:var(--ob-serif)!important; font-weight:600; font-size:46px; line-height:1.06; color:var(--ob-maroon)!important; }
#content h2{ font-family:var(--ob-serif)!important; font-weight:600; font-size:34px; line-height:1.08; color:var(--ob-maroon)!important; }
/* page titles on this site are usually <h3> — keep them a proper serif heading */
#content h3{ font-family:var(--ob-serif)!important; font-weight:600; font-size:28px; line-height:1.12; color:var(--ob-maroon)!important; text-transform:none; letter-spacing:0; }
#content h4{ font-family:var(--ob-serif)!important; font-weight:600; font-size:20px; line-height:1.2; color:var(--ob-maroon)!important; }

/* ---- Links ------------------------------------------------ */
#content a{ color:var(--ob-gold); }
#content a:hover{ color:var(--ob-maroon); }

/* ---- Sidebar database buttons → outlined brand button ----- */
#right ul.new-side-nav, ul.new-side-nav{ list-style:none; margin:0; padding:0; }
#right ul.new-side-nav li, ul.new-side-nav li{ margin:0 0 18px; }
#right ul.new-side-nav li a, ul.new-side-nav li a{
  display:block; background:transparent; border:1px solid var(--ob-maroon); border-radius:0;
  color:var(--ob-maroon); font-family:var(--ob-mono); text-transform:uppercase; letter-spacing:.12em; font-size:12px; line-height:1.5;
  padding:18px 20px; text-decoration:none; box-shadow:none!important;
  transition:background .18s ease, color .18s ease;
}
#right ul.new-side-nav li a:hover, ul.new-side-nav li a:hover{ background:var(--ob-maroon); color:var(--ob-tan); }
/* drop the legacy chevron/arrow on the side-nav buttons */
#right ul.new-side-nav li, #right ul.new-side-nav li a{ background-image:none!important; list-style:none!important; }
#right ul.new-side-nav li a:before, #right ul.new-side-nav li a:after{ content:none!important; display:none!important; }
#right ul.new-side-nav li a img{ display:none!important; }
#right ul.new-side-nav li a span{ background:none!important; padding-left:0!important; }
/* space the content row off the banner */
#content{ padding-top:16px!important; }

/* ---- Form buttons → main brand button --------------------- */
#content input[type=submit], #content input[type=button], #content button, #content .button, #content .btn{
  background:var(--ob-gold)!important; border:1px solid var(--ob-gold)!important; border-radius:0!important;
  color:var(--ob-maroon)!important; font-family:var(--ob-mono)!important; text-transform:uppercase; letter-spacing:.12em;
  font-size:12px!important; font-weight:500; padding:12px 22px!important; height:auto!important; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
#content input[type=submit]:hover, #content input[type=button]:hover, #content button:hover, #content .button:hover, #content .btn:hover{
  background:var(--ob-maroon)!important; border-color:var(--ob-maroon)!important; color:var(--ob-tan)!important;
}

/* ---- Inputs ----------------------------------------------- */
#content input[type=text], #content input[type=email], #content input[type=password], #content textarea, #content select{
  border:1px solid var(--ob-line)!important; border-radius:0!important;
  font-family:var(--ob-body)!important; font-size:15px!important; padding:10px 12px!important;
}
#content input:focus, #content textarea:focus, #content select:focus{ outline:none!important; border-color:var(--ob-gold)!important; }

/* ---- Tables (directory / search results) ------------------ */
#content table th{ background:var(--ob-maroon)!important; color:var(--ob-tan)!important; font-family:var(--ob-mono)!important; text-transform:uppercase; letter-spacing:.1em; font-size:11px!important; }
#content table td{ border-bottom:1px solid var(--ob-line)!important; }

/* ===================== FULL MAROON CANVAS ===================== */
/* page background → brand maroon (replaces the grey diamond pattern) */
body{ background:var(--ob-maroon)!important; background-image:none!important; }
/* header band → brand maroon (replaces the bright-red header-bg.jpg) */
#header, .top-middle-header, #search-bg{ background:var(--ob-maroon)!important; background-image:none!important; }
/* keep the main content panel light (cream) */
.content-wrapper{ background:var(--ob-tan)!important; }

/* push the columns off the banner image */
#content #left, #content #right{ margin-top:18px!important; }

/* nuke the legacy chevron arrow no matter which element/img/bg holds it */
#right ul.new-side-nav, #right ul.new-side-nav *{ background-image:none!important; }
#right ul.new-side-nav li:before, #right ul.new-side-nav li:after,
#right ul.new-side-nav li a:before, #right ul.new-side-nav li a:after{ content:none!important; display:none!important; }
#right ul.new-side-nav li a img{ display:none!important; }