body {
    font-size: 18px;
    line-height: 1.6;
    font-family: Arial, sans-serif;
}

h2 {
    font-family: Arial, sans-serif;
    font-size: 1.8rem;
    color: #1C2BB0;
    margin-top: 100px;
    margin-bottom: 15px;
}

/* Base h3 styling — applies site‑wide */
h3 {
    font-family: Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
    margin-top: 28px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Line divider to visually separate sections */
.plate-divider {
    border: 0;
    border-top: 3px solid #007BFF; /* same blue as your pill */
    margin: 30px 0 20px 0;
}


.footer-image {
    text-align: center;
    margin: 40px 0;
    clear: both;
}

/* Improve readability of instructional lists */
.analysis-tool-content ol li,
.analysis-tool-content ul li {
    margin-bottom: 0.75rem;
}

.analysis-tool-content h2 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.analysis-tool-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.analysis-tools-block {
  font-size: 1rem;
  line-height: 1.4;
}


@media print {
    .analysis-tool-content {
        display: block;
    }

    .tool-form {
        page-break-before: always;
    }
}

/* H2 Category Icons */
h2.civic-category {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

h2.civic-category::before {
    content: "";
    width: 2.2em;
    height: 2.2em;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Category Types */
h2.civic-category.power::before {
    background-image: url('/images/civic_category_icons/network.webp');
}

h2.civic-category.narrative::before {
    background-image: url('/images/civic_category_icons/narrative.webp');
}

h2.civic-category.readiness::before {
    background-image: url('/images/civic_category_icons/shield.webp');
}

h2.civic-category.civic::before {
    background-image: url('/images/civic_category_icons/individual.webp');
}


/* Civic Responsibility lenses (inherits h3 styles) */
h3.civic-lens::before {
    content: "";
    width: 1.8em;
    height: 1.8em;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Responsibility types */
h3.civic-lens.human::before {
    background-image: url('/images/civic_responsibilities_icons/people.webp');
}

h3.civic-lens.legal::before {
    background-image: url('/images/civic_responsibilities_icons/justice.avif');
}
/* Operational Readiness & Institutional Failure */
h3.civic-lens.readiness::before {
    background-image: url('/images/civic_responsibilities_icons/failure.gif');
}
/* Power, Incentives & Influence */
h3.civic-lens.power::before {
    background-image: url('/images/civic_responsibilities_icons/influence.gif');
}

/* Information Control & Narrative Manipulation */
h3.civic-lens.narrative::before {
    background-image: url('/images/civic_responsibilities_icons/control.gif');
}

/* Civic Responsibility & Moral Courage */
h3.civic-lens.civic::before {
    background-image: url('/images/civic_responsibilities_icons/courage.gif');
}





.action-indent {
    margin-left: 2rem;
    font-style: italic;
}

.action-indent::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-image: url('/analysis_tools_files/icons/learning_exercise.svg');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}
main {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 20px;
}

body, main, .container, .content {
    max-width: none;
    width: 100%;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Buffer large feature image */
    .image002 {
    float: none;
    max-width: 100%;
    margin: 40px 0;
}

    .image002 img {
    width: 100%;
    height: auto;
    display: block;
}

p {
    line-height: 32px;
    margin-bottom: 30px;
}
.page-nav-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin: 20px 0;
}

.page-nav-controls a {
    text-decoration: none;
    font-size: 0.95rem;
    color: #444;
}

.page-nav-controls {
    margin-top: 30px;   /* space from image above */
    margin-bottom: 20px;
}

.page-nav-controls a:hover {
    text-decoration: underline;
}.page-nav-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin: 20px 0;
}

.page-nav-controls a {
    text-decoration: none;
    font-size: 0.95rem;
    color: #444;
}

.page-nav-controls {
    margin-top: 30px;   /* space from image above */
    margin-bottom: 20px;
}

.page-nav-controls a:hover {
    text-decoration: underline;
}
.page-nav-controls a {
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.home-icon {
    width: 18px;
    height: auto;
    display: inline-block;
}


/* ============================================================================
   OPTIONAL FEATURE: Sticky (Frozen) Top Navigation
   ----------------------------------------------------------------------------
   This block shows how to freeze the Top Nav so it remains visible at the top
   of the screen while scrolling. It is currently DISABLED.

   To enable:
     1. Remove the opening  "/*"  and closing  "* /"  comment markers.
     2. Ensure no page uses body { margin-top: ... } because sticky nav
        automatically creates the correct spacing.
     3. The header.php structure is already compatible with sticky behavior.

   Visual effect when enabled:
     - The Top Nav stays fixed at the top during scroll.
     - B‑Roll and page content scroll underneath it.
     - Provides a modern, consistent navigation experience.
   ============================================================================

   .top-nav {
       position: sticky;
       top: 0;
       z-index: 1000;
   }

   ============================================================================ */


.pledge-toggle::after {
    content: "➤";          /* or + or ▼ — whatever icon you use */
    font-size: 1.8rem;     /* makes the icon ~30–40% larger */
    margin-left: 10px;     /* spacing from text */
    display: inline-block;
    line-height: 1;
}
.pledge-toggle {
    border: 2px solid #1e73be;   /* blue outline */
    padding: 10px 14px;
    border-radius: 8px;
}
.pledge-toggle::after {
    content: "▸";               /* right-pointing arrow */
    color: #1e73be;             /* blue arrow */
    font-size: 1.6rem;          /* ~30% larger */
    margin-left: 10px;
    display: inline-block;
    transition: transform 0.2s ease;
}
.pledge-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
}

figcaption{
 font-size: 0.9em;
 color: #555;
 font-style: italic;
 margin-top: 6px;
 line-height: 1.3;
}
figcaption em{ font-style: italic; } /* keeps emphasis, but not required */


/* =========================
   B-Roll Placeholder (Phase 1)
   ========================= */
.lx-card {
    margin-left: 2em;
    margin-bottom: 1em;
}

.lx-card h4 {
    margin-left: -1em;
}




/* =========================
   B-Roll Placeholder (Phase 1)
   ========================= */

.broll-holder {
    width: 100%;
    text-align: center;
    margin: 20px auto;
}

.broll-holder img {
    max-width: 650px;
    width: 100%;
    height: auto;
    display: inline-block;
}

/* =========================
   B-Roll Launcher (Phase 2)
   ========================= */

.broll-launcher {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    background: #111;
    cursor: pointer;
}

.broll-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #222, #000);
}

.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: white;
    background: rgba(0,0,0,0.25);
}

