:root {
  --white: #fff;
  --black: #000;
  --yellow: #FFDE00;
  --green: #1E5122;
  --brown: #705812;
  --brown-dark: #493a0c;
  --brown-2: #5e4b13;
  --peach: #FFC570;
  --green-dark: #0f2a12;
  --green-light: #2a6e2f;
  --cream: #fcf9f2;
  --gray-muted: #7a7268;
  --border-light: #e0d6c0;
  --text-dark: #1a1a18;
  --text-mid: #4a4840;
  --red-500: #c0392b;
}

/* reset */
*,
*::before,
*::after { box-sizing: border-box; }
html {scroll-behavior: smooth;}
html,
body { 
  margin: 0;
  padding: 0;
  background: var(--cream);
  background-color: var(--cream);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

.notice-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--red-500);
  background: var(--gray-muted);
  border-radius: 64px;
  border: 2px solid var(--peach);
  padding: 8px;
  margin: 2px;
}


.disclaimer-wrap {
  padding: 1.5rem 0;
  font-family: ui-monospace, 'Cascadia Code', 'Menlo', 'Consolas', monospace;
}

.disclaimer-container {
  background: var(--cream);
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  border-left: 3px solid var(--yellow);
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.disclaimer-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--peach) 35%, transparent) 0%, transparent 60%);
  pointer-events: none;
}

.disclaimer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.75rem;
}

.disclaimer-badge {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--peach) 18%, var(--cream) 82%);
  color: var(--brown);
  padding: 3px 10px;
  border-radius: 3px;
  border: 0.5px solid var(--peach);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.disclaimer-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.demo-pill {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: color-mix(in srgb, var(--peach) 12%, var(--cream) 88%);
  color: var(--brown-2);
  padding: 3px 10px;
  border-radius: 20px;
  border: 0.5px solid var(--peach);
  animation: pulse-badge 2.4s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.disclaimer-rule {
  flex: 1;
  height: 0.5px;
  background: rgba(0, 0, 0, 0.12);
}

.disclaimer-body {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-mid);
  margin: 0;
}

.disclaimer-body strong {
  color: var(--text-dark);
  font-weight: 500;
}

.disclaimer-body .highlight {
  color: var(--brown-2);
  font-weight: 500;
}

.disclaimer-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
  font-size: 11px;
  color: var(--gray-muted);
  letter-spacing: 0.04em;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  flex-shrink: 0;
  animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.85); }
}

@media (prefers-color-scheme: dark) {
  .disclaimer-container {
    background: var(--text-dark);
    border-color: rgba(255, 255, 255, 0.15);
    border-left-color: var(--yellow);
  }
  .disclaimer-container::before {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brown-dark) 25%, transparent) 0%, transparent 60%);
  }
  .disclaimer-badge {
    background: var(--brown);
    color: var(--yellow);
    border-color: var(--brown-dark);
  }
  .disclaimer-badge svg { stroke: var(--peach); }
  .demo-pill {
    background: var(--brown-dark);
    color: var(--peach);
    border-color: var(--brown-2);
  }
  .disclaimer-body { color: var(--border-light); }
  .disclaimer-body strong { color: var(--white); }
  .disclaimer-body .highlight { color: var(--yellow); }
  .disclaimer-rule { background: rgba(255, 255, 255, 0.1); }
  .disclaimer-footer {
    color: var(--gray-muted);
    border-top-color: rgba(255, 255, 255, 0.08);
  }
}

/* Navigation bar @ header */
/* header grid (no fixed height) */
header {
  background: linear-gradient(145deg, var(--green-dark) 20%, var(--green) 100%);
  display: grid;
  width: auto;
  grid-template-columns: 70px repeat(9, 1fr) auto auto;
  grid-template-rows: auto auto;
  gap: 0;
  position: relative;
  z-index: 1000;
  /* box-shadow: 0 2px 4px rgba(var(--yellow), 0.63), 0 10px 10px rgba(var(--yellow), 0.562); */
  box-shadow:
    0 2px  4px  color-mix(in srgb, var(--yellow) 63%, transparent),
    0 10px 20px color-mix(in srgb, var(--yellow) 25%, transparent);
}

/* Navigation logo */
.header-logo {
  grid-column: 1 / 3;
  grid-row: 1 / span 2;            /* occupy both rows */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.nav-logo {
  width: 80px;
  height: 80px;
  margin: 4px;
  margin-left: 24px;
  object-fit: cover;
  display: block;
  box-shadow: inset 12px 17px 51px rgb(56, 87, 23);
  border-radius: 50%;
  border: 2px solid var(--yellow);
}

/* Navigation Yalpae Title */
.header-bar {
  grid-column: 2 / 11;             /* central 9 cols */
  grid-row: 1 / 2;
  text-align: center;
  color: var(--peach);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 4px 4px;
}

.header-bar h1,
.header-bar h2 {
  margin: 0;
  line-height: 1.2;
}

.header-bar h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
  text-shadow: 0px 0px var(--yellow);
}

.header-bar h2 {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  opacity: 0.85;
  margin-top: 3px;
}

/* navigation buttons */
.header-join {
  grid-column: 11 / 12;
  grid-row: 1 / 2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 4px 4px 4px 0;
}

.header-login {
  grid-column: 12 / 13;
  grid-row: 1 / 2;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 4px;
  padding: 4px 8px 4px 4px;
}

.reg,
.login {
  margin-top: 15px;
  appearance: none;
  border: 0;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  padding: 5px;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.2),
               1px 1px 1px rgba(0, 0, 0, 0.6);
}

.reg {
  background: var(--peach);
  border-color: 2px var(--brown);
  color: #071a09;
}

.login {
  display: none;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--yellow);
  padding: 4px 8px;
  font-weight: bold;
  text-shadow: 0px -1px 6px rgba(255, 255, 255, 1), 0px 0px 16px rgba(96, 169, 101, 0.68), 0px 0px 100px rgba(30, 81, 34, 0.84), 0px 1px 0px rgba(255, 255, 255, 1);
}

.reg:hover, .login:hover {
  background: var(--green-light);
  border-color: var(--green-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 0 var(--green-dark);
}

/* ===== Navigation Menu Container ===== 
.nav-links {
  grid-column: 2 / 11;
  grid-row: 2 / 3;
  width: fit-content;
  max-width: 840px;
  margin: 0 4px 2px 24px;
  padding: 0;
  box-shadow: inset 0 0 3px 3px var(--yellow);
  border-radius: 3px;
  overflow: visible;
}
  
*/
  
.menu-toggle-checkbox {
  display: none;
}
  
.nav-links {
  grid-column: 2 / -1;   /* col 2 → last: sits beside the logo */
  grid-row: 2 / 3;
  justify-self: center;
  align-self: center;
  background-color: var(--brown);
  padding: 0px 0px 0px;
  margin-bottom: 4px;
  font-family: inherit;
}

/* ----- Main Menu (Top Level) ----- 
.menu {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.5vw, 18px);
  margin: 2px 8px 2px 2px;
  padding: 2px;
  list-style: none;
}
*/

.menu {
  list-style: none;
  margin: 0;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  border: 1.5px solid var(--yellow);
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
}

.menu > li {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background-color 0.2s, box-shadow 0.2s;
}




/* Top-level links */
.menu > li > a {
  display: inline-block;
  border-radius: 3px;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 1px 0px 0px var(--text-dark), -1px -1px 0 var(--black);
  color: var(--peach);
  font-size: 18px;
  letter-spacing: 0.4px;
  text-align: center;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}

.menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 11px; right: 11px;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s;
  border-radius: 1px;
}

.menu > li:hover > a { color: var(--yellow); }
.menu > li:hover > a::after { transform: scaleX(1); }
.menu > li:hover {
  background-color: var(--green);
  box-shadow: inset 0 0 3px 3px #638253;
}

/* Donate — highlighted */
.menu > li > a[href="donate.html"] {
  color: var(--yellow);
  border: 1px solid rgba(var(--brown),0.45);
  margin: 0 4px;
}
.menu > li > a[href="donate.html"]::after { display: none; }
.menu > li > a[href="donate.html"]:hover { background: rgba(212,160,23,0.15); }

/* Donate — highlighted */
.menu > li > a[href="../donate.html"] {
  color: var(--yellow);
  border: 1px solid rgba(var(--brown),0.45);
  margin: 0 4px;
}
.menu > li > a[href="../donate.html"]::after { display: none; }
.menu > li > a[href="../donate.html"]:hover { background: rgba(212,160,23,0.15); }

/* ===== Dropdown Submenu (Always Absolute) ===== */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;               /* High enough to overlay everything */
  min-width: 220px;
  padding: 8px 0;
  background: linear-gradient(
    139deg,
    rgba(30, 80, 34, 1) 0%,
    rgba(36, 80, 34, 1) 0%,
    rgba(37, 28, 40, 1) 100%
  );
  box-shadow: 
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  border-radius: 4px;
  opacity: 0.96;
  list-style: none;
}

