@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");

/* =====================================================
   TCSS CENTRAL STYLE SHEET
   Sunset Header + Logo + Desert Background
   Clean Layout + Centered Title + Dropdown Navigation
   ===================================================== */

/* =========================
   TCSS GRAPHICS AND COLORS
   ========================= */
:root {
  --tcss-burgundy:#710a1b;
  --tcss-burgundy-dark:#4b0612;
  --tcss-cream:#fff4df;
  --tcss-text:#333;
}

/* =========================
   RESET AND PAGE LAYOUT
   ========================= */
* { box-sizing:border-box; margin:0; padding:0; }
html { min-height:100%; }
body {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:Arial,sans-serif;
  background-color:#f7d6ad;
  background-image:url('https://tcss.club/site2/img/bg-body.png');
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
  color:var(--tcss-text);
  /* Preserve behavior needed for Caspio sticky headers */
  overflow-x:hidden;
}

/* =====================================================
   TCSS CURVED HEADER
   Use the original image and curve only its background layer.
   The logo and title stay un-clipped above it.
   ===================================================== */
.header-container {
  position:relative;
  flex-shrink:0;
  min-height:102px;
  padding:0;
  background-color:transparent;
  background:none;
  border:0;
  z-index:1;
}
.header-container::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("https://tcss.club/site2/img/header.png");
  background-position:center top;
  background-repeat:no-repeat;
  background-size:100% 100%;
  clip-path:polygon(
    0% 0%,100% 0%,100% 100%,95% 96%,90% 92%,
    80% 82%,70% 73%,60% 67%,50% 64%,
    40% 67%,30% 73%,20% 82%,10% 92%,
    5% 96%,0% 100%
  );
  pointer-events:none;
}
.site-inner {
  width:95%;
  max-width:1440px;
  min-height:88px;
  margin:0 auto;
  padding:4px 0 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(9px,1.5vw,18px);
  text-align:center;
  position:relative;
  z-index:2;
}
.logo {
    position: relative;
    left: -150px;
    margin-left: 0;
    flex-shrink: 0;
}.site-title {
  display:inline-block;
  position:relative;
  top:-18px; /* Higher/lower title: more negative means higher */
  margin:0;
  font-family:"Permanent Marker",cursive;
  font-size:clamp(1.35rem,2.05vw,2.1rem);
  font-weight:normal;
  line-height:1.04;
  letter-spacing:.01em;
  text-align:center;
  /* REVERSED: bright/glowing look is the normal state */
  background:linear-gradient(135deg,#fff7bf 0%,#ffe15a 46%,#c98b00 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#ffe15a;
  filter:brightness(1.07);
  text-shadow:
    1px 1px 3px rgba(0,0,0,.42),
    4px 4px 8px rgba(83,61,0,.40),
    -1px -1px 0 rgba(255,240,196,.50),
    1px 1px 0 rgba(88,63,0,.58);
  transition:filter 180ms ease,text-shadow 180ms ease,transform 180ms ease;
}
.site-title:hover {
  /* REVERSED: original, softer gold treatment on hover */
  filter:brightness(1);
  text-shadow:
    -1px -1px 0 rgba(255,255,225,.82),
    1px 1px 0 rgba(112,75,0,.30),
    2px 2px 4px rgba(35,18,0,.18),
    0 0 6px rgba(255,221,70,.18);
  transform:translateY(-1px);
}

/* =====================================================
   DROPDOWN NAVIGATION
   ===================================================== */
#menu-placeholder {
  position:relative;
  z-index:1000;
  flex-shrink:0;
  margin:-27px 0 0 !important;
  padding:0 !important;
}
#menu-placeholder nav,
#menu-placeholder .site-nav {
  margin:0 !important;
  padding:0 !important;
}
.site-nav {
  background:transparent !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}
