/* ============================================================================
   ahobilam.com — SHARED SITE CHROME (common header / menu / footer)
   ----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for the GREEN header + navigation + footer used by
   every STANDALONE (non-React) HTML page on the site.

   This matches the live React SPA header: the rainbow-green gradient banner
   with the sacred emblem (left) and Lord Vishnu deity (right), the maroon→green
   "www.ahobilam.com" / login strip, a green navigation bar, and the green
   four-column footer. (Task #363, 2026-10-10 — recoloured from the old maroon
   chrome at nvs's request.)

   Do NOT hand-code a per-page header or footer. Instead, in any static page:
     1. <link rel="stylesheet" href="/common/site-chrome.css"> in <head>
     2. <div id="svk-site-header"></div>  right after <body>
     3. <div id="svk-site-footer"></div>  just before </body>
     4. <script src="/common/site-chrome.js"></script> at the end of <body>
   The .js file injects the header + footer markup and wires up login/logout.

   Keep this visually in step with the React SPA header and with the richer
   /menu/ shell (ahobilam-shell.js). See CLAUDE.md → "Shared chrome for
   standalone pages".
   ============================================================================ */

/* --- 1. Rainbow-green gradient banner (emblem · titles · deity) --- */
.svk-header-roof { width: 100%; }
.svk-banner {
  position: relative;
  height: 133px;
  overflow: hidden;
  background: linear-gradient(to right,
    rgb(81,150,90) 0%, rgb(254,163,40) 15%, rgb(255,199,88) 30%,
    rgb(255,234,129) 42%, rgb(214,229,128) 55%, rgb(154,201,89) 65%,
    rgb(75,155,30) 80%, rgb(35,135,9) 90%, rgb(4,114,0) 100%);
}
.svk-emblem { position: absolute; left: 12px; top: 9px; }
.svk-emblem img { width: 102px; height: 115px; object-fit: contain; display: block; }
.svk-deity { position: absolute; right: 0; top: 0; }
.svk-deity img { width: 93px; height: 133px; object-fit: cover; display: block; }
.svk-titles {
  position: absolute; inset: 0; margin: 0 auto; max-width: 860px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding-top: 4px;
}
.svk-om { font-size: 26px; line-height: 1; color: #b91c1c; }
.svk-title {
  font-family: Georgia, serif; font-size: 40px; font-weight: 900;
  font-style: italic; letter-spacing: 1px; line-height: 44px;
  color: #1a237e; text-shadow: rgba(255,255,255,.6) 1px 1px 3px;
}
.svk-sub1 {
  font-family: 'Noto Sans', serif; font-size: 16px; font-weight: 600;
  font-style: italic; line-height: 18px; color: #ed200d;
  text-shadow: rgba(255,255,255,.5) 1px 1px 2px; margin-top: 4px;
}
.svk-sub2 {
  font-family: Georgia, serif; font-size: 13px; font-weight: 800;
  font-style: italic; letter-spacing: 1px; line-height: 15px;
  color: #b513f0; text-shadow: rgba(255,255,255,.8) 0 1px 2px; margin-top: 4px;
}

/* --- 2. www / login strip (maroon → green, matches the React SPA) --- */
.svk-strip {
  position: relative; height: 42px; box-sizing: border-box;
  background: linear-gradient(to right, rgb(139,69,19), rgb(45,90,30));
  padding: 6px 16px; display: flex; align-items: center; justify-content: center;
}
.svk-www {
  color: #fef3c7; text-decoration: none; font-size: 20px; font-weight: 800;
  letter-spacing: 3px; line-height: 30px; text-shadow: rgba(0,0,0,.5) 0 1px 2px;
}
.svk-strip-tools {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px;
}

/* --- 3. Green navigation bar ---
   This flat bar is a FALLBACK only. The real, site-wide navigation is the shared
   JSON megamenu from /menu/ (nav.js adds html.svk-nav-on once it renders); the rule
   below then hides this flat bar so every page shows the single global megamenu. */
html.svk-nav-on .svk-nav-bar { display: none !important; }
.svk-nav-bar {
  background: #1b5e20;
  border-top: 2px solid #d4af37;
  border-bottom: 3px solid #d4af37;
  padding: 6px 16px;
}
.svk-nav-links {
  max-width: 1216px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.svk-nav-btn {
  color: #ffffff; text-decoration: none; font-size: 0.86rem; font-weight: 600;
  padding: 5px 12px; border-radius: 6px; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18); transition: all 0.2s ease;
  cursor: pointer; font-family: inherit; line-height: 1.3;
}
.svk-nav-btn:hover, .svk-nav-btn.active {
  background: #d4af37; color: #1b5e20; border-color: #d4af37;
}
.svk-auth-btn {
  background: #eab308 !important; color: #052e16 !important; font-weight: 700 !important;
  border-color: #eab308 !important;
}
.svk-user-greeting { font-size: 0.85rem; color: #fff; font-weight: 700; padding: 4px 8px; }
.svk-logout-btn {
  background: #15803d !important; color: #fff !important;
  border: 1px solid #86efac !important; cursor: pointer;
}

/* --- 4. Green footer (mirrors the React SPA footer) --- */
.svk-footer-roof {
  background: linear-gradient(to right, #166534, #14532d);
  color: #ecfdf5;
  border-top: 4px solid #d4af37;
  padding: 40px 20px 20px;
  margin-top: 50px;
  font-size: 0.92rem;
}
.svk-footer-inner {
  max-width: 1216px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px; margin-bottom: 30px;
}
.svk-footer-roof h4 {
  color: #fb7185; font-size: 1.1rem; margin-bottom: 14px; font-weight: 700;
  border-bottom: 1.5px solid rgba(255,255,255,0.18); padding-bottom: 6px;
}
.svk-footer-roof p { line-height: 1.65; margin-bottom: 8px; color: #ecfdf5; }
.svk-footer-roof strong { color: #fff; }
.svk-footer-links { list-style: none; padding: 0; margin: 0; }
.svk-footer-links li { margin-bottom: 8px; }
.svk-footer-links a { color: #ecfdf5; text-decoration: none; transition: color 0.2s ease; }
.svk-footer-links a:hover { color: #fff; text-decoration: underline; }
.svk-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15); padding-top: 18px;
  text-align: center; font-size: 0.82rem; color: #d1fae5;
}

/* --- 5. Responsive (mobile) --- */
@media (max-width: 760px) {
  .svk-banner { height: 96px; }
  .svk-emblem img { width: 60px; height: 68px; }
  .svk-deity img { width: 56px; height: 96px; }
  .svk-titles { padding: 0 66px; }
  .svk-title { font-size: 21px; line-height: 26px; letter-spacing: 0; white-space: nowrap; }
  .svk-sub1 { font-size: 11.5px; }
  .svk-sub2 { display: none; }
  .svk-strip { justify-content: flex-start; }
  .svk-www { font-size: 13px; letter-spacing: 1px; }
}
@media (max-width: 480px) {
  .svk-www { display: none; }
  .svk-title { font-size: 18px; }
}