/* antarvasna.css
   Standalone page CSS for /antarvasna/ - right sidebar layout, tags, responsive.
   Designed to match existing warm theme (browns / cream) while independent
   from global style.css. */

@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@400;700&display=swap');

:root{
  --brand-brown: #7a3f15;
  --accent: #d48b4c;
  --muted: #776050;
  --bg: #fff8f2;
  --card: #fffefb;
  /*--text: #2c1a08;*/
  --tag-bg: #fff0e0;
  --highlight-tag: #ffedd6;
  --max-width: 1400px;
}

/* basic page reset scoped to .antarvasna-page container */
.antarvasna-page, .antarvasna-page * { box-sizing: border-box; font-family: 'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", Arial; color:var(--text); }

/* page container */
.antarvasna-container {
  max-width: var(--max-width);
  margin: 10px auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 7fr 3fr; /* content left, sidebar right */
  gap: 22px;
  background: #fffaf0;
}

/* Breadcrumb */
.antarvasna-breadcrumb { font-size: 1.1rem; color:#666; margin-bottom:8px; padding:4px; }

/* header */
.antarvasna-header h1 {
  font-size: 1.6rem;
  font-weight:700;
  /*color: #3a2a20;*/
  margin: 0 0 8px;
  line-height: 1.2;
}
.antarvasna-intro {
  background: var(--bg);
  border-left: 4px solid var(--accent);
  padding: 12px;
  border-radius: 8px;
  color: #4a2f20;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  line-height: 1.45;
}

/* story grid (single column stacked) */
.story-grid { display:flex; flex-direction:column; gap:7px; }

/* story card */
.story-card {
   display: block;
  gap:12px;
  align-items:flex-start;
  background: var(--card);
  border: 1px solid #efe1ca;
  padding: 14px;
  border-radius:3px;
  margin-top:7px ;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.story-thumb {
 width: 100%;
  height: auto;
  /*max-height: 320px;*/
  object-fit: cover;
  margin: 10px 0;
}
.story-body h2 {
  font-size:1.9rem;
  line-height: 1.2;
  margin:0 0 6px;
  color: #2c1a08;
  font-weight:700;
}
.story-meta { font-size:0.9rem; color:var(--muted); display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.story-excerpt { color:#4b3526; font-size:0.98rem; margin-bottom:10px; line-height:1.45; }

/* tag badges */
.story-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.story-tags a {
  display:inline-block;
  background:var(--tag-bg);
  color:#5b3312;
  padding:4px 9px;
  border-radius:999px;
  font-size:13px;
  text-decoration:none;
  border:1px solid rgba(120,80,40,0.06);
  transition:transform .12s ease, box-shadow .12s ease;
}
.story-tags a:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,0.06); }

/* highlight antarvasna tag specifically (stronger contrast & SEO hint) */
.story-tags a.tag-antarvasna {
  background: linear-gradient(180deg, #fff6ef, #fff0e0);
  border: 1px solid rgba(122,63,21,0.18);
  color: var(--brand-brown);
  font-weight:700;
  box-shadow: 0 1px 0 rgba(122,63,21,0.06);
}

/* trending badge */
.trending-badge {
  display:inline-flex;
  /*gap:6px;*/
  align-items:center;
  /*background:var(--brand-brown);*/
  color:#f7630c;
  /*padding:4px 8px;*/
  font-weight:600;
  font-size:12px;
  
  
    padding: 3px 8px;
    border-radius: 12px; /* rounded pill style */
    margin-top: -10px ;
    vertical-align: middle;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* CTA button */
.story-cta {
  display:inline-block;
  float: right;
  background:var(--brand-brown);
  color:white;
  padding:8px 18px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
}

/* pagination */
.antarvasna-pagination { text-align:center; margin-top:22px; display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; background-color:#fffaf0;}
.antarvasna-pagination a, .antarvasna-pagination span { padding:8px 16px; border-radius:8px; border:1px solid #e7d4bf; text-decoration:none; color:var(--text); background:#fff; }
.antarvasna-pagination a.active { background:#ca6524; color:#fff; border-color:#ca6524; pointer-events:none; }

/* sidebar */
.antarvasna-sidebar {
  background: #fffaf0;
  padding:12px;
  border-radius:5px;
  border:1px solid #efe1ca;
  position:relative;
  top:0;
}

/* Container */
.antarvasna-intro {
  background: linear-gradient(90deg, #fff6ef 0%, #fff0e0 100%);
  border-left: 4px solid var(--accent);
  padding: 20px 22px;
  border-radius: 12px;
  color: var(--text);
  margin: 20px 0;
  box-shadow: 0 6px 18px rgba(12,8,6,0.06);
  line-height: 1.6;
  font-size: 1rem;
  font-weight: 400;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

/* subtle hover lift on desktop to increase engagement */
@media (hover: hover) and (pointer: fine) {
  .antarvasna-intro:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(12,8,6,0.08);
  }
}

/* Heading inside intro (if present) */
.antarvasna-intro h2,
.antarvasna-intro h3 {
  margin: 0 0 8px;
  font-size: 1.12rem;
  color: var(--brand-brown);
  font-weight: 700;
  line-height: 1.15;
}

/* paragraphs and lists */
.antarvasna-intro p {
  margin: 0 0 12px;
  color: #4b3526;
  font-size: 1rem;
}

.antarvasna-intro ul, .antarvasna-intro ol {
  margin: 8px 0 12px 1.2rem;
  color: #4b3526;
  line-height: 1.55;
}

/* links */
.antarvasna-intro a {
  color: var(--brand-brown);
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.18s ease;
}
.antarvasna-intro a:hover,
.antarvasna-intro a:focus {
  color: var(--accent);
  outline: none;
}

/* strong / em emphasis */
.antarvasna-intro strong { color: var(--brand-brown); font-weight:700; }
.antarvasna-intro em { font-style:italic; color: var(--accent); }

/* small 'note' style */
.antarvasna-intro .intro-note {
  display:block;
  margin-top:10px;
  padding:10px 12px;
  background: rgba(122,63,21,0.05);
  border-radius:8px;
  border:1px solid rgba(122,63,21,0.06);
  color: #5d3a24;
  font-size:0.95rem;
}

/* decorative marker (star) — hidden on small screens */
.antarvasna-intro::before {
  content: "★";
  display: inline-block;
  margin-right: 10px;
  color: var(--accent);
  font-size: 1.25rem;
  vertical-align: middle;
  opacity: 0.95;
}
@media (max-width: 900px) {
  .antarvasna-intro::before { display: none; }
}

/* Accessibility: visible focus for keyboard users */
.antarvasna-intro a:focus,
.antarvasna-intro summary:focus {
  outline: 3px solid rgba(122,63,21,0.18);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Optional Read-more (collapsible) styling using <details> */
.antarvasna-intro details {
  margin-top: 10px;
}
.antarvasna-intro summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-brown);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight:700;
  font-size: 0.95rem;
  border: none;
}
.antarvasna-intro summary::-webkit-details-marker { display: none; }
.antarvasna-intro details[open] summary {
  background: var(--accent);
  color: #fff;
}
.antarvasna-intro .more-content {
  margin-top: 12px;
  animation: fadeIn 220ms ease;
  color: #4b3526;
  line-height: 1.6;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }

/* small kicker / metadata inside intro */
.antarvasna-intro .kicker {
  display:inline-block;
  background: #fff6e8;
  color: var(--brand-brown);
  padding: 4px 8px;
  border-radius: 999px;
  font-weight:700;
  font-size:0.86rem;
  margin-bottom:8px;
}

/* mobile adjustments */
@media (max-width: 900px) {
  .antarvasna-intro {
    padding: 14px 14px;
    border-radius: 10px;
    font-size: 0.97rem;
    line-height: 1.5;
  }
  .antarvasna-intro h2 { font-size: 1.02rem; }
  .antarvasna-intro summary {
    font-size: 0.92rem;
    padding: 8px 10px;
  }
  .antarvasna-intro .more-content { font-size: 0.98rem; }
}

/* Print friendliness: keep it readable if printed */
@media print {
  .antarvasna-intro { box-shadow: none; background: transparent; border-left: 4px solid #000; color: #000; }
  .antarvasna-intro summary { display: none; }
}


.footer-section{
    color: white;
}

.footer-bottom{
    color: white;
}



@media (min-width: 992px) {
  .antarvasna-sidebar { position: sticky; top:100px; }
}

/* related links */
.sidebar-section h3 { margin-top:0; font-size:1.05rem; color:var(--brand-brown); margin-bottom:10px; }
.sidebar-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.sidebar-list a { color:var(--brand-brown); font-weight:700; text-decoration:none; }

/* mobile adjustments */
@media (max-width: 900px) {
  .antarvasna-container { grid-template-columns: 1fr; padding:12px; }
  .story-card { flex-direction:column; }
  .story-thumb { width:100%; height:auto; max-height:320px; }
  .antarvasna-sidebar { order: 2; margin-top:18px; }
}

/* small helper visuals */
.kicker { font-size:0.9rem; color:var(--muted); margin-bottom:6px; display:inline-block; }



/* 🔧 Full mobile alignment fix patch */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* stop page from wider overflow */
  width: 100%;
}

/* Make sure header doesn’t extend the viewport */
header, nav {
  width: 100%;
  max-width: 100vw;
  /*overflow-x: hidden;*/
}

/* Fix nav-menu overflow on small screens */
#nav-menu {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

/* Contain absolute search bar correctly */

/* On small screens ensure everything stacks and centers */
@media (max-width: 900px) {
  header, nav, .antarvasna-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    /*padding: 0;*/
  }
  
  

  .antarvasna-container {
    display: block;
  }

  body {
    overflow-x: hidden;
  }
}