/* style.css - shared across every page (public site + admin CMS).
   Bootstrap 5 handles the grid/base; this file only layers the Polltac
   look on top: flat colours, no gradients anywhere, medium-sized controls,
   one card style, one badge style, one button style per intent. */

:root {
	--brand: #0f2a3d;
	--brand-dark: #081924;
	--brand-light: #eaf1f5;
	--brand-soft: #f3f7fa;
	--accent: #F97316;
	--accent-dark: #C2540A;
	--text-main: #0F172A;
	--text-secondary: #475569;
	--text-muted: #94A3B8;
	--border-col: #E2E8F0;
	--surface: #F8FAFC;
	--danger: #DC2626;
	--success: #16A34A;
}

body {
	font-family: 'Inter', Arial, sans-serif;
	font-size: 15px;
	color: var(--text-main);
	background: #fff;
}

h1, h2, h3, h4, h5, h6, .brand-font {
	font-family: 'Work Sans', 'Inter', Arial, sans-serif;
}

a { text-decoration: none; }

/* =========================================================
   SITE (public-facing) chrome
   ========================================================= */

.site-navbar {
	background: #fff;
	border-bottom: 1px solid var(--border-col);
	padding: .6rem 0;
}
.site-navbar .navbar-brand {
	display: flex;
	align-items: center;
	gap: .5rem;
}
.site-navbar .navbar-brand img {
	height: 54px;
}
.site-navbar .nav-link {
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 14.5px;
	padding: .5rem .9rem !important;
}
.site-navbar .nav-link.active,
.site-navbar .nav-link:hover {
	color: var(--brand);
}
.site-navbar .btn-associate {
	white-space: nowrap;
}

.site-footer {
	background: var(--brand-dark);
	color: #cdd7de;
	padding: 34px 0 18px;
	margin-top: 40px;
}
.site-footer .footer-brand {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 10px;
}
.site-footer .footer-brand img {
	height: 40px;
	background: #fff;
	border-radius: 6px;
	padding: 4px 6px;
}
.site-footer .footer-brand span {
	color: #fff;
	font-weight: 700;
	font-size: 19px;
}
.site-footer p { font-size: 13.5px; color: #a9b7c2; }
.site-footer a { color: #cdd7de; font-size: 13.5px; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-links li { margin-bottom: 6px; }
.site-footer hr { border-color: #23384a; margin: 18px 0 12px; }
.site-footer .footer-bottom { font-size: 12.5px; color: #8398a5; }

/* buttons */
.btn { font-size: 14px; padding: .5rem 1.1rem; border-radius: 6px; }
.btn-sm { font-size: 12.5px; padding: .32rem .7rem; }
.btn-brand {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-accent {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	font-weight: 600;
}
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-outline-brand {
	border: 1px solid var(--brand);
	color: var(--brand);
	background: transparent;
}
.btn-outline-brand:hover { background: var(--brand); color: #fff; }

/* hero */
.site-hero {
	background: var(--brand-soft);
	padding: 28px 0 34px;
}
.hero-heading {
	font-size: 27px;
	font-weight: 700;
	color: var(--text-main);
	letter-spacing: -.01em;
	margin-bottom: 4px;
}
.hero-sub {
	color: var(--text-secondary);
	font-size: 14.5px;
	margin-bottom: 0;
}
.hero-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent-dark);
}
.hero-map-card, .hero-list-card {
	background: #fff;
	border: 1px solid var(--border-col);
	border-radius: 10px;
	padding: 14px;
	height: 100%;
}
.hero-map-card img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}
.hero-list-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--brand);
	background: var(--brand-light);
	border-radius: 4px;
	padding: 4px 8px;
	margin-bottom: 6px;
}
.hero-const-list {
	padding-right: 2px;
}
.hero-const-list a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 6px;
	border-radius: 5px;
	color: var(--text-secondary);
	font-size: 13.5px;
}
.hero-const-list a:hover {
	background: var(--brand-light);
	color: var(--brand);
}
.hero-const-list .num-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	min-width: 22px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

/* section headings */
.section-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--accent-dark);
	display: block;
	margin-bottom: 4px;
}
.section-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--text-main);
}
.section-viewall {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--brand);
}

