/* ══════════════════════════════════════════════
   GP Extra — styles for new prototype components
   (loaded after components.css)
   ══════════════════════════════════════════════ */

/* ── Hero additions ── */
.hero {
  position: relative; min-height: 520px;
  display: flex; align-items: center; overflow: hidden;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; }
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(14,54,30,.75) 0%, rgba(13,75,77,.45) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 640px; padding: 0 1rem;
  color: #fff;
}
.hero .container { position: relative; z-index: 2; }
.overline, .hero-label {
  display: inline-block; font-size: .75rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.9); padding: .25rem .75rem;
  border-radius: 100px; margin-bottom: 1rem;
}
.hero-title {
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 800; line-height: 1.15; margin-bottom: .75rem;
}
.hero-title span { color: var(--gp-saffron-400, #f0a500); }
.hero-sub {
  font-size: 1rem; opacity: .85;
  margin-bottom: 1.75rem; line-height: 1.6;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-hero-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gp-saffron-500, #c47b00); color: #fff;
  padding: .65rem 1.5rem; border-radius: 8px;
  font-weight: 700; font-size: .9rem;
  text-decoration: none; transition: all .2s;
}
.btn-hero-primary:hover { background: var(--gp-saffron-600, #a66800); color: #fff; transform: translateY(-2px); }
.btn-hero-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.6);
  padding: .65rem 1.5rem; border-radius: 8px;
  font-weight: 600; font-size: .9rem;
  text-decoration: none; transition: all .2s;
}
.btn-hero-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.hero-dots {
  position: absolute; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%); z-index: 3;
  display: flex; gap: .5rem;
}
.hero-dot {
  width: 8px; height: 8px; border-radius: 100px;
  background: rgba(255,255,255,.4); border: none; cursor: pointer;
  padding: 0; transition: all .3s;
}
.hero-dot.active { background: var(--gp-saffron-400, #f0a500); width: 24px; }

/* ── Stats bar additions ── */
.stat-number { font-size: 2rem; font-weight: 800; color: #fff; display: block; }
.stat-label { font-size: .8rem; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .06em; }

/* ── Member card contact ── */
.mc-photo {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--gp-green-100); margin: 0 auto 1rem;
}
.mc-photo img { width: 100%; height: 100%; object-fit: cover; }
.mc-info { text-align: center; }
.mc-role { font-size: .8rem; color: var(--gp-teal-600); font-weight: 600; display: block; margin-bottom: .75rem; }
.mc-contact { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.mc-contact a {
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; color: var(--gp-neutral-500);
  text-decoration: none; justify-content: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mc-contact a:hover { color: var(--gp-green-600); }

/* ── GpInfo stat card (aliases for my class names) ── */
.isc-icon {
  width: 52px; height: 52px; background: var(--gp-green-100);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin: 0 auto .75rem;
}
.isc-val { display: block; font-size: 1.25rem; font-weight: 700; color: var(--gp-green-800); }
.isc-label { display: block; font-size: .75rem; color: var(--gp-neutral-500); margin-top: .2rem; }

/* ── Pop card additions (my class names) ── */
.pc-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.pc-head h3 { font-size: 1rem; font-weight: 700; color: var(--gp-green-800); margin: 0; }
.pc-icon { font-size: 1.5rem; }
.pc-body { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.pc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .4rem 0; border-bottom: 1px solid var(--gp-neutral-100);
  font-size: .85rem;
}
.pc-row:last-child { border-bottom: none; }
.pc-row span { color: var(--gp-neutral-600); }
.pc-row strong { color: var(--gp-green-800); font-weight: 700; }
.pc-link {
  display: inline-block; margin-top: .75rem;
  font-size: .82rem; font-weight: 600;
  color: var(--gp-green-600); text-decoration: none;
}
.pc-link:hover { color: var(--gp-green-800); }

/* ── Itar tabs ── */
.itar-wrap { background: #fff; border-radius: 16px; box-shadow: 0 2px 16px rgba(0,0,0,.08); overflow: hidden; }
.itar-nav {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0;
  background: var(--gp-green-800, #1e5c38); padding: .75rem;
  margin: 0;
}
.itar-btn {
  background: transparent; border: none; border-radius: 8px;
  color: rgba(255,255,255,.7); padding: .6rem 1rem;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  transition: all .2s; font-family: inherit;
}
.itar-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.itar-btn.on { background: rgba(255,255,255,.18); color: #fff; }
.itar-pane { display: none; }
.itar-pane.on { display: block; }
.itar-pane-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  padding: 2rem; align-items: start;
}
@media (max-width: 768px) { .itar-pane-inner { grid-template-columns: 1fr; } }
.itar-icon {
  width: 56px; height: 56px; background: var(--gp-green-100);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--gp-green-700); margin-bottom: 1rem;
}
.itar-content h3 { font-size: 1.1rem; font-weight: 700; color: var(--gp-green-900); margin-bottom: .5rem; }
.itar-content p { font-size: .88rem; color: var(--gp-neutral-600); line-height: 1.7; margin-bottom: 1rem; }
.itar-list { display: flex; flex-direction: column; gap: .5rem; }
.itar-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .75rem; background: var(--gp-neutral-50);
  border-radius: 8px; font-size: .85rem; color: var(--gp-neutral-700);
}
.itar-item i.bi-check-circle-fill { color: var(--gp-green-500); flex-shrink: 0; }
.itar-item span { flex: 1; }
.itar-dl {
  color: var(--gp-green-600); text-decoration: none;
  flex-shrink: 0; font-size: 1rem;
}
.itar-dl:hover { color: var(--gp-green-800); }
.itar-visual img { border-radius: 12px; width: 100%; object-fit: cover; max-height: 340px; }

/* ── Photo gallery preview (home page) ── */
.photo-section-cta { text-align: center; margin-top: 2rem; }
.btn-outline-green {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.75rem; border: 2px solid var(--gp-green-600);
  color: var(--gp-green-700); border-radius: 8px;
  font-weight: 600; font-size: .9rem; text-decoration: none;
  transition: all .2s;
}
.btn-outline-green:hover {
  background: var(--gp-green-700); color: #fff;
  transform: translateY(-2px);
}

/* ── Gallery item overlay (aliases) ── */
.gi-overlay {
  position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,46,26,.8) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s; display: flex; align-items: flex-end; padding: .75rem;
}
.gallery-item:hover .gi-overlay { opacity: 1; }
.gi-caption { color: #fff; font-size: .82rem; font-weight: 600; flex: 1; }
.gi-icon {
  color: #fff; font-size: 1.1rem; background: rgba(255,255,255,.2);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ── Search bar ── */
.gp-search-bar {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1.5px solid var(--gp-neutral-200);
  border-radius: 100px; padding: .55rem 1.25rem;
  max-width: 380px; margin-bottom: 1.5rem;
}
.gp-search-bar i { color: var(--gp-neutral-400); }
.gp-search-bar input {
  border: none; outline: none; background: transparent;
  font-size: .9rem; font-family: inherit; width: 100%;
}

/* ── Contact right (map) ── */
.contact-right { }
.map-container { height: 420px; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.08); }
.map-container iframe { display: block; }

/* ── Government links section (dark green — home page) ── */
.govt-links-section {
  background: linear-gradient(135deg, var(--gp-green-900, #0f3a22) 0%, var(--gp-green-800, #1e5c38) 100%);
  padding: 4rem 0;
}
.govt-links-section .section-title.light h2 { color: #fff; }
.govt-links-section .section-title.light p { color: rgba(255,255,255,.65); }
.govt-links-section .section-title.light .label {
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.9);
}
.govt-links-section .section-title.light::after { background: rgba(255,255,255,.3); }

/* ── Gallery grid (full gallery page) ── */
.full-gallery { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 640px) { .full-gallery { grid-template-columns: repeat(2, 1fr); } }

/* ── Filter pills (gallery) ── */
.gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }

/* ── Identity content ── */
.identity-content { padding: 1rem 0; }
.identity-icon {
  width: 52px; height: 52px; background: var(--gp-green-100);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--gp-green-700); margin-bottom: 1rem;
}
.identity-content h3 { font-size: 1.35rem; font-weight: 700; color: var(--gp-green-800); margin-bottom: .75rem; }
.identity-content p { font-size: .95rem; color: var(--gp-neutral-600); line-height: 1.75; }
.identity-image img { border-radius: 16px; width: 100%; object-fit: cover; }

/* ── Govt links light variant (identity page) ── */
.govt-links-grid.light .govt-link-card {
  background: #fff; border-color: var(--gp-neutral-200);
  color: var(--gp-green-800);
}
.govt-links-grid.light .govt-link-card:hover {
  background: var(--gp-green-50); border-color: var(--gp-green-300);
  color: var(--gp-green-900); transform: translateY(-3px);
}
.govt-links-grid.light .govt-link-card span.glc-name { color: inherit; }

/* ── Financial card color accent fix ── */
.financial-card .fc-icon { background: color-mix(in srgb, var(--color, var(--gp-green-500)) 15%, white); }

/* ── Member name in member-card ── */
.member-card .member-name,
.member-card h3 {
  font-size: .95rem; font-weight: 700;
  color: var(--gp-neutral-900); margin-bottom: .2rem;
}

/* ── Financial grid: 4-column override (view has 4 cards) ── */
.financial-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 900px) {
  .financial-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .financial-grid { grid-template-columns: 1fr !important; }
}

/* ── Gallery item position (gi-overlay uses .gallery-item as parent) ── */
.gallery-item { position: relative; overflow: hidden; border-radius: 12px; }

/* ── Counter animation (data-count attr) ── */
.stat-item .number[data-count] { color: var(--gp-saffron-400); }

/* ── Govt link card icon/name ── */
.glc-icon { font-size: 1.75rem; line-height: 1; }
.glc-name { font-size: .82rem !important; font-weight: 600; }

/* ── Itar panels container (no gap needed here) ── */
.itar-panels { }

/* ══════════════════════════════════════════════
   STICKY HEADER FIX — prevent scroll overlap
   ══════════════════════════════════════════════ */

/* Make topbar sticky too so it stays above the header */
.topbar {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-header) + 1); /* 101 — sits above the header */
}

/* Header now sticks just below the topbar.
   --topbar-h is set by JS below; falls back to 40px (safe estimate). */
.site-header {
  top: var(--topbar-h, 40px);
}

/* Reserve enough room so anchor-link scrolls don't hide behind
   the combined topbar + header block. */
html {
  scroll-padding-top: calc(var(--topbar-h, 40px) + var(--header-height, 80px) + 8px);
}

/* Any element that may be a scroll target (sections, table rows, ids used by modals) */
[id] {
  scroll-margin-top: calc(var(--topbar-h, 40px) + var(--header-height, 80px) + 8px);
}