/*
Theme Name: KitSpread
Theme URI: https://kitspread.com
Author: Gareth Hamilton
Author URI: https://kitspread.com
Description: Custom outdoor gear sharing theme built on Underscores (_s)
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kitspread
*/

/* ===========================================================
   GLOBAL BRAND COLORS
   =========================================================== */
:root {
  --kitspread-green: #0b7a75;
  --kitspread-light: #f1f8f7;
  --kitspread-hover: #b9e6df;
}

/* ===========================================================
   BASE TYPOGRAPHY & BODY
   =========================================================== */
body {
  margin: 0;
  padding: 0;
  background-color: #f7f9f8;
  background-image: linear-gradient(180deg, #f8faf9 0%, #eef3f1 100%);
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #222;
  overflow-x: hidden;
}

/* ===========================================================
   HEADER & NAVIGATION
   =========================================================== */
.site-header {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0;
  position: relative;
  background: linear-gradient(180deg, #0b7a75 0%, #09635f 100%);
  border-bottom: 3px solid #0b7a75;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  z-index: 100;
}

body.admin-bar .site-header {
  margin-top: 32px; /* Keeps logo below WP admin bar */
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
}

.branding {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo img {
  width: 110px;
  height: auto;
  border-radius: 6px;
}

.tagline {
  font-size: 1.25rem;
  color: var(--kitspread-light);
  font-style: italic;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.2;
  padding-top: 0.25rem;
  border-left: 2px solid var(--kitspread-light);
  padding-left: 0.75rem;
}

/* Navigation bar */
.main-navigation {
  background: linear-gradient(180deg, #0b7a75 0%, #09635f 100%);
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.main-navigation a {
  text-decoration: none;
  color: var(--kitspread-light);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.main-navigation a:hover {
  color: var(--kitspread-hover);
  transform: scale(1.05);
}

/* Mobile navigation */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-navigation {
    margin-top: 0.75rem;
    width: 100%;
    text-align: center;
  }

  .main-navigation ul {
    justify-content: center;
    flex-wrap: wrap;
  }

  .tagline {
    font-size: 1.1rem;
    border: none;
    padding-left: 0;
  }
}

/* -------------------------------------
   HEADER LAYOUT REFINEMENT
-------------------------------------- */

/* Ensure header uses flex layout */
.site-header {
  display: flex;
  align-items: center; /* vertically align logo + menu */
  justify-content: flex-start; /* align menu closer to logo */
  gap: 1.5rem; /* reduce horizontal gap between logo and menu */
  padding: 0.5rem 2rem;
}

/* Ensure branding and nav line up cleanly */
.site-branding {
  margin: 0; /* remove any default margin */
  flex-shrink: 0; /* prevent logo from shrinking */
}

/* Adjust nav spacing */
.main-navigation {
  margin-left: 0; /* remove any left margin if present */
  flex-grow: 1; /* allows nav to expand naturally */
}

/* Optional: space menu items evenly */
.main-navigation ul {
  display: flex;
  gap: 1.25rem; /* controls space between individual menu items */
}

/* Responsive: stack vertically on small screens */
@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}

/* ===========================================================
   KIT PAGE LAYOUT
   =========================================================== */
.single-kit {
  max-width: 1024px;
  margin: 2rem auto 4rem;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.single-kit h1,
.single-kit h2 {
  color: var(--kitspread-green);
  font-weight: 700;
  border-bottom: 2px solid var(--kitspread-green);
  display: inline-block;
  padding-bottom: 0.25rem;
}

.single-kit .kit-main-photo img {
  max-width: 90%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 1.5rem auto;
}

.single-kit .kit-gear-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.single-kit .kit-gear-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.kit-gear-list li::before {
  content: "\2713"; /* Unicode ✓ checkmark */
  position: absolute;
  left: 0;
  top: 0.58em; /* adjusted to align exactly mid-text */
  font-size: 1.6em; /* larger for visibility */
  color: #2e5230;
  font-family: Arial, "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  line-height: 1;
}

.kit-gear-list li {
  position: relative;
  padding-left: 1.8rem; /* slight space for larger checkmark */
  margin-bottom: 0.7rem;
  line-height: 1.6;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0;
  position: relative;
  background-color: var(--kitspread-green);
  color: var(--kitspread-light);
  border-top: 3px solid var(--kitspread-green);
  text-align: center;
}

.footer-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.footer-logo {
  width: 90px;
  height: auto;
  margin-bottom: 0.5rem;
}

.footer-tagline {
  font-size: 1.1rem;
  color: var(--kitspread-light);
  font-style: italic;
  margin-bottom: 1rem;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.footer-links a {
  color: var(--kitspread-light);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--kitspread-hover);
}

.footer-credit {
  font-size: 0.9rem;
  color: #cfe9e7;
  margin-top: 1rem;
}

/* ===========================================================
   RESPONSIVE FIXES
   =========================================================== */
@media (max-width: 600px) {
  .logo img {
    width: 80px;
  }
  .tagline {
    font-size: 1rem;
  }
  .single-kit {
    padding: 1rem;
  }
}

/* ===========================================================
   KITSPREAD HEADER + FOOTER REBUILD (Alignment + Palette Fix)
   =========================================================== */

/* Universal layout alignment fix */
html, body, .site, #page, #content {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow-x: hidden;
  background-color: #f6f5ef;
}

/* === HEADER === */
.site-header {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background: linear-gradient(180deg, #2e5230 0%, #3e6a41 100%);
  border-bottom: 3px solid #2e5230;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  z-index: 100;
}

body.admin-bar .site-header {
  margin-top: 32px;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0.75rem 2rem;
  box-sizing: border-box;
}

.branding {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo img {
  width: 120px;
  height: auto;
  border-radius: 6px;
}

.tagline {
  font-size: 1.2rem;
  color: #bebc7d;
  font-style: italic;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.2;
  padding-top: 0.25rem;
  border-left: 2px solid #bebc7d;
  padding-left: 0.75rem;
}

/* === NAVIGATION === */
.main-navigation {
  background: none;
  padding: 0.5rem 1rem;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.main-navigation a {
  text-decoration: none;
  color: #bebc7d;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.main-navigation a:hover {
  color: #f6f5ef;
  transform: scale(1.05);
}

/* === FOOTER === */
.site-footer {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background: linear-gradient(0deg, #2e5230 0%, #3e6a41 100%);
  border-top: 3px solid #2e5230;
  color: #bebc7d;
  text-align: center;
}

.footer-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.footer-logo {
  width: 90px;
  height: auto;
  margin-bottom: 0.5rem;
}

.footer-tagline {
  font-size: 1.1rem;
  color: #bebc7d;
  font-style: italic;
  margin-bottom: 1rem;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.footer-links a {
  color: #bebc7d;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #f6f5ef;
}

.footer-credit {
  font-size: 0.9rem;
  color: #d2d1af;
  margin-top: 1rem;
}

/* === Responsive fixes === */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-navigation {
    margin-top: 0.75rem;
    width: 100%;
    text-align: center;
  }

  .main-navigation ul {
    justify-content: center;
    flex-wrap: wrap;
  }

  .tagline {
    font-size: 1rem;
    border: none;
    padding-left: 0;
  }
}

/* =========================
   KIT GALLERY LAYOUT (Refined)
   ========================= */

.kit-gallery {
  max-width: 900px;
  margin: 3rem auto;
  text-align: center;
}

.gallery-viewer {
  position: relative;
  display: inline-block;
}

#main-gallery-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
}

#main-gallery-image:hover {
  transform: scale(1.02);
}

/* Navigation arrows */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(46, 82, 48, 0.8); /* muted forest overlay */
  color: #bebc7d; /* light gold accent */
  border: none;
  font-size: 2rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.gallery-nav:hover {
  background-color: rgba(46, 82, 48, 1);
  transform: scale(1.1);
}

.gallery-nav.prev {
  left: -45px;
}

.gallery-nav.next {
  right: -45px;
}

/* Thumbnails */
.gallery-thumbnails {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.gallery-thumbnails img {
  width: 100px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  opacity: 0.8;
}

.gallery-thumbnails img:hover {
  transform: scale(1.05);
  opacity: 1;
}

.gallery-thumbnails img.active {
  border: 3px solid #bebc7d; /* light gold border matches logo */
  opacity: 1;
}

/* Responsive scaling */
@media (max-width: 768px) {
  .gallery-nav.prev { left: -30px; }
  .gallery-nav.next { right: -30px; }
  .gallery-thumbnails img { width: 80px; height: 55px; }
}

/* =========================
   GALLERY IMAGE STABILIZATION (Refined)
   ========================= */

.kit-gallery {
  max-width: 1000px;
  margin: 1.5rem auto 3rem auto; /* brings gallery closer to title */
  text-align: center;
}

/* Main gallery viewer */
.gallery-viewer {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 1.25rem auto;
  aspect-ratio: 16 / 9; /* wider cinematic frame */
  overflow: hidden;
  border-radius: 12px;
  background-color: #f7f9f8; /* matches page background */
  display: flex;
  align-items: center;
  justify-content: center;
}

#main-gallery-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* show full image, no cropping */
  background-color: #f7f9f8; /* fill unused space */
  border-radius: 12px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#main-gallery-image:hover {
  transform: scale(1.02);
}

/* Arrows */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(46, 82, 48, 0.85);
  color: #bebc7d;
  border: none;
  font-size: 2rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.gallery-nav:hover {
  background-color: rgba(46, 82, 48, 1);
  transform: scale(1.1);
}

.gallery-nav.prev { left: 10px; }
.gallery-nav.next { right: 10px; }

/* Thumbnails */
.gallery-thumbnails {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.gallery-thumbnails img {
  width: 100px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  opacity: 0.8;
}

.gallery-thumbnails img:hover {
  transform: scale(1.05);
  opacity: 1;
}

.gallery-thumbnails img.active {
  border: 3px solid #bebc7d;
  opacity: 1;
}

/* Responsive scaling */
@media (max-width: 768px) {
  .gallery-viewer {
    aspect-ratio: 16 / 10;
    max-width: 100%;
  }

  .gallery-thumbnails img {
    width: 80px;
    height: 55px;
  }
}

/* =========================
   TITLE + CONTENT SECTION STYLING
   ========================= */

.kit-title {
  text-align: center;
  font-size: 2.5rem;
  color: #2e5230;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* =========================
   PACKING LIST CHECKBOX BULLETS
   ========================= */
.kit-gear-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kit-gear-list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.kit-gear-list li::before {
  content: "☑️";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 1.1em;
}

/* =========================
   DESCRIPTION + PACKING LIST LAYOUT
   ========================= */

.kit-info-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}

.kit-description,
.kit-gear {
  background-color: #f8faf9;
  border: 1px solid #e2e6e3;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.kit-description h2,
.kit-gear h2 {
  color: #2e5230;
  border-bottom: 2px solid #bebc7d;
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
  text-align: left;
}

.kit-description p {
  line-height: 1.6;
  color: #222;
}

.kit-gear-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kit-gear-list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.kit-gear-list li::before {
  content: "\2611"; /* Unicode for ☑️ */
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 1.1em;
}

/* Responsive layout for mobile */
@media (max-width: 768px) {
  .kit-info-sections {
    grid-template-columns: 1fr;
  }
}

/* =========================
   CENTER PAGE TITLE
   ========================= */
.single-kit .entry-title,
.single-kit .kit-title {
  text-align: center !important;
  display: block;
  width: 100%;
  color: #2e5230;
  font-size: 2.6rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 1.2rem;
}

/* =========================
   KIT META INFO (Activity + Location)
   ========================= */

.kit-meta {
  max-width: 800px;
  margin: 0 auto 1.5rem auto;
  text-align: left;
  color: #2e5230;
  font-size: 1rem;
  line-height: 1.4;
}

.kit-meta-item {
  margin: 0.2rem 0;
}

.kit-meta-item strong {
  color: #2e5230;
  font-weight: 700;
}

/* -------------------------------------
   RESPONSIVE LAYOUT REFINEMENTS
-------------------------------------- */
@media (max-width: 1024px) {
  .kit-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  header, footer {
    text-align: center;
    padding: 1rem;
  }

  .kit-meta {
    flex-direction: column;
    align-items: center;
  }

  .kit-content {
    display: block;
    padding: 1rem;
  }

  .kit-gallery img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  h1.kit-title {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .kit-meta {
    font-size: 0.9rem;
  }

  .gallery-thumbnails {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    justify-content: flex-start;
  }

  .gallery-thumbnails img {
    width: 60px;
    height: auto;
    flex-shrink: 0;
    border-radius: 6px;
  }

  .kit-items li {
    font-size: 0.95rem;
  }
}

/* -------------------------------------
   SUBMIT A KIT PAGE STYLING
-------------------------------------- */

body.page-template-page-submit-kit {
  background-color: #f9f9f9; /* optional subtle background */
  color: #2e5230;
}

.submit-kit {
  max-width: 900px; /* limit width for better readability */
  margin: 0 auto; /* center horizontally */
  padding: 3rem 1.5rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Match heading style with single-kit titles */
.submit-kit h1 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 2.25rem;
  color: #2e5230;
  text-align: center;
  margin-bottom: 2rem;
  letter-spacing: 0.5px;
}

/* ACF form fields */
.acf-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Labels */
.acf-field label {
  font-weight: 600;
  color: #2e5230;
  margin-bottom: 0.25rem;
  display: inline-block;
}

/* Inputs, textareas, selects */
.acf-field input[type="text"],
.acf-field textarea,
.acf-field select,
.acf-field input[type="file"] {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.acf-field input:focus,
.acf-field textarea:focus,
.acf-field select:focus {
  border-color: #2e5230;
  outline: none;
}

/* Submit Button */
.acf-form-submit input[type="submit"] {
  background-color: #2e5230;
  color: #bebc7d;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: block;
  margin: 2rem auto 0;
}

.acf-form-submit input[type="submit"]:hover {
  background-color: #244624;
  color: #fff;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .submit-kit {
    padding: 2rem 1rem;
  }
  .submit-kit h1 {
    font-size: 1.75rem;
  }
}

/* Hide hidden ACF storage fields */
.acf-field[data-name="main_photo_id"],
.acf-field[data-name="extra_photo_ids"] {
  display: none !important;
}

/* Dropzone styling */
.dropzone {
  border: 2px dashed #bebc7d;
  border-radius: 10px;
  background-color: #fafaf7;
  min-height: 160px;
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  color: #2e5230;
  margin-bottom: 1.5rem;
  transition: border-color 0.2s ease;
}

.dropzone:hover {
  border-color: #2e5230;
}

.dropzone .dz-preview .dz-image img {
  border-radius: 8px;
}

/* Fallback when no kit photo is uploaded */
.no-photo {
  text-align: center;
  padding: 3rem 1rem;
  background-color: #f9f9f9;
  border-radius: 10px;
  border: 1px dashed #bebc7d;
  color: #555;
}

.no-photo-message {
  font-style: italic;
  color: #666;
}

/* -------------------------------------
   LOGIN & REGISTER PAGE STYLING
-------------------------------------- */

body.page-template-page-login,
body.page-template-page-register {
  background-color: #f9f9f9;
  color: #2e5230;
}

.auth-container {
  max-width: 420px;
  margin: 4rem auto;
  padding: 2.5rem;
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  text-align: center;
}

.auth-container h1 {
  font-size: 2rem;
  color: #2e5230;
  margin-bottom: 0.75rem;
}

.auth-subtext {
  color: #555;
  margin-bottom: 2rem;
  font-size: 1rem;
}

.auth-container form p {
  margin-bottom: 1.2rem;
  text-align: left;
}

.auth-container label {
  display: block;
  font-weight: 600;
  color: #2e5230;
  margin-bottom: 0.25rem;
}

.auth-container input[type="text"],
.auth-container input[type="email"],
.auth-container input[type="password"] {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.auth-container input[type="submit"] {
  width: 100%;
  background-color: #2e5230;
  color: #bebc7d;
  border: none;
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.auth-container input[type="submit"]:hover {
  background-color: #244624;
  color: #fff;
}

.auth-switch {
  margin-top: 1.5rem;
  font-size: 0.95rem;
}

.auth-switch a {
  color: #2e5230;
  font-weight: 600;
  text-decoration: underline;
}

.notice {
  color: #b33;
  font-weight: bold;
}
/* -------------------------------------
   LOGIN & REGISTER PAGE STYLING
-------------------------------------- */

body.page-template-page-login,
body.page-template-page-register {
  background-color: #f9f9f9;
  color: #2e5230;
}

.auth-container {
  max-width: 420px;
  margin: 4rem auto;
  padding: 2.5rem;
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  text-align: center;
}

.auth-container h1 {
  font-size: 2rem;
  color: #2e5230;
  margin-bottom: 0.75rem;
}

.auth-subtext {
  color: #555;
  margin-bottom: 2rem;
  font-size: 1rem;
}

.auth-container form p {
  margin-bottom: 1.2rem;
  text-align: left;
}

.auth-container label {
  display: block;
  font-weight: 600;
  color: #2e5230;
  margin-bottom: 0.25rem;
}

.auth-container input[type="text"],
.auth-container input[type="email"],
.auth-container input[type="password"] {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.auth-container input[type="submit"] {
  width: 100%;
  background-color: #2e5230;
  color: #bebc7d;
  border: none;
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.auth-container input[type="submit"]:hover {
  background-color: #244624;
  color: #fff;
}

.auth-switch {
  margin-top: 1.5rem;
  font-size: 0.95rem;
}

.auth-switch a {
  color: #2e5230;
  font-weight: 600;
  text-decoration: underline;
}

.notice {
  color: #b33;
  font-weight: bold;
}

/* -------------------------------------
   MODAL LOGIN / REGISTER
-------------------------------------- */
.auth-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.65);
  justify-content: center;
  align-items: center;
}

.auth-modal-content {
  background-color: #fff;
  width: 90%;
  max-width: 420px;
  border-radius: 14px;
  padding: 2rem;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.auth-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 1.8rem;
  cursor: pointer;
  color: #2e5230;
}

.auth-tabs {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}

.auth-tab {
  background: none;
  border: none;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  color: #2e5230;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.auth-tab.active {
  border-bottom: 2px solid #bebc7d;
}

.hidden {
  display: none;
}

#footer-legal {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
  list-style: none;
  padding: 0;
}

#footer-legal li {
  display: inline-block;
  margin: 0 0.5rem;
}

#footer-legal a {
  color: #bebc7d;
  text-decoration: none;
}

#footer-legal a:hover {
  text-decoration: underline;
  color: #fff;
}

/* ===========================
   Footer Legal Menu Styling
=========================== */

#footer-legal {
  text-align: center;
  margin-top: 1rem;
  list-style: none;
  padding: 0;
  font-family: "Montserrat", sans-serif; /* same as main site font */
  font-size: 0.9rem;
  font-weight: 500;
  color: #bebc7d;
}

#footer-legal li {
  display: inline-block;
  margin: 0 0.75rem;
}

#footer-legal a {
  color: #bebc7d;
  text-decoration: none;
  transition: color 0.3s ease;
}

#footer-legal a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-credit {
  text-align: center;
  color: #bebc7d;
  font-size: 0.9rem;
  margin-top: 1rem;
}

#footer-legal-inline {
  display: inline;
  padding: 0;
  margin: 0;
  list-style: none;
}

#footer-legal-inline li {
  display: inline;
  margin: 0 0.4rem;
}

/* Footer Legal menu cleanup */
#footer-legal {
  text-align: center;
  margin-top: 1rem;
  list-style: none;
  padding: 0;
}
#footer-legal li {
  display: inline-block;
  margin: 0 0.75rem;
}
#footer-legal a {
  color: #bebc7d;
  text-decoration: none;
}
#footer-legal a:hover {
  color: #fff;
  text-decoration: underline;
}

