:root {
  --brand-dark: #0f1f3d;
  --brand-light: #f6f8fb;
  --brand-accent: #2563eb;
  --text-dark: #1f2937;
}

body {
font-family:Arial, sans-serif;
background-color:#f4f4f9;
color:#333;
margin:0;
padding:0;
}

header,footer {
background:#004aad;
color:#FFF;
text-align:center;
padding:15px;
}

h1,h2,h3 {
color:#FFF;
}

.container {
width:90%;
max-width:1000px;
margin:20px auto;
padding:20px;
background:#f9f9f9;
border-radius:10px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

/* Improve all section headings inside container */
.container h2 {
  color: #003366;        /* deep blue for strong contrast */
  font-weight: 700;      /* bold */
  margin-bottom: 15px;
  border-bottom: 2px solid #003366; /* underline for clarity */
  padding-bottom: 5px;
}


button,input[type=submit] {
background:#004aad;
color:#FFF;
border:none;
padding:10px 20px;
cursor:pointer;
border-radius:5px;
}



/* Sticky Navbar */
header {
background:#004aad;
color:#FFF;
padding:20px 0;
text-align:center;
position:sticky;
top:0;
z-index:1000;
transition:padding .3s ease, background .3s ease;
}

/* Shrink effect on scroll */
header.shrink {
padding:8px 0;
background:#003080;
}


/* Page content */
main {
padding:20px;
}


.news-list {
margin:20px;
padding:10px;
}

.news-item {
background:#fff;
color:#333;
padding:15px;
margin-bottom:15px;
border-radius:8px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.news-item h3 {
margin:0 0 10px;
font-size:18px;
}

.news-item p {
margin:0 0 8px;
font-size:14px;
}

.news-item small {
font-size:12px;
color:#666;
}

/* ===== Section Headers for Month-Year ===== */
/* Month Tabs (desktop view) */
.month-tabs {
margin:20px 0;
text-align:center;
flex-wrap:wrap;
}

.month-tabs a {
display:inline-block;
margin:4px;
padding:8px 14px;
border:1px solid #ddd;
border-radius:4px;
background:#f9f9f9;
color:#0073e6;
text-decoration:none;
font-size:.95rem;
transition:background .2s;
}

.month-tabs a:hover {
background:#f1f7ff;
}

.month-tabs a.active {
background:#0073e6;
color:#fff;
border-color:#0073e6;
}

/* Hide dropdown by default */
.month-dropdown {
display:none;
margin:15px auto;
text-align:center;
}

.month-dropdown select {
padding:8px;
font-size:1rem;
border-radius:4px;
border:1px solid #ddd;
color:#0073e6;
}


.month-card {
flex:1 1 45%;
min-width:unset;
font-size:.9rem;
padding:8px 12px;
}
}

/* Dropdown for older months */
.month-dropdown {
display:inline-block;
}

.month-dropdown select {
padding:8px 12px;
font-size:.95rem;
border-radius:6px;
border:1px solid #ddd;
color:#0073e6;
background:#f9f9f9;
cursor:pointer;
}

.month-dropdown select:hover {
background:#f1f7ff;
}



.month-dropdown {
width:100%;
text-align:center;
margin-top:10px;
}

.month-dropdown select {
width:90%;
}
}

/* Month filter cards */
.month-cards {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
margin:20px 0 30px;
}

.month-card {
display:inline-block;
padding:10px 16px;
border-radius:10px;
background:#f9f9f9;
border:1px solid #ddd;
color:#0073e6;
text-decoration:none;
font-weight:500;
transition:all .2s ease;
min-width:100px;
text-align:center;
}

.month-card:hover {
background:#f1f7ff;
transform:translateY(-2px);
}

.month-card.active {
background:#0073e6;
color:#fff;
border-color:#0073e6;
font-weight:600;
box-shadow:0 2px 6px rgba(0,115,230,0.3);
}

/* ===== Card-based News Item ===== */
.news-item {
background:#fff;
color:#333;
padding:20px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
transition:transform .2s ease-in-out;
}

.news-item:hover {
transform:translateY(-5px);
}

.news-item h4 {
margin:0 0 10px;
font-size:18px;
}

.news-item h4 a {
text-decoration:none;
color:#0073e6;
font-weight:700;
}

.news-item h4 a:hover {
text-decoration:underline;
}

.news-item p {
margin:0 0 12px;
font-size:14px;
line-height:1.5;
}

.news-item small {
font-size:12px;
color:#666;
}

/* Force white text for headers */
.white-text {
color:#fff!important;
}

/* Page title */
.page-title.dark-text {
color:#222;
text-align:center;
margin-top:20px;
margin-bottom:20px;
}

/* News Cards */
.news-item {
background:#fff;
color:#333;
border-radius:8px;
padding:15px;
margin:15px 0;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
transition:transform .2s;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:150px;
}

.news-item:hover {
transform:translateY(-3px);
}

.news-item h4 {
margin-top:0;
}

.news-item p {
margin:10px 0;
}

.news-item small {
font-size:12px;
color:#666;
}

/* Read More Button */
.read-more-btn {
display:inline-block;
margin-top:10px;
padding:8px 14px;
background-color:#0073e6;
color:#fff;
text-decoration:none;
border-radius:25px;
font-size:14px;
text-align:center;
width:fit-content;
transition:all .2s;
}

.read-more-btn:hover {
background-color:#005bb5;
transform:translateY(-2px);
}

/* Month Header */
.month-header {
margin-top:30px;
font-size:20px;
color:#0073e6;
}