/* Inner UL (when .submenu is a div containing a <ul>) */
.submenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.submenu li {
  margin: 0;
  padding: 0;
  display: block;
}

.submenu a {
  display: block;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 16px;
  color: var(--peach);
  text-align: left;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  transition: background-color 0.2s, padding-left 0.2s;
}

.submenu a:hover {
  background-color: rgba(255, 255, 255, 0.15);
  padding-left: 20px;
  border-radius: 2px;
}

/* Show dropdown on hover */
.menu > li:hover > .submenu,
.menu > li:focus-within > .submenu { display: block; }


.submenu li a {
  display: block;
  color: var(--peach);
  font-weight: 600;
  padding: 8px 16px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.18s, background 0.18s, padding-left 0.18s, border-color 0.18s;
}

.submenu li a:hover {
  color: var(--yellow);
  background: rgba(212,160,23,0.1);
  padding-left: 22px;
  border-left-color: var(--yellow);
}

/* ===== Prevent Overflow Clipping ===== */
header,
.nav-links,
.menu {
  overflow: visible !important;  /* Ensure dropdown can extend beyond parent bounds */
}

/* ===== Social Icons inside Submenu ===== */
.nav-socials {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  filter: brightness(0) invert(1);
}

/* Optional: email link distinction */
.submenu a[href^="mailto:"] {
  color: var(--yellow);
  border-bottom: 1px dotted var(--peach);
}

/* ── Governance table ── */
table.heros {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid rgba(255, 222, 0, 0.4);
  border-radius: 8px;
  overflow: hidden;
}

.table-h-tab tr {
  background: linear-gradient(90deg, var(--green-dark) 0%, var(--green) 100%);
}

.table-h-tab th {
  color: var(--yellow);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid var(--yellow);
}

.table-h-tab th:first-child {
  max-width: 30%;
  border-right: 1px solid rgba(255, 222, 0, 0.2);
}

.table-h-tab th:first-child {
  max-width: 70%;
}

.table-tab tr {
  background: linear-gradient(90deg, rgba(30,81,34,0.25) 0%, rgba(30,81,34,0.1) 100%);
  border-bottom: 1px solid rgba(255, 222, 0, 0.12);
  transition: background 0.18s;
}

.table-tab tr:last-child { border-bottom: none; }

.table-tab tr:nth-child(even) {
  background: linear-gradient(90deg, rgba(30,81,34,0.4) 0%, rgba(30,81,34,0.2) 100%);
}

.table-tab tr:hover {
  background: linear-gradient(90deg, rgba(255,222,0,0.1) 0%, rgba(255,222,0,0.05) 100%);
}

.table-tab td {
  padding: 12px 16px;
  font-size: 14px;
  color: #f0ede6;
  vertical-align: top;
  line-height: 1.5;
}

.table-tab td:first-child {
  color: var(--peach);
  border-right: 1px solid rgba(255, 222, 0, 0.15);
  border-left: 3px solid rgba(255, 222, 0, 0.3);
  word-wrap: break-word;
  overflow-wrap: break-word;
  transition: border-color 0.18s;
}

.table-tab tr:hover td:first-child {
  border-left-color: var(--yellow);
}

.table-tab td:first-child {
  width: 25%;
}

.table-tab td:last-child {
  width: 75%;
}

.table-tab td strong { color: var(--peach); font-weight: 700; }

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  .menu > li,
  .submenu a {
    transition: none;
  }
}
/* End: menu & navigation bar header */

body {
  font-size: 16px;
}

.hub {
  margin: 0;
  padding: 0;
  display: flex;
  aside {
    position: relative;
    background-color: var(--peach);
    margin-top: 4px;
    width: 24em;
    border-color: rgba(255, 233, 32, 0.63);
    border-width: 4px;
    border-right-style: solid;

  }

  a {
    outline: none;
    text-decoration: none;
  }

  section {
    margin: 4px;
    background-image: url("../imgs/5.png");
    width: 100%;
    height: 704px;
    padding: 8px;
  }
}

/* Pop Modals */
/* registration or joining modal */
.reg-modal {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .25);
  backdrop-filter: blur(2px);
	z-index: 10000;
	overflow: auto;
	cursor: pointer;
	border-radius: 15px;
}

/* ===== Registration Modal Container (Polished) ===== */
.reg-modal-cont {
  position: relative;
  width: 90%;                        /* Better mobile spacing */
  max-width: 736px;
  margin: 3em auto 4em;
  background: var(--white);
  background-color: #ffffff;         /* Solid fallback */
  border-radius: 15px;
  box-shadow: 
    0 0 55px 24px rgba(0, 0, 0, 0.15),
    inset 0 0 45px 29px rgba(255, 233, 32, 0.22),
    11px 9px 44px 3px rgba(8, 54, 12, 0.39),
    0 0 3px 9px rgba(8, 54, 12, 0.33);
  cursor: auto;
  
  /* Smooth entrance animation (requires .active class on parent overlay) */
  transform: scale(0.96) translateY(-8px);
  transition: opacity 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), 
              transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  
  /* Prevent content shift during animation */
  will-change: opacity, transform;
}

/* When the overlay has .active class, animate the container in */
.reg-modal.active .reg-modal-cont {
  opacity: 1;
  transform: scale(1) translateY(0);
}



/* registration form */
.reg-form-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
  padding: 8px;
}

/* Registration modal logo */
.reg-modal-logo {
  grid-row: span 2 / span 2;
  margin: 2px;
  padding: 4px;
  max-width: 296px;

}

.reg-modal-logo img {
  display: block;
  max-width: 296px;
}

/* Registration Welcome heading */
.reg-heading {
  grid-column: span 3 / span 3;
  text-align: center;
  margin: 0;
}

/* Registration form tab heading icons */
.form-step {
  grid-column: span 3 / span 3;
  grid-column-start: 2;
  grid-row-start: 2;
  gap: clamp(12px, 4vw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-step-icon {
  display: block;
  width: clamp(28px, 6vw, 60px);
  height: auto;
  background-color: var(--peach);
  border-radius: 50%;
  filter: brightness(50%);
  opacity: 0.4;
  transition: opacity 0.3s, filter 0.3s;
}

.form-step-icon.active {
  filter: brightness(100%);
  opacity: 1;
}

/* Register Password */
.pwd-cont {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
}

.pwd, .conf-pwd {
  grid-row: span 2/span 2;
  div {
    display: flex;
    align-items: center;
  }
  input {
    margin: 4px 2px 4px 24px;
  }
}

.conf-pwd {
  grid-row: span 2/span 2;
}

.password {
  margin: 0; 
}

.message {
  font-size: 12px;
  margin: -24px 8px 4px 32px;
  padding: 0;
  text-align : center;
}

.message.error {
  background: var(--peach);
  font-weight: bold;
  color: #cc0404;
  padding: 2px;
  box-shadow:
    0px 0px 4px 2px rgba(0, 0, 0, 0.15),
    0px 0px 4px 2px rgba(255, 197, 086, 0.7),
    inset 0px 0px 2px 2px;
}

.message.notice {
  background: var(--peach);
  font-size: 16px;
  font-weight: bold;
  color: #86608e;
  padding: 2px;
  box-shadow:
    0px 0px 4px 2px rgba(0, 0, 0, 0.15),
    0px 0px 4px 2px rgba(255, 197, 086, 0.7),
    inset 0px 0px 2px 2px;
}

.message.idea {
  background: var(--brown);
  font-weight: bold;
  color: var(--yellow);
  padding: 2px;
  box-shadow:
    0px 0px 4px 2px rgba(0, 0, 0, 0.15),
    0px 0px 4px 2px rgba(255, 197, 086, 0.7),
    inset 0px 0px 2px 2px;
}

/* registration form */
.reg-form-cont {
  box-shadow: 1px 1px 1px 0px rgba(255, 233, 12, 0.1),
    3px 3px 10px 0px rgba(255, 233, 12, 0.05);
  background-color: rgba(8, 54, 12, 1);
  border-radius: 15px;
  border-width: 25px;
  width: 100%;
  align-items: center;
  color: var(--peach);
  button {
    padding: 8px 16px;
    background-color: var(--peach);
    border-color: #000;
    box-shadow: inset 0px 0px 3px 3px var(--brown);
    border-radius: 6px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
  }

  fieldset {
    width: 100%;
    border: none;
  }

  
}

.memb_code {
  position: absolute;
  z-index: -10000;
  opacity: 0;
  height: 0;
  width: 0;
  left: 0;
  top: 0;
}

/* Registration form labels */
.lbl{
  width: 200px;
  margin-right: 8px;
}

/* Registration form tabs */
.tab { height: 400px; }

.tab, .tab-i {
  background-color: rgba(8, 54, 0);
  margin: 25px 0px 0px 16px;
  width: 96%;
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  
  label, h4, p, input[type="checkbox"] {
    margin-left: 16px;
  }

  input[type="text"] {
    background-color: rgba(255, 197, 86, 0.7);
  }

  input {
    background-color: rgba(255, 197, 86, 0.7);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    border-color: var(--brown);
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    border-bottom: solid 2px var(--peach);
    box-sizing: border-box;
    cursor: text;
    transition: background-color 0.2s ease-in-out 0.3s, border-color 0.2s ease-in-out 0s;
    outline: none;
    margin-bottom: 8px;
    :focus {
      border: solid 1px rgba(255, 197, 86, 0.62);
    }

    :hover {
      border: solid 1px rgba(255, 197, 86, 0.62);
    }
  }
  
  #pcode {
    width:72px;
  }
}

.tab input:focus {
    border-color: var(--yellow);
}

.embed-btn {
  display: flex;
  position: relative;
  img {
    display: block;
    width: 32px;
    height: 32px;
    margin-top: 8px;
  }
}

#show-pwd {
  border: none;
  border-radius: 50px;
  background: var(--peach);
  color: #222;
  padding: 8px;
  cursor: pointer;
}