.broll-caption {
    font-size: 0.9rem;
    color: #555;
    margin-top: 0.5rem;
}

.bhold-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1; /* <-- THIS is the missing piece */
}

.broll-bg {
  z-index: 0;
}

.play-overlay {
  z-index: 2;
}




/* =========================
   B-HOLD (Coming Soon)
   ========================= */
.bhold-holder{
 width: 100%;
 text-align: center;
 margin: 20px auto;
}

.bhold-slot{
 position: relative;
 width: 100%;
 max-width: 320px; /* match your broll-launcher */
 aspect-ratio: 16 / 9; /* reserves space so content won’t crawl up */
 margin: 0 auto;
 overflow: hidden;
}

.bhold-img{
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover; /* use 'contain' if you don't want cropping */
 display: block;
}
@media (max-width: 768px){
 .bhold-slot{
 max-width: 210px;
 }



/* Banner */

.banner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    padding: 10px;
}


.banner-left {
    width: 60px;
    height: auto;
}

.banner-title {
    font-size: 28px;
    text-align: center;
    flex-grow: 1;
}

.menu-icon {
    width: 40px;
    height: auto;
    cursor: pointer;
}

.section-header {
    font-size: 32px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
}

/* Strong global heading override */
body h1,
body h2,
body h3 {
    font-family: Arial, sans-serif !important;
    color: #2901ca !important;
    margin-bottom: 15px;
}

/* ============================================
   Universal Image + Caption Block (site-wide)
   ============================================ */

.image-block {
    float: left;
    margin: 20px 15px 30px 0;
    max-width: 40%;
}