/* Modern Pagination */
.pagination {
margin:30px 0;
text-align:center;
}

.pagination a,.pagination span {
display:inline-block;
margin:0 5px;
padding:8px 14px;
border-radius:25px;
text-decoration:none;
font-size:14px;
transition:all .2s;
}

.pagination a {
background:#0073e6;
color:#fff;
}

.pagination a:hover {
background:#005bb5;
transform:translateY(-2px);
}

.pagination .current {
background:#222;
color:#fff;
font-weight:700;
}

/* ===== PAGE HEADINGS ===== */
.page-title,.section-title {
color:#fff;
background:#333;
padding:12px;
border-radius:8px;
text-align:center;
margin-bottom:20px;
}

/* ===== FORM STYLING ===== */
.modern-form {
background:#f8f9fa;
padding:20px;
border-radius:10px;
box-shadow:0 4px 8px rgba(0,0,0,0.1);
margin-bottom:30px;
text-align:center;
}

.modern-form input,.modern-form textarea,.modern-form button {
padding:10px;
margin:8px;
border-radius:6px;
border:1px solid #ccc;
}

.modern-form button {
background:#007bff;
color:#fff;
border:none;
cursor:pointer;
transition:background .3s;
}

.modern-form button:hover {
background:#0056b3;
}

/* ===== STATUS BADGES ===== */
.status {
padding:6px 12px;
border-radius:12px;
font-size:.9em;
font-weight:700;
}

.status.pending {
background:#ffeeba;
color:#856404;
}

.status.approved {
background:#c3e6cb;
color:#155724;
}

.status.rejected {
background:#f5c6cb;
color:#721c24;
}

/* Modal styling */
.modal {
display:none;
position:fixed;
z-index:9999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
justify-content:center;
align-items:center;
}

