:root{
   /* =========================
      Brand
   ========================= */
   --purple:#5a1b7a;
   --teal:#1aa1a8;

   /* Soft tints */
   --bg-teal:rgba(26,161,168,.08);
   --bg-purple:rgba(90,27,122,.06);

   /* Typography */
   --text:#0f172a;
   --muted:#6b7280;

   /* =========================
      Layout
      IMPORTANT:
      - Header is fixed.
      - Body must be offset by header height so content isn't hidden.
      - On mobile, header becomes taller (logo row + nav row).
   ========================= */
   --safe-top: env(safe-area-inset-top);
   --header-base-h: 86px;     /* desktop-ish header height */
   --header-extra-h: 0px;     /* added height when nav wraps to 2nd row */
}

/* =========================
   Page base
========================= */
html, body{
   min-height:100%;
}

html{
   background:
      linear-gradient(
         180deg,
         rgba(26,161,168,.10) 0%,
         rgba(90,27,122,.08) 100%
      );
   background-attachment: fixed;
}

body{
   font-family: system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
   color: var(--text);
   font-weight: 450;
   line-height: 1.65;
   text-shadow: 0 1px 0 rgba(255,255,255,.25);

   /* Fixed header offset (single source of truth) */
   padding-top: calc(var(--header-base-h) + var(--header-extra-h) + var(--safe-top));

   background:
      /* dark veil */
      linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)),
      /* light veil */
      linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
      /* image */
      url("background-full.jpg");

   background-repeat: no-repeat;
   background-position: center top;
   background-size: cover;
   background-attachment: fixed;

   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

main{
   flex: 1 0 auto;
}

p{
   font-size: 1.05rem;
}

a{
   color: var(--teal);
}
a:hover{
   color: var(--purple);
}

/* =========================
   Environment banner
========================= */
/*
#envBanner{
   text-align: center;
   font-weight: 900;
   letter-spacing: 0.3em;
   padding: 0.35rem 0;
   font-size: 0.85rem;
   background: repeating-linear-gradient(
      45deg,
      #ffcc00,
      #ffcc00 10px,
      #000 10px,
      #000 20px
   );
   color: #000;
   border-bottom: 2px solid #000;
   z-index: 2000;
}
*/
#envBanner.staging{
   display: block;
}

.env-badge{
   margin-left: auto;
   padding: .35rem .75rem;
   border-radius: .6rem;
   font-weight: 800;
   letter-spacing: .12em;
   font-size: .9rem;
   background: #facc15; /* yellow */
   color: #111;
   box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.env-badge.staging{
   display: inline-block;
}

/* =========================
   Header (fixed)
========================= */
.site-header{
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1040;

   /* Keep header clear of status bar on iOS */
   padding-top: var(--safe-top);

   background-color: #ffffff;

   background-image:
      linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)),
      radial-gradient(1100px 520px at 8% 25%, rgba(26,161,168,.44), transparent 60%),
      radial-gradient(1100px 520px at 92% 0%, rgba(90,27,122,.42), transparent 58%),
      url("background-header.jpg");

   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;

   border-bottom: 1.5px solid rgba(0,0,0,.12);
   box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.brand-mark{
   height: 50px;
   width: auto;
   display: block;
}

/* Logo nudge (single rule only) */
.site-header .brand-mark{
   margin-top: 20px;
}

.nav-desktop-only{
   display: none;
}
@media (min-width: 992px){
   .nav-desktop-only{
      display: list-item;
   }
}

/* Journal: align selection checkbox neatly with card header text */
#jList .form-check-input{
   margin-top: 0.35rem;
}
@media (max-width: 767px){
   #jList .form-check-input{
      margin-top: 0.25rem;
   }
}

.btn-auth.is-locked{
   opacity: .45;
   filter: grayscale(0.2);
}

.btn-auth.is-locked::after{
   content: "  🔒";
   opacity: .9;
   font-size: 0.95em;
}

/* =========================
   Journal checkboxes
========================= */
#jList .form-check-input{
   width: 1.15em;
   height: 1.15em;
   border: 2px solid rgba(26,161,168,.65); /* teal, visible */
   background-color: rgba(255,255,255,.95);
}

#jList .form-check-input:checked{
   background-color: var(--teal);
   border-color: var(--teal);
}

#jList .form-check-input:focus{
   box-shadow: 0 0 0 0.15rem rgba(26,161,168,.25);
}

@media (max-width: 767px){
   #jList .form-check-input{
      width: 1.25em;
      height: 1.25em;
   }
}

/* Nav links */
.site-header .nav-link{
   color: rgba(255,255,255,.92);
   font-weight: 600;
   padding: .4rem .7rem;
   border-radius: .7rem;
   transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.site-header .nav-link:hover{
   background: rgba(255,255,255,.14);
   color: #fff;
}

.site-header .nav-link.active,
.site-header .nav-link[aria-current="page"]{
   background: rgba(255,255,255,.86);
   color: #111827;
   box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.55),
      0 2px 10px rgba(0,0,0,.18);
}

/* =========================
   Hero / Sections
========================= */
.hero{
   padding-top: 2.5rem;
   padding-bottom: 2rem;
   background: transparent;
}

.section{
   padding: 2.25rem 0;
}

@media (min-width: 992px){
   .section{
      padding: 4rem 0;
   }
}