#tab1 {
  display: none;
  padding: 12px;
}

#tab2 {
  height: 320px;
  display: none;
  padding: 12px;
}

#tab3 { 
  display: none;
  height: 560px;
  line-height: 18px;
  padding: 12px;
}

.dob { cursor: pointer; }

/* Registration form buttons */
#reg-sect {
  display: flex;
  justify-content: center;
  margin: 16px;
}

.regBtn {
  display: none;
  padding: 8px 16px;
}

/* registration close button & Login modal button */
.reg-modal-footer {
  display: flex;
  justify-content: flex-end;
  margin: 8px 8px 8px;
  button {
    padding: 2px 8px;
    margin: 2px 4px 4px;
  }
}
/*End: registration Modal */

/* Login Modal */
/* ===== Login Modal Overlay ===== */
.login-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(2px);
  z-index: 1;
  overflow: auto;
  cursor: pointer;
  border-radius: 16px;
  padding: 16px;
}

/* Active state (add this class via JS when modal opens) */
.login-modal.active {
  opacity: 1;
  visibility: visible;
}

.login-modal-cont {
	position: relative;
	width: 90%;
	max-width: 600px;
  min-height: 480px;
	background: var(--white);
	margin: 3em auto 4em;
	cursor: auto;
  box-shadow: 0px 0px 55px 24px rgba(0, 0, 0, 0.15),
    inset 0px 0px 45px 29px rgba(255, 233, 32, 0.22),
    11px 9px 44px 3px rgba(8, 54, 12, 0.39),
    0px 0px 3px 9px rgba(8, 54, 12, 0.33);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 15px;
  color: var(--peach);
  font-weight: bold;

  label, p {
    text-shadow: 1px 1px 0px rgba(52, 86, 68, 1),
      -1px -1px 0px rgba(51, 65, 85, 1),
      2px 2px 0px rgba(51, 65, 85, 1),
      2px 2px 0px rgba(51, 65, 85, 1);
  }

  input, label { margin: 2px; }
}

/* Login Modal : Yalpae logo & Welcome heading */
.login-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  height:90px;
  text-align: center;
  background-color: rgba(30, 81, 34, 1);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: 5px inset var(--brown);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  margin-bottom: 16px;
  img {
    display: block;
    background-color: var(--white);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
      rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
      rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    max-width: 72px;
    border-radius: 50%;
    margin-left: 8px;
  }

  h4 {
    flex: 1;
    text-align: center;
    margin: 0;
    color: var(--peach);
    font-weight: bold;
    font-size: 32px;
    text-shadow: -1px -1px 5px rgba(255, 255, 255, 1), 
      1px 1px 10px rgba(255, 255, 255, 1), 
      2px 2px 15px rgba(255, 255, 255, 1),
      0px 0px 10px rgba(73, 255, 24, 1),
      0px 0px 10px rgba(73, 255, 24, 1),
      0px 0px 20px rgba(73, 255, 24, 1),
      0px 0px 55px rgba(73, 255, 24, 1),
      0px 0px 55px rgba(73, 255, 24, 1);
  }
}


/* Login Form */
.login-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: normal;
  gap: 0;
  margin: 0;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
  user-select: none;
  padding: 16px;
}

.lfield {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;

  label {
    display: block;
    color: var(--peach);
    font-weight: 600;
    margin-bottom: 8px;
    margin-right: 4px;
  }

  input {
    width: 100%;
    padding: 12px 16px;
    background: var(--cream);
    border: 1px solid var(--border-light);
    border-bottom: 4px solid var(--brown);
    border-radius: 8px;
  }

  input:focus {
    border-color: var(--yellow);
    outline: none;
    box-shadow: 0 0 0 3px rgba(30,81,34,0.2);
 }

}

 
.remfield {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 24px;
}
 
.remfield input[type="checkbox"] {
    accent-color: #1a5c2a;
    cursor: pointer;
}


#reset {
  display: none;
}
 
.pass-reset input {
  padding: 8px 16px;
  background-color: rgba(255, 197, 86, 0.7);
  border-color: var(--peach);
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
  border-bottom: solid 6px var(--brown);
  box-sizing: border-box;
  cursor: text;
  transition: background-color 0.2s ease-in-out 0.3s, border-color 0.2s ease-in-out 0s;
  outline: none;
  margin-bottom: 8px;
}

.pass-reset {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 4px 16px;
  form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: normal;
    gap: 0;
  }
}

#resetBtn {
  display: inline-block;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  color: #090909;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  border: 1px solid var(--white);
  box-shadow: 3px 3px 6px #c5c5c5, -3px -3px 6px #ffffff;
  margin-bottom: 4px; 
}

#res-login {
  margin: 10px 4px;
}

/* Login button */
.signin { 
  /* From Uiverse.io by shah1345 */ 
  /*display: inline-block; */
  display: none;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #090909;
  padding: 4px 12px;
  cursor: pointer;
  font-family: "hoefler"; 
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  border: 1px solid var(--white);
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  margin-bottom: 8px;
}

.signin:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}

.signin:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.signin:after {
  content: "";
  position: absolute;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  background-color: var(--yellow);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.signin:hover {
  color: #ffffff;
  border: 1px solid #74c53a;
}

.signin:hover:before {
  top: -35%;
  background-color: var(--yellow);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.signin:hover:after {
  top: -45%;
  background-color: var(--yellow);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

/* password resetting, reg modal link & closing modal button */
.login-modal-footer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  align-content: normal;
  gap: 0;
  height: 100px;
  max-width: 560px;
  padding: 8px;
  margin: 4px 0px 32px 16px;
  p {
    margin: 2px;
  }
}

/* login close button */
#lclose-btn {
  padding: 4px 8px;
}

/* login modal footer links */
.dec {
  text-decoration: none;
  color: #d7e0df;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 3px 3px rgba(0, 0, 0, 0.25);
}
/* End: Login Modal & All Pop Modals */

/* General close button */
.close-btn {
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
  background-color: rgb(193, 9, 0);
  box-shadow: inset 0px 0px 3px 3px var(--brown);
  border-radius: 4px;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}

.reveal.visible { opacity: 1; transform: none; }

/* ===== Main Content Area ===== */
.main-sect {
  padding: 16px;
}

.main-sect.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
}

.main-sect.reveal.visible { opacity: 1; transform: none; }

/* ===== Hero / Quotes Section ===== */
.heros {
  color: var(--peach);
  background-image: url("../imgs/5.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 24px 20px 16px;
}

.heros.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
}

.heros.reveal.visible { opacity: 1; transform: none; }

/* ── Links inside hero ───────────────────────────────────────*/
.heros a {
  color: var(--peach);
  text-decoration: none;
}

/* ── Org name ────────────────────────────────────────────────*/
.heros h1 {
  margin: 16px 0 0;
  padding: 4px 8px;
  text-align: center;
  font-size: clamp(15px, 2.2vw, 24px);
  font-weight: 800;
  color: var(--peach);
  letter-spacing: 0.5px;
  text-shadow:
    0 2px 6px rgba(var(--brown), 0.6),
    0 0 20px color-mix(in srgb, var(--yellow) 20%, transparent);
}

/* ── Quote row ───────────────────────────────────────────────*/
.hero-qoute {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}

