/*
Theme Name: Twenty Seventeen Child
Theme URI: http://example.com/twenty-seventeen-child/
Description: Twenty Seventeen Child Theme
Author: Your Name
Author URI: http://example.com
Template: twentyseventeen
Version: 1.0.2
*/
/* Typekit fonts loaded via non-blocking preload in lb_add_preconnect_hints() (functions.php) */

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — edit here, applies everywhere
   ═══════════════════════════════════════════════════════════ */
:root {
    /* ── Brand colours ───────────────────── */
    --c-navy:        #001e41;   /* primary CTA, headings, borders      */
    --c-navy-dark:   #082536;   /* darker variant used on some headings */
    --c-purple:      #453CF0;   /* secondary / interactive              */
    --c-purple-dark: #3A34C4;   /* purple hover state                   */

    /* ── Neutral palette ─────────────────── */
    --c-black:       #000;
    --c-text-dark:   #333;
    --c-text-mid:    #4a5568;
    --c-text-muted:  #718096;
    --c-border:      #ddd;
    --c-bg-subtle:   #f9f9f9;
    --c-white:       #fff;

    /* ── Typography ──────────────────────── */
    --f-display:     ivypresto-headline, serif;
    --f-headline:    ff-real-headline-pro, sans-serif;
    --f-body:        ff-real-text-pro-2, sans-serif;

    /* ── Type scale (px, absolute for stability) ── */
    --text-2xs: 10px;
    --text-xs:  11px;
    --text-sm:  13px;
    --text-base: 16px;
    --text-md:  18px;
    --text-lg:  24px;
    --text-xl:  2em;       /* relative — intentional for headings */

    /* ── Spacing scale ───────────────────── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;

    /* ── Standard breakpoints (for reference) ─
       mobile:  600px
       tablet:  768px
       desktop: 1200px                          */
}

body, body a {
    font-variant-numeric: lining-nums;
}

h1, h2, h3, h4 {
    font-family: ivypresto-headline, serif;
    line-height:1.25em;
    color:#000;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-weight:400;
}
p, button, input, select, textarea {
    font-family:ff-real-text-pro-2, sans-serif;
}

h1.entry-title, h1.title, .category-latest-content h3, .promoted h3, .latest-item h3, .featured-grid h3, .issue-promotion h2 {
    font-weight:600;
    font-size:2em;
    color: var(--c-navy-dark);
    line-height: 1.1em;
    margin-bottom:1em !important;
    padding-top:0;
}
.boxout-blue {
    background-color: #E8F3FF;
    padding: 10px;
    margin-bottom: 20px;
    border-top: 4px solid #111;
    margin-top: 20px;
}
.boxoutstyle {
    background-color: #E8F3FF;
    padding: 3px 10px 3px 10px;
    margin-bottom: 20px;
    border-top: 4px solid #111;
    margin-top: 20px;
}

.boxoutstyle h2 {
    padding-top: 12px
}
/* Target only pages with the 'page' body class */
body.page .wrap {
    max-width: 1200px;
    width: 100%;
    padding: 0;
    margin: auto;
    box-sizing: border-box; /* Ensure padding is included in the width */
}

/* Make the entry header full width */
body.page .entry-header {
    width: 100% !important;
    margin: 0;
    padding: 0;
}

/* Make the entry content full width and sit below the entry header */
body.page .entry-content {
    width: 100% !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page h1.entry-title {
font-size: 2.5em;
text-transform: none;
letter-spacing: 0;}

.subscribe_header {
    display: flex;
    justify-content: space-between; /* Adjust spacing between images */
    align-items: center; /* Align images vertically in the center */
}

.subscribe_header img {
    max-width: 100%; /* Ensure images resize if necessary */
    height: auto; /* Maintain aspect ratio */
    margin: 0 10px; /* Optional: Add horizontal spacing between images */
}


.search-form .search-submit {
	padding: 0.5em 1em;
}

.corporate-ip-login {
    background-color: #f1f1f1; /* Even lighter grey background for subtlety */
    border: none; /* Remove border */
    padding: 10px 20px;
    margin: 0 auto; /* Center the block */
    border-radius: 0;
    max-width: 1200px; /* Ensure alignment with the main content */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space out elements */
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #555; /* Subtle text color */
    box-shadow: none; /* Remove shadow */
}

.corporate-ip-login p {
    margin: 0;
    flex: 1; /* Allow it to take available space */
    padding-right: 10px; /* Add some spacing between text and input */
    white-space: nowrap; /* Keep text on a single line */
}

.corporate-ip-login form {
    display: flex;
    gap: 5px;
    align-items: center;
}

.corporate-ip-login input[type="email"] {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    max-width: 200px; /* Reduce the width */
    height: 30px; /* Ensure consistent height */
}

.corporate-ip-login input[type="submit"] {
    padding: 5px 10px;
    background-color: #343a40; /* Darker background */
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    height: 30px; /* Ensure consistent height */
}

.corporate-ip-login input[type="submit"]:hover {
    background-color: #007bff; /* Lighter blue on hover */
}

@media (max-width: 768px) {
    .corporate-ip-login {
        flex-direction: column; /* Stack elements on smaller screens */
        align-items: flex-start;
    }
    
    .corporate-ip-login p {
        padding-bottom: 5px;
    }
    
    .corporate-ip-login form {
        width: 100%;
    }

    .corporate-ip-login input[type="email"],
    .corporate-ip-login input[type="submit"] {
        width: 100%;
        margin-top: 5px;
    }
}


/* ── Pullquote & Blockquote — unified display style ─────────────────────────
   Contexts:
   1. blockquote > p.pullquote  — editorial callout, class applied
   2. plain blockquote          — shorter attributed quotes, no class
   3. standalone p.pullquote    — portrait-image pair (rare)
   Legacy posts bake in inline styles (margin-top:-100px; width:72%)
   so !important is needed to override them cleanly.
──────────────────────────────────────────────────────────── */

/* All blockquotes use the display style regardless of p.pullquote class */
blockquote {
    border: none;
    padding: 0.125em 0;
    margin: 0.3em 0;
    font-family: var(--f-display);   /* ivypresto-headline */
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-navy);
    font-style: normal;
    background: transparent !important;  /* override legacy inline background-color */
}

/* Plain p inside blockquote — body p style sets font-family explicitly so we must override */
blockquote > p {
    font-family: var(--f-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-navy);
}

/* Override inline spans pasted into blockquotes (e.g. font-weight:400 from
   editor copy-paste).  The !important is needed because we're fighting
   inline styles baked into the post content. */
blockquote span {
    font-family: var(--f-display) !important;
    font-weight: 700 !important;
    font-size: inherit !important;
    color: inherit !important;
}

/* p.pullquote inside blockquote — let blockquote handle spacing */
blockquote > p.pullquote {
    padding: 0;
    margin: 0 !important;
}

/* Standalone p.pullquote (portrait-image pair context) — legacy overrides */
p.pullquote {
    font-family: var(--f-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-navy);
    font-style: normal;
    border: none;
    padding: 0;
    margin: 0.3em 0 !important;      /* override legacy inline margin-top:-100px */
    width: auto !important;          /* override legacy inline width:72% */
    margin-right: 0 !important;      /* override legacy inline margin-right */
    background: transparent !important;  /* override legacy inline background-color */
    display: block;
}

/* Attribution line — em/cite inside any blockquote or standalone pullquote */
blockquote em, blockquote cite,
p.pullquote em {
    display: block;
    font-family: ff-real-text-pro-2, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    font-style: italic;
    color: var(--c-text-muted);
    margin-top: 0.5em;
}

/* ── Portrait + pullquote pair: float image right ── */
.entry-content p:has(img):has(+ p.pullquote) {
    float: right;
    width: 42%;
    margin: 0 0 1.5em 2em;
    clear: right;
}

.entry-content p:has(img):has(+ p.pullquote) img {
    width: 100%;
    height: auto;
    display: block;
}

/* Pullquote sitting beside the floated portrait */
.entry-content p:has(img) + p.pullquote {
    margin-top: 0 !important;
}

/* Clear float so subsequent body text starts below the pair */
.entry-content p:has(img) + p.pullquote + * {
    clear: both;
}


/* ── Mobile ── */
@media (max-width: 768px) {
    /* Stack: image full-width above, quote below */
    .entry-content p:has(img):has(+ p.pullquote) {
        float: none;
        width: 100%;
        margin: 0 0 0 0;
    }

    .entry-content p:has(img) + p.pullquote {
        margin-top: 1.5em !important;
    }

    p.pullquote, blockquote {
        font-size: 1.2rem;
    }
}

.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) {
    border-top: none;
}

/* Ensure all content aligns with header-wrapper */
@media screen and (min-width: 48em) {
    .site-content {
        padding: 2em 0 0 !important; /* Top breathing room below sticky nav */
    }

    /* Single articles — tighten site-content top gap */
    .single .site-content {
        padding-top: 6px !important;
    }

    /* Remove stacked top padding from parent theme — site-content 1em is sufficient */
    .wrap {
        padding-top: 0 !important;
    }

    .entry-header {
        padding-top: 0 !important;
    }

    .has-sidebar:not(.error404) #primary {
        float: none !important;
        width: 100% !important;
        display: flex;
        justify-content: center;
    }

    .has-sidebar #primary .wrap {
        max-width: 1200px; /* Match the max-width of header-wrapper */
        width: 100%;
        padding: 20px;
        margin: 0 auto;
        box-sizing: border-box; /* Include padding in the element's total width */
    }
}


/* Override for specific images in category, taxonomy, and search archives */
.category-thumbnail,
.taxonomy-thumbnail,
.search-thumbnail {
    max-width: none;
    width: 100px;
    height: 100px;
    object-fit: cover;
}

/* Search Archive Styles */
#search-main-content {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    max-width: 1200px;
    box-sizing: border-box;
}

.search-page-header {
    text-align: center;
    margin-bottom: 40px;
}

.search-page-title {
    font-family: ff-real-headline-pro, sans-serif;
    font-size: 2.5rem;
}

.search-article-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.search-latest-item {
    display: flex;
    align-items: flex-start;
    width: calc(50% - 20px);
    border-top: none;
}

.search-thumbnail {
    margin-right: 10px;
    width: 100px;
    height: 100px;
    object-fit: cover;
    float: left;
}

.search-latest-content {
    overflow: hidden;
}

.search-latest-content h3 {
    font-size: 1.2em;
    margin: 0 0 5px;
}

.search-post-meta {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 10px;
}

.search-post-meta a {
    color: #0073aa;
    text-decoration: none;
}

.search-post-meta a:hover {
    text-decoration: underline;
}

/* Category Archive Styles */
#category-main-content {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    max-width: 1200px;
    box-sizing: border-box;
}

.category-page-header {
    margin-bottom: 40px;
}

.category-page-title {
    font-family: ff-real-headline-pro, sans-serif;
    font-size: 2rem;
}

