/*
 Theme Name: ForeverVault Base
 Theme URI: https://forevervault.com/
 Author: ForeverVault
 Description: Minimal base theme for STAGING (no third-party deps).
 Version: 0.1.0
 Text Domain: fv-base
*/

/* ===== ForeverVault header/footer polish ===== */
:root{
  --fv-bg:#F3EAFB;           /* soft lavender */
  --fv-surface:#FFFFFF;
  --fv-text:#2A1F3C;         /* deep readable purple */
  --fv-accent:#6A1B9A;       /* brand accent */
  --fv-accent-dark:#3B0D5B;  /* deeper accent */
  --fv-border:#E6DFF5;
  --fv-link:#5B27A6;
}

.container{width:min(1100px,92vw);margin:0 auto}
.site-header{
  background:var(--fv-surface);
  border-bottom:2px solid var(--fv-accent);
  position:sticky;top:0;z-index:20;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 4px}
.site-nav .menu{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.site-nav .menu a{color:var(--fv-text);text-decoration:none;padding:6px 8px;border-radius:8px}
.site-nav .menu a:hover{background:var(--fv-border)}

.main{padding:24px 0}
.site-footer{
  background:var(--fv-surface);
  color:var(--fv-text);           /* readable text */
  border-top:2px solid var(--fv-accent);
  padding:22px 0;margin-top:36px;
}
.site-footer a{color:var(--fv-accent-dark);text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Optional: ensure any faint text in footer blocks is readable */
.site-footer small{opacity:1;color:var(--fv-text)}

/* If the homepage TXT includes an internal mini-footer box, hide it */
.fv-home .mini-footer, .fv-home .copyright, .fv-home .fv-copy { display:none !important; }

/* Prevent stray cards from hugging footer */
.fv-home{margin-bottom:22px}

/* === ForeverVault Sign-In Mobile Fixes === */
@media (max-width: 600px) {

  .fv-auth-login-wrapper,
  .fv-auth-container,
  .fv-auth-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .fv-auth-login-wrapper {
    padding: 0.75rem 0 !important;
    margin: 0 !important;
  }

  .fv-auth-card {
    margin: 0 1rem 1.5rem 1rem !important;
    padding: 1.25rem !important;
    border-radius: 0.75rem;
  }

  .fv-auth-two-column,
  .fv-auth-layout,
  .fv-auth-flex-row {
    display: flex;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem;
  }

  .fv-auth-left,
  .fv-auth-right {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fv-auth-field-group input,
  .fv-auth-field-group select,
  .fv-auth-field-group button,
  form.fv-auth-login-form input,
  form.fv-auth-login-form button {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 1rem;
    padding: 0.75rem 0.85rem;
  }

  .fv-auth-field-group label,
  .fv-auth-helper-text,
  .fv-auth-error-text {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .fv-auth-header h1,
  .fv-auth-title {
    font-size: 1.4rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 0.75rem;
  }

  .fv-auth-subtitle {
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 1rem;
  }

  .fv-auth-security-row,
  .fv-auth-turnstile-otp-row {
    display: flex;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  .cf-turnstile,
  .fv-otp-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fv-auth-footer-links {
    text-align: center;
    margin-top: 0.75rem;
  }

  .fv-auth-footer-links a {
    display: inline-block;
    margin: 0.15rem 0.4rem;
  }
}


/* === ForeverVault Sign-In Mobile Fixes (Staging) === */
@media (max-width: 600px) {

  .fv-auth-login-wrapper,
  .fv-auth-container,
  .fv-auth-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .fv-auth-login-wrapper {
    padding: 0.75rem 0 !important;
    margin: 0 !important;
  }

  .fv-auth-card {
    margin: 0 1rem 1.5rem 1rem !important;
    padding: 1.25rem !important;
    border-radius: 0.75rem;
  }

  .fv-auth-two-column,
  .fv-auth-layout,
  .fv-auth-flex-row {
    display: flex;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem;
  }

  .fv-auth-left,
  .fv-auth-right {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fv-auth-field-group input,
  .fv-auth-field-group select,
  .fv-auth-field-group button,
  form.fv-auth-login-form input,
  form.fv-auth-login-form button {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 1rem;
    padding: 0.75rem 0.85rem;
  }

  .fv-auth-field-group label,
  .fv-auth-helper-text,
  .fv-auth-error-text {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .fv-auth-header h1,
  .fv-auth-title {
    font-size: 1.4rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 0.75rem;
  }

  .fv-auth-subtitle {
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 1rem;
  }

  .fv-auth-security-row,
  .fv-auth-turnstile-otp-row {
    display: flex;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  .cf-turnstile,
  .fv-otp-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fv-auth-footer-links {
    text-align: center;
    margin-top: 0.75rem;
  }

  .fv-auth-footer-links a {
    display: inline-block;
    margin: 0.15rem 0.4rem;
  }
}


/* === ForeverVault Mobile Sign-In: Generic Form Layout Fix === */
@media (max-width: 800px) {

  /* Give the content some breathing room on small screens */
  body .entry-content,
  body main,
  body .site-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box;
  }

  /* Any auth block or card-like wrapper should be full-width */
  .fv-auth-login-wrapper,
  .fv-auth-container,
  .fv-auth-card,
  .fv-auth-wrapper,
  .fv-auth-block {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 1.25rem !important;
    box-sizing: border-box;
  }

  /* If there is a two-column layout around the form, stack it */
  .fv-auth-row,
  .fv-auth-two-column,
  .fv-auth-layout,
  .fv-auth-flex-row {
    display: flex;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem;
  }

  /* Headline and subtitle: center and slightly smaller */
  .fv-auth-header h1,
  .fv-auth-title,
  .fv-auth-heading {
    font-size: 1.4rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 0.75rem;
  }

  .fv-auth-subtitle,
  .fv-auth-intro {
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 1rem;
  }

  /* Make all common login fields full-width */
  body form input[type="text"],
  body form input[type="email"],
  body form input[type="password"],
  body form input[type="tel"],
  body form input[type="number"],
  body form select,
  body form textarea,
  body form button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    display: block;
    font-size: 1rem;
    padding: 0.75rem 0.85rem;
  }

  /* Turnstile + OTP: stack vertically */
  .fv-auth-security-row,
  .fv-auth-turnstile-otp-row {
    display: flex;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  .cf-turnstile,
  .fv-otp-panel {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Footer links like "Forgot password?" "Create account" */
  .fv-auth-footer-links {
    text-align: center;
    margin-top: 0.75rem;
  }

  .fv-auth-footer-links a {
    display: inline-block;
    margin: 0.15rem 0.4rem;
  }
}


/* === ForeverVault Login Page – Mobile Layout Tightening === */
@media (max-width: 900px) {

  /* Make the login wrapper/card use almost the full screen width */
  body.login-page .fv-login-wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin: 8px auto 16px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  body.login-page .fv-card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  /* Slightly reduce space above the title to cut extra gray area */
  body.login-page .fv-card h1,
  body.login-page .fv-card .fv-auth-title {
    margin-top: 4px !important;
  }
}


/* === ForeverVault – My Profile page (staging) === */
/* Apply our standard gradient + centered card using fv-base, not Astra */
body.page-my-profile {
  background: linear-gradient(135deg, #F3EAFB, #EDE7FA);
  min-height: 100vh;
  margin: 0;
}

/* Let the site wrapper be transparent over the gradient */
body.page-my-profile .site,
body.page-my-profile #page,
body.page-my-profile .site-content {
  background: transparent;
  min-height: 100vh;
}

/* Center the content and make it look like our standard card */
body.page-my-profile main,
body.page-my-profile .entry-content {
  max-width: 960px;
  margin: 40px auto 60px;
  padding: 0 16px 40px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(59, 13, 91, 0.12);
}

/* Clean up spacing inside the card */
body.page-my-profile .entry-content > *:first-child {
  margin-top: 0;
}

body.page-my-profile h1,
body.page-my-profile h2 {
  margin-top: 0;
}

/* Mobile: tighter margins & softer card radius */
@media (max-width: 768px) {
  body.page-my-profile main,
  body.page-my-profile .entry-content {
    margin: 20px auto 30px;
    padding: 16px 14px 24px;
    border-radius: 18px;
  }

/* === ForeverVault Vault Pages – Gradient Layout === */

/* Apply lavender gradient to Enter Vault and My Profile pages */
body.page-enter-vault,
body.page-my-profile {
  background: linear-gradient(135deg, #F3EAFB, #EDE7FA);
  min-height: 100vh;
}

/* Let the site wrapper be transparent so the gradient shows on the sides */
body.page-enter-vault .site,
body.page-enter-vault #page,
body.page-enter-vault .site-content,
body.page-my-profile .site,
body.page-my-profile #page,
body.page-my-profile .site-content {
  background: transparent !important;
}

/* Optional: give the main content a centered white card look */
body.page-enter-vault main,
body.page-enter-vault .entry-content,
body.page-my-profile main,
body.page-my-profile .entry-content {
  max-width: 960px;
  margin: 40px auto 60px;
  padding: 0 16px 40px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(59, 13, 91, 0.12);
}

/* Tighter on mobile so it feels like an app view */
@media (max-width: 768px) {
  body.page-enter-vault main,
  body.page-enter-vault .entry-content,
  body.page-my-profile main,
  body.page-my-profile .entry-content {
    margin: 20px auto 30px;
    padding: 16px 14px 24px;
    border-radius: 18px;
  }
/* === ForeverVault Vault Pages – Gradient Layout === */

/* Apply lavender gradient to Enter Vault and My Profile pages */
body.page-enter-vault,
body.page-my-profile {
  background: linear-gradient(135deg, #F3EAFB, #EDE7FA);
  min-height: 100vh;
}

/* Let the site wrapper be transparent so the gradient shows on the sides */
body.page-enter-vault .site,
body.page-enter-vault #page,
body.page-enter-vault .site-content,
body.page-my-profile .site,
body.page-my-profile #page,
body.page-my-profile .site-content {
  background: transparent !important;
}

/* Optional: give the main content a centered white card look */
body.page-enter-vault main,
body.page-enter-vault .entry-content,
body.page-my-profile main,
body.page-my-profile .entry-content {
  max-width: 960px;
  margin: 40px auto 60px;
  padding: 0 16px 40px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(59, 13, 91, 0.12);
}

/* Tighter on mobile so it feels like an app view */
@media (max-width: 768px) {
  body.page-enter-vault main,
  body.page-enter-vault .entry-content,
  body.page-my-profile main,
  body.page-my-profile .entry-content {
    margin: 20px auto 30px;
    padding: 16px 14px 24px;
    border-radius: 18px;
  }
}




/* === ForeverVault Global Layout & Background (site-wide) === */
html, body {
    height: 100%;
    margin: 0;
}

/* Global lavender gradient background for all pages */
body {
    background: linear-gradient(135deg, #F3EAFB, #EDE7FA);
}

/* Make the main wrapper fill the screen and stack header / content / footer */
#page,
.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Push the footer to the bottom of the viewport */
.site-footer {
    margin-top: auto;
}
/* .fv-footer is now fixed, so don't use margin-top: auto */
.fv-footer {
    margin-top: 0 !important;
}

/* === ForeverVault GLOBAL background override (stop per-page redefinitions) === */
html, body {
    height: 100%;
    margin: 0;
}

/* Force single background tint on every page */
body {
    background-color: #E6D8F2 !important;
    background-image: none !important;
}

/* Kill any old ::before gradient overlays used for special pages */
body::before {
    background: none !important;
    content: none !important;
}

/* ForeverVault sticky footer "fluff" – 2025-11-19 */

/* Make the whole page fill the viewport height */

html, body {

    height: 100%;

}



/* Main wrapper: vertical flex layout */

#page,

.site {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}



/* Content stretches to fill space between header and footer */

.site-content,

.content-area {

    flex: 1 0 auto;

}



/* Footer is pushed down when content is short */

.site-footer,

footer#colophon {

    margin-top: auto;

}


/* ForeverVault vault-2 layout padding – keep footer near bottom on short pages */

.fv-vault-app {

    /* Make the vault section tall enough so the footer drops down

       even if there are only a few items on screen */

    min-height: calc(100vh - 200px);

    display: flex;

    flex-direction: column;

}


/* ForeverVault vault-2 layout padding – keep footer near bottom on short pages */

.fv-vault-app {

    /* Make the vault section tall enough so the footer drops down

       even if there are only a few items on screen */

    min-height: calc(100vh - 200px);

    display: flex;

    flex-direction: column;

}


/* ForeverVault vault-2 layout padding – keep footer near bottom on short pages */

.fv-vault-app {

    /* Make the vault section tall enough so the footer drops down

       even if there are only a few items on screen */

    min-height: calc(100vh - 200px);

    display: flex;

    flex-direction: column;

}