/* =========================================
   FFNM & MyBONe 2026 — Custom Styles
   ========================================= */

/* ---- CSS custom properties (RGB channels for Tailwind opacity support) ---- */
:root {
  --background: 255 255 255;
  --foreground: 10 30 94;
  --card: 255 255 255;
  --primary: 10 30 94;
  --primary-foreground: 255 255 255;
  --secondary: 240 244 255;
  --secondary-foreground: 10 30 94;
  --muted: 240 244 255;
  --muted-foreground: 74 85 131;
  --border: 212 218 240;
  --navy: 10 30 94;
  --navy-light: 18 42 110;
  --navy-dark: 6 19 64;
  --gold: 197 160 40;
  --gold-light: 212 175 55;
  --gold-dark: 160 133 32;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

/* ---- Gradient helpers ---- */
.gold-gradient {
  background: linear-gradient(135deg, #eabe2f, #d4af37, #ffe167);
}

.navy-gradient {
  background: linear-gradient(135deg, #061340, #0a1e5e, #122a6e);
}

.text-gold-gradient {
  background: linear-gradient(135deg, #eabe2f, #d4af37, #ffe167);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(6, 19, 64, 0.92) 0%,
    rgba(10, 30, 94, 0.88) 40%,
    rgba(18, 42, 110, 0.82) 100%
  );
}

/* ---- Countdown card ---- */
.countdown-card {
  background: linear-gradient(145deg, rgba(10, 30, 94, 0.95), rgba(18, 42, 110, 0.9));
  border: 1px solid rgba(255, 205, 43, 0.3);
}

/* ---- Animations ---- */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.animate-pulse-gold {
  animation: pulseGold 3s ease-in-out infinite;
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 208, 53, 0.4); }
  50%       { box-shadow: 0 0 20px 10px rgba(197, 160, 40, 0.1); }
}

/* ---- Navbar transparency ---- */
#main-header {
  transition: background 0.3s, box-shadow 0.3s;
}

#main-header.scrolled {
  background-color: rgba(6, 19, 64, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(6, 19, 64, 0.2);
}

/* ---- Mobile menu toggle ---- */
#mobile-menu {
  display: none;
}

#mobile-menu.open {
  display: block;
}

/* ---- FAQ accordion ---- */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

details[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-icon {
  transition: transform 0.2s ease;
}

/* ---- Utility: text-balance ---- */
.text-balance {
  text-wrap: balance;
}

/* ---- Display font helper ---- */
.font-playfair {
  font-family: "Red Rose", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* FORMS
============================================================================================================================== */

.form-control, .form-select {
	font-family: var(--font-title);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.7;
	color: #000;
	border: 3px solid var(--main-color);
	background-color: #FFF;
	border-radius: 20px;
	padding: 10px 15px 10px 15px;

  -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
      -ms-transition: all 0.2s;
          transition: all 0.2s;
}
.form-control.medium, .form-select.medium {
	padding: 5px 15px 5px 15px;
	font-size: 16px;
}

.form-control-sml, .form-select-sml {
	font-family: var(--font-title);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
	color: #000;
	border: 3px solid var(--main-color);
	background-color: #FFF;
	border-radius: 20px;
	padding: 5px 15px 5px 15px;
}



/* BUTTONS
============================================================================================================================== */

.btn-main {
	font-family: var(--font-title);	
	letter-spacing: 0.04em;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	font-size: 16px;
	outline: none;
	color: #FFF;
	padding: 15px 30px 15px 30px;
	border: 0;
	border-radius: 25px;
	background-color: var(--main-color);
	transition: .1s ease-in-out, .4s color;
}
.btn-main:hover { color: #FFF; background-color: var(--sub-color); }
.btn-main:active { transform: translateY(0.15em); }
.btn-main.full { width: 100%; }

.btn-main.green { color: #FFF; background-color: #1a9611; }
.btn-main.green:hover { color: #FFF; background-color: var(--sub-color); }

.play-btn {
	color: #FFF;
	font-size: 100px;
	width: 100px; /* Need a specific value to work */
	border-radius: 50%;
	animation: pulse-gold 2s infinite;
	-webkit-transition: all 0.4s ease-in-out;
		-moz-transition: all 0.4s ease-in-out;
		 -ms-transition: all 0.4s ease-in-out;
		  -o-transition: all 0.4s ease-in-out;
			  transition: all 0.4s ease-in-out;
}
.play-btn:hover { color: #f4a501; animation: pulse-gold 2s infinite; }