/* =======================================
   Privacy Policy Page Styling (KitSpread)
========================================= */

/* Replace ### with your actual Privacy Policy page ID */
.page-id-201 .site-main {
  max-width: 900px;
  margin: 3rem auto;
  padding: 2rem 2.5rem;
  background: #f8f8f5; /* light neutral tone matching Kit pages */
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  color: #222; /* dark gray text for contrast */
  font-family: "Montserrat", sans-serif;
  line-height: 1.75;
}

/* Headings styled similar to kit titles */
.page-id-201 h1, 
.page-id-201 h2 {
  font-family: "Montserrat", sans-serif;
  color: #222;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  text-align: center;
}

.page-id-201 h1 {
  text-align: center !important;
}

/* Link colors to match KitSpread gold accent */
/* Only affect links inside Privacy Policy page content area */
.page-id-201 .entry-content a {
  color: #1c3924;
  text-decoration: underline;
  font-weight: 500;
}

.page-id-201 .entry-content a:hover {
  color: #000;
  text-decoration: none;
}

/* Hide Edit link */
.page-id-201 .post-edit-link {
  display: none;
}

.page-id-201 h1 {
  font-size: 2.25rem;
  font-weight: 600;
  color: #000;
  border-bottom: 2px solid #bebc7d;
  display: inline-block;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}