/* profile card (MLA / candidate, directories + featured grids) */
.profile-card {
	background: #fff;
	border: 1px solid var(--border-col);
	border-radius: 10px;
	padding: 12px;
	height: 100%;
	transition: box-shadow .15s ease, transform .15s ease;
	display: flex;
	flex-direction: column;
}
.profile-card:hover {
	box-shadow: 0 6px 18px rgba(15,42,61,.10);
	transform: translateY(-1px);
}
.profile-card .photo-wrap {
	width: 100%;
	aspect-ratio: 4/3;
	border-radius: 7px;
	overflow: hidden;
	background: var(--brand-light);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.profile-card .photo-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.profile-card .photo-placeholder {
	font-size: 30px;
	font-weight: 700;
	color: var(--brand);
	opacity: .35;
}
.profile-card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-main);
	margin: 2px 0 0;
}
.profile-card .constituency-line {
	font-size: 13px;
	color: var(--text-secondary);
	margin-bottom: 6px;
}
.constituency-link {
	color: var(--text-secondary);
	text-decoration: none;
	border-bottom: 1px dashed var(--border-col);
}
.constituency-link:hover {
	color: var(--brand);
	border-bottom-color: var(--brand);
}
.profile-card .card-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.party-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
}

.status-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}
.status-pending { background: #FEF3C7; color: #92400E; }
.status-approved { background: #DBEAFE; color: #1D4ED8; }
.status-published { background: #DCFCE7; color: #15803D; }
.status-rejected { background: #FEE2E2; color: #B91C1C; }

/* profile page (MLA / candidate detail) */
.profile-hero-photo {
	width: 100%;
	aspect-ratio: 4/3;
	border-radius: 10px;
	overflow: hidden;
	background: var(--brand-light);
	display: flex;
	align-items: center;
	justify-content: center;
}
.profile-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero-photo .photo-placeholder { font-size: 52px; }

/* profile page (MLA/candidate) - each content section gets its own
   coloured header (icon + top accent bar) so a long profile page reads as
   distinct chunks instead of one continuous scroll of identical headings */
.profile-section {
	background: #fff;
	border: 1px solid var(--border-col);
	border-top: 4px solid var(--section-accent, var(--brand));
	border-radius: 10px;
	padding: 22px;
	margin-top: 28px;
}
.profile-section-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}
.profile-section-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--section-accent, var(--brand));
	color: #fff;
	font-size: 16px;
}
.profile-section-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--text-main);
	margin: 0;
}

.highlight-item {
	border: 1px solid var(--border-col);
	border-left: 4px solid var(--accent);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 10px;
}
.highlight-item h4 { font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.highlight-item p { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 0; }
.highlight-credit {
	font-size: 11px;
	color: var(--text-muted);
	font-style: italic;
	margin-top: 4px;
}

.video-embed-frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
}
.video-embed-frame iframe {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

.priority-list { list-style: none; padding-left: 0; }
.priority-list li {
	display: flex;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--border-col);
	font-size: 14px;
}
.priority-list li:last-child { border-bottom: none; }
.priority-num {
	flex: 0 0 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--brand-light);
	color: var(--brand);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ask the Candidate + comparison table */
