/*--------------------------------------------------------------------- File Name: mystic-theme.css
 Mystic Purple / Celestial Gold theme for the site chrome (nav + footer),
 ported from sample/stitch_mystic_purple_mayan_tzolkin/code.html
 ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@600;700;800&family=Manrope:wght@400..700&family=Space+Grotesk:wght@500;600&display=swap');

:root {
     --mystic-indigo: #120A21;
     --mystic-surface: rgba(26, 15, 46, 0.8);
     --mystic-primary-container: #2d1b4d;
     --mystic-primary: #d3bcf9;
     --mystic-gold: #e9c349;
     --mystic-gold-dim: #af8d11;
     --mystic-cream: #FAF9F6;
     --mystic-cream-70: rgba(250, 249, 246, 0.7);
     --mystic-cream-60: rgba(250, 249, 246, 0.6);
     --mystic-cream-40: rgba(250, 249, 246, 0.4);
     --mystic-gold-glow: rgba(212, 175, 55, 0.3);
     --mystic-gold-border: rgba(233, 195, 73, 0.15);
     --mystic-gold-border-10: rgba(233, 195, 73, 0.10);
     --mystic-font-headline: 'Epilogue', sans-serif;
     --mystic-font-body: 'Manrope', sans-serif;
     --mystic-font-label: 'Space Grotesk', sans-serif;
     --mystic-background: #110A20;
}

/*--------------------------------------------------------------------- Top Nav ---------------------------------------------------------------------*/

.navbar-mystic {
     width: 100%;
     background-color: rgba(18, 10, 33, 0.85);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--mystic-gold-border);
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
     padding-top: 14px;
     padding-bottom: 14px;
     z-index: 1030;
}

.mystic-nav-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     max-width: 1200px;
}

.mystic-brand {
     display: flex;
     align-items: center;
     margin-right: 0;
}

.mystic-brand-logo {
     width: 42px;
     margin-right: 10px;
}

.mystic-brand-text {
     font-family: var(--mystic-font-headline);
     font-weight: 700;
     font-size: 20px;
     color: var(--mystic-gold);
     letter-spacing: 0.02em;
     text-shadow: 0 0 10px var(--mystic-gold-glow);
}

.mystic-brand-sub {
     font-family: var(--mystic-font-label);
     font-size: 12px;
     color: var(--mystic-cream-60);
     letter-spacing: 0.1em;
     margin-left: 6px;
}

.navbar-mystic .navbar-brand {
     white-space: normal;
     min-width: 0;
}

.navbar-mystic .navbar-toggler {
     border-color: var(--mystic-gold-border);
     flex-shrink: 0;
}

.navbar-mystic .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28233, 195, 73, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-mystic .navbar-nav .nav-link {
     font-family: var(--mystic-font-label);
     font-size: 14px;
     letter-spacing: 0.05em;
     color: var(--mystic-cream-70);
     padding-top: 8px;
     padding-bottom: 8px;
     margin: 0 4px;
     border-bottom: 2px solid transparent;
     border-radius: 4px;
}

.navbar-mystic .navbar-nav .nav-link:hover {
     color: var(--mystic-gold);
     background-color: rgba(255, 255, 255, 0.05);
}

.navbar-mystic .navbar-nav .nav-link.active {
     color: var(--mystic-gold);
     border-bottom-color: var(--mystic-gold);
}

.mystic-login {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 10px;
}

.mystic-login-btn {
     display: inline-block;
     font-family: var(--mystic-font-label);
     font-size: 14px;
     font-weight: 600;
     color: var(--mystic-indigo) !important;
     background-color: var(--mystic-gold);
     padding: 8px 20px;
     border-radius: 9999px;
     box-shadow: 0 0 15px var(--mystic-gold-glow);
}

.mystic-login-btn:hover {
     background-color: #ffe088;
     box-shadow: 0 0 25px var(--mystic-gold-glow);
}

.mystic-login-hint {
     font-family: var(--mystic-font-body);
     font-size: 12px;
     color: var(--mystic-cream-40);
}

.mystic-login-hello {
     font-family: var(--mystic-font-body);
     font-size: 14px;
     color: var(--mystic-cream-70);
}

.mystic-login-link {
     font-family: var(--mystic-font-label);
     font-size: 14px;
     color: var(--mystic-gold) !important;
     text-decoration: underline !important;
     text-underline-offset: 3px;
}

@media (max-width: 575px) {
     .mystic-brand-logo {
          width: 32px;
     }

     .mystic-brand-text {
          font-size: 16px;
     }

     .mystic-brand-sub {
          display: none;
     }
}

@media (max-width: 991px) {
     .navbar-mystic .navbar-collapse {
          background-color: var(--mystic-background);
          border: 1px solid var(--mystic-gold-border);
          border-radius: 12px;
          margin-top: 14px;
          padding: 16px;
     }

     .navbar-mystic .navbar-nav {
          margin-bottom: 10px;
     }
}

/*--------------------------------------------------------------------- Footer ---------------------------------------------------------------------*/

.mystic-footer-section {
     width: 100%;
     float: left;
     background-color: var(--mystic-background);
     border-top: 1px solid var(--mystic-gold-border-10);
     padding-top: 60px;
     padding-bottom: 60px;
}