/* Force Privacy Policy title to center */
.page-id-201 .entry-title,
.page-id-201 h1 {
  text-align: center !important;
  display: block;
  width: 100%;
}

/* ============================
   Header Menu Link Styling
============================ */

.site-header a,
.main-navigation a {
  color: #bebc7d !important; /* KitSpread gold */
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.site-header a:hover,
.main-navigation a:hover {
  color: #ffffff !important; /* white on hover */
  text-decoration: none !important;
}

/* ======================================
   Header Menu Hover Animation (KitSpread)
====================================== */

.main-navigation a {
  position: relative;
  display: inline-block;
  color: #bebc7d !important; /* KitSpread gold */
  text-decoration: none !important;
  padding: 0.25rem 0;
  transition: color 0.3s ease;
}

/* Animated underline */
.main-navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: #bebc7d; /* gold underline */
  transition: width 0.3s ease;
}

/* On hover: text fades to white, underline slides in */
.main-navigation a:hover {
  color: #ffffff !important;
}

.main-navigation a:hover::after {
  width: 100%;
}

/* Optional: small gap between items for spacing */
.main-navigation li {
  margin: 0 0.75rem;
}

/* =====================================
   KitSpread Auth Modal Styling
===================================== */

.auth-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(28, 57, 36, 0.95); /* translucent forest green overlay */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.auth-modal-content {
  background: #f8f8f5;
  border-radius: 16px;
  padding: 2.5rem 3rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 420px;
  text-align: center;
  position: relative;
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.auth-logo {
  width: 100px;
  height: auto;
  margin-bottom: 1.5rem;
}

.auth-modal h2 {
  color: #1c3924;
  font-size: 1.8rem;
  margin-bottom: 0.25rem;
  font-family: "Montserrat", sans-serif;
}

.auth-subtext {
  color: #444;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.auth-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.auth-tab {
  background: transparent;
  border: none;
  color: #1c3924;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.auth-tab.active {
  border-color: #bebc7d;
  color: #000;
}

.auth-tab:hover {
  color: #000;
}

.auth-tab-content {
  display: none;
}

.auth-tab-content:not(.hidden) {
  display: block;
}

.auth-tab-content input[type="text"],
.auth-tab-content input[type="email"],
.auth-tab-content input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.auth-tab-content input[type="submit"] {
  background: #bebc7d;
  color: #1c3924;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  transition: background 0.3s ease;
}

.auth-tab-content input[type="submit"]:hover {
  background: #a8a56a;
}

/* Close button */
.auth-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.5rem;
  color: #1c3924;
  cursor: pointer;
}

