/* ═══════════════════════════════════════════════
   preside-by-side-ad.css — Styles for /preside-by-side-ad
   frontendneeded.com

   USA color-coded: navy field, red accent, with a
   blue→white→red flag-stripe accent bar.
   ═══════════════════════════════════════════════ */

:root {
    --accent: #c81e2a;
    --accent-rgb: 200, 30, 42;
    --bg: #0a1530;
}

.site-nav {
    background: #050a1a;
}

.nav-dropdown-menu {
    background: #050a1a;
}

/* Golden-ratio section lines — override the shared
   teal/violet tinted dividers with pure white, both the
   border-image gradient and the soft box-shadow glow.
   Covers the horizontal rule under .gr-top, the vertical
   rule between .gr-left and .gr-right, and (under the
   stacked mobile layout) the horizontal rule under
   .gr-left. */
.gr-top {
    border-image: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0.85),
            rgba(255, 255, 255, 0.55),
            transparent) 1;
    box-shadow:
        0 1px 30px rgba(255, 255, 255, 0.10),
        0 1px 60px rgba(255, 255, 255, 0.06);
}

.gr-left {
    border-image: linear-gradient(180deg,
            transparent,
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0.85),
            rgba(255, 255, 255, 0.55),
            transparent) 1;
    box-shadow:
        1px 0 30px rgba(255, 255, 255, 0.10),
        1px 0 60px rgba(255, 255, 255, 0.06);
}

@media (max-width: 1000px) {
    .gr-left {
        border-image: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, 0.55),
                rgba(255, 255, 255, 0.85),
                rgba(255, 255, 255, 0.55),
                transparent) 1;
        box-shadow:
            0 1px 30px rgba(255, 255, 255, 0.10),
            0 1px 60px rgba(255, 255, 255, 0.06);
    }
}

/* Photo-frame — re-tint the shared violet border / teal
   glow to a clean white-on-navy so it matches the rest of
   the page's USA palette. */
.photo-frame {
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.06),
        0 8px 28px rgba(0, 0, 0, 0.5);
}

/* Flag-stripe accent bar — overrides the solid-color
   default from styles.css with a red→white→blue gradient.
   Slightly wider than the shared 48px so the three bands
   actually read. */
.accent-bar {
    width: 96px;
    background: linear-gradient(90deg,
            #c81e2a 0%,
            #f5f1e8 50%,
            #2952d4 100%);
    box-shadow: 0 0 12px rgba(200, 30, 42, 0.25);
}

/* ═══════════════════════════════════════════════
   GR-RIGHT — US flag CTA panel

   Ported from the suggestion-box treatment on the real
   /preside-by-side page: a stretched US flag SVG painted
   under a dark overlay so the CTA copy and button stay
   legible. Copy sits at the top; the button is pinned to
   the bottom-right via flex column + margin-top: auto +
   align-self: flex-end.
   ═══════════════════════════════════════════════ */
.gr-right {
    position: relative;
    display: flex;
    flex-direction: column;
    background-image:
        linear-gradient(rgba(6, 8, 18, 0.58), rgba(6, 8, 18, 0.72)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1235 650' preserveAspectRatio='none'><rect width='1235' height='650' fill='rgb(244,242,236)'/><rect y='0' width='1235' height='50' fill='rgb(178,34,52)'/><rect y='100' width='1235' height='50' fill='rgb(178,34,52)'/><rect y='200' width='1235' height='50' fill='rgb(178,34,52)'/><rect y='300' width='1235' height='50' fill='rgb(178,34,52)'/><rect y='400' width='1235' height='50' fill='rgb(178,34,52)'/><rect y='500' width='1235' height='50' fill='rgb(178,34,52)'/><rect y='600' width='1235' height='50' fill='rgb(178,34,52)'/><rect width='494' height='350' fill='rgb(54,53,99)'/><defs><polygon id='s' points='0,-16 4,-5 15,-5 6,2 9,13 0,6 -9,13 -6,2 -15,-5 -4,-5' fill='rgb(244,242,236)'/></defs><use href='%23s' x='41' y='35'/><use href='%23s' x='124' y='35'/><use href='%23s' x='206' y='35'/><use href='%23s' x='288' y='35'/><use href='%23s' x='370' y='35'/><use href='%23s' x='453' y='35'/><use href='%23s' x='82' y='70'/><use href='%23s' x='165' y='70'/><use href='%23s' x='247' y='70'/><use href='%23s' x='329' y='70'/><use href='%23s' x='412' y='70'/><use href='%23s' x='41' y='105'/><use href='%23s' x='124' y='105'/><use href='%23s' x='206' y='105'/><use href='%23s' x='288' y='105'/><use href='%23s' x='370' y='105'/><use href='%23s' x='453' y='105'/><use href='%23s' x='82' y='140'/><use href='%23s' x='165' y='140'/><use href='%23s' x='247' y='140'/><use href='%23s' x='329' y='140'/><use href='%23s' x='412' y='140'/><use href='%23s' x='41' y='175'/><use href='%23s' x='124' y='175'/><use href='%23s' x='206' y='175'/><use href='%23s' x='288' y='175'/><use href='%23s' x='370' y='175'/><use href='%23s' x='453' y='175'/><use href='%23s' x='82' y='210'/><use href='%23s' x='165' y='210'/><use href='%23s' x='247' y='210'/><use href='%23s' x='329' y='210'/><use href='%23s' x='412' y='210'/><use href='%23s' x='41' y='245'/><use href='%23s' x='124' y='245'/><use href='%23s' x='206' y='245'/><use href='%23s' x='288' y='245'/><use href='%23s' x='370' y='245'/><use href='%23s' x='453' y='245'/><use href='%23s' x='82' y='280'/><use href='%23s' x='165' y='280'/><use href='%23s' x='247' y='280'/><use href='%23s' x='329' y='280'/><use href='%23s' x='412' y='280'/><use href='%23s' x='41' y='315'/><use href='%23s' x='124' y='315'/><use href='%23s' x='206' y='315'/><use href='%23s' x='288' y='315'/><use href='%23s' x='370' y='315'/><use href='%23s' x='453' y='315'/></svg>");
    background-size: 100% 100%, 100% 100%;
    background-position: center, top left;
    background-repeat: no-repeat, no-repeat;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35);
}

.cta-copy {
    display: flex;
    flex-direction: column;
}

.cta-copy .section-label {
    margin-top: 0;
}

.cta-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: #f5f1e8;
    margin: 6px 0 12px;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.85),
        0 0 18px rgba(0, 0, 0, 0.55);
}

.cta-body {
    font-size: 0.9rem;
    line-height: 1.45;
    color: #f5f1e8;
    margin: 0;
    max-width: 28ch;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 12px rgba(0, 0, 0, 0.4);
}

/* Button pinned bottom-right. margin-top:auto pushes it
   to the bottom of the flex column; align-self:flex-end
   pulls it to the right edge. */
.cta-button {
    margin-top: auto;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: #14141f;
    background: linear-gradient(180deg, #faf7f0, #e0d9c8);
    border: 1px solid rgba(248, 245, 238, 0.7);
    border-radius: 6px;
    padding: 10px 18px;
    text-decoration: none;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}

.cta-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #ffffff, #ece5d2);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.2);
}

.cta-button:active {
    transform: translateY(0);
}

.cta-button-chev {
    font-size: 1.15rem;
    line-height: 1;
    transform: translateY(-1px);
}