.modal-content {
background:#fff;
padding:25px;
border-radius:8px;
text-align:center;
width:350px;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* Section headers across all pages */
.section-header,.news-header,.month-header {
color:#222;
/* Strong contrast */
font-weight:700;
/* Bolder text */
font-size:20px;
margin:20px 0 10px;
text-align:left;
}

/* Special style for news page header */
.news-header {
font-size:22px;
border-bottom:2px solid #005f99;
padding-bottom:5px;
}

/* Month grouping headers */
.month-header {
background:#f0f4f8;
padding:8px 12px;
border-left:4px solid #005f99;
border-radius:4px;
margin-top:15px;
color:#333;
}

/* Body text styling across all pages */
/*body, p, li, td {*/
/*  color: white;  */
/* Dark, readable text */
/*font-size: 16px;*/
/*line-height: 1.6;*/
/*}*/
/* Page content wrapper (ensures readability against background) */
.page-content {
background:#fff;
/* Clean white background for text areas */
padding:20px;
border-radius:8px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
margin-bottom:20px;
}

/* Anchor link styling */
a {
color:#005f99;
text-decoration:none;
}

a:hover {
text-decoration:underline;
color:#003f66;
}

/* ===== Poll Modal Styling ===== */
/* === Poll Modal === */
.poll-modal {
display:flex;
justify-content:center;
align-items:center;
position:fixed;
z-index:999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

.poll-modal-content {
background:#fff;
padding:25px;
border-radius:10px;
width:350px;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.poll-modal-content h3 {
margin-bottom:20px;
font-size:18px;
color:#333;
}

.poll-buttons {
display:flex;
justify-content:space-around;
margin-bottom:15px;
}

.poll-buttons button {
padding:12px 20px;
border:none;
border-radius:6px;
cursor:pointer;
font-size:16px;
flex:1;
margin:0 5px;
transition:background .3s transform .2s;
}

.poll-buttons button:disabled {
cursor:default;
opacity:0.9;
}

.yes-btn {
background:#28a745;
color:#fff;
}

.no-btn {
background:#dc3545;
color:#fff;
}

/* States after voting */
.selected-yes {
background:#28a745!important;
font-weight:700;
}

.selected-no {
background:#dc3545!important;
font-weight:700;
}

.faded-yes {
background:#a5d6a7!important;
}

.faded-no {
background:#ef9a9a!important;
}

.continue-btn {
margin-top:15px;
padding:8px 16px;
background:#0073e6;
color:#fff;
border:none;
border-radius:6px;
cursor:pointer;
}

.poll-modal {
display:flex;
justify-content:center;
align-items:center;
position:fixed;
z-index:999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
transition:opacity .5s ease;
/* smooth fade */
}



.effectiveness-form {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px;
margin-top:8px;
align-items:end;
}

.form-row {
display:flex;
flex-direction:column;
gap:6px;
}

.form-row label {
font-size:.9rem;
color:#333;
}

.form-row input[type="text"],.form-row input[type="number"],.form-row textarea {
padding:8px 10px;
border-radius:6px;
border:1px solid #ddd;
font-size:.95rem;
width:100%;
}

.form-actions {
grid-column:span 5;
display:flex;
gap:10px;
align-items:center;
}

.form-actions button {
padding:10px 14px;
background:#0b5fff;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
font-weight:600;
}

.validation-error {
color:#b02a37;
margin-top:6px;
font-size:.9rem;
display:none;
}

.modal {
display:none;
position:fixed;
inset:0;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.45);
z-index:10000;
}

.modal-content {
background:#fff;
padding:18px;
border-radius:10px;
width:320px;
max-width:92%;
text-align:center;
}

.table-wrapper {
margin-top:18px;
overflow:auto;
}

.modern-table {
width:100%;
border-collapse:collapse;
}

.modern-table th,.modern-table td {
padding:10px 8px;
border:1px solid #eee;
text-align:left;
font-size:.95rem;
}

.read-more {
color:#0b5fff;
text-decoration:none;
cursor:pointer;
}

@media max-width880px{
.effectiveness-form {
grid-template-columns:repeat(1,1fr);
}

.form-row[style] {
grid-column:auto!important;
}

.share-bar {
display:none;
}

.effectiveness-intro {
background:#f9f9f9;
padding:20px;
border-radius:10px;
margin-bottom:20px;
line-height:1.6;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* Fix heading visibility inside intro */
.effectiveness-intro h2 {
  color: #003366;          /* deep blue, consistent with your old header theme */
  font-weight: 700;        /* bold */
  background: #e6f0ff;     /* light blue highlight */
  padding: 10px 15px;
  border-radius: 6px;
  display: inline-block;   /* keeps highlight only behind text */
  margin-bottom: 15px;
}

/* Ensure maps are not colorless */
.effectiveness-intro iframe,
.effectiveness-intro svg,
.effectiveness-intro img {
  filter: none !important;   /* override any grayscale filters */
  color: inherit;
}



.effectiveness-oneliner {
font-style:italic;
color:#444;
margin:10px 0;
text-align:center;
}

/* Tooltip styling */
.tooltip {
position:relative;
cursor:pointer;
display:inline-block;
font-size:.9rem;
}

.tooltip .tooltiptext {
visibility:hidden;
width:220px;
background:#333;
color:#fff;
text-align:center;
border-radius:6px;
padding:8px;
position:absolute;
z-index:1;
bottom:125%;
/* Above the icon */
left:50%;
margin-left:-110px;
opacity:0;
transition:opacity .3s;
font-size:.8rem;
}

.tooltip:hover .tooltiptext {
visibility:visible;
opacity:1;
}

/* Container for wide tables */
.table-wrapper {
overflow-x:auto;
margin-top:15px;
}

/* Modern Table Styling */
.modern-table {
width:100%;
border-collapse:collapse;
margin:0 auto;
font-size:.95rem;
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.modern-table th,.modern-table td {
padding:12px 15px;
text-align:center;
border-bottom:1px solid #eee;
}

.modern-table th {
background:#0073e6;
color:#fff;
font-weight:700;
}

.modern-table tr:nth-child(even) {
background:#f9f9f9;
}

.modern-table tr:hover {
background:#f1f7ff;
}

.modern-table th:hover {
background:#005f99;
/* Prevent fading */
opacity:1;
}

.modern-table td.notes {
max-width:250px;
/* keeps column width under control */
white-space:normal;
/* allows wrapping instead of one long line */
word-wrap:break-word;
text-align:left;
/* looks better for text */
vertical-align:top;
/* aligns neatly at the top */
}

/* Form redesigned as compact grid */
.effectiveness-form {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
margin-bottom:30px;
align-items:start;
}

.effectiveness-form .form-row {
display:flex;
flex-direction:column;
background:#fafafa;
padding:12px;
border-radius:8px;
box-shadow:0 1px 4px rgba(0,0,0,0.08);
height:100%;
}

.effectiveness-form label {
font-size:13px;
font-weight:600;
margin-bottom:6px;
color:#333;
}

.effectiveness-form input,.effectiveness-form textarea {
padding:8px 10px;
border:1px solid #ccc;
border-radius:6px;
font-size:14px;
width:100%;
/* fit card width */
box-sizing:border-box;
}

.effectiveness-form textarea {
resize:vertical;
grid-column:span 5;
min-height:60px;
}

.effectiveness-form .form-actions {
grid-column:span 5;
text-align:right;
}

.effectiveness-form button {
background:#0073e6;
color:#fff;
border:none;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
font-size:14px;
transition:background .2s ease-in-out;
}

.effectiveness-form button:hover {
background:#005bb5;
}

/* Confirmation modal styling */
.modal {
display:none;
position:fixed;
z-index:9999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
justify-content:center;
align-items:center;
}

.modal-content {
background:#fff;
padding:25px;
border-radius:10px;
width:350px;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.modal-content h3 {
margin-bottom:15px;
}

.modal-content button {
margin-top:15px;
background:#0073e6;
color:#fff;
border:none;
padding:8px 16px;
border-radius:6px;
cursor:pointer;
}

.modal-content button:hover {
background:#005bb5;
}

/* Modern table styling */
.table-wrapper {
overflow-x:auto;
}

.modern-table {
width:100%;
border-collapse:separate;
border-spacing:0;
border-radius:10px;
overflow:hidden;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
margin-bottom:40px;
}

.modern-table thead {
background:#0073e6;
color:#fff;
}

.modern-table th,.modern-table td {
padding:12px 15px;
text-align:left;
font-size:14px;
}

.modern-table tbody tr:nth-child(even) {
background:#f9f9f9;
}

.modern-table tbody tr:hover {
background:#eef6ff;
}

.modern-table th:first-child {
border-top-left-radius:10px;
}

.modern-table th:last-child {
border-top-right-radius:10px;
}

/* Notes truncation */
.read-more {
color:#0073e6;
cursor:pointer;
font-size:.85rem;
margin-left:5px;
text-decoration:underline;
}

.read-more:hover {
color:#005bb5;
}

@keyframes fadeInScale {
fromtransform:scale(0.8);
opacity:0;
}

to {
transform:scale(1);
opacity:1;
}
}

/* ===== About Us Layout ===== */
.about-container {
max-width:900px;
margin:0 auto;
}

.about-intro {
margin-bottom:12px;
line-height:1.5;
font-size:1rem;
color:#333;
}

.about-intro.highlight {
font-weight:700;
color:#0073e6;
text-align:center;
margin-top:18px;
}

/* ===== About Us Cards ===== */
.about-cards {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:18px;
margin-top:25px;
}

.about-card {
background:#fff;
padding:18px;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
transition:transform .2s ease, box-shadow .2s ease;
text-align:center;
}

.about-card:hover {
transform:translateY(-5px);
box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

.about-card h3 {
margin-bottom:8px;
font-size:1.2rem;
color:#0073e6;
}

.about-card p {
font-size:.92rem;
color:#444;
}

/* ===== Hero Banner ===== */
.about-hero {
background:linear-gradient(135deg,#0073e6,#00b4d8);
color:#FFF;
text-align:center;
padding:50px 20px;
border-radius:0 0 20px 20px;
margin-bottom:30px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.about-hero h1 {
font-size:2.2rem;
margin-bottom:10px;
}

.about-hero p {
font-size:1.1rem;
max-width:700px;
margin:0 auto;
line-height:1.5;
}

/* --- Contact Form Styles Fix --- */
.contact-container {
max-width:600px;
margin:40px auto;
padding:20px 25px;
background:#fff;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
text-align:center;
}

.contact-form {
margin-top:20px;
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form .form-group {
width:100%;
}

.contact-form input,.contact-form textarea {
width:100%;
padding:12px 14px;
border:1px solid #ccc;
border-radius:8px;
font-size:15px;
box-sizing:border-box;
}

.contact-form textarea {
resize:vertical;
min-height:120px;
}

.submit-btn {
background:#07c;
color:#fff;
padding:12px;
font-size:16px;
border:none;
border-radius:8px;
cursor:pointer;
transition:background .2s;
}

.submit-btn:hover {
background:#005fa3;
}

/* Success & Error messages */
.success-box,.error-box {
padding:12px;
margin:10px 0;
border-radius:8px;
font-weight:700;
}

.success-box {
background:#d4edda;
color:#155724;
}

.error-box {
background:#f8d7da;
color:#721c24;
}

.news-container {
max-width:900px;
margin:40px auto;
padding:20px;
}

.news-item {
background:#fff;
border-radius:12px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
margin-bottom:20px;
padding:20px;
transition:transform .2s;
}

.news-item:hover {
transform:translateY(-3px);
}

.news-item h3 {
margin:0 0 10px;
font-size:1.2rem;
}

.news-item h3 a {
text-decoration:none;
color:#07c;
}

.news-item p {
color:#444;
font-size:.95rem;
margin-bottom:10px;
}

.news-meta {
font-size:.8rem;
color:#666;
display:flex;
justify-content:space-between;
align-items:center;
}

.badge {
display:inline-block;
padding:3px 8px;
border-radius:6px;
font-size:.75rem;
font-weight:700;
}

.badge-google {
background:#e8f3ff;
color:#06c;
}

.badge-pib {
background:#f7f1e3;
color:#b05d00;
}

/* PIB Announcements Styling */
.announcement-page {
padding:32px;
background:#f4f6f8;
min-height:80vh;
}

.press-card {
max-width:1100px;
margin:auto;
background:#fff;
border-radius:12px;
box-shadow:0 8px 24px rgba(0,0,0,0.06);
}

.press-header {
display:flex;
gap:18px;
padding:22px 28px;
border-bottom:1px solid #eee;
background:linear-gradient(180deg,#fff,#fafcff);
}

.emblem img {
width:80px;
height:80px;
}

.press-meta {
flex:1;
}

.press-title {
margin:0;
font-size:1.5rem;
font-weight:700;
color:#0b2545;
}

.meta-row {
margin-top:6px;
display:flex;
gap:16px;
flex-wrap:wrap;
font-size:.95rem;
color:#555;
}

.source-link {
margin-left:auto;
color:#0073e6;
font-weight:600;
text-decoration:none;
}

.source-link:hover {
text-decoration:underline;
}

.press-body {
padding:24px 28px;
line-height:1.7;
color:#333;
}

.press-section h2 {
margin:18px 0 10px;
font-size:1.05rem;
font-weight:700;
color:#0b2545;
}

.styled-table {
width:100%;
border-collapse:collapse;
margin-top:10px;
}

.styled-table th {
background:#0073e6;
color:#fff;
padding:12px;
text-align:center;
}

.styled-table td {
padding:12px;
border-bottom:1px solid #ddd;
}

.styled-table tr:nth-child(even) td {
background:#f9f9f9;
}

.press-images {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
margin:12px 0 18px;
}

.press-images figure {
margin:0;
background:#fff;
border-radius:10px;
padding:8px;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.visual-summary {
margin-top:28px;
padding-top:12px;
border-top:1px solid #eee;
}

.muted {
color:#666;
font-size:.9rem;
}

.press-footer {
padding:16px 28px;
background:#fafafa;
border-top:1px solid #eee;
font-size:.9rem;
color:#666;
}

/* Revised GST cell with icon */
td.revised {
position:relative;
cursor:pointer;
font-weight:600;
color:#0073e6;
}

td.revised:hover {
background-color:#f1f7ff;
}

/* Icon + text alignment */
.revised-wrapper {
display:flex;
align-items:center;
justify-content:center;
gap:6px;
}

.report-icon {
font-size:1rem;
line-height:1;
}

/* Tooltip bubble */
td.revised .report-tooltip {
visibility:hidden;
opacity:0;
min-width:180px;
max-width:220px;
background:#005bb5;
color:#fff;
text-align:center;
padding:6px 10px;
border-radius:10px;
font-size:.85rem;
font-weight:500;
position:absolute;
top:-45px;
left:50%;
transform:translateX(-50%);
transition:opacity .3s ease, transform .3s ease;
z-index:1000;
pointer-events:none;
box-shadow:0 6px 12px rgba(0,0,0,0.15);
}

td.revised .report-tooltip::after {
content:"";
position:absolute;
bottom:-6px;
left:50%;
transform:translateX(-50%);
border-width:6px;
border-style:solid;
border-color:#005bb5 transparent transparent;
}

td.revised:hover .report-tooltip {
visibility:visible;
opacity:1;
transform:translateX(-50%) translateY(-6px);
pointer-events:auto;
}

/* Highlighted Vote Button */
.vote-section {
text-align:center;
margin-top:2.5rem;
}

.vote-btn {
display:inline-block;
background:linear-gradient(135deg,#ff7a18,#af002d85%);
/* orange → deep red */
color:#fff;
padding:1rem 2rem;
border-radius:50px;
font-size:1.1rem;
font-weight:600;
text-decoration:none;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
transition:all .3s ease;
}

.vote-btn:hover {
background:linear-gradient(135deg,#af002d,#ff7a1885%);
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,0.3);
}

/* Article Page */
.article-page {
max-width:800px;
margin:2rem auto;
padding:1rem;
background:#fff;
border-radius:12px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.article-page h1 {
font-size:1.8rem;
margin-bottom:.5rem;
line-height:1.4;
}

.article-meta {
color:#555;
font-size:.9rem;
margin-bottom:1.2rem;
}

.article-desc {
font-size:1.1rem;
line-height:1.6;
margin-bottom:1.5rem;
}

.read-original-btn {
display:inline-block;
background:#0073e6;
color:#fff;
padding:.6rem 1.2rem;
border-radius:6px;
text-decoration:none;
font-weight:500;
transition:background .3s ease;
}

.read-original-btn:hover {
background:#005bb5;
}

.vote-section {
margin-top:2rem;
text-align:center;
}

.vote-btn {
display:inline-block;
background:#28a745;
color:#fff;
padding:.8rem 1.6rem;
border-radius:6px;
text-decoration:none;
font-weight:700;
transition:background .3s ease;
}

.vote-btn:hover {
background:#1e7e34;
}

/* Article page archived badge */
.news-article {
position:relative;
background:#fff;
padding:20px;
border-radius:8px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.archived-badge {
position:absolute;
top:10px;
right:-25px;
background:#d9534f;
color:#fff;
padding:3px 40px;
font-size:.8rem;
font-weight:700;
transform:rotate(45deg);
box-shadow:0 2px 4px rgba(0,0,0,0.2);
}

.archived-label {
display:inline-block;
margin-top:10px;
color:#d9534f;
font-weight:700;
font-size:.95rem;
}

/* Buttons */
.read-original-btn,.vote-btn {
display:inline-block;
margin-top:12px;
padding:8px 14px;
background:#007BFF;
color:#fff;
font-size:.9rem;
border-radius:5px;
text-decoration:none;
transition:background .2s ease;
}

.read-original-btn:hover,.vote-btn:hover {
background:#0056b3;
}

/* Archived label (no link available) */
.archived-label {
display:inline-block;
padding:6px 12px;
margin-top:8px;
background-color:#f2f2f2;
color:#888;
font-size:.9rem;
border-radius:6px;
cursor:not-allowed;
user-select:none;
text-align:center;
font-style:italic;
}

/* Inline Share Buttons */
.share-buttons {
display:flex;
gap:8px;
align-items:center;
margin:8px 0 14px;
flex-wrap:wrap;
}

.share-buttons span {
font-size:.95rem;
margin-right:6px;
color:#333;
}

.share-buttons a,.share-buttons button {
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:8px;
border:1px solid #e6e6e6;
background:#fff;
text-decoration:none;
color:inherit;
cursor:pointer;
padding:6px;
}

.share-buttons a:hover,.share-buttons button:hover {
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.share-buttons svg {
width:18px;
height:18px;
display:block;
}

/* Shared styles for icons */
.share-buttons a,.share-buttons button,.share-bar a,.share-bar button {
display:inline-flex;
justify-content:center;
align-items:center;
width:32px;
/* smaller button */
height:32px;
/* smaller button */
border-radius:50%;
border:none;
cursor:pointer;
text-decoration:none;
transition:transform .2s opacity .2s;
}

/* SVG size smaller */
.share-buttons a svg,.share-buttons button svg,.share-bar a svg,.share-bar button svg {
  width:16px;
  height:16px;
  /* fill:auto;  <-- not needed, remove fill override */
}

/* Hover effect */
.share-buttons a:hover,.share-buttons button:hover,.share-bar a:hover,.share-bar button:hover {
transform:scale(1.1);
opacity:0.9;
}

/* Platform-specific colors (override default) */
.share-buttons a.whatsapp,.share-bar a.whatsapp {
background-color:#25d366;
}

.share-buttons a.whatsapp svg {
  fill:#fff;   /* white icon inside green button */
}


.share-buttons a.x,.share-bar a.x {
background-color:#000;
}

.share-buttons a.x svg {
  fill:#fff;   /* white icon inside black button */
}

.share-buttons a.facebook,.share-bar a.facebook {
background-color:#1877f2;
}

.share-buttons a.facebook svg {
  fill:#fff;   /* white icon inside blue button */
}

.share-buttons button {
background-color:#777;
} /* Copy button */

.share-buttons button svg {
  fill:#fff;   /* white icon inside gray button */
}


header {
  background: #0073e6;   /* solid blue */
  color: white;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header h1 {
  margin: 0;
  font-size: 1.5rem;
}
header a {
  color: white;
  text-decoration: none;
}
header a.active {
  font-weight: bold;
  text-decoration: underline;
}


/* Flex container for title + hamburger */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}




/* ========== Share buttons: platform colors & correct fill ========== */
/* keep button sizing neat */
.share-buttons a,
.share-buttons button,
.share-bar a,
.share-bar button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  border: none;
  padding:6px;
  text-decoration:none;
  box-shadow:none;
  margin:0;
  cursor:pointer;
}

/* svg sizing (do not override fill here) */
.share-buttons svg,
.share-bar svg {
  width:18px;
  height:18px;
  display:block;
}

/* WhatsApp */
.share-buttons a.whatsapp,
.share-bar a.whatsapp { background:#25D366; }
.share-buttons a.whatsapp svg path,
.share-bar a.whatsapp svg path { fill:#fff !important; }

/* X (formerly Twitter) */
.share-buttons a.x,
.share-bar a.x { background:#111; }
.share-buttons a.x svg path,
.share-bar a.x svg path { fill:#fff !important; }

/* Facebook */
.share-buttons a.facebook,
.share-bar a.facebook { background:#1877F2; }
.share-buttons a.facebook svg path,
.share-bar a.facebook svg path { fill:#fff !important; }

/* Copy link (generic) */
.share-buttons button,
.share-bar button { background:#6c757d; }
.share-buttons button svg path,
.share-bar button svg path { fill:#fff !important; }

/* small hover */
.share-buttons a:hover, .share-buttons button:hover,
.share-bar a:hover, .share-bar button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}


/* Font-Awesome icon styling inside share buttons */
.share-buttons a i,
.share-bar a i {
  font-size:16px;
  color: #fff;       /* white glyph on colored background */
  line-height:1;
}

/* Ensure same sizing as before */
.share-buttons a, .share-bar a { width:36px; height:36px; }

/* --- SHARE BUTTONS STYLING --- */
.share-buttons {
  display:flex;
  gap:8px;
  align-items:center;
  margin:12px 0 18px;
  flex-wrap:wrap;
}

.share-buttons span {
  font-size:.95rem;
  margin-right:6px;
  color:#333;
}

.share-buttons a,
.share-buttons button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  margin:2px;
  background:#fff; /* fallback */
  box-sizing:border-box; /* ensures same sizing */
}

/* Icon inside button */
.share-buttons i {
  color:#fff;
  font-size:18px;
  line-height:1;
}

/* Brand colors */
.share-buttons .whatsapp { background:#25d366; }
.share-buttons .x        { background:#000; }
.share-buttons .facebook { background:#1877f2; }
.share-buttons button    { background:#6c757d; } /* copy link */

/* Hover effect */
.share-buttons a:hover,
.share-buttons button:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,0.2);
}

/* --- FLOATING SHARE BAR --- */
/* Floating bar hidden by default */
.share-bar {
  display:none;  /* hidden until scroll */
  position:fixed;
  top:40%;
  right:12px;
  flex-direction:column;
  gap:10px;
  z-index:1000;
  opacity:0;            /* invisible */
  transition:opacity 0.2s ease; /* smooth fade */
}

/* When JS makes it visible */
.share-bar.visible {
  display:flex;
  opacity:1; 
}


.share-bar a,
.share-bar button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  text-decoration:none;
  background:#fff; /* fallback */
  transition:all 0.2s ease;
  box-sizing:border-box; /* 🔧 makes button same size as <a> */
  padding:0; /* remove default button padding */
}

.share-bar i {
  color:#fff;
  font-size:18px;
  line-height:1;
}

/* Brand colors */
.share-bar .whatsapp { background:#25d366; }
.share-bar .x        { background:#000; }
.share-bar .facebook { background:#1877f2; }
.share-bar button    { background:#6c757d; } /* Copy link */

/* Hover */
.share-bar a:hover,
.share-bar button:hover {
  transform:scale(1.1);
  box-shadow:0 4px 8px rgba(0,0,0,0.3);
}


    /* ✅ Styling for news cards */
    .news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
    .news-card{border:1px solid #e8e8e8;padding:14px;border-radius:10px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.03)}
    .news-card h4{margin:0 0 8px;font-size:1.05rem}
    .news-card small{color:#666;display:block;margin-bottom:10px;font-size:0.85rem}
    .read-more-btn{display:inline-block;padding:8px 12px;border-radius:8px;text-decoration:none;background:#0b5fff;color:#fff;font-weight:600}
    .read-more-btn.archived{background:#888;opacity:0.95}
    .archived-label{display:inline-block;padding:6px 10px;background:#f7f7f7;color:#777;border-radius:6px;font-style:italic}
    .month-cards{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
    .month-card{padding:8px 12px;border-radius:8px;background:#f3f4f6;text-decoration:none;color:#111}
    .month-card.active{background:#0b5fff;color:#fff}
    /* ✅ Search Bar */
    .search-bar{margin:14px 0}
    .search-bar input{flex:1;padding:6px;border:1px solid #ccc;border-radius:6px}
    .search-bar button{padding:6px 10px;border:none;border-radius:6px;background:#0b5fff;color:#fff;font-weight:bold}
    .search-bar a{align-self:center;text-decoration:none;color:#555;margin-left:6px}
    aside h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0b5fff; /* ✅ Blue like buttons */
  margin-bottom: 10px;
}
@media (max-width:480px){ .news-card{padding:10px} .read-more-btn{padding:7px 10px} }


.year-toggle {
  background:#f3f4f6;
  border-radius:8px;
  display:inline-block;
  padding:6px 12px;
}
details[open] > summary.year-toggle {
  background:#e0f2fe;
  color:#0369a1;
}


.year-months {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

.all-month-wrapper {
  margin-bottom: 10px;
}


/* All = neutral reset chip */
.month-card.all-month {
  background: #f3f4f6;
  color: #333;
  text-decoration: none;
  font-weight: 600;
  border-radius: 999px;   /* pill = reset action */
  padding: 6px 14px;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid #e5e7eb;
}

/* Active state ONLY when no filter is applied */
.month-card.all-month.active {
  background: #0b5fff;
  color: #fff;
  border-color: #0b5fff;
}

/* Hover should be subtle, not tab-like */
.month-card.all-month:hover {
  background: #e5e7eb;
  text-decoration: none;
}

.all-month-wrapper {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: auto;
}


    .wordcloud-filter {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  font-size: 0.9rem;
  cursor: pointer;
}
.wordcloud-filter:focus {
  outline: none;
  border-color: #0b5fff;
  box-shadow: 0 0 3px #0b5fff;
}

/* Effectiveness table Brand + Image tweaks */
.modern-table th.brand, .modern-table td.brand {
    width: 120px;
    text-align: left;
}
.modern-table th.image, .modern-table td.image {
    width: 80px;
    text-align: center;
}
.modern-table td img {
    max-width: 60px;
    max-height: 60px;
    border-radius: 4px;
}


/* Thumbnail image style */

    .thumb-img { max-width:60px; max-height:60px; border-radius:6px; object-fit:cover; cursor:pointer; }



    /* Hover preview modal */

    .img-preview-modal {

      display: none;

      position: fixed;

      z-index: 1000;

      left: 0; top: 0;

      width: 100%; height: 100%;

      background-color: rgba(0,0,0,0.7);

      justify-content: center;

      align-items: center;

    }

    .img-preview-modal img {

      max-width: 90%;

      max-height: 90%;

      border-radius: 6px;

      box-shadow: 0 0 20px rgba(0,0,0,0.5);

      transition: transform 0.2s;

    }

    .img-preview-modal.show { display: flex; }



    /* Notes toggle */

    .short-note { display:inline; }

    .full-note { display:none; }

    .read-more { color:#007bff; cursor:pointer; text-decoration:underline; }



    /* Difference coloring */

    .diff-positive { color:green; font-weight:bold; }

    .diff-negative { color:red; font-weight:bold; }
    
    
    
    
/* Overlay for generating poster */
.share-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* Mini-poster styling */
.mini-poster-card {
  width: 320px;
  max-width: 95%;
  background: #ffffff;
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.mini-poster-card h3 {
  font-size: 16px;
  margin-bottom: 14px;
  font-weight: bold;
  color: #1b2b3a;
}

/* Yes/No row */
.results-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.yes-mini, .no-mini {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: #fff !important;
}

.yes-mini {
  background: #28a745; /* solid green */
}

.no-mini {
  background: #dc3545; /* solid red */
}

/* Footer row */
.poster-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.poster-brand {
  font-weight: bold;
  font-size: 12px;
  color: #1b2b3a;
}

.poster-date {
  font-size: 10px;
  color: #555;
}

/* ====== Share button / layout fixes ====== */

/* Ensure the post-vote controls stack vertically and full-width */
#postVoteControls,
.post-vote-controls {               /* try both possible names if markup differs */
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

/* Make Continue button full width (keeps consistent look) */
#postVoteControls .continue-btn,
.post-vote-controls .continue-btn {
  width: 100%;
  box-sizing: border-box;
}

/* Default hidden share button (until JS toggles .visible) */
#shareBtn {
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin-top: 32px; /* pushes it about two rows below Continue */
}

/* Visible state — use !important to reliably override other styles */
#shareBtn.visible {
  display: block !important;
}

/* If the Share button lives inside an inline container, ensure it stretches */
#postVoteControls #shareBtn.visible,
.post-vote-controls #shareBtn.visible {
  align-self: stretch;
}

/* keep existing visual styles for the button if you use .share-btn class */
.share-btn, #shareBtn {
  padding: 10px 14px;
  border-radius: 8px;
  background: #0073e6;
  color: #fff;
  border: none;
  cursor: pointer;
}



/* Secondary style for Share Poll button - maroon, pill-shaped */
#shareBtn {
  display: none;              
  margin-top: 24px;           
  width: auto;                
  padding: 6px 16px;          
  background-color: #fff;     
  color: #800000;             /* maroon text */
  border: 2px solid #800000;  
  border-radius: 20px;        /* pill shape */
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;     
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Hover effect: background fills maroon, text turns white */
#shareBtn.visible:hover {
  background-color: #800000;
  color: #fff;
  border-color: #660000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}


    /* Balloon popup */
        .gst-balloon {
            position: fixed;
            top: -150px; /* hidden initially */
            left: 50%;
            transform: translateX(-50%);
            max-width: 300px;
            background: linear-gradient(135deg, #0ea5a4, #06b6d4);
            color: #fff;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
            z-index: 9999;
            transition: top 0.5s ease, opacity 0.5s ease, transform 0.4s ease;
            opacity: 0;
        }

        .gst-balloon.show {
            opacity: 1;
        }

        .gst-balloon p {
            margin: 0 0 10px;
            font-weight: 500;
            font-size: 16px;
        }

        .gst-balloon button {
            background: #fff;
            color: #0ea5a4;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: transform 0.2s;
        }

        .gst-balloon button:hover {
            transform: scale(1.1);
        }
    
    /* GST Balloon Overlay */
#gst-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
}

/* GST Balloon Modal */
#gst-balloon {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 9999;
    max-width: 400px;
    width: 90%;
    background: #ffffff;
    color: #0f1720;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    text-align: center;
    font-family: Arial, sans-serif;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

/* Balloon text */
#gst-balloon p {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
}

/* Balloon OK button */
#gst-balloon-ok {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: #0ea5a4;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: background 0.2s ease;
}

#gst-balloon-ok:hover {
    background: #0bb3a0;
}

/* ---- GSTCutRelief Content Styling ---- */

.gcr-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 10px;
    line-height: 1.7;
    font-size: 16px;
    color: #222;
}

.gcr-content h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.gcr-content h2 {
    font-size: 20px;
    font-weight: normal;
    color: #444;
    margin-bottom: 20px;
}

.gcr-content h3 {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 18px;
}

.gcr-content p {
    margin-bottom: 15px;
}

.gcr-content ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

.gcr-content li {
    margin-bottom: 8px;
}

.gcr-content hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 30px 0;
}

.gcr-note {
    font-size: 14px;
    color: #555;
}

.gcr-links a {
    display: inline-block;
    margin-top: 5px;
    text-decoration: none;
    font-weight: 600;
}

.gcr-links a:hover {
    text-decoration: underline;
}

/* ===== Header / Navbar ===== */

.site-header {
  background: var(--brand-dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ===== Header → Hero Separation ===== */

.site-header {
  position: relative;
  z-index: 10;
}

.hero-band {
  border-top: 1px solid rgba(15, 31, 61, 0.08);
}


.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
   margin-right: auto;
}



/* ===== HARD LOCK HEADER (OVERRIDE ALL LEGACY CSS) ===== */

.site-header,
.site-header * {
  box-sizing: border-box;
}

.site-header {
  background: var(--brand-dark) !important;
}

.site-header .header-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.site-header .site-title {
  margin-right: auto !important;
  text-align: left !important;
}



/* ===============================
   NAVBAR — FINAL SSOT (DO NOT DUPLICATE)
   =============================== */

.site-header {
  background: var(--brand-dark);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
}

.site-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  margin-right: auto;
}

/* Desktop navbar */
#navbar {
  display: flex;
  align-items: center;
  gap: 22px;
}

#navbar a {
  color: #dbe4f0;
  text-decoration: none;
  font-size: 14.5px;
  padding: 6px 0;
}

#navbar a:hover,
#navbar a.active {
  color: #ffffff;
  border-bottom: 2px solid rgba(255,255,255,0.7);
}

/* Hamburger button */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: #ffffff;
  cursor: pointer;
}

/* ===============================
   MOBILE ONLY
   =============================== */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  #navbar {
    display: none;               /* CLOSED by default */
    flex-direction: column;
    width: 100%;
    background: var(--brand-dark);
    margin-top: 12px;
    padding: 12px 0;
  }

  #navbar.open {
    display: flex;               /* OPEN only when toggled */
  }

  #navbar a {
    padding: 10px 24px;
  }
}
/* === CRITICAL: ENSURE HAMBURGER IS CLICKABLE === */

.menu-toggle {
  position: relative;
  z-index: 2001 !important;
  pointer-events: auto !important;
}

.site-header {
  position: relative;
  z-index: 2000;
}

/* === Disable overlays from blocking navbar clicks === */
#gst-modal-overlay,
.gst-balloon,
.poll-modal,
.modal {
  pointer-events: none;
}

/* ===============================
   MOBILE DROPDOWN NAV (FINAL)
   =============================== */

/* Desktop: normal inline nav */
#navbar {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* Mobile dropdown behaviour */
@media (max-width: 768px) {

  #navbar {
    position: absolute;
    top: 100%;                 /* drops BELOW header */
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--brand-dark);
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    /* animation setup */
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* OPEN STATE */
  #navbar.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  #navbar a {
    padding: 12px 24px;
    width: 100%;
  }
}

/* ===============================
   NAVBAR CLICK & LAYER FIX
   =============================== */

.site-header {
  position: relative;
  z-index: 1000;
}

.menu-toggle {
  z-index: 1100;
  position: relative;
}

/* Mobile dropdown */
@media (max-width: 768px) {
  #navbar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--brand-dark);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
  }

  #navbar.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}


/* Ensure navbar always receives pointer events */
.site-header,
.site-header * {
  pointer-events: auto !important;
  z-index: 9999;
}

/* Ensure overlays never block header */
.poll-modal,
#gst-modal-overlay,
.share-overlay {
  pointer-events: none;
}

/* ===============================
   MOBILE NAV — HARD FIX
   =============================== */

@media (max-width: 768px) {

  #navbar {
    display: none;              /* REALLY gone */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--brand-dark);
    z-index: 9999;
    padding: 12px 0;
  }

  #navbar.open {
    display: flex;              /* REALLY present */
    flex-direction: column;
  }

  #navbar a {
    padding: 14px 24px;
  }
}