/* ============================================================
   SYNACTORS GUILD — style_responsive.css
   Strategy: the original image slices (_01–_10) are reassembled
   in HTML. The entire 1024px header block scales uniformly via
   CSS transform so both rows (title + navbar) shrink and grow
   together with no element rearrangement at any viewport width.
   ============================================================ */


/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  background-color: #0d0600;
  color: #c8b89a;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.7;
}


/* ============================================================
   OUTER WRAPPER
   ============================================================ */

#mainWindow {
  max-width: 1280px;
  margin: 0 auto;
  background-color: #1a0c04;
}


/* ============================================================
   HEADER  (titlebar + navbar as one scaling unit)
   ============================================================
   #header is a 1024px-wide block that scales down to fit any
   viewport using transform: scale(). Both the title image
   (_01) and the navbar slice row (_02–_10) sit inside it and
   scale together as one unit — no element ever rearranges.

   The transform approach means the images stay at their true
   pixel sizes internally (so they look crisp) while the whole
   block shrinks proportionally on narrower screens.
   ============================================================ */

#header {
  width: 1024px;
  transform-origin: top left;
  /* JavaScript in the page sets --header-scale at runtime.
     Fallback: full size on wide screens. */
  transform: scale(var(--header-scale, 1));
  line-height: 0;     /* suppress whitespace gaps between images */
}

/* Reserve the correct scaled height in document flow so content
   below doesn't overlap the header */
#header-wrap {
  width: 100%;
  overflow: hidden;
  /* Height is set dynamically by the same JS that sets --header-scale */
}

/* Title image: _01, 1024×78px */
#titlebar {
  display: block;
  line-height: 0;
}

#titlebar a,
#titlebar img {
  display: block;
  width: 1024px;
  height: 78px;
}

/* Navbar: the slice row sits directly below _01, also 1024px wide */
#navbar {
  display: block;
  line-height: 0;
  font-size: 0;       /* squash any whitespace between inline-block items */
  white-space: nowrap;
}

/* Every item in the navbar row is an inline-block image-link.
   Widths match the original slice pixel widths exactly. */
.nav-slice {
  display: inline-block;
  vertical-align: top;
  line-height: 0;
}

/* Decorative slices (no link) */
.nav-slice img {
  display: block;
}

/* Linked nav items: swap to hover image on mouseover,
   active page always shows the h (highlighted) version */
.nav-slice a {
  display: block;
  line-height: 0;
}

.nav-slice a img.nav-normal { display: block; }
.nav-slice a img.nav-hover  { display: none;  }

.nav-slice a:hover img.nav-normal,
.nav-slice a.active img.nav-normal { display: none;  }

.nav-slice a:hover img.nav-hover,
.nav-slice a.active img.nav-hover  { display: block; }


/* ============================================================
   BODY LAYOUT  (sidebar + main content)
   ============================================================ */

#bodyLayout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  min-height: 500px;
}

#sidebar {
  width: 200px;
  min-width: 160px;
  flex-shrink: 0;
  border-right: 1px solid rgba(122, 58, 16, 0.35);
  padding: 1.25rem 0;
}

/* Sidebar — supports both baked-in <p> structure (legacy)
   and loader-injected <ul><li> structure (new) */

#sidebar p,
#sidebar li {
  padding: 0.3rem 1rem;
  font-size: 0.82rem;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
  list-style: none;
}

/* Active item — plain text, no link */
#sidebar p,
#sidebar li.sidebar-active {
  color: #7a3a10;
  font-style: italic;
  font-weight: bold;
}

#sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

    #sidebar .sidebar-header {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #b8a898;
        padding: 0.3rem 1rem; /* match exactly the padding of #sidebar li */
        margin: 0;
        cursor: default;
        user-select: none;
        pointer-events: none;
    }
 

#sidebar a {
  display: block;
  color: #4caf50;
  text-decoration: none;
}

#sidebar a:hover {
  color: #80e080;
  text-decoration: underline;
}

/* "Show more / Show fewer" toggle button */
#sidebar li.sidebar-toggle {
  color: #b07030;
  cursor: pointer;
  font-style: normal;
  font-weight: normal;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(122, 58, 16, 0.2);
  margin-top: 0.25rem;
}