.category-archive-description {
    font-size: 1.2rem;
    color: #666;
}

.category-article-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0;
}

.category-latest-item {
    display: flex;
    align-items: flex-start;
    width: 50%;
    padding: 1.25rem 0;
    border-top: 1px solid #e8e8e8;
    box-sizing: border-box;
}

.category-latest-item:nth-child(odd)  { padding-right: 2rem; }
.category-latest-item:nth-child(even) { padding-left: 2rem; border-left: 1px solid #e8e8e8; }

.category-thumbnail {
    margin-right: 12px;
    width: 90px;
    height: 90px;
    object-fit: cover;
    flex-shrink: 0;
}

.category-latest-content {
    flex: 1;
    min-width: 0;
}

.category-latest-content h3 {
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
    line-height: 1.35;
}
.category-latest-content p {
    font-size: 12px;
}

/* article-meta: author · date · badge inline */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: #555;
}
.article-meta a { color: #092535; text-decoration: none; }
.article-meta a:hover { text-decoration: underline; }
.article-meta time { color: #777; }
.article-meta .badge--cat { font-size: 9px; }

.promoted p.post-meta, .featured-grid p.post-meta, .latest-contnet p.post-meta, .lead p.post-meta, .category-post-meta {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 10px;
    font-size:10px;
    padding-bottom:0;
}

.promoted p.post-meta a, .featured-grid p.post-meta a, .latest-content p.post-meta a, .lead p.post-meta a,  .category-post-meta a {
    color: #092535;
    text-decoration: none;
}

.promoted p.post-meta a:hover, .latest-content p.post-meta a:hover, .lead p.post-meta a:hover, .category-post-meta a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .category-latest-item {
        width: 100%;
        padding-right: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
    }
}
/* Taxonomy Archive Styles */
#taxonomy-main-content {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    max-width: 1200px;
    box-sizing: border-box;
}

.taxonomy-page-header {
    text-align: center;
    margin-bottom: 40px;
}

.taxonomy-page-title {
    font-family: ivypresto-headline, sans-serif;
    font-size: 2.5rem;
}

.taxonomy-archive-description {
    font-size: 1.2rem;
    color: #666;
}

.taxonomy-article-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.taxonomy-latest-item {
    display: flex;
    align-items: flex-start;
    width: calc(50% - 20px);
    border-top: none;
}

.taxonomy-thumbnail {
    margin-right: 10px;
    width: 100px;
    height: 100px;
    object-fit: cover;
    float: left;
}

.taxonomy-latest-content {
    overflow: hidden;
}

.taxonomy-latest-content h3 {
    font-size: 1.2em;
    margin: 0 0 5px;
}

.taxonomy-post-meta {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 10px;
}

.taxonomy-post-meta a {
    color: #0073aa;
    text-decoration: none;
}

.taxonomy-post-meta a:hover {
    text-decoration: underline;
}


/* General adjustments */
body.single-feature .site-header {
    background: transparent !important;
    position: absolute;
    width: 100%;
    z-index: 1000;
}

/* Floating thumbnail in single-post.php */
.single-post .post-thumbnail {
    float: right;
    margin: 0 0 10px 20px;
    width: auto; /* Adjust the width as needed */
    max-width: 50%; /* Ensure the image does not exceed 50% of the content area */
}


body.single-feature .site-header .site-branding img {
    content: url('/images/lb-logo-transparent-1.png');
}

body.single-feature .site-header .main-navigation a,
body.single-feature .site-header .login-register a {
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border-radius: 3px;
}
 
p.firstpara {font-weight: 800;}

/* Feature header styles */
.feature-header {
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.feature-header .header-content-title {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    box-sizing: border-box;
}

.feature-header .header-content-inner {margin-left: 21rem; margin-right: 21rem;}

.feature-header .header-content-title .category {
    font-size: 1rem;
    margin-bottom: 10px;
}

.feature-header .header-content-title .title {
    font-size: 3.5rem;
    font-weight: bold;
    margin: 0 0 10px;
    color: #fff;
}

.feature-header .header-content-title .standfirst {
    font-size: 1.3em;
    line-height: 1.3em;
    margin: 0;
    color: #fff;
}


/* Style adjustments for post tags */
.post-tags {
    margin-top: 10px;
    margin-bottom:20px;
}

.post-tags span {
    display: inline-block;
    margin-right: 15px; 
    margin-bottom: 5px;
    font-size: 12px;
    background: none;
    padding: 0;
}

.post-tags a {
    color: var(--c-purple);
    text-decoration: none;
    box-shadow: none !important;
        border: 1px solid var(--c-purple);
    padding: 5px 10px;
    border-radius: 10px;
}

.post-tags a:hover {
    text-decoration: none;
    border-color: var(--c-purple-dark);
    color:#3A34C4;
}

/* Related content styling */
.related-content {
    max-width: 1200px;
    margin: 48px auto;
    box-sizing: border-box;
    padding: 0 20px;
}

/* Section heading row: "Related Content" + "More in category" link */
.related-content-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-navy);
}
.related-content-header h2 {
    margin: 0;
    font-size: var(--text-lg);
}
.more-in-category-link {
    margin-left: auto;
    font-size: var(--text-sm);
    font-weight: 400;
    text-decoration: underline;
    color: var(--c-text-muted);
}
.more-in-category-link:hover { color: var(--c-navy); text-decoration: none; }

/* Fallback for old h2 style (still used until transient expires) */
.related-content > h2 {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-navy);
}

/* Cards grid */
.related-content .related-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.related-content .related-post {
    width: calc(33.333% - 14px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid var(--c-border);
    text-align: left;
    display: flex;
    flex-direction: column;
}
.related-post-thumb {
    display: block;
    overflow: hidden;
    background: var(--c-bg-subtle);
}

/* Unified thumbnail height — consistent across all card types so titles align per row.
   200px gives landscape images a gentle crop, and portrait/mugshot images (< 1.75:1)
   enough room to show face + shoulders with object-position: center top. */
.related-content .related-post img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.related-post-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.related-content .related-post h3 {
    font-size: 0.975rem;
    line-height: 1.4;
    margin: 0 0 8px;
}
.related-content .related-post a {
    text-decoration: none;
    color: var(--c-text-dark);
}
.related-content .related-post a:hover {
    text-decoration: underline;
}
/* Article meta line inside related cards */
.related-content .related-post p.article-meta {
    margin-top: auto;
    padding-top: 8px;
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    line-height: 1.4;
}

@media (max-width: 1000px) {
    .related-content .related-post { width: calc(50% - 12px); }
}
@media (max-width: 600px) {
    .related-content .related-post { width: 100%; }
    /* Stack header vertically — title + link can't share a row at 375px */
    .related-content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .more-in-category-link { margin-left: 0; }
}

/* Other existing styles */
#main-content {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0px;
    max-width: 1200px;
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}
#main-content-feature {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    max-width: 740px; /* ~65-75ch — optimal editorial reading width */
    box-sizing: border-box;
}
.wide-page-layout #main-content-feature,
.wide-page-layout .entry-content {
    max-width: 1100px;
}
.wide-page-layout .entry-content table {
    width: 100%;
}
@media (max-width: 768px) {
    #main-content {
        padding-left:20px;
        padding-right:20px;
    }
}

/* Featured Story Section */
#featured-story {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.featured-content {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .featured-content {
        flex-wrap: wrap;
    }
    .promoted-stories {
        flex: 1 1 100% !important;
    }
}

.lead-story {
    flex: 0 1 40%;
    margin-right: 20px;
}
@media (max-width: 768px) {
    .lead-story {
        flex: 1 1 100% !important;
        margin-right: 0;
    }
}
.lead-story h2 {
    font-family: ivypresto-headline, serif;
    color: var(--c-navy-dark);
    font-weight:600;
    line-height:1.1em;
    margin-top:0.5em;
    padding-top:0;
}
.lead-story h2 a {
    transition: 0.2s all ease;

}
.lead-story h2:hover > a {
    color:#453CF0;
}
.lead-story img {
    width: 100%;
    height: auto;
}
article.lead > a {
    display: block;
    line-height: 0;
}
h1.lead-story-title {
    padding-top: 0.3em !important;
    margin-top: 0;
    margin-bottom: 0.2em;
}
.lead-story p {
    line-height:1.5;
    font-size:14px;
}

/* Standfirst — larger, italic, visually distinct from body copy */
.lead-story .lead-standfirst {
    font-family: ff-real-text-pro-2, sans-serif;
    font-weight: 500;
    line-height: 1.5;
    color: var(--c-navy);
    border-top: 2px solid var(--c-navy);
    padding-top: 0.6em;
    margin-top: 0.5em;
    margin-bottom: 0.75em;
}

/* First two paragraphs of article body shown as intro text */
.lead-intro p {
    font-family: ff-real-text-pro-2, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 0.6em;
}

.promoted-stories {
    flex: 0 1 25%;
}

.promoted-stories .promoted-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.promoted {
    display: block; /* Changed from flex to block */
    overflow: hidden; /* Ensure the container doesn't overflow */
    padding-bottom:15px;
    padding-top:15px;
    border-bottom: 1px solid #CAC4D0;
    font-family: ff-real-headline-pro, sans-serif;
}
.promoted:last-of-type {
    border-bottom: none;
}

.promoted img {
    margin-left: 10px;
    float: right;
    width: 75px;
    height: unset;
}


.promoted .promoted-content {
    overflow: hidden;
    display:flex;
    align-items:flex-start;
}

.promoted h3 {
    font-size: 1em;
    margin: 0 0 5px;
    font-weight:600;
    padding-top:0;
    line-height: 1.3;
    transition: 0.2s all ease;
}

.promoted h3:hover {
    color: var(--c-purple);
}

.promoted p {
    font-size: 0.8em;
    margin: 0;
}

hr.vertical-span {
    height: 100%;
    width: 1px;
    margin-bottom: 0;
    margin-top: 0;
    color: #CAC4D0;
}
/*top stories section*/
.wpp-shortcode-placeholder {
    display: none !important;
}
.promoted-list ol {
    list-style-type:none;
}
.promoted-list ol li {
    counter-increment: item;
    position: relative;
    display:flex;
    align-items:center;
    font-family:ff-real-text-pro-2, sans-serif;
    font-weight:300;
    font-size:14px;
    line-height:1.1;
}
.promoted-list ol li::before {
    content: counter(item);
    font-family: ivypresto-headline, sans-serif;
    font-size:2em;
    font-weight:700;
    margin-right:0.5em;
}
.promoted-stories#most-read {
    display:flex;
    flex-direction:column;
}

/*most read section promotion box*/
.most-read-promotion {
    background: #DFDFDF;
    padding:1em;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.most-read-promotion img {
    width:50px;
    margin-right:10px;
}
.most-read-promotion__text p {
    font-size:14px;
    margin-bottom: 0;
    line-height: normal;
}
/* Latest Articles Section */
#latest-articles {
    margin-bottom: 40px;
}