.image-block img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.image-block figcaption {
    font-size: 0.85rem;
    color: #555;
    margin-top: 4px;
    line-height: 1.3;
}

.intro-block {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 1em;
}

.intro-block img {
    max-width: 220px;
    height: auto;
}

/* Paragraph spacing inside intro text */
.intro-text p {
    margin-bottom: 1em;
}

.img-left {
    float: left;
    width: 35%;
    max-width: 320px;
    height: auto;
    margin: 0 20px 20px 0;
}

.recommended-videos {
    clear: both;
    margin: 40px 0;
}

/* ============================
   5c_icon code
   ============================ */

.circle-desc{ display:none; }
.pentagon-circle:hover .circle-desc{ display:block; }

.pentagon-circle{ z-index:10; }
.container::before{ z-index:0; }

/* ============================
   2021 Launch Page Styles
   ============================ */

/* Pentagon Hub Layout (Final) */

.pentagon-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    margin: 40px auto;
}

/* Center Capitol image */
.pentagon-center {
    position: absolute;
    top: 43%;
    left: 50%;
    width: 120px;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Base circle styling */
.pentagon-circle {
    transform: translate(-50%, -50%);
    transform-origin: center center;
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #f2f2f2;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    overflow: visible;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    color: inherit;
}




/* Hover expansion */
.pentagon-circle:hover {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Pentagon vertex positions (pointing UP) */
.circle-what        { top: 10%; left: 50%; }  /* 12:00 */
.circle-why         { top: 32%; left: 85%; }  /* 2:00 */
.circle-how         { top: 72%; left: 70%; }  /* 4:00 */
.circle-fortrump    { top: 72%; left: 30%; }  /* 8:00 */
.circle-jv          { top: 32%; left: 15%; }  /* 10:00 */

/* Mobile fallback */
@media (max-width: 768px) {
    .pentagon-wrapper {
        max-width: 100%;
        margin: 20px auto;
    }
}
    .pentagon-circle {
        height: 360px;
        width: 360px;
        position: absolute;

    }

}
/* Circle icon */
.circle-icon {
    display: block;
    width: 48px;
    height: auto;
    margin: 0 auto 8px;
    transition: opacity 0.2s ease;
}

/* Title + description behavior */
.circle-title {
    font-weight: bold;
    margin-bottom: 6px;
    transition: opacity 0.2s ease;
}

.circle-desc {
    margin-top: 4px;
    font-weight: normal;
    color: #333;
    font-size: 0.9rem;
    line-height: 1.2rem;
    opacity: 0;
    max-height: 0;
    overflow: visible;
    transition: opacity 0.25s ease, max-height 0.25s ease;
    font-size: 0.8rem;
    line-height: 1.1rem;

}


/* Hover behavior */
.pentagon-circle:hover .circle-title {
    opacity: 0;
}

.pentagon-circle:hover .circle-desc {
    opacity: 1;
    max-height: 200px;

}

.pentagon-circle:hover .circle-icon {
    opacity: 0.4;
}


/* ============================================
   Code 6b — Hamburger Menu (Authoritative)
   ============================================ */

.hamburger-menu {
    position: relative;
}

.hamburger-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    border: 1px solid #ccc;
    width: 200px;
    z-index: 2000;
    flex-direction: column !important;
}

.hamburger-menu.active .hamburger-content {
    display: block;
}

.hamburger-content a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #222;
    font-size: 1rem;
    white-space: nowrap;
}

.hamburger-content a:hover {
    background-color: #f2f2f2;
}

.hamburger-icon {
    width: 30px;
    height: auto;
    flex-shrink: 0;
}

/* ============================
   Mobile Overrides
   ============================ */

