/* ═══════════════════════════════════════════════════════════
   SHIJU PM — DARK LUXURY BLOG
   UPDATED Custom CSS — Zoho Sites Free Plan
   Fixes: Dropdown menu, active nav pill, overall nav styling
   ═══════════════════════════════════════════════════════════
   Paste in: Settings → Visual Editor → Custom CSS
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Josefin+Sans:wght@100;300;400&display=swap');

/* ── VARIABLES ── */
:root {
  --sp-black:      #080808;
  --sp-deep:       #0f0f0f;
  --sp-card:       #191919;
  --sp-border:     #2a2a2a;
  --sp-gold:       #C9A447;
  --sp-gold-light: #E8C96A;
  --sp-gold-dim:   #8a6e2f;
  --sp-white:      #f5f0e8;
  --sp-muted:      #8a8070;
  --sp-text:       #d4cfc6;
}

/* ── BASE ── */
html, body {
  background-color: var(--sp-black) !important;
  color: var(--sp-text) !important;
  font-family: 'Cormorant Garamond', serif !important;
}

body::after {
  content: '' !important;
  position: fixed !important; inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E") !important;
  opacity: 0.03 !important; pointer-events: none !important; z-index: 9990 !important;
}

/* ══════════════════════════════════════════════
   NAVIGATION — MAIN BAR
   (Targets the exact Zoho Sites classes visible
    in the screenshot)
══════════════════════════════════════════════ */

/* Header wrapper */
header,
.header,
[class*="header"],
nav,
[class*="navbar"],
[class*="nav-bar"],
[class*="navigation"] {
  background: rgba(8,8,8,0.97) !important;
  border-bottom: 1px solid var(--sp-border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Site logo text */
[class*="brand"],
[class*="logo"],
[class*="site-name"],
[class*="sitename"] {
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 100 !important;
  font-size: 13px !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
  color: var(--sp-gold) !important;
}

/* ALL nav links — base style */
nav a,
[class*="nav"] a,
[class*="menu"] a,
header a,
[class*="header"] a {
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--sp-muted) !important;
  text-decoration: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  transition: color 0.3s !important;
}

nav a:hover,
[class*="nav"] a:hover,
[class*="menu"] a:hover,
header a:hover {
  color: var(--sp-gold) !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ── REMOVE the pink/purple active pill ── */
nav a.active,
nav li.active > a,
nav a[class*="active"],
nav a[class*="selected"],
nav a[class*="current"],
[class*="menu"] a.active,
[class*="menu"] li.active > a,
[class*="menu-item"].active a,
[class*="nav-item"].active a,
nav li.active a,
nav li.current a,
[class*="nav"] li.active a {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--sp-gold) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Gold underline for active + hover */
nav li a,
[class*="menu"] li a {
  position: relative !important;
}
nav li a::after,
[class*="menu"] li a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important; left: 0 !important;
  width: 0 !important; height: 1px !important;
  background: var(--sp-gold) !important;
  transition: width 0.35s !important;
  display: block !important;
}
nav li a:hover::after,
nav li.active a::after,
nav li.current a::after,
[class*="menu"] li a:hover::after,
[class*="menu"] li.active a::after {
  width: 100% !important;
}

/* ── "MORE" dropdown button ── */
[class*="more"],
[class*="dropdown-toggle"],
button[class*="more"],
a[class*="more"] {
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--sp-muted) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 0 !important;
  padding: 6px 16px !important;
  transition: color 0.3s, border-color 0.3s !important;
}
[class*="more"]:hover,
[class*="dropdown-toggle"]:hover {
  color: var(--sp-gold) !important;
  border-color: var(--sp-gold-dim) !important;
  background: transparent !important;
}

/* Dropdown arrow / caret */
[class*="more"] svg,
[class*="dropdown-toggle"] svg,
[class*="more"] i,
[class*="caret"] {
  color: var(--sp-muted) !important;
  fill: var(--sp-muted) !important;
}

/* ══════════════════════════════════════════════
   DROPDOWN MENU — THE BIG FIX
   (Was showing white — now dark luxury)
══════════════════════════════════════════════ */

