/* ============================================================
   PAGES  Bayawan City Council  |  Unified interior-page theme
   ============================================================ */

:root {
    --leg-green: #1f7a3d;
    --leg-green-dark: #14532d;
    --leg-orange: #f08a24;
    --leg-orange-dark: #cf6d09;
    --leg-soft: #fff8ef;
    --leg-card: #ffffff;

    /* ── Consistent spacing / shape tokens ── */
    --radius-xl: 20px;       /* panels, modals, overlays   */
    --radius-lg: 16px;       /* cards, sections             */
    --radius-md: 12px;       /* inner cards, filters        */
    --radius-sm: 8px;        /* small elements              */
    --radius-pill: 999px;    /* buttons, badges             */

    --border-light: 1px solid rgba(240,138,36,.10);
    --shadow-sm: 0 8px 20px rgba(31,41,55,.05);
    --shadow-md: 0 14px 32px rgba(31,41,55,.07);
    --shadow-lg: 0 20px 48px rgba(31,41,55,.10);

    --pad-panel: clamp(20px, 3vw, 36px);
    --pad-card:  clamp(16px, 2.5vw, 24px);
}

body {
    background:
        radial-gradient(circle at top right, rgba(240,138,36,.07), transparent 30%),
        linear-gradient(180deg, #fffdf8 0%, #ffffff 45%, #f4fbf5 100%);
}

/* ---- Override Tailwind green utilities site-wide ---- */
.bg-green-600  { background-color: var(--leg-green) !important; }
.bg-green-700  { background-color: var(--leg-green) !important; }
.bg-green-800  { background-color: var(--leg-green-dark) !important; }
.hover\:bg-green-700:hover { background-color: var(--leg-green-dark) !important; }
.hover\:bg-green-800:hover { background-color: var(--leg-green-dark) !important; }
.text-green-600 { color: var(--leg-green) !important; }
.text-green-700 { color: var(--leg-green) !important; }
.text-green-800 { color: var(--leg-green-dark) !important; }
.hover\:text-green-800:hover { color: var(--leg-green-dark) !important; }
.focus\:border-green-600:focus { border-color: var(--leg-orange) !important; }
.focus\:ring-green-100:focus { --tw-ring-color: rgba(240,138,36,.14) !important; }
.border-green-600 { border-color: var(--leg-green) !important; }
.from-green-700 { --tw-gradient-from: var(--leg-green) !important; }
.to-green-600   { --tw-gradient-to: var(--leg-green) !important; }
.ring-gray-100  { --tw-ring-color: rgba(240,138,36,.12) !important; }

.page-shell,
.legislative-shell,
.content-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 32px auto 48px;
}

.page-panel,
.content-panel,
.legislative-panel {
    background: rgba(255,255,255,.92);
    border: var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 1rem;
    backdrop-filter: blur(10px);
}

.page-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--leg-orange-dark);
}

.page-title {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--leg-green-dark);
}

.page-subtitle {
    margin-top: 12px;
    max-width: 760px;
    color: #4b5563;
    line-height: 1.7;
    font-size: .96rem;
}

.section-card {
    background: var(--leg-card);
    border: var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.themed-button,
.profile-btn,
.committee-card a,
.btn-cta,
.btn-view {
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-pill);
}

.profile-btn,
.committee-card a {
    background: linear-gradient(135deg, var(--leg-green), var(--leg-green-dark)) !important;
}

.profile-btn:hover,
.committee-card a:hover {
    background: linear-gradient(135deg, var(--leg-orange), var(--leg-orange-dark)) !important;
}

/* ---------- responsive table ---------- */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    color: #1f2937;
}

.responsive-table th {
    /* background: linear-gradient(135deg, var(--leg-green), var(--leg-green-dark)); */
    padding: 10px 14px;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid rgba(255,255,255,.12);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.95);
}

