/* ===============================================================
   SEECHUR AGRO — GLOBAL STYLE & RESPONSIVE CSS
   =============================================================== */

/* --- Base Typography & Colors --- */
:root {
  --text: #f3fff6;
  --muted: #cfe9d8;
  --accent: #2dbb7f;
  --dark: #0b1510;
  --glass: rgba(255, 255, 255, 0.06);
  --card-bg: rgba(20, 30, 26, 0.8);
  --card-border: rgba(255,255,255,0.06);
  --max-width: 1100px;

  /* Home-page tile palette */
  --card-white-bg: #ffffff;
  --card-title: #1d2a21;
  --card-meta: #0f7a52;
  --card-sub: #495a50;
}

/* Reset / base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--text);
  background-color: var(--dark);
  line-height: 1.7;
  overflow-x: hidden;
}

/* container */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 18px;
}

/* Headlines */
h1, h2, h3 { text-shadow: 0 2px 6px rgba(0,0,0,.45); font-weight:600; }
h1 { font-size: 2.4rem; margin-bottom: 12px; color: #e9fff2; }
h2 { font-size: 1.6rem; margin: 18px 0 10px; color: #e9fff2; }
p  { font-size: 1.05rem; margin-bottom: 14px; color: var(--muted); }

/* UNIVERSAL NAVBAR LOGO SIZE FIX */
.brand img,
.site-nav .brand img {
  width: 110px !important;
  height: auto;
}

/* Cards grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

/* card link */
a.card, .card {
  display:block;
  text-decoration:none;
  background: var(--card-white-bg);
  color: var(--card-title);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 24px rgba(0,0,0,.20);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* card hover */
a.card:hover, .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
}

.thumb {
  height:200px; background:#14261f; display:block; overflow:hidden;
}
.thumb img {
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;
}
a.card:hover .thumb img { transform:scale(1.04); }

.body { padding:18px; }

.meta {
  font-size:.9rem;
  color: var(--card-meta);
  margin-bottom:8px;
}

.title {
  font-weight:700;
  font-size:1.22rem;
  line-height:1.3;
  margin:2px 0 10px;
  color: var(--card-title);
}

.excerpt {
  color: var(--card-sub);
  font-size:1rem;
  line-height:1.6;
}

/* DEFAULT article wrapper */
.article-wrap { padding: 32px 18px; }
.article-card { background: transparent; border-radius: 10px; max-width: var(--max-width); margin: 0 auto; }
.article-header { margin-bottom: 18px; }
.article-body { color: var(--muted); line-height:1.8; }
.article-body img { max-width: 100%; border-radius: 10px; display:block; margin: 18px auto; }

.article-body h2, .article-body h3 { color: #eafff4; margin-top: 24px; margin-bottom: 12px; }
.article-body p { margin-bottom: 16px; }
.article-body ul { margin-left: 18px; margin-bottom: 18px; }

/* footer */
footer {
  text-align: center;
  color: #d9ffe6;
  padding: 40px 12px 60px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  font-size: .95rem;
  margin-top: 28px;
}

.btn {
  display:inline-flex;
  align-items:center;
  padding:10px 16px;
  background:rgba(0,0,0,0.25);
  color:#eafff4;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  text-decoration:none;
}
.btn:hover { transform: translateY(-2px); }

/* RESPONSIVE */
@media (max-width: 768px) {
  html { font-size: 15px; }
  .container { padding: 24px 14px; }
  .grid { gap: 18px; }
  .thumb { height: 160px; }
  .brand img { width:84px !important; } /* smaller on mobile */
}

/* -------------------------------------------
   PAGE CONSISTENCY FIXES
   ------------------------------------------- */
.article-body, .post-body, .article-content, .post-content {
  max-width: 980px;
  margin: 20px auto;
  padding: 26px;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  color: #e8f7ee;
}

/* Force article listing headers to remain transparent */
main.container[role="main"], main.container {
  background: transparent !important;
}

/* Fix article meta consistency */
.article-meta, .article-header {
  max-width: var(--max-width);
  margin: 12px auto 22px;
  padding: 0 18px;
}

/* ============================================================
   THE IMPORTANT FIX:
   ARTICLES PAGE TILE FONT COLORS (MATCH HOME PAGE)
   ============================================================ */

#grid .card .title,
.articles-list .card .title {
  color: var(--card-title) !important;
}

#grid .card .excerpt,
.articles-list .card .excerpt {
  color: var(--card-sub) !important;
}

#grid .card .meta,
.articles-list .card .meta {
  color: var(--card-meta) !important;
  opacity: 1 !important;
}

/* ============================================================
   MOBILE NAV: stacking + compact pills (permanent)
   - Mobile-only rules appended here. Desktop unchanged.
   ============================================================ */

/* Original mobile nav rules retained (desktop untouched) */
@media (max-width: 768px) {
  .site-nav { z-index: 9000 !important; position: sticky !important; }

  .menu, #mobileMenu {
    position: fixed !important;
    right: -100% !important;
    top: 0 !important;
    height: 100vh !important;
    width: min(84%, 360px) !important;
    z-index: 100001 !important; /* drawer above overlay */
    transition: right .28s cubic-bezier(.2,.9,.3,1) !important;
    will-change: right, transform;
    gap: 10px !important;
    padding: 12px 12px !important;
  }

  .site-nav.open .menu,
  .site-nav.open #mobileMenu { right: 0 !important; }

  .nav-overlay, #navOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important; /* overlay below drawer */
    background: rgba(0,0,0,0.33) !important;
    backdrop-filter: none !important;
  }

  .nav-toggle, #navToggle { z-index: 100002 !important; position: relative !important; }

  /* slightly smaller pill style so more items fit vertically on small phones */
  .menu a, #mobileMenu a {
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
    line-height: 1.08 !important;
    width: 88% !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }
}

