/* Global styles and design tokens used across the site */
:root{
  --brand-dark: #051e14;
  --brand-mid: #08301e;
  --header-height: 72px;
  --accent-gold: #d4af37;
  --accent-green: #2ecc71;
  --muted: #e6f3ea;
  --muted-alt: #9fb7a1;
  --glass: rgba(255,255,255,0.04);
  --bg-deep: #071923;
  --bg-mid: #0b2b24;
}

html, body { height:100%; margin:0; }
body{
  background-color: var(--bg-mid);
  /* background: linear-gradient(180deg,var(--bg-deep), var(--bg-mid)); */
  color: var(--muted);
  font-family: 'Ubuntu', system-ui, sans-serif;
  font-size: medium;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ensure main content sits under the fixed header by default */
/* main { margin-top: var(--header-height) !important; }*/

/* layout helpers and legacy page-level classes moved from base.html */
.page-center { max-width: 970px; margin: 0 auto; }
.fixed-container { position: relative; width: 300px; height: 200px; }
.home-button { margin-top: 8px; }
.arrows { display: inline-block; vertical-align: top; width: 100%; }
.prev_button { display: inline-block; vertical-align: top; width: 50px; margin-top: 8px; }
.next_button { display: inline-block; vertical-align: top; margin-left: calc(100% - 100px); width: 20px; margin-top: 8px; }

/* helpers used elsewhere */
h1 { font-family: "Ubuntu Condensed", Arial, Sans-serif; font-size: 2em; text-transform: uppercase; text-decoration: none; color: var(--accent-gold); margin-top: 1em; margin-bottom: 0.5em; padding-bottom: 0px; }
h1 a:link, h1 a:visited { color: var(--accent-gold); text-decoration: none; }
h1 a:hover { color: #e0c87a; text-decoration: none; }
h2 { font-family: "Ubuntu Condensed", Arial, Sans-serif; text-transform: uppercase; color: var(--accent-gold); font-size: 1.3em; margin-top: 2em; margin-bottom:0.5em; padding-bottom:0px; }

/* constrain CTA icon and slide-inner so slides don't grow past viewport */
.cta .cta-icon { height: 18px; width: 18px; max-width: 18px; max-height: 18px; display:inline-block; object-fit:contain; }
.slide-inner { /* limit inner content so slide snap height remains stable */
  max-height: calc(100vh - var(--header-height) - 64px);
  overflow: auto;
}

/* Footer defaults (moved from base.html) */
footer {
  display: inline-block;
  width: 100%;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  height: 100px;
  font-family: "Ubuntu Condensed", Arial, Sans-serif;
  text-align: center;
  vertical-align: middle;
  font-size: 1.2em;
  /* footer sits on dark background: use brand accent and condensed font for menu-like appearance */
  color: var(--accent-gold);
  padding-top: 0px;
}
.footer_text {
  text-align: center;
  font-family: "Ubuntu Condensed", Arial, Sans-serif;
  vertical-align: middle;
  font-size: 1.2em;
  color: var(--accent-gold);
  padding-top: 10px;
}

/* Footer links should look like menu text */
footer a, .footer_text a {
  color: var(--accent-gold);
  text-decoration: none;
  font-family: "Ubuntu Condensed", Arial, Sans-serif;
  font-weight: 700;
}
footer a:hover, .footer_text a:hover {
  color: #e0c87a;
  text-decoration: underline;
}

/* FAQ heading links should inherit heading styles (not default blue/underlined links) */
h2 a, h2 a:link, h2 a:visited {
  color: var(--accent-gold);
  text-decoration: none;
}
h2 a:hover {
  color: #e0c87a;
  text-decoration: underline;
}

/* Scoped FAQ link styles: make links bold, inherit the surrounding color, and remove underline */
.faq-content a,
.faq-content nav a {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}
.faq-content a:hover,
.faq-content nav a:hover {
  color: var(--accent-gold);
  text-decoration: none;
}

/* Ensure h3 anchors inside FAQ are not rendered as default link color */
.faq-content h3 a,
.faq-content h3 a:link,
.faq-content h3 a:visited {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}
.faq-content h3 a:hover {
  color: var(--accent-gold);
  text-decoration: none;
}

/* Messages styling */
.messages { margin-top: 12px; display:flex; flex-direction:column; gap:8px; }
.message { padding: 10px 12px; border-radius: 8px; font-weight:600; }
.message-success { background: rgba(46, 204, 113, 0.12); color: var(--accent-green); border: 1px solid rgba(46, 204, 113, 0.08); }
.message-error { background: rgba(255, 99, 71, 0.06); color: #ff7b6b; border: 1px solid rgba(255, 99, 71, 0.06); }
.message-info { background: rgba(52, 152, 219, 0.06); color: #8ec7ff; border: 1px solid rgba(52, 152, 219, 0.06); }
/* Flash / dismissable messages */
.messages { max-width: 980px; margin: 1rem auto; display:flex; flex-direction:column; gap:0.5rem; z-index:40; padding: 0 12px; }
.message { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 10px 12px; border-radius:8px; box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.message .message-body { flex:1; color: var(--muted); }
.message-success { background: linear-gradient(180deg, rgba(22,128,87,0.08), rgba(22,128,87,0.04)); border: 1px solid rgba(22,128,87,0.12); color: #0b6b45; }
.message-error { background: linear-gradient(180deg, rgba(220,53,69,0.06), rgba(220,53,69,0.03)); border: 1px solid rgba(220,53,69,0.12); color: #9b1f2b; }
.message-info { background: linear-gradient(180deg, rgba(2,117,216,0.06), rgba(2,117,216,0.03)); border: 1px solid rgba(2,117,216,0.12); color: #063e6b; }
.message-warning { background: linear-gradient(180deg, rgba(255,193,7,0.06), rgba(255,193,7,0.03)); border: 1px solid rgba(255,193,7,0.12); color: #6b5200; }
.close-btn { background: transparent; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 6px; color: inherit; border-radius: 6px; }
.close-btn:focus { outline: 2px solid rgba(0,0,0,0.08); }
.message-hidden { opacity: 0; transform: translateY(-6px); transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; }

/* Profile page styling */
.profile-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding: 1.25rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.03); max-width: 820px; }
.profile-card p { margin: 0.3rem 0; color: var(--muted); }
.profile-card .username { color: var(--accent-gold); font-weight: 800; }
.profile-card form { margin-top: 0.6rem; }
.profile-card label { display:block; margin-top:8px; color: var(--muted-alt); }
.profile-card input[type="text"], .profile-card input[type="password"], .profile-card select { width:98%; padding:10px 12px; margin-top:6px; border-radius:6px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color:var(--muted); }
.profile-card .button { margin-top:10px; padding:10px 14px; background:var(--accent-gold); color:#111; border-radius:8px; font-weight:800; border:0; cursor:pointer; }
.profile-card .button:hover { filter:brightness(0.95); }

/* Auth / login/logout styles */
.page-center .auth-card { max-width: 320px; margin: 2.2rem auto; background: rgba(255,255,255,0.02); padding: 1.6rem; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.03); }
.page-center .auth-card h1 { margin: 0 0 12px 0; font-size: 1.6rem; color: var(--accent-gold); }
.page-center .auth-card label { display:block; margin-top:8px; color: var(--muted-alt); font-weight:600; }
.page-center .auth-card input[type=text], .page-center .auth-card input[type=password] { max-width: 300px; padding:8px 10px; margin-top:6px; border-radius:6px; border:1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.01); color: var(--muted); }
.page-center .auth-card .submit, .page-center .auth-card .button, .page-center .auth-card button.submit { display:inline-block; margin-top:14px; background: linear-gradient(180deg,#ffd27a,#ffb84a); color:#111; padding:10px 14px; border-radius:8px; border: none; font-weight:700; cursor:pointer; text-decoration:none; }
.page-center .auth-card .submit[disabled] { opacity:0.6; cursor:default; }
.page-center .auth-card .auth-help { margin-top:12px; color: var(--muted-alt); }
.page-center .auth-card .auth-help .brand-link { color: var(--accent-gold); font-weight:700; text-decoration:none; }
.page-center .auth-card .error { color:#ff7b6b; margin-top:8px; }

/* Auth hero */
.auth-hero { padding: 3rem 0rem; border-radius: 12px; }
.auth-hero .auth-card { margin: 0 auto; }

/* Provider button icons and spacing */
.provider-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; color:#fff; text-decoration:none; }
.provider-icon { display:block; width:18px; height:18px; }
.provider-label { display:inline-block; }
.provider-google { background: transparent; border: 0px; cursor: pointer;}
.provider-github { background: #24292e; }
.provider-facebook { background: #1877f2; }
.provider-twitter { background: #1da1f2; }
.provider-default { background: #6c757d; }