.responsive-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.responsive-table tr:hover td { background: #fff8ef; }

@media (max-width: 900px) {
    .responsive-table thead { display: none; }

    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td { display: block; width: 100%; }

    .responsive-table tr {
        margin-bottom: .75rem;
        border: var(--border-light);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .responsive-table td {
        border-bottom: 1px solid #f3f4f6;
        padding: 10px 14px;
        position: relative;
    }

    .responsive-table td:last-child { border-bottom: none; }

    .responsive-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: var(--leg-orange-dark);
        margin-bottom: .25rem;
        font-size: .78rem;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
}

/* ---------- hidden helpers ---------- */
.hidden-column { display: none; }
.column-author { display: none; }

.line-clamp-4 {
    line-clamp: 4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- gallery ---------- */
.gallery-grid {
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
}

.gallery-item::after {
    content: "Bayawan City";
    position: absolute;
    bottom: 8px;
    right: 10px;
    color: rgba(255,255,255,.6);
    font-size: 11px;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    pointer-events: none;
    letter-spacing: .04em;
}

.gallery-item.wide  { grid-column: span 2; }
.gallery-item.tall  { grid-row:    span 2; }
.gallery-item.large { grid-column: span 2; grid-row: span 2; }

.gallery-video {
    height: 520px;
    margin-bottom: 24px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.committee-card,
.councilor,
.top-official,
.vice-mayor-container,
.modal-content {
    border: var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

.councilor,
.top-official,
.vice-mayor-container {
    background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%) !important;
    border-radius: var(--radius-xl) !important;
}

.top-official {
    padding: 1rem !important;
}

.committee-card h3,
.councilor-name,
.vice-mayor-name,
.page-panel h1,
.content-panel h1,
.legislative-panel h1 {
    color: var(--leg-green-dark) !important;
}

.councilor-position,
.vice-mayor-position,
.page-panel .accent,
.content-panel .accent {
    color: var(--leg-orange-dark) !important;
}

@media (max-width: 768px) {
    .page-shell,
    .legislative-shell,
    .content-shell {
        width: min(100% - 20px, 1120px);
        margin: 20px auto 36px;
    }

    .page-panel,
    .content-panel,
    .legislative-panel {
        border-radius: var(--radius-lg);
        padding: 18px;
    }
}

@media (max-width: 768px) {
    .gallery-grid { grid-auto-rows: 150px; }

    .gallery-item.wide,
    .gallery-item.tall,
    .gallery-item.large { grid-column: span 1; grid-row: span 1; }

    .gallery-video { height: 300px; }
}

/* ============================================================
   PROFILE MODAL  (directory + committee-profile)
   ============================================================ */
.modal,
.modal-overlay {
    backdrop-filter: blur(4px);
}
.modal-content {
    border: var(--border-light) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--radius-xl) !important;
    background: #fff !important;
}
.modal-content .close-modal,
.modal-content .modal-close {
    position: absolute;
    right: 16px;
    top: 14px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #9ca3af;
    cursor: pointer;
    border: none;
    background: none;
    z-index: 10;
    transition: color .15s;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
}
.modal-content .close-modal:hover,
.modal-content .modal-close:hover {
    color: var(--leg-orange);
    background: rgba(240,138,36,.08);
}
/* profile inside modal */
.profile-container .profile-header {
    border-bottom: 1px solid rgba(240,138,36,.10);
    padding-bottom: 20px;
}
.profile-container .profile-image img {
    border-radius: var(--radius-lg);
    border: 3px solid rgba(240,138,36,.14);
    object-position: top;
}
.profile-container .profile-details h2 {
    color: var(--leg-green-dark) !important;
    font-size: 1.5rem;
}
.profile-container .profile-details > p {
    color: var(--leg-orange-dark) !important;
}
.profile-container .committee-section {
    background: #fffdf8 !important;
    border-color: rgba(240,138,36,.12) !important;
    border-radius: var(--radius-md) !important;
}
.profile-container .committee-section h3 {
    color: var(--leg-green-dark) !important;
}
.profile-container .committee-section a {
    color: var(--leg-green) !important;
}
.profile-container .committee-section a:hover {
    color: var(--leg-orange) !important;
}
.profile-container .details .bio {
    background: #fffdf8 !important;
    border-color: rgba(240,138,36,.12) !important;
    border-radius: var(--radius-md) !important;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-container {
    max-width: 1120px;
    margin: 32px auto 48px;
    padding: 0 16px;
}
.contact-info {
    background: linear-gradient(135deg, var(--leg-green), var(--leg-green-dark)) !important;
    border-radius: var(--radius-xl) !important;
    border: var(--border-light);
}
.contact-form {
    border-radius: var(--radius-xl) !important;
    border: var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}
.contact-form h2 {
    color: var(--leg-green-dark) !important;
}
.contact-form .btn-submit {
    background: linear-gradient(135deg, var(--leg-green), var(--leg-green-dark)) !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600;
}
.contact-form .btn-submit:hover {
    background: linear-gradient(135deg, var(--leg-orange), var(--leg-orange-dark)) !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: var(--leg-orange) !important;
    box-shadow: 0 0 0 3px rgba(240,138,36,.14) !important;
}

/* ============================================================
   COMMITTEE-PROFILE PAGE
   ============================================================ */
.banner {
    position: relative;
}
.banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20,83,45,.55) 0%, transparent 60%);
    pointer-events: none;
}
.committee-overlay {
    background: rgba(255,255,255,.96) !important;
    border: var(--border-light) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    backdrop-filter: blur(8px);
}
.committee-overlay .committee-title {
    color: var(--leg-green-dark) !important;
    font-size: 1.5rem;
}
.committee-overlay .committee-members-title {
    color: var(--leg-green-dark) !important;
}
.committee-overlay .member-card {
    border: var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    background: #fffdf8 !important;
    transition: transform .18s, box-shadow .18s;
}
.committee-overlay .member-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
}
.committee-overlay .member-role {
    color: var(--leg-orange-dark) !important;
}
.committee-overlay .back-button a,
.back-button a {
    background: linear-gradient(135deg, var(--leg-green), var(--leg-green-dark)) !important;
    transition: background .18s;
}
.committee-overlay .back-button a:hover,
.back-button a:hover {
    background: linear-gradient(135deg, var(--leg-orange), var(--leg-orange-dark)) !important;
}

