/* glass.css – light glass design for Spatiochron.
   Load AFTER style.css. Delete the <link> to glass.css to go back to the old look.
   It only changes colors, shapes and effects; it does not touch your HTML or JS. */

:root{
  --g-text:#0F1B33;
  --g-muted:#4F6286;
  --g-fill:rgba(255,255,255,.45);
  --g-fill-strong:rgba(255,255,255,.65);
  --g-edge:rgba(255,255,255,.85);
  --g-edge-low:rgba(255,255,255,.35);
  --g-shadow:0 10px 40px rgba(30,80,170,.16);
  --g-blue:linear-gradient(180deg,#4B93FF,#1E6FEB);
}

/* ---------- page background: soft blue light behind the glass ---------- */
body{
  background:linear-gradient(160deg,#EAF3FF,#D6E8FF) fixed;
  color:var(--g-text);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(520px circle at 6% 6%, rgba(90,176,255,.65), transparent 70%),
    radial-gradient(600px circle at 96% 42%, rgba(30,111,235,.35), transparent 70%),
    radial-gradient(480px circle at 40% 105%, rgba(191,224,255,.95), transparent 70%);
}

:focus-visible{
  outline:3px solid #5AB0FF;
  outline-offset:2px;
}

/* ---------- header: floating glass pill ---------- */
body header{
  position:sticky;
  top:12px;
  z-index:20;
  width:min(1120px,calc(100% - 24px));
  margin:12px auto 0;
  padding:10px 14px 10px 22px;
  border-radius:999px;
  background:var(--g-fill);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--g-edge);
  box-shadow:var(--g-shadow),inset 0 1px 0 var(--g-edge),inset 0 -1px 0 var(--g-edge-low);
  color:var(--g-text);
}
body header a.logo{
  color:var(--g-text);
  font-size:24px;
}
body header nav a{
  color:var(--g-muted);
  font-weight:500;
  margin-left:22px;
}
body header nav a:hover{
  color:#1E6FEB;
}

/* search box in the header */
body .search-container input{
  background:var(--g-fill-strong);
  border:1px solid var(--g-edge);
  color:var(--g-text);
  box-shadow:inset 0 1px 0 var(--g-edge);
}
body .search-container input::placeholder{
  color:var(--g-muted);
}
body .search-container button{
  margin:0;
  background:var(--g-blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px rgba(30,111,235,.35);
}
body .search-container button:hover{
  background:linear-gradient(180deg,#2F7BF0,#0B3D91);
}

/* dark mode button and user menu (added by your darkMode.js / authNav.js) */
body .dark-mode-toggle{
  color:var(--g-text);
  border-color:var(--g-edge);
  background:var(--g-fill-strong);
}
body .nav-user-btn{
  color:var(--g-text);
}
body .nav-user-btn:hover{
  background:var(--g-fill-strong);
}
body .nav-user-dropdown{
  background:var(--g-fill-strong);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--g-edge);
  border-radius:16px;
}
body .nav-user-dropdown a{
  color:var(--g-text);
}
body .nav-user-dropdown a:hover{
  background:rgba(255,255,255,.6);
}

/* ---------- hero: your photo, tinted blue, inside a rounded glass frame ---------- */
body .hero{
  position:relative;
  overflow:hidden;
  width:min(1120px,calc(100% - 24px));
  height:auto;
  min-height:42vh;
  margin:20px auto 0;
  padding:80px 6%;
  border-radius:36px;
  border:1px solid var(--g-edge);
  box-shadow:var(--g-shadow),inset 0 1px 0 var(--g-edge);
  background-image:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=1400");
  background-size:cover;
  background-position:center;
}
body .hero > *{
  position:relative;
  z-index:1;
}
body .hero h1{
  font-size:clamp(34px,5.2vw,58px);
  line-height:1.12;
  text-shadow:0 2px 20px rgba(5,25,70,.35);
}
body .hero p{
  max-width:640px;
  text-shadow:0 1px 12px rgba(5,25,70,.35);
}

/* ---------- buttons ---------- */
body .btn,
body .read-btn{
  background:var(--g-blue);
  color:#fff;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px rgba(30,111,235,.4);
}
body .btn{
  border-radius:999px;
}
body .read-btn{
  border-radius:999px;
}
body .btn:hover,
body .read-btn:hover{
  background:linear-gradient(180deg,#2F7BF0,#0B3D91);
  color:#fff;
  transform:translateY(-1px);
}

/* ---------- cards (home categories, articles, profile) ---------- */
body .card,
body .article-card,
body .profile-card{
  position:relative;
  background:var(--g-fill);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--g-edge);
  border-radius:24px;
  box-shadow:var(--g-shadow),inset 0 1px 0 var(--g-edge),inset 0 -1px 0 var(--g-edge-low);
}
body .card::before,
body .article-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 32%);
}
body .card:hover,
body .article-card:hover{
  transform:translateY(-6px);
}
body .card img,
body .article-card img{
  width:calc(100% - 20px);
  margin:10px 10px 0;
  border-radius:16px;
}
body .card h2,
body .article-content h2{
  color:var(--g-text);
}
body .card p,
body .article-content p{
  color:var(--g-muted);
}