.mystic-footer-inner {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 30px;
     text-align: center;
}

.mystic-footer-brand {
     font-family: var(--mystic-font-headline);
     font-weight: 700;
     font-size: 24px;
     color: var(--mystic-gold);
     letter-spacing: 0.02em;
}

.mystic-footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 12px 28px;
}

.mystic-footer-links a {
     font-family: var(--mystic-font-body);
     font-size: 15px;
     color: var(--mystic-cream-60) !important;
     text-underline-offset: 4px;
}

.mystic-footer-links a:hover {
     color: var(--mystic-gold) !important;
     text-decoration: underline !important;
}

@media (min-width: 768px) {
     .mystic-footer-inner {
          flex-direction: row;
          justify-content: space-between;
          text-align: left;
     }
}

/*--------------------------------------------------------------------- Copyright bar ---------------------------------------------------------------------*/

.mystic-copyright-section {
     width: 100%;
     float: left;
     background-color: #0d0819;
}

.mystic-copyright-inner {
     padding-top: 18px;
     padding-bottom: 18px;
}

.mystic-copyright-text {
     text-align: center;
     font-family: var(--mystic-font-body);
     font-size: 13px;
     color: var(--mystic-cream-60);
     margin-bottom: 4px;
}

.mystic-copyright-text a {
     color: var(--mystic-gold) !important;
     font-weight: 600;
}

/*--------------------------------------------------------------------- Hero / Date-input card ---------------------------------------------------------------------*/

.mystic-hero {
     position: relative;
     width: 100%;
     float: left;
     overflow: hidden;
     padding-top: 90px;
     padding-bottom: 90px;
}

.mystic-hero-bg {
     position: absolute;
     inset: 0;
     background-image: url(../images/banner-bg.png);
     background-size: cover;
     background-position: center;
     opacity: 0.55;
}

.mystic-hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, rgba(18, 10, 33, 0.55) 0%, rgba(18, 10, 33, 0.85) 55%, var(--mystic-background) 100%);
}

.mystic-hero-stars {
     position: absolute;
     inset: 0;
     background-image: radial-gradient(#ffffff 1px, transparent 1px);
     background-size: 50px 50px;
     opacity: 0.08;
     pointer-events: none;
}

.mystic-hero-inner {
     position: relative;
     z-index: 1;
     max-width: 640px;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
}

.mystic-hero-title {
     font-family: var(--mystic-font-headline);
     font-weight: 700;
     font-size: 40px;
     color: var(--mystic-gold);
     text-shadow: 0 0 20px var(--mystic-gold-glow);
     margin-bottom: 12px;
}

.mystic-hero-subtitle {
     font-family: var(--mystic-font-body);
     font-size: 18px;
     color: var(--mystic-cream-70);
     letter-spacing: 0.02em;
     margin-bottom: 40px;
}

.mystic-hero-card {
     position: relative;
     background: var(--mystic-surface);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid var(--mystic-gold-border);
     border-radius: 16px;
     padding: 36px 32px;
     overflow: hidden;
}

.mystic-hero-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(to right, transparent, var(--mystic-gold), transparent);
     opacity: 0.6;
}

.mystic-hero-card-label {
     font-family: var(--mystic-font-label);
     font-size: 14px;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--mystic-gold);
     margin-bottom: 24px;
}

.mystic-hero-form {
     display: flex;
     flex-direction: column;
     gap: 20px;
}

.mystic-hero-input-label {
     display: block;
     font-family: var(--mystic-font-label);
     font-size: 12px;
     color: var(--mystic-cream-60);
     text-align: left;
     margin-bottom: 8px;
}

.mystic-input-glow {
     border-radius: 10px;
     border: 1px solid var(--mystic-cream-40);
     background: var(--mystic-primary-container);
     transition: box-shadow 0.3s, border-color 0.3s;
     overflow: hidden;
}

.mystic-input-glow:focus-within {
     border-color: var(--mystic-gold);
     box-shadow: 0 0 10px var(--mystic-gold-glow);
}

.mystic-hero-input {
     width: 100%;
     background: transparent;
     border: none;
     color: var(--mystic-cream);
     font-family: var(--mystic-font-body);
     font-size: 16px;
     padding: 14px 16px;
     color-scheme: dark;
}

.mystic-hero-input:focus {
     outline: none;
}

.mystic-hero-input::-webkit-calendar-picker-indicator {
     filter: invert(1) brightness(2);
     cursor: pointer;
}

.mystic-hero-btn {
     width: 100%;
     background-color: var(--mystic-gold);
     color: var(--mystic-indigo);
     font-family: var(--mystic-font-label);
     font-weight: 600;
     font-size: 15px;
     border: none;
     border-radius: 10px;
     padding: 14px;
     box-shadow: 0 0 15px var(--mystic-gold-glow);
}

.mystic-hero-btn:hover {
     background-color: #ffe088;
     box-shadow: 0 0 25px var(--mystic-gold-glow);
}

@media (max-width: 575px) {
     .mystic-hero-title {
          font-size: 28px;
     }

     .mystic-hero {
          padding-top: 60px;
          padding-bottom: 60px;
     }

     .mystic-hero-card {
          padding: 28px 20px;
     }
}