.menu {
  list-style:none;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 !important;
  padding:0 !important;
}
.menu > li { position:relative; }
.menu > li > a {
  display:block;
  padding:8px 18px !important;
  text-decoration:none;
  color:#111111;
  font-weight:600;
  font-size:16px;
}
.menu > li > a:hover,
.menu > li:hover > a {
  background-color:rgba(255,250,240,.58);
}
.submenu {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  list-style:none;
  background-color:#333;
  min-width:375px;
  padding:0;
  margin:0;
  z-index:1000;
}
.submenu li { position:relative; }
.submenu li a {
  display:block;
  padding:10px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
}
.submenu li a:hover { background-color:#444; }
.menu li:hover > .submenu { display:block; }
/* Third-level dropdowns open to the side on desktop. */
.submenu .submenu { top:0; left:100%; }

/* =====================================================
   DROPDOWN ARROWS
   ===================================================== */
.menu > li.has-submenu > a::after {
  content:"";
  display:inline-block;
  margin-left:6px;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid #111111;
  transition:transform .2s ease,opacity .2s ease;
  opacity:.75;
}
.menu > li.has-submenu:hover > a::after {
  transform:rotate(180deg);
  opacity:1;
}
.submenu > li.has-submenu > a::after {
  content:"";
  display:inline-block;
  margin-left:6px;
  width:0;
  height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:5px solid #fff;
}

/* =====================================================
   MAIN CONTENT
   ===================================================== */
.main-content {
  flex:1 0 auto;
  width:100%;
  max-width:none;
  margin:0 !important;
  padding:0 !important;
}

/* =====================================================
   CASPIO WIDTH AND CENTERING
   ===================================================== */
.caspio-wrap { margin-left:auto; margin-right:auto; }
.caspio-w100 { width:100%; }
.caspio-w95 { width:95%; }
.caspio-w90 { width:90%; }
.caspio-w85 { width:85%; }
.caspio-w80 { width:80%; }
.caspio-w75 { width:75%; }
.caspio-w70 { width:70%; }
.caspio-w60 { width:60%; }
.caspio-w50 { width:50%; }

/* =====================================================
   CASPIO SCRIPT ROWS
   ===================================================== */
.caspio-row {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:20px;
  width:90%;
  margin:0 auto 20px;
}
.caspio-script-container {
  background:#fff;
  padding:15px;
  border-radius:4px;
  box-shadow:0 2px 5px rgba(0,0,0,.1);
}
.caspio-col-40 { flex:0 0 40%; }
.caspio-col-30 { flex:0 0 30%; }
.caspio-col-25 { flex:0 0 25%; }
.w-5 { width:5%; }
.w-10 { width:10%; }
.w-15 { width:15%; }
.w-20 { width:20%; }
.w-25 { width:25%; }
.w-30 { width:30%; }
.w-33 { width:32%; }
.w-35 { width:35%; }
.w-40 { width:40%; }
.w-45 { width:45%; }
.w-50 { width:48%; }
.w-55 { width:55%; }
.w-60 { width:60%; }
.w-65 { width:65%; }
.w-70 { width:70%; }
.w-75 { width:75%; }
.w-80 { width:80%; }
.w-85 { width:85%; }
.w-90 { width:90%; }
.w-95 { width:95%; }
.w-100 { width:100%; }

/* =====================================================
   REMOVE EXTRA SPACE ABOVE CASPIO
   ===================================================== */
.cbOuterTable,
.cbFormOuterTable,
.cbResultSetTable {
  margin-top:0 !important;
  padding-top:0 !important;
}
.cbResultSet,
.cbForm,
.cbFormTable { margin-top:0 !important; }

/* =====================================================
   FOOTER — STAYS AT BOTTOM
   ===================================================== */
.footer-container {
  flex-shrink:0;
  margin-top:auto;
  width:100%;
background-color:#6a0519;
  color:#fff;
  font-size:14px;
  text-align:center;
  padding:20px;
}

/* =====================================================
   SCROLL ARROWS
   ===================================================== */
.scroll-arrows {
  position:fixed;
  right:20px;
  bottom:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:9999;
}
.scroll-arrow {
  background-color:620517
   color:#fff;
  text-decoration:none;
  padding:10px 15px;
  border-radius:5px;
  font-weight:bold;
  text-align:center;
  opacity:.8;
}
.scroll-arrow:hover { opacity:1; }

/* =====================================================
   BACK TO TOP BUTTON
   ===================================================== */
#backToTop {
  display:none;
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:999;
  font-size:18px;
  background-color:var(--tcss-burgundy);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.25);
  transition:all .25s ease;
}
#backToTop:hover {
  background-color:#944256;
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}
#backToTop:active {
  transform:translateY(0);
  box-shadow:0 2px 5px rgba(0,0,0,.2);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1100px) {
  .site-title { font-size:clamp(1.18rem,3.3vw,1.8rem); }
}
@media (max-width:900px) {
  .caspio-col-40,
  .caspio-col-30,
  .caspio-col-25 { flex:0 0 100%; }
}
@media (max-width:700px) {
  .header-container { min-height:86px; }
  .site-inner { min-height:76px; padding:4px 0 13px; gap:8px; }
  .logo { width:56px; margin-left:0; transform:translateY(-4px); }
  .site-title { font-size:clamp(1rem,4.5vw,1.42rem); top:-8px; }
  .site-title:hover { transform:translateY(-1px); }
  #menu-placeholder { margin-top:-22px !important; }
  .menu { flex-direction:column; align-items:center; }
  .menu > li { width:100%; text-align:center; }
  .submenu,
  .submenu .submenu {
    position:static;
    top:auto;
    left:auto;
    width:100%;
    min-width:0;
  }
  .caspio-wrap { width:95%; }
  .caspio-row { width:95%; }
  body { background-attachment:scroll; }
}