#latest-articles .article-list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.latest-item {
    display: flex;
    align-items: flex-start;
    width: calc(50% - 20px); /* Two columns with gap */
    padding: 1.25rem 0;
}


.latest-item img {
    margin-right: 20px;
    width: 100px;
    height: 75px;
    object-fit: cover;
    flex-shrink: 0;
    max-width: none;
}
img.lb-fallback {
    object-fit: contain;
    padding: 18px;
    box-sizing: border-box;
    background-color: #f4f4f4;
    opacity: 0.45;
    filter: grayscale(1);
}

.latest-item .latest-content {
    overflow: hidden;
}

.latest-item h3 {
    font-size: 1.2em;
    margin: 0 0  5px;
    font-weight: 600;
    padding-top:0;
    transition: 0.2s all ease;
}
.latest-item h3:hover {
    color: var(--c-purple);
}

.latest-item .category {
    font-weight: bold;
    margin: 0 0 5px;
}

.latest-item p {
    font-size: 10px;
    margin: 0;
}

button#load-more {
    text-transform: uppercase;
    background: none;
    color: var(--c-navy);
    border: 2px solid transparent;   /* reserve space so hover never shifts layout */
    border-radius: 3px;
    padding: 10px 32px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    margin: 1.5em auto 0;
    display: block;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
button#load-more:hover {
    border-color: var(--c-navy);
}
#loader {
    display: none;
    text-align: center;
    margin: auto;
}

#loader::after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/*Highlight box*/
#highlight {
    background: #333333;
    padding: 1.5em 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

article.highlights {
    width:45%;
    margin-top:2em;
}

article.highlights.first-post {
    width:100%;
}

#highlight h2 {
    color: white;
    font-family: var(--f-headline);
    text-transform: uppercase;
    letter-spacing: normal;
    font-size: 18px;
    letter-spacing: 2px;
}
.lead-highlight {
    display:flex;
    justify-content:space-between;
    padding-bottom:2em;
    width:100%;
}
.lead-highlight__text {
    width: 55%;
}
.lead-highlight__text p {
    color: white;
    line-height: 1.4em;
    font-size: 16px;
}
.lead-highlight__text h3 {
    color: white;
    font-size: 32px;
    line-height: 1.15em;
    margin-bottom: 0.4em;
    transition: 0.2s all ease;
}
.lead-highlight__text h3 a {
    color: inherit;
    text-decoration: none;
}
.lead-highlight__text h3 a:hover {
    color: darkgray;
}
.lead-highlight__image {
    display: block;
    width: 40%;
    flex-shrink: 0;
}
.lead-highlight__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.highlight-standfirst {
    color: white;
    margin-top: 0.5em;
}
hr.highlights-separator {
    width:100%;
    background:white;
}

.highlight {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.highlight-thumb {
    flex-shrink: 0;
}
.highlight-thumb img {
    width: 90px;
    height: 65px;
    object-fit: cover;
    display: block;
}
.highlight .highlight-text,
.highlight .highlight-text a,
.highlight .highlight-text h3,
.highlight .highlight-text p {
    color: white;
}
/* article-meta inside dark highlights box — override for both lead and secondary items */
#highlight .article-meta,
#highlight .article-meta a,
#highlight .article-meta time {
    color: rgba(255,255,255,0.85);
    font-size: 0.8rem;
}
#highlight .article-meta .meta-cat {
    color: white;
}
#highlight .article-meta > *:first-child::before {
    content: none;
}
#highlight .article-meta > * + *::before {
    color: rgba(255,255,255,0.35);
}
#highlight .article-meta a:hover {
    color: white;
    text-decoration: underline;
}
.highlight .highlight-text h3 {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.3em;
    margin-top: 0;
    transition: 0.2s all ease;
}
.highlight .highlight-text h3:hover {
    color: darkgray;
}
@media (max-width: 768px) {
    #highlight {
        padding:2em;
    }
    .lead-highlight {
        flex-wrap:wrap;
    }
    .lead-highlight__text, .lead-highlight img {
        width:100%;
    }
    article.highlights {
        width:100%;
    }
    .highlight-thumb img {
        width: 70px;
        height: 55px;
    }
}


/*Life During Law section*/
.carousel-item {
    padding:1em;
}

.slick-slide {
    height:auto !important;
}

/*Financials / More From sections — heading matches Leadership/Life During Law style*/
section#more-from {
    margin-top: var(--sp-10);
}
section#financials h2,
section#more-from h2 {
    font-family: var(--f-headline);
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 2px;
    border-bottom: none;
    margin-bottom: 1em;
}

.financials-single-section {
    display:flex;
    margin-bottom:2em;
    flex-wrap:wrap;
}
.financials-single-section .thumbnail {
    width:350px;
    height:200px;
    background-size:cover;
    position:relative;
    margin-right:2em;
}
.financials-single-section .thumbnail img {
width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.financials-single-section .thumbnail .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 1; 
}

.financials-single-section .thumbnail h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    padding: 10px;
    font-size: 2em;
    z-index: 2; 
    margin:0;
}
.financials-single-section-text p {
    font-family: ff-real-headline-pro, sans-serif;
    font-weight:800;
    font-size:20px;
    margin-bottom: 0.5em;
}
.financials-single-section ul {
    margin:0;
}
.financials-single-section ul li {
    list-style-type: none;
    font-weight:500;
}

/*More From / Financials card grid*/
.more-from-list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.more-from-list .more-from-item {
    flex: 1 1 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
}
.more-from-list .more-from-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.more-from-list .more-from-item h3 {
    font-family: ff-real-headline-pro, sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0.6em;
    margin-bottom: 0.2em;
}

@media (max-width: 768px) {
    .more-from-list {
        display: block;
    }
    .more-from-list .more-from-item {
        max-width: 100%;
    }
}

/* Featured Cards Section */
#featured-cards {
    margin-bottom: 40px;
}

#featured-cards .featured-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.featured-card {
    flex: 1 1 calc(33.333% - 20px); /* Ensures three cards fit in one row with a gap */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    max-width: calc(33.333% - 20px); /* Ensures the max-width is also set */
}

.featured-card img {
    margin-bottom: 10px;
    width: 150px;
    height: 150px;
}

.featured-card h3 {
    font-size: 1.5em;
    margin: 0 0 10px;
    overflow: hidden; /* Prevents text overflow */
}

.featured-card p {
    font-size: 1em;
    margin: 0;
    overflow: hidden; /* Prevents text overflow */
}

.clipped-intro {
    overflow: hidden;
}

/* Issue Promotions Section */
#issue-promotions {
    margin-bottom: 40px;
}

.issue-promotion {
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    background-size: cover;
    background-position: center;
    color: white; /* Default text color */
}

.issue-content {
    position: relative;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
    padding: 20px;
    border-radius: 10px;
}

.issue-content h2 a,
.issue-content ul.issue-posts li a {
    text-decoration: none;
    color: #fff;
}

.issue-content h2 {
    font-size: 2em; /* Increase font size for the title */
    font-weight: bold; /* Make the title bold */
    margin-bottom: 10px;
}

.issue-content ul.issue-posts {
    list-style: none;
    padding: 0;
}

.issue-content ul.issue-posts li {
    margin: 5px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #featured-story {
        flex-direction: column;
    }

    .lead-story, .promoted-stories {
        flex: 1 1 100%;
    }

    #latest-articles .article-list {
        flex-direction: column;
    }

    .latest-item {
        width: 100%;
    }

    #featured-cards .featured-grid {
        flex-direction: column;
    }

    .featured-card {
        width: 100%;
        margin-bottom: 20px; /* Add bottom margin for spacing in single column layout */
    }

    .issue-promotion {
        padding: 10px;
    }

    .issue-content {
        padding: 10px;
    }

    .issue-content h2 {
        font-size: 1.5em; /* Adjust font size for smaller screens */
    }
}

/* Override the default logo max-height */
.custom-logo-link img {
    max-height: none !important;
}

/* Custom header styles */
.site-header {
    background-color: #FFF !important;
    padding: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.admin-bar .site-header {
    top: 32px !important;
}

.logged-in.single-green_ambassador #main-content {
    padding-top: 48px;
}

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

.header-wrapper {
    max-width: 1200px !important; /* Same max-width as main container */
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 10px 0 0 !important; /* Top padding only — no bottom gap below nav bar */
    background-color: #FFF !important;
    justify-content:space-between;
}

/* Leaderboard ad slot — hidden until the feature is activated */
.leaderboard-ad { display: none !important; }

.leaderboard-ad .close-ad {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    cursor: pointer !important;
    color: #fff !important; /* Ensure the close icon is white */
    font-size: 18px !important; /* Make sure the close icon is visible */
    background: #333 !important; /* Background color for visibility */
    border-radius: 50% !important; /* Circle shape */
    width: 20px !important; /* Width for circle */
    height: 20px !important; /* Height for circle */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.leaderboard-ad .ad-content {
    display: inline-block !important;
    background-color: #010101 !important;
    border-radius: 5px !important;
    padding: 10px !important;
}

.site-branding {
    flex: 0 1 150px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #FFF !important;
}

.site-branding img {
    width: 250px;

}

@media screen and (min-width: 30em) {
    .site-branding {
        padding: 0; /* Remove or reduce padding as needed */
    }
}

.header-content {
    display: flex !important;
    flex: 0 0 100% !important; /* Always own full-width row, regardless of login button count */
    flex-direction: column !important;
    gap: 0px !important; /* Reduce gap between rows */
    background-color: #FFF !important;
    align-items:flex-end;
}

.header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 40px !important; /* Reduce height of each row to 40px */
    background-color: #FFF !important;
    padding: 0 !important; /* Remove padding */
    margin: 0 !important; /* Remove margin */
}

.header-left {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    background-color: #FFF !important;
}

.social-icons a,
.custom-buttons .button,
.login-register .button {
    color: #fff !important;
    text-decoration: none !important;
    padding: 5px 10px !important;
    border-radius: 3px !important;
    line-height: 1.5 !important; /* Adjust line-height to fit 40px row */
}

