/* =====================================================================
   Sangguniang Bayan of Polomolok — Public Site Design System
   Theme colors are CSS variables so they can be overridden inline from
   the database (see includes/header.php) without editing this file.
   ===================================================================== */

:root {
  --primary-color:   #0B1F3A;   /* Deep Navy Blue */
  --secondary-color: #1D4ED8;   /* Royal / Indigo Blue */
  --accent-color:    #D4A017;   /* Gold / Amber */
  --light-bg:        #F5F7FA;
  --text-color:      #1F2937;

  /* Derived tones (computed manually to keep browser support simple) */
  --primary-dark:    #071426;
  --primary-light:   #142c52;
  --accent-light:    #e9c25c;
  --surface:         #FFFFFF;
  --border-subtle:   #E5E9F0;
  --shadow-sm:        0 1px 3px rgba(11,31,58,.06), 0 1px 2px rgba(11,31,58,.08);
  --shadow-md:        0 6px 20px rgba(11,31,58,.08);
  --shadow-lg:        0 14px 40px rgba(11,31,58,.14);
  --radius:           .75rem;
  --radius-lg:        1.25rem;
  --font-sans: "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--text-color);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--primary-color); letter-spacing: -.01em; }

a { color: var(--secondary-color); }
a:hover { color: var(--primary-color); }

::selection { background: var(--accent-color); color: #fff; }

.text-primary-navy { color: var(--primary-color) !important; }
.text-accent { color: var(--accent-color) !important; }
.bg-navy { background-color: var(--primary-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-light-soft { background-color: var(--light-bg) !important; }

.btn-navy {
  background-color: var(--primary-color); border-color: var(--primary-color); color: #fff;
  border-radius: .55rem; font-weight: 600; padding: .6rem 1.4rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-navy:hover { background-color: var(--primary-light); border-color: var(--primary-light); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-accent {
  background-color: var(--accent-color); border-color: var(--accent-color); color: var(--primary-color);
  border-radius: .55rem; font-weight: 700; padding: .6rem 1.4rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-accent:hover { background-color: var(--accent-light); border-color: var(--accent-light); color: var(--primary-color); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-outline-navy {
  border: 1.5px solid rgba(255,255,255,.55); color: #fff; border-radius: .55rem; font-weight: 600; padding: .6rem 1.4rem;
  transition: background-color .15s ease, transform .15s ease;
}
.btn-outline-navy:hover { background-color: rgba(255,255,255,.12); color: #fff; transform: translateY(-1px); }

.btn { border-radius: .55rem; }
.btn-sm { border-radius: .45rem; }

/* Backwards-compat aliases kept from earlier version */
.btn-sbp { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; border-radius: .55rem; font-weight: 600; }
.btn-sbp:hover { background-color: var(--primary-light); border-color: var(--primary-light); color: #fff; }
.text-sbp { color: var(--primary-color) !important; }
.bg-sbp { background-color: var(--primary-color) !important; }

/* ---------------------------------------------------------------------
   Section scaffolding
   --------------------------------------------------------------------- */
.section { padding: 4.5rem 0; }
.section-tight { padding: 3rem 0; }
.section-alt { background: var(--light-bg); }

.section-eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700;
  color: var(--secondary-color); margin-bottom: .5rem; display: inline-block;
}
.section-title { font-size: clamp(1.6rem, 2.4vw, 2.25rem); margin-bottom: .5rem; }
.section-subtitle { color: #667085; font-size: 1rem; max-width: 640px; }
.section-header { margin-bottom: 2.5rem; }

.divider-accent { width: 56px; height: 4px; background: var(--accent-color); border-radius: 2px; margin: .75rem 0 1.25rem; }

/* Fade-in-on-scroll utility (JS toggles .is-visible) */
.fade-in-up { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------
   Top utility bar + Navbar
   --------------------------------------------------------------------- */
.top-bar { background: var(--primary-dark); color: rgba(255,255,255,.85); font-size: .8rem; }
.top-bar a { color: rgba(255,255,255,.85); text-decoration: none; }
.top-bar a:hover { color: #fff; }

.navbar.site-navbar {
  background: var(--primary-color) !important;
  transition: box-shadow .25s ease, padding .25s ease;
  padding-top: .85rem; padding-bottom: .85rem;
}
.navbar.site-navbar.scrolled { box-shadow: var(--shadow-lg); padding-top: .5rem; padding-bottom: .5rem; }
.navbar-brand-text .small { font-size: .68rem; letter-spacing: .06em; opacity: .8; }
.site-navbar .nav-link { color: rgba(255,255,255,.85); font-weight: 500; padding: .5rem .9rem !important; border-radius: .4rem; }
.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: #fff; background: rgba(255,255,255,.08); }
.site-navbar .dropdown-menu { border: 0; box-shadow: var(--shadow-lg); border-radius: .65rem; overflow: hidden; margin-top: .5rem; }
.site-navbar .dropdown-item { padding: .55rem 1.1rem; font-size: .92rem; }
.site-navbar .dropdown-item:active, .site-navbar .dropdown-item:hover { background: var(--light-bg); color: var(--primary-color); }

/* ---------------------------------------------------------------------
   Announcement bar
   --------------------------------------------------------------------- */
.announcement-bar {
  background: linear-gradient(90deg, var(--accent-color), var(--accent-light));
  color: var(--primary-color);
  font-weight: 600;
  font-size: .88rem;
}
.announcement-bar .badge-cat {
  background: var(--primary-color); color: #fff; font-weight: 700; font-size: .68rem;
  padding: .3rem .6rem; border-radius: .3rem; letter-spacing: .04em;
}
.announcement-bar .btn-view {
  background: var(--primary-color); color: #fff; border: 0; font-size: .78rem; font-weight: 600;
  padding: .3rem .8rem; border-radius: .4rem; white-space: nowrap;
}
.announcement-bar .btn-view:hover { background: var(--primary-dark); color: #fff; }
.announcement-marquee { display: flex; align-items: center; gap: .6rem; overflow: hidden; }

/* ---------------------------------------------------------------------
   Hero Carousel
   --------------------------------------------------------------------- */
.hero-carousel { position: relative; }
.hero-carousel .carousel-item {
  height: min(78vh, 640px);
  min-height: 420px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-carousel .carousel-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,31,58,.55) 0%, rgba(11,31,58,.55) 35%, rgba(7,20,38,.92) 100%);
}
.hero-carousel .carousel-item.no-image { background-color: var(--primary-color); }
.hero-carousel .carousel-item.no-image::after { background: linear-gradient(135deg, rgba(11,31,58,.85), rgba(29,78,216,.65)); }

.hero-slide-content {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: flex-end; padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.hero-slide-content .container { max-width: 900px; }
.hero-category-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--accent-color); color: var(--primary-color); font-weight: 700; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .08em; padding: .4rem .85rem; border-radius: 2rem; margin-bottom: 1rem;
}
.hero-slide-content h2 {
  color: #fff; font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.15; margin-bottom: .85rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.hero-slide-content p.hero-desc { color: rgba(255,255,255,.9); font-size: clamp(.95rem, 1.4vw, 1.1rem); max-width: 640px; margin-bottom: 1.4rem; }
.hero-slide-date { color: rgba(255,255,255,.7); font-size: .85rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.hero-carousel .carousel-indicators { margin-bottom: 1.25rem; z-index: 3; }
.hero-carousel .carousel-indicators [data-bs-target] {
  width: 34px; height: 4px; border-radius: 2px; background-color: rgba(255,255,255,.4); opacity: 1; border: 0;
  cursor: pointer;
}
.hero-carousel .carousel-indicators .active { background-color: var(--accent-color); }
.hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next {
  width: 8%; min-width: 44px; z-index: 3; opacity: .55; transition: opacity .2s ease;
}
.hero-carousel .carousel-control-prev:hover, .hero-carousel .carousel-control-next:hover,
.hero-carousel:hover .carousel-control-prev, .hero-carousel:hover .carousel-control-next { opacity: .95; }
.hero-carousel .carousel-control-prev-icon, .hero-carousel .carousel-control-next-icon { width: 2.2rem; height: 2.2rem; }

.hero-fallback {
  height: min(60vh, 520px); min-height: 380px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  display: flex; align-items: flex-end;
}

/* ---------------------------------------------------------------------
   Quick Access
   --------------------------------------------------------------------- */
.quick-access-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 991.98px) { .quick-access-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .quick-access-grid { grid-template-columns: 1fr; } }

.quick-access-item {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius);
  padding: 1.35rem 1.4rem; text-decoration: none; color: var(--text-color);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.quick-access-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; color: var(--text-color); }
.quick-access-icon {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  transition: transform .2s ease;
}
.quick-access-item:hover .quick-access-icon { transform: scale(1.08) rotate(-4deg); }
.quick-access-item h6 { margin-bottom: .15rem; font-weight: 700; }
.quick-access-item p { margin: 0; font-size: .82rem; color: #667085; }

/* ---------------------------------------------------------------------
   Document Search
   --------------------------------------------------------------------- */
.doc-search-section {
  background: linear-gradient(160deg, var(--primary-color), var(--primary-dark));
  color: #fff; border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3.5rem);
  position: relative; overflow: hidden;
}
.doc-search-section::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(212,160,23,.18), transparent 55%);
}
.doc-search-section .section-eyebrow { color: var(--accent-color); }
.doc-search-section h2 { color: #fff; }
.doc-search-section .section-subtitle { color: rgba(255,255,255,.78); }

.doc-search-box { position: relative; z-index: 1; }
.doc-search-box .form-control, .doc-search-box .form-select {
  border: 0; border-radius: .6rem; padding: .85rem 1rem; font-size: .95rem;
}
.doc-search-box .input-group-text { background: #fff; border: 0; border-radius: .6rem 0 0 .6rem; }
.doc-search-main input[type="text"] { font-size: 1.05rem; padding: 1rem 1.1rem; border-radius: .7rem 0 0 .7rem; }
.doc-search-main .btn-search-main {
  border-radius: 0 .7rem .7rem 0; background: var(--accent-color); border: 0; color: var(--primary-color);
  font-weight: 700; padding: 0 1.6rem;
}
.doc-search-main .btn-search-main:hover { background: var(--accent-light); }

.recent-doc-chip {
  display: block; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: .6rem;
  padding: .85rem 1rem; color: #fff; text-decoration: none; transition: background .15s ease, transform .15s ease;
}
.recent-doc-chip:hover { background: rgba(255,255,255,.14); color: #fff; transform: translateX(3px); }
.recent-doc-chip .chip-title { font-weight: 600; font-size: .9rem; }
.recent-doc-chip .chip-meta { font-size: .75rem; color: rgba(255,255,255,.65); }

/* ---------------------------------------------------------------------
   Next Session
   --------------------------------------------------------------------- */
.next-session-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; border: 1px solid var(--border-subtle);
}
.next-session-side {
  background: linear-gradient(160deg, var(--secondary-color), var(--primary-color));
  color: #fff; padding: 2.25rem; display: flex; flex-direction: column; justify-content: center; height: 100%;
}
.next-session-label { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; color: var(--accent-color); }
.next-session-title { font-size: 1.6rem; color: #fff; margin: .4rem 0 1rem; }
.next-session-meta { display: flex; flex-direction: column; gap: .6rem; font-size: .93rem; color: rgba(255,255,255,.92); }
.next-session-meta i { width: 20px; text-align: center; color: var(--accent-color); }

.countdown-wrap { display: flex; gap: .75rem; padding: 2.25rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.countdown-box { text-align: center; min-width: 74px; }
.countdown-num {
  font-size: 2rem; font-weight: 800; color: var(--primary-color); line-height: 1;
  background: var(--light-bg); border-radius: .6rem; padding: .75rem .5rem; display: block;
}
.countdown-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #667085; margin-top: .4rem; display: block; }

/* ---------------------------------------------------------------------
   Stats
   --------------------------------------------------------------------- */
.stats-strip { background: var(--primary-color); color: #fff; border-radius: var(--radius-lg); padding: 2.5rem 1rem; }
.stat-block { text-align: center; padding: .5rem; }
.stat-value { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: var(--accent-color); line-height: 1; }
.stat-label { font-size: .82rem; color: rgba(255,255,255,.8); margin-top: .4rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------------------------------------------------------------------
   Cards: news / docs / officials / committees / gallery
   --------------------------------------------------------------------- */
.card { border-radius: var(--radius); }
.doc-card { border: 1px solid var(--border-subtle); transition: transform .2s ease, box-shadow .2s ease; }
.doc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.news-card { border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; height: 100%; }
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.news-card .news-img-wrap { overflow: hidden; height: 180px; }
.news-card .news-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.news-card:hover .news-img-wrap img { transform: scale(1.06); }
.news-card .card-body { padding: 1.25rem; }
.news-badge-cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--light-bg); color: var(--primary-color); padding: .3rem .6rem; border-radius: .35rem; }

.card-official {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease; text-align: center; height: 100%;
}
.card-official:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.official-photo, .card-official img { height: 260px; object-fit: cover; width: 100%; }
.official-photo-placeholder { height: 260px; display: flex; align-items: center; justify-content: center; background: var(--light-bg); }
.card-official .position-tag { color: var(--secondary-color); font-weight: 600; font-size: .85rem; }
.card-official .committee-tag { font-size: .76rem; color: #667085; }

.presiding-officer-card {
  background: linear-gradient(160deg, var(--primary-color), var(--primary-dark));
  border-radius: var(--radius-lg); overflow: hidden; color: #fff; box-shadow: var(--shadow-lg);
}
.presiding-officer-card img { height: 100%; min-height: 320px; object-fit: cover; width: 100%; }
.presiding-officer-card .po-body { padding: 2.25rem; }
.presiding-officer-card .po-label { color: var(--accent-color); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; }
.presiding-officer-card h3 { color: #fff; margin: .5rem 0 .25rem; }

.committee-card { border: 1px solid var(--border-subtle); border-radius: var(--radius); height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.committee-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.committee-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--light-bg); color: var(--secondary-color); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

.transparency-card {
  border-radius: var(--radius); border: 1px solid var(--border-subtle); background: #fff;
  padding: 1.75rem 1.5rem; height: 100%; text-decoration: none; color: var(--text-color); display: block;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.transparency-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-color); color: var(--text-color); }
.transparency-icon { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--accent-color), var(--accent-light)); color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; }

.gallery-thumb-wrap { position: relative; overflow: hidden; border-radius: .6rem; cursor: pointer; }
.gallery-thumb { height: 190px; object-fit: cover; width: 100%; transition: transform .35s ease; display: block; }
.gallery-thumb-wrap:hover .gallery-thumb { transform: scale(1.08); }
.gallery-thumb-wrap .gallery-caption {
  position: absolute; inset: auto 0 0 0; padding: .6rem .75rem .5rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
  color: #fff; font-size: .78rem; opacity: 0; transition: opacity .25s ease;
}
.gallery-thumb-wrap:hover .gallery-caption { opacity: 1; }

.service-card {
  border-radius: var(--radius); border: 1px solid var(--border-subtle); background: #fff; padding: 1.75rem 1.5rem;
  height: 100%; transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--light-bg); color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 1rem; }

/* ---------------------------------------------------------------------
   Featured Announcement layout
   --------------------------------------------------------------------- */
.featured-announcement {
  background: var(--primary-color); border-radius: var(--radius-lg); color: #fff; padding: 2.25rem; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; min-height: 320px;
}
.featured-announcement::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(212,160,23,.25), transparent 60%); }
.featured-announcement .content { position: relative; z-index: 1; }
.featured-announcement h3 { color: #fff; }

.announcement-list-item { border: 1px solid var(--border-subtle); border-radius: .6rem; padding: 1rem 1.1rem; display: block; text-decoration: none; color: var(--text-color); transition: border-color .15s ease, transform .15s ease; }
.announcement-list-item:hover { border-color: var(--accent-color); transform: translateX(3px); color: var(--text-color); }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: .35rem; }

/* ---------------------------------------------------------------------
   Livestream
   --------------------------------------------------------------------- */
.livestream-section { background: var(--primary-dark); color: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.livestream-frame-wrap { position: relative; background: #000; }
.livestream-frame-wrap .ratio { background: #000; }
.live-indicator {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: #dc2626; color: #fff; font-weight: 700; font-size: .78rem;
  padding: .35rem .75rem; border-radius: 2rem; display: inline-flex; align-items: center; gap: .4rem;
}
.live-indicator .dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: pulseDot 1.4s infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.livestream-info { padding: 2rem; }
.livestream-offline { display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,.6); height: 100%; min-height: 260px; text-align: center; padding: 2rem; }

/* ---------------------------------------------------------------------
   Floating Action Button + Back to Top
   --------------------------------------------------------------------- */
.fab-container { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1045; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .65rem; }
.fab-main {
  width: 58px; height: 58px; border-radius: 50%; background: var(--accent-color); color: var(--primary-color);
  border: 0; box-shadow: var(--shadow-lg); font-size: 1.4rem; display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, background .2s ease;
}
.fab-main:hover { background: var(--accent-light); }
.fab-main.open { transform: rotate(45deg); }
.fab-item {
  display: flex; align-items: center; gap: .6rem;
  opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.fab-container.open .fab-item { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fab-item .fab-btn {
  width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--primary-color);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.fab-item .fab-btn:hover { background: var(--primary-color); color: #fff; }
.fab-item .fab-tooltip {
  background: var(--primary-color); color: #fff; font-size: .78rem; padding: .35rem .7rem; border-radius: .4rem;
  white-space: nowrap; box-shadow: var(--shadow-sm); display: none;
}
@media (min-width: 992px) { .fab-item:hover .fab-tooltip { display: inline-block; } }

.back-to-top {
  position: fixed; right: 1.5rem; bottom: 6.6rem; z-index: 1044;
  width: 44px; height: 44px; border-radius: 50%; background: var(--primary-color); color: #fff; border: 0;
  box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--primary-light); }

@media (max-width: 575.98px) {
  .fab-container { right: 1rem; bottom: 1rem; }
  .back-to-top { right: 1rem; bottom: 5.6rem; width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
footer.site-footer { background: var(--primary-dark); color: rgba(255,255,255,.78); }
footer.site-footer h5, footer.site-footer h6 { color: #fff; }
footer.site-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
footer.site-footer a:hover { color: var(--accent-color); }
footer.site-footer .footer-brand-icon { color: var(--accent-color); }
.footer-bottom-bar { background: #050d1a; color: rgba(255,255,255,.6); font-size: .82rem; }
.social-icon-btn {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center; color: #fff !important; transition: background .15s ease;
}
.social-icon-btn:hover { background: var(--accent-color); color: var(--primary-color) !important; }

/* ---------------------------------------------------------------------
   Page header (interior pages)
   --------------------------------------------------------------------- */
.page-header {
  background: linear-gradient(150deg, var(--primary-color), var(--primary-dark));
  color: #fff; padding: 3rem 0 2.5rem; position: relative; overflow: hidden;
}
.page-header::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%, rgba(212,160,23,.18), transparent 55%); }
.page-header .breadcrumb { position: relative; z-index: 1; }
.page-header .breadcrumb a { color: rgba(255,255,255,.7); }
.page-header .breadcrumb-item.active { color: #fff; }
.page-header h1 { color: #fff; position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   Toasts
   --------------------------------------------------------------------- */
.toast { border-radius: .6rem; }

/* ---------------------------------------------------------------------
   Mobile-first tweaks
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .section { padding: 3rem 0; }
  .next-session-side { padding: 1.75rem; }
  .countdown-wrap { padding: 1.5rem; }
  .doc-search-section { padding: 1.75rem 1.25rem; }
  table.table-responsive-stack thead { display: none; }
  table.table-responsive-stack, table.table-responsive-stack tbody, table.table-responsive-stack tr, table.table-responsive-stack td { display: block; width: 100%; }
  table.table-responsive-stack tr { margin-bottom: 1rem; border: 1px solid var(--border-subtle); border-radius: .6rem; padding: .5rem .75rem; }
  table.table-responsive-stack td { padding: .35rem 0; border: 0; }
  table.table-responsive-stack td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #667085; font-weight: 700; }
}

body { max-width: 100vw; overflow-x: hidden; }