/* Printing: no decorative site backgrounds or navigation */
@media print {
  body { display:block; background:#fff; }
  .header-container,#menu-placeholder,.footer-container,#backToTop { display:none !important; }
  .main-content,.caspio-wrap { width:100% !important; margin:0 !important; }
}
/* ==========================================
   DROPDOWN MENU ARROWS
   Only show arrows when a submenu exists
   ========================================== */

/* Top-level dropdown arrows */
.menu > li:has(> .submenu) > a::after {
    content: "▼";
    display: inline-block;
    margin-left: 6px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: #111111;
    vertical-align: middle;
}

/* Third-level submenu arrows */
.submenu > li:has(> .submenu) > a::after {
    content: "▶";
    display: inline-block;
    margin-left: 8px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: inherit;
}
/* ADD TO THE VERY BOTTOM OF site2/site.css (or your new template CSS). */
/* Three-level menu: flyout right on desktop, stacked on narrow screens. */
.site-nav, .site-nav .menu, .site-nav li { overflow: visible; }
.site-nav { position: relative; z-index: 5000; }
.site-nav .menu li { position: relative; }
.site-nav .menu-toggle {
  font: inherit; color: inherit; background: transparent; border: 0;
  cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; padding: 10px 14px;
}
.site-nav .menu-arrow { font-size: 10px; margin-left: 8px; flex: 0 0 auto; }
/* Match toggles with ordinary links in your existing menu. */
.site-nav .menu > li > .menu-toggle { height: 100%; }
.site-nav .submenu { display: none; position: absolute; left: 0; top: 100%;
  min-width: 230px; width: max-content; max-width: 330px;
  margin: 0; padding: 0; list-style: none; z-index: 6000;
  background: #282b2d; box-shadow: 0 6px 14px rgba(0,0,0,.2);
}
.site-nav .submenu li { position: relative; }
.site-nav .submenu a, .site-nav .submenu .menu-toggle {
  box-sizing: border-box; display: flex; align-items: center;
  justify-content: space-between; width: 100%;
  padding: 10px 14px; color: #fff; text-decoration: none;
  white-space: normal;
}
.site-nav .submenu a:hover, .site-nav .submenu .menu-toggle:hover,
.site-nav .submenu a:focus-visible, .site-nav .submenu .menu-toggle:focus-visible {
  background: #45535b; color: #fff;
}
.site-nav .submenu .submenu { top: 0; left: 100%; }
.site-nav .has-submenu:hover > .submenu,
.site-nav .has-submenu:focus-within > .submenu,
.site-nav .has-submenu.is-open > .submenu { display: block; }
@media (max-width: 800px) {
  .site-nav .submenu, .site-nav .submenu .submenu {
    position: static; width: 100%; max-width: none; min-width: 0;
    box-shadow: none; padding-left: 16px;
  }
  .site-nav .has-submenu:hover > .submenu { display: none; }
  .site-nav .has-submenu.is-open > .submenu,
  .site-nav .has-submenu:focus-within > .submenu { display: block; }
}
/* =====================================================
   SITE2 MENU APPEARANCE FIX
   Paste at VERY BOTTOM of site2/site.css, AFTER earlier menu CSS
   ===================================================== */

/* Make menu heading buttons look like ordinary menu links */
.site-nav .menu > li > button.menu-toggle {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline-offset: 2px;
  color: #000 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  padding: 10px 14px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  white-space: nowrap !important;
  cursor: pointer;
}

/* Match Home to the same font and spacing */
.site-nav .menu > li > a {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  padding: 10px 14px !important;
  color: #000 !important;
  text-decoration: none;
}

/* Compact arrows beside menu headings */
.site-nav .menu > li > .menu-toggle > .menu-arrow {
  font-size: 10px !important;
  font-weight: 700 !important;
  margin-left: 0 !important;
  line-height: 1 !important;
}

/* Keep third-level dropdown headings looking like regular dropdown items */
.site-nav .submenu .menu-toggle {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
}