/* ── Quote cards ─────────────────────────────────────────────*/
.qoute {
  flex: 1 1 280px;
  max-width: 560px;
  height: fit-content;
  padding: 16px 18px 14px;

  border-left: 4px solid var(--green);
  border-radius: 0 12px 12px 0;

  background: linear-gradient(
    to right,
    rgba(30, 81, 34, 0.35),
    rgba(30, 81, 30, 0.38) 40%,
    rgba(255, 187, 86, 0.35)
  );

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 1px  3px rgba(0, 0, 0, 0.25),
    inset 0 0 30px rgba(30, 81, 34, 0.15),
    0 12px 24px -8px color-mix(in srgb, var(--yellow) 12%, transparent);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: relative;
}

/* opening quote mark */
.qoute::before {
  content: '\201C';
  position: absolute;
  top: -2px;
  left: 10px;
  font-size: 48px;
  line-height: 1;
  color: color-mix(in srgb, var(--yellow) 25%, transparent);
  font-family: Georgia, serif;
  pointer-events: none;
}

/* quote body */
.heros blockquote {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  padding-top: 10px;
}

/* attribution */
.qoute figcaption {
  font-weight: 700;
  font-size: 13px;
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--yellow) 20%, transparent);
  text-shadow: 1px 1px 2px var(--brown);
  color: var(--peach);
}

/* cited source */
.qoute cite {
  color: var(--yellow);
  font-style: italic;
  font-weight: 700;
}

.hero-highlight {
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--yellow);
  padding: 1.2rem 1.8rem;
  border-radius: 0 12px 12px 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/*


.qoute a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-weight: bold;
}

.heros blockquote {
  font-weight: 600;
}

*/

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

.heros h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  margin: 4px;
}


.heros em {
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--brown);
}


.hero-highlight p {
  color: var(--white);
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.hero {
  font-family: 'DM Sans', sans-serif;
  background: #0D1F0F;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
}

.hero-text {
  padding: 3rem 2.5rem 2rem;
}

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--yellow);
}

.hero-eyebow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #C9A84C;
  background: rgba(201, 168, 76, .12);
  border: 0.5px solid rgba(201, 168, 76, .35);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}

.hero-eyebow::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C9A84C;
}

.hero-text h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: #F0EDE6;
  margin-bottom: 1.2rem;
  letter-spacing: -.02em;
}

.hero-text h1 em {
  font-style: italic;
  color: #C9A84C;
  position: relative;
}

.hero-text h1 em::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #C9A84C, transparent);
}

.hero-desc {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(240, 237, 230, .6);
  max-width: 520px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 0.5px solid rgba(255, 255, 255, .08);
  margin: 0 2.5rem;
  padding: 2rem 0 2.5rem;
  gap: 0;
}

.stat {
  padding: 0 1.25rem;
  border-left: 0.5px solid rgba(255, 255, 255, .08);
}

.stat:first-child {
  padding-left: 0;
  border-left: none;
}

.stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: #F0EDE6;
  letter-spacing: -.03em;
  line-height: 1;
}

.stat-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240, 237, 230, .45);
  margin-top: 6px;
  font-weight: 500;
}


/* ===== Text Clipping Effect Link ===== */
.content-link {
  display: inline-block;           /* Ensures proper clipping on inline elements */
  margin-left: 4px;
  cursor: pointer;
  
  /* Background image for text fill */
  background-image: url("../imgs/5.png");
  background-size: cover;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  
  /* Text fill transparent to show background */
  color: transparent;
  -webkit-text-fill-color: transparent;
  
  /* Text shadow for depth (visible through transparency) */
  text-shadow: -1px -1px 1px rgba(255, 197, 86, 0.2);
  transition: text-shadow 0.2s ease;
}

.content-link:hover {
  text-shadow: 
    -1px -1px 1px rgba(255, 197, 86, 0.2),
    1px 1px 1px rgba(255, 187, 80, 0.6);
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
  .content-link {
    background: none;
    color: var(--peach);
    -webkit-text-fill-color: var(--peach);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
}

main { 
  margin-top: 2px;
  padding: 0px;
}

.main { 
  margin-top: 2px;
  padding: 8px;
}
/*
.hero {
  background-image: url("../assets/imgs/5.png");
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
 
.hero::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  right: 30px;
  top: 60px;
  border-radius: 50%;
  opacity: 0.15;
  border: 4px solid var(--brown);
  pointer-events: none;
}



.hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.hero h1 em {
  font-style: italic;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--brown);
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--peach);
  line-height: 1.7;
  max-width: 100%;
}



.stat {
  background: rgba(30, 81, 34, 0.9);
  padding: 16px 8px;
  text-align: center;
  backdrop-filter: blur(2px);
}

.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--yellow);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--peach);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
*/

.qoute-doc {
  display: block;   /* full width, each <br> creates a new line */
  padding: 8px 14px 8px 12px;
  background: linear-gradient(
    to right,
    rgba(30, 81, 34, 0.25),
    rgba(255, 187, 86, 0.2)
  );
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 6px 14px -4px rgba(255, 222, 0, 0.1);
  font-size: 14px;
  font-weight: 600;
  color: var(--peach);
  line-height: 2;   /* ← gives each line comfortable breathing room */
}

.qoute-doc a {
  color: var(--peach);
  font-size: 18px;
  text-decoration: none;
  font-weight: 700;
  text-shadow: 1px 1px 1px var(--green);
  transition: color 0.18s, text-decoration 0.18s;
}

.qoute-doc a:hover {
  color: var(--peach);
  text-decoration: underline;
}

.qoute-doc br {
  display: block;
  margin: 6px 0;
}

.qoute-doc em {
  color: var(--text-dark);
  font-style: italic;
  font-weight: 500;
}

.qoute-doc a {
  cursor: pointer;
}

.qoute-doc .content-link {
  color: var(--yellow);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 222, 0, 0.35);
  transition: color 0.18s, border-color 0.18s;
}

.qoute-doc .content-link:hover {
  color: var(--peach);
  border-bottom-color: var(--peach);
}

/* ===== Content Tab Container ===== */
.content-tab {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 24px 16px 24px 24px;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 
    inset 0 0 6px 0 rgba(0, 0, 0, 0.82),
    inset 0 0 6px 2px rgba(0, 0, 0, 0.28);
}

.content-tab.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}

.content-tab.reveal.visible { opacity: 1; transform: none; }

.content-tab h2 {
  margin: 8px 0 8px 16px;
}

.content-tab h3 {
  margin: 2px 4px 2px 24px;
}

.content-tab p {
  margin: 2px 24px 0 24px;
  padding: 8px;
  line-height: 24px;
}

.content-tab button {
  margin: 0 0 16px 24px;
  padding: 8px 16px;
  background: var(--peach);
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.content-tab button:hover {
  opacity: 0.85;
}

.content-tab button:active {
  transform: scale(0.98);
}

.content-tab td {
  padding: 8px;
  margin: 2px 2px 2px 16px;
  text-align: start;
}

/* ===== List Tab (Secondary Container) ===== */
.list-tab {
  max-width: 1120px;
  margin-left: 24px;
  padding: 8px;
  background: rgba(30, 81, 34, 0.45);
  border-radius: 4px;
  box-shadow: 
    0 0 16px -7px rgba(0, 0, 0, 0.82),
    0 0 43px -29px rgba(0, 0, 0, 0.28);
}

.list-tab li {
  margin-bottom: 8px;
}

.list-tab h3 {
  margin: 4px 16px;
}

.list-tab figure {
  max-width: 950px;
  margin: 0;
}

.list-tab.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s;
}

.list-tab.reveal.visible { opacity: 1; transform: none; }

/* ===== Caption Tab (Callout/Highlight Box) ===== */
.caption-tab {
  max-width: 1120px;
  margin: 24px;
  padding: 8px;
  align-self: center;
  background: rgba(30, 81, 34, 1);
  color: var(--peach);
  font-size: 15px;
  font-weight: 500;
  border-radius: 4px;
  box-shadow: 
    0 0 16px -7px rgba(0, 0, 0, 0.82),
    0 0 43px -29px rgba(0, 0, 0, 0.28),
    inset 0 0 4px 4px;  /* Added fallback color for inset shadow */
}

.caption-tab li {
  margin-bottom: 8px;
}

.caption-tab h3 {
  margin: 4px 16px;
}

.chptr-btn button {
  padding: 8px 16px;
  color: var(--green-dark);
  background-color: var(--peach);
  border: 2px solid var(--brown);
  box-shadow: inset 0 0 5px 5px #85663f;
  border-radius: 10px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  margin: 4px;
  transition: transform 0.1s, opacity 0.2s;
}

.chptr-btn a { color: var(--green-dark); }

.chptr-btn button:hover {
  opacity: 0.85;
  transform: scale(0.98);
}

.form-btn button{
  padding: 8px 16px;
  color: var(--green-dark);
  border-radius: 10px;
  border: 2px solid var(--brown);
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  margin: 4px;
  transition: transform 0.1s, opacity 0.2s;
}

