/* =============================== */
/* GLOBAL */
/* =============================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #0D1A2D; /* deep navy */
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 80px; /* space for fixed header */
}

/* =============================== */
/* THEME VARIABLES */
/* =============================== */

/* ===============================
   CONTACT PAGE THEME
   =============================== */
   /* ================= CONTACT PAGE ================= */

.contact-theme {
  background: linear-gradient(180deg, #071a2b, #020b14);
  padding: 60px 20px;
}

.contact-card {
  max-width: 820px;
  margin: 0 auto;
}

/* Intro text */
.contact-intro {
  font-size: 16px;
  color: #cfd8e3;
  margin-bottom: 28px;
  line-height: 1.6;
}

/* Form layout */
.contact-form {
  margin-top: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field.full {
  grid-column: 1 / -1;
}

/* Labels */
.form-field label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #0fd7c6;
}

/* Inputs */
.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid #cfd6dd;
  background: #ffffff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
}

/* Focus states */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #0fd7c6;
  box-shadow: 0 0 0 3px rgba(15,215,198,.25);
}

/* Actions */
.form-actions {
  text-align: right;
  margin-top: 30px;
}

/* Button */
.btn.primary {
  background: linear-gradient(135deg, #0fd7c6, #20e3b2);
  color: #003333;
  border: none;
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

/* Mobile */
@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-actions {
    text-align: center;
  }
}

   
   
   /* ===============================
   CONTACT PAGE
================================ */

.contact-theme {
  background: radial-gradient(circle at top, #0f2a3a, #081824);
}

.contact-card {
  max-width: 820px;
  margin: 0 auto;
}

.contact-intro {
  font-size: 18px;
  color: #d7f3f3;
  margin-bottom: 30px;
}

/* FORM LAYOUT */
.contact-form {
  margin-top: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 14px;
  margin-bottom: 6px;
  color: #9ff;
  letter-spacing: 0.5px;
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: none;
  font-size: 16px;
  background: #f4f8f9;
}

.form-field textarea {
  resize: vertical;
}

/* ACTIONS */
.form-actions {
  margin-top: 25px;
  text-align: right;
}

/* MOBILE */
@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-actions {
    text-align: center;
  }
}

   

.theme-contact {
  background:
    radial-gradient(circle at 20% 15%, rgba(0,224,211,.2), transparent 60%),
    radial-gradient(circle at 80% 85%, rgba(255,182,80,.2), transparent 60%),
    linear-gradient(180deg,#061824,#020b14);
}

.contact-form {
  max-width: 520px;
  margin-top: 30px;
}

.contact-form label {
  display: block;
  margin-bottom: 18px;
  font-weight: 600;
  color: #1f2a33;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #cfd8e3;
  font-size: 15px;
}

.contact-form textarea {
  resize: vertical;
}

.contact-submit {
  margin-top: 12px;
  padding: 14px 26px;
  border-radius: 30px;
  border: none;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(90deg,#00e0d3,#3fa9ff);
  color: #003344;
  cursor: pointer;
}

.contact-submit:hover {
  opacity: 0.85;
}


/* ===============================
   THEME: CALLING GALLERY
   =============================== */

.theme-calling {
  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,200,.25), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(100,150,255,.25), transparent 60%),
    linear-gradient(180deg, #061a2b, #020b14);
}

.theme-calling .content-title {
  color: #9fffe9;
}

.theme-calling .content-title::after {
  background: linear-gradient(90deg, #00ffd5, #3fa9ff);
}

.theme-calling .content-subtitle {
  color: #8fd7ff;
}


/* ===============================
   THEME: POINTS OF INTEREST
   =============================== */

.theme-interest {
  background:
    radial-gradient(circle at 20% 20%, rgba(120,180,255,.18), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(255,180,120,.18), transparent 60%),
    linear-gradient(180deg, #0b1a26, #050c13);
}

.theme-interest .content-title {
  color: #dff1ff;
}

.theme-interest .content-title::after {
  background: linear-gradient(90deg, #8fd7ff, #ffd18f);
}

.theme-interest .content-intro {
  color: #e2edf5;
}

/* ================= INTEREST SECTIONS ================= */

.interest-section {
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.18);
}

.interest-section h2 {
  font-size: 26px;
  margin-bottom: 12px;
  color: #9fd8ff;
}

.interest-section p {
  font-size: 16px;
  line-height: 1.6;
  color: #eef4f8;
  margin-bottom: 12px;
}


/* ===============================
   POINTS OF INTEREST – COLOR FIX
   =============================== */

.theme-interest .content-card {
  background: #ffffff;
  color: #1f2a33;
}

/* Main title */
.theme-interest .content-title {
  color: #0b3c5d;
}

.theme-interest .content-title::after {
  background: linear-gradient(90deg, #1da1f2, #00c6a2);
}

/* Intro paragraph */
.theme-interest .content-intro {
  color: #425563;
}

/* Section blocks */
.theme-interest .interest-section {
  border-top: 1px solid #e3e8ee;
}

/* Section headers */
.theme-interest .interest-section h2 {
  color: #1f7fbf;
}

/* Body text */
.theme-interest .interest-section p {
  color: #2e3b45;
}

.theme-interest .interest-section h2::before {
  content: "— ";
  color: #00c6a2;
  font-weight: bold;
}

/* ===============================
   CLUBS PAGE THEME
   =============================== */

.theme-clubs {
  background:
    radial-gradient(circle at 15% 10%, rgba(0,224,211,.18), transparent 60%),
    radial-gradient(circle at 85% 90%, rgba(63,169,255,.18), transparent 60%),
    linear-gradient(180deg,#071a28,#020b14);
}

.theme-clubs .content-card {
  background: #ffffff;
  color: #1f2a33;
}

/* Title */
.theme-clubs .content-title {
  color: #0b3c5d;
}

.theme-clubs .content-title::after {
  background: linear-gradient(90deg,#00e0d3,#3fa9ff);
}

/* Intro */
.theme-clubs .content-intro {
  color: #425563;
}

/* Club cards */
.club-card {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e3e8ee;
}

.club-card h2 {
  color: #007bbf;
  margin-bottom: 6px;
}

.club-location {
  font-size: 15px;
  color: #6b7c88;
  margin-bottom: 10px;
  font-style: italic;
}

.club-card p {
  color: #2e3b45;
  line-height: 1.55;
}


/* ===============================
   THEME: SQUARE DANCE CLOTHING
   =============================== */

.theme-dance {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,120,160,.25), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(255,200,80,.25), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(80,200,255,.25), transparent 60%),
    linear-gradient(180deg, #2a0f1f, #12060d);
}

/* Title accent */
.theme-dance .content-title {
  color: #ffd966;
}

.theme-dance .content-title::after {
  background: linear-gradient(90deg, #ff4f9a, #ffd966);
}

/* Subtitle */
.theme-dance .content-subtitle {
  color: #ffb3d9;
}

/* Callout box */
.theme-dance .content-callout {
  background: linear-gradient(135deg, #ff4f9a, #ffb347);
  color: #000;
}

/* Photo hover */
.theme-dance .photo-grid img:hover {
  box-shadow: 0 20px 45px rgba(255,80,150,.4);
}





/* ============================= */
/* PAGE THEME WRAPPER */
/* ============================= */

.page-theme {
  min-height: 100vh;
  padding-top: 90px; /* clears fixed header */
}

/* ============================= */
/* CONTENT FRAME */
/* ============================= */

.content-section {
  display: flex;
  justify-content: center;
  padding: 80px 30px;
}

.content-card {
  max-width: 1100px;
  width: 100%;
  background: #ffffff;
  color: #222;
  border-radius: 22px;
  padding: 50px 60px;
  box-shadow:
    0 30px 70px rgba(0,0,0,.35);
}

/* ============================= */
/* TYPOGRAPHY */
/* ============================= */

.content-title {
  font-size: 56px;
  margin-bottom: 10px;
}

.content-intro {
  font-size: 18px;
  color: #555;
  margin-bottom: 35px;
}

.content-body h2 {
  margin: 40px 0 15px;
  font-size: 26px;
}

.content-body p {
  font-size: 17px;
  line-height: 1.6;
}

/* ============================= */
/* PHOTO GRID */
/* ============================= */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 20px 0 40px;
}

.photo-grid img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

/* ============================= */
/* CALLOUT */
/* ============================= */

.content-callout {
  margin-top: 40px;
  padding: 22px 28px;
  border-left: 6px solid #2aff00;
  background: #f5f5f5;
  border-radius: 12px;
  font-style: italic;
}

/* ============================= */
/* BASS THEME */
/* ============================= */

.theme-bass {
  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,120,.35), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(0,180,255,.35), transparent 60%),
    linear-gradient(180deg, #0b1f17, #06120e);
}


/* =====================================================
   GLOBAL THEME SYSTEM (DROP-IN)
   ===================================================== */

/* ---------- Base Defaults ---------- */
:root {
  --bg-main: #0D1A2D;
  --bg-gradient: linear-gradient(180deg,#0D1A2D,#081824);
  --accent: #00E0D3;
  --accent-soft: rgba(0,224,211,.35);
  --text-main: #ffffff;
  --text-muted: #cbd6df;
}

/* Apply variables */
body {
  background: var(--bg-gradient);
  color: var(--text-main);
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* =====================================================
   PAGE THEMES (apply ONE class to <body>)
   ===================================================== */

/* Default / Dance */
.theme-ocean {
  --bg-gradient: linear-gradient(180deg,#0D1A2D,#081824);
  --accent: #00E0D3;
  --accent-soft: rgba(0,224,211,.35);
}

/* Bass Fishing */
.theme-fishing {
  --bg-gradient: linear-gradient(180deg,#0b1f17,#05140f);
  --accent: #3cff00;
  --accent-soft: rgba(60,255,0,.35);
}

/* Opel / Antique Car */
.theme-opel {
  --bg-gradient: linear-gradient(180deg,#1a1410,#0f0b08);
  --accent: #ff9f1a;
  --accent-soft: rgba(255,159,26,.35);
}

/* Clothing / Retail */
.theme-clothing {
  --bg-gradient: linear-gradient(180deg,#2a0f1d,#14070e);
  --accent: #ff4df2;
  --accent-soft: rgba(255,77,242,.35);
}

/* =====================================================
   CONTENT PAGE TEMPLATE
   ===================================================== */

.content-page {
  padding: 70px 40px;
  max-width: 1200px;
  margin: auto;
}

.content-hero {
  margin-bottom: 40px;
}

.content-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  letter-spacing: 2px;
  margin: 0 0 12px;
  color: var(--accent);
  text-shadow: 0 0 20px var(--accent-soft);
}

.content-hero p {
  font-size: 20px;
  color: var(--text-muted);
  max-width: 800px;
}

/* =====================================================
   CONTENT BLOCKS
   ===================================================== */

.content-block {
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 30px;
  margin-bottom: 35px;
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.content-block h2 {
  margin-top: 0;
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-soft);
}

.content-block p {
  font-size: 17px;
  line-height: 1.6;
}

/* =====================================================
   IMAGE GRID (photos that flow nicely)
   ===================================================== */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 20px;
  margin-top: 20px;
}

.photo-grid img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 800px) {
  .content-page {
    padding: 50px 20px;
  }

  .content-hero h1 {
    font-size: 42px;
  }
}




a {
  text-decoration: none;
  color: inherit;
}

/* =============================== */
/* NAVIGATION BAR */
/* =============================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000;

  background: #0D1A2D;
  border-bottom: 2px solid #0A516D;
}

/* Inner wrapper keeps content centered & padded */
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;

  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
}

/* Navigation links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-links a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  line-height: 1;
  padding-top: 2px; /* optical alignment fix */
  color: white;
}

.nav-links a:hover {
  color: #00E0D3;
}

/* =============================== */
/* HERO SECTION */
/* =============================== */

.hero {
  display: flex;
  padding: 50px;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,224,211,0.35) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(240,78,152,0.35) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,182,80,0.30) 0%, transparent 60%),
    #0D1A2D;
}

.hero-left,
.hero-right {
  flex: 1;
}

.hero-left {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tim-photo {
  width: 50%;
  border-radius: 12px;
  box-shadow:
    0 0 0 6px rgba(0,224,211,0.55),
    0 12px 28px rgba(0,0,0,0.45);
}

/* =============================== */
/* HERO TITLE */
/* =============================== */

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 70px;
  letter-spacing: 3px;
  margin-bottom: 22px;

  background: linear-gradient(
    90deg,
    #3CFFF0 0%,
    #68D8FF 25%,
    #C289FF 60%,
    #FF6CCF 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 12px rgba(0,255,242,0.65),
    0 0 22px rgba(255,105,180,0.55);

  animation: glowPulse 4s infinite ease-in-out;
}

@keyframes glowPulse {
  0%   { text-shadow: 0 0 6px rgba(0,224,211,0.3); }
  50%  { text-shadow: 0 0 16px rgba(0,224,211,0.6); }
  100% { text-shadow: 0 0 6px rgba(0,224,211,0.3); }
}

.hero-right {
  padding-left: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* =============================== */
/* ABOUT SECTION */
/* =============================== */

.about {
  padding: 90px 50px;
  position: relative;
  overflow: hidden;
}

.about-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 40px;
}

.about-text h2 {
  font-size: 42px;
  color: #00E0D3;
}

.about-text p {
  font-size: 18px;
  line-height: 1.55;
}

/* =============================== */
/* INTERESTS */
/* =============================== */

.interests {
  background: #F4F2EE;
  color: #0D1A2D;
  padding: 25px 40px;
  text-align: center;
}

.interests h2 {
  font-size: 32px;
  color: #00E0D3;
  margin-bottom: 40px;
}

.card-row {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}

.card {
  width: 220px;
  padding: 26px;
  border-radius: 12px;
  color: white;
  transition: transform .3s;
}

.card:nth-child(1) { background: #27C5C1; }
.card:nth-child(2) { background: #D14E63; }
.card:nth-child(3) { background: #F2B544; }
.card:nth-child(4) { background: #5DBBDE; }

.card:hover {
  transform: translateY(-6px);
}

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

.footer {
  background: #0D1A2D;
  padding: 35px 20px;
  text-align: center;
  border-top: 3px solid #0A516D;
}

/* =============================== */
/* RESPONSIVE */
/* =============================== */

@media (max-width: 900px) {
  .nav-inner {
    padding: 0 20px;
  }

  .hero {
    flex-direction: column;
    text-align: center;
  }

  .hero-right {
    padding-left: 0;
    margin-top: 20px;
  }

  .hero-title {
    font-size: 48px;
  }
}

@media (max-width: 600px) {
  .nav-links {
    gap: 16px;
    font-size: 18px;
  }
}
/* ===== PRINT PAGE RESET ===== */
html, body {
  margin: 0;
  padding: 0;
  background: #e6e6e6; /* light gray page background */
}

/* ===== BODY WRAP ===== */
.print-body {
  display: flex;
  justify-content: center;
  padding: 10px; /* SMALL edge breathing room */
}

/* ===== FLYER PAGE ===== */
.print-page {
  background: #ffffff;
  width: 98%;              /* <<< THIS is the big win */
  max-width: 850px;        /* US Letter width feel */
  padding: 12px;           /* VERY tight padding */
  
  /* Subtle shadow — about 15% */
  box-shadow: 
    0 2px 6px rgba(0,0,0,0.15),
    0 0 0 1px rgba(0,0,0,0.05);
}
.print-page img {
  width: 100%;
  height: auto;
  display: block;
}
@media print {
  body {
    background: white;
  }

  .print-body {
    padding: 0;
  }

  .print-page {
    width: 100%;
    max-width: none;
    padding: 0;
    box-shadow: none;
  }
}
body {
  padding-top: 20px;
}