/* ===========================
   Master Site Frame CSS
   =========================== */

/* --- CSS Variables (shared theme) --- */
:root {
  /* Core sizing */
  --max-width: 975px;
  --border-strip-height: 17px;
  --rail-width: 2px;

  /* Colors */
  --color-bg: #000;
  --color-panel: #4A0000;
  --color-rail: #990000;
  --color-text: #C0C0C0;
  --color-footer: #808080;
}

/* --- Global Link Styling --- */
a:link,
a:visited {
  color: #FFD9B3;
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover,
a:focus {
  color: #FFFFFF;
  text-decoration: underline;
text-shadow: 0 0 6px rgba(255,255,255,0.7);

}

a:active {
  color: #FFCC66;
}

body { background-color: var(--color-bg); margin: 0; }

/* --- Shared table container pattern --- */
#LogoTable, #TopFade, #BtmFade, #TopDecBorder, #BtmDecBorder, #MainBody {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Only these use fixed layout */
#TopFade, #BtmFade, #MainBody { table-layout: fixed; }

/* --- Header: Logo table --- */
#LogoTable td { padding: 0; border: 0; }
#LogoTable .col4 { height: 25px; }
#LogoTable .col1 { width: 255px; }
#LogoTable .col2 { width: 316px; text-align: center; }
#LogoTable .col3 { width: 404px; }
#LogoTable img { display: block; margin: 0 auto; }

/* --- Fades (top/bottom) --- */
#TopFade td, #BtmFade td { padding: 0; border: 0; }
#TopFade img, #BtmFade img { display: block; border: none; max-width: 100%; height: 15px; }

/* Top fade styling */
#TopFade td {
  background-image: url('../images/topfade.webp');
  background-repeat: repeat-x;
  background-size: auto 100%;
}

/* Bottom fade — row 1 is fade bar, row 2 is text */
#BtmFade tr:first-child td {
  height: 25px;
  background-image: url('../images/bottomfade.webp');
  background-repeat: repeat-x;
  background-size: auto 100%;
}

#BtmFade tr:last-child td {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: var(--color-footer);
  text-align: center;
  line-height: 1.4;
  padding: 6px 0;
}

/* --- Decorative borders (top/bottom) --- */
#TopDecBorder td,
#BtmDecBorder td { padding: 0; border: 0; }

/* Corner arcs: keep constant at 17×17, never scale */
#TopDecBorder td:first-child img,
#TopDecBorder td:last-child  img,
#BtmDecBorder td:first-child img,
#BtmDecBorder td:last-child  img {
  width: 17px;
  height: 17px;
  min-width: 17px;     /* prevent shrinking on small screens */
  max-width: none;     /* ignore global max-width:100% */
  display: block;
}

/* Make the corner cells exactly 17px wide */
#TopDecBorder td:first-child,
#TopDecBorder td:last-child,
#BtmDecBorder td:first-child,
#BtmDecBorder td:last-child {
  width: 17px;
}

/* Center strip: fluid width, fixed height */
#TopDecBorder td:nth-child(2) img,
#BtmDecBorder td:nth-child(2) img {
  display: block;
  width: 100%;
  height: var(--border-strip-height); /* 17px */
  max-width: 100%;                    /* allow shrinking */
}

/* ===========================
   Main Navigation (desktop + mobile hamburger)
   =========================== */
.main-nav {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  background: #4A0000;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  position: relative;
}

/* desktop list */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav li {
  display: inline-block;
  vertical-align: middle;
}

/* Desktop separators */
.main-nav li:not(:last-child)::after {
  content: "|";
  color: #C0C0C0;
  margin: 0 14px;
  vertical-align: middle;
}

.main-nav a {
  display: inline-block;          /* full clickable area */
  padding: 0 18px;
  line-height: 48px;
  color: #C0C0C0;
  text-decoration: none;
  background: #4A0000;
  transition: background 0.5s ease, color 0.5s ease;
  vertical-align: middle;
}
.main-nav a:hover {
  background: #990000;
  color: #FFFFFF;
}

/* Hamburger control (hidden checkbox) */
.nav-toggle {
  position: absolute;
  left: -9999px; /* hide visually, but remain accessible */
}

/* Base hamburger icon */
.hamburger {
  display: none;                 /* hidden on desktop */
  cursor: pointer;
  padding: 10px 12px;
  line-height: 0;
  user-select: none;
  position: relative;
  z-index: 1000;                 /* keep above dropdown menu */
}