.custom-buttons .button.newsletter { background-color: #f39c12 !important; }
.custom-buttons .button.subscriptions { background-color: #e67e22 !important; }
.custom-buttons .button.app { background-color: #3498db !important; }
.custom-buttons .button.trial { background-color: #2ecc71 !important; }

.custom-buttons .button:hover {
    opacity: 0.8 !important;
}

.custom-navigation {
    flex: 1 !important;
    height: 100% !important; /* Ensure it takes full height */
    background-color: #010101 !important;
    display: flex !important; /* Use flexbox to keep items on a single line */
    align-items: center !important;
}

.custom-navigation ul {
    display: flex !important;
    gap: 5px !important; /* Reduce spacing between menu items */
    list-style: none !important;
}

.custom-navigation li {
    display: inline !important; /* Ensure list items are inline */
}

.custom-navigation a {
    color: #000;
    line-height: 40px !important; /* Adjust line-height to fit 40px row */
    text-decoration: none !important;
}

/*.custom-navigation a:hover, .custom-navigation a:active {
    color: #fff !important;
}*/

/* ── Primary navigation (replaces Max Mega Menu plugin) ──────
   Dropdown state driven by CSS :hover and JS .is-open class.
   Mobile open/close handled by mobile-menu.js.
   ──────────────────────────────────────────────────────────── */
.main-navigation {
    position: relative;
    z-index: 100;
}

.primary-menu {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: min(1200px, 100vw);
}

/* Top-level links */
.primary-menu > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: ff-real-text-pro-2, sans-serif;
    font-weight: 300;
    color: var(--c-navy-dark);
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    line-height: 1;
}

.primary-menu > li > a:hover,
.primary-menu > li > a:focus {
    background: var(--c-navy-dark);
    color: #fff;
    outline: none;
}

.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a,
.primary-menu > li.current-page-ancestor > a,
.primary-menu > li.is-open > a {
    background: var(--c-navy-dark);
    color: #fff;
}

/* Dropdown arrow */
.nav-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    flex-shrink: 0;
    margin-left: 2px;
}

/* Sub-menu container */
.primary-menu > li.menu-item-has-children {
    position: relative;
}

.primary-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--c-navy-dark);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.08s ease-out, visibility 0.08s ease-out;
    pointer-events: none;
}

/* Right-align dropdowns from Events onwards (item 8+) to avoid overflow */
.primary-menu > li:nth-child(n+8) > .sub-menu {
    left: auto;
    right: 0;
}

/* Show sub-menu via JS .is-open only (hover intent handled in nav.js) */
.primary-menu > li.menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Sub-menu links */
.primary-menu .sub-menu a {
    display: block;
    padding: 7px 16px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    transition: color 0.12s ease;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus {
    color: #1FB6C7;
    background: transparent;
    outline: none;
}

/* single-feature dark header variant */
body.single-feature .site-header .primary-menu > li > a {
    color: #fff;
}

/* =====================================================
   Mega Menu plugin overrides — align with primary-menu
   ===================================================== */

/* ── Mobile nav: our .mobile-menu-toggle controls nav#primary-navigation ──
   MMM's own toggle is suppressed; our button is in the correct flex position.
   nav#primary-navigation has no MMM inline styles so display:none is safe. */
@media (max-width: 768px) {
    /* Suppress MMM's misplaced toggle */
    #mega-menu-wrap-top .mega-menu-toggle { display: none !important; }

    /* Hide entire nav by default; show when JS adds .is-open */
    nav#primary-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
        background: #fff;
        border-top: 2px solid var(--c-navy);
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        max-height: 80vh;
        overflow-y: auto;
    }
    nav#primary-navigation.is-open { display: block; }

    /* Ensure the site-header is position:relative so nav drops from it */
    .site-header { position: relative !important; }

    /* MMM menu items — vertical list, readable colours */
    nav#primary-navigation #mega-menu-top {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    nav#primary-navigation #mega-menu-top > li.mega-menu-item {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid var(--c-border) !important;
    }
    nav#primary-navigation #mega-menu-top > li > a.mega-menu-link {
        display: block !important;
        padding: 12px 16px !important;
        color: var(--c-navy) !important;
        background: #fff !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
    }
    nav#primary-navigation #mega-menu-top > li > a.mega-menu-link:hover {
        background: var(--c-bg-subtle) !important;
    }
    /* Hide flyout sub-menus on mobile for now */
    nav#primary-navigation .mega-sub-menu { display: none !important; }
    /* Hide dropdown arrows — sub-menus not available on mobile */
    nav#primary-navigation .mega-indicator { display: none !important; }
}

/* Top-level links — colour only, let Mega Menu control sizing */
#mega-menu-top .mega-menu-link {
    color: var(--c-navy-dark) !important;
    font-family: ff-real-text-pro-2, sans-serif !important;
    font-weight: 300 !important;
    text-decoration: none !important;
}

/* Active / current page */
#mega-menu-top .mega-current-menu-item > .mega-menu-link,
#mega-menu-top .mega-current-menu-ancestor > .mega-menu-link {
    background: var(--c-navy-dark) !important;
    color: #fff !important;
}

/* Hover */
#mega-menu-top .mega-menu-item:hover > .mega-menu-link,
#mega-menu-top .mega-menu-item:focus-within > .mega-menu-link {
    background: var(--c-navy-dark) !important;
    color: #fff !important;
}

/* Sub-menu panel — dark background matching local */
#mega-menu-top .mega-sub-menu {
    background: var(--c-navy-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Sub-menu links — background must be overridden; plugin inlines rgb(241,241,241) on flyout links */
#mega-menu-top .mega-sub-menu .mega-menu-link {
    color: #fff !important;
    background: var(--c-navy-dark) !important;
}

#mega-menu-top .mega-sub-menu .mega-menu-item:hover > .mega-menu-link {
    color: #1FB6C7 !important;
    background: transparent !important;
}

/* Hide description text — keep dropdowns clean like local */
#mega-menu-top .mega-description {
    display: none !important;
}


.search-form-wrapper {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    background-color: #FFF !important;
}

.search-form-wrapper form {
    display: flex !important;
    align-items: center !important;
}

.search-form-wrapper form > label {
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.search-form-wrapper input[type="search"] {
    padding: 5px 10px !important;
    border: none !important;
    border-radius: 3px 0 0 3px !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    background-color: #f5f5f5 !important;
    color: #000 !important;
    width: 300px !important;
    height: 30px !important;
    display: block !important;
}

.search-form-wrapper button.search-submit {
    padding: 4px 10px !important;
    height: 30px !important;
    border-radius: 3px !important;
    align-self: center !important;
    color: #fff !important;
    margin-left: 5px !important;
    font-size: 13px !important;
    background: #121141 !important;
    border: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

/* Specific styles for the SVG icon */
.search-form-wrapper input[type="search"]::-webkit-search-cancel-button,
.search-form-wrapper input[type="search"]::-webkit-search-decoration,
.search-form-wrapper input[type="search"]::-webkit-search-results-button,
.search-form-wrapper input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.search-form-wrapper svg {
    height: 16px !important;
    width: 16px !important;
    display: block !important;
}
.upper-header-content {
    display:flex;
}
.login-register {
    display:flex;
    margin-left:2em;
    gap:5px;
}
.login-register button.header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 20px;
    background: #453CF0;
    color: white;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    transition: all ease 0.2s;
}
.login-register button.header-button:hover {
    background: #3A34C4;
}
.login-register button.header-button#secondary-header {
    background:none;
    border: 1px solid var(--c-purple);
}

 .login-register button.header-button#secondary-header  {
    color: #453CF0 !important;
}


