/* =========================================================
   HOME PAGE – BASE LAYOUT (LOCKED)
   Only home page related layout goes here
   ========================================================= */

/* ---------- HOME MAIN AREA ---------- */
#main-content{
  max-width:1200px;
  margin:0 auto;
}

/* ---------- SECTION SPACING ---------- */
.home-section{
  margin-bottom:32px;
}

/* ---------- SEARCH AREA PLACEHOLDER ---------- */
.search-area{
  width:100%;
  margin:20px auto 28px auto;
}

/* ---------- SHOWCASE GRID PLACEHOLDER ---------- */
.showcase-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-bottom:32px;
}

/* ---------- CATEGORY SELECTOR PLACEHOLDER ---------- */
.category-selector{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-bottom:30px;
}

/* ---------- MAIN SERVICES GRID PLACEHOLDER ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  margin-bottom:40px;
}

/* ---------- TRUST ZONE WRAP ---------- */
.trust-zone{
  width:100%;
  padding:30px 18px;
  background:#e8f1ff;
}

/* ---------- RESPONSIVE SAFETY ---------- */
@media(max-width:768px){
  .showcase-grid{
    grid-template-columns:1fr;
  }

  .services-grid{
    grid-template-columns:1fr;
  }
}
/* =========================================================
   HEADER STYLES – HOME PAGE (LOCKED)
   ========================================================= */

/* ---------- HEADER WRAP ---------- */
#site-header{
  width:100%;
  margin-bottom:18px;
}

/* ---------- ANNOUNCEMENT STRIP ---------- */
.announcement-strip{
  width:100%;
  background:linear-gradient(90deg,#1f3c88,#4f8edc);
  color:#ffffff;
  font-size:13px;
  text-align:center;
  padding:6px 10px;
  letter-spacing:0.3px;
}

/* ---------- HEADER BAR ---------- */
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
  background:linear-gradient(135deg,#e8f1ff,#ffffff);
  border-radius:18px;
  margin:14px auto 0 auto;
  max-width:1200px;
  box-shadow:0 10px 24px rgba(31,60,136,0.15);
}

/* ---------- BRAND ---------- */
.brand-name{
  font-size:18px;
  font-weight:700;
  color:#1f3c88;
}

/* ---------- HEADER BUTTONS ---------- */
.planner-btn,
.login-btn{
  padding:8px 18px;
  border-radius:22px;
  background:rgba(255,255,255,0.9);
  border:1px solid #bfd7ff;
  font-weight:600;
  color:#1f3c88;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.9),
    0 6px 16px rgba(79,142,220,0.25);
  cursor:pointer;
}

/* Hover glow (future clickable) */
.planner-btn:hover,
.login-btn:hover{
  box-shadow:
    0 0 12px rgba(79,142,220,0.55),
    0 10px 24px rgba(31,60,136,0.35);
}

/* Disabled look (current state) */
.planner-btn[disabled],
.login-btn[disabled]{
  opacity:0.7;
  cursor:not-allowed;
}