.auth-modal-close:hover {
  color: #000;
}

/* Nextend social buttons */
.nsl-container {
  margin-top: 1rem;
}

.nsl-button {
  width: 100%;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}

.auth-logo {
  animation: logoFade 0.6s ease forwards;
  opacity: 0;
}

@keyframes logoFade {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Center Nextend Social Login buttons in modal */
.auth-modal .nsl-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.auth-modal .nsl-button {
  width: 80%;
  margin: 0.4rem 0;
  border-radius: 8px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}

/* Reduce spacing between logo and title */
.auth-logo {
  margin-bottom: 0.75rem; /* previously 1.5rem */
}

/* Reduce spacing between Username and Email fields */
.auth-tab-content input[type="text"] {
  margin-bottom: 0.5rem; /* tighter spacing */
}

/* Allow modal to scroll on small screens */
.auth-modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

/* === HEADER MENU FINAL APPEARANCE === */
.main-navigation a {
  color: #bebc7d !important; /* KitSpread gold */
  text-decoration: none !important;
  border-bottom: none !important;
}

.main-navigation a:hover {
  color: #ffffff !important; /* White on hover */
  text-decoration: none !important;
}

#kitspread-login-form input.error {
  border: 2px solid #e53935;
  background-image: url('data:image/svg+xml;utf8,<svg fill="red" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><text x="3" y="15" font-size="16">!</text></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
}

#kitspread-login-error {
  color: #e53935;
  font-size: 0.85em;
  margin-top: 6px;
}

#kitspread-login-error.visible {
  display: block;
}

/* =====================================
   KitSpread Auth Modal Styling
===================================== */

.auth-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(28, 57, 36, 0.95); /* translucent forest green overlay */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.auth-modal-content {
  background: #f8f8f5;
  border-radius: 16px;
  padding: 2.5rem 3rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 420px;
  text-align: center;
  position: relative;
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.auth-logo {
  width: 100px;
  height: auto;
  margin-bottom: 1.5rem;
}

.auth-modal h2 {
  color: #1c3924;
  font-size: 1.8rem;
  margin-bottom: 0.25rem;
  font-family: "Montserrat", sans-serif;
}

.auth-subtext {
  color: #444;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.auth-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.auth-tab {
  background: transparent;
  border: none;
  color: #1c3924;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.auth-tab.active {
  border-color: #bebc7d;
  color: #000;
}

.auth-tab:hover {
  color: #000;
}

.auth-tab-content {
  display: none;
}

.auth-tab-content:not(.hidden) {
  display: block;
}

.auth-tab-content input[type="text"],
.auth-tab-content input[type="email"],
.auth-tab-content input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.auth-tab-content input[type="submit"] {
  background: #bebc7d;
  color: #1c3924;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  transition: background 0.3s ease;
}

.auth-tab-content input[type="submit"]:hover {
  background: #a8a56a;
}

/* === Modal Close Button (matches Back Arrow style) === */
.auth-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid #1c3924; /* forest green border */
  background-color: transparent;
  color: #1c3924; /* applies to SVG stroke */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  z-index: 20;
}

.auth-modal-close:hover {
  background-color: #bebc7d; /* KitSpread gold hover fill */
  color: #1c3924;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(190, 188, 125, 0.35);
}

.auth-modal-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(190, 188, 125, 0.45);
}

/* SVG icon inside close button */
.close-icon {
  width: 20px;
  height: 20px;
  display: block;
  color: #1c3924;
}

/* Nextend social buttons */
.nsl-container {
  margin-top: 1rem;
}

.nsl-button {
  width: 100%;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}

.auth-logo {
  animation: logoFade 0.6s ease forwards;
  opacity: 0;
}

@keyframes logoFade {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Center Nextend Social Login buttons in modal */
.auth-modal .nsl-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.auth-modal .nsl-button {
  width: 80%;
  margin: 0.4rem 0;
  border-radius: 8px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}

/* Reduce spacing between logo and title */
.auth-logo {
  margin-bottom: 0.75rem; /* previously 1.5rem */
}

/* Reduce spacing between Username and Email fields */
.auth-tab-content input[type="text"] {
  margin-bottom: 0.5rem; /* tighter spacing */
}

/* Allow modal to scroll on small screens */
.auth-modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

/* === HEADER MENU FINAL APPEARANCE === */
.main-navigation a {
  color: #bebc7d !important; /* KitSpread gold */
  text-decoration: none !important;
  border-bottom: none !important;
}

.main-navigation a:hover {
  color: #ffffff !important; /* White on hover */
  text-decoration: none !important;
}

/* === Login Error Styles === */
#kitspread-login-form input.error {
  border: 2px solid #e53935;
  background-image: url('data:image/svg+xml;utf8,<svg fill="red" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><text x="3" y="15" font-size="16">!</text></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
}

#kitspread-login-error {
  color: #e53935;
  font-size: 0.85em;
  margin-top: 6px;
}