/* END OF ORIGINAL FILE MOBILE RULES (kept for compatibility) */

/* --- SAFE MOBILE NAV FIX (permanent) --- */
@media (max-width: 768px) {

  /* Remove blur & restore solid background for the drawer */
  #mobileMenu, .menu {
    background: #0f2b24 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Fix z-index so menu is above overlay by default (these may be overridden by final block below) */
  #mobileMenu, .menu {
    z-index: 20000 !important;
    pointer-events: auto !important;
    position: fixed !important;
  }

  /* Fix overlay placement */
  #navOverlay, .nav-overlay {
    z-index: 15000 !important;
    pointer-events: auto !important;
    background: rgba(0,0,0,0.35) !important;
  }

  /* Resize pills so full text fits */
  #mobileMenu a, .menu a {
    font-size: 0.95rem !important;
    padding: 12px !important;
  }

  /* Ensure body scroll locks only when menu open */
  body.nav-open {
    overflow: hidden !important;
  }
}

/* === small safe overrides for consistent overlay/menu display === */
@media (max-width: 768px) {
  /* ensure overlay visibility control via .hidden class and [hidden] attr */
  .nav-overlay.hidden,
  #navOverlay.hidden {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  .nav-overlay,
  #navOverlay {
    display: block; /* default block, actual hide controlled by .hidden or [hidden] */
    opacity: 1;
    transition: opacity .18s ease;
  }

  /* ensure that when site-nav has .open the overlay is above page and below drawer */
  .site-nav.open + .nav-overlay,
  .site-nav.open + #navOverlay {
    display: block !important;
    opacity: 1 !important;
  }

  /* body lock class (used by JS) */
  body.nav-open {
    overflow: hidden !important;
    touch-action: none !important;
  }
}

/* -------------------------
   FINAL CONSOLIDATED MOBILE OVERRIDES
   (This block enforces menu above overlay, removes blur, and ensures clicks pass through)
   ------------------------- */
@media (max-width: 768px) {
  /* Ensure the menu is above the overlay and clickable */
  .menu, #mobileMenu {
    z-index: 20010 !important;
    pointer-events: auto !important;
    position: fixed !important;
    right: -100% !important; /* default hidden state; JS will set right:0 when open */
    top: 0 !important;
    height: 100vh !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #0f2b24 !important;
  }

  /* Overlay should sit below the menu but above the page */
  .nav-overlay, #navOverlay {
    z-index: 20000 !important;
    pointer-events: auto !important;
    position: fixed !important;
    inset: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(0,0,0,0.35) !important;
  }

  /* Hidden overlay state */
  .nav-overlay.hidden, #navOverlay.hidden {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* When site-nav has .open, ensure overlay shows (but menu remains above) */
  .site-nav.open + .nav-overlay,
  .site-nav.open + #navOverlay {
    display: block !important;
    opacity: 1 !important;
  }

  /* Ensure body lock class used by JS prevents scroll properly */
  body.nav-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Make pill buttons consistent */
  .menu a, #mobileMenu a {
    width: 88% !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
    line-height: 1.08 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }
}
/* === FINAL FIX: overlay must stay BELOW menu and non-clickable === */
@media (max-width: 768px) {

  /* FORCE overlay to never block menu links */
  #navOverlay,
  .nav-overlay {
    z-index: 100 !important;          /* way below menu */
    pointer-events: none !important;  /* cannot block clicks */
  }

  /* When menu is open, still show visually but not block clicks */
  .site-nav.open + #navOverlay,
  .site-nav.open + .nav-overlay {
    opacity: 1 !important;
    display: block !important;
    pointer-events: none !important; /* key line */
  }

  /* Menu drawer stays ABOVE everything */
  #mobileMenu,
  .menu {
    z-index: 20000 !important;
    pointer-events: auto !important;
    position: fixed !important;
  }
}
/* --- Tile / index uniform card fixes --- */
.grid a.card,
.grid .card {
  display: flex;
  flex-direction: column;
  height: 420px;              /* uniform card height */
  overflow: hidden;
}

.thumb {                       /* thumbnail container */
  height: 180px;               /* fixed thumbnail height */
  min-height: 160px;
  max-height: 200px;
  overflow: hidden;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  background: #f3f7f4;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* crop to fit, avoids oversized images */
  display: block;
}

/* body area of card should take remaining space */
a.card .body, .card .body {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
  flex: 1 1 auto;
}

/* clamp excerpt to fixed lines + show ellipsis */
.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 6;       /* adjust number of lines shown */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--card-sub);
  font-size: .98rem;
  line-height: 1.5;
}

/* ensure title/meta don't push card beyond fixed height */
.title { margin-bottom: 6px; }
.meta { margin-bottom: 8px; }

/* --- Inline article image fixes (article pages) --- */
.article-card img,
.article img,
.article-hero img,
.hero img,
.article-card .pdf-embed iframe {
  max-width: 100%;
  height: auto !important;
  display: block;
  margin: 14px auto;
  border-radius: 10px;
}

/* avoid extremely large inline images from overflowing article column */
.article-card img,
.article img {
  max-height: 520px;
  object-fit: cover;
}

/* Optional: keep long excerpts in article listing consistent on small screens */
@media (max-width: 820px) {
  .grid a.card, .grid .card { height: auto; }
  .thumb { height: 160px; }
  .excerpt { -webkit-line-clamp: 5; }
}

/* End of file */