.form-btn button:hover {
  opacity: 0.85;
  transform: scale(0.98);
}

.form-sub-btn {
  background-color: var(--peach);
  box-shadow: inset 0 0 5px 5px #85663f;
}

.form-card {
  background: var(--white);
  border-radius: 20px;
  padding: 2.5rem;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 20px 30px rgba(0,0,0,0.2);
}

.form-head {
  width: 100%;
  height: 100%;
}

.form-body p {
  color: var(--green-light);
  font-size: 14px;
  font-weight: 600;
  text-shadow: 1px 1px 0 var(--yellow);
}
.form-content {
  margin-bottom: 1.5rem;
 }

.form-content label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.form-content input,
.form-content select,
.form-content textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-bottom: 4px solid var(--brown);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
}

.form-content input:focus,
.form-content select:focus,
.form-content textarea:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30,81,34,0.2);
}

.socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.social-icons {
  display: block;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 4px;
  background-color:var(--peach);
  border-radius: 50%;
  box-shadow:
    0px 0px 8px 2px rgba(0, 0, 0, 0.15),
    0px 0px 8px 2px rgba(255, 197, 086, 0.7),
    inset 0px 0px 8px 2px;
  font-size: 30px;
  color: #222;
  background: linear-gradient(0deg, #FFC480, var(--peach));
  text-decoration: none;
  transition: 0.3s;
}

.socials a:hover {
  color: #0a66c2;
}

/* End of main section */
/* ===== Footer Base ===== */
footer {
  background: linear-gradient(145deg, var(--brown) 20%, var(--brown-2) 100%);
  color: whitesmoke;
  height: 100%;
  padding: 8px;
  font-family: inherit;
}

.foot {
  align-items: stretch;
  border: 1.5px solid var(--yellow);
  border-radius: 6px;
  margin: 0;
  padding: 4px 12px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "topbar  topbar  topbar"
    "divider divider divider"
    "col-abt col-lnk col-form"
    "join join join";
  column-gap: 14px;
  row-gap: 0;
}

/* ===== Footer Fieldset (Main Grid Container) ===== */
footer fieldset {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(7, auto);        /* auto rows for content-based height */
  gap: 2px;
  border-color: var(--yellow);
  margin: 0;
  padding: 12px 8px;
}

footer legend {
  color: var(--yellow);
  font-size: 14px;
  font-weight: bold;
  text-shadow: 
    -1px -1px 1px rgba(255, 255, 255, 0.2),
    1px 1px 1px rgba(0, 0, 0, 0.6);
  padding: 0 8px;
  letter-spacing: 2px;
}

/* ===== Footer Typography ===== */
footer h4 {
  font-size: 14px;
  margin: 10px 0 5px 0;
}

footer a {
  font-family: "Hoefler Text", Georgia, serif;
  text-decoration: none;
  color: var(--peach);
  text-shadow: 
    -1px -1px 1px rgba(255, 255, 255, 0.2),
    1px 1px 1px rgba(0, 0, 0, 0.6);
  font-size: 14px;
  transition: opacity 0.2s;
}

footer a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

footer p {
  font-family: "Florence", cursive, sans-serif;
  color: var(--peach);
  text-shadow: 
    -1px -1px 1px rgba(255, 255, 255, 0.2),
    1px 1px 1px rgba(0, 0, 0, 0.6);
  font-size: 14px;
  padding: 0 12px;
  margin: 8px 0;
}

.foot-divider {
  grid-area: divider;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--yellow) 50%, transparent), transparent);
  margin: 0 0 14px;
}

/* ===== Footer Grid Sections ===== */

/* Subscribe section (top row, spans columns 1-7) */
.subscrb-foot {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  gap: 10px;
  margin-bottom: 2px;
}

.sub-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Donate section (top row, columns 8-9) */
.donate-foot {
  grid-column: 8 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
}


.abt-foot,
.cont-foot,
.form-foot {
  background: linear-gradient(160deg, var(--brown) 0%, var(--brown-2) 60%, #4a3a0e 100%);
  border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
  border-radius: 8px;
  padding: 14px 16px 16px;
  position: relative;
  box-shadow:
    0 2px  4px  rgba(0, 0, 0, 0.5),
    0 8px  20px rgba(0, 0, 0, 0.4),
    -8px 0 20px -6px rgba(30, 81, 34, 0.85),
     8px 0 20px -6px rgba(30, 81, 34, 0.85),
    0 18px 36px -10px color-mix(in srgb, var(--yellow) 22%, transparent);
}

/* About section (left column, rows 2-6) */
.abt-foot {
  grid-area: col-abt;
}

/* Contact section (middle column, rows 2-6) */
.cont-foot {
  grid-area: col-lnk;
}

/* Form section (right column, rows 2-6) */
.form-foot { grid-area: col-form; }

.abt-foot h4,
.cont-foot h4,
.form-foot h4 {
  color: var(--yellow);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--yellow) 25%, transparent);
}

/* Join button (bottom row, centered) */
.join-foot {
  grid-area: join;
  grid-column: unset;  /* clears any old column rule */
  grid-row: unset;     /* clears any old row rule */
  display: flex;
  justify-content: center;
  padding: 18px 0 4px;
}

#fjoin {
  background: transparent;
  color: var(--peach);
  border: 2px solid var(--peach);
  box-shadow: inset 0 0 6px 4px #85663f;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 40px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.18s, color 0.18s;
}


#fjoin:hover {
  background: color-mix(in srgb, var(--peach) 15%, transparent);
}
.join-foot button {
  width: 100%;
  height: 100%;
  background-color: var(--peach);
  border: 2px solid var(--brown);
  box-shadow: inset 0 0 5px 5px #85663f;
  border-radius: 10px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  margin: 0;
  transition: transform 0.1s, opacity 0.2s;
}

.join-foot button:hover {
  opacity: 0.85;
  transform: scale(0.98);
}

/* ===== Lists Inside Footer Sections ===== */
.abt-foot ul,
.cont-foot ul {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.abt-foot li,
.cont-foot li {
  margin-bottom: 4px;
}

.abt-foot ul li a,
.cont-foot ul li a {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--peach);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition: color 0.18s, background 0.18s, padding-left 0.18s, border-color 0.18s;
}

.abt-foot ul li a::before,
.cont-foot ul li a::before {
  content: '›';
  color: color-mix(in srgb, var(--yellow) 35%, transparent);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.18s, transform 0.18s;
  display: inline-block;
  margin-right: 4px;
}
.contact-form p { margin: 0 0 7px; }
.abt-foot ul li a:hover,
.cont-foot ul li a:hover {
  color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
  border-left-color: var(--yellow);
  padding-left: 12px;
}

.abt-foot ul li a:hover::before,
.cont-foot ul li a:hover::before {
  color: var(--yellow);
  transform: translateX(2px);
}

.cont-foot ul li a[href^="mailto"] {
  font-size: 14px;
  color: color-mix(in srgb, var(--yellow) 75%, transparent);
  font-style: italic;
}
/* ===== Form Elements ===== */

/* General input styling */
.input {
  width: 90%;
  display: block;
  padding: 7px 10px;
  font-weight: bold;
  font-size: 12px;
  border: 1px solid var(--brown);
  border-bottom: 2px solid var(--peach);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.93);
  box-sizing: border-box;
  cursor: text;
  margin-bottom: 8px;
  padding: 6px 8px;
  outline: none;
  transition: border-color 0.2s;
}

.input:focus {
  border-color: var(--yellow);
  border-bottom-color: var(--yellow);
  background-color: #fff;
}

textarea.input {
  resize: vertical;
  min-height: 68px;
}

.subscription {
  width: 240px;
  padding: 8px 24px;
  border-radius: 10px;
  background: var(--cream);
  border: 1px solid var(--yellow);
  border-bottom: 4px solid var(--green);
  font-size: 14px;
  font-weight: bold;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.18s;
  box-sizing: border-box;
}
.subscription:focus {
  background-color: var(--cream);
  border-color: var(--yellow);
  border-bottom: 6px solid var(--yellow);
}


/* Subscribe button */
.sub-btn {
  border: none;
  border-radius: 8px;
  background-color: var(--yellow);
  color: var(--green-dark);
  text-shadow: 0px 0px 1px var(--yellow);
  font-weight: bold;
  cursor: pointer;
  padding: 8px 24px;
  margin-left: 12px;
  box-shadow: 0 0 3px 3px rgba(30, 81, 34, 1);
  transition: background-color 0.2s, transform 0.1s;
  filter: brightness(1.1);
}

.sub-btn:hover {
  background-color: var(--peach);
  transform: scale(0.98);
}

/* Donate button */
.donate-btn {
  border: none;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--yellow) 100%, var(--green) 50%);
  box-shadow: inset 0 0 4px 2px var(--green-dark);
  cursor: pointer;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--black);
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