/* Dropdown container */
[class*="dropdown-menu"],
[class*="sub-menu"],
[class*="submenu"],
[class*="dropdown"] ul,
nav ul ul,
[class*="menu"] ul ul,
[class*="more-menu"],
[class*="overflow-menu"] {
  background: rgba(10,9,7,0.99) !important;
  background-color: rgb(10,9,7) !important;
  border: 1px solid var(--sp-border) !important;
  border-top: 1px solid var(--sp-gold-dim) !important;
  border-radius: 0 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(201,164,71,0.08) !important;
  -webkit-box-shadow: 0 20px 60px rgba(0,0,0,0.8) !important;
  padding: 12px 0 !important;
  min-width: 200px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Dropdown items */
[class*="dropdown-menu"] li,
[class*="sub-menu"] li,
[class*="submenu"] li,
nav ul ul li,
[class*="more-menu"] li,
[class*="overflow-menu"] li {
  background: transparent !important;
  border-bottom: 1px solid rgba(42,42,42,0.5) !important;
}
[class*="dropdown-menu"] li:last-child,
[class*="sub-menu"] li:last-child,
[class*="submenu"] li:last-child {
  border-bottom: none !important;
}

/* Dropdown links */
[class*="dropdown-menu"] a,
[class*="sub-menu"] a,
[class*="submenu"] a,
nav ul ul a,
[class*="more-menu"] a,
[class*="overflow-menu"] a {
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--sp-muted) !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 14px 24px !important;
  display: block !important;
  transition: color 0.3s, padding-left 0.3s !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Dropdown link hover */
[class*="dropdown-menu"] a:hover,
[class*="sub-menu"] a:hover,
[class*="submenu"] a:hover,
nav ul ul a:hover,
[class*="more-menu"] a:hover,
[class*="overflow-menu"] a:hover {
  color: var(--sp-gold) !important;
  background: rgba(201,164,71,0.05) !important;
  background-color: rgba(201,164,71,0.05) !important;
  padding-left: 32px !important;
}

/* Dropdown triangle/arrow pointer */
[class*="dropdown-menu"]::before,
[class*="sub-menu"]::before {
  border-bottom-color: var(--sp-border) !important;
}

/* ══════════════════════════════════════════════
   PAGE & CONTENT
══════════════════════════════════════════════ */

main,
[class*="page-content"],
[class*="site-content"],
[class*="main-content"],
.content {
  background-color: var(--sp-black) !important;
  margin-top: 80px !important;
}

section,
[class*="section"] {
  background-color: var(--sp-black) !important;
  border-top: 1px solid var(--sp-border) !important;
}
section:nth-child(even),
[class*="section"]:nth-child(even) {
  background-color: var(--sp-deep) !important;
}

h1, h2, h3, h4, h5 {
  font-family: 'Playfair Display', serif !important;
  color: var(--sp-white) !important;
}
h1 { font-size: clamp(36px, 5vw, 72px) !important; font-weight: 900 !important; line-height: 1.0 !important; }
h2 { font-size: clamp(26px, 3.5vw, 44px) !important; font-weight: 700 !important; }
h3 { font-size: 24px !important; font-weight: 700 !important; }
p  { font-family: 'Cormorant Garamond', serif !important; font-size: 18px !important; line-height: 1.9 !important; color: var(--sp-text) !important; }

/* ══════════════════════════════════════════════
   BLOG CARDS
══════════════════════════════════════════════ */
[class*="blog-post"],
[class*="post-card"],
[class*="post-item"],
[class*="article-card"] {
  background: var(--sp-card) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 0 !important;
  transition: border-color 0.4s, transform 0.4s !important;
}
[class*="blog-post"]:hover,
[class*="post-card"]:hover { border-color: var(--sp-gold-dim) !important; transform: translateY(-4px) !important; }
[class*="post-title"], [class*="blog-title"] { font-family: 'Playfair Display', serif !important; color: var(--sp-white) !important; }
[class*="post-category"], [class*="post-tag"] { font-family: 'Josefin Sans', sans-serif !important; font-size: 9px !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: var(--sp-gold) !important; }
[class*="post-meta"], [class*="post-date"] { font-family: 'Josefin Sans', sans-serif !important; font-size: 9px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--sp-muted) !important; }

/* ══════════════════════════════════════════════
   FORMS & INPUTS
══════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: rgba(255,255,255,0.03) !important;
  background-color: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 0 !important;
  color: var(--sp-white) !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 12px !important; letter-spacing: 2px !important;
  padding: 16px 20px !important;
  outline: none !important;
  transition: border-color 0.3s !important;
}
input:focus, textarea:focus { border-color: var(--sp-gold-dim) !important; background: rgba(201,164,71,0.04) !important; }
input::placeholder, textarea::placeholder { color: var(--sp-muted) !important; }

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
button,
[class*="btn"],
[class*="button"],
input[type="submit"] {
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 10px !important; letter-spacing: 4px !important; text-transform: uppercase !important;
  background: var(--sp-gold) !important; background-color: var(--sp-gold) !important;
  color: var(--sp-black) !important;
  border: 1px solid var(--sp-gold) !important;
  border-radius: 0 !important;
  padding: 14px 32px !important;
  transition: background 0.3s !important; cursor: pointer !important;
}
button:hover, [class*="btn"]:hover, input[type="submit"]:hover {
  background: var(--sp-gold-light) !important; background-color: var(--sp-gold-light) !important;
  border-color: var(--sp-gold-light) !important;
}

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
footer,
[class*="footer"] {
  background: var(--sp-deep) !important;
  background-color: var(--sp-deep) !important;
  border-top: 1px solid var(--sp-border) !important;
  color: var(--sp-muted) !important;
}
footer *, [class*="footer"] * {
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 10px !important; letter-spacing: 3px !important; text-transform: uppercase !important;
  color: var(--sp-muted) !important;
}
footer a:hover, [class*="footer"] a:hover { color: var(--sp-gold) !important; }

/* ══════════════════════════════════════════════
   MOBILE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  main, [class*="page-content"] { margin-top: 70px !important; }
  h1 { font-size: 36px !important; }
  h2 { font-size: 26px !important; }
  [class*="dropdown-menu"],
  [class*="sub-menu"] { min-width: 160px !important; }
}



/* ═══════════════════════════════════════════════════════════
   SHIJU PM — WHITE & RED BOLD LUXURY OVERHAUL
   Settings → Code → Custom CSS
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300&family=Playfair+Display:wght@700;900&family=Josefin+Sans:wght@100;300;400;600&display=swap');

/* ══════════════════════════════════════
   GLOBAL RESET (White Base)
══════════════════════════════════════ */
* {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  box-sizing: border-box;
}
body, html {
  background: #FFFFFF !important;
  color: #1a1a1a !important;
  font-family: 'Cormorant Garamond', serif !important;
  scroll-behavior: smooth;
}