@media (max-width: 768px) {
    /* ── Mobile header: three-row layout ──
       Row 1: logo centred (full width)
       Row 2: search bar (flex) + burger icon (right)
       Row 3: login / subscribe / Legal 500 buttons */
    .header-wrapper {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: 8px 12px !important;
        align-items: center !important;
        gap: 0 !important;
    }

    /* Row 1: Logo – full width, centred */
    .site-branding {
        order: 1;
        flex: 0 0 100% !important;
        justify-content: center !important;
        margin-bottom: 6px !important;
    }

    /* Row 2 left: Search fills available width */
    .search-form-wrapper {
        order: 2;
        flex: 1 1 auto !important;
        margin-top: 0;
    }
    .search-form-wrapper form { width: 100%; }
    /* Label must flex-grow so input fills all space up to the submit button */
    .search-form-wrapper form > label { flex: 1 1 auto; }
    .search-form-wrapper input[type="search"] { width: 100% !important; }
    /* Flush submit button against input — no gap, matching border-radius */
    .search-form-wrapper .search-submit {
        margin-left: 0 !important;
        border-radius: 0 3px 3px 0 !important;
    }

    /* Row 2 right: Burger sits to the right of search */
    .mobile-menu-toggle {
        order: 3;
        flex: 0 0 auto;
        display: flex;
        margin-left: 8px;
    }

    /* Row 3: Login / subscribe / Legal 500 buttons */
    .login-register {
        order: 4;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 6px 0 0;
        justify-content: center !important;
        gap: 6px;
    }
    .login-register button.header-button {
        flex: 0 0 auto;
        height: 30px !important;
        width: auto !important;
        display: inline-flex;
        justify-content: center;
        padding: 0 16px !important;
    }
    /* Legal 500 button: icon only on mobile */
    .legal500-toggle-label,
    .legal500-toggle-arrow { display: none !important; }
    .legal500-toggle-btn {
        padding: 0 10px !important;
        flex: 0 0 auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Nav: last in stack */
    .header-content {
        order: 10;
        flex: 0 0 100% !important;
        gap: 0 !important;
    }

    .header-row {
        flex-direction: column !important;
        height: auto !important;
    }

    .custom-navigation ul {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

.site-info {
    text-align: center;
    padding: 20px 0;
    width: 100% !important; /* Override the default width */
    max-width: none !important; /* Ensure no max-width is applied */
    margin: 0 auto; /* Center the element within its container */
}

/* Mega Menu overrides live in the active block below */
/* Feature Post Styles */
.feature-post .feature-title {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 20px;
}

.feature-post .feature-meta {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.feature-post .feature-thumbnail img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.feature-post .feature-content {
    font-size: 1.2em; /* Increase article text size */
    line-height: 1.8;
}

.feature-post .feature-footer {
    margin-top: 40px;
    font-size: 1em;
}

.post-meta {
    font-size: 0.9em;
    margin-bottom: 10px;
    color: #082536;
    font-weight:400;
}

.post-meta .published-date,
.post-meta .updated-date,
.post-meta .author-name {
    display: inline-block;
    margin-right: 0px; /* Reduce margin */
}
.post-meta .author-avatar {
    margin-top:1em;
    margin-bottom:1em;
    display:flex;
    align-items:center;
}
.post-meta .author-avatar img {
    margin-right:1em;
}
.post-meta .author-name a {
    font-weight: bold;
    text-decoration: none;
    box-shadow: none;
}

.author-item {
    margin-right:2em;
    display:flex;
    flex-direction:column;
}
.author-item a {
    box-shadow:none !important;
}
.author-item span.author-name {
    font-family: ff-real-text-pro, sans-serif;
    font-weight:500;

}
.author-avatar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-6) 0;
    border-bottom: 2px solid var(--c-navy);
    margin-bottom: var(--sp-6);
}

.author-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 0; /* gap handles spacing */
}

.author-avatar-text h2 {
    font-family: ff-real-headline-pro, sans-serif; /* was ff-real-headline — missing -pro */
    font-size: var(--text-lg);
    margin-bottom: var(--sp-1);
}

.author-avatar-text p.author-name, .author-avatar-text h2 {
    margin-bottom: 0;
}

.author-avatar-text p.author-name {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

.author-post-count {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    margin-top: var(--sp-1);
}

/* Single-post entry-title */
.single-post .entry-title {
    font-size: 2.5rem;
}
@media (max-width: 1000px) {
.single-post .entry-title {
    font-size:32px;
}
}

/* .related-content rules consolidated at first declaration above */

/* Custom Login and Registration Styles */
.custom-login-container,
.custom-register-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.custom-login-container h2,
.custom-register-container h2 {
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
}

.custom-login-container form p,
.custom-register-container form p {
    margin-bottom: 15px;
}

.custom-login-container label,
.custom-register-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.custom-login-container input[type="text"],
.custom-login-container input[type="password"],
.custom-login-container input[type="email"],
.custom-register-container input[type="text"],
.custom-register-container input[type="password"],
.custom-register-container input[type="email"] {
    width: calc(100% - 20px);
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.custom-login-container input[type="submit"],
.custom-register-container input[type="submit"] {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.custom-login-container input[type="submit"]:hover,
.custom-register-container input[type="submit"]:hover {
    background-color: #005177;
}

.custom-login-container .error,
.custom-register-container .error {
    color: #d9534f;
    margin-bottom: 10px;
    text-align: center;
}

/* Page Heading Styling */
.page .entry-title {
    font-size: 2.5rem !important; /* Adjust the size to match your theme */
    font-weight: bold;
    margin: 20px 0; /* Space around the heading */
    padding-bottom: 10px;
    text-transform:none !important;
    letter-spacing: 0 !important;
    font-family: ff-real-headline-pro, sans-serif;
  }
  
  /* General Form Styling */
  .mailpoet-manage-subscription {
    background-color: #ffffff; /* Ensure it blends with the existing page background */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    max-width: 600px;
    margin: 20px auto; /* Centering the form */
    font-family: Arial, sans-serif;
  }
  
  /* Label and Input Styling */
  .mailpoet_paragraph label {
    font-weight: bold;
    color: #333; /* Consistent text color */
    margin-bottom: 5px;
    display: inline-block;
  }
  
  .mailpoet_text {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }
  
  /* Select Dropdown Styling */
  .mailpoet_select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }
  
  /* Checkbox Styling */
  .mailpoet_checkbox_label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
  }
  
  .mailpoet_checkbox {
    margin-right: 10px;
  }
  
  /* Button Styling */
  .mailpoet_submit {
    background-color: #0073aa; /* Primary button color */
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
  }
  
  .mailpoet_submit:hover {
    background-color: #005f8a; /* Darker shade on hover */
  }
  
  /* Error Message Styling */
  .mailpoet_error {
    color: #e74c3c; /* Red color for error messages */
    font-size: 14px;
    margin-top: 5px;
  }
  
  /* Link Styling */
  .mailpoet-change-email-info a {
    color: #0073aa;
    text-decoration: none;
  }
  
  .mailpoet-change-email-info a:hover {
    text-decoration: underline;
  }
  
  /* Mobile Responsiveness */
  @media (max-width: 600px) {
    .mailpoet-manage-subscription {
      padding: 15px;
    }
  
    .mailpoet_submit {
      width: 100%;
      font-size: 18px;
    }
  }
  
/* Container for the Category Page Header */
.category-page-header {
    background-color: #FFF;
    border-radius: 8px;
    margin: 20px 0;
  }
  
  
  /* Subcategory Filter Form Styling */
  #subcategory-filter-form {
    margin-top: 15px;
  }
  
  #subcategory-filter-form select {
    width: 100%;
    max-width: 400px; /* Limit the width for larger screens */
    padding: 10px;
    margin: 10px auto; /* Center align the select box */
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 16px;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  #subcategory-filter-form select:hover,
  #subcategory-filter-form select:focus {
    border-color: #0073aa; /* Highlight the border on hover and focus */
    box-shadow: 0 2px 6px rgba(0, 115, 170, 0.3);
  }
  
  /* Option Styling */
  #subcategory-filter-form option {
    padding: 5px;
  }
  
  /* Responsive Design for Mobile */
  @media (max-width: 600px) {
    .category-page-header {
      text-align: left; /* Align content to the left on smaller screens */
      padding: 15px;
    }
  
    .category-page-title {
      font-size: 1.8rem;
      text-align: center;
    }
  
    #subcategory-filter-form select {
      max-width: 100%;
    }
  }  

  .header-content-inner .category a {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(0, 203, 255, 1.00);
    font-family: 'aleobold';
    font-size: 0.8em;
}

/* Message prompt styling */
.ttca-message {
    text-align: center;
    font-size: 15px;
    font-weight: normal;
    background: #fff;
    padding: 28px 40px;
    border: 1px solid #e5e7eb;
    border-top: 3px solid #121141;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    margin-bottom: 2em;
    line-height: 1.7;
    white-space: pre-line;
}

.ttca-message a {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    line-height: 1.4;
    vertical-align: middle;
    margin: 2px 2px;
}

/* Primary CTAs: login + subscribe */
.ttca-message a[href*="wp-login"],
.ttca-message a[href*="subscribe"] {
    background: #121141;
    color: #fff !important;
    border: 1px solid #121141;
}

.ttca-message a[href*="wp-login"]:hover,
.ttca-message a[href*="subscribe"]:hover {
    background: #1e1a6e;
}

/* Secondary CTA: simple access */
.ttca-message a[href*="simple-login"] {
    background: transparent;
    color: #121141 !important;
    border: 1px solid #121141;
}

.ttca-message a[href*="simple-login"]:hover {
    background: #f5f5f5;
}

/* Email link — plain, muted */
.ttca-message a[href*="mailto"] {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    color: #555 !important;
    font-weight: normal;
    font-size: inherit;
    text-decoration: underline !important;
}

.header-content-inner h1 {padding: 0px;}

/* ── Pagination ────────────────────────────────────────── */
.pagination, .comments-pagination, .nav-links,
.nav-previous, .nav-next {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    padding: 2rem 0;
    flex-wrap: wrap;
}
.page-numbers,
.nav-previous a, .nav-next a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-family: ff-real-text-pro-2, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--c-navy);
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.page-numbers:hover,
.nav-previous a:hover, .nav-next a:hover {
    background: var(--c-navy);
    color: #fff;
    border-color: var(--c-navy);
}
.page-numbers.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-navy);
    color: #fff;
    border-color: var(--c-navy);
    cursor: default;
}
.page-numbers.dots {
    border: none;
    background: transparent;
    cursor: default;
    min-width: auto;
    padding: 0 0.25rem;
}
.prev.page-numbers, .next.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    font-size: 0.875rem;
    padding: 0 1rem;
    background: #fff;
    line-height: 1;
}
.prev.page-numbers:hover, .next.page-numbers:hover {
    background: var(--c-navy);
}

/* ── In-House: curated next-stories section ──────────── */
.ih-next-stories {
    margin-bottom: 2rem;
}

/* ── Taxonomy filter bar ──────────────────────────────── */
.filter-label {
    font-family: ff-real-text-pro-2, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
    margin-bottom: 0.5rem;
}
.taxonomy-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.taxonomy-filter-wrapper {
    flex: 1;
    min-width: 160px;
    max-width: 220px;
}
.taxonomy-filter-select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 2rem 0.45rem 0.6rem;
    font-size: 0.85rem;
    font-family: ff-real-text-pro-2, sans-serif;
    color: var(--c-navy);
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23001e41' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.taxonomy-filter-select:hover { border-color: var(--c-navy); }
.taxonomy-filter-select:focus { outline: 2px solid var(--c-navy); outline-offset: 1px; }
.clear-filters { flex: 0 0 auto; }
.clear-filters-btn {
    display: inline-block;
    padding: 0.45rem 1rem;
    border: 1px solid var(--c-navy);
    border-radius: 4px;
    font-family: ff-real-text-pro-2, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-navy);
    background: transparent;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.clear-filters-btn:hover { background: var(--c-navy); color: #fff; }

@media (max-width: 768px) {
    .taxonomy-filters { flex-direction: column; align-items: stretch; }
    .taxonomy-filter-wrapper { max-width: 100%; }
    .clear-filters { margin-top: 0.25rem; }
}

/*styling for law firms page*/
.taxonomy-overview h1 {
    font-family: ff-real-headline-pro, sans-serif;
    font-size:40px;
    font-weight:800;
}
.two-column-layout {
    display: flex;
    gap: 20px;
}

.alphabet-filter {
    width: 20%;
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 10px;
}

/* Terms List Styling */
.terms-container {
    width: 80%;
    height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 20px;
    background: #fff;
}

.alphabet-filter ul {
    list-style: none;
    padding: 0;
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap:10px;
}

.alphabet-filter a li {
    display: flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    padding:5px;
    background:lightgray;
    border-radius: 5px;
}

.alphabet-filter a {
    text-decoration: none;
    border-radius: 5px;
    color: #333;
}

.alphabet-filter a li:hover, .alphabet-filter a li:active {
    background: #082536;
    color: white;
    padding:0;
}

.terms-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
}





/* pagination unified above */

/*Specific Taxonomy pages*/
/*practice areas*/
.practice-area-grid {
    padding-top:2em;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.practice-area-card {
    width: calc(25% - 10px);
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    border-radius: 20px;
    position:relative;
    min-height:100px;
}
.practice-area-card a {
    padding:1em;
    display:block;
    width:100%;
    height:100%;
}

.practice-area-card h2 {
    font-family: ff-real-headline-pro, sans-serif;
    font-size:20px;
}
@media screen and (max-width:600px) {
    .practice-area-card {
        width:100%;
    }
}

/*In-House promoted content*/
.lead-story#in-house-lead {
    flex: 0 1 50%;
    margin-right: 50px;
}
.promoted-stories#in-house-promoted {
   flex: 0 1 40%;
}


.promoted-stories#in-house-promoted img {
    margin-right:20px;
    width:100px;
}

.promoted-stories#in-house-promoted h3 {
    font-size:1.2em;
}
.promoted-stories#in-house-promoted article.promoted:first-of-type {
    padding-top:0;
}

.page-header-bar__search-closed,
.page-header-bar__search-open {
    display: none !important;
}
@media screen and (max-width: 700px) {
    .promoted-stories#in-house-promoted {
   flex: 0 1 100%;
   margin-top: 20px;
}
.lead-story#in-house-lead {
    flex: 0 1 100%;
    margin-right: 0;
}
}
/*Green Ambassadors content*/
.green-ambassador-single {
    margin-bottom: 2em;
    max-width: 600px;
}
@media screen and (max-width: 700px) {
    .green-ambassador-single_header {
        flex-direction: row-reverse;
    }
}
.green-ambassador-single_header {
    background: #3e6554;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 1em;
}
.green-ambassador-single_header_bio {
    color: white;
    padding: 1em;
    margin-right: 2em;
}
.green-ambassador-single_header_bio h3 {
    color: white;
    font-family: ivypresto-headline, serif;
    font-weight: 600;
    font-size: 32px;
}
.green-ambassador-single_header_bio p {
    margin-bottom: 0;
    font-size: 16px;
    font-family: ff-real-text-pro, sans-serif;
}
.green-ambassador-single_header img {
    width: 150px;
    height: 150px;
    align-self: flex-end;
}
.green-ambassador-single_body p {
    font-family: ff-real-text-pro-2, sans-serif;
    font-size: 14px;
}