.donate-btn:hover {
  transform: translateY(-3px) scale(1.03);
  background: var(--green);
  color: var(--white);
  box-shadow: inset 0 0 6px 3px var(--yellow);
}

/* Send message button (in form) */
.send-message {
  padding: 6px 12px;
  margin-bottom: 8px;
  background-color: var(--peach);
  border: 1px solid var(--brown);
  box-shadow: inset 0 0 3px 3px var(--brown);
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.send-message:hover {
  background-color: var(--yellow);
}

.form-message {
    display: inline;
    align-items: center;
    gap: 8px;
    margin: 16px;
    padding: 8px 10px;
    border-radius: 30px;
    font-size: 14px;
    text-shadow: -1px -1px 2px var(--brown);
}

.form-message.active {
  background: color-mix(in srgb, var(--green-light) 20%, transparent);
  color: var(--green-light);
}

.form-message.success { 
  color: var(--green-light);
  background: color-mix(in srgb, var(--green-light) 20%, transparent);
}

.form-message.error {
  color: var(--red-500);
  background: color-mix(in srgb, var(--red-500) 20%, transparent);
}

/* ===== Footer Bottom Note ===== */
.foot-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-top: 16px;
  padding: 8px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.foot-note a {
  color: var(--yellow);
  cursor: pointer;
  text-decoration: none;
}

.foot-note a:hover {
  text-decoration: underline;
}

/* ----- REVEAL ANIMATION ----- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}

.reveal.visible { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────────*/
@media (max-width: 930px) {

  .disclaimer-container {
    background: var(--cream);
    border: 0.5px solid rgba(0, 0, 0, 0.18);
    border-left: 3px solid var(--yellow);
    border-radius: 0 8px 8px 0;
    padding: 1.25rem 1.5rem;
    position: relative;
    overflow: hidden;
  }

  .disclaimer-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--peach) 35%, transparent) 0%, transparent 60%);
    pointer-events: none;
  }

  .disclaimer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.75rem;
  }

  .disclaimer-badge {
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 8px;
    padding: 2px 8%;
  }

  .demo-pill {
    font-size: 8px;
    padding: 2px 8px;
    border-radius: 20px;
  }

  @keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
  }

  .disclaimer-body {
    font-size: 12px;
  }

  .disclaimer-footer {
    font-size: 10px;
  }

  .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--yellow);
    flex-shrink: 0;
    animation: pulse-dot 1.8s ease-in-out infinite;
  }


  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.85); }
  }

  @media (prefers-color-scheme: dark) {
    .disclaimer-container {
      background: var(--text-dark);
      border-color: rgba(255, 255, 255, 0.15);
      border-left-color: var(--yellow);
    }
    .disclaimer-container::before {
      background: linear-gradient(135deg, color-mix(in srgb, var(--brown-dark) 25%, transparent) 0%, transparent 60%);
    }
    .disclaimer-badge {
      background: var(--brown);
      color: var(--yellow);
      border-color: var(--brown-dark);
    }
    .disclaimer-badge svg { stroke: var(--peach); }
    .demo-pill {
      background: var(--brown-dark);
      color: var(--peach);
      border-color: var(--brown-2);
    }
    .disclaimer-body { color: var(--border-light); }
    .disclaimer-body strong { color: var(--white); }
    .disclaimer-body .highlight { color: var(--yellow); }
    .disclaimer-rule { background: rgba(255, 255, 255, 0.1); }
    .disclaimer-footer {
      color: var(--gray-muted);
      border-top-color: rgba(255, 255, 255, 0.08);
    }
  }


  header {
    grid-template-columns: 60px 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 0;
  }

  .header-logo  {
    grid-column: 1 / 2;
    grid-row: 1 / span 2;
    margin-left: 4px;
    margin-bottom: 4px;
  }
  .header-bar   { 
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .header-join  {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
  .header-login {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }
  .nav-links {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
  }
  .header-bar h1 {
    font-size: 16px;
    letter-spacing: 3px;
  }
  .header-bar h2 {
    font-size: 11px;
  }

  .reg,
  .login {
    margin-top: 8px;
    font-size: 10px;
    padding: 3px;
  }

  .login {
    padding: 4px 6px;
  }

  .nav-logo {
    width: 40px;
    height: 40px;
  }

  .menu {
    padding: 2px 4px;
  }

  .menu > li {
    padding: 2px 4px;
  }

  /* Top-level links */
  .menu > li > a {
    font-size: 14px;
  }

  /* ===== Dropdown Submenu (Always Absolute) ===== */
  .submenu {
    min-width: 180px;
    padding: 8px 0;
  }

  .submenu a {
    padding: 4px 12px;
    font-size: 12px;
  }

  .submenu a:hover {
    padding-left: 20px;
  }

  .submenu li a {
    padding: 6px 14px;
  }

  /* ===== Registration Modal Container (Polished) ===== */
  .reg-modal-cont {
    max-width: 520px;
  }

  /* registration form */
  .reg-form-nav {
    padding-right: 6px;
  }

  /* Registration modal logo */
  .reg-modal-logo {
    padding: 0px;
    max-width: 280px;
  }

  .reg-modal-logo img {
    max-width: 280px;
  }

  /* Registration form tab heading icons */
  .form-step-icon {
    width: clamp(24px, 6vw, 40px);
  }

  .pwd, .conf-pwd {
    input {
      margin: 4px 2px 4px 24px;
    }
  }

  .message {
    font-size: 8px;
  }

  /* registration form */
  .reg-form-cont {
    border-radius: 15px;
    border-width: 25px;
    font-size: 12px;
    h4 { font-size: 16px; }
    button {
      padding: 4px 12px;
      font-size: 12px;
    }
    
  }

  /* Registration form labels */
  .lbl{
    width: 120px;
    margin-right: 8px;
    margin-top: 2px;
  }

  /* Registration form tabs */
  .tab { height: 320px; }

  .tab, .tab-i {
    label, h4, p, input[type="checkbox"] {
      margin-left: 12px;
    }

    input {
      padding: 4px 8px;
      font-size: 8px;
    }
    
    #pcode {
      width:72px;
    }
  }

  .embed-btn {
    img {
      width: 24px;
      height: 24px;
    }
  }

  #show-pwd {
    padding: 6px;
  }

  #tab1 {
    padding: 12px;
  }

  #tab2 {
    height: 240px;
    padding: 12px;
    line-height: 16px;
  }

  #tab3 { 
    display: none;
    height: 560px;
    padding: 12px;
  }

  /* Registration form buttons */
  #reg-sect {
    margin: 12px;
  }

  .regBtn {
    padding: 4px 12px;
  }

  /* registration close button & Login modal button */
  .reg-modal-footer {
    margin: 4px 4px 4px;
    button {
      padding: 1px 4px;
      margin: 2px 4px 4px;
    }
  }
  /*End: registration Modal */

  /* Login Modal */
  /* ===== Login Modal Overlay ===== */
  .login-modal {
    border-radius: 16px;
    padding: 16px;
  }

  .login-modal-cont {
    max-width: 460px;
    min-height: 400px;
    font-size: 12px;
  }

  /* Login Modal : Yalpae logo & Welcome heading */
  .login-nav {
    gap: 10px;
    height:72px;

    img {
      max-width: 48px;
      margin-left: 8px;
    }

    h4 {
      font-size: 16px;
    }
  }

  /* Login Form */
  .login-form {
    padding: 12px;
  }

  .lfield {
    label {
      margin-bottom: 4px;
    }

    input {
      padding: 8px 12px;
      border-radius: 8px;
    }
  }
  
  .remfield {
    margin-bottom: 8px;
  }
  
  .pass-reset input {
    padding: 8px 12px;
  }

  #resetBtn {
    padding: 2px 8px;
    font-size: 12px;
  }

  #res-login {
    margin: 10px 4px;
  }

  /* Login button */
  .signin { 
    /* From Uiverse.io by shah1345 */ 
    padding: 4px 12px;
    font-size: 12px;
  }

  /* login close button */
  #lclose-btn {
    padding: 2px 6px;
  }

  /* General close button */
  .close-btn {
    font-size: 12px;
    box-shadow: inset 0px 0px 3px 3px var(--brown);
  }

  /* ===== Footer Base ===== */
  footer {
    height: 100%;
    padding: 8px;
  }

  .foot {
    grid-template-columns: 1fr 1fr;
    border-radius: 6px;
    padding: 4px 12px 12px;
    column-gap: 8px;
  }

  /* ===== Footer Fieldset (Main Grid Container) ===== */
  footer fieldset {
    padding: 12px 8px;
  }

  footer legend {
    font-size: 12px;
    padding: 0 2px;
  }

  /* ===== Footer Typography ===== */
  footer h4 {
    font-size: 12px;
    margin: 8px 0 4px 0;
  }

  footer a {
    font-size: 12px;
  }

  footer p {
    font-size: 12px;
    padding: 0 8px;
    margin: 8px 0;
  }

  .foot-divider {
    margin: 0 0 14px;
  }

  /* Subscribe section (top row, spans columns 1-7) */
  .subscrb-foot {
    padding: 10px 16px;
    gap: 10px;
    margin-bottom: 2px;
  }

  .sub-inner {
    gap: 10px;
  }

  .abt-foot,
  .cont-foot,
  .form-foot {
    border-radius: 8px;
    padding: 4px 8px 8px;
  }

  .abt-foot h4,
  .cont-foot h4,
  .form-foot h4 {
    font-size: 12px;
    margin: 0 0 4px;
    padding-bottom: 6px;
  }

  /* Join button (bottom row, centered) */
  .join-foot {
    padding: 18px 0 4px;
    border-radius: 8px;
  }
  #fjoin {
    border-radius: 8px;
    font-size: 12px;
    padding: 9px 40px;
  }

  .join-foot button {
    border-radius: 10px;
    font-size: 12px;
  }

  /* ===== Lists Inside Footer Sections ===== */
  .abt-foot ul,
  .cont-foot ul {
    padding: 0 4px;
    line-height: 1.2;
  }

  .abt-foot li,
  .cont-foot li {
    margin-bottom: 4px;
  }

  .abt-foot ul li a,
  .cont-foot ul li a {
    gap: 2px;
    font-size: 12px;
    padding: 2px 4px;
  }

  .abt-foot ul li a::before,
  .cont-foot ul li a::before {
    font-size: 10px;
    margin-right: 4px;
  }
  .contact-form p { margin: 0 0 7px; }
  .abt-foot ul li a:hover,
  .cont-foot ul li a:hover {
    padding-left: 8px;
  }

  .cont-foot ul li a[href^="mailto"] {
    font-size: 10px;
  }

  /* General input styling */
  .input {
    padding: 4px 12px;
    font-size: 10px;
  }

  textarea.input {
    min-height: 48px;
  }

  .subscription {
    padding: 4px 16px;
    font-size: 10px;
  }

  /* Subscribe button */
  .sub-btn {
    border-radius: 8px;
    padding: 4px 16px;
    margin-left: 12px;
  }

  /* Donate button */
  .donate-btn {
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
  }

  /* Send message button (in form) */
  .send-message {
    padding: 4px 12px;
    margin-bottom: 8px;
    font-size: 12px;
  }

  /* ===== Footer Bottom Note ===== */
  .foot-note {
    font-size: 12px;
    margin-top: 12px;
    padding: 4px 12px;
  }

  .socials {
    gap: 12px;
  }

  .social-icons {
    width: 24px;
    height: 24px;
    font-size: 22px;
    color: var(--white);
  }

  body {
    font-size: 14px;
  }

  .hub {
    aside {
      margin-top: 4px;
      width: 24em;
      border-width: 4px;
    }

    section {
      margin: 4px;
      padding: 8px;
    }
  }

  .main-sect {
    padding: 12px;
  }

  .qoute-doc {
    display: block;   /* full width, each <br> creates a new line */
    padding: 8px 14px 8px 12px;
    font-size: 12px;
  }

  .qoute-doc a {
    font-size: 14px;
  }

  .heros h2 {
    font-size: clamp(18px, 4vw, 22px);
  }

  .hero-eyebrow {
    font-size: 0.8rem;
  }

  .hero-eyebrow::before {
    width: 16px;
    height: 2px;
  }

  .hero-eyebow {
    font-size: 11px;
    letter-spacing: .16em;
  }

  .hero-eyebow::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C9A84C;
  }

  .hero-text h1 {
    font-size: clamp(2.4rem, 5vw, 3.2rem);
  }

  .hero-desc {
    font-size: 12px;
    line-height: 1.2;
    max-width: 520px;
  }

  /* ===== Content Tab Container ===== */
  .content-tab p {
    padding: 4px;
    line-height: 1.5;
  }

  .content-tab button {
    padding: 4px 12px;
  }


  .content-tab td {
    padding: 4px;
    margin: 2px 2px 2px 16px;
  }

  /* ===== List Tab (Secondary Container) ===== */
  .list-tab {
    max-width: 1120px;
    margin-left: 24px;
    padding: 8px;
  }

  .list-tab li {
    margin-bottom: 8px;
  }

  .list-tab h3 {
    margin: 4px 16px;
  }

  .list-tab figure {
    max-width: 100%;
    margin: 0;
  }

  /* ===== Caption Tab (Callout/Highlight Box) ===== */
  .caption-tab {
    max-width: 900px;
    padding: 6px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
  }

  .chptr-btn button {
    padding: 4px 12px;
    font-size: 12px;
  }

  .chptr-btn button {
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
  }

  .form-btn button{
    padding: 4px 12px;
    font-size: 12px;
  }

  .form-card {
    padding: 1.5rem;
    max-width: 800px;
  }

  .form-body p {
    font-size: 12px;
  }

  .form-sect p {
    font-size: 10px;
  }

  .form-content {
    margin-bottom: 1rem;
  }

  .form-content label {
    font-size: 12px;
  }

  .form-content input,
  .form-content select,
  .form-content textarea {
    padding: 8px 12px;
    font-size: 10px;
  }

  .table-h-tab th {
    font-size: 12px;
    padding: 8px 12px;
  }

  .table-tab td {
    padding: 8px 12px;
    font-size: 10px;
  }

  @media screen and (max-width: 630px) {

    /* Hide the checkbox, style the label as hamburger icon */
    .hamburger-label {
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: start;
      width: 36px;
      height: 30px;
      cursor: pointer;
      position: relative;
      z-index: 100;
      margin: 12px 0 12px 32px;
      order: -1;
      gap: 4px;
      transition: all 0.3s ease;
    }

    .hamburger-label::before,
    .hamburger-label::after {
      content: '';
      display: block;
      width: 24px;
      height: 2px;
      background: var(--peach);
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    .hamburger-label::before { order: -1; }
    .hamburger-label::after { order: 1; }

    /* Optional animated “X” when checked */
    #menu-toggle:checked + .hamburger-label {
      background: transparent;
    }
    #menu-toggle:checked + .hamburger-label::before {
      width: 16px;
      transform: rotate(45deg);
      top: 12px;
    }
    #menu-toggle:checked + .hamburger-label::after {
      transform: rotate(-45deg);
      width: 16px;
      top: 0px;
    }

    /* Nav-links container on mobile */
    .nav-links {
      grid-column: 1 / -1;    /* columns 1 & 2 */
      grid-row: 3;
      justify-self: start;
      align-self: start;
      width: 100%;
      height: 30px;
      padding: 2px;
      background-color: var(--brown);
      border: none;                /* remove desktop border if you like */
    }

    /* Hide the main menu by default, show when checkbox is checked */
    .menu {
      display: none;
      width: 300px;
      flex-direction: column;
      align-items: stretch;
      padding: 0;
      margin: 0;
      border: none;
      background: linear-gradient(
        139deg,
        rgba(30,80,34,1) 0%,
        rgba(36,80,34,1) 0%,
        rgba(37,28,40,1) 100%
      );
      box-shadow: 0 8px 16px rgba(0,0,0,0.4);
      border-radius: 0 0 6px 6px;
      position: relative;
      top: -20px;
      z-index: 999;
    }

    #menu-toggle:checked ~ .menu {
      display: flex;
    }

    /* Top‑level items become full‑width blocks */
    .menu > li {
      display: block;
      width: 100%;
      text-align: left;
      padding: 0;
      margin: 0;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      transition: background 0.2s;
    }
    .menu > li > a {
      display: block;
      padding: 4px 12px;
      font-size: 14px;
      color: var(--peach);
      text-decoration: none;
      text-shadow: 1px 1px 0 #000;
    }
    /* Remove the desktop underline effect */
    .menu > li > a::after { display: none; }

    /* Donate link – keep its highlight */
    .menu > li > a[href="../donate.html"],
    .menu > li > a[href="donate.html"] {
      color: var(--yellow);
      border: none;
      margin: 0;
    }

    /* Submenus: make them static and always visible */
    .submenu {
      display: none;   /* override the “display: none” */
      position: static;
      width: 100%;
      background: none;
      box-shadow: none;
      border-radius: 0;
      padding: 0;
      margin: 0;
      opacity: 1;
    }
    .submenu ul {
      margin: 0;
      padding: 0;
    }
    .submenu li a {
      display: block;
      padding: 4px 8px 4px 16px;   /* indented for hierarchy */
      font-size: 12px;
      color: var(--peach);
      text-decoration: none;
      border-left: none;
      background: rgba(0,0,0,0.15);
    }
    .submenu li a:hover {
      background: rgba(212,160,23,0.2);
      padding-left: 24px;
      border-left: 2px solid var(--yellow);
    }

    /* Social icons in submenu – keep them small */
    .nav-socials {
      width: 16px;
      height: 16px;
      vertical-align: middle;
    }

    .menu > li:hover > .submenu, .menu > li:focus-within > .submenu { display: block !important; }

    /* Prevent any overflow clipping */
    .nav-links,
    header {
      overflow: visible !important;
    }


    /* registration form */
    .reg-form-nav {
      padding: 4px;
    }

    /* Registration modal logo */
    .reg-modal-logo {
      padding: 0px;
      max-width: 180px;
    }

    .reg-modal-logo img {
      max-width: 180px;
    }

    /* Registration form tab heading icons */
    .form-step-icon {
      width: clamp(16px, 6vw, 32px);
    }

    .pwd, .conf-pwd {
      input {
        margin: 4px 2px 4px 24px;
      }
    }

    .message {
      font-size: 8px;
    }

    /* registration form */
    .reg-form-cont {
      border-radius: 15px;
      border-width: 25px;
      font-size: 10px;
      h4 { font-size: 14px; }
      button {
        padding: 4px 8px;
        font-size: 10px;
      }
      
    }

    /* Registration form labels */
    .lbl{
      width: 120px;
      margin-right: 4px;
      margin-top: 2px;
    }

    /* Registration form tabs */
    .tab { height: 320px; }

    .tab, .tab-i {
      label, h4, p, input[type="checkbox"] {
        margin-left: 12px;
      }

      input {
        padding: 4px 8px;
        font-size: 8px;
      }
      
      #pcode {
        width:72px;
      }
    }

    .embed-btn {
      img {
        width: 24px;
        height: 24px;
      }
    }

    #show-pwd {
      padding: 6px;
    }

    #tab1 {
      padding: 12px;
    }

    #tab2 {
      height: 240px;
      padding: 12px;
      line-height: 16px;
    }

    #tab3 { 
      display: none;
      height: 560px;
      padding: 12px;
    }

    /* Registration form buttons */
    #reg-sect {
      margin: 12px;
    }

    .regBtn {
      padding: 4px 12px;
    }

    /* registration close button & Login modal button */
    .reg-modal-footer {
      margin: 4px 4px 4px;
      button {
        padding: 1px 4px;
        margin: 2px 4px 4px;
      }
    }

    .foot {
      padding: 4px 8px 12px;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto;
      grid-template-areas:
        "topbar"
        "divider"
        "col-abt"
        "col-lnk"
        "col-form"
        "join";
      column-gap: 0;
      row-gap: 12px;
    }

    footer {
      padding: 4px;
    }

    /* ===== Footer Fieldset (Main Grid Container) ===== */
    footer fieldset {
      padding: 8px 4px;
    }

    footer legend {
      font-size: 8px;
    }

    footer h4 {
      font-size: 12px;
      margin: 8px 0 4px 0;
    }

    footer a {
      font-size: 10px;
    }

    footer p {
      font-size: 10px;
      padding: 0 4px;
      margin: 8px 0;
    }

    .foot-divider {
      margin: 0 0 14px;
    }

    /* Subscribe section (top row, spans columns 1-7) */
    .subscrb-foot {
      padding: 4px 12px;
      gap: 10px;
      margin-bottom: 2px;
      flex-direction: column;
    }

    .sub-inner {
      flex-wrap: wrap;
      gap: 4px;
    }

    .abt-foot,
    .cont-foot,
    .form-foot {
      border-radius: 8px;
      padding: 4px 8px 8px;
    }

    .abt-foot h4,
    .cont-foot h4,
    .form-foot h4 {
      font-size: 12px;
      margin: 0 0 4px;
      padding-bottom: 6px;
    }

    /* Join button (bottom row, centered) */
    .join-foot {
      padding: 18px 0 4px;
      border-radius: 8px;
    }

    #fjoin {
      border-radius: 8px;
      font-size: 12px;
      padding: 9px 40px;
    }

    .join-foot button {
      border-radius: 10px;
      font-size: 12px;
    }

    /* ===== Lists Inside Footer Sections ===== */
    .abt-foot ul,
    .cont-foot ul {
      padding: 0 4px;
      line-height: 1.2;
    }

    .abt-foot li,
    .cont-foot li {
      margin-bottom: 4px;
    }

    .abt-foot ul li a,
    .cont-foot ul li a {
      gap: 2px;
      font-size: 12px;
      padding: 2px 4px;
    }

    .abt-foot ul li a::before,
    .cont-foot ul li a::before {
      font-size: 10px;
      margin-right: 4px;
    }

    .contact-form p { margin: 0 0 7px; }
    .abt-foot ul li a:hover,
    .cont-foot ul li a:hover {
      padding-left: 8px;
    }

    .cont-foot ul li a[href^="mailto"] {
      font-size: 10px;
    }

    /* General input styling */
    .input {
      padding: 4px 12px;
      font-size: 10px;
    }

    textarea.input {
      min-height: 48px;
    }

    .subscription {
      padding: 6px 8px;
      font-size: 10px;
    }

    /* Subscribe button */
    .sub-btn {
      border-radius: 8px;
      padding: 4px 8px;
      margin-left: 12px;
    }

    /* Donate button */
    .donate-btn {
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 10px;

    }

    /* Send message button (in form) */
    .send-message {
      padding: 4px 12px;
      margin-bottom: 8px;
      font-size: 10px;
      color: var(--text-dark);
    }

    /* ===== Footer Bottom Note ===== */
    .foot-note {
      font-size: 12px;
      margin-top: 12px;
      padding: 4px 12px;
    }

    .socials {
      gap: 8px;
    }

    .social-icons {
      width: 16px;
      height: 16px;
      font-size: 18px;
      color: var(--white);
    }

    .body {
      font-size: 12px;
    }

    .hub {
      aside {
        margin-top: 4px;
        width: 16em;
        border-width: 4px;
      }

      section {
        margin: 4px;
        padding: 4px;
      }
    }

    .form-btn button{
      padding: 4px 8px;
      font-size: 10px;
    }

    .form-card {
      padding: 1.1rem;
      max-width: 800px;
    }

    .form-body p {
      font-size: 10px;
    }

    .form-sect p {
      font-size: 10px;
    }

    .form-content {
      margin-bottom: 0;
    }

    .form-content label {
      font-size: 10px;
      margin-bottom: 0px;
    }

    .form-content input,
    .form-content select,
    .form-content textarea {
      padding: 4px 8px;
      font-size: 8px;
    }

    .main-sect {
      padding: 12px;

    }

    .qoute-doc {
      display: block;
      padding: 4px 8px 4px 8px;
      font-size: 10px;
    }

    .qoute-doc a {
      font-size: 12px;
    }


    .content-tab h2 {
      font-size: 16px;
    }

    .content-tab p {
      padding: 4px;
      line-height: 1.3;
      font-size: 12px;
    }

    .content-tab button {
      padding: 4px 12px;
    }


    .content-tab td {
      padding: 4px;
      margin: 2px 2px 2px 16px;
    }

    /* ===== List Tab (Secondary Container) ===== */
    .list-tab {
      padding: 8px;
    }

    .list-tab li {
      margin-bottom: 4px;
      font-size: 12px;
    }

    .list-tab h3 {
      font-size: 13px;
    }

      .caption-tab {
        max-width: 400px;
        padding: 6px;
        font-size: 10px;
      }

    .chptr-btn button {
      padding: 4px 12px;
      font-size: 12px;
    }

    .chptr-btn button {
      padding: 4px 12px;
      font-size: 12px;
    }

    .heros h2 {
      font-size: clamp(14px, 4vw, 18px);
    }

    .heros p {
      font-size: 12px;
    }

    .heros p>a>strong {
      font-size: 12px;
      margin: 4px;
    }

    .hero-eyebrow {
      font-size: 0.8rem;
    }

    .hero-eyebrow::before {
      width: 16px;
      height: 2px;
    }

    .hero-eyebow {
      font-size: 11px;
      letter-spacing: .16em;
    }

    .hero-eyebow::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #C9A84C;
    }

    .hero-text h1 {
      font-size: clamp(2.4rem, 5vw, 3.2rem);
    }

    .hero-desc {
      font-size: 12px;
      line-height: 1.2;
      max-width: 520px;
    }

.content-tab {
    margin: 16px 8px 16px 12px;
  }

  .content-tab h2 {
    margin: 8px 0 12px 8px;
  }

  .content-tab p {
    margin: 0 12px;
    padding: 6px;
  }

  .list-tab {
    margin: 0 0 0 0;
    padding: 8px;
  }

  .table-tab td {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
}

.table-h-tab th {
  font-size: 14px;
  padding: 4px 8px;
}


  }

}

/* ========== mobile ========== */