#kitspread-login-error.visible {
  display: block;
}

/* === Modal Back Arrow (visible only on Reset Password view) === */
.back-arrow {
  position: absolute;
  top: 0.8rem;
  left: 1rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid #1c3924; /* forest green border */
  background-color: transparent;
  color: #1c3924; /* applies to SVG stroke */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  z-index: 20;
  opacity: 0;
  pointer-events: none; /* hidden by default */
}

.back-arrow.visible {
  opacity: 1;
  pointer-events: auto;
}

.back-arrow:hover {
  background-color: #bebc7d; /* gold fill */
  color: #1c3924; /* arrow stays dark green */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(190, 188, 125, 0.35);
}

.back-arrow:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(190, 188, 125, 0.45);
}

/* SVG arrow icon inside circle */
.arrow-icon {
  width: 20px;
  height: 20px;
  display: block;
  color: #1c3924;
}

/* =====================================
   Fix Social Button Cropping & Centering
   ===================================== */
.auth-modal .nsl-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: visible !important;
}

.auth-modal .nsl-button {
  width: 100% !important;          /* use full available width */
  max-width: 360px !important;     /* prevent stretching too wide */
  margin: 0.4rem auto;             /* center horizontally */
  border-radius: 8px !important;
  text-align: center;
  box-sizing: border-box;
}

.auth-modal-content {
  overflow-x: visible !important;  /* allow full button width to show */
  overflow-y: auto;                /* still scroll vertically if needed */
  padding-bottom: 2rem;
}

/* Fix long text breaking layout */
.auth-modal .nsl-button-label-container {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional: shrink text slightly for better fit */
.auth-modal .nsl-button b {
  font-size: 0.95em;
}

/* =====================================
   Modal Layout Refinements (Final Centering & Spacing)
   ===================================== */

/* Center social buttons in both Login & Register tabs */
.auth-modal .nsl-container {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center;
  width: 100%;
  overflow: visible !important;
}

.auth-modal .nsl-button {
  width: 100% !important;
  max-width: 360px !important;
  margin: 0.4rem auto !important;
  border-radius: 8px !important;
  text-align: center;
  box-sizing: border-box;
}

/* Tighten spacing between logo and first field */
.auth-modal-content {
  padding-top: 1.25rem !important;   /* was 2.5rem */
  padding-bottom: 1.75rem !important;
}

/* Further reduce vertical gaps between stacked elements */
.auth-modal h2 {
  margin-bottom: 0.4rem !important;
}

.auth-subtext {
  margin-bottom: 0.9rem !important;
}

.auth-tab-content input[type="text"],
.auth-tab-content input[type="email"],
.auth-tab-content input[type="password"] {
  margin-bottom: 0.6rem !important;
}

/* Slight upward shift of entire inner content relative to logo */
.auth-modal-inner {
  margin-top: -0.75rem !important;
}

/* =====================================
   Modal Logo + Fade-Scale Animation
   ===================================== */

/* Animate entire modal overlay */
.auth-modal {
  animation: modalFade 0.4s ease forwards;
}

@keyframes modalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Animate modal content (scale up) */
.auth-modal-content {
  transform: scale(0.95);
  opacity: 0;
  animation: modalScaleUp 0.4s ease forwards;
  animation-delay: 0.05s;
}

@keyframes modalScaleUp {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Logo styling */
.auth-logo {
  width: 100px;
  height: auto;
  margin: 0 auto 0.75rem auto;
  display: block;
  opacity: 0;
  transform: translateY(-10px);
  animation: logoFadeIn 0.6s ease forwards;
  animation-delay: 0.25s;
}

@keyframes logoFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ======================================
   Social Button Hover Animation (Glow + Lift)
   ====================================== */

.auth-modal .nsl-button {
  transition: all 0.25s ease !important;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transform: translateY(0);
}

.auth-modal .nsl-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(190, 188, 125, 0.35); /* soft KitSpread gold glow */
  filter: brightness(1.05);
}

/* Optional: add stronger glow on focus (keyboard navigation) */
.auth-modal .nsl-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(190, 188, 125, 0.45);
}

/* ======================================
   KitSpread Modal Button Glow + Lift (Unified Style)
   ====================================== */

/* ---- Social Buttons (Facebook & Google) ---- */
.auth-modal .nsl-button {
  transition: all 0.25s ease !important;
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.auth-modal .nsl-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(190, 188, 125, 0.35); /* soft KitSpread gold glow */
  filter: brightness(1.05);
}

.auth-modal .nsl-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(190, 188, 125, 0.45);
}

/* ---- Modal Tabs: "Log In" / "Register" ---- */
.auth-tab {
  position: relative;
  transition: all 0.25s ease;
}

.auth-tab:hover {
  color: #000;
  transform: translateY(-1px);
  text-shadow: 0 0 6px rgba(190, 188, 125, 0.4);
}

/* ---- Submit Buttons (inside forms) ---- */
.auth-tab-content input[type="submit"] {
  background: #bebc7d;
  color: #1c3924;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.auth-tab-content input[type="submit"]:hover {
  background: #c9c68a;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(190, 188, 125, 0.35);
}

.auth-tab-content input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(190, 188, 125, 0.45);
}

/* =======================================
   Legal Page Dropdown Menu Styling
======================================= */
.legal-nav {
  text-align: center;
  margin: 1rem auto 2rem auto;
  font-family: "Montserrat", sans-serif;
}

.legal-nav label {
  margin-right: 0.5rem;
  color: #1c3924;
  font-weight: 600;
}

.legal-nav select {
  background: #f8f8f5;
  color: #1c3924;
  border: 1px solid #bebc7d;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.legal-nav select:hover {
  border-color: #2e5230;
  box-shadow: 0 0 6px rgba(190, 188, 125, 0.3);
}

/* =======================================
   Modal Terms Acknowledgement Styling
======================================= */
.auth-terms {
  font-size: 0.85rem;
  color: #444;
  margin-top: 1rem;
  text-align: center;
}

.auth-terms a {
  color: #1c3924;
  text-decoration: underline;
  font-weight: 600;
}

.auth-terms a:hover {
  color: #000;
  text-decoration: none;
}

/* ==========================================
   KitSpread Legal Pages Styling (Unified)
========================================== */

.page-id-201 .site-main,
.page-id-203 .site-main,
.page-id-211 .site-main {
  /* Replace 999 and 1001 with your actual Terms & Data Deletion page IDs */
  max-width: 900px;
  margin: 3rem auto;
  padding: 2rem 2.5rem;
  background: #f8f8f5;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  color: #222;
  font-family: "Montserrat", sans-serif;
  line-height: 1.75;
}

/* Center the page title */
.page-id-201 h1,
.page-id-203 h1,
.page-id-211 h1 {
  text-align: center !important;
  color: #2e5230;
  border-bottom: 2px solid #bebc7d;
  display: inline-block;
  margin: 0 auto 2rem auto;
  font-size: 2.25rem;
  font-weight: 600;
  width: 100%;
}