/* ============================================================
   HOUSE RULES / CODIFIED / ABOUT  (text-heavy pages)
   ============================================================ */
body.bg-white {
    background:
        radial-gradient(circle at top right, rgba(240,138,36,.07), transparent 30%),
        linear-gradient(180deg, #fffdf8 0%, #ffffff 45%, #f4fbf5 100%) !important;
}
.post-description {
    line-height: 1.8;
    color: #374151;
}
.post-description b {
    color: var(--leg-green-dark);
}

/* ============================================================
   ARTICLES + PAGINATION
   ============================================================ */
.article-card {
    border: var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}
.article-card:hover {
    box-shadow: var(--shadow-md) !important;
}
.article-card .article-title {
    color: var(--leg-green-dark);
}
.article-card .article-category {
    color: var(--leg-orange-dark) !important;
}
.pagination .btn,
.pagination a {
    border-radius: var(--radius-pill) !important;
}

/* ============================================================
   POLICY + DOWNLOADABLES  table overrides
   ============================================================ */
.mainpage {
    border: var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    max-width: 1120px;
    margin: 0 auto 48px;
    padding: 1rem;
    background: rgba(255,255,255,.94);
}
.mainpage .containerpol {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}
.filters-container {
    background: #fffdf8 !important;
    border: var(--border-light);
    border-radius: var(--radius-md) !important;
}
.filters-container input:focus,
.filters-container select:focus {
    border-color: var(--leg-orange) !important;
    box-shadow: 0 0 0 3px rgba(240,138,36,.14) !important;
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-container {
    max-width: 1120px;
    margin: 32px auto;
}
.gallery-item {
    border: var(--border-light);
    border-radius: var(--radius-md) !important;
}

/* ============================================================
   DIVIDER LINE in directory (the green bar under position)
   ============================================================ */
.vice-mayor-divider,
.mayor-divider {
    background: linear-gradient(90deg, var(--leg-green), var(--leg-orange)) !important;
    height: 3px !important;
    border-radius: 2px;
}

/* ============================================================
   COUNCILOR CARDS  (directory page)
   ============================================================ */
.councilor {
    border: var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%) !important;
}
.councilor img {
    border: 3px solid rgba(240,138,36,.12);
}
.councilor-name {
    color: var(--leg-green-dark) !important;
}
.councilor-position {
    color: var(--leg-orange-dark) !important;
}

/* ============================================================
   STANDING COMMITTEES CARDS
   ============================================================ */
.committee-card {
    border: var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    background: #fff !important;
    transition: transform .18s, box-shadow .18s;
}
.committee-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
}
.committee-card h3 {
    color: var(--leg-green-dark) !important;
}
.committee-card .desc {
    color: #6b7280;
}