@media (max-width: 768px) {

    .img-left {
        float: none;
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 20px;
    }

    .image-block {
        float: none;
        max-width: 100%;
        margin: 0 0 15px 0;
    }

    .intro-block {
        flex-direction: column;
        align-items: center;
    }
    
.media-section {
    overflow: auto;
    margin: 30px 0;
}

.text-holder {
    overflow: hidden;
}

    /* Mobile-first behavior */
  @media (max-width: 768px) {
    header h1 {
        font-size: 1.6rem;
    }

  }    

    .intro-block img {
        max-width: 260px;
        width: 100%;
        height: auto;
        margin-bottom: 12px;
    }

    .intro-text p {
        margin-bottom: 1em !important;
    }

    h2 {
        margin-top: 40px !important;
        margin-bottom: 15px !important;
    }

    h3 {
        margin-top: 30px !important;
        margin-bottom: 12px !important;
    }

    .image002 {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    /* OUR HOUSE banner */
    .site-banner,
    .site-banner img,
    .site-banner h1 {
        max-width: 100%;
        font-size: 1.6rem;
        padding: 0.5rem;
        text-align: center;
    }

    /* Reduce header height */
    header {
        padding: 0.5rem 1rem;
    }

    /* Disable legacy floats on mobile */
    img[align="left"],
    img[align="right"] {
        float: none;
        margin: 1rem auto;
    }

    /* Constrain the entire top banner */
    .site-banner,
    .banner,
    .header-inner {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    /* OUR HOUSE text */
    .site-banner h1,
    .banner h1 {
        font-size: 1.4rem;
        margin: 0 auto;
        max-width: 85%;
        text-align: center;
    }

    /* Ensure banner items don’t stretch */
    .site-banner > *,
    .banner > * {
        max-width: 100%;
    }

    /* Banner spacing */
    .banner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        flex-wrap: nowrap;
    }

    /* OUR HOUSE title */
    .banner-title {
        font-size: 2rem;
        line-height: 1.2;
        max-width: 85%;
        margin: 0 auto;
        text-align: center;
        flex-grow: 1;
    }

    /* Capitol image in banner */
    .banner img {
        height: 48px;
        width: auto;
        flex-shrink: 0;
    }

    /* Hub wrapper on mobile: allow stacking if needed */
    .hub-wrapper {
        max-width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(5, minmax(0, 1fr));
    }

    .hub-center-image {
        grid-column: 2;
        grid-row: 3;
    }

 .circle-hub > .circle:nth-of-type(1) {
    grid-column: 2;
    grid-row: 1;
}

.circle-hub > .circle:nth-of-type(2) {
    grid-column: 3;
    grid-row: 3;
}

.circle-hub > .circle:nth-of-type(3) {
    grid-column: 2;
    grid-row: 5;
}

.circle-hub > .circle:nth-of-type(4) {
    grid-column: 1;
    grid-row: 3;
}

.circle-hub > .circle:nth-of-type(5) {
    grid-column: 2;
    grid-row: 2;
}

}
/* Force circles to be direct grid children */
.circle-hub {
    display: contents !important;

}

/* =============================== */
/*   WE ARE ONE — HOMEPAGE MONTAGE */
/* =============================== */

/* Desktop & Tablet */
.montage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 20px auto;
    max-width: 720px;   /* intentionally small and calm */
    padding: 0 12px;
}

.montage-item {
    overflow: hidden;
    border-radius: 6px;
}

.montage-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

.montage-item.wide {
    grid-column: span 2;
}

.montage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 180px;   /* keeps desktop images modest */
    transition: transform 0.25s ease;
}

.montage-item img:hover {
    transform: scale(1.015);
}

/* ========================= */
/*   MOBILE MONTAGE TUNING   */
/* ========================= */

@media (max-width: 600px) {
    .montage {
        gap: 8px;
        max-width: 100%;
    }

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

    .montage-item img {
        max-height: 140px;   /* smaller, calmer mobile images */
        object-fit: cover;
    }
}

.oath-block {
    margin-left: 40px;
    margin-right: 20px;
    padding-left: 20px;
    border-left: 4px solid #555;
    font-style: italic;
}
/* MOBILE OVERRIDE FOR OATH BLOCKS */
@media (max-width: 600px) {
    .oath-block {
        margin-left: 20px;     /* slightly smaller indent for small screens */
        margin-right: 10px;
        padding-left: 15px;
        border-left: 4px solid #555;
        font-style: italic;
    }
}