/* ══════════════════════════════════════
   1. BLOG PAGE TITLE
══════════════════════════════════════ */
h1.title, .page-title, .blog-title, [class*="blog-header"] h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(52px, 7vw, 90px) !important;
  font-weight: 900 !important;
  color: #121212 !important;
  letter-spacing: -1px !important;
  padding: 100px 48px 40px !important;
  background: #FFFFFF !important;
  border-bottom: 2px solid #121212 !important;
  margin: 0 !important;
}

/* Red underline accent */
h1.title::after, .page-title::after {
  content: '' !important;
  display: block !important;
  width: 80px !important; height: 4px !important;
  background: #D72638 !important; /* Bold Red */
  margin-top: 20px !important;
}

/* ══════════════════════════════════════
   2. MAIN BLOG LAYOUT
══════════════════════════════════════ */
.zs-blog-container, .blog-container, [class*="blog-layout"] {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 60px !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 60px 48px !important;
  background: #FFFFFF !important;
}

/* ══════════════════════════════════════
   3. POSTS — CARD GRID
══════════════════════════════════════ */
.zs-blog-posts, .blog-posts {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* 2-column for better readability on white */
  gap: 30px !important;
}

/* ── CARD ── */
.zs-blog-post, .blog-post, [class*="post-item"] {
  background: #fdfdfd !important;
  border: 1px solid #e0e0e0 !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.zs-blog-post:hover {
  border-color: #D72638 !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.05) !important;
  transform: translateY(-8px) !important;
}

/* Red side-accent on hover */
.zs-blog-post::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 0 !important; height: 100% !important;
  background: #D72638 !important;
  transition: width 0.3s !important;
  z-index: 5 !important;
}
.zs-blog-post:hover::before {
  width: 4px !important;
}

/* ── THUMBNAIL ── */
[class*="post-image"], .zs-post-image {
  height: 240px !important;
  background: #f0f0f0 !important;
  overflow: hidden !important;
}
.zs-blog-post img {
  filter: grayscale(100%) brightness(1) !important; /* Editorial look */
  transition: filter 0.5s, transform 0.8s !important;
}
.zs-blog-post:hover img {
  filter: grayscale(0%) brightness(1.05) !important;
  transform: scale(1.03) !important;
}

/* ── CARD CONTENT ── */
.zs-post-content {
  padding: 30px !important;
}

.zs-post-category {
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  color: #D72638 !important; /* Red Category */
  margin-bottom: 12px !important;
}

.zs-post-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 24px !important;
  color: #121212 !important;
  margin-bottom: 15px !important;
}

.zs-post-excerpt {
  color: #555555 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Meta Data */
.zs-post-meta {
  border-top: 1px solid #eeeeee !important;
  padding-top: 20px !important;
  color: #999999 !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 10px !important;
}

/* ══════════════════════════════════════
   4. SIDEBAR — BOLD MINIMALIST
══════════════════════════════════════ */
.zs-blog-sidebar {
  background: #f9f9f9 !important;
  border: 1px solid #eeeeee !important;
  padding: 40px !important;
}

.zs-blog-sidebar h3 {
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 4px !important;
  color: #121212 !important;
  border-bottom: 3px solid #D72638 !important; /* Thick Red Line */
  display: inline-block !important;
  margin-bottom: 25px !important;
}

.zs-blog-sidebar a {
  color: #444 !important;
  font-weight: 400 !important;
  border-bottom: 1px solid #eee !important;
}
.zs-blog-sidebar a:hover {
  color: #D72638 !important;
  padding-left: 10px !important;
}

/* ══════════════════════════════════════
   5. BUTTONS & PAGINATION
══════════════════════════════════════ */
[class*="rss"], a[href*="feed"] {
  background: #121212 !important; /* Black button */
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 600 !important;
}

[class*="rss"]:hover {
  background: #D72638 !important; /* Turns Red on Hover */
}

.zs-pagination a {
  border: 1px solid #121212 !important;
  color: #121212 !important;
}

.zs-pagination a:hover, .zs-pagination .active {
  background: #D72638 !important;
  border-color: #D72638 !important;
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
  .zs-blog-container { grid-template-columns: 1fr !important; }
  .zs-blog-posts { grid-template-columns: 1fr !important; }
}