/*
Theme Name: Vic Meyers for Democracy
Theme URI: https://vic4hd47.com/
Author: Vic Meyers for Democracy
Author URI: https://vic4hd47.com/
Description: A pixel-accurate WordPress recreation of the vic4hd47.com campaign site. Fully Gutenberg block editable — every page's content is built from core blocks (heading, paragraph, group, columns, image, buttons, list) styled to match the original design exactly.
Version: 1.2.1
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vic4hd47
*/

/* =========================================================
   Base site styles, ported 1:1 from the original vic4hd47.com
   static HTML/CSS, merged from all pages into one stylesheet
   and scoped where two pages styled the same class differently.
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #1B3A5C;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    margin-bottom: 1rem;
}

h1 { font-size: 3.5rem; line-height: 1.2; }
h2 { font-size: 2.5rem; line-height: 1.2; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.2rem; color: #1B3A5C; margin-top: 1.2rem; margin-bottom: 0.5rem; }

a { color: #1B3A5C; }

img { max-width: 100%; height: auto; }

/* Content area wrapper so page.php content lines up like the original .container.
   padding-top (not margin) reserves space for the fixed header below — using
   padding here guarantees the gap can never collapse away or drift out of
   sync with the header's own height, the way a margin-top on the first block
   inside main could. */
main { display: block; padding-top: 60px; }

/* Navigation */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    background: rgba(27, 58, 92, 0.98);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
}

header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* The WordPress admin toolbar is also fixed at top:0 with a higher
   z-index, so when a logged-in user is browsing the site it sits on top
   of (and visually hides) our fixed header unless we push the header
   down to sit below it. */
body.admin-bar header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar header {
        top: 46px;
    }
}