.answer-item {
	background: var(--brand-soft);
	border-left: 4px solid #0D9488;
	border-radius: 8px;
	padding: 12px 14px 12px 16px;
	margin-bottom: 10px;
}
.answer-item h4 { font-size: 14px; font-weight: 700; margin-bottom: 5px; padding-left: 30px; position: relative; }
.answer-item h4::before {
	content: 'Q' attr(data-qnum);
	position: absolute;
	left: 0; top: -1px;
	width: 24px; height: 20px;
	border-radius: 5px;
	background: #0D9488;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.answer-item p { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 0; }
.answer-item .not-answered { font-size: 13px; color: var(--text-muted); font-style: italic; }
.answer-item .video-embed-frame { margin-top: 8px; max-width: 420px; }

.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.compare-table th, .compare-table td {
	border: 1px solid var(--border-col);
	padding: 10px 12px;
	vertical-align: top;
	text-align: left;
}
.compare-table thead th {
	background: var(--brand-light);
	color: var(--brand-dark);
	font-weight: 700;
	white-space: nowrap;
	position: sticky;
	top: 0;
}
.compare-table td.question-col {
	font-weight: 600;
	color: var(--text-main);
	background: var(--surface);
	min-width: 220px;
}
.compare-table td.answer-col { min-width: 220px; color: var(--text-secondary); }
.compare-table td.answer-col a { font-size: 12.5px; }

/* Assembly Record - each of the 4 subsections (Attendance/Questions/Bills/
   Committees) gets its own small icon + colour so they read as distinct
   groups, not four copies of the same list */
.record-subsection { margin-bottom: 22px; }
.record-subsection:last-child { margin-bottom: 0; }
.record-subsection-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.record-subsection-header .record-subsection-icon {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: var(--rec-accent, var(--brand));
	color: #fff;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
}
.record-subsection-header h3 {
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-secondary);
	margin: 0;
}
.record-item {
	background: var(--surface);
	border: 1px solid var(--border-col);
	border-left: 4px solid var(--rec-accent, var(--brand));
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 8px;
	font-size: 13.5px;
}
.record-item .record-title { font-weight: 600; color: var(--text-main); }
.record-item .record-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.record-item .record-meta a { color: var(--text-muted); text-decoration: underline; }

.testimonial-card {
	background: var(--brand-soft);
	border-left: 4px solid #16A34A;
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 13.5px;
	color: var(--text-secondary);
	margin-bottom: 10px;
}
.testimonial-card .quote { font-style: italic; }
.testimonial-card .quote::before { content: '\201C'; color: #16A34A; font-weight: 700; font-size: 16px; margin-right: 1px; }
.testimonial-card .quote::after { content: '\201D'; color: #16A34A; font-weight: 700; font-size: 16px; margin-left: 1px; }
.testimonial-card .author { font-weight: 700; color: var(--text-main); margin-top: 6px; font-size: 12.5px; }

.share-icons a, .share-icons button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--brand-light);
	color: var(--brand);
	margin-right: 6px;
	border: none;
	padding: 0;
	font-size: 15px;
	cursor: pointer;
}
.share-icons a:hover, .share-icons button:hover { background: var(--brand); color: #fff; }
.share-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-secondary);
	margin-right: 4px;
}

/* homepage ad carousels - fixed 4:1 banner strip, 1200x300 recommended */
.ad-section {
	padding: 10px 0;
}
.ad-section-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--text-muted);
	margin-bottom: 8px;
	text-align: center;
}
.ad-banner-wrap, .ad-banner-carousel {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--border-col);
}
.ad-banner-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 1;
	object-fit: cover;
	background: var(--brand-light);
}
.ad-banner-carousel .carousel-control-prev,
.ad-banner-carousel .carousel-control-next {
	width: 44px;
	opacity: 0;
	transition: opacity .15s ease;
}
.ad-banner-carousel:hover .carousel-control-prev,
.ad-banner-carousel:hover .carousel-control-next {
	opacity: 1;
}
.ad-banner-carousel .carousel-control-prev-icon,
.ad-banner-carousel .carousel-control-next-icon {
	width: 30px;
	height: 30px;
	background-color: rgba(15, 42, 61, .55);
	border-radius: 50%;
	background-size: 16px;
	padding: 7px;
}
.ad-banner-carousel .carousel-indicators {
	margin-bottom: 8px;
}
.ad-banner-carousel .carousel-indicators button {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #fff;
	border: 1px solid var(--brand);
	opacity: .7;
}
.ad-banner-carousel .carousel-indicators button.active {
	background-color: var(--accent);
	border-color: var(--accent);
	opacity: 1;
}

@media (max-width: 575px) {
	.ad-banner-img { aspect-ratio: 16 / 9; }
}