.hamburger span:not(.visually-hidden) {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: #C0C0C0;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* When toggled ON (checkbox checked) => animate hamburger into X */
.nav-toggle:checked + .hamburger span:nth-of-type(2) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle:checked + .hamburger span:nth-of-type(3) {
  opacity: 0;
}
.nav-toggle:checked + .hamburger span:nth-of-type(4) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* --- Mobile switch: use same breakpoint as site --- */
@media (max-width:700px) {
  .main-nav {
    width: 100%;
    text-align: left;
  }

  /* show hamburger, stack menu */
  .hamburger { display: inline-block; }

  /* hide desktop separators */
  .main-nav li::after { content: none !important; }

  /* collapsed state (slide + fade) */
  #nav-list {
    max-height: 0;                 /* hidden initially */
    overflow: hidden;
    opacity: 0;                    /* invisible when collapsed */
    transition:
      max-height 0.5s ease,
      opacity 0.5s ease;           /* fade + slide combo */
    background: #4A0000;
    border-top: 1px solid #660000;
    margin: 0;
    padding: 0;
  }

  /* expanded (menu open) */
  .nav-toggle:checked + .hamburger + #nav-list {
    max-height: 500px;  /* tall enough for all links */
    opacity: 1;          /* fade in */
  }

  /* stacked items */
  .main-nav li { display: block; }
  .main-nav a {
    display: block;
    padding: 12px 10px;
    line-height: 1.3;
    border-bottom: 1px solid #660000;
  }
  .main-nav a:hover { background: #990000; }

  /* --- Staggered fade-in for menu items --- */
  @keyframes fadeSlideIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .nav-toggle:checked + .hamburger + #nav-list li {
    opacity: 0; /* start hidden before animation triggers */
    animation: fadeSlideIn 0.4s ease forwards;
  }
  .nav-toggle:checked + .hamburger + #nav-list li:nth-child(1) { animation-delay: 0.05s; }
  .nav-toggle:checked + .hamburger + #nav-list li:nth-child(2) { animation-delay: 0.10s; }
  .nav-toggle:checked + .hamburger + #nav-list li:nth-child(3) { animation-delay: 0.15s; }
  .nav-toggle:checked + .hamburger + #nav-list li:nth-child(4) { animation-delay: 0.20s; }
  .nav-toggle:checked + .hamburger + #nav-list li:nth-child(5) { animation-delay: 0.25s; }
  .nav-toggle:checked + .hamburger + #nav-list li:nth-child(6) { animation-delay: 0.30s; }
}

/* ===========================
   Main body frame (shared)
   =========================== */
#MainBody { background-color: var(--color-panel); }
#MainBody .col2 { width: auto; padding: 20px; }
#MainBody .col1, #MainBody .col3 {
  width: var(--rail-width);
  background-color: var(--color-rail);
  padding: 0;
}

/* ===========================
   Mobile frame helpers (shared)
   =========================== */
@media (max-width:700px) {
  /* Stack logo cells */
  #LogoTable tr, #LogoTable td { display:block; width:auto !important; text-align:center !important; }
  #LogoTable .col1, #LogoTable .col2, #LogoTable .col3 { width:auto !important; }

  /* Corner handling */
  #TopDecBorder td:first-child, #TopDecBorder td:last-child,
  #BtmDecBorder td:first-child, #BtmDecBorder td:last-child { display: table-cell !important; }
  #TopDecBorder, #BtmDecBorder { border-radius:12px; overflow:hidden; }
}

/* Smooth scrolling for all anchor links */
html {
  scroll-behavior: smooth;
}

/* Base button (hidden by default) */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #4A0000;
  color: #C0C0C0;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  opacity: 0;                 /* start invisible */
  pointer-events: none;       /* non-clickable when hidden */
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 999;
}

/* When scrolled down (class added by JS) */
.back-to-top.visible {
  opacity: 0.8;
  pointer-events: auto;
  transform: translateY(0);
}

/* Hover / focus styles */
.back-to-top:hover,
.back-to-top:focus {
  opacity: 1;
  transform: translateY(-4px);
  background: #990000;
  color: #FFFFFF;
}

/* Larger tap target on mobile */
@media (max-width:700px) {
  .back-to-top {
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
    right: 16px;
    bottom: 16px;
  }
}

/* ===========================
   End master frame CSS
   =========================== */