#sidebar li.sidebar-toggle:hover {
  color: #d09050;
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

#mainContent {
  flex: 1;
  padding: 1.75rem 2rem;
  min-width: 0;   /* prevents flex blowout */
}

h1 {
  font-family: Georgia, serif;
  font-size: 1.6rem;
  font-weight: bold;
  color: #d4b896;
  text-transform: capitalize;
  font-variant: small-caps;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(122, 58, 16, 0.3);
  padding-bottom: 0.4rem;
}

h2 {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  color: #c4a882;
  margin: 1.5rem 0 0.6rem;
}

h3 {
  font-size: 1rem;
  color: #b09070;
  margin: 1.2rem 0 0.4rem;
}

p {
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
}

a {
  color: #b07030;
  text-decoration: none;
}

a:hover {
  color: #d09050;
  text-decoration: underline;
}

blockquote {
  border-left: 3px solid rgba(122, 58, 16, 0.5);
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  color: #a89070;
  font-style: italic;
}

/* Two-column text layout for wide content areas */
.textColumns2 {
  column-count: 2;
  column-gap: 2.5rem;
  column-rule: 1px solid rgba(122, 58, 16, 0.2);
}

.textColumns2 p:first-child {
  margin-top: 0;
}

/* Inside two-column layout, illustration spans naturally */
.textColumns2 .page-illustration {
  break-inside: avoid;
}


/* ============================================================
   FOOTER
   ============================================================ */

#footer {
  border-top: 1px solid rgba(122, 58, 16, 0.4);
  padding: 0.9rem 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  color: #6a5540;
}

#footer table {
  width: 100%;
  border-collapse: collapse;
}

#footer td {
  padding: 0.1rem 0.5rem;
  text-align: center;
}

#footer td:first-child { text-align: left; }
#footer td:last-child  { text-align: right; }


/* ============================================================
   IMAGES
   ============================================================ */

img {
  max-width: 100%;
  height: auto;
}

.imageBox {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: 45%;
}

.imageBox img {
  display: block;
  border: 1px solid rgba(122, 58, 16, 0.4);
}

.imageBox p {
  font-size: 0.75rem;
  color: #8a7060;
  font-style: italic;
  margin-top: 0.3rem;
  text-align: center;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}


/* ============================================================
   REVIEW / AWARDS SPECIFIC
   ============================================================ */

.reviewScore {
  font-size: 1.5rem;
  font-weight: bold;
  color: #c09050;
}

.awardEntry {
  border-bottom: 1px solid rgba(122, 58, 16, 0.2);
  padding: 0.6rem 0;
  margin-bottom: 0.5rem;
}


/* ============================================================
   TABLET  (768px – 1023px)
   The header scales automatically via JS transform — no CSS
   needed here for it. Only body layout adjustments below.
   ============================================================ */

@media (max-width: 1023px) {
  html { font-size: 15px; }

  #sidebar { width: 170px; min-width: 140px; }

  #mainContent { padding: 1.25rem 1.5rem; }

  .textColumns2 { column-count: 1; }

  #footer table, #footer tr, #footer td {
    display: block;
    text-align: left !important;
  }
  #footer td { padding: 0.1rem 0; }
}


/* ============================================================
   MOBILE  (up to 767px)
   Header still scales via JS — no rearrangement.
   Sidebar stacks above content.
   ============================================================ */

@media (max-width: 767px) {
  html { font-size: 14px; }

  /* Stack sidebar above content */
  #bodyLayout { flex-direction: column; }

  #sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(122, 58, 16, 0.25);
    padding: 0.75rem 0;
    display: flex;
    flex-wrap: wrap;
  }

  #sidebar p,
  #sidebar a {
    padding: 0.25rem 0.75rem;
  }

  #mainContent { padding: 1rem 0.9rem; }

  .textColumns2 { column-count: 1; }

  #footer { font-size: 0.65rem; }
}


/* ============================================================
   PRINT
   ============================================================ */

@media print {
  body { background: white; color: black; }
  #navbar, #sidebar, #footer { display: none; }
  #mainContent { padding: 0; }
  .textColumns2 { column-count: 1; }
  a { color: black; text-decoration: underline; }
}