.whatsapp-chat-btn {
	position: fixed;
	right: 18px;
	bottom: 18px;
	background: #25D366;
	color: #fff;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	z-index: 1000;
}
.whatsapp-chat-btn:hover { color: #fff; background: #1DA851; }

/* search/filter bar */
.filter-bar {
	background: #fff;
	border: 1px solid var(--border-col);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 20px;
}

/* forms - medium sizing everywhere */
.form-control, .form-select {
	font-size: 14px;
	padding: .5rem .7rem;
	border-color: var(--border-col);
}
.form-label {
	font-size: 13px;
	font-weight: 600;
	color: #4c5a68;
	margin-bottom: 4px;
}
.form-hint { font-size: 12px; color: var(--text-muted); }

/* =========================================================
   ADMIN chrome
   ========================================================= */

.navbar-app {
	background: var(--brand);
	padding: .5rem 1rem;
}
.navbar-app .navbar-brand {
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.navbar-app .navbar-brand img {
	height: 34px;
	border-radius: 4px;
	background: #fff;
	padding: 2px 4px;
}
.navbar-app .nav-link {
	color: #dbe4ea;
	font-size: 14px;
	padding: .45rem .8rem;
}
.navbar-app .nav-link.active,
.navbar-app .nav-link:hover {
	color: #fff;
	background: var(--brand-dark);
	border-radius: 4px;
}
.navbar-app .navbar-toggler {
	border-color: rgba(255,255,255,.4);
}

.app-wrap {
	padding: 16px 16px 24px 16px;
	max-width: 1500px;
	margin: 0 auto;
}

.page-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--brand-dark);
	margin-bottom: 12px;
}

.card-box {
	background: #fff;
	border: 1px solid var(--border-col);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}

.stat-box {
	background: #fff;
	border: 1px solid var(--border-col);
	border-left: 4px solid var(--brand);
	border-radius: 8px;
	padding: 12px 14px;
}
.stat-box.accent { border-left-color: var(--accent); }
.stat-box .stat-label {
	font-size: 12px;
	color: #66768a;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.stat-box .stat-value {
	font-size: 24px;
	font-weight: 700;
	color: var(--brand-dark);
}
.stat-box .stat-sub {
	font-size: 11.5px;
	color: #8a97a5;
}

table.dataTable { font-size: 13px; }
table.dataTable thead th {
	background: var(--brand-light);
	color: var(--brand-dark);
	font-size: 12px;
	white-space: nowrap;
}
table.dataTable td { vertical-align: middle; }
.col-filter input, .col-filter select {
	width: 100%;
	font-size: 11.5px;
	padding: 3px 4px;
	border: 1px solid var(--border-col);
	border-radius: 3px;
}
.dataTables_length select {
	width: auto !important;
	min-width: 72px;
	display: inline-block;
	padding: 3px 28px 3px 10px !important;
	background-position: right .6rem center !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

tr.row-clickable { cursor: pointer; }
tr.row-clickable:hover { background: var(--brand-light) !important; }
table.dataTable.table-striped > tbody > tr.odd > * { background-color: #f7f9fb; }

.thumb-preview {
	width: 42px;
	height: 42px;
	border-radius: 6px;
	object-fit: cover;
	background: var(--brand-light);
}

.chart-holder { position: relative; height: 260px; }

/* toast - always centre of screen, self-clears so a stale message never
   shows up on the next page a user lands on */
#toastHolder {
	position: fixed;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2000;
	min-width: 260px;
	max-width: 90%;
}
.app-toast {
	background: #26313d;
	color: #fff;
	padding: 12px 18px;
	border-radius: 6px;
	margin-bottom: 8px;
	font-size: 13.5px;
	text-align: center;
	box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.app-toast.ok { background: var(--success); }
.app-toast.err { background: var(--danger); }

.login-wrap {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--brand-light);
	padding: 20px;
}
.login-box {
	background: #fff;
	width: 380px;
	max-width: 92vw;
	padding: 30px 28px 22px 28px;
	border-radius: 10px;
	border: 1px solid var(--border-col);
}
.login-box img.login-logo {
	height: 76px;
	display: block;
	margin: 0 auto 16px auto;
}

.upload-progress-wrap { display: none; margin-top: 8px; }
.upload-progress-wrap .progress { height: 8px; }

@media (max-width: 767px) {
	.stat-value { font-size: 18px; }
	.app-wrap { padding: 10px; }
	.hero-heading { font-size: 22px; }
	.site-navbar .navbar-brand img { height: 44px; }
}