/* =========================================================
   FULLSCREEN HERO — shared styles for special pages
   Used by: sidekick.php, _password.php, error404.php
   ========================================================= */

/* =========================================================
   Base reset for fullscreen pages
   Uses body:has() to target elements when page contains .template-fullscreen-hero
   ========================================================= */

body:has(.template-fullscreen-hero) {
  overflow: hidden;
  background: #000;
}

body:has(.template-fullscreen-hero) #container {
  background: #000 !important;
  min-height: 100vh;
  display: block;
}

/* =========================================================
   Header — fixed, transparent, white text
   ========================================================= */

body:has(.template-fullscreen-hero) header.js-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100 !important;
  background: transparent !important;
  padding: 2rem 2rem !important;
  padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important;
}

/* White logo - inherits scale from custom.css (0.7 desktop, 1.0 mobile) */
body:has(.template-fullscreen-hero) header span.website-title,
body:has(.template-fullscreen-hero) header h1.website-title,
body:has(.template-fullscreen-hero) header span.website-title.has-logo,
body:has(.template-fullscreen-hero) header h1.website-title.has-logo {
  filter: brightness(0) invert(1) !important;
}

body:has(.template-fullscreen-hero) header span.website-title a,
body:has(.template-fullscreen-hero) header h1.website-title a,
body:has(.template-fullscreen-hero) header .website-title-link {
  color: #fff !important;
}

body:has(.template-fullscreen-hero) header span.website-tagline {
  color: rgba(255,255,255,0.6) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  filter: none !important;
}

/* Hide nav on fullscreen pages (keeps header logo) */
body:has(.template-fullscreen-hero) header nav {
  display: none !important;
}

/* Hide footer */
body:has(.template-fullscreen-hero) footer {
  display: none !important;
}

/* =========================================================
   Hero container — fullscreen
   ========================================================= */

.tt_hero {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000;
  overflow: hidden;
}

.tt_hero__bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Grayscale variant (for password, 404) */
.tt_hero__bg--grayscale {
  filter: grayscale(100%);
}

/* Vignette overlay */
.tt_hero__vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    transparent 20%,
    rgba(0,0,0,0.25) 70%,
    rgba(0,0,0,0.45) 100%
  );
}

.tt_hero__vignette::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 18%);
}

.tt_hero__vignette::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 20%);
}

/* Stronger vignette variant (for 404) */
.tt_hero__vignette--strong {
  background: radial-gradient(
    ellipse 75% 65% at 50% 50%,
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0.6) 100%
  );
}

.tt_hero__vignette--strong::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 22%);
}

.tt_hero__vignette--strong::after {
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 22%);
}

/* =========================================================
   Bottom-left meta (album + architect)
   ========================================================= */

.tt_hero__meta {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 24px;
  z-index: 5;
  opacity: 0.55;
  pointer-events: none;
}

.tt_hero__title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 6px rgba(0,0,0,0.65);
}

.tt_hero__arch {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.65);
}

/* =========================================================
   Centered content container (shared)
   ========================================================= */

.tt_centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  text-align: center;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

/* =========================================================
   SIDEKICK — Maintenance notice
   ========================================================= */

.tt_notice {
  width: 90%;
  max-width: 520px;
}

.tt_notice__heading {
  font-size: clamp(32px, 5.5vw, 56px);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 16px 0;
  color: #fff;
}

.tt_notice__sub {
  font-size: clamp(17px, 2.5vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  margin: 0 auto 36px auto;
  color: rgba(255,255,255,0.85);
  max-width: 480px;
}

.tt_notice__links {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 40px;
}

.tt_notice__links a {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: color 150ms ease, border-color 150ms ease;
}

.tt_notice__links a:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}

/* =========================================================
   PASSWORD — Login form
   ========================================================= */

.tt_login {
  width: 90%;
  max-width: 360px;
}

.tt_login__heading {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 32px 0;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.tt_login__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tt_login__input {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  outline: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 150ms ease, background 150ms ease;
  box-sizing: border-box;
}

.tt_login__input::placeholder {
  color: rgba(255,255,255,0.5);
}

.tt_login__input:focus {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15);
}

.tt_login__error {
  margin-top: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: rgba(200, 60, 60, 0.7);
  border-radius: 3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================================================
   ERROR 404 — Error message
   ========================================================= */

.tt_error {
  width: 90%;
  max-width: 520px;
}

.tt_error__code {
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.tt_error__heading {
  font-size: clamp(32px, 5.5vw, 56px);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 16px 0;
  color: #fff;
}

.tt_error__sub {
  font-size: clamp(17px, 2.5vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  margin: 0 auto 40px auto;
  color: rgba(255,255,255,0.75);
  max-width: 480px;
}

/* =========================================================
   Shared CTA button
   ========================================================= */

.tt_cta {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  padding: 16px 36px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 3px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  cursor: pointer;
}

.tt_cta:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-1px);
}

/* Submit button variant */
button.tt_cta {
  width: 100%;
}

/* =========================================================
   Mobile adjustments
   ========================================================= */

@media (max-width: 520px) {
  body:has(.template-fullscreen-hero) header.js-nav {
    padding: 1rem !important;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
  }

  .tt_notice__links {
    gap: 20px;
  }

  .tt_cta {
    padding: 12px 28px;
  }

  .tt_login__input,
  button.tt_cta {
    padding: 12px 16px;
  }

  .tt_hero__meta {
    bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    left: 16px;
  }
}