/*PRINT CSS*/
@media print {
    /* All your print styles go here */
nav,header.page-header .l500-basic, p.pullquote, .related-content, legal500-header {
      display: none !important;
    }
    img.alignright, img.alignleft {
        display:block;
        clear:both;
    }
    .post-meta {
        display:block;
    }
}

/*Green Ambassador CPT*/
#green-ambassadors-top {
    font-family: ff-real-headline-pro, sans-serif;
}
a #green-ambassadors-top {
    text-decoration: none; /* remove default underline */
    border-bottom: 5px solid black;
    transition: border-bottom-width 0.1s ease;
    display: inline;
}
a #green-ambassadors-top:hover {
    border-bottom-width: 6px;
}
.green-ambassador_header {
    display:flex;
    margin-bottom:2em;
    margin-top:1em;
}
.green-ambassador_header__text, .green-ambassador_header__img {
    width:50%;
}
.green-ambassador_header__img img {
    width:60%;
}
.ga-name-wrap {
    position: relative;
}

.ga-name-wrap .green-ambassador__next-gen-eyebrow {
    position: absolute;
    bottom: calc(100% - 3px);
    left: 0;
    color: #094334;
    font-weight: 700;
    font-size: 0.65em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    white-space: nowrap;
}

.green-ambassador_header__text .green-ambassador__next-gen-eyebrow {
    color: #094334;
    font-weight: 700;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.5em;
    display: block;
}

.green-ambassador_header__text h2 {
    font-size:3em;
    font-weight:800;
    margin-bottom:0;
}
.green-ambassador_header__text h3, .green-ambassador_header__text h4 {
    font-size:2em;
    font-family: ff-real-headline-pro, sans-serif;
    font-weight:800;
    margin-top:0.5em;
    padding-top:0;
}
.green-ambassador_header__profiles {
    display:flex;
    gap:10px;
    justify-content:flex-start;
    flex-wrap:wrap;
    margin-top:2em;
}
.green-ambassador_header__profiles a {
    box-shadow: none !important;
}
.green-ambassador_header__links {
    background: #453CF0;
    color: white;
    border-radius: 5px;
    padding: 5px 25px;
    max-height: 34px;
    font-weight: 400;
    font-size:14px;
    transition: all ease 0.2s;
    font-variant-numeric: lining-nums;
}
.green-ambassador_header__links:hover {
    background: #3A34C4 !important;
}
.green-ambassadors-writeup {
    max-width:800px;
}
.green-ambassadors-writeup p {
    font-size:16px;
}

.green-ambassadors-navigation {
    display:flex;
    width:50%;
    justify-content:space-between;
}

.green-ambassadors-navigation a {
    box-shadow:none !important;
    font-weight:500;
    font-family: ff-real-text-pro, sans-serif;
    font-size:14px;
}

/* Profile page prev/next navigation */
.ga-post-nav {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 3em;
    padding-top: 1.5em;
    border-top: 1px solid #e8e8e8;
}
.ga-post-nav__prev,
.ga-post-nav__next {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 45%;
    text-decoration: none;
    box-shadow: none !important;
    color: var(--c-navy-dark);
    transition: color 0.15s ease;
}
.ga-post-nav__next {
    text-align: right;
    margin-left: auto;
}
.ga-post-nav__direction {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}
.ga-post-nav__name {
    font-size: 14px;
    font-weight: 600;
    font-family: ff-real-text-pro, sans-serif;
    color: var(--c-navy-dark);
    line-height: 1.3;
}
.ga-post-nav__prev:hover .ga-post-nav__name,
.ga-post-nav__next:hover .ga-post-nav__name {
    color: #453CF0;
}
@media (max-width: 600px) {
    .ga-post-nav { flex-direction: column; gap: 16px; }
    .ga-post-nav__prev, .ga-post-nav__next { max-width: 100%; text-align: left; margin-left: 0; }
}

@media screen and (max-width: 700px) {
    a #green-ambassadors-top {
        border-bottom:none;
        color: #4740E8;
    }
    .green-ambassador_header {
        flex-wrap:wrap;
    }
    .green-ambassador_header__text, .green-ambassador_header__img {
        width:100%;
    }
    .green-ambassador_header__img {
        margin-top:2em;
    }
    .green-ambassadors-navigation {
        width:100%;
    }
    .green-ambassador_header__profiles {
        justify-content:space-between;
    }
    .green-ambassador_header__profiles a {
        min-width:30vw;
    }
    
    .green-ambassador-single-item h3 {
        font-size:1.5em;
    }
}

/* GA edition page breadcrumb */
.ga-edition-breadcrumb {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    margin-top: 0;
}
.ga-edition-breadcrumb a {
    color: #888;
    text-decoration: none;
    box-shadow: none !important;
}
.ga-edition-breadcrumb a:hover {
    color: var(--c-navy-dark);
}

/*Green Ambassadors homepage*/
header.category-page-header#ga-header {
    background: #fff;
    padding: 0;
}
h1.category-page-title {
    text-align:left;
    font-weight:600;
}
h1.category-page-title#green-ambassadors {
    font-size:2.5em;
    font-weight:600;
}
.category-archive-description#green-ambassadors {
    max-width: 700px;
}
.category-archive-description#green-ambassadors p {
    color: black;
    line-height:1.2;
}
.ga-header-extra {
    color: #4740E8;
    margin-top: 1em;
    margin-bottom:2em;
    display:block;
}

button.ga-submit {
    background: #453CF0;
    color: white;
    border-radius: 5px;
    padding: 5px 25px;
    max-height: 34px;
    font-weight: 400;
    transition: all ease 0.2s;
}
button.ga-submit:hover, button.ga-submit:active, button.ga-submit:focus {
    background: #3A34C4;
}

@media screen and (max-width: 1280px) {
.category-archive-description#green-ambassadors {
    max-width:unset;
    width:unset;
}
}
/*Green Ambassadors category featured section*/
.lead-story#ga-lead {
    flex: 0 1 55%;
    margin-right: 40px;
}
.promoted-stories#ga-promoted {
    flex: 1 1 0;
    align-self: flex-start;
}
.promoted-stories#ga-promoted article.promoted {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.promoted-stories#ga-promoted article.promoted:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.promoted-stories#ga-promoted img {
    width: 70px;
    height: auto;
    margin-right: 12px;
    flex-shrink: 0;
}
.promoted-stories#ga-promoted h3 {
    font-size: 0.9em;
    font-weight: 600;
    padding-top: 0;
    margin-bottom: 4px;
    color: var(--c-navy-dark);
}
.promoted-stories#ga-promoted h3 a,
.promoted-stories#ga-promoted a {
    color: var(--c-navy-dark);
    text-decoration: none;
}
.promoted-stories#ga-promoted h3 a:hover,
.promoted-stories#ga-promoted a:hover {
    color: #453CF0;
}
.promoted-stories#ga-promoted p.post-meta {
    font-size: 0.8em;
    color: #555;
    margin: 0;
}
@media (max-width: 768px) {
    .lead-story#ga-lead,
    .promoted-stories#ga-promoted {
        flex: 1 1 100%;
        margin-right: 0;
    }
}

/*Green Ambassadors edition pages*/
.green-ambassadors-region-grid {
    display:flex;
    gap:20px;
    justify-content:flex-start;
    flex-wrap:wrap;
}
.green-ambassadors-region-grid h1 {
    width:100%;
    font-family:ff-real-headline-pro, sans-serif;
    font-weight:600;
}
.green-ambassadors-region-grid h2 {
    width:100%;
    padding-top:0;
}
.green-ambassador-single-item {
    width:30%;
    max-width:200px;
}
.green-ambassador-single-item h3 {
    padding-top:0;
    font-weight:600;
    margin-top:10px;
    margin-bottom:0;
}
.green-ambassador-single-item h4 {
    padding-top:0;
    font-weight:600;
    font-family: ff-real-text-pro, sans-serif;
}

.green-ambassador_header__text h4#region {
    color: #4740E8;
    font-size:16px;
    font-weight:400;
}
@media screen and (max-width: 700px) {
    .green-ambassador-single-item {
        width:80%;
        max-width:unset;
    }
    .green-ambassadors-region-grid h2 {
        font-size:2em;
        font-weight:600;
    }
    }


  

  /*homepage carousel image consistency*/
  .carousel-image-wrapper {
    width: 400px;
    height: 200px;
    overflow: hidden;
}
.carousel-item h3 {
    padding-top:0.75em;
}

.carousel-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
@media (max-width: 1000px) {
    .carousel-image-wrapper {
        width:200px;
    }
}
@media (max-width: 768px) {
    .carousel-image-wrapper {
        width:100%;
    }

}

/* ==========================================================================
   Search & Filter Pro (page-search-results.php)
   Moved from inline <style> block in template to stylesheet.
   ========================================================================== */

.searchandfilter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 10px 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.searchandfilter ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    align-items: center;
}

.sf-field-search input[type="text"] {
    flex: 2;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

.sf-input-select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    flex: 1;
}

.sf-field-submit input[type="submit"],
.sf-field-reset input[type="submit"] {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center;
}

.sf-field-submit input[type="submit"]:hover,
.sf-field-reset input[type="submit"]:hover {
    background-color: #005177;
}

@media (max-width: 768px) {
    .searchandfilter {
        flex-direction: column;
        gap: 10px;
    }

    .searchandfilter ul {
        flex-direction: column;
        align-items: flex-start;
    }

    .sf-field-search input[type="text"],
    .sf-input-select,
    .sf-field-submit input[type="submit"],
    .sf-field-reset input[type="submit"] {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* =============================================
   FOOTER NAV
   ============================================= */

.footer-nav-default {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    padding: 36px 0 28px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 24px;
}

.footer-nav-col {
    flex: 1 1 0;
}

.footer-nav-col h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-navy);
    margin: 0 0 12px;
    font-family: var(--f-headline)
}

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

.footer-nav-col ul li {
    margin: 0 0 6px;
    padding: 0;
}