/* filter buttons on the buildings page */
body .filter-btn{
  background:var(--g-fill);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--g-edge);
  color:var(--g-text);
  box-shadow:inset 0 1px 0 var(--g-edge);
}
body .filter-btn:hover,
body .filter-btn.active{
  background:var(--g-blue);
  border-color:transparent;
  color:#fff;
}

/* form fields on profile / sign in pages */
body .profile-card input[type="text"],
body .profile-card input[type="email"],
body .profile-card input[type="password"],
body .profile-card textarea,
body .profile-card select{
  background:var(--g-fill-strong);
  border:1px solid var(--g-edge);
}

/* ---------- footer: glass bar ---------- */
body footer{
  width:min(1120px,calc(100% - 24px));
  margin:40px auto 24px;
  padding:24px;
  border-radius:24px;
  background:var(--g-fill);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--g-edge);
  box-shadow:var(--g-shadow),inset 0 1px 0 var(--g-edge);
  color:var(--g-muted);
}

/* ---------- dark mode (your existing body.dark-mode switch) ---------- */
body.dark-mode{
  --g-text:#EAF1FF;
  --g-muted:#A5B8DC;
  --g-fill:rgba(255,255,255,.08);
  --g-fill-strong:rgba(255,255,255,.14);
  --g-edge:rgba(255,255,255,.28);
  --g-edge-low:rgba(255,255,255,.08);
  --g-shadow:0 10px 40px rgba(0,0,0,.4);
  background:linear-gradient(160deg,#071126,#0B1B3F) fixed;
  color:var(--g-text);
}
body.dark-mode::before{
  background:
    radial-gradient(520px circle at 6% 6%, rgba(30,111,235,.55), transparent 70%),
    radial-gradient(600px circle at 96% 42%, rgba(11,61,145,.6), transparent 70%),
    radial-gradient(480px circle at 40% 105%, rgba(43,123,255,.35), transparent 70%);
}
body.dark-mode header{
  background:var(--g-fill);
  border:1px solid var(--g-edge);
}
body.dark-mode footer{
  background:var(--g-fill);
  border:1px solid var(--g-edge);
}
body.dark-mode .card,
body.dark-mode .article-card,
body.dark-mode .profile-card{
  background:var(--g-fill);
  box-shadow:var(--g-shadow),inset 0 1px 0 var(--g-edge);
}
body.dark-mode .nav-user-dropdown{
  background:rgba(16,27,54,.85);
}
body.dark-mode .nav-user-dropdown a:hover{
  background:rgba(255,255,255,.1);
}
body.dark-mode .filter-btn{
  background:var(--g-fill);
  border-color:var(--g-edge);
  color:var(--g-text);
}
body.dark-mode .filter-btn:hover,
body.dark-mode .filter-btn.active{
  background:var(--g-blue);
  border-color:transparent;
  color:#fff;
}
body.dark-mode .profile-card input[type="text"],
body.dark-mode .profile-card input[type="email"],
body.dark-mode .profile-card input[type="password"],
body.dark-mode .profile-card textarea,
body.dark-mode .profile-card select{
  background:var(--g-fill-strong);
  border-color:var(--g-edge);
  color:var(--g-text);
}

/* ---------- phones ---------- */
@media (max-width:768px){
  body header{
    border-radius:28px;
    padding:14px 18px;
  }
  body header nav a{
    margin:0 10px;
  }
  body .hero{
    border-radius:28px;
    min-height:56vh;
    padding:56px 6%;
  }
}

@media (prefers-reduced-motion:reduce){
  *{
    transition:none !important;
    animation:none !important;
  }
}


/* =====================================================================
   OTHER PAGES
   ===================================================================== */

/* home page keeps the tall hero; inner pages get a shorter one */
body:has(.category-cards) .hero{
  min-height:68vh;
}

/* ---------- buildings.html / search.html ---------- */
body .filter-bar{
  padding-top:40px;
}

body .search-results-title{
  color:var(--g-text);
}
body .search-results-subtitle{
  color:var(--g-muted);
}
body .results-section h2{
  color:var(--g-text);
  border-bottom-color:var(--g-edge);
}

/* ---------- readarticles.html ("coming soon") ---------- */
body .coming-soon-container{
  padding:48px 32px;
  background:var(--g-fill);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--g-edge);
  border-radius:32px;
  box-shadow:var(--g-shadow),inset 0 1px 0 var(--g-edge);
}
body .coming-soon-container p{
  color:var(--g-muted);
}