/* Make links forest green for readability */
.page-id-201 .entry-content a,
.page-id-203 .entry-content a,
.page-id-211 .entry-content a {
  color: #1c3924;
  text-decoration: underline;
  font-weight: 500;
}

.page-id-201 .entry-content a:hover,
.page-id-203 .entry-content a:hover,
.page-id-211 .entry-content a:hover {
  color: #000;
  text-decoration: none;
}

/* Hide edit link for all legal pages */
.page-id-201 .post-edit-link,
.page-id-203 .post-edit-link,
.page-id-211 .post-edit-link {
  display: none;
}

/* Legal Page Dropdown Styling */
.legal-nav {
  text-align: right;
  margin-bottom: 1.5rem;
}

.legal-nav label {
  margin-right: 0.5rem;
  color: #2e5230;
  font-weight: 600;
}

.legal-nav select {
  background: #f8f8f5;
  border: 1px solid #bebc7d;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-family: "Montserrat", sans-serif;
  color: #2e5230;
}

/* ================================
   Force visibility of legal dropdown
================================ */
.legal-nav {
  position: relative;
  z-index: 100;
  text-align: center;
  display: block !important;
  margin: 2rem auto 1rem auto !important;
  background: #f8f8f5;
  padding: 0.5rem 0;
  border-radius: 6px;
}

.legal-nav select {
  position: relative;
  z-index: 101;
}

/* ================================================
   LEGAL PAGES FINAL STYLING (KitSpread Theme)
   Applies to Privacy Policy, Terms of Service,
   and Data Deletion pages
================================================= */

/* Unify layout for all legal pages */
.page-id-201 .site-main,
.page-id-203 .site-main,
.page-id-211 .site-main {
  max-width: 900px;
  margin: 3rem auto;
  padding: 2rem 2.5rem;
  background: #f8f8f5;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  color: #222;
  font-family: "Montserrat", sans-serif;
  line-height: 1.75;
}

/* Center and style the page titles */
.page-id-201 .entry-title,
.page-id-203 .entry-title,
.page-id-211 .entry-title {
  text-align: center;
  color: #2e5230;
  border-bottom: 2px solid #bebc7d;
  display: inline-block;
  margin: 1rem auto 2rem auto;
  font-size: 2.25rem;
  font-weight: 600;
  width: 100%;
}

/* Ensure dropdown is centered and well spaced */
.legal-nav {
  text-align: center !important;
  margin: 2rem auto 1.5rem auto !important;
}
.legal-nav label {
  color: #2e5230;
  font-weight: 600;
}
.legal-nav select {
  background: #f8f8f5;
  border: 1px solid #bebc7d;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-family: "Montserrat", sans-serif;
  color: #2e5230;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.legal-nav select:hover,
.legal-nav select:focus {
  box-shadow: 0 0 8px rgba(46, 82, 48, 0.4);
  outline: none;
}

/* Link colors for readability */
.page-id-201 .entry-content a,
.page-id-203 .entry-content a,
.page-id-211 .entry-content a {
  color: #1c3924;
  text-decoration: underline;
  font-weight: 500;
}
.page-id-201 .entry-content a:hover,
.page-id-203 .entry-content a:hover,
.page-id-211 .entry-content a:hover {
  color: #000;
  text-decoration: none;
}

/* Hide the “Edit” link */
.page-id-201 .post-edit-link,
.page-id-203 .post-edit-link,
.page-id-211 .post-edit-link {
  display: none;
}

/* Forgot Password + Reset Page Styling */
.forgot-password {
  text-align: center;
  margin-top: 1rem;
}
.forgot-password a {
  color: #2e5230;
  font-weight: 500;
  text-decoration: underline;
}
.forgot-password a:hover {
  color: #bebc7d;
  text-decoration: none;
}
#tab-reset h3 {
  text-align: center;
  color: #2e5230;
  margin-bottom: 0.5rem;
}
#tab-reset p {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Forgot Password + Reset Page Styling */
.forgot-password {
  text-align: center;
  margin-top: 1rem;
}
.forgot-password a {
  color: #2e5230;
  font-weight: 500;
  text-decoration: underline;
}
.forgot-password a:hover {
  color: #bebc7d;
  text-decoration: none;
}
#tab-reset h3 {
  text-align: center;
  color: #2e5230;
  margin-bottom: 0.5rem;
}
#tab-reset p {
  text-align: center;
  margin-bottom: 1.5rem;
}

.reset-success {
  background-color: #e7f6e7;
  color: #1c3924;
  border: 1px solid #9ac89a;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  text-align: center;
  font-weight: 600;
  margin-top: 1.25rem;
  transition: opacity 0.6s ease;
}

.register-message {
  background: #f0f6f0;
  border: 1px solid #9ac89a;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  font-weight: 600;
  text-align: center;
  color: #1c3924;
}

/* Registration success and error messages */
.register-message {
  background: #f0f6f0;
  border: 1px solid #9ac89a;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  font-weight: 600;
  text-align: center;
  color: #1c3924;
}

/* Error message */
.register-message.error {
  background: #fbeaea;
  border-color: #c77;
  color: #611;
}

/* Success message */
.register-message.success {
  background: #e7f6e7;
  border-color: #9ac89a;
  color: #1c3924;
  font-weight: 600;
}

/* Login field error styling */
#kitspread-login-form input.error {
  border: 2px solid #d33;
  background-image: url('data:image/svg+xml;utf8,<svg fill="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zM9 4h2v6H9V4zm0 8h2v2H9v-2z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
}

.login-error-message {
  color: #b22222;
  font-size: 0.9rem;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  display: none;
}

.login-error-message.visible {
  display: block;
}

/* === KITSPREAD RESET PASSWORD PAGE === */

.auth-modal.reset-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  background: var(--modal-bg, #fff);
  padding: 40px 20px;
}

.auth-modal.reset-page h2 {
  text-align: center;
  margin-bottom: 10px;
  color: #333;
}

.auth-modal.reset-page p {
  text-align: center;
  color: #555;
}

.reset-page .auth-modal-content {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 40px;
  max-width: 400px;
  width: 100%;
}

.reset-page .reset-form input[type="password"],
.reset-page .reset-form input[type="submit"] {
  width: 100%;
  margin-top: 10px;
}

.button-gold {
  display: inline-block;
  background-color: #bebc7d;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-gold:hover {
  background-color: #a9a66a;
  transform: translateY(-2px);
}

/* === KITSPREAD RESET PASSWORD THEME REFINEMENTS === */

/* 1. Make the main title (Set a New Password) forest green */
.reset-page h2 {
  color: #2f4f2f; /* Forest green */
  font-weight: 700;
}

/* 2. Make “New Password” and “Confirm New Password” labels forest green */
.reset-page label {
  color: #2f4f2f;
  font-weight: 600;
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
}

/* 3. Match input fields to the Log In modal fields */
.reset-page input[type="password"] {
  width: 100%;
  padding: 12px 15px;
  border: 1.8px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  background-color: #fafafa;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.reset-page input[type="password"]:focus {
  border-color: #2f4f2f; /* Forest green border on focus */
  box-shadow: 0 0 0 3px rgba(47, 79, 47, 0.1);
  outline: none;
}

