:root {
            --conservative: #0b2545;
            --liberal: #c1272d;
            --bloc: #3ba9ff;
            --green: #28a745;
            --ndp: #f37021;
            --dark-text: #222222;
            --muted-text: #555555;
            --border-grey: #e0e0e0;
			--primeminister: #404040;
			--lightblue: #cceffe;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background-color: #ffffff;
            color: var(--dark-text);
            font-size: 16px;
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        header {
            border-bottom: 1px solid var(--border-grey);
            background-color: #ffffff;
        }

        .top-bar {
            max-width: 960px;
            margin: 0 auto;
            padding: 0.9rem 1.4rem 0.5rem;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .nav-bar {
            border-top: 1px solid var(--border-grey);
            background-color: #ffffff;
        }

        .nav-inner {
            max-width: 960px;
            margin: 0 auto;
            padding: 0.35rem 1.4rem 0.45rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            font-weight: 700;
            color: var(--conservative);
            letter-spacing: 0.03em;
        }

        .logo-mark {
            width: 26px;
            height: 26px;
            border-radius: 4px;
            position: relative;
            background: linear-gradient(135deg, var(--liberal), var(--conservative));
        }

        .logo-mark::after {
            content: "🍁";
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .logo-text-main {
            font-size: 1.1rem;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .main-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 1.3rem;
            font-size: 0.95rem;
            align-items: center;
        }


        .main-nav > li {
            position: relative;
        }

        nav a {
            padding: 0.4rem 0.2rem;
            display: inline-block;
        }

        nav a:hover {
            text-decoration: underline;
        }

        .has-dropdown > a {
            padding-right: 1.1rem;
        }

        .has-dropdown > a::after {
            content: "▾";
            font-size: 0.7rem;
            margin-left: 0.25rem;
        }

        .dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 260px;
            background-color: #ffffff;
            border-radius: 10px;
            border: 1px solid var(--border-grey);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
            padding: 0.6rem 0.7rem;
            display: none;
            z-index: 20;
        }

        .has-dropdown:hover .dropdown {
            display: block;
        }

        .topics-dropdown {
            min-width: 740px;
            padding: 0.9rem 1rem;
        }

        .dropdown-inner {
            display: flex;
            align-items: flex-start;
            gap: 1.3rem;
        }

        .dropdown-summary {
            flex: 0 0 230px;
            padding-right: 0.9rem;
            margin-right: 0.4rem;
            border-right: 1px solid var(--border-grey);
        }

        .dropdown-summary-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--muted-text);
            margin-bottom: 0.25rem;
        }

        .dropdown-summary-text {
            font-size: 0.9rem;
            color: var(--muted-text);
            margin-bottom: 0.6rem;
        }

        .dropdown-summary-link {
            display: inline-block;
            padding: 0.25rem 0.65rem;
            border-radius: 999px;
            border: 1px solid var(--conservative);
            font-size: 0.85rem;
            color: var(--conservative);
            font-weight: 600;
            text-decoration: none;
        }

        .dropdown-summary-link:hover {
            background-color: var(--conservative);
            color: #ffffff;
            text-decoration: none;
        }

        .dropdown-list {
            list-style: none;
            margin: 0;
            padding: 0;
            flex: 1;
        }

        .dropdown-list-grid {
            display: grid;
            grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr);
            column-gap: 1.6rem;
            row-gap: 0.4rem;
        }

        .dropdown-list > li {
            padding: 0.08rem 0.1rem;
        }

        .dropdown-list > li.divider-item {
            padding: 0;
            grid-column: 1 / -1;
        }

        .dropdown-list > li > a {
            font-size: 0.9rem;
            padding: 0.2rem 0.15rem;
            white-space: nowrap;
        }

        .dropdown-list > li.has-subtopics > a {
            font-weight: 600;
        }

        .dropdown-submenu {
            list-style: none;
            margin: 0.15rem 0 0.1rem 0.9rem;
            padding: 0;
        }

        .dropdown-submenu li a {
            font-size: 0.85rem;
            padding: 0.15rem 0.15rem;
            white-space: nowrap;
        }

        .dropdown-divider {
            height: 1px;
            background-color: var(--border-grey);
            margin: 0.15rem 0;
        }

        .wiifm-dropdown {
            min-width: 320px;
        }

        .wiifm-dropdown .dropdown-list > li > a {
            white-space: normal;
            max-width: 280px;
        }

        .resources-dropdown {
            min-width: 360px;
        }

        .resources-dropdown .dropdown-list > li > a {
            white-space: normal;
        }

        .support-dropdown {
            min-width: 260px;
        }

        .breadcrumb-bar {
            border-bottom: 1px solid var(--border-grey);
            background-color: #fafafa;
        }

        .breadcrumb-inner {
            max-width: 960px;
            margin: 0 auto;
            padding: 0.4rem 1.4rem;
            font-size: 0.85rem;
            color: var(--muted-text);
        }

        .breadcrumb a {
            color: var(--conservative);
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

        .breadcrumb-sep {
            margin: 0 0.35rem;
        }

        main {
            max-width: 900px;
            margin: 0 auto;
            padding: 2.2rem 1.4rem 2.9rem;
        }

        .topic-title {
            font-size: 1.8rem;
            margin: 0 0 0.6rem;
            color: var(--dark-text);
        }

        .topic-intro {
            margin-bottom: 1.6rem;
            color: var(--muted-text);
            font-size: 1rem;
        }

        .topic-cards {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .topic-card {
            border-radius: 12px;
            border: 1px solid var(--border-grey);
            padding: 1rem 1.1rem 1.1rem;
            background-color: #ffffff;
        }

        .topic-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.4rem;
        }

        .topic-card-party {
            font-weight: 600;
            font-size: 1rem;
        }

        .topic-card-strip {
            height: 4px;
            border-radius: 999px;
            margin-bottom: 0.55rem;
        }

        .topic-strip-conservative { background: var(--conservative); }
        .topic-strip-liberal { background: var(--liberal); }
        .topic-strip-bloc { background: var(--bloc); }
        .topic-strip-green { background: var(--green); }
        .topic-strip-ndp { background: var(--ndp); }

        .topic-card-body {
            font-size: 0.95rem;
            color: var(--muted-text);
        }

        .hero {
            max-width: 960px;
            margin: 0 auto;
            padding: 3rem 1.4rem 2.6rem;
            text-align: center;
        }
		
		/* Wrapper around the two info cards */
		.hero-sub-container {
			margin-top: 1.5rem;      /* space below tagline */
			text-align: center;      /* center the cards themselves */
		}

		/* Individual cards */
		.hero-sub-box {
			display: block;          /* full control over width + centering */
			width: 80%;              /* make the card 75% of the hero width */
			max-width: 900px;        /* still cap it for large screens */
			margin: 0 auto 1rem;     /* center horizontally, add bottom gap */

			text-align: left;
			background-color: #ffffff; 
			border: 1px solid #d3d7e0;
			border-radius: 12px;
			padding: 1rem 1.5rem;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
		}


		/* Paragraph text inside the cards */
		.hero-sub-text {
			margin: 0;
			font-size: 0.98rem;
			line-height: 1.5;
		}


        .hero-title {
            font-size: 2.3rem;
            margin: 0 0 0.9rem;
            color: var(--conservative);
        }

        .hero-tagline {
            font-size: 1.05rem;
            margin: 0 0 0.6rem;
            color: var(--dark-text);
        }

        .hero-sub {
            max-width: 640px;
            margin: 0.5rem auto 2.1rem;
            color: var(--muted-text);
            font-size: 1rem;
        }

        .party-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.6rem;
            max-width: 960px;
            margin: 0 auto 1.9rem;
        }
        .leader-card-top,
        .leader-card-bottom {
            border-radius: 16px;
            border: 1px solid var(--border-grey);
            padding: 1.4rem 1.4rem;
            background-color: #ffffff;
            text-align: left;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
            transition: transform 0.08s ease-out,
                        box-shadow 0.08s ease-out,
                        border-color 0.08s ease-out;
        }

        .leader-card-top {
            display: flex;
            align-items: flex-start;
            gap: 1.25rem;
            margin-bottom: 1.0rem;
        }

        .leader-card-bottom {
            margin-top: 0;
        }

		/* =========================================================
		   Media Outlet Card Header Layout (logo left, content right)
		   ========================================================= */

		.outlet-card-top {
			display: flex;           /* already true via .leader-card-top, but explicit is fine */
			flex-wrap: nowrap;       /* prevents the right side from dropping under logo on wide screens */
			align-items: flex-start;
		}

		/* Fixed 200x200 logo box */
		.outlet-logo-box {
			width: 180px;
			height: 180px;
			flex: 0 0 180px;         /* fixed column */
			border-radius: 12px;
			border: 1px solid var(--border-grey);
			background: #ffffff;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* Make the logo fit nicely inside the square */
		.outlet-logo {
			width: 100%;
			height: 100%;
			object-fit: contain;     /* contain: no cropping; use cover if you want it cropped */
			display: block;
		}

		/* Right side content */
		.outlet-info {
			flex: 1;
			min-width: 0;            /* important so long text wraps properly inside flex */
		}

		.outlet-title {
			font-weight: 800;
			color: #000000;
			font-size: 1.15rem;
			line-height: 1.25;
			margin: 0 0 0.45rem 0;
		}

		.outlet-description {
			color: var(--muted-text);
			font-size: 0.95rem;
			line-height: 1.5;
			margin: 0 0 0.75rem 0;
		}

		/* Social buttons row under description */
		.outlet-social {
			display: flex;
			flex-wrap: wrap;
			gap: 0.4rem;
		}

		/* Mobile: stack logo above text for narrow screens */
		@media (max-width: 650px) {
			.outlet-card-top {
				flex-wrap: wrap;
			}

			.outlet-logo-box {
				width: 180px;
				height: 180px;
				flex: 0 0 180px;
				margin-bottom: 0.75rem;
			}

			.outlet-info {
				flex: 1 0 100%;
			}
		}


        .party-card {
            margin: 0;
            padding: 0;
            border: none;
            background-color: transparent;
            text-align: left;
        }


        .party-card:hover .leader-card-top,
        .party-card:hover .leader-card-bottom {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
            border-color: #cccccc;
        }

		
		/* Larger leader photo frame used ONLY on leaders-test.asp */
		.leader-thumb-large {
			width: 180px;
			max-width: 180px;
			border: 3px solid #1f4b7a;
			border-radius: 8px;
			overflow: hidden;
			box-sizing: border-box;

			/* Let .party-card's flex + gap handle spacing */
			flex-shrink: 0;
			margin-right: 0;     /* gap from .party-card is enough */
			margin-bottom: 0;
		}

		/* Image inside the large frame – hard max width 180px */
		.leader-thumb-large img {
			display: block;
			max-width: 180px;    /* hard cap */
			width: 100%;         /* fill the 180px frame */
			height: auto;        /* keep aspect ratio */
		}



        .leader-thumb {
            width: 110px;
            height: 150px;
            border-radius: 10px;
            flex-shrink: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
		
		.minister-thumb {
			width: 110px;
            height: 150px;
            border-radius: 10px;
            flex-shrink: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
		}
		
		.minister-thumb-conservative {
			border: 4px solid var(--conservative);
            background-color: #f4f6fa;
		}
		
		.minister-thumb-liberal {
			border: 4px solid var(--liberal);
            background-color: #fdf4f4;
		}
		
		.minister-thumb-bloc {
			border: 4px solid var(--bloc);
            background-color: #f3f8ff;
		}
		
		.minister-thumb-green {
			border: 4px solid var(--green);
            background-color: #f2fbf4;
		}
		
		.minister-thumb-ndp {
			border: 4px solid var(--ndp);
            background-color: #fff6ef;
		}

        .leader-thumb-conservative {
            border: 4px solid var(--conservative);
            background-color: #f4f6fa;
			background-image: url("../images/leaders/leader-conservative.jpg");
        }

        .leader-thumb-liberal {
            border: 4px solid var(--liberal);
            background-color: #fdf4f4;
			background-image: url("../images/leaders/leader-liberal.jpg");
        }

        .leader-thumb-bloc {
            border: 4px solid var(--bloc);
            background-color: #f3f8ff;
			background-image: url("../images/leaders/leader-bloc.jpg");
        }

        .leader-thumb-green {
            border: 4px solid var(--green);
            background-color: #f2fbf4;
			background-image: url("../images/leaders/leader-green.jpg");
        }

        .leader-thumb-ndp {
            border: 4px solid var(--ndp);
            background-color: #fff6ef;
			background-image: url("../images/leaders/leader-ndp.jpg");
        }

        /* Leaders grid: use inline <img> for the portrait and suppress the
           party background headshot inside the party-grid cards. */
        .party-grid .leader-thumb-large {
            background-image: none;
            background-size: auto;
            background-position: initial;
            background-repeat: no-repeat;
        }


		
		.leader-thumb-prime-minister {
            border: 4px solid var(--primeminister);		/* --liberal has to be changed to reflect the party in power */
            background-color: #fdf4f4;
			background-image: url("../images/leaders/leader-prime-minister.jpg");
        }

        /* === Leader thumbnail jump strip at top of leaders.asp === */

        .leader-thumb-strip-instruction {
            margin: 0.5rem 0 0.4rem 0;
            font-size: 0.9rem;
            color: var(--muted-text);
        }

        .leader-thumb-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 1.1rem;
            align-items: flex-start;
            justify-content: center;      /* center the whole row horizontally */
            margin: 80px 0 80px 0;        /* 80px space above and below the strip */
        }
		
		.leader-thumb-strip-slim {
            display: flex;
            flex-wrap: wrap;
            gap: 1.1rem;
            align-items: flex-start;
            justify-content: center;      /* center the whole row horizontally */
            margin: 40px 0 40px 0;        /* 30px space above and below the strip */
        }

        .leader-thumb-strip-item {
            width: 120px;
            text-align: center;
            font-size: 0.85rem;
        }

        .leader-thumb-strip-item a {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        /* Tight text spacing under thumbnails */
        .leader-thumb-strip-name {
            margin: 0;                /* remove default p margins */
            font-weight: 600;
        }

        .leader-thumb-strip-party {
            margin: 0.1rem 0 0 0;     /* small, single-space gap */
            font-size: 0.8rem;
            color: var(--muted-text);
        }

        /* Hover feedback on the thumbnail itself */
        .leader-thumb-strip-item a:hover .leader-thumb {
            box-shadow: 0 0 0 2px #4a6fb3;
            border-radius: 10px; /* matches .leader-thumb rounding */
        }



        .party-text {
            flex: 1;
        }

        .party-strip {
            height: 4px;
            border-radius: 999px;
            margin-bottom: 0.55rem;
        }

        .party-strip-conservative { background: var(--conservative); }
        .party-strip-liberal { background: var(--liberal); }
        .party-strip-bloc { background: var(--bloc); }
        .party-strip-green { background: var(--green); }
        .party-strip-ndp { background: var(--ndp); }
		.party-strip-prime-minister { background: var(--primeminister); }

        .party-name {
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .party-leader-label {
            font-size: 0.95rem;
            color: var(--muted-text);
            margin-bottom: 0.5rem;
        }

        .party-link {
            font-size: 0.95rem;
            color: var(--conservative);
            font-weight: 600;
        }

        .party-link span {
            font-size: 0.9em;
        }

        .note-row {
            font-size: 0.9rem;
            color: var(--muted-text);
            margin-top: 1.1rem;
        }

        footer {
            border-top: 1px solid var(--border-grey);
            padding: 1rem 1.4rem 1.2rem;
            font-size: 0.85rem;
            color: var(--muted-text);
            background-color: #ffffff;
        }

        .footer-inner {
            max-width: 960px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 0.6rem;
        }

        /* Profile layouts */
        .profile-layout {
            display: flex;
            flex-wrap: wrap;
            gap: 2.4rem;
            align-items: flex-start;
        }

        .profile-thumb-large {
            width: 230px;
            height: 280px;
            border-radius: 12px;
            border: 1px solid var(--border-grey);
            background-color: #f7f7f7;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            color: var(--muted-text);
            text-align: center;
            padding: 0.5rem;
        }

		/* MINISTER THUMB PROFILE */
		.profile-thumb-minister-conservative { 
			border: 4px solid var(--conservative); 
			background-size: cover;
			background-position: center;
		}

		.profile-thumb-minister-liberal { 
			border: 4px solid var(--liberal); 
			background-size: cover;
			background-position: center;
		}

		.profile-thumb-minister-bloc { 
			border: 4px solid var(--bloc); 
			background-size: cover;
			background-position: center;
		}

		.profile-thumb-minister-ndp { 
			border: 4px solid var(--ndp); 
			background-size: cover;
			background-position: center;
		}

		.profile-thumb-minister-green { 
			border: 4px solid var(--green); 			
			background-size: cover;
			background-position: center;
		}



		/* LEADER THUMB PROFILE */
        .profile-thumb-leader-conservative { 
			border: 4px solid var(--conservative); 
			background-image: url("../images/leaders/leader-conservative.jpg");
			background-size: cover;
			background-position: center;
		}

		.profile-thumb-leader-liberal { 
			border: 4px solid var(--liberal); 
			background-image: url("../images/leaders/leader-liberal.jpg");
			background-size: cover;
			background-position: center;
		}

		.profile-thumb-leader-bloc { 
			border: 4px solid var(--bloc); 
			background-image: url("../images/leaders/leader-bloc.jpg");
			background-size: cover;
			background-position: center;
		}

		.profile-thumb-leader-ndp { 
			border: 4px solid var(--ndp); 
			background-image: url("../images/leaders/leader-ndp.jpg");
			background-size: cover;
			background-position: center;
		}

		.profile-thumb-leader-green { 
			border: 4px solid var(--green); 
			background-image: url("../images/leaders/leader-green.jpg");
			background-size: cover;
			background-position: center;
		}
		
		.profile-thumb-prime-minister { 
			border: 4px solid var(--primeminister); 
			background-image: url("../images/leaders/leader-prime-minister.jpg");
			background-size: cover;
			background-position: center;
		}

        .profile-content {
            flex: 1;
            min-width: 360px;
        }

        .profile-content h2 {
            font-size: 1.3rem;
            margin: 0 0 0.4rem;
        }

        .profile-content p {
            margin: 0 0 0.7rem;
            color: var(--muted-text);
            font-size: 0.98rem;
        }

        .link-list {
            margin-top: 1rem;
        }

        .link-list ul {
            list-style: disc;
            padding-left: 1.4rem;
            margin: 0.4rem 0 0;
        }

        .link-list li {
            margin-bottom: 0.25rem;
        }

        .link-list a {
            color: var(--conservative);
        }

        .link-list a:hover {
            text-decoration: underline;
        }

        .methodology-box { border-radius: 12px; border: 1px solid var(--border-grey); padding: 1.1rem 1.2rem; margin-bottom: 1.6rem; }
        .methodology-list { margin: 0.4rem 0 0.4rem 1.3rem; }

/* Party logo strip (5 logos in a row) */
.party-logo-strip {
    margin: 2rem auto 0;
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.party-logo-strip-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.party-logo-strip-image {
    max-height: 48px;
    width: auto;
}

/* Party logo on leader profile pages (beside large portrait) */
.profile-party-logo-wrapper {
    margin-bottom: 0.9rem;
    display: flex;
    justify-content: flex-start;
}

.profile-party-logo-image {
    max-height: 68px; /* ~25% smaller than earlier 90px */
    height: auto;
}

.leader-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.leader-logo-image {
    max-height: 40px;
    height: auto;
}

/* Logo beneath party title on topic cards */
.topic-card-logo {
    margin-top: 0.35rem;
}

.topic-card-logo-image {
    max-width: 40px;
    height: auto;
}

/* Topic image placeholder at top-left of topic pages */
.topic-image-wrapper {
    margin: 0 0 1.4rem 0;
}

.topic-image-placeholder {
    width: 230px;
    height: 280px;
    border-radius: 12px;
    border: 1px solid var(--border-grey);
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #777;
}

/* Extra space between topic header (image + intro) and the first party card */
.topic-header-layout {
    margin-bottom: 1.8rem;
}

.link-list ul .subtopic-list {
    list-style: circle;
    margin-top: 0.25rem;
    margin-bottom: 0.35rem;
    padding-left: 1.4rem;
    font-size: 0.95rem;
}

.link-list ul .subtopic-list li {
    margin-bottom: 0.2rem;
}

/* Topic Summary Table layout: repeated cards with 5-column matrix per topic */
.topic-summary-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--border-grey);
    padding: 1.1rem 1.25rem 1.3rem;
    margin-bottom: 1.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.topic-summary-title {
    font-size: 1.05rem;
    margin: 0 0 0.35rem 0;
}

.topic-summary-intro {
    margin: 0 0 0.7rem 0;
    font-size: 0.95rem;
}

.topic-summary-table-wrapper {
    overflow-x: auto;
}

.topic-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.topic-summary-table th,
.topic-summary-table td {
    border: 1px solid var(--border-grey);
    padding: 0.5rem 0.6rem;
    vertical-align: top;
    text-align: left;
}

.topic-summary-table thead th {
    background-color: #f4f6fb;
    font-weight: 600;
}

.topic-summary-table tbody td {
    background-color: #ffffff;
}

/* Secondary link for individual party leader platform URLs */
.party-leader-platform {
    margin-top: 0.15rem;
    font-size: 0.9rem;
}


        /* Second row navigation under main nav */
        nav .main-nav-primary {
            justify-content: flex-start;
        }

        nav .main-nav-secondary-row {
            margin-top: 0.4rem;
            justify-content: flex-start;
            font-size: 0.9rem;
        }


/* Topics overview: call-to-action button for table summary */
.topic-summary-cta {
    margin: 1.4rem 0 1.6rem;
}

.topic-summary-cta .btn-topic-summary {
    display: inline-block;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background-color: var(--conservative);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--conservative);
}

.topic-summary-cta .btn-topic-summary:hover {
    background-color: #0f325f;
    border-color: #0f325f;
}


/* Topic Summary Table layout: repeated cards with 5-column matrix per topic */
.topic-summary-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--border-grey);
    padding: 1.1rem 1.25rem 1.3rem;
    margin-bottom: 1.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.topic-summary-title {
    font-size: 1.05rem;
    margin: 0 0 0.35rem 0;
}

.topic-summary-title a {
    color: inherit;
    text-decoration: none;
}

.topic-summary-title a:hover {
    text-decoration: underline;
}

.topic-summary-intro {
    margin: 0 0 0.7rem 0;
    font-size: 0.95rem;
}

.topic-summary-table-wrapper {
    overflow-x: auto;
}

.topic-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.topic-summary-table th,
.topic-summary-table td {
    border: 1px solid var(--border-grey);
    padding: 0.5rem 0.6rem;
    vertical-align: top;
    text-align: left;
}

/* Party-coloured header cells with logos */
.topic-summary-table thead th.party-header {
    font-weight: 600;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* Media outlet profile CTA button */
.btn-outlet-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.65rem 1.25rem;
    border-radius: 999px;

    background: linear-gradient(135deg, #eef3f7, #dbe6ef);
    /*color: #2a3742;*/

    font-size: 0.93rem;
    /*font-weight: 600;*/
    /*letter-spacing: 0.2px;*/
	
	color: #33424f;
	font-weight: 600;
	letter-spacing: 0.15px;

	
    text-transform: none;
    text-decoration: none;

    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);

    transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.btn-outlet-profile:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

.btn-outlet-profile:active {
    transform: translateY(0px);
}


.btn-outlet-profile:focus-visible {
    outline: 3px solid rgba(59,169,255,0.45);
    outline-offset: 2px;
}

/* Optional: make it full-width on phones */
@media (max-width: 650px) {
    .btn-outlet-profile {
        width: 100%;
    }
}


.party-header-inner {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.party-header-logo {
    max-width: 22px;
    height: auto;
    display: block;
}

/* Specific colours per party using CSS variables */
.topic-summary-table thead th.party-header-conservative {
    background-color: var(--conservative);
    color: #ffffff;
}

.topic-summary-table thead th.party-header-liberal {
    background-color: var(--liberal);
    color: #ffffff;
}

.topic-summary-table thead th.party-header-bloc {
    background-color: var(--bloc);
    color: #062341; /* dark text for contrast on lighter blue */
}

.topic-summary-table thead th.party-header-ndp {
    background-color: var(--ndp);
    color: #ffffff;
}

.topic-summary-table thead th.party-header-green {
    background-color: var(--green);
    color: #ffffff;
}

/* Vertical layout for topic summary tables (Party vs Description, 5 rows) */
.topic-summary-table-vertical {
    width: 100%;
    border-collapse: collapse;
}

.topic-summary-table-vertical .party-col-header {
    width: 28%;
}

.topic-summary-table-vertical .desc-col-header {
    width: 72%;
}

.topic-summary-table-vertical th,
.topic-summary-table-vertical td {
    border: 1px solid var(--border-grey);
    padding: 0.5rem 0.6rem;
    vertical-align: top;
    text-align: left;
}

.party-row {
    font-weight: 600;
}

.party-row-inner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.party-row-logo {
    max-width: 24px;
    height: auto;
    display: block;
}

/* Background colours per party row */
.topic-summary-table-vertical .party-row-conservative {
    background-color: var(--conservative);
    color: #ffffff;
}

.topic-summary-table-vertical .party-row-liberal {
    background-color: var(--liberal);
    color: #ffffff;
}

.topic-summary-table-vertical .party-row-bloc {
    background-color: var(--bloc);
    color: #062341; /* dark text for contrast on lighter blue */
}

.topic-summary-table-vertical .party-row-ndp {
    background-color: var(--ndp);
    color: #ffffff;
}

.topic-summary-table-vertical .party-row-green {
    background-color: var(--green);
    color: #ffffff;
}

/* Ensure description column text is readable and not bold */
.topic-summary-table-vertical td:nth-child(2) {
    font-weight: normal;
}

/* Topic summary card header with actions */
.topic-summary-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.topic-summary-card-header .topic-summary-title {
    margin: 0;
}

.topic-summary-card-header .topic-summary-title a {
    color: inherit;
    text-decoration: none;
}

.topic-summary-card-header .topic-summary-title a:hover {
    text-decoration: underline;
}

.topic-card-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.topic-card-actions .card-expand,
.topic-card-actions .card-collapse {
    border: 1px solid var(--border-grey);
    background-color: #ffffff;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.topic-card-actions .card-expand:hover,
.topic-card-actions .card-collapse:hover {
    background-color: #f1f1f1;
}

/* Collapsible card body */
.topic-summary-card-body {
    margin-top: 0.15rem;
}

.topic-summary-card.collapsed .topic-summary-card-body {
    display: none;
}

/* When collapsed, show only the "expand" (down) arrow; when expanded, show only "collapse" (up) */
.topic-summary-card .card-expand {
    display: none;
}

.topic-summary-card .card-collapse {
    display: inline-block;
}

.topic-summary-card.collapsed .card-expand {
    display: inline-block;
}

.topic-summary-card.collapsed .card-collapse {
    display: none;
}

/* Expand / Collapse All controls above cards */
.topic-summary-controls {
    margin: 1rem 0 1.4rem;
}

.topic-summary-control-btn {
    margin-right: 0.6rem;
}

.topic-summary-control-btn.btn-secondary {
    background-color: #f5f5f5;
    border-color: var(--border-grey);
    color: #333333;
}

/* Leader cards – extended synopsis and social links */
.leader-synopsis {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;

    overflow-wrap: anywhere;
    word-wrap: break-word;
}

        /* Extra spacing between paragraphs inside leader synopsis for readability */
        p.leader-synopsis {
            margin: 0 0 0.95rem 0;   /* push each paragraph apart vertically */
        }

        p.leader-synopsis:last-child {
            margin-bottom: 0;        /* avoid extra gap after the last paragraph */
        }



/*
.leader-footnote {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #666666;
}
*/

/* Leader card footnotes – smaller, softer, slightly indented */
/* Leader card footnotes – smaller, softer, slightly indented */
.leader-footnote {
    font-size: 0.8rem;        /* smaller than body text */
    color: #666666;           /* softer grey */
    margin-top: 1rem;         /* clear space above, under social links */
    line-height: 1.4;

    border-top: 1px solid #dddddd;  /* subtle divider */
    padding-top: 0.5rem;

    padding-left: 0.75rem;    /* indent block */
    text-indent: -0.5rem;     /* hanging indent so numbers sit left */

    /* Allow long source labels / URLs to wrap on small screens */
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* Apply the same wrapping rules to the actual markup: <ol class="footnote-list"> */
.footnote-list li,
.footnote-list li a {
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-all;  /* extra-aggressive break for very long URLs */
    max-width: 100%;
}


.leader-footnote a {
    color: inherit;
    text-decoration: underline;

    /* Allow long URLs to break mid-word instead of forcing horizontal scroll */
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* Leader cards – extended synopsis and social links */
.leader-card-footer {
    margin-top: 1.25rem;        /* was 0.75rem – more space above socials */
    margin-bottom: 1.25rem;     /* new – space below socials */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.leader-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #ffffff;
    background-color: #444444;
}

.social-icon .icon-letter {
    margin-right: 0.25rem;
    font-size: 0.8rem;
}

.social-icon .icon-label {
    text-transform: none;
}

/* Platform-specific colours */
.social-linkedin {
    background-color: #0A66C2;
}

.social-instagram {
    background-color: #C13584;
}

.social-youtube {
    background-color: #FF0000;
}

.social-x {
    background-color: #111111;
}

.social-facebook {
    background-color: #1877F2;
}

/* Make sure party-link still looks like a button when used inside the footer */
.leader-card-footer .party-link {
    margin-top: 0;
}


/* === New global header & footer layout (mobile-friendly) === */

.header-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 16px 6px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hamburger-wrapper {
    display: none;
    align-items: center;
    gap: 6px;
}

.hamburger {
    width: 26px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.hamburger span {
    display: block;
    height: 3px;
    background-color: var(--dark-text);
    border-radius: 2px;
}

.hamburger-label-text {
    font-size: 0.8rem;
    color: var(--dark-text);
}

#nav-toggle {
    display: none;
}

.top-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 10px;
    justify-content: flex-end;
}

.top-nav > li {
    position: relative;
    font-size: 0.9rem;
}

.top-nav > li > a {
    color: var(--dark-text);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 4px;
    display: block;
}

.top-nav > li > a:hover {
    background-color: #f0f0f0;
}

.top-nav > li.has-sub > a::after {
    content: "▾";
    font-size: 0.65rem;
    margin-left: 4px;
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    color: var(--dark-text);
    min-width: 220px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
    border-radius: 4px;
    padding: 6px 0;
    z-index: 20;
}

.sub-menu li {
    list-style: none;
}

.sub-menu li a {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 1.2;
}

.sub-menu a {
    display: block;
    padding: 6px 10px;
    font-size: 0.8rem;
    color: var(--dark-text);
    text-decoration: none;
}

.sub-menu a:hover {
    background-color: #f5f5f5;
}

.top-nav > li:hover > .sub-menu {
    display: block;
}

/* Mobile behaviour for header & nav */
@media (max-width: 768px) {
    .header-inner {
        flex-wrap: wrap;
        align-items: center;
    }

    .hamburger-wrapper {
        display: flex;
        margin-left: auto;
    }

    .top-nav {
        display: none;
        flex-direction: column;
        background-color: #ffffff;
        padding: 8px 0 10px 0;
        border-top: 1px solid var(--border-grey);
        margin-top: 6px;
    }

    .top-nav > li {
        padding: 2px 12px;
    }

    .top-nav > li > a {
        padding: 8px 4px;
    }

    .sub-menu {
        position: static;
        box-shadow: none;
        border-radius: 4px;
        margin-top: 4px;
        border: 1px solid var(--border-grey);
    }

    .sub-menu a {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .top-nav > li:hover > .sub-menu {
        display: none;
    }

    .top-nav > li.open > .sub-menu {
        display: block;
    }

    #nav-toggle:checked ~ nav .top-nav {
        display: flex;
    }
}

/* New footer layout */
footer {
    border-top: 1px solid var(--border-grey);
    padding: 1.2rem 0 0.8rem 0;
    font-size: 0.85rem;
    color: var(--muted-text);
    background-color: #f0f0f0;
}

.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr;
    gap: 18px;
    font-size: 0.8rem;
}

.footer-col:first-child {
    padding-right: 24px;
}

.footer-col h3 {
    font-size: 0.9rem;
    margin: 0 0 6px 0;
    font-weight: 600;
}

.footer-col p {
    margin: 3px 0;
    color: var(--muted-text);
    line-height: 1.4;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin: 3px 0;
}

.footer-col a {
    color: #004c99;
    text-decoration: none;
}

.footer-col a:hover {
    text-decoration: underline;
    color: #002a55;
}

.footer-bottom {
    border-top: 1px solid var(--border-grey);
    margin-top: 14px;
    padding-top: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--muted-text);
}

.leader-thumb-parliament {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--border-grey);  /* keep outer border */
    background-color: #ffffff !important;  /* force white interior */
    padding: 0;                             /* no extra grey padding */
}

.leader-thumb-parliament img {
    max-width: 94%;
    max-height: 94%;
    width: auto;
    height: auto;
    object-fit: contain;
    border: none;          /* remove any inner border */
    border-radius: 0;      /* optional: remove rounding if you see an inner edge */
    box-shadow: none;      /* just in case there was a shadow */
}



/*
============================================
 UPDATE START: 2025-DEC-10 19:41
============================================
*/
.report-card-leader-name {
    font-weight: 600;
    display: inline-block;
    margin-bottom: 0.15rem;
}

.report-card-leader-positions {
    display: inline-block;
    font-size: 0.85rem;
    color: #555555;
}
/*
============================================
 UPDATE END: 2025-DEC-10 19:41
============================================
*/

.report-card-meta-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #c4ccd8 !important;   /* outer frame */
    font-size: 0.9rem;  /*0.9rem;*/
}

/* Lines + top alignment for all cells */
.report-card-meta-table th,
.report-card-meta-table td {
    border: 1px solid #c4ccd8 !important;   /* grid lines */
    padding: 0.45rem 0.6rem;
    vertical-align: top !important;         /* "Purpose" aligns to the top */
}

/* Shaded first column (light grey/blue) */
.report-card-meta-table th {
    width: 32%;
    background-color: #eef2f9 !important;   /* subtle grey-blue */
    text-align: left;
    font-weight: 600;
    color: #333333;
    white-space: nowrap;
}

/* White field cells for values */
.report-card-meta-table td {
    background-color: #ffffff !important;
    color: #444444;
}

/* ============================================================
   Report Card (Topics): paragraph spacing + sources formatting
   ============================================================ */

.report-card-body p {
    margin: 0 0 0.85rem 0;      /* visible paragraph spacing */
}

.report-card-body p:last-child {
    margin-bottom: 0;
}

.rc-sup {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 0;
}

.report-card-sources {
    text-align: left !important;
    font-size: 0.74rem;        /* smaller sources */
    color: #555555;
}

.report-card-sources-block {
    margin: 0;
    padding: 0;
}

.report-card-source-item {
    margin: 0 0 0.65rem 0;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;
}

.report-card-source-item:last-child {
    margin-bottom: 0;
}

.report-card-sources a,
.report-card-sources a:visited,
.report-card-sources a:hover,
.report-card-sources a:active,
.report-card-sources a:focus {
    color: inherit !important;
    text-decoration: underline !important;
}


/* Main leader profile container */
.leader-card {
    max-width: 1000px;          /* adjust to taste */
    margin: 1.5rem auto 2rem;   /* center the whole profile */
}

/* Generic card styling for leader sections */
.leader-meta-card,
.leader-bio-card,
.leader-narrative-card,
.leader-links-card,
.leader-footnotes {
    background-color: #ffffff;
    border: 1px solid #d3d7e0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    text-align: left;
}

/* Make long labels/URLs in Official Profiles & References and Footnotes wrap cleanly */
.leader-links-list,
.footnote-list {
    max-width: 100%;
    white-space: normal !important;
    /* Show them as numbered lists by default */
    list-style: decimal;
    margin-left: 0;
    padding-left: 1.5rem;   /* indent numbers nicely */
}

.leader-links-list li,
.footnote-list li {
    /* keep default display:list-item so numbers show */
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;   /* break inside long URLs if needed */
}

.leader-links-list li a,
.footnote-list li a {
    /* link can still wrap; no need for block here */
    text-decoration: underline;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;
}


/* PM Report Card + Leaders / Leader Profile layout on mobile (<=768px) */
@media (max-width: 768px) {

    /* Report card table: keep it narrow and readable */
    .report-card-meta-table {
        width: 100%;
        table-layout: fixed; /* columns respect explicit widths */
    }

    .report-card-meta-table th[scope="row"] {
        width: 40%;            /* narrower label column */
        white-space: normal;   /* allow labels to wrap */
        vertical-align: top;
    }

    .report-card-meta-table td {
        width: 60%;            /* more room for content */
    }

    /* General page content padding on small screens */
    main {
        max-width: 100%;
        width: 100%;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
        box-sizing: border-box;   /* prevents padding from widening the layout */
    }

    /* Leader profile cards: never allow horizontal overflow */
    .leader-card,
    .leader-card-top,
    .leader-card-bottom,
    .leader-links-card,
    .leader-footnotes {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Allow the leader header (photo + text) to wrap nicely on narrow screens */
    .leader-card-top {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* When the photo wraps above the text, add a bit of spacing */
    .leader-thumb-large {
        margin-bottom: 0.75rem;
    }

    /* Leaders page: thumbnail strip and party grid must fit the viewport */
    .leader-thumb-strip,
    .party-grid {
        max-width: 100%;
        width: 100%;
        margin: 0 auto 1.9rem;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        overflow-x: hidden;   /* no horizontal scroll from these containers */
    }

    
}


/* Extra separation above "Biography at a Glance" card on leader-profile.asp */
.leader-bio-card {
    margin-top: 0.75rem;   /* adjust up/down to taste (e.g. 0.75–1.25rem) */
}


/* Extra gap above the Footnotes card on leader-profile.asp */
.leader-footnotes {
    margin-top: 1.4rem;   /* buffer between editorial disclaimer and footnotes card */
}

/* Optional: add a little spacing between stacked sections */
.leader-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Give each competency card breathing room from the one above it */
.leader-competency-card {
    margin-top: 1.75rem !important;  /* vertical space between cards */
}

/* Tighten top padding inside competency cards only */
.leader-competency-card .party-text {
    padding-top: 0;     /*0.4rem;*/
}

/* Ensure the header itself does not add extra top margin */
.leader-competency-card .report-card-header {
    margin-top: 0;
	margin-bottom: 0;  /* new: removes gap between this and the competency header */
}

.leader-competency-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem 0;   /* small space under the title row */
}

/* Reset heading margins inside the competency header */
.leader-competency-header h1,
.leader-competency-header h2,
.leader-competency-header h3,
.leader-competency-header h4 {
    margin: 0;
}

.leader-competency-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    background-color: #4a6fb3;  /* default blue icon */
}

/* Optional: different tints per category */
.leader-competency-header--promises  .leader-competency-icon { background-color: #2c7be5; } /* Election Promises */
.leader-competency-header--economy   .leader-competency-icon { background-color: #18a16e; } /* Economic */
.leader-competency-header--ethics    .leader-competency-icon { background-color: #ff9f1c; } /* Ethics */
.leader-competency-header--security  .leader-competency-icon { background-color: #d64545; } /* Security */
.leader-competency-header--social    .leader-competency-icon { background-color: #8b5cf6; } /* Health/Social */
.leader-competency-header--transparency .leader-competency-icon { background-color: #374151; } /* Transparency */

.report-card-disclaimer {
    margin-top: 0.9rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #c4ccd8;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #666666;
}

.report-card-how-leaders-are-scored {
    margin-top: 0.9rem;
    padding-top: 0.6rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #666666;
}

/* Rumour Radar – hero thumbnail size (approx. 200 x 200) */
.rumour-hero-thumb {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
}

/* Space between filter button and rumour card(s) */
.rumour-cards {
    margin-top: 2rem;
}

/* Rumour card visual refinement */
.rumour-card {
    background-color: #f7f7f7;      /* light grey shading */
    padding: 1.75rem;
    border-radius: 12px;
}

/* Rumour card header: add inner padding / buffer */
.rumour-card-header {
    background-color: #ffffff;   /* keep the white box */
    border-radius: 8px;
    padding: 0.75rem 1rem;       /* this is the buffer you were missing */
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Definition list styling inside the rumour card */
.rumour-meta {
    margin: 0;
}

.rumour-meta-item {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

/* Questions (DT) use an accent colour and stand out more */
.rumour-meta dt {
    margin: 0 0 0.25rem 0;
    font-weight: 600;
    /* Reuse your existing conservative accent, or adjust if needed */
    color: var(--conservative);
}

/* Answers (DD) stay neutral and easy to read */
.rumour-meta dd {
    margin: 0;
    color: #333333;
}

/* Status tag styling for the truth rating */
.rumour-status-tag {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    background-color: #e3e7f0;
}

/* Optional variation: misleading rating tint */
.rumour-status-misleading {
    background-color: #f6e4e4;
}

/* Rumour Radar – filter card container */
.rumour-filter-card {
    margin-top: 1rem;
    padding: 1.5rem 1.75rem;
    border-radius: 16px;
    background-color: #f8fbff;       /* subtle baby blue */
    border: 1px solid #d3dfef;       /* light blue-grey border */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* Grid layout for form fields – stacked full-width rows */
.rumour-filter-grid {
    display: grid;
    grid-template-columns: 1fr;      /* single column: topic on top, rumour below */
    gap: 0.9rem;
    margin-top: 1rem;
}

/* Individual field "boxes" with lines */
.rumour-filter-cell {
    background-color: #ffffff;
    border: 1px solid #e0e6f0;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
}

.rumour-filter-cell label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333b4a;
    margin-bottom: 0.35rem;
}

.rumour-filter-cell select,
.rumour-filter-cell input[type="text"],
.rumour-filter-cell input[type="date"] {
    font-size: 0.95rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #c5cedd;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;          /* ensure full-width inside cell */
}

/* Button row: primary + secondary */
.rumour-filter-actions {
    margin-top: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Secondary button style for "Top 5" */
.btn-topic-secondary {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid #4a5b71;
    background-color: #ffffff;
    color: #4a5b71;
    font-size: 0.95rem;
    cursor: pointer;
}

.btn-topic-secondary:hover {
    background-color: #e6edf7;
}

/* Top 5 list styling */
.rumour-toplist {
    margin-top: 1.4rem;
    border-top: 1px solid #d5dde8;
    padding-top: 1rem;
}

.rumour-toplist-title {
    margin: 0 0 0.35rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2b3442;
}

.rumour-toplist-intro {
    margin: 0 0 0.6rem 0;
    font-size: 0.9rem;
    color: #555b66;
}

.rumour-toplist ul {
    margin: 0;
    padding-left: 1.2rem;
}

.rumour-toplist li {
    margin-bottom: 0.25rem;
}

.rumour-toplist a {
    text-decoration: underline;
}
/* Extra spacing between the filter card and the rumour answer card */
.rumour-cards {
    margin-top: 2.25rem;
}

/* Logo row with "View Leader's Detailed Profile" link */
.leader-logo-row {
    margin-top: 0.75rem;        /* a bit more breathing room above */
    margin-bottom: 1.0rem;      /* sizeable space before synopsis text */
    display: flex;
    align-items: center;        /* vertically centre link with logo */
    justify-content: space-between;
    gap: 0.75rem;
}

/* Inside the logo row, remove the extra top margin from .leader-logo */
.leader-logo-row .leader-logo {
    margin-top: 0;
}

/* Ensure the link beside the logo behaves nicely in the row */
.leader-logo-row .party-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 1rem;
}

/* === "Back to top" link under each leader card === */

.leader-back-to-top {
    margin-top: 0.6rem;
    text-align: right;
}

.leader-back-to-top a {
    font-size: 0.85rem;
    text-decoration: underline;
    color: #004c99;
}

.leader-back-to-top a:hover {
    color: #002a55;
}

/* Intro block for Independent News Channels page */
.independent-intro-block {
    margin-bottom: 1.75rem;          /* space beneath the intro text */
    font-size: 0.98rem;
    line-height: 1.6;
}

/* Thumbnail floated left with text wrapping around it */
.independent-thumb {
    float: left;
    width: 200px;
    height: 200px;                  /* fixed thumbnail size */
    max-width: none;                /* don't shrink below 200px on wider screens */
    margin: 0 1.6rem 1.2rem 0;      /* more space on right + bottom */
    border-radius: 10px;            /* soft corners */
    border: 1px solid #d3d7e0;      /* subtle frame */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    object-fit: cover;              /* crop to fill 200x200 nicely */
}


/* Ensure paragraphs have nice vertical spacing */
.independent-intro-block p {
    margin-bottom: 0.9rem;
}

/* Clear the float so later content doesn’t wrap around the image */
.independent-intro-block::after {
    content: "";
    display: block;
    clear: both;
}

/* Thin grey separator with white space above and below */
.independent-separator {
    border: 0;
    border-top: 1px solid #d3d7e0;   /* thin grey line */
    margin: 1.25rem 0 1.5rem 0;      /* white space before & after the line */
}


@media (max-width: 800px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-col:first-child {
        padding-right: 0;
    }
}

@media (max-width: 550px) {
    .footer-inner {
        padding: 0 12px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}






/* Make hero sub-boxes wider on small screens (e.g., iPhone) */
@media (max-width: 600px) {
    .hero {
        padding-left: 0.4;		/*8rem;   /* was 1.4rem */
        padding-right: 0.4;		/*8rem;*/
    }

    .hero-sub-box {
        width: 90%;   /* 87.5%;   /* was 75%; halves the outer white space */
    }
}

@media (max-width: 600px) {
    .hero {
        padding-left: 0.8rem;   /* was 1.4rem */
        padding-right: 0.8rem;
    }

    .hero-sub-box {
        width: 87.5%;
    }
}

/* === Global safety net: prevent tiny horizontal overflow on mobile === */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.page-inner {
    max-width: 100%;
    overflow-x: hidden;
}


/* Report Card: scoring notes must preserve newlines and blank lines */
.report-card-letter-grade .scoring-notes {
    display: block !important;
    white-space: pre-wrap !important;   /* preserves CR/LF and blank lines */
    margin-top: 10px;
    font-weight: normal;
    line-height: 1.45;
	
	/* kill any inherited paragraph/first-line indent */
    text-indent: 0 !important;

    /* ensure no left padding/margin creates a "hanging" look */
    padding-left: 0 !important;
    margin-left: 0 !important;

    /* prevents tab characters from creating a visible indent */
    tab-size: 0;
}

.details-label{
    display:block;
    margin-top:10px;
    margin-bottom:6px;
}

.report-card-letter-grade .scoring-notes{
    display:block !important;
    margin-top:0 !important;   /* don't add more space here */
}



/* Ensure media-outlets.asp header never wraps under the logo on desktop */
.leader-card-top.outlet-card-top {
    flex-wrap: nowrap;
}

/* =========================================================
   CINN-style "punch" header + matching footer (Mockup)
   Files: header-new.asp, footer-new.asp, mockup.asp
   ========================================================= */

:root {
    --brand-navy: #142e51;
    --brand-navy-2: #0f233f;
    --brand-red: #e80002;
    --brand-ice: #cfe0ef;
    --brand-card-border: #d7dde6;
	--brand-rose: rgba(232, 0, 2, 0.10);
}

/* Sticky footer shell (opt-in via .page-shell wrapper) */
html, body {
    height: 100%;
}

.page-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-shell main {
    flex: 1 0 auto;
}

/* ---------------------------------------------------------
   Header (CINN outreach look)
   --------------------------------------------------------- */
.byv-header {
    border-bottom: none;
    background: transparent;
}

.byv-header .byv-accent {
    height: 6px;
    background: var(--brand-red);
}

.byv-header .byv-brand {
    background: var(--brand-navy);
}

/* Tighten the brand bar height (reduce space above/below logos) */
.byv-header .byv-brand-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0px 16px 0px 16px;   /* was 14px 16px 8px 16px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.byv-header .byv-brand-logos {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.byv-header .byv-brand-logos a {
    display: inline-block;
}

/* Reduce any extra whitespace caused by the images themselves */
.byv-header .byv-brand-logos img {
    display: block;
    height: auto;
    border: 0;
    max-width: 100%;
    margin: 0;                   /* ensure no default spacing */
}

/* If your centered tagline is inside the top bar now, keep it tight */
.byv-header .byv-tagline {
    margin: 0;
    padding: 0;
	color: #ffffff;
    line-height: 1.1;
}

/* =========== START ODOMETER ====================*/
/* ---------------------------------------------------------
   Header: Odometer (static) under the tagline
   --------------------------------------------------------- */

.byv-header .byv-brand-center {
    text-align: center;
}

.byv-header .byv-odometer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.byv-header .byv-odometer-label {
    margin: 0;
    padding: 0;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.byv-header .byv-odometer-digits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.byv-header .byv-odometer-digit {
    width: 29px;
    height: 41px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(210, 220, 232, 0.95);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.byv-header .byv-odometer-digit::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    border-top: 1px solid rgba(230, 236, 244, 0.90);
    transform: translateY(-50%);
}

.byv-header .byv-odometer-digit-char {
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: 800;
    color: var(--brand-navy, #142e51);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .byv-header .byv-odometer-digits { gap: 4px; }
    .byv-header .byv-odometer-digit { width: 24px; height: 36px; border-radius: 7px; }
    .byv-header .byv-odometer-digit::after { left: 4px; right: 4px; }
}

@media (max-width: 420px) {
    .byv-header .byv-odometer-digits { gap: 3px; }
    .byv-header .byv-odometer-digit { width: 21px; height: 32px; border-radius: 6px; }
    .byv-header .byv-odometer-digit::after { left: 3px; right: 3px; }
}


/* =========== END ODOMETER =================*/

/*
.byv-header .byv-tagline {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 14px 16px;
    color: var(--brand-ice);
    font-size: 13px;
    letter-spacing: 0.2px;
}
*/

.byv-header .byv-nav {
    background: #ffffff;
    border-bottom: 1px solid var(--border-grey, #dadfe6);
}

.byv-header .header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 16px 10px 16px;
}

/* NAV PILL MODIFED AS CHILD CLASS */

/* Optional outline pill class (matches .is-primary pill sizing) */
.byv-header .top-nav > li > a.is-outline {
    background: #46658E;  /*#ffffff;*/
    color: #ffffff;   /*var(--brand-navy);*/

    /* Use a real border, but compensate padding so height matches .is-primary */
    border: 1px solid var(--brand-navy);
    padding: 5px 10px;              /* .is-primary uses 6px 10px with no border */
}

.byv-header .top-nav > li > a.is-outline:hover {
    background-color: rgba(20, 46, 81, 0.08); /* same hover feel as other nav pills */
}

/* Accessibility / keyboard focus */
.byv-header .top-nav > li > a.is-outline:focus-visible {
    outline: 3px solid rgba(20, 46, 81, 0.35);
    outline-offset: 2px;
}


/* NAV PILL MODIFIED AS CHILD CLASS **** END **** */


/* Slightly "punchier" nav pills */
.byv-header .top-nav > li > a {
    padding: 6px 10px;
    border-radius: 999px;
}

/* Make .btn-based pills match the height of non-.btn pills like .is-primary */
.byv-header .top-nav > li > a.btn {
    line-height: 1.2; /* overrides .btn line-height:1 in the header menu */
}


.byv-header .top-nav > li > a:hover {
    background-color: rgba(20, 46, 81, 0.08);
}

/* Optional primary pill class (used in mockup) */
.byv-header .top-nav > li > a.is-primary {
    background: var(--brand-navy);
    color: #ffffff;
}

.byv-header .top-nav > li > a.is-primary:hover {
    background: var(--brand-navy-2);
}

/* Dropdown polish */
.byv-header .sub-menu {
    border: 1px solid var(--brand-card-border);
    border-radius: 12px;
    padding: 10px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

.byv-header .sub-menu::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--brand-red);
    margin-bottom: 6px;
}

.byv-header .sub-menu a {
    padding: 8px 14px;
    font-size: 0.86rem;
}

.byv-header .sub-menu a:hover {
    background: rgba(20, 46, 81, 0.07);
}

/* 2) Anchor nested <ul class="sub-menu"> to the parent <li> */
.byv-header .sub-menu li {
    position: relative;
}

/* Nested dropdown */
.byv-header .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    right: auto;
    margin-left: 6px;
}

/* 3) Desktop: show ANY level of submenu on hover (not just top-level) */
@media (min-width: 769px) {
    .byv-header .top-nav li:hover > .sub-menu {
        display: block;
    }
	
	.byv-header .top-nav li.open > .sub-menu {
        display: block; /* supports nested levels */
    }
}

/* Mobile menu background + spacing */
@media (max-width: 768px) {
    .byv-header .top-nav {
        border-top: 1px solid var(--border-grey, #dadfe6);
        border-bottom: 1px solid var(--border-grey, #dadfe6);
    }

    .byv-header .top-nav > li {
        padding: 2px 12px;
    }

    .byv-header .sub-menu {
        margin-top: 6px;
    }

    .byv-header .sub-menu::before {
        display: none;
    }

    .byv-header .sub-menu .sub-menu {
        left: auto;
        margin-left: 0;
    }
}

/* Optional: show a right-arrow indicator for nested submenu items */
.byv-header .sub-menu > li.has-sub > a::after {
    content: ">";
    float: right;
    font-size: 0.75rem;
    margin-left: 10px;
    opacity: 0.7;
}

/* Buttons + alert ribbon */
.btn {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    border: 1px solid transparent;
    text-decoration: none;
}

.btn-primary {
    background: var(--brand-navy);
    color: #ffffff;
}

.btn-secondary {
    background: var(--lightblue);
	color: var(--brand-navy);
}

.btn-rose {
	background: var(--brand-rose);
	color: #7a0b0e;
    border: 1px solid rgba(232, 0, 2, 0.25);    
}

.btn-primary:hover {
    background: var(--brand-navy-2);
}

.btn-ghost {
    background: #ffffff;
    color: var(--brand-navy);
    border-color: rgba(20, 46, 81, 0.35);
}

/* Red-border variant for ghost buttons */
.btn-ghost-red {
    border-color: #e80002;
}

.btn-ghost-red:hover {
    background: rgba(232, 0, 2, 0.06);
}


.btn-ghost:hover {
    background: rgba(20, 46, 81, 0.06);
}

.site-alert {
    background: #ffffff;
    border-bottom: 1px solid var(--border-grey, #dadfe6);
}

.site-alert-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    gap: 12px;
    flex-wrap: wrap;
	justify-content: center; /* <-- add this */
}

.site-alert-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.site-alert-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(232, 0, 2, 0.10);
    color: #7a0b0e;
    border: 1px solid rgba(232, 0, 2, 0.25);
    font-weight: 800;
    letter-spacing: 0.2px;
    font-size: 0.85rem;
}

.site-alert-text {
    color: var(--muted-text, #6b7280);
    font-size: 0.95rem;
}

.site-alert-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Footer */
.byv-footer {
    border-top: none;
    padding: 0;
    background: var(--brand-navy);
    color: var(--brand-ice);
}

.byv-footer .byv-accent {
    height: 6px;
    background: var(--brand-red);
}

.byv-footer .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 16px 14px 16px;
}

.byv-footer h3 {
    color: #ffffff;
}

.byv-footer p,
.byv-footer li,
.byv-footer .footer-bottom {
    color: rgba(207, 224, 239, 0.95);
}

.byv-footer a {
    color: rgba(255, 255, 255, 0.95);
}

.byv-footer a:hover {
    text-decoration: underline;
}

.byv-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    margin-top: 14px;
    padding-top: 12px;
}

/* =============================================================
   HEADER / NAV CENTERING FIX (Option A) **** START ****
   Goal: Make the nav align perfectly under the banner on ALL pages,
         regardless of whether the page uses .page-shell.
   ============================================================= */

/* 1) Ensure BOTH inner shells are centered and identical */
.byv-header .byv-brand-inner,
.byv-header .byv-nav .header-inner {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
  box-sizing: border-box;
}

/* 2) Fix the "shift left" issue by removing any horizontal offsets
      that may have been added to .byv-nav (often used as a full-bleed trick
      when the header is placed inside a centered wrapper on some pages). */
@media (min-width: 769px) {
  .byv-header .byv-nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* 3) (Safe) Make the UL center within the nav area (prevents shrink-to-fit bias) */
  .byv-header .byv-nav nav {
    flex: 1 1 auto;
    width: 100%;
  }

  .byv-header .byv-nav .top-nav {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    padding-left: 0;
  }
}
/* =============================================================
   HEADER / NAV CENTERING FIX (Option A) **** END ******
   Goal: Make the nav align perfectly under the banner on ALL pages,
         regardless of whether the page uses .page-shell.
   ============================================================= */
   
 /* =============================================================
   HOME PAGE - SIDE GUTTER WALLPAPER (MAPLE LEAVES)
   Applies ONLY when the <body> has class "page-home".

   Asset expected at: /images/maple-leaf-tile-a.png
   Note: styles.css lives in /css/, so we reference ../images/...
   ============================================================= */

:root {
  --byv-content-max-width: 1100px;
}

body.page-home {
  position: relative;
  background-color: #ffffff;
}

/* Keep all real page content above the wallpaper layers */
body.page-home .page-shell {
  position: relative;
  z-index: 1;
}

/* Paint ONLY the left/right whitespace gutters on wide screens */
body.page-home::before,
body.page-home::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100vw - var(--byv-content-max-width)) / 2));
  background-image: url("../images/wallpaper/maple-leaf-tile-a.png");
  background-repeat: repeat;
  background-size: 512px 926px;
  pointer-events: none;
  z-index: 0;
}

body.page-home::before {
  left: 0;
  background-position: top left;
}

body.page-home::after {
  right: 0;
  background-position: top right;
}
/* =============================================================
   HOME PAGE - SIDE GUTTER WALLPAPER (MAPLE LEAVES)
   ============================================================= */

/* =========================================================
   Bills page - Bill card header layout (green square + grey title)
   ========================================================= */

.leader-meta-card.bill-card {
    background-color: #ffffff;
}

/* Button wrapper (white background + 9px padding around inner bar) */
.bill-header-btn {
    width: 100%;
    display: block;
    padding: 9px;
    margin: 0;
    border: none;
    background-color: #ffffff;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

/* Remove default focus outline but keep accessible focus style */
.bill-header-btn:focus {
    outline: 2px solid rgba(64, 122, 48, 0.35);
    outline-offset: 2px;
}

/* Inner bar: left green square + right grey title area */
.bill-header-inner {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 84px; /* establishes the "button height" the square will match */
    box-sizing: border-box;
}

/* Left green square */
.bill-num-box {
    flex: 0 0 84px;
    background-color: #86ac7a;  /*#407a30;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #ffffff;
    box-sizing: border-box;
}


/* Right grey title area */
.bill-title-box {
    flex: 1 1 auto;
    background-color: #dedcdc;  /*#c8c8c8;*/
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    /* Title typography */
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    font-size: 17px;
    color: #404040;   /*#ffffff;*/
}

/* Centered title text */
.bill-title-text {
    flex: 1 1 auto;
    padding: 0 10px;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
}

/* Chevron container (far right) */
.bill-chevron {
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Down-pointing black triangle by default */
.bill-chevron:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #000000;
    display: block;
    transform: rotate(0deg);
}

/* Rotate triangle upward when expanded */
.bill-header-btn[aria-expanded="true"] .bill-chevron:before {
    transform: rotate(180deg);
}

/* Space between header and body */
.bill-body {
    margin-top: 0.9rem;
}


/* =========================================================
   Motions page - Motion card header layout (green square + grey title)
   ========================================================= */

.leader-meta-card.motion-card {
    background-color: #ffffff;
}

/* Button wrapper (white background + 9px padding around inner bar) */
.motion-header-btn {
    width: 100%;
    display: block;
    padding: 9px;
    margin: 0;
    border: none;
    background-color: #ffffff;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

/* Remove default focus outline but keep accessible focus style */
.motion-header-btn:focus {
    outline: 2px solid rgba(64, 122, 48, 0.35);
    outline-offset: 2px;
}

/* Inner bar: left green square + right grey title area */
.motion-header-inner {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 84px; /* establishes the "button height" the square will match */
    box-sizing: border-box;
}


/* Left blue square */
.motion-num-box {
    flex: 0 0 84px;
    background-color: #5D7E9D;  /*#407a30;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #ffffff;
    box-sizing: border-box;
}

/* Right grey title area */
.motion-title-box {
    flex: 1 1 auto;
    background-color: #dedcdc;  /*#c8c8c8;*/
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    /* Title typography */
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    font-size: 17px;
    color: #404040;   /*#ffffff;*/
}

/* Centered title text */
.motion-title-text {
    flex: 1 1 auto;
    padding: 0 10px;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
}

/* Chevron container (far right) */
.motion-chevron {
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Down-pointing black triangle by default */
.motion-chevron:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #000000;
    display: block;
    transform: rotate(0deg);
}

/* Rotate triangle upward when expanded */
.motion-header-btn[aria-expanded="true"] .motion-chevron:before {
    transform: rotate(180deg);
}

/* Space between header and body */
.motion-body {
    margin-top: 0.9rem;
}

/* Allow JS to hide GOV MENU even though .byv-gov-menu-bar is forced visible */
.byv-gov-menu-bar.byv-gov-menu-hidden {
    display: none !important;
}

/* Close button (white X) */
.byv-gov-menu-close {
    position: absolute;
    top: 6px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 26px;
    line-height: 34px;
    cursor: pointer;
    padding: 0;
    opacity: 0.95;
}

.byv-gov-menu-close:hover {
    opacity: 1;
}

.byv-gov-menu-close:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* =============================================================
   HOME PAGE: WIDER MAIN + RIGHT RAIL (desktop)
   Add this block near the END of styles.css
   ============================================================= */

/* Match home content width to the site-wide 1100px shells already used in header + alerts */
body.page-home main {
    max-width: var(--byv-content-max-width, 1100px);
}

/* 1-column by default (mobile), becomes 2 columns on desktop */
body.page-home .home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 1100px) {
    body.page-home .home-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 1.6rem;
    }

    /* Keep the rail visible while scrolling (desktop only) */
    body.page-home .home-rail {
        position: sticky;
        top: 18px;
    }
}

/* =============================================================
   Right rail card
   ============================================================= */
body.page-home .home-rail-card {
    background-color: #ffffff;
    border: 1px solid #d3d7e0;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

body.page-home .home-rail-accent {
    height: 6px;
    background: linear-gradient(90deg, var(--brand-red, #e80002), var(--brand-navy, #142e51));
}

body.page-home .home-rail-header {
    padding: 0.9rem 1rem 0.8rem;
    background: rgba(20, 46, 81, 0.03);
    border-bottom: 1px solid #e6ecf4;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.9rem;
}

body.page-home .home-rail-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-navy, #142e51);
}

body.page-home .home-rail-subtitle {
    margin-top: 0.15rem;
    font-size: 0.86rem;
    color: var(--muted-text, #555555);
    line-height: 1.35;
}

body.page-home .home-rail-link {
    font-size: 0.85rem;
    color: #004c99;
    text-decoration: underline;
    white-space: nowrap;
}

body.page-home .home-rail-list {
    padding: 0.85rem 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Each video row: 2 columns (thumb + description) */
body.page-home .home-rail-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;

    padding: 0.55rem;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    background-color: #ffffff;

    transition: transform 120ms ease, box-shadow 120ms ease;
}

body.page-home .home-rail-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}

/* Portrait look: crop the (usually landscape) YouTube thumb into 9:16 */
body.page-home .home-rail-thumb {
    width: 88px;
    flex: 0 0 88px;
    aspect-ratio: 9 / 16;

    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    object-fit: cover;
    background: #f2f4f8;
}

body.page-home .home-rail-meta {
    flex: 1;
    min-width: 0;
}

body.page-home .home-rail-item-title {
    margin: 0 0 0.25rem 0;
    font-weight: 800;
    font-size: 0.93rem;
    line-height: 1.25;
    color: #000000;
}

body.page-home .home-rail-item-desc {
    margin: 0 0 0.45rem 0;
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--muted-text, #555555);
}

body.page-home .home-rail-item-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.78rem;
    color: #556;
}

body.page-home .home-rail-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;

    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(20, 46, 81, 0.25);
    background: rgba(20, 46, 81, 0.06);
    color: var(--brand-navy, #142e51);
    font-weight: 700;
}

body.page-home .home-rail-time {
    opacity: 0.85;
}