.footer-nav-col ul li a {
    font-size: 13px;
    color: #4a5568;
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-nav-col ul li a:hover,
.footer-nav-col ul li a:focus {
    color: var(--c-navy);
    text-decoration: underline;
}

/* Footer widget areas (when populated via WP Admin) */
.footer-widgets {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    padding: 36px 0 28px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 24px;
}

.footer-widget-area {
    flex: 1 1 0;
}

/* Site info: social + copyright + links */
.site-info {
    text-align: center;
    font-size: 13px;
    color: #718096;
    padding: 0 0 16px;
}

.site-info p {
    margin: 4px 0;
}

.site-info a {
    color: #4a5568;
    text-decoration: none;
}

.site-info a:hover {
    color: var(--c-navy);
    text-decoration: underline;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.footer-social a {
    font-size: 18px;
    color: #4a5568;
    transition: color 0.15s ease;
    line-height: 1;
}

.footer-social a:hover {
    color: var(--c-navy);
}

.footer-links {
    margin-top: 8px;
    font-size: 12px;
    color: #a0aec0;
}

.footer-links a {
    color: #718096;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--c-navy);
    text-decoration: underline;
}

/* Responsive: stack columns on mobile + consistent side padding */
@media (max-width: 768px) {
    #colophon .wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }
}
@media (max-width: 600px) {
    .footer-nav-default,
    .footer-widgets {
        flex-direction: column;
        gap: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE COMPONENT ADDITIONS
   All colours / fonts reference the :root tokens above.
   ═══════════════════════════════════════════════════════════ */

/* ── One-line article meta: CATEGORY · Author · Date ────── */
/* p.article-meta specificity (0,1,1) beats legacy .context p rules */
p.article-meta {
    font-size: var(--text-xs);      /* 11px */
    color: var(--c-text-muted);
    margin: var(--sp-1) 0 0;
    line-height: 1.5;
    display: block;
}
p.article-meta a,
p.article-meta time {
    color: var(--c-text-muted);
    text-decoration: none;
}
p.article-meta .meta-cat {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-2xs);     /* 10px */
    color: var(--c-navy);
}
p.article-meta a:hover { text-decoration: underline; }
/* CSS-injected middot separators — no extra markup needed */
p.article-meta > * + *::before {
    content: ' · ';
    color: #bbb;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Most Read: CSS counter numbering ───────────────────── */
#most-read .promoted-list      { counter-reset: mr-item; }
#most-read article.promoted {
    counter-increment: mr-item;
    display: block;
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
}
#most-read article.promoted::before { content: none; }
#most-read .mr-title-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
#most-read .mr-title-row::before {
    content: counter(mr-item);
    font-family: var(--f-display);
    font-size: 2em;
    font-weight: 700;
    line-height: 1;
    color: var(--c-navy);
    flex-shrink: 0;
}
#most-read .mr-content          { min-width: 0; }
#most-read .promoted h3 {
    font-family: var(--f-headline); /* ivypresto-headline — matches middle column */
    font-size: 14px;
    font-weight:400;
    text-transform: none;
    margin: 0 0 3px;
    line-height: 1.3;
    margin-bottom:0 !important;
}
#most-read .article-meta {
    padding-left: calc(2em + 0.5em); /* indent meta under title, not number */
}

/* ── Section label (e.g. "Latest News") ─────────────────── */
.section-title {
    letter-spacing: normal;
    color: var(--c-navy-dark);
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    padding-top: 15px !important;
    font-family: ff-real-headline-pro, sans-serif;
}

/* ── Standalone post-date (legacy; kept for non-homepage use) */
.post-date {
    display: block;
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    margin-top: var(--sp-1);
}

/* ── Newsletter CTA strip ───────────────────────────────── */
#newsletter-cta {
    background: var(--c-navy);
    padding: 28px 40px;
    text-align: center;
    margin: 0 0 var(--sp-8);
}
.newsletter-cta-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    flex-wrap: wrap;
}
.newsletter-cta-inner p {
    color: var(--c-white);
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}
.newsletter-cta-btn {
    display: inline-block;
    background: var(--c-white);
    color: var(--c-navy);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 24px;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.newsletter-cta-btn:hover {
    background: #e2e8f0;
    color: var(--c-navy);
    text-decoration: none;
}
@media (max-width: 600px) {
    #newsletter-cta           { padding: 20px; }
    .newsletter-cta-inner     { flex-direction: column; gap: 14px; }
}

/* ── Slick carousel: custom SVG arrow buttons ───────────── */
.slick-carousel { position: relative; padding: 0 36px; }

.slick-prev,
.slick-next {
    position: absolute;
    top: 90px;
    z-index: 10;
    width: 36px;
    height: 36px;
    background: var(--c-white);
    border: 1px solid #d1dce8;
    border-radius: 50%;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: background 0.15s, border-color 0.15s;
    font-size: 0;
    line-height: 0;
    transform: none;
}
.slick-prev { left: 0; }
.slick-next { right: 0; }
.slick-prev:hover,
.slick-next:hover {
    background: var(--c-navy);
    border-color: var(--c-navy);
}
.slick-prev svg,
.slick-next svg { display: block; margin: auto; }
.slick-prev svg polyline,
.slick-next svg polyline {
    stroke: var(--c-navy);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.slick-prev:hover svg polyline,
.slick-next:hover svg polyline { stroke: var(--c-white); }
/* Suppress the slick-theme.css font glyph */
.slick-prev::before,
.slick-next::before { display: none; }

/* ── Carousel section spacing ───────────────────────────── */
#life-during-law,
#leadership { padding-top: 1.5em; padding-bottom: 0.5em; }
#life-during-law h2,
#leadership h2 { margin-bottom: 0.75em; }

/* Normalise carousel card heights via line-clamp */
.carousel-item h3,
.carousel-item p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
}

/* ── Keyboard focus states ──────────────────────────────────
   Uses :focus-visible so mouse users are unaffected.
   Provides a consistent, high-contrast 3px outline with
   a 2px transparent offset so it clears the element edge.
──────────────────────────────────────────────────────────── */

/* Global default — all interactive elements */
:focus-visible {
    outline: 3px solid var(--c-purple);
    outline-offset: 2px;
}

/* Links — use the purple outline */
a:focus-visible {
    outline: 3px solid var(--c-purple);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Buttons (load-more, newsletter CTA, slick arrows) */
button:focus-visible,
[role="button"]:focus-visible,
#load-more:focus-visible,
.newsletter-cta-btn:focus-visible,
.slick-prev:focus-visible,
.slick-next:focus-visible {
    outline: 3px solid var(--c-purple);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Inputs and textareas (comment forms, search) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--c-purple);
    outline-offset: 0;
    border-color: var(--c-purple);
    box-shadow: 0 0 0 1px var(--c-purple);
}

/* Skip-to-content link — reveal on focus for keyboard users */
.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: 9999;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-navy);
    color: var(--c-white);
    font-size: var(--text-sm);
    font-weight: 700;
    border-radius: 3px;
    outline: 3px solid var(--c-purple);
    outline-offset: 2px;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE FIXES
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Global overflow guard ─────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── 2. Logo: scale on small screens ─────────────────────── */
@media (max-width: 768px) {
    .site-branding img { width: 200px; }
}
@media (max-width: 600px) {
    .site-branding img { width: 180px; }
}