.tool-type {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.tool-type .pivot-icon {
    height: 24px;
    width: 24px;
    margin-right: 10px;
}

.tool-type .tool-name {
    font-size: 1em;
    color: #333;
}

/* Keypoints - Takeaways - Analysis Tool Links  --  These CSS elements define content at the bottom of Pages. Keypoints are primary lessons users reflect on after getting to the bottom of a page. Takeaways are spins, or important tangent thoughts closely elated to the Keypoint it follows. Analysis Tool Links allow users to click and see the Learning Activity associated with the Key Point or Take away it is associated with. */

/* Key Lessons list container */
.key-lessons {
    list-style: none;
    padding-left: 0;
    margin-top: 20px; /* buffer below h3 */
}

/* Individual key points */
.key-lessons .kp-item {
    position: relative;
    margin-top: 28px;
    margin-bottom: 18px;
    padding-left: 32px;
    font-weight: 600; /* or 700 if you want stronger */
}


/* Open-circle bullet */
.key-lessons .kp-item::before {
    content: "○";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3em;
    color: #333;
}


/* Takeaway sub-point */
.takeaway {
    margin-left: 40px;
    margin-top: 6px;
    font-style: italic;
    color: #444;
    position: relative;
}

/* Filled bullet for takeaway */
.takeaway::before {
    content: "•";
    position: absolute;
    left: -18px;
    color: #666;
    font-size: 0.9em;
}




/* Optional highlight for “i” moments */
.highlight-i {
    color: #d63384;
    font-weight: bold;
}
/* activity tool and pivot to linked files */

.analysis-pivot {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    /* keep your existing styling */
    margin-top: 12px;
    margin-left: 40px;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: #e8ffe8;
    border: 2px solid #8fd48f;
    color: #1a3d1a;
    font-weight: bold;
    text-decoration: none;
}


.analysis-pivot:hover {
    background-color: #e9f3ff;   /* light blue hover */
    border-color: #7bb6ff;
}



.pivot-label {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
    margin-right: 6px;
    color: #555;
    display: inline-flex;      /* THIS is the missing piece */
    align-items: center;       /* vertically centers icon + text */
}


.pivot-title {
    font-weight: bold;
}
.pivot-icon {
    height: 48px;
    width: 48px;
    vertical-align: middle;
    margin-right: 10px;
}

.highlight-i {
    color: #d63384;
    font-weight: bold;
}

/* This code allows our reference file containing htm code associated with thi section of Css to be displayed in color./
pre code {
    display: block;
    padding: 12px;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 0.95em;
    white-space: pre;
}

/* ============================================================================
   MOBILE FIX: Prevent Top Nav from overflowing horizontally
   This allows the nav links to wrap naturally on small screens.
   ============================================================================ */
@media (max-width: 600px) {
    .top-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .top-nav li {
        flex: 1 1 100%;
        text-align: center;
        margin: 5px 0;
    }
}

    /* Instruction text uses sans-serif */
    .instruction-text,
    .instruction-text * {
        font-family: Arial, sans-serif !important;
        font-size: 1.05rem;
        line-height: 1.6;
    }

    /* Headings use your site blue */
    h1, h2 {
        font-family: Arial, sans-serif !important;
        text-align: center;
        color: #2901ca;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    /* Table uses serif/book font */
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 30px 0;
        font-size: 1rem;
        font-family: "Arial", serif;
        border: 2px solid #2901ca; /* blue outline */
    }

    th, td {
        border: 1px solid #2901ca; /* blue grid lines */
        padding: 10px 12px;
        vertical-align: top;
        text-align: left;
        min-height: 48px;
    }

    th {
        background: #f7f7ff; /* subtle blue tint */
        font-weight: bold;
    }

    /* Column widths */
    .col-words { width: 32%; word-wrap: break-word; }
    .col-category { width: 18%; }
    .col-purpose { width: 36%; }
    .col-count { width: 12%; text-align: center; }

    .hint {
        font-size: 0.85rem;
        font-weight: normal;
        color: #666;
    }

    /* Trump’s words in red */
td.col-words {
    color: #cc0000 !important;
    font-size: 1.15rem !important;
}


    
/* Tighten table spacing to fit on one portrait page */
th, td {
    padding: 4px 6px !important;      /* reduces vertical space */
    line-height: 1.2 !important;      /* tighter text spacing */
    min-height: 30px !important;      /* reduces forced row height */
}
table {
    font-size: 0.95rem !important;
}
@media print {
    th, td {
        padding: 3px 5px !important;
        line-height: 1.15 !important;
        min-height: 22px !important;
    }

    table {
        font-size: 0.9rem !important;
    }
}


/* ============================================================
   DONATION PILLS — SINGLE, CLEAN, RESETTED BLOCK
   ============================================================ */

/* Donation pills – single, clean definition */

.donation-options-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.donation-options-center {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.donation-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.donation-pill input[type="radio"] {
    display: none;
}

.donation-pill span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 55px;
    background-color: #1e5bbf;
    color: white;
    border-radius: 999px;
    font-size: 1.05em;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.donation-pill input[type="radio"]:checked + span {
    background-color: #163f8c;
}

.custom-amount {
    display: none;
    margin: 16px auto 0;
    max-width: 220px;
    text-align: center;
}
.donation-options-row {
    justify-content: center !important;
}
.donation-options-row {
    display: flex;
    justify-content: center !important;
    gap: 16px;
}

/* Add breathing room below each pill row */
.donation-options-row,
.donation-options-center {
    margin-bottom: 24px !important;
}

.dmv-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1e5bbf; /* familiar blue */
    color: white;
    border-radius: 900px;
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    width: 200px;   /* same aspect ratio as donation pills */
    height: 55px;   /* same height */
    text-align: center;
}

.dmv-pill:hover {
    background-color: #005FCC;
}

.dmv-pill input {
    display: none; /* hide the radio button */
}

/* Limit width of form inputs on Get Plated page */
.form-narrow input,
.form-narrow select,
.form-narrow textarea {
    width: 260px;      /* adjust as needed */
    max-width: 100%;   /* prevents overflow on small screens */
}


@media (max-width: 600px) {
    .donation-section .donation-pill span {
        width: 200px !important;
        max-width: 200px !important;
        flex: 0 0 200px !important;
    }
}

@media (max-width: 768px){
 body{ font-size: 20px; } /* bumps all text */
 .circle-title{ font-size: 18px; }
 .circle-desc{ font-size: 16px; }

 .container{ transform: scale(.82); transform-origin: top center; }
}
/* =========================
   AUDIO ONLY (Generic MP3 Launcher)
   ========================= */
.audio_only {
    display: none; /* keep audio element invisible */
}

/* =========================
   RIGHT-JUSTIFIED NARRATIVE IMAGE
   ========================= */
.lx-nimg.right img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    cursor: pointer;
}