/* Subtle readability help on background areas */
.hero,
.section:not(.card-soft){
   text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

/* =========================
   Components
========================= */
.badge-soft{
   background: rgba(26,161,168,.15);
   color: var(--teal);
   padding: .4rem .8rem;
   border-radius: 999px;
   font-weight: 600;
   display: inline-block;
}

/* Cards: tinted glass */
.card-soft{
   background: rgba(255,255,255,.60);
   border-radius: 18px;
   border: 1px solid rgba(255,255,255,.26);
   box-shadow:
      0 14px 34px rgba(0,0,0,.10),
      0 3px 10px rgba(0,0,0,.06);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

/* Text defaults */
.text-muted{
   color: rgba(15, 23, 42, 0.78) !important;
}

main p{
   color: rgba(15, 23, 42, 0.92) !important;
   font-weight: 450 !important;
}

/* Inside cards: normal readability */
.card-soft p{
   color: #111827;
   font-weight: 400;
}
.card-soft .text-muted{
   color: var(--muted) !important;
}

/* Buttons */
.btn-brand{
   background: linear-gradient(135deg,var(--purple),var(--teal));
   border: none;
}
.btn-brand:hover{
   opacity: .95;
}

/* =========================
   Footer
========================= */
.site-footer{
   margin-top: auto;
   position: static;
   width: 100%;
}

.footer{
   padding: 2rem 0;
   border-top: 1px solid rgba(255,255,255,.20);
}

.site-footer,
.site-footer p,
.site-footer .small,
.site-footer .text-muted{
   color: rgba(255,255,255,.95) !important;
   text-shadow: none;
}

.site-footer a{
   color: rgba(255,255,255,0.92) !important;
   font-weight: 500 !important;
   text-decoration: none;
}
.site-footer a:hover{
   color: #ffffff !important;
   text-decoration: underline;
}

/* =========================
   Forms
========================= */
.form-control,
.form-select,
textarea.form-control{
   background-color: rgba(255,255,255,.98);
   border: 1.5px solid rgba(17,24,39,.25);
   border-radius: 0.5rem;
   padding: 0.75rem 0.85rem;
   font-size: 1rem;
   transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder{
   color: #9aa0a6;
   opacity: 1;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus{
   border-color: rgba(26,161,168,.75);
   box-shadow: 0 0 0 0.2rem rgba(26,161,168,.20);
   outline: none;
}

.form-control:disabled,
.form-control[readonly]{
   background-color: #f5f6f8;
   opacity: 1;
}

label{
   font-weight: 500;
   color: #333;
   margin-bottom: 0.35rem;
}

.form-wrap{
   background: rgba(255,255,255,.92);
   border-radius: 0.75rem;
   padding: 1.5rem;
   border: 1px solid rgba(0,0,0,.06);
   box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

/* =========================
   Welcome screen
========================= */
.welcome{
   min-height: 100vh;
   padding: 3rem 0;
}
.welcome-logo{
   width: min(360px, 82vw);
   height: auto;
   display: block;
   margin: 0 auto;
}

/* =========================
   Mobile header behaviour
   - Nav sits on second row (taller header)
   - Increase body offset so content never hides under header
========================= */
@media (max-width: 991.98px){
   :root{
      --header-extra-h: 54px; /* compensates for the second row of nav tabs */
   }

   .nav-tabs-compact{
      width: 100%;
      display: flex;
      flex-direction: row;
      gap: .35rem;
      margin-top: .5rem;
   }

   .nav-tabs-compact .nav-item{
      flex: 1 1 0;
   }

   .nav-tabs-compact .nav-link{
      text-align: center;
      padding: .55rem .4rem;
      border-radius: .65rem;

      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.20);

      color: rgba(255,255,255,.92);
      font-weight: 700;
      line-height: 1.1;
   }

   .nav-tabs-compact .nav-link.active,
   .nav-tabs-compact .nav-link[aria-current="page"]{
      background: rgba(255,255,255,.88);
      border-color: rgba(255,255,255,.55);
      color: #111827;
      box-shadow: 0 2px 10px rgba(0,0,0,.18);
   }
}

/* =========================
   Images
========================= */
.hero-profile{
   max-width: 220px;
   width: 100%;
   height: auto;
}
@media (min-width: 992px){
   .hero-profile{
      max-width: 260px;
   }
}

.profile-image{
   max-width: 100%;
   width: 220px;
   height: auto;
   border-radius: 14px;
   cursor: pointer;
   box-shadow: 0 10px 25px rgba(0,0,0,.15);
   transition: transform .2s ease, box-shadow .2s ease;
}
.profile-image:hover{
   transform: scale(1.02);
   box-shadow: 0 14px 35px rgba(0,0,0,.2);
}
@media (max-width: 767px){
   .profile-image{
      width: 160px;
      margin-bottom: 1rem;
   }
}

/* =========================
   Video
========================= */
.video-card{
   position: relative;
   width: 100%;
   max-width: 100%;
   overflow: hidden;
   border-radius: 14px;
}
.video-fill{
   display: block;
   width: 100%;
   height: auto;
   max-width: 100%;
}
.video-card video{
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}
.video-sound-toggle{
   position: absolute;
   right: 0.75rem;
   bottom: 0.75rem;

   background: rgba(0,0,0,.55);
   color: #fff;
   border: 1px solid rgba(255,255,255,.18);
   border-radius: 999px;
   padding: 0.45rem 0.9rem;

   font-size: 0.85rem;
   font-weight: 700;
   cursor: pointer;

   backdrop-filter: blur(4px);
   transition: background .15s ease, transform .15s ease;
}
.video-sound-toggle:hover{
   background: rgba(0,0,0,.70);
   transform: scale(1.02);
}
.video-sound-toggle.is-on{
   background: rgba(255,255,255,.85);
   color: #111827;
   border-color: rgba(255,255,255,.40);
}