/* 4. Match the “Reset Password” button to the Log In modal style */
.reset-page input[type="submit"] {
  display: inline-block;
  background-color: #fff;
  color: #2f4f2f;
  border: 2px solid #2f4f2f;
  padding: 10px 30px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 20px;
  width: auto; /* Shorter length like modal buttons */
}

.reset-page input[type="submit"]:hover {
  background-color: #2f4f2f;
  color: #fff;
  transform: translateY(-2px);
}

/* === Reset Password Button Size Fix === */
.reset-page .button-gold,
.reset-page input[type="submit"].button-gold {
  width: auto !important;
  padding: 10px 35px;
  display: inline-block;
  margin: 0 auto;
}

/* ======================================
   KITSPREAD RESET PASSWORD PAGE (MATCH MODAL)
   ====================================== */

.reset-page h2 {
  color: #1c3924; /* forest green title */
  font-size: 1.8rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Center entire form column */
.reset-page .reset-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Label styling (forest green, same as modal) */
.reset-page label {
  color: #1c3924;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  margin-top: 1rem;
  align-self: flex-start; /* keeps label flush left */
  width: 100%;
  max-width: 340px;
}

/* Input fields (same as modal fields) */
.reset-page input[type="password"] {
  width: 100%;
  max-width: 340px; /* match modal width */
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 1rem;
  background-color: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.reset-page input[type="password"]:focus {
  border-color: #1c3924;
  box-shadow: 0 0 0 3px rgba(28, 57, 36, 0.1);
  outline: none;
}

/* Add breathing room below last field */
.reset-page input[type="password"]:last-of-type {
  margin-bottom: 1.25rem;
}

/* "Reset Password" button — identical to modal button */
.reset-page input[type="submit"] {
  background: #bebc7d;          /* KitSpread gold */
  color: #1c3924;               /* forest green text */
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  width: auto;
  margin-top: 0.5rem;           /* restore spacing */
}

.reset-page input[type="submit"]:hover {
  background: #c9c68a;          /* lighter gold hover */
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(190, 188, 125, 0.35);
}

.reset-page input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(190, 188, 125, 0.45);
}

/* ======================================
   KITSPREAD RESET PASSWORD PAGE (FINAL ALIGNMENT + LOGO)
   ====================================== */

/* Center content column like modal */
.reset-page .auth-modal-content {
  background: #f8f8f5;
  border-radius: 16px;
  padding: 2.5rem 3rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 420px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

/* Title - ensure forest green and centered */
.reset-page h2 {
  color: #1c3924 !important; /* force forest green */
  font-size: 1.8rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-align: center;
}

/* Center entire form and labels */
.reset-page .reset-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Field labels - center aligned above fields */
.reset-page label {
  color: #1c3924;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  text-align: center; /* now centered */
  width: 100%;
}

/* Password fields - centered, modal-style */
.reset-page input[type="password"] {
  width: 100%;
  max-width: 340px;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 1rem;
  background-color: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  text-align: center; /* aligns cursor center */
}

.reset-page input[type="password"]:focus {
  border-color: #1c3924;
  box-shadow: 0 0 0 3px rgba(28, 57, 36, 0.1);
  outline: none;
}

/* Auth logo - same dimensions and animation as modal */
.reset-page .auth-logo {
  width: 100px;
  height: auto;
  margin: 0 auto 0.75rem auto;
  display: block;
  opacity: 0;
  transform: translateY(-10px);
  animation: logoFadeIn 0.6s ease forwards;
  animation-delay: 0.25s;
}

@keyframes logoFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ======================================
   KITSPREAD RESET PASSWORD PAGE – FINAL FONT, ALIGNMENT & BUTTON FIX
   ====================================== */

/* 1. Field titles (labels) — match modal font, size, and color */
.reset-page label {
  color: #1c3924; /* forest green to match modal field labels */
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;  /* same as modal label size */
  font-weight: 500;    /* slightly lighter to match modal look */
  text-align: center;  /* center horizontally */
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  display: block;
}

/* Ensure consistent spacing below last field before button */
.reset-page input[type="password"]:last-of-type {
  margin-bottom: 1.25rem;
}

/* 2. Button text should stay forest green on hover (no color flip) */
.reset-page input[type="submit"] {
  background: #bebc7d;
  color: #1c3924;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  width: auto;
  margin-top: 0.5rem;
}

.reset-page input[type="submit"]:hover {
  background: #c9c68a; /* lighter gold hover */
  color: #1c3924;      /* stays forest green */
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(190, 188, 125, 0.35);
}

.reset-page input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(190, 188, 125, 0.45);
}

/* 3. Optional: ensure modal font sizes match exactly across forms */
.reset-page input,
.reset-page label,
.reset-page h2,
.reset-page input[type="submit"] {
  font-family: "Montserrat", sans-serif !important;
}

/* ======================================
   KITSPREAD RESET PASSWORD PAGE — FINAL ALIGNMENT + SPACING FIX
   ====================================== */

/* Ensure the entire form column is perfectly centered */
.reset-page .reset-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center; /* ensures labels + inputs align centrally */
}

/* Labels: forest green, same size as modal, truly centered */
.reset-page label {
  color: #1c3924;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
  width: 100%;
  text-align: center;
}