/* ============================================================
   ARTICLE DISPLAY PAGE
   ============================================================ */
.article-main-container {
    max-width: 1120px;
    /* margin: 24px auto 48px; */
}
.article-content-area {
    border: var(--border-light) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
}
.article-content-area .article-title {
    color: var(--leg-green-dark);
}
.article-content-area .back-link {
    background: var(--leg-soft) !important;
    color: var(--leg-orange-dark) !important;
    border: 1px solid rgba(240,138,36,.12);
}
.article-content-area .back-link:hover {
    background: rgba(240,138,36,.12) !important;
}
.article-content-area .back-link svg path {
    stroke: var(--leg-orange-dark);
}
.article-sidebar .sidebar-title {
    color: var(--leg-green-dark) !important;
    border-color: rgba(240,138,36,.14) !important;
}

/* ============================================================
   CODIFIED ORDINANCES
   ============================================================ */
.code-entry {
    border-radius: var(--radius-md);
    transition: transform .18s;
}
.code-entry .code-title:hover {
    background: rgba(255,255,255,.12);
    border-radius: var(--radius-sm);
}
.code-body {
    border: var(--border-light);
}


/* ============================================================
   POLICY FILTERS  –  modern search & filter bar
   ============================================================ */
.policy-filters {
    background: var(--leg-card);
    border: var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--pad-card);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Search field ── */
.pf-search {
    position: relative;
}

.pf-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.pf-search input {
    width: 100%;
    padding: 11px 16px 11px 42px;
    font-size: .9rem;
    color: #1f2937;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
}

.pf-search input::placeholder {
    color: #9ca3af;
}

.pf-search input:focus {
    border-color: var(--leg-orange);
    box-shadow: 0 0 0 3px rgba(240,138,36,.12);
    background: #fff;
}

/* ── Filter dropdowns row ── */
.pf-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pf-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 160px;
    min-width: 0;
}

.pf-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7280;
    padding-left: 2px;
}

.pf-group select {
    width: 100%;
    padding: 9px 32px 9px 12px;
    font-size: .85rem;
    color: #374151;
    background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-md);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    box-sizing: border-box;
}

.pf-group select:focus {
    border-color: var(--leg-orange);
    box-shadow: 0 0 0 3px rgba(240,138,36,.12);
    background-color: #fff;
}

.pf-group select:hover {
    border-color: #d1d5db;
    background-color: #fff;
}

/* ── Hide helper ── */
.pf-hidden {
    display: none !important;
}

/* ── Responsive: stack on mobile ── */
@media (max-width: 640px) {
    .pf-row {
        flex-direction: column;
    }
    .pf-group {
        flex: 1 1 100%;
    }
    .policy-filters {
        border-radius: var(--radius-lg);
        padding: 16px;
    }
}