/* ---------- about.html ---------- */
body .article-title{
  color:var(--g-text);
}
body .article-description{
  color:var(--g-muted);
}
body .article-card .article-content{
  position:relative;
}

/* ---------- article.html (reading page) ---------- */
body .article-wrapper{
  padding:28px;
  background:var(--g-fill);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--g-edge);
  border-radius:32px;
  box-shadow:var(--g-shadow),inset 0 1px 0 var(--g-edge);
}
body .article-cover-image{
  border-radius:20px;
}
body .article-meta-bar{
  color:var(--g-muted);
}
body .article-meta-bar span{
  background:var(--g-fill-strong);
  border:1px solid var(--g-edge);
  color:var(--g-muted);
}
body .article-state{
  color:var(--g-muted);
}

/* ---------- profile.html ---------- */
body .profile-card button{
  background:var(--g-blue);
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px rgba(30,111,235,.4);
}
body .profile-card button:hover{
  background:linear-gradient(180deg,#2F7BF0,#0B3D91);
}
body .profile-avatar-edit{
  background:var(--g-blue);
  border:1px solid rgba(255,255,255,.55);
}
body .profile-avatar{
  border-color:var(--g-edge);
}
body .profile-card input:disabled{
  background:rgba(255,255,255,.25);
  color:var(--g-muted);
}
body.dark-mode .profile-card input:disabled{
  background:rgba(255,255,255,.05);
  color:var(--g-muted);
}

/* ---------- admin.html ---------- */
body .admin-wrapper{
  padding:28px;
  background:var(--g-fill);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--g-edge);
  border-radius:32px;
  box-shadow:var(--g-shadow),inset 0 1px 0 var(--g-edge);
}
body .admin-tab-btn{
  background:var(--g-fill-strong);
  border:1px solid var(--g-edge);
  color:var(--g-text);
  border-radius:999px;
}
body .admin-tab-btn.active{
  background:var(--g-blue);
  border-color:transparent;
  color:#fff;
}
body .admin-form input,
body .admin-form select,
body .admin-form textarea{
  background:var(--g-fill-strong);
  border:1px solid var(--g-edge);
  border-radius:14px;
  color:var(--g-text);
}
body .admin-form button[type="submit"],
body .manage-edit-btn{
  background:var(--g-blue);
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px rgba(30,111,235,.4);
}
body .admin-form button[type="submit"]:hover,
body .manage-edit-btn:hover{
  background:linear-gradient(180deg,#2F7BF0,#0B3D91);
}
body .admin-cancel-btn{
  background:var(--g-fill-strong);
  border:1px solid var(--g-edge);
  color:var(--g-text);
  border-radius:999px;
}
body .manage-item{
  background:var(--g-fill-strong);
  border:1px solid var(--g-edge);
  border-radius:18px;
}
body .manage-item-sub,
body .manage-loading,
body .manage-empty,
body .admin-denied{
  color:var(--g-muted);
}

/* ---------- building.html (single building page) ---------- */
body .building-wrapper{
  padding:28px;
  background:var(--g-fill);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--g-edge);
  border-radius:32px;
  box-shadow:var(--g-shadow),inset 0 1px 0 var(--g-edge);
}
body .building-image{
  border-radius:20px;
}
body .building-meta{
  color:var(--g-muted);
}
body .building-meta span{
  background:var(--g-fill-strong);
  border:1px solid var(--g-edge);
  color:var(--g-muted);
}
body.dark-mode .building-meta span{
  background:var(--g-fill-strong);
  color:var(--g-muted);
}
body .gallery img{
  border-radius:16px;
  border:1px solid var(--g-edge);
}
body .related-articles a,
body .back-link{
  color:#1E6FEB;
}
body .related-articles a:hover,
body .back-link:hover{
  color:#0B3D91;
}
body.dark-mode .related-articles a,
body.dark-mode .back-link{
  color:#5AB0FF;
}
body .building-state{
  color:var(--g-muted);
}
@media (max-width:768px){
  body .building-wrapper,
  body .article-wrapper,
  body .admin-wrapper{
    padding:18px;
    border-radius:24px;
  }
}