.lx-nimg.right figcaption {
    font-size: 0.85rem;
    color: #555;
    margin-top: 6px;
    text-align: right;
}


/* =========================================================
   V2 LAYOUT CONTAINERS — ISOLATED, NON-LEGACY SYSTEM
   These containers define layout roles.
   Images obey containers; containers express intent.
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL IMAGE SAFETY FOR V2 CONTAINERS
   Ensures images scale proportionally inside lx-* containers
   --------------------------------------------------------- */
.lx img {
    width: 100%;
    height: auto;
    display: block;
}


/* =========================================================
   1) NARRATIVE IMAGE CONTAINERS
   Purpose: Images that live inside the story and allow
   text to wrap beside them.
   Uses floats. Never used for banners or layout rows.
   ========================================================= */

.lx-nimg {
    margin: 20px 15px 30px 0;
}

/* Position variants */
.lx-nimg.left  { float: left; }
.lx-nimg.right { float: right; }
.lx-nimg.center {
    float: none;
    margin: 30px auto;
    text-align: center;
}

/* Size variants */
.lx-nimg.s25 { width: 25%; max-width: 220px; }
.lx-nimg.s33 { width: 33%; max-width: 320px; }
.lx-nimg.s50 { width: 50%; max-width: 480px; }
.lx-nimg.full {
    float: none;
    width: 100%;
    max-width: none;
}