/* Input fields: centered column, slightly reduced gap between them */
.reset-page input[type="password"] {
  width: 100%;
  max-width: 340px;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 0.6rem; /* tighter spacing between the two fields */
  background-color: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.reset-page input[type="password"]:focus {
  border-color: #1c3924;
  box-shadow: 0 0 0 3px rgba(28, 57, 36, 0.1);
  outline: none;
}

/* Extra space before the Reset Password button */
.reset-page input[type="submit"] {
  margin-top: 1.25rem !important; /* push button lower */
}

/* Keep hover behaviour exactly as modal */
.reset-page input[type="submit"]:hover {
  background: #c9c68a;
  color: #1c3924;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(190, 188, 125, 0.35);
}

/* ================================
   Force-centre Reset Password labels
   + spacing tweaks (final)
   ================================ */

.reset-page .auth-modal-content .reset-form,
.reset-page .auth-modal-content .reset-form * {
  box-sizing: border-box;
}

/* Strongly-target labels in reset form */
.reset-page .auth-modal-content .reset-form label {
  display: block !important;
  width: 100% !important;
  max-width: 340px !important;    /* same width as inputs */
  margin: 0.6rem auto 0.35rem auto !important; /* centered block with vertical spacing */
  text-align: center !important;  /* force center alignment */
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #1c3924 !important;
}

/* Ensure labels do not inherit align-self or float */
.reset-page .auth-modal-content .reset-form label[style] {
  text-align: center !important;
  margin: 0.6rem auto 0.35rem auto !important;
}

/* Inputs: slightly closer together */
.reset-page .auth-modal-content .reset-form input[type="password"] {
  display: block !important;
  margin: 0 0 0.55rem 0 !important;
  padding: 0.75rem !important;
  max-width: 340px !important;
  width: 100% !important;
}

/* Button breathing room */
.reset-page .auth-modal-content .reset-form input[type="submit"] {
  margin-top: 1.5rem !important;
}

/* ======================================
   KITSPREAD INVALID / EXPIRED LINK PAGE
   ====================================== */

.invalid-link-box {
  background: #f8f8f5;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 2.5rem 3rem;
  text-align: center;
  max-width: 420px;
  margin: 5rem auto;
  font-family: "Montserrat", sans-serif;
}

.invalid-link-box h2 {
  color: #1c3924; /* forest green */
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.invalid-link-box p {
  color: #1c3924;
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

/* Request New Link button */
.request-new-link-btn {
  display: inline-block;
  background: #bebc7d;       /* KitSpread gold */
  color: #1c3924;            /* forest green text */
  border: none;
  border-radius: 8px;        /* rounded rectangle */
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;     /* remove underline */
  font-family: "Montserrat", sans-serif;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.request-new-link-btn:hover {
  background: #c9c68a;       /* lighter gold hover */
  color: #1c3924;            /* stays green text */
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(190, 188, 125, 0.35);
}

/* ======================================
   KITSPREAD FORGOT PASSWORD PAGE
   ====================================== */

.forgot-box {
  background: #f8f8f5;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 2.5rem 3rem;
  text-align: center;
  max-width: 420px;
  margin: 5rem auto;
  font-family: "Montserrat", sans-serif;
  animation: fadeUp 0.6s ease both;
}

@keyframes fadeUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.forgot-box h2 {
  color: #1c3924; /* forest green */
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.forgot-box p {
  color: #1c3924;
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

.forgot-box label {
  color: #1c3924;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  display: block;
  text-align: center;
}

.forgot-box input[type="text"] {
  width: 100%;
  max-width: 340px;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 1rem;
  background-color: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.forgot-box input[type="text"]:focus {
  border-color: #1c3924;
  box-shadow: 0 0 0 3px rgba(28, 57, 36, 0.1);
  outline: none;
}

/* Get New Password button */
.forgot-box input[type="submit"] {
  background: #bebc7d;          /* gold */
  color: #1c3924;               /* forest green */
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  margin-top: 1rem;
}

.forgot-box input[type="submit"]:hover {
  background: #c9c68a;          /* lighter gold hover */
  color: #1c3924;               /* stays green text */
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(190, 188, 125, 0.35);
}

/* Logo animation */
.forgot-box .auth-logo {
  width: 100px;
  height: auto;
  margin: 0 auto 0.75rem auto;
  display: block;
  opacity: 0;
  transform: translateY(-10px);
  animation: logoFadeIn 0.6s ease forwards;
  animation-delay: 0.25s;
}

/* ======================================
   KITSPREAD PASSWORD EMAIL SENT MESSAGE
   ====================================== */

.success-box {
  background: #f8f8f5;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 2.5rem 3rem;
  text-align: center;
  max-width: 420px;
  margin: 5rem auto;
  font-family: "Montserrat", sans-serif;
  animation: fadeUp 0.6s ease both;
}

.success-box h2 {
  color: #1c3924;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.success-box p {
  color: #1c3924;
  font-size: 1rem;
}

/* ======================================
   Remove background flash on auth pages
   ====================================== */

/* Only apply to pages using our auth modals */
body.page-template-page-reset-password,
body.page-template-page-forgot-password {
  background: rgba(28, 57, 36, 0.95); /* same forest-green overlay */
  overflow: hidden;
}

/* Hide main site wrapper (header/nav) if present */
body.page-template-page-reset-password #page,
body.page-template-page-forgot-password #page {
  display: none;
}

/* Fade in modal content for seamless transition */
.auth-modal.reset-page,
.auth-modal.reset-page .auth-modal-content {
  animation: modalFadeIn 0.4s ease forwards;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* Extra hardening: ensure full site layout is hidden on auth modals */
body.page-template-page-reset-password #page,
body.page-template-page-reset-password #content,
body.page-template-page-reset-password .site,
body.page-template-page-reset-password header,
body.page-template-page-reset-password footer,
body.page-template-page-reset-password .site-header,
body.page-template-page-reset-password .site-footer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.page-template-page-reset-password {
  background: rgba(28, 57, 36, 0.95) !important;
  overflow: hidden !important;
}

/* ======================================
   KITSPREAD AUTH MODAL (GLOBAL STYLES)
   ====================================== */

.auth-modal.reset-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: rgba(28, 57, 36, 0.95);
}

.auth-modal-content {
  background: #f8f8f5;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 3rem 3rem 2.5rem;
  text-align: center;
  max-width: 420px;
  width: 90%;
  margin: auto;
  font-family: "Montserrat", sans-serif;
  animation: fadeUp 0.6s ease both;
}

.auth-modal-content h2 {
  color: #1c3924;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.auth-modal-content p {
  color: #1c3924;
  margin-bottom: 1.5rem;
}

.auth-logo {
  width: 120px;
  margin-bottom: 1.5rem;
  animation: fadeDown 0.5s ease both;
}

.reset-form label {
  display: block;
  text-align: center;
  color: #1c3924;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.reset-form input[type="password"] {
  display: block;
  margin: 0 auto 1.2rem;
  width: 80%;
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: center;
}

.button-gold {
  background: #d4af37;
  border: none;
  border-radius: 8px;
  color: #1c3924;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.button-gold:hover {
  background: #e8c85d;
  color: #1c3924;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ======================================
   KITSPREAD RESET PASSWORD PAGE - FINAL FIX
   ====================================== */

body.page-template-page-reset-password {
  background: rgba(28, 57, 36, 0.95) !important;
  overflow: hidden !important;
}

body.page-template-page-reset-password #page {
  display: none !important;
}

/* Force the reset page modal into full-screen centered layout */
.auth-modal.reset-page {
  display: flex !important;
  position: fixed !important;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: rgba(28, 57, 36, 0.95) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure the modal content is visually clean */
.auth-modal.reset-page .auth-modal-content {
  background: #f8f8f5 !important;
  color: #1c3924 !important;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  padding: 2.5rem 3rem !important;
  width: 90%;
  max-width: 420px;
  text-align: center;
}

/* Match button and label styling to other auth modals */
.auth-modal.reset-page h2 {
  color: #1c3924 !important;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 0.5rem;
}

.auth-modal.reset-page label {
  color: #1c3924 !important;
  font-weight: 600;
  display: block;
  margin: 1rem 0 0.4rem 0;
}

.auth-modal.reset-page input[type="password"],
.auth-modal.reset-page input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
  color: #1c3924;
}

.auth-modal.reset-page input[type="submit"],
.auth-modal.reset-page .button-gold {
  background: #bebc7d !important;
  color: #1c3924 !important;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  margin-top: 1.25rem;
}

.auth-modal.reset-page input[type="submit"]:hover,
.auth-modal.reset-page .button-gold:hover {
  background: #c9c68a !important;
  transform: translateY(-3px);
}

/* Ensure reset modal is centered and constrained */
.auth-modal.reset-page {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100vh;
  padding: 1.25rem;
  background: rgba(28,57,36,0.95);
}

.auth-modal.reset-page .auth-modal-content {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}