/* ── 3. Search input: full-width on small screens ────────── */
@media (max-width: 600px) {
    .search-form-wrapper form    { width: 100%; flex-wrap: wrap; }
    .search-form-wrapper input[type="search"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── 4. Header wrapper: add side padding on phones ─────────── */
@media (max-width: 600px) {
    .header-wrapper { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ── 5. Financials thumbnail: responsive ─────────────────── */
@media (max-width: 768px) {
    .financials-single-section          { flex-direction: column; }
    .financials-single-section .thumbnail {
        width: 100%;
        height: 220px;
        margin-right: 0;
        margin-bottom: 1em;
    }
}

/* ── 6. Two-column taxonomy layout (law firms etc.): stack on mobile */
@media (max-width: 768px) {
    .two-column-layout              { flex-direction: column; }
    .alphabet-filter,
    .terms-container {
        width: 100%;
        height: auto;
        position: static;
        overflow-y: visible;
    }
    .alphabet-filter { border-bottom: 1px solid #ddd; margin-bottom: 1em; }
}

/* ── 7. Entry / page title: reduce size on phones ─────────── */
@media (max-width: 600px) {
    h1.entry-title, h1.title    { font-size: 1.5em !important; }
    body.page h1.entry-title    { font-size: 1.75rem !important; }
    .single-post .entry-title   { font-size: 1.6rem !important; }
}

/* ── 8. Vertical divider: hide on mobile (sections stack, no divider needed) */
@media (max-width: 768px) {
    hr.vertical-span {
        display: none;
    }
}

/* ── 9. Carousel image wrapper: fluid at all sizes above 768px */
@media (min-width: 769px) {
    .carousel-image-wrapper {
        width: 100%;
        max-width: 400px;
    }
}

/* ── 10. Content tables: horizontal scroll on narrow screens */
@media (max-width: 768px) {
    .entry-content table,
    .entry-content .wp-block-table table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
}

/* ── 11. Login / register: compact on very small phones ─────── */
@media (max-width: 480px) {
    .custom-login-container,
    .custom-register-container {
        margin: 20px auto;
        padding: 16px;
        box-sizing: border-box;
        width: calc(100% - 20px);
    }
}

/* ── 12. Featured story: stack at mid-tablet (769–900px) ───── */
@media (max-width: 900px) and (min-width: 769px) {
    .featured-content               { flex-wrap: wrap; gap: 20px; }
    .lead-story                     { flex: 1 1 100%; margin-right: 0; }
    .promoted-stories               { flex: 1 1 calc(50% - 10px); }
    hr.vertical-span                { display: none; }
}

/* ── 13. More-from items: stack on phones ──────────────────── */
@media (max-width: 600px) {
    .more-from-list                 { flex-direction: column; }
    .more-from-list .more-from-item { max-width: 100%; flex: 1 1 100%; }
}

/* ── 14. Homepage mobile polish ────────────────────────────── */
@media (max-width: 768px) {

    /* Full-bleed sections: break out of #main-content's 20px padding
       so #newsletter-cta and #highlight run edge-to-edge on phones */
    #newsletter-cta,
    #highlight {
        margin-left:  -20px;
        margin-right: -20px;
    }
    #newsletter-cta { padding: 20px 20px; }
    #highlight      { padding: 1.25em 20px; }

    /* Latest News: tighten the gap (40px is too much at single-column) */
    #latest-articles .article-list { gap: 0; }

    /* Remove odd/even two-column styling at single-column mobile */
    .latest-item                   { width: 100%; }
    .latest-item:nth-child(odd)    { padding-right: 0; }
    .latest-item:nth-child(even)   { padding-left: 0; border-left: none; }

    /* Highlights: fix lead image — the <a> wrapper still has width:40%
       even though the inner <img> is set to 100% by the existing rule */
    .lead-highlight__image         { width: 100%; }
    /* Stack text above image */
    .lead-highlight                { flex-direction: column; }

    /* More-from / Financials: spacing between stacked cards */
    .more-from-list                { display: flex; flex-direction: column; gap: 20px; }
    .more-from-list .more-from-item { max-width: 100%; flex: none; }
    .more-from-list .more-from-item img { height: 180px; }

    /* Section headings: slightly smaller on phones */
    #main-content section > h2 {
        font-size: 1.4em;
        margin-bottom: 0.6em;
    }

    /* Section separating <hr>: reduce vertical rhythm */
    #main-content > hr { margin: 1.5em 0; }

    /* Promoted articles (featured four): tighten the gap */
    .promoted-stories .promoted-list { gap: 0; }
}

/* ── 15. Article list: small-phone specific ─────────────────── */
@media (max-width: 480px) {
    .latest-item img { width: 80px; height: 60px; }
    .latest-item h3  { font-size: 1em; }
}


/* ═══════════════════════════════════════════════════════════
   SINGLE POST — REDESIGNED ARTICLE HEADER
   ═══════════════════════════════════════════════════════════ */

/* Hide old Yoast breadcrumb on single posts (replaced by badges) */
.single-post .breadcrumbs { display: none; }

/* Suppress the old post-meta / post-tags blocks if ever rendered */
.single-post .post-meta,
.single-post .post-tags   { display: none; }

/* ── Constrain article body to reading width ─────────────── */
.single-post .entry-content {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ── Article header container ────────────────────────────── */
.article-header {
    padding-top: 1.5em !important;  /* !important needed: .entry-header zeroes this in desktop MQ */
    padding-bottom: 0;
    margin-bottom: 0;
}
.article-header .entry-title {
    margin-top: 0.2em;
    margin-bottom: 0.35em !important;
}

/* ── Category / tag badges ───────────────────────────────── */
.article-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0.6em;
}
.badge {
    display: inline-block;
    font-family: ff-real-text-pro-2, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 2px;
    line-height: 1.6;
    transition: background 0.15s, color 0.15s;
}
.badge--cat {
    background: var(--c-navy);
    color: var(--c-white);
}
.badge--cat:hover { background: var(--c-purple); color: var(--c-white); }
.badge--tag {
    background: transparent;
    color: var(--c-navy);
    border: 1px solid var(--c-navy);
}
.badge--tag:hover { background: var(--c-navy); color: var(--c-white); }
.badge--firm {
    background: transparent;
    color: var(--c-purple);
    border: 1px solid var(--c-purple);
}
.badge--firm:hover { background: var(--c-purple); color: var(--c-white); }
.badge--overflow-hidden { display: none !important; }
.badge--more {
    background: transparent;
    color: var(--c-navy);
    border: 1px dashed var(--c-navy);
    cursor: pointer;
    opacity: 0.7;
}
.badge--more:hover { opacity: 1; background: var(--c-navy); color: var(--c-white); border-style: solid; }

/* ── Standfirst / deck below title ──────────────────────── */
.article-standfirst {
    font-family: ff-real-text-pro-2, sans-serif;
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    color: #444;
    margin: 0 0 0.75em;
}

/* ── Meta strip: avatar · author · date · reading time ────── */
.article-meta-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.65em 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1.75em;
    font-family: ff-real-text-pro-2, sans-serif;
    font-size: 13px;
    color: #555;
}
.meta-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.meta-avatar--second {
    margin-left: -10px;
}
.meta-text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.4;
}
a.meta-author {
    font-weight: 700;
    color: var(--c-navy);
    text-decoration: none;
}
a.meta-author:hover { text-decoration: underline; }
.meta-sep { color: #888; }
.meta-dot { color: #ccc; padding: 0 1px; }
.meta-date,
.meta-read { color: #777; }

/* Tag badges — right-aligned inside the meta strip */
.meta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-left: auto;
    justify-content: flex-end;
}

/* Tablet: wrap meta strip so badges don't crowd author/date on portrait tablet */
@media (max-width: 768px) {
    .article-meta-strip {
        flex-wrap: wrap;
    }
    .meta-badges {
        margin-left: 0;
        justify-content: flex-start;
        padding-top: 2px;
    }
}

/* Mobile: tighten meta strip further + drop badge to its own row */
@media (max-width: 600px) {
    .article-meta-strip {
        gap: 8px;
    }
    .meta-text           { font-size: 12px; }
    .meta-avatar         { width: 30px; height: 30px; }
    .meta-badges {
        width: 100%;
        padding-top: 4px;
    }
}

/* Mobile: add side padding so article content doesn't run edge-to-edge */
@media (max-width: 600px) {
    #main-content-feature,
    .single-post .entry-content {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ── Hero image: landscape — full-width, height-capped ──── */
.article-hero {
    margin-bottom: 1.75em;
    overflow: hidden;
}
.article-hero__img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Mobile: reduce hero height and tighten gap above it */
@media (max-width: 768px) {
    .article-meta-strip {
        margin-bottom: 1em;
    }
    .article-hero__img {
        max-height: 280px;
    }
}

/* ── Hero image: portrait — floats right, full image shown ─ */
.article-hero--portrait {
    float: right;
    width: 38%;
    max-width: 380px;
    margin: 0 0 1.5em 2em;
    overflow: visible;
}
.article-hero--portrait .article-hero__img {
    max-height: none;       /* show full photo, no crop */
    object-fit: fill;
    width: 100%;
    height: auto;
}

/* Portrait image: stack full-width on tablet and below */
@media (max-width: 768px) {
    .article-hero--portrait {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1.5em 0;
    }
    .article-hero--portrait .article-hero__img {
        max-height: 420px;
        object-fit: cover;
        object-position: center top;
        height: auto;
    }
}

/* ── Financials / More From — meta below card titles ──────── */
.more-from-item p.article-meta {
    margin-top: var(--sp-2);
}

/* ── Mobile navigation toggle ─────────────────────────────── */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: auto;
    flex-shrink: 0;
    flex-direction: column; /* stack bars vertically to form ☰ */
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    gap: 0; /* bar spacing handled by margin-top on sibling bars */
}

.mobile-menu-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-navy);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.mobile-menu-toggle__bar + .mobile-menu-toggle__bar { margin-top: 5px; }

/* Animate to X when open */
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    /* Show hamburger at tablet and below */
    .mobile-menu-toggle { display: flex; }

    /* Mobile nav — show/hide handled by Max Mega Menu plugin's own JS */

    /* Mobile sub-menus — override desktop opacity/visibility with display toggle */
    .primary-menu .sub-menu {
        position: static;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.06);
        padding: 0;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: none;
        display: none;
    }

    .primary-menu > li.menu-item-has-children.is-open > .sub-menu {
        display: block;
    }

    .primary-menu .sub-menu a {
        padding-left: 32px;
        color: var(--c-navy);
    }

    .primary-menu .sub-menu a:hover {
        color: var(--c-navy-dark);
        background: var(--c-bg-subtle);
    }
}

/* ── 404 page ─────────────────────────────────────────── */

/* Override Twenty Seventeen's two-column float layout on 404 */
.error-404 .page-header,
.error-404 .page-content {
    float: none !important;
    width: 100% !important;
    padding-right: 0 !important;
}

.error-404__code {
    display: block;
    font-family: ivypresto-headline, Georgia, serif;
    font-size: 8rem;
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1;
    margin-bottom: 0.15em;
}
.error-404 .page-header {
    border-bottom: 2px solid var(--c-navy);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}
.error-404 .page-title {
    font-size: 2rem;
    margin-top: 0;
}
.e404-subtitle {
    color: #555;
    font-size: 1.05rem;
    margin-top: 0.25rem;
}
.e404-search { margin-bottom: 2rem; }
.e404-categories h2,
.e404-recent h2 {
    font-family: ff-real-text-pro-2, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #777;
    margin-bottom: 0.75rem;
}
.e404-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}
.e404-nav a {
    display: inline-block;
    padding: 0.4em 1em;
    border: 1px solid var(--c-navy);
    border-radius: 2px;
    font-family: ff-real-text-pro-2, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-navy);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.e404-nav a:hover { background: var(--c-navy); color: #fff; }
.e404-recent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 0.75rem 0 2rem;
}
.e404-recent-card { display: flex; flex-direction: column; gap: 0.5rem; }
.e404-recent-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.e404-recent-card a {
    font-family: ff-real-headline-pro, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-navy);
    text-decoration: none;
    line-height: 1.35;
}
.e404-recent-card a:hover { color: var(--c-purple); }
.return-home { margin-top: 1.5rem; }
@media (max-width: 768px) {
    .e404-recent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .error-404__code { font-size: 5rem; }
    .e404-recent-grid { grid-template-columns: 1fr; }
}

/* ── Mobile UX improvements ──────────────────────────────── */
@media (max-width: 768px) {

    /* Lead story — breathe between image / title / meta / intro */
    .lead-story .lead img                { margin-bottom: 14px; }
    h1.lead-story-title                  { margin-bottom: 0.5em !important; }
    .lead-story .article-meta            { margin: 10px 0 12px !important; }
    .lead-story .lead-standfirst         { margin: 10px 0 12px !important; }
    .lead-story .lead-intro              { margin-top: 8px; }

    /* Most-read promotion banner — more vertical breathing room */
    .most-read-promotion__text           { padding: 8px 0; }

    /* Single article — close gap below sticky header; widen content.
       Parent theme stacks main (was 20px) + .wrap (2em=30px) = 42px each side.
       Consolidate to one 12px gutter on the wrap; zero main sides. */
    .single main#main,
    .single .site-main                   { padding-top: 6px !important; padding-left: 0 !important; padding-right: 0 !important; }
    .single main .wrap                   { padding-left: 12px !important; padding-right: 12px !important; }

    /* Carousel — tighter side padding so image fills more of the viewport */
    .slick-carousel                      { padding: 0 24px; }

    /* Carousel image — use aspect ratio rather than fixed height */
    .carousel-image-wrapper {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    /* Slick dots — single-row, compact */
    .slick-dots {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: center;
        overflow: hidden;
        gap: 4px;
        padding: 8px 0 0;
    }
    .slick-dots li { width: 8px; height: 8px; margin: 0; }
    .slick-dots li button { width: 8px; height: 8px; padding: 0; }
    .slick-dots li button::before { font-size: 6px; width: 8px; height: 8px; }
}

/* ── Single article structural cleanup (all viewports) ─────────────────────
   1. Zero out site-content top padding on single posts — parent theme adds
      2.5em unconditionally; our sticky header makes extra space redundant.
   2. Suppress any stray <header> inside article that isn't our .entry-header
      (parent theme template may output an empty one in certain code paths).
   3. Hide .entry-footer when it contains only whitespace / the edit link —
      the edit link is accessible via the admin bar so no usability loss.       */
.single .site-content {
    padding-top: 0 !important;
}
.single article header:not(.entry-header) {
    display: none !important;
}
.single footer.entry-footer {
    display: none !important;
}