.lx-nimg.left {
    margin: 0 1.5rem 1rem 0;
}

.lx-nimg.right {
    margin: 0 0 1rem 1.5rem;
}


/* =========================================================
   2) LAYOUT IMAGE ROWS (BANNERS, GALLERIES)
   Purpose: Groups of images forming a visual row.
   No text wrapping allowed. Uses flex, not floats.
   ========================================================= */

.lx-row {
    display: flex;
    width: 100%;
    gap: 10px;
}

.lx-row img {
    flex: 1;
}

/* Row variants */
.lx-row.two-up img   { width: 50%; }
.lx-row.three-up img { width: 33.333%; }
.lx-row.full img     { width: 100%; }

/* Ensure layout-row figures occupy equal column width */
.lx-row figure {
    flex: 1 1 0;
    max-width: 100%;
}
/* Banner-card layout: image + caption as a unified column */
.lx-row.cards {
    align-items: flex-start;
}

.lx-row.cards figure {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    margin: 0;
}

.lx-row.cards img {
    width: 100%;
    height: auto;
    display: block;
}

.lx-row.cards figcaption {
    margin-top: 8px;
    font-size: 0.9em;
    line-height: 1.3;
    text-align: center;
}

/* =========================================================
   Vertical buffer code that can be used with any Container Family.
   ========================================================= */
/* Vertical spacing for banner-card rows */

.lx-row.cards.compact {
    margin: 25px 0;
}

.lx-row.cards.medium {
    margin: 40px 0;
}
.lx-row.cards.spacious {
    margin: 60px 0;
}




/* =========================================================
   3) MEDIA / PLACEHOLDER CONTAINERS
   Purpose: Reserved space for video, B-roll, or future media.
   Centered, isolated, and protected from text encroachment.
   ========================================================= */

.lx-media {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.lx-media .frame {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 16 / 9;
    background: #000;
}

.lx-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   4) CONTENT SECTIONS (FLOW BOUNDARIES)
   Purpose: Defines where narrative flow begins and ends.
   Naturally clears floats without hacks.
   ========================================================= */

.lx-section {
    width: 100%;
    clear: both;
}


/* =========================================================
   5) SITE CHROME / BANNERS
   Purpose: Identity and navigation elements.
   Never wrap text. Never float.
   ========================================================= */

/* Top banner: logo + site name + hamburger */
.lx-banner-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

/* Bottom banner: centered standalone image */
.lx-banner-bottom {
    width: 100%;
    text-align: center;
    margin: 60px auto;
}

.lx-banner-bottom img {
    width: 100%;
    max-width: 720px;   /* or 100% if you truly want full bleed */
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Bottom banner — small promotional image */
.lx-banner-bottom.small {
    width: 100%;
    text-align: center;
    margin: 40px auto;
}

/* Bottom banner — small promotional image */
.lx-banner-bottom.small img {
    width: auto;
    max-width: 250px;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* =========================
   4-Image Grid
   ========================= */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-items: center;
  align-items: center;
  margin: 2rem 0;
}

.logo-cell {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}

.logo-cell img {
  max-height: 80%;
  max-width: 80%;
  object-fit: contain;
}

.lx-logo-grid {
  padding: 0.75rem;
}

.lx-logo-grid .logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.lx-logo-grid .logo-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lx-logo-grid img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}


/* =========================
   B-HOLD (Coming Soon)
   ========================= */
.bhold-holder{
    width: 100%;
    text-align: center;
    margin: 20px auto;
}

.bhold-slot{
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    overflow: hidden;
}

.bhold-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px){
    .bhold-slot{
        max-width: 210px;
    }
}

/* Force blue divider line on all devices */
.plate-divider {
    border-top: 3px solid #007BFF !important;
}

/* Force DMV pill blue on all devices */
.dmv-pill {
    background-color: #007BFF !important;
    color: white !important;
}

.dmv-pill:hover {
    background-color: #005FCC !important;
}