nav {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #D4A843;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-main { font-size: 1.3rem; }

.logo-sub {
    font-size: 0.7rem;
    color: #FFFFFF;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-menu a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s;
    position: relative;
}

.nav-menu a:hover { color: #D4A843; }

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #D4A843;
    transition: width 0.3s;
}

.nav-menu a:hover::after { width: 100%; }
.nav-menu a.active::after,
.nav-menu li.current-menu-item a::after,
.nav-menu li.current_page_item a::after { width: 100%; }
.nav-menu a.active,
.nav-menu li.current-menu-item a,
.nav-menu li.current_page_item a { color: #D4A843; }

.donate-btn {
    background: linear-gradient(135deg, #9B2335 0%, #C92E4C 100%);
    color: white !important;
    padding: 0.7rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    cursor: pointer;
    display: inline-block;
}

.donate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(155, 35, 53, 0.4);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 0.4rem;
    background: transparent;
    border: none;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #FFFFFF;
    border-radius: 2px;
    transition: 0.3s;
}

/* Hero Section (homepage default: full height gradient hero).
   Vertical offset for the fixed header is handled by main's padding-top,
   not a margin here — margins on a first-child block can collapse away
   entirely (through main/body/html), which is what caused a stray white
   gap between the header and hero on some browsers/screen sizes. */
.hero {
    min-height: 100vh;
    background: linear-gradient(135deg, #1B3A5C 0%, #2D5A8C 30%, #1B3A5C 60%, #D4A843 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><linearGradient id="grad" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:rgba(255,255,255,0.05)"/><stop offset="100%25" style="stop-color:rgba(255,255,255,0)"/></linearGradient></defs><polygon points="100,200 300,100 500,300 700,150 900,250 1100,100 1200,200 1200,600 0,600" fill="url(%23grad)" opacity="0.3"/></svg>') no-repeat center;
    background-size: cover;
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 10;
    animation: fadeInUp 1s ease-out;
}

.hero h1 {
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    animation: slideInDown 0.8s ease-out;
    color: #fff;
}

.hero .tagline-accent {
    font-size: 3rem;
    font-weight: 700;
    color: #D4A843;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    animation: slideInUp 0.8s ease-out 0.2s both;
    font-family: 'Merriweather', serif;
}

.hero p {
    font-size: 1.5rem;
    margin-bottom: 3rem;
    max-width: 700px;
    line-height: 1.6;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.8s ease-out 0.4s both;
    color: #fff;
}

.hero-buttons,
.hero-buttons.wp-block-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeIn 0.8s ease-out 0.6s both;
    list-style: none;
}

.btn-primary, a.btn-primary {
    display: inline-block;
    padding: 1.2rem 2.5rem;
    background: linear-gradient(135deg, #D4A843 0%, #E8B856 100%);
    color: #1B3A5C !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 8px 25px rgba(212, 168, 67, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(212, 168, 67, 0.5);
}

.btn-secondary, a.btn-secondary {
    display: inline-block;
    padding: 1.2rem 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s;
    border: 2px solid #FFFFFF;
    cursor: pointer;
    text-align: center;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

/* Credentials Banner */
.credentials {
    background: #1B3A5C;
    color: #FFFFFF;
    padding: 1.5rem 2rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.5px;
}

.credentials p { max-width: 1200px; margin: 0 auto; color: #FFFFFF; }
.credentials span { color: #D4A843; font-weight: 700; }

/* Why I'm Running */
.why-running { background: #E8EDF2; padding: 4rem 2rem; }
.why-running-content { max-width: 900px; margin: 0 auto; }

.quote-large {
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F8FA 100%);
    border-left: 5px solid #D4A843;
    padding: 2.5rem;
    margin: 2rem 0;
    font-size: 1.4rem;
    font-style: italic;
    color: #1B3A5C;
    border-radius: 5px;
    line-height: 1.8;
    box-shadow: 0 4px 15px rgba(27, 58, 92, 0.1);
}

.quote-large::before {
    content: '"';
    font-size: 3rem;
    color: #D4A843;
    margin-right: 0.5rem;
    line-height: 0.5;
}

.quote-attribution {
    text-align: right;
    color: #1B3A5C;
    font-style: normal;
    font-weight: 600;
    margin-top: 1.5rem;
    font-size: 1.1rem;
}

.why-running p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #1B3A5C;
    margin: 1.5rem 0;
    text-align: center;
}

/* Issues Grid */
.issues-section { padding: 4rem 2rem; background: #FFFFFF; }
.issues-container { max-width: 1200px; margin: 0 auto; }
.issues-section h2 { text-align: center; margin-bottom: 3rem; color: #1B3A5C; }

.issues-grid.wp-block-columns, .issues-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.issue-card {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(27, 58, 92, 0.1);
    transition: all 0.3s;
    border-top: 4px solid #D4A843;
    cursor: pointer;
}

.issue-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(27, 58, 92, 0.15);
    border-top-color: #9B2335;
}

.issue-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }
.issue-card h3 { color: #1B3A5C; margin-bottom: 1rem; font-size: 1.4rem; }
.issue-card p { color: #666; font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.5rem; }

.issue-link {
    color: #D4A843;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.issue-link:hover { color: #9B2335; gap: 1rem; }

/* Meet Vic Section */
.meet-vic { background: #E8EDF2; padding: 4rem 2rem; }
.meet-vic-container { max-width: 1200px; margin: 0 auto; }
.meet-vic h2 { color: #1B3A5C; margin-bottom: 3rem; text-align: center; }

.meet-vic-grid.wp-block-columns, .meet-vic-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.meet-vic-text h3 { color: #1B3A5C; margin-bottom: 1.5rem; }
.meet-vic-text p { font-size: 1.05rem; line-height: 1.8; color: #1B3A5C; margin-bottom: 1.5rem; }
.meet-vic-text strong { color: #9B2335; }

.meet-vic-highlights {
    background: linear-gradient(135deg, #D4A843 0%, #E8B856 100%);
    padding: 2rem;
    border-radius: 10px;
    border-left: 5px solid #9B2335;
}

.highlight-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(27, 58, 92, 0.2);
}

.highlight-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.highlight-label {
    color: #1B3A5C;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.highlight-value {
    color: #1B3A5C;
    font-size: 1.3rem;
    font-weight: 700;
    font-family: 'Merriweather', serif;
}

.meet-vic-button, a.meet-vic-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #D4A843 0%, #E8B856 100%);
    color: #1B3A5C !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    transition: all 0.3s;
    margin-top: 1.5rem;
    box-shadow: 0 4px 15px rgba(212, 168, 67, 0.3);
}

.meet-vic-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(212, 168, 67, 0.4); }

/* Stats Section */
.stats-section { padding: 4rem 2rem; background: #FFFFFF; }
.stats-container { max-width: 1200px; margin: 0 auto; }
.stats-section h2 { text-align: center; color: #1B3A5C; margin-bottom: 3rem; }

.stats-grid.wp-block-columns, .stats-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

/* Default (white card) stat box style, used on About/inner pages */
.stat-box {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(27, 58, 92, 0.1);
    border-top: 4px solid #D4A843;
    transition: all 0.3s;
}

.stat-box:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(27, 58, 92, 0.15); }

.stat-number { font-size: 2.5rem; font-weight: 900; color: #D4A843; font-family: 'Merriweather', serif; }
.stat-label { color: #1B3A5C; font-weight: 600; margin-top: 0.5rem; }

/* Homepage "Impact & Commitment" section uses a dark stat box variant */
.home .stat-box {
    background: linear-gradient(135deg, #1B3A5C 0%, #2D5A8C 100%);
    padding: 2.5rem;
    box-shadow: 0 4px 15px rgba(27, 58, 92, 0.2);
    color: #FFFFFF;
}
.home .stat-box:hover { box-shadow: 0 8px 25px rgba(27, 58, 92, 0.3); }
.home .stat-number { font-size: 3rem; margin-bottom: 0.5rem; }
.home .stat-label { color: #FFFFFF; }

/* CTA Section */
.cta-section { background: linear-gradient(135deg, #D4A843 0%, #E8B856 100%); padding: 4rem 2rem; text-align: center; color: #1B3A5C; }
.cta-content { max-width: 900px; margin: 0 auto; }
.cta-section h2 { color: #1B3A5C; margin-bottom: 2rem; font-size: 2.8rem; }

.cta-buttons, .cta-buttons.wp-block-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
    list-style: none;
}

/* Footer */
footer { background: #1B3A5C; color: #FFFFFF; padding: 3rem 2rem; }

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3, .footer-section h4 { color: #D4A843; margin-bottom: 1rem; font-size: 1rem; }

.footer-section a {
    color: #E8EDF2;
    text-decoration: none;
    display: block;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.footer-section a:hover { color: #D4A843; }
.footer-section p { color: #E8EDF2; margin-bottom: 0.5rem; }

.social-links { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    color: #D4A843;
    font-weight: 700;
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid rgba(212, 168, 67, 0.3);
    padding-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-bottom a { color: #D4A843; text-decoration: none; transition: color 0.3s; }
.footer-bottom a:hover { color: #E8B856; }
.disclaimer { color: #D4A843; font-weight: 600; margin-top: 1rem; }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Page Hero (default: gradient, used on Issues/Get Involved/Contact/policy pages).
   See the note on .hero above — offset comes from main's padding-top now. */
.page-hero {
    min-height: 40vh;
    background: linear-gradient(135deg, #1B3A5C 0%, #2D5A8C 50%, #D4A843 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 2rem;
}

.page-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
}

.page-hero p {
    font-size: 1.2rem;
    color: #D4A843;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    margin: 0 auto;
}

/* About page uses a photographic hero background instead of the gradient */
.page-title-about-vic .page-hero {
    min-height: 50vh;
    background: linear-gradient(rgba(27, 58, 92, 0.7), rgba(27, 58, 92, 0.85)), url('images/vic-hero.jpg');
    background-size: cover;
    background-position: center top;
}

/* Main Content */
.container { max-width: 900px; margin: 0 auto; padding: 2rem; }

.entry-content > section,
section { margin: 2rem 0; padding: 3rem 2rem; }

section.alternate { background: #F5F8FA; }
.section-content { background: white; padding: 2rem; border-radius: 10px; margin-bottom: 2rem; }
section.alternate .section-content { background: #FFFFFF; }

.intro-section { padding: 3rem 2rem; }
.intro-text { font-size: 1.1rem; line-height: 1.8; color: #1B3A5C; }

.intro-highlight {
    background: linear-gradient(135deg, #D4A843 0%, #E8B856 100%);
    padding: 2rem;
    border-radius: 10px;
    color: #1B3A5C;
    margin: 2rem 0;
    border-left: 5px solid #9B2335;
}

/* Section Styles (About page story sections) */
.story-section h2 { color: #1B3A5C; margin-bottom: 1.5rem; border-bottom: 3px solid #D4A843; padding-bottom: 1rem; }
.story-section p { font-size: 1.05rem; line-height: 1.8; color: #1B3A5C; margin-bottom: 1.5rem; }
.story-section p strong, .story-section strong { color: #9B2335; }

.quote {
    background: linear-gradient(135deg, #E8EDF2 0%, #F5F8FA 100%);
    border-left: 5px solid #D4A843;
    padding: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #1B3A5C;
    border-radius: 5px;
}

.quote::before { content: '"'; font-size: 2.5rem; color: #D4A843; margin-right: 0.5rem; }

/* Button */
.btn, a.btn {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #D4A843 0%, #E8B856 100%);
    color: #1B3A5C !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    text-align: center;
    margin-top: 1rem;
}

.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(212, 168, 67, 0.4); }

/* Photo alongside text */
.photo-float {
    float: right;
    width: 320px;
    margin: 0 0 1.5rem 2rem;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border: 3px solid #D4A843;
}

.photo-caption { text-align: center; font-size: 0.85rem; color: #666; margin-top: 0.5rem; font-style: italic; }

/* YouTube Section */
.youtube-section { background: linear-gradient(135deg, #0f2137 0%, #1B3A5C 100%); padding: 4rem 2rem; color: white; }
.youtube-section h2 { text-align: center; color: #D4A843; margin-bottom: 0.5rem; }
.youtube-section .section-subtitle { text-align: center; color: rgba(255,255,255,0.8); font-size: 1.1rem; margin-bottom: 2.5rem; }
.youtube-channel-header { text-align: center; margin-bottom: 2rem; }
.youtube-channel-header .channel-name { font-size: 1.3rem; font-weight: 700; color: #D4A843; }
.youtube-channel-header .channel-stats { color: rgba(255,255,255,0.7); font-size: 0.95rem; margin-top: 0.3rem; }

.featured-video {
    max-width: 800px;
    margin: 0 auto 3rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    border: 2px solid #D4A843;
}

.featured-video iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; }

.featured-video-label {
    text-align: center;
    color: #D4A843;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.video-grid.wp-block-columns, .video-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto 2.5rem;
}

.video-card {
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(212, 168, 67, 0.2);
}

.video-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); border-color: #D4A843; }
.video-card a { text-decoration: none; color: inherit; }
.video-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-thumb .play-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s;
}

.video-card:hover .play-overlay { opacity: 1; }
.play-overlay .play-icon { font-size: 3rem; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.video-info { padding: 1rem 1.2rem; }
.video-info h3, .video-info h4 { font-size: 1rem; color: white; margin-bottom: 0.3rem; font-family: 'Open Sans', sans-serif; font-weight: 600; }
.video-info .video-views { font-size: 0.85rem; color: rgba(255,255,255,0.5); }
.youtube-cta { text-align: center; margin-top: 1rem; }

.youtube-cta a {
    display: inline-block;
    background: #FF0000;
    color: white !important;
    padding: 0.9rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.youtube-cta a:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 0, 0, 0.3); }

/* Social Connect Section */
.social-connect { background: #E8EDF2; padding: 3rem 2rem; text-align: center; }
.social-connect h2 { color: #1B3A5C; margin-bottom: 1.5rem; }

.social-icons-row, .social-icons-row.wp-block-columns, .social-icons-row > .wp-block-group__inner-container {
    display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
    max-width: 700px; margin: 0 auto; list-style: none;
}
.social-icons-row p { margin: 0; }

.social-icon-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 1.2rem 1.5rem; background: white; border-radius: 10px;
    text-decoration: none; color: #1B3A5C !important; font-weight: 600; font-size: 0.9rem;
    min-width: 120px; transition: transform 0.3s, box-shadow 0.3s; border: 2px solid transparent;
}

.social-icon-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); border-color: #D4A843; }
.social-icon-card .icon { font-size: 2rem; }

/* Issue Section (Issues page + policy sub-pages) */
.issue-section { padding: 3rem 2rem; }
.issue-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.issue-icon-large { font-size: 4rem; flex-shrink: 0; }
.issue-title-group h2 { color: #1B3A5C; margin: 0; }
.issue-title-group p { color: #D4A843; font-weight: 600; font-size: 1rem; margin: 0.3rem 0 0 0; }

.issue-content {
    background: white; padding: 2rem; border-radius: 10px;
    border-left: 5px solid #D4A843; margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(27, 58, 92, 0.1);
}

section.alternate .issue-content { background: #FFFFFF; }
.issue-content h3 { color: #1B3A5C; font-size: 1.3rem; margin-bottom: 1rem; margin-top: 1.5rem; }
.issue-content p { margin-bottom: 1rem; font-size: 1rem; line-height: 1.8; color: #1B3A5C; }
.issue-content p strong, .issue-content strong { color: #9B2335; }

.issue-quote {
    background: linear-gradient(135deg, #E8EDF2 0%, #F5F8FA 100%);
    border-left: 5px solid #9B2335;
    padding: 1.5rem; margin: 1.5rem 0; font-style: italic; color: #1B3A5C; border-radius: 5px;
}

.issue-quote::before { content: '\201C'; font-size: 2rem; color: #D4A843; margin-right: 0.5rem; }

.policy-points { list-style: none; padding: 0; margin: 1.5rem 0; }

.policy-points li {
    padding: 1rem 0; padding-left: 2rem; position: relative;
    font-size: 0.95rem; line-height: 1.6; color: #1B3A5C;
}

.policy-points li::before {
    content: '\2713'; position: absolute; left: 0; color: #D4A843; font-weight: bold; font-size: 1.2rem;
}

.policy-points li strong { color: inherit; }

/* Side Navigation (Issues page jump nav) */
.issues-nav {
    position: static; background: white; padding: 1.5rem;
    border-radius: 10px; box-shadow: 0 4px 15px rgba(27, 58, 92, 0.1); margin: 0 auto 2rem;
    max-width: 1200px;
}

.issues-nav h3 { font-size: 1.1rem; margin-bottom: 1rem; color: #1B3A5C; }

.issues-nav a, .nav-link {
    display: block; padding: 0.7rem 0; color: #1B3A5C; text-decoration: none;
    border-left: 3px solid transparent; padding-left: 1rem; transition: all 0.3s;
    font-weight: 500; font-size: 0.95rem;
}

.issues-nav a:hover, .nav-link:hover { color: #D4A843; border-left-color: #D4A843; padding-left: 1.3rem; }
.issues-nav a.active { color: #D4A843; border-left-color: #D4A843; }

/* .nav-link is already `display: block`, so each link naturally sits on its
   own line. A stray <br> between them (left over from the original import)
   would add a second, unwanted blank line per item and roughly double the
   height of this box, making the sticky nav overlap the content below it. */
.issues-nav br { display: none; }

/* Back link (policy sub-pages) */
.back-link {
    display: inline-flex; align-items: center; gap: 0.5rem; color: #1B3A5C;
    text-decoration: none; font-weight: 600; padding: 1rem 0; transition: color 0.3s;
}
.back-link:hover { color: #D4A843; }

/* Public Education policy page: principle cards + flow arrows */
.principle-card { background: #F5F8FA; border-left: 4px solid #D4A843; padding: 1.2rem 1.5rem; margin: 1rem 0; border-radius: 5px; }
.principle-card h4 { color: #9B2335; margin-top: 0; margin-bottom: 0.7rem; }
.flow-arrow { text-align: center; font-weight: 700; color: #1B3A5C; background: #F5F8FA; padding: 1rem; border-radius: 5px; margin: 1rem 0; font-size: 1.05rem; }

/* Get Involved page: engagement + social cards */
.engagement-grid.wp-block-columns, .engagement-grid > .wp-block-group__inner-container {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin: 2rem 0;
}

.engagement-card {
    background: white; padding: 2rem; border-radius: 10px;
    box-shadow: 0 4px 15px rgba(27, 58, 92, 0.1); border-top: 4px solid #D4A843; transition: all 0.3s;
}

.engagement-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(27, 58, 92, 0.15); }
section.alternate .engagement-card { background: #FFFFFF; }
.engagement-icon { font-size: 3rem; margin-bottom: 1rem; }
.engagement-card h3 { color: #1B3A5C; margin-bottom: 1rem; font-size: 1.3rem; }
.engagement-card p { color: #666; margin-bottom: 1.5rem; font-size: 0.95rem; line-height: 1.6; }

.btn-dark, a.btn-dark {
    display: inline-block;
    padding: 1.2rem 2.5rem;
    background: linear-gradient(135deg, #1B3A5C 0%, #2D5A8C 100%);
    color: #FFFFFF !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 8px 25px rgba(27, 58, 92, 0.3);
}

.btn-dark:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(27, 58, 92, 0.5); }

.btn-outline, a.btn-outline { background: transparent; border: 2px solid #D4A843; color: #1B3A5C !important; }
.btn-outline:hover { background: #D4A843; color: #1B3A5C !important; }

/* Newsletter Form */
.newsletter-form { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(27, 58, 92, 0.1); max-width: 500px; margin: 2rem auto; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #1B3A5C; }
.form-group input { width: 100%; padding: 0.8rem; border: 1px solid #D4A843; border-radius: 5px; font-size: 1rem; transition: border-color 0.3s; }
.form-group input:focus { outline: none; border-color: #9B2335; box-shadow: 0 0 5px rgba(155, 35, 53, 0.3); }

/* Social Share (default: Get Involved page style) */
.share-section { background: linear-gradient(135deg, #E8EDF2 0%, #F5F8FA 100%); padding: 2rem; border-radius: 10px; margin: 2rem 0; text-align: center; }
.share-section h3 { margin-bottom: 1.5rem; color: #1B3A5C; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; list-style: none; }

.share-btn {
    padding: 0.8rem 1.5rem; border: none; border-radius: 5px; font-weight: 600;
    cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-block;
}

.share-btn-facebook { background: #3b5998; color: white !important; }
.share-btn-facebook:hover { background: #2d4373; transform: translateY(-2px); }
.share-btn-twitter { background: #1DA1F2; color: white !important; }
.share-btn-twitter:hover { background: #1a91da; transform: translateY(-2px); }
.share-btn-email { background: #D4A843; color: #1B3A5C !important; }
.share-btn-email:hover { background: #E8B856; transform: translateY(-2px); }

.share-text { background: white; padding: 1rem; border-radius: 5px; margin-top: 1.5rem; font-size: 0.9rem; color: #1B3A5C; border-left: 4px solid #D4A843; }

/* Social Media Links (Get Involved "Follow Vic" cards) */
.social-grid.wp-block-columns, .social-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.social-card { background: white; padding: 1.5rem; border-radius: 10px; text-align: center; box-shadow: 0 4px 15px rgba(27, 58, 92, 0.1); transition: all 0.3s; }
.social-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(27, 58, 92, 0.15); }
.social-card a { display: inline-block; margin-top: 1rem; }
.social-icon { font-size: 3rem; margin-bottom: 1rem; }

.section-heading { text-align: center; color: #1B3A5C; margin-bottom: 2rem; }
.section-heading p { font-size: 1.05rem; color: #666; margin-top: 0.5rem; }

/* Contact page hero is shorter than the homepage hero */
.page-title-contact .hero { min-height: 60vh; }
.page-title-contact .hero h1 { font-size: 4rem; margin-bottom: 1rem; }
.page-title-contact .hero p { margin-bottom: 2rem; }

/* Contact Form Section */
.contact-section { background: #E8EDF2; padding: 4rem 2rem; position: relative; }
.contact-container { max-width: 900px; margin: 0 auto; }
.contact-section h2 { text-align: center; color: #1B3A5C; margin-bottom: 2rem; }

.vic-message {
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F8FA 100%);
    border-left: 5px solid #D4A843; padding: 2.5rem; margin-bottom: 3rem;
    font-size: 1.15rem; font-style: italic; color: #1B3A5C; border-radius: 5px;
    line-height: 1.8; box-shadow: 0 4px 15px rgba(27, 58, 92, 0.1);
}

.vic-message::before { content: '"'; font-size: 3rem; color: #D4A843; margin-right: 0.5rem; line-height: 0.5; }
.vic-message-attribution { text-align: right; color: #1B3A5C; font-style: normal; font-weight: 600; margin-top: 1.5rem; font-size: 1.1rem; }

.prominent-donate-btn {
    display: block; padding: 1.5rem 2.5rem;
    background: linear-gradient(135deg, #9B2335 0%, #C92E4C 100%);
    color: white !important; text-decoration: none; border-radius: 8px; font-weight: 700;
    font-size: 1.25rem; text-align: center; transition: all 0.3s; border: none; cursor: pointer;
    box-shadow: 0 8px 25px rgba(155, 35, 53, 0.4); width: 100%;
}

.prominent-donate-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(155, 35, 53, 0.6); }

/* Form Styles */
.form-wrapper { background: #FFFFFF; padding: 2.5rem; border-radius: 10px; box-shadow: 0 4px 20px rgba(27, 58, 92, 0.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #1B3A5C; font-size: 0.95rem; }
.required { color: #C92E4C; }

input[type="text"], input[type="email"], select, textarea {
    width: 100%; padding: 0.9rem; border: 2px solid #E0E0E0; border-radius: 5px;
    font-family: 'Open Sans', sans-serif; font-size: 1rem; transition: border-color 0.3s; background: #FAFAFA;
}

input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
    outline: none; border-color: #D4A843; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.1);
}

textarea { resize: vertical; min-height: 120px; }
.form-error { display: none; color: #C92E4C; font-size: 0.85rem; margin-top: 0.3rem; }
.form-error.show { display: block; }
input.error, select.error { border-color: #C92E4C; background: #FFF5F5; }

/* Checkboxes */
.checkbox-group { margin-bottom: 1.5rem; }
.checkbox-label { font-weight: 600; color: #1B3A5C; margin-bottom: 1rem; display: block; }
.checkbox-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.checkbox-item { display: flex; align-items: center; }
input[type="checkbox"] { width: 20px; height: 20px; margin-right: 0.7rem; cursor: pointer; accent-color: #D4A843; }
.checkbox-item label { margin: 0; font-weight: 500; cursor: pointer; }

/* Submit Button */
.form-submit { margin-top: 2rem; }

.submit-btn {
    width: 100%; padding: 1.2rem;
    background: linear-gradient(135deg, #D4A843 0%, #E8B856 100%);
    color: #1B3A5C; border: none; border-radius: 5px; font-weight: 700; font-size: 1.1rem;
    cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 15px rgba(212, 168, 67, 0.3);
}

.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(212, 168, 67, 0.5); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Messages */
.form-message { margin-top: 1.5rem; padding: 1rem; border-radius: 5px; text-align: center; display: none; }
.form-message.show { display: block; }
.success-message { background: #E8F5E9; color: #2E7D32; border: 1px solid #4CAF50; }
.error-message { background: #FFEBEE; color: #C62828; border: 1px solid #F44336; }
.error-message a { color: #C62828; font-weight: 700; text-decoration: underline; }

/* Share Section (contact page variant - scoped so it doesn't affect the Get Involved page's share buttons) */
.page-title-contact .share-section { background: #FFFFFF; padding: 4rem 2rem; }
.share-container { max-width: 900px; margin: 0 auto; }
.page-title-contact .share-section h2 { text-align: center; color: #1B3A5C; margin-bottom: 3rem; }
.page-title-contact .share-buttons { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }

.page-title-contact .share-btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem;
    border-radius: 5px; text-decoration: none; font-weight: 600; transition: all 0.3s; color: white !important; gap: 0.5rem;
}

.share-facebook { background: linear-gradient(135deg, #1877F2 0%, #0A66C2 100%); }
.share-facebook:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4); }
.share-twitter { background: linear-gradient(135deg, #1DA1F2 0%, #1A8917 100%); }
.share-twitter:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(29, 161, 242, 0.4); }
.share-email { background: linear-gradient(135deg, #666 0%, #333 100%); }
.share-email:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 102, 102, 0.4); }

/* =========================================================
   Gutenberg / block editor compatibility helpers
   ========================================================= */

/* The core/button block wraps its link in <div class="wp-block-button {class}">
   <a class="wp-block-button__link">, instead of putting the class directly on
   the <a>. These rules make our button classes work either way. */
.wp-block-button.btn-primary .wp-block-button__link { display: inline-block; padding: 1.2rem 2.5rem; background: linear-gradient(135deg, #D4A843 0%, #E8B856 100%); color: #1B3A5C; text-decoration: none; border-radius: 5px; font-weight: 700; font-size: 1.1rem; transition: all 0.3s; border: none; box-shadow: 0 8px 25px rgba(212, 168, 67, 0.3); }
.wp-block-button.btn-primary .wp-block-button__link:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(212, 168, 67, 0.5); }
.wp-block-button.btn-secondary .wp-block-button__link { display: inline-block; padding: 1.2rem 2.5rem; background: rgba(255, 255, 255, 0.15); color: #FFFFFF; text-decoration: none; border-radius: 5px; font-weight: 700; font-size: 1.1rem; transition: all 0.3s; border: 2px solid #FFFFFF; }
.wp-block-button.btn-secondary .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-3px); }
.wp-block-button.btn-dark .wp-block-button__link { display: inline-block; padding: 1.2rem 2.5rem; background: linear-gradient(135deg, #1B3A5C 0%, #2D5A8C 100%); color: #FFFFFF; text-decoration: none; border-radius: 5px; font-weight: 700; font-size: 1.1rem; transition: all 0.3s; border: none; box-shadow: 0 8px 25px rgba(27, 58, 92, 0.3); }
.wp-block-button.btn-dark .wp-block-button__link:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(27, 58, 92, 0.5); }
.wp-block-button.btn-outline .wp-block-button__link { display: inline-block; padding: 1rem 2rem; background: transparent; border: 2px solid #D4A843; color: #1B3A5C; text-decoration: none; border-radius: 5px; font-weight: 700; transition: all 0.3s; }
.wp-block-button.btn-outline .wp-block-button__link:hover { background: #D4A843; }
.wp-block-button.btn .wp-block-button__link { display: inline-block; padding: 1rem 2rem; background: linear-gradient(135deg, #D4A843 0%, #E8B856 100%); color: #1B3A5C; text-decoration: none; border-radius: 5px; font-weight: 700; transition: all 0.3s; border: none; }
.wp-block-button.btn .wp-block-button__link:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(212, 168, 67, 0.4); }

.wp-block-button.btn.btn-dark .wp-block-button__link {
    background: linear-gradient(135deg, #1B3A5C 0%, #2D5A8C 100%);
    color: #FFFFFF;
    box-shadow: none;
}
.wp-block-button.btn.btn-dark .wp-block-button__link:hover { box-shadow: 0 8px 20px rgba(27, 58, 92, 0.4); }
.wp-block-button.btn.btn-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid #D4A843;
    color: #1B3A5C;
    box-shadow: none;
}
.wp-block-button.btn.btn-outline .wp-block-button__link:hover { background: #D4A843; color: #1B3A5C; }

.wp-block-button.meet-vic-button .wp-block-button__link { display: inline-block; padding: 1rem 2rem; background: linear-gradient(135deg, #D4A843 0%, #E8B856 100%); color: #1B3A5C; text-decoration: none; border-radius: 5px; font-weight: 700; box-shadow: 0 4px 15px rgba(212, 168, 67, 0.3); }
.wp-block-button.donate-btn .wp-block-button__link { background: linear-gradient(135deg, #9B2335 0%, #C92E4C 100%); color: white; padding: 0.7rem 1.5rem; border-radius: 5px; font-weight: 700; }
.wp-block-button.prominent-donate-btn .wp-block-button__link { display: block; padding: 1.5rem 2.5rem; background: linear-gradient(135deg, #9B2335 0%, #C92E4C 100%); color: white; border-radius: 8px; font-weight: 700; font-size: 1.25rem; text-align: center; box-shadow: 0 8px 25px rgba(155, 35, 53, 0.4); }
.wp-block-button.back-link .wp-block-button__link { background: transparent; color: #1B3A5C; padding: 1rem 0; font-weight: 600; }

/* The generic .btn-primary/.btn-secondary/.btn-dark/etc. rules above also match
   the OUTER <div class="wp-block-button btn-primary"> wrapper (not just plain
   <a class="btn-primary"> links used outside the block editor), because that
   div carries the same class name. That put the gold/blue/dark box styling on
   BOTH the outer div and the inner <a class="wp-block-button__link">, producing
   an oversized "button inside a button" box. Reset the wrapper div back to a
   plain, unstyled inline-block so only the inner link renders the button. */
.wp-block-button.btn-primary,
.wp-block-button.btn-secondary,
.wp-block-button.btn-dark,
.wp-block-button.btn-outline,
.wp-block-button.btn,
.wp-block-button.meet-vic-button,
.wp-block-button.donate-btn,
.wp-block-button.prominent-donate-btn,
.wp-block-button.back-link {
    display: inline-block;
    background: none;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.wp-block-buttons { list-style: none; }
.wp-block-columns.issues-grid,
.wp-block-columns.meet-vic-grid,
.wp-block-columns.stats-grid,
.wp-block-columns.engagement-grid,
.wp-block-columns.social-grid,
.wp-block-columns.video-grid { flex-wrap: wrap; }
.entry-content ul.policy-points { margin: 1.5rem 0; }
.entry-content { overflow: hidden; }

/* =========================================================
   Mobile Responsive
   ========================================================= */
@media (max-width: 768px) {
    .hamburger { display: flex; }

    .nav-menu {
        position: absolute; top: 60px; left: 0; right: 0;
        background: rgba(27, 58, 92, 0.98);
        flex-direction: column; gap: 1rem; padding: 0;
        max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
    }

    .nav-menu.active { max-height: 600px; padding: 2rem; }
    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(10px, 10px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

    .hero { min-height: 80vh; }
    .hero h1 { font-size: 3rem; }
    .hero .tagline-accent { font-size: 2rem; }
    .hero p { font-size: 1.1rem; }
    .hero-buttons { flex-direction: column; gap: 1rem; }
    .btn-primary, .btn-secondary { width: 100%; }

    .page-title-contact .hero { min-height: 50vh; }
    .page-title-contact .hero h1 { font-size: 2.5rem; }
    .page-title-contact .hero p { font-size: 1.2rem; }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.8rem; }

    .meet-vic-grid, .issues-grid, .engagement-grid, .social-grid, .video-grid,
    .meet-vic-grid > .wp-block-group__inner-container, .issues-grid > .wp-block-group__inner-container,
    .engagement-grid > .wp-block-group__inner-container, .social-grid > .wp-block-group__inner-container,
    .video-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; }
    .cta-section h2 { font-size: 2rem; }

    .page-hero { min-height: 30vh; }
    .page-hero h1 { font-size: 2rem; }

    .issue-header { flex-direction: column; text-align: center; }
    .issue-icon-large { font-size: 3rem; }

    .issues-nav { position: static; margin-bottom: 2rem; }
    .form-row { grid-template-columns: 1fr; }
    .share-buttons { flex-direction: column; }
    .share-btn { width: 100%; }

    .photo-float { float: none; width: 100%; max-width: 400px; margin: 1rem auto; display: block; }
    .stats-grid, .stats-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    nav { padding: 0.5rem 1rem; }
    .hero { min-height: 70vh; padding: 1rem; }
    .hero h1 { font-size: 2rem; }
    .hero .tagline-accent { font-size: 1.5rem; }
    .hero p { font-size: 1rem; }
    .credentials { font-size: 0.9rem; padding: 1rem 1.5rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }
    section { padding: 1.5rem 1rem; }
    .cta-buttons { flex-direction: column; }
    .quote-large { padding: 1.5rem; font-size: 1.1rem; }
    .page-hero h1 { font-size: 1.5rem; }
    .form-wrapper { padding: 1.5rem; }
    .vic-message { padding: 1.5rem; font-size: 1rem; }
}

@media print {
    header, footer, .donate-btn, .btn, .btn-primary, .btn-secondary, .btn-dark,
    .meet-vic-button, .issues-nav, .back-link, .share-buttons, .sticky-donate,
    .prominent-donate-btn { display: none; }
    body { font-size: 12pt; line-height: 1.5; }
}
/* ============================================================
   Parity fixes vs vic4hd47.com original — 2026-07-08
   Appended to wp-content/themes/vic4hd47/style.css (v1.2.0)
   Each rule copies exact values from the original static site.
   ============================================================ */

/* --- Alternate sections: WP outputs <div class="alternate">, the
       original CSS only targeted section.alternate, so the light
       #F5F8FA band was lost on About / Issues / Get Involved /
       Public Education / Rancher CoOp / Smarter Justice --- */
.alternate { background: #F5F8FA; }
.alternate .section-content,
.alternate .issue-content,
.alternate .engagement-card { background: #FFFFFF; }

/* --- Icons output as <p> were inheriting the card paragraph
       styles (0.95rem, #666) instead of the icon rules --- */
p.issue-icon { font-size: 2.5rem; color: #1B3A5C; margin-bottom: 1rem; display: block; }
p.engagement-icon { font-size: 3rem; color: #1B3A5C; margin-bottom: 1rem; }

/* --- "Read More" links on home issue cards: WP renders
       <p class="issue-link"><a>, the anchor was navy/small --- */
p.issue-link { font-size: 1rem; }
.issue-link a {
    color: #D4A843;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.issue-link a:hover { color: #9B2335; gap: 1rem; }

/* --- Hero tagline: original inherits Open Sans; the theme had
       wrongly added Merriweather --- */
.hero .tagline-accent { font-family: 'Open Sans', sans-serif; }

/* --- About-page stats output as <p> were inheriting section
       paragraph styles (navy, 1.05rem) --- */
p.stat-number { font-size: 2.5rem; font-weight: 900; color: #D4A843; font-family: 'Merriweather', serif; }
p.stat-label { color: #1B3A5C; font-weight: 600; margin-top: 0.5rem; font-size: 1rem; }
.home p.stat-number { font-size: 3rem; margin-bottom: 0.5rem; }
.home p.stat-label { color: #FFFFFF; }

/* --- YouTube CTA red pill button (About page) --- */
.youtube-cta a {
    display: inline-block;
    background: #FF0000;
    color: #FFFFFF;
    padding: 0.9rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: transform 0.3s, box-shadow 0.3s;
}
.youtube-cta a:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 0, 0, 0.3); }

/* --- Share buttons: WP block-button anchors painted the default
       #32373c over the branded wrapper colors. Neutralize the inner
       anchor and put the exact original colors on the wrapper. --- */
.share-btn a.wp-element-button,
.share-btn .wp-block-button__link {
    background: none;
    color: inherit;
    padding: 0;
    margin: 0;
    border: none;
    text-decoration: none;
    font-weight: 600;
}
/* Get Involved page variants (original: solid colors) */
.share-btn-facebook { background: #3b5998; color: #FFFFFF; }
.share-btn-facebook:hover { background: #2d4373; transform: translateY(-2px); }
.share-btn-twitter { background: #1DA1F2; color: #FFFFFF; }
.share-btn-twitter:hover { background: #1a91da; transform: translateY(-2px); }
.share-btn-email { background: #D4A843; color: #1B3A5C; }
.share-btn-email:hover { background: #E8B856; transform: translateY(-2px); }
/* Contact page variants (original: gradients) */
.share-facebook { background: linear-gradient(135deg, #1877F2 0%, #0A66C2 100%); color: #FFFFFF; }
.share-facebook:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4); }
.share-twitter { background: linear-gradient(135deg, #1DA1F2 0%, #1A8917 100%); color: #FFFFFF; }
.share-twitter:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(29, 161, 242, 0.4); }
.share-email { background: linear-gradient(135deg, #666 0%, #333 100%); color: #FFFFFF; }
.share-email:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 102, 102, 0.4); }

/* --- Bottom CTA button blocks placed directly in <main> sat flush
       against the footer; give them breathing room (2026-07-08) --- */
main > .wp-block-buttons { margin: 2.5rem auto 4.5rem; }

/* --- Get Involved: "Contact Vic's Campaign" white card, matching the
       original inline-styled card (2026-07-08). The paid-for notice is a
       sibling block, styled to merge seamlessly with the card bottom. --- */
.contact-mini-card {
    background: #FFFFFF;
    padding: 2rem 2rem 1.5rem;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 4px 15px rgba(27, 58, 92, 0.1);
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}
.contact-mini-card p { font-size: 1.1rem; color: #1B3A5C; margin-bottom: 0.5rem; }
.contact-mini-card a { color: #D4A843; font-weight: 600; text-decoration: none; margin: 0 0.5rem; }
.contact-mini-card a:hover { color: #9B2335; }
.paid-for-notice {
    background: #FFFFFF;
    max-width: 500px;
    margin: 0 auto;
    padding: 1.5rem 2rem 2rem;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #E8EDF2;
    box-shadow: 0 4px 15px rgba(27, 58, 92, 0.1);
    text-align: center;
}
.paid-for-notice p { color: #999; font-size: 0.9rem; margin: 0; }

/* --- Corrections (2026-07-08): .paid-for-notice is the donate section's
       legal note (white box, crimson left border in the original), NOT part
       of the contact card. The contact card's own paid-for line is its last
       paragraph, divided by a top border like the original. --- */
.contact-mini-card { border-radius: 10px; padding: 2rem; }
.contact-mini-card p:last-child {
    border-top: 1px solid #E8EDF2;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    color: #999;
    font-size: 0.9rem;
}
.paid-for-notice {
    max-width: none;
    margin: 2rem 0 0;
    padding: 1.5rem;
    border-radius: 10px;
    border-top: none;
    border-left: 4px solid #9B2335;
    box-shadow: none;
    text-align: left;
    background: #FFFFFF;
}
.paid-for-notice p { color: #1B3A5C; font-size: 0.9rem; margin: 0; }

/* --- Footer campaign photo under the Follow Vic icons (2026-07-08) --- */
.footer-photo { margin-top: 1rem; }
.footer-photo img {
    max-width: 220px;
    height: auto;
    border-radius: 10px;
    border: 2px solid #D4A843;
    display: block;
}

/* =========================================================
   Header nav items styled as buttons (Donate, etc.)

   The WordPress menu editor puts a menu item's custom CSS class on the
   <li>, not on the <a>. That drew the button box on the list item while
   the link inside stayed inline around the text only, so clicking the
   padded area of the button did nothing. Strip the button chrome off the
   <li> and render the button on the link itself so the whole button is
   the hit target. (functions.php also copies the button class onto the
   <a> via nav_menu_link_attributes.)
   ========================================================= */
.nav-menu li.donate-btn,
.nav-menu li.prominent-donate-btn,
.nav-menu li.btn,
.nav-menu li.btn-primary,
.nav-menu li.btn-secondary,
.nav-menu li.btn-outline,
.nav-menu li.btn-dark {
    display: flex;
    align-items: center;
    background: none;
    color: inherit;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    cursor: auto;
}

.nav-menu li.donate-btn:hover,
.nav-menu li.prominent-donate-btn:hover,
.nav-menu li.btn:hover,
.nav-menu li.btn-primary:hover,
.nav-menu li.btn-secondary:hover,
.nav-menu li.btn-outline:hover,
.nav-menu li.btn-dark:hover {
    transform: none;
    box-shadow: none;
}

/* The link is the button: full padded box, whole area clickable. */
.nav-menu li.donate-btn > a,
.nav-menu a.donate-btn {
    display: inline-block;
    background: linear-gradient(135deg, #9B2335 0%, #C92E4C 100%);
    color: #FFFFFF !important;
    padding: 0.7rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.nav-menu li.donate-btn > a:hover,
.nav-menu a.donate-btn:hover {
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(155, 35, 53, 0.4);
}

/* No gold underline sweep on button-style nav links. */
.nav-menu li.donate-btn > a::after,
.nav-menu li.prominent-donate-btn > a::after,
.nav-menu li.btn > a::after,
.nav-menu li.btn-primary > a::after,
.nav-menu li.btn-secondary > a::after,
.nav-menu li.btn-outline > a::after,
.nav-menu li.btn-dark > a::after,
.nav-menu a.donate-btn::after,
.nav-menu a.btn::after,
.nav-menu a.btn-primary::after,
.nav-menu a.btn-secondary::after,
.nav-menu a.btn-outline::after,
.nav-menu a.btn-dark::after {
    content: none;
}

/* Any other nav link: give the anchor a comfortable hit area too. */
.nav-menu li > a {
    display: inline-block;
    padding: 0.25rem 0;
}

@media (max-width: 768px) {
    /* Full-width tap targets in the mobile drawer. */
    .nav-menu li { width: 100%; }
    .nav-menu li > a { display: block; width: 100%; }
    .nav-menu li.donate-btn > a,
    .nav-menu a.donate-btn { display: block; text-align: center; }
}