/* =====================================================
   SITE IDENTITY BAR — SANDBOX (FINAL AUTHORITY)
   ===================================================== */

header.site-identity-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 66px;
  padding: 0 08px;
  background-color: #f2f2f2;
  border-bottom: 2px solid #ccc;
}

/* Left logo */
.site-identity-bar .identity-left img {
  height: 56px;
  width: auto;
}

/* Center identity title */
.site-identity-bar .identity-center {
  text-align: center;
}

.site-identity-bar .site-identity-title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 600;
  color: #0033cc;
  line-height: 1.2;
}
.sandbox .identity-menu[hidden] {
    display: none;
}


/* ============================================
   Sandbox Hamburger Menu (Authoritative)
   ============================================ */

.sandbox .site-identity-bar {
    position: relative;
}


/* Hamburger trigger */
.sandbox .hamburger-main,
.sandbox .hamburger-ghost {
  background-image: url("images/image001.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
}

/* Main header hamburger */
.sandbox .hamburger-main {
  width: 70px;
  height: 37px;
}

/* Ghost bar hamburger (smaller) */
.sandbox .hamburger-ghost {
  width: 36px;
  height: 19px;
}
/* Ghost Up Icon */
.sandbox .chevron-up {
  width: 24px;
  height: 24px;
  background-image: url("images/top.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
}

/* Ghost Down Icon */
.sandbox .chevron-down {
  width: 24px;
  height: 24px;
  background-image: url("images/bottom.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
}


/* Dropdown container */
.sandbox .identity-menu {
    right: 0;
    width: 200px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Menu list reset */
.sandbox .identity-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Menu links */
.sandbox .identity-menu a {
    display: block;
    padding: 6px 12px;      /* tighter vertical spacing */
    text-decoration: none;
    color: #222;
    font-size: 0.95rem;     /* slightly smaller for density */
    line-height: 1.3;       /* reduces internal white space */
    white-space: nowrap;
}


.sandbox .identity-menu a:hover {
    background-color: #f2f2f2;
}

.sandbox .ghost-controls {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(242,242,242,0.95);
  border-bottom: 1px solid #ccc;
  z-index: 3000;
}

.sandbox .ghost-hamburger {
  width: 36px;
  height: 19px;
  background-size: contain;
}

/* ============================================
   Menu Anchor Positions (Two Independent Modes)
   ============================================ */

/* Menu anchored to the top identity bar */
.sandbox .menu-from-top {
  position: fixed;
  top: 66px;   /* height of grey banner */
  right: 0;
  width: 200px;
  z-index: 3000;
}

/* Menu anchored to the ghost bar */
.sandbox .menu-from-ghost {
  position: fixed;
  top: 42px;   /* height of ghost bar */
  right: 0;
  width: 200px;
  z-index: 3000;
}
/* ============================================
   MOBILE LAYOUT (Authoritative)
   ============================================ */
@media (max-width: 600px) {

  /* Keep the identity bar horizontal */
header.site-identity-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background-color: #3A4A5A;  /* darker blue-grey */
  padding: 8px 16px;
}



  /* Shrink the left logo */
  .site-identity-bar .identity-left img {
    height: 40px;
    width: auto;
  }

  /* Make the title readable and centered */
  .site-identity-bar .site-identity-title {
    font-size: 1.2rem;
    line-height: 1.2;
    text-align: center;
  }

  /* Shrink the top hamburger */
  .sandbox .hamburger-main {
    width: 40px;
    height: 24px;
    background-size: contain;
  }

  /* Shrink the ghost hamburger */
  .sandbox .hamburger-ghost {
    width: 28px;
    height: 16px;
    background-size: contain;
  }

  /* Dropdown menu stays narrow on mobile */
  .sandbox .identity-menu {
    width: 180px;
    right: 0;
  }

  /* Ghost bar height and icon sizes */
  .sandbox .ghost-controls {
    height: 36px;
  }

  .sandbox .chevron-up,
  .sandbox .chevron-down {
    width: 20px;
    height: 20px;
    background-size: contain;
  }
}