/********************************************************* 
=== Variables === 
*********************************************************/
:root {
    /* ===== Typography ===== */
    --font-main: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-quote: 'Roboto', system-ui;
    
    --font-article-headline: 'Playfair Display', serif;
    --font-article-body: 'Inter', sans-serif;

    /* --font-main: 'Bebas Neue', sans-serif; */

    /* ===== Images ===== */
    /* --site-background: url('/img/1500x1000/textured-background.png'); */
    /* --site-background: url('/img/1200x800/background-stripes2.png'); */
    /* --header-background: url('/img/1200x800/flag-and-stars-horizontal.png'); */
    --header-background: url('/img/1200x800/retro-flag.png');
    /* --hero-image: url('/img/800x533/hoodie-man-in-dc-sunset.png'); */

    /* ===== Site Colors ===== */
    --color-site-background: #111315;
    --color-site-font: #F2E9D8;
    --color-site-border: black;

    /* ===== Menu Colors ===== */
    --color-menu-background: #C23B22; /* background: #B22234; #8c4027 */
    /* --color-menu-font: #F2E9D8; */

    /* ===== Quote Colors ===== */
    --color-quote-background: #2E4057; /* color: #3C3B6E; */
    /* --color-menu-font: #F2E9D8; */

    /* ===== Article Colors ===== */
    --color-article-title: #F2E9D8; /* color: #f5efc6; */
    --color-article-text: #E0D6C2; /* color: #f5efc6; */
    --color-article-captions: #E0D6C2; /* color: #E6D8C3; */
    --color-article-image-fade: #0e0d10;
    --color-article-background: transparent; /* background: #002541; */
    --color-article-border: black; /* color: #403f35; */

    
    /* ===== Core Colors ===== */
    --color-bg-card: #1A1C1F;
    --color-divider: #1c2736;

    /* ===== Reds ===== */
    --color-red-primary: #C23B22;
    --color-red-dark: #7A1E1E;

    /* ===== Blues ===== */
    --color-blue-muted: #2E4057;
    --color-blue-dark: #1B263B;

    /* ===== Retro Neutrals ===== */
    --color-aged-white: #F2E9D8;
    --color-aged-white-dark: #E0D6C2;

    /* ===== Accent ===== */
    --color-dusty-gold: #C6A75E;
}

/********************************************************* 
=== General === 
*********************************************************/
html, body {
    height: 100%;
    margin: 0;
}
body {
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.5;
    background-color: var(--color-site-background);
    /* background-image: var(--site-background); */
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* body {
    background-color: #F5EFE0; 
    background-image:
        radial-gradient(circle, rgba(0,0,0,0.02) 1px, transparent 1px),
        radial-gradient(circle, rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 4px 4px, 6px 6px;
    background-position: 0 0, 2px 3px;
} */
body, a {
    color: var(--color-site-font);
    text-decoration: none;
}
/* a:hover {
    text-decoration: underline;
} */
main {
    /* padding: 1rem; */
    flex: 1;
}

/********************************************************* 
=== Header & Footer  === 
*********************************************************/
header, footer {
    font-size: 0.875rem;
    color: white;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
}
.page-title {
    margin-bottom: 20px;
    background-image:
    radial-gradient(circle at center, rgba(17,19,21,0.15) 0%, rgba(17,19,21,0.55) 80%),
    linear-gradient(to bottom, rgba(17,19,21,0.35), rgba(17,19,21,0.75)),
    var(--header-background);
}
header {
    /* background-image:
    repeating-conic-gradient(
        from 0deg,
        rgba(122, 30, 30, 0.2) 0deg 5deg,
        rgba(198, 167, 94, 0.2) 5deg 10deg,
        rgba(27, 38, 59, 0.2) 10deg 15deg
    ),
    radial-gradient(circle at center, rgba(255,255,255,0.35), rgba(0,0,0,0.35)),
    var(--header-background); */

    /*linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),*/
    background-image:
    repeating-conic-gradient(
        from 0deg,
        rgba(155, 19, 9, 0.4) 0deg 5deg,
        rgba(198, 167, 94, 0.4) 5deg 10deg,
        rgba(27, 38, 59, 0.4) 10deg 15deg
    ),
    radial-gradient(circle at center, rgba(255,255,255,0.35), rgba(0,0,0,0.35)),
    var(--header-background);   

  /* background:
  radial-gradient(circle at center, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 65%),
  repeating-conic-gradient(
    from 0deg,
    #7A1E1E 0deg 5deg, 
    #C6A75E 5deg 10deg, 
    #1B263B 10deg 15deg 
  ); */
}
footer {
    padding: 1rem;
    border-top: 2px solid var(--color-site-border);
    border-bottom: 2px solid var(--color-site-border);
    background-position: bottom;

    background-image:
    radial-gradient(circle at center, rgba(17,19,21,0.05) 0%, rgba(17,19,21,0.25) 80%),
    linear-gradient(to bottom, rgba(17,19,21,0.075), rgba(17,19,21,0.3)),
    var(--header-background);
}
footer nav, footer .copyright{
    margin-top: 0.5rem;
}
nav a {
    margin: 0 0.5rem;
    display: inline-block;
    transition: color 0.2s ease;
}
nav a:hover {
    /* color: var(--color-menu-background); */
    transform: translateY(-2px);
}
nav span[aria-current="page"] {
    font-weight: 600;
    margin: 0 0.5rem;
}
button, .button {
    padding: 0.8rem 1.5rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
a.button {
    font-size: 12px;
}
/* button:hover {
    background-color: var(--color-red-dark);
} */
button.primary, .button.primary  {
    background-color: var(--color-red-primary);
    color: var(--color-aged-white);
}
/* 
button.primary:hover {
    background-color: var(--color-red-dark);
    transform: translateY(-2px);
} */
button.secondary, .button.secondary {
    background-color: var(--color-blue-muted);
    color: var(--color-aged-white);
}
button.tertiary, .button.tertiary {
    background-color: var(--color-aged-white);
    color: var(--color-blue-dark);
}

.social-share {
    position: absolute; 
    top: 0; right: 0;
    z-index: 10;
    text-align: right;
}
.social-share .icon-menu {
    display:none;
}
.social-share .icon-menu .button {
    padding: 10px 20px;
}
.social-share .icon-menu a {
    font-size: 25px;
}
/********************************************************* 
=== Components === 
*********************************************************/
/* .logo {
    max-width: 300px;
    margin: 0 auto; 
    overflow: hidden;
    border-left: 5px solid #8c4027;
    border-right: 5px solid #8c4027;
} */
/* .logo img {
    display: block;
    width: 100%;
} */
.logo-group {
    display: flex;
    justify-content: center;
    /* align-items: center; */
}
.logo-group img {
    display: block;
    position: relative;
}
.logo-group img + img {
    margin-left: -15px;
}
.logo-group img {
    height: 150px;
    width: auto;
}
.logo-group img:nth-child(1) { z-index: 3; }
.logo-group img:nth-child(2) { z-index: 1; }
.logo-group img:nth-child(3) { z-index: 2; }
/* .flag-left { width: 80px; z-index: 1; }
.logo { width: 280px; z-index: 3; }
.flag-right { width: 80px; z-index: 2; } */
.logo-side { 
    border-left: 2px solid black; 
    border-right: 2px solid black;
}
.bar {
    text-align: center;
    padding: 0.5rem;
    margin: 0;
    border-top: 2px solid var(--color-site-border);
    border-bottom: 2px solid var(--color-site-border);
}
.menu {
    background-color: var(--color-menu-background);
    /* color: var(--color-menu-font); */
}
.quote {
    font-family: var(--font-quote);
    background-color: var(--color-quote-background);
    /* background-color: #F5EFE0;  */
    background-image:
        radial-gradient(circle, rgba(0,0,0,0.02) 1px, transparent 1px),
        radial-gradient(circle, rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 4px 4px, 6px 6px;
    background-position: 0 0, 2px 3px;
}
.hero {
    padding: 6rem 2rem;
    /* background: linear-gradient(
        rgba(17, 19, 21, 0.5),
        rgba(17, 19, 21, 0.5)
      ),
      var(--hero-image); */
    background-size: cover;
    background-position: center;
    border-bottom: 2px solid var(--color-site-border);
    border-right: 2px solid var(--color-site-border);
    /* opacity: 0.8; */
}
.hero-content {
    max-width: 80%;
}
.hero-section {
    border-bottom: 2px solid black; 
    background: linear-gradient(rgba(17, 19, 21, 0.5), rgba(17, 19, 21, 0.5)), 
    url('/img/800x533/hoodie-man-in-dc-sunset.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-content {
    padding: 20px 0 0 50px;
}
.hero-side {
    border-left: 2px solid black;
    border-bottom: 2px solid black;
}
.tag {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    background-color: var(--color-red-primary);
    color: var(--color-aged-white);
    letter-spacing: 1px;
}
.tag-blue {
    background-color: var(--color-blue-muted);
}
.tag h1 {
    font-weight: normal;
}
.social-icons a {
    font-size: 1.5rem;
    margin: 0 0.5rem;
    display: inline-block; 
    transition: color 0.2s ease;
}
.social-icons a:hover {
    color: var(--color-menu-background);
    transform: translateY(-3px);
}
.non-article {
    padding: 0 1rem 1rem 1rem;
}

/********************************************************* 
=== Grid System === 
*********************************************************/
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.column {
    flex: 1;
    min-width: 300px;
}
.column2 {
    flex: 2;
    min-width: 300px;
}
.column3 {
    flex: 3;
    min-width: 300px;
}

/********************************************************* 
=== Articles === 
*********************************************************/
article.featured {
    border: 2px solid var(--color-article-border);
    background-color: var(--color-article-background);
    margin-bottom: 1rem;
    /* box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); */
    overflow: hidden;  
}
article.featured .image-wrapper {
    aspect-ratio: 1.3 / 1;
}
article .image-wrapper {
    position: relative;
    /* display: inline-block;

    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden; */

    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
article.featured .image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, var(--color-article-image-fade) 100%);
    pointer-events: none;

    /* width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;  */
}

article .image-wrapper {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}


article img {
    width: 100%;
    height: auto;
    display: block;
}
article .text-wrapper {
    color: var(--color-article-text);
    padding: 0 1rem 0 1rem;
    min-height: 200px;
}
article h1, article h2 {
    color: var(--color-article-title);
    margin: 1rem 0;
    line-height: 2rem;
}
article span, .footnote {
    color: var(--color-article-caption);
    font-size: 0.8rem;
}
/* article a, article a:hover {
    display: block;
    text-decoration: none;
} */
article.featured:hover {
    transform: translateY(-4px);
    /* color: var(--color-article-border); */
    border-color: var(--color-menu-background);
}
article .bottom-bar {
    margin-top: auto;
    float: right;
}
article .bottom-bar span {
    padding-right: 10px;
}
/* article .author-image {
    width: 40px;       
    height: 40px;
    border-radius: 50%;    
    overflow: hidden; 
}
article .author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;   
    object-position: top; 
} */
article .author-info, .circle-info {
    display: flex;
    /* align-items: center;  */
    gap: 15px;        
}
article .author-image img, .circle-image img {
    width: 50px;  
    height: 50px;
    border-radius: 50%; 
    object-fit: cover;
    object-position: top; 
}
article .author-details, .circle-details {
    display: flex;
    align-items: center;
    /* gap: 20px; */
    /* font-size: 1rem; */
    /* color: #555;  */
}
article .date {
    font-size: 0.8rem;
    color: #ccc; 
    font-style: italic;
}
article .preview {
    width: 200px;       
    height: 200px;
    /* border-radius: 50%;     */
    overflow: hidden; 
}
article .preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;   
    object-position: top; 
}
.tag-list a {
    display: inline-block;
    cursor: pointer;
}
.article-list {
    /* radial-gradient(circle at center, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 65%),*/
    background:
    repeating-conic-gradient(
        from 0deg,
        rgba(49, 1, 2, 0.25) 0deg 25deg,
        rgba(136, 72, 32, 0.25) 25deg 50deg,
        rgba(14, 20, 34, 0.25) 50deg 75deg
    );
    min-height: 55vh;
}
article .margin, .article-list {
    /* border: 1px solid red; */
    padding: 40px 10% 20px 10%;
}
.article-link {
    color: blue;
    text-decoration: underline;
}
.additional-articles {
    padding: 0 10% 20px 10%;
}
.margin {
    /* border: 1px solid red; */
    padding: 40px 10% 60px 10%;
}

/* subscribe form */
.input-group {
    display: flex;
    width: 300px;
}

.input-group input {
    flex: 1;
    padding: 8px;
}

.input-group button {
    padding: 8px 12px;
}

.subscribe-name {
    display: none;
}

.subscribe-email {
    border: 1px solid var(--color-red-primary);
}

/* Modal overlay */
.modal {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background: rgba(0,0,0,0.5);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 1000;
}

/* Popup box */
.modal-content {
    background: #fff;
    padding: 24px 28px;
    /* border-radius: 10px; */
    border: 1px solid black;
    max-width: 400px;
    width: 90%;
    text-align: center;
    color: black;
    font-weight: bold;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Optional button styling */
.modal-content button {
    margin-top: 16px;
}


.flag-blue {
  --flag-img: url('/img/400x400/flag-blue.png');
}
.flag-white {
  --flag-img: url('/img/400x400/flag-white.png');
}
.flag-red {
  --flag-img: url('/img/400x400/flag-red.png');
}
.flag-blue,
.flag-white,
.flag-red {
  /* background: var(--flag-img); */
/* background-image:
  radial-gradient(circle at center, rgba(17,19,21,0.08) 0%, rgba(17,19,21,0.28) 80%),
  linear-gradient(to bottom, rgba(17,19,21,0.18), rgba(17,19,21,0.38)),
  var(--flag-img); */
background-image:
  radial-gradient(circle at center, rgba(17,19,21,0.05) 0%, rgba(17,19,21,0.25) 80%),
  linear-gradient(to bottom, rgba(17,19,21,0.15), rgba(17,19,21,0.35)),
  var(--flag-img);
}

/********************************************************* 
=== Misc === 
*********************************************************/
.test {border: 1px solid red;}
.border {border: 2px solid black;}
.hidden {display: none;}

/********************************************************* 
=== Colors === 

red: b22234
darkred: 4d1b1c
retro-red: b14f2d
lightblue: 223b60
darkblue: 002541
offwhite: cdd1c6
blue-white: b4c6c4
retro-white: ddbd77
retro-black: 1d2420

Retro 1940s American political campaign poster style, muted navy and faded red palette, 
aged ivory paper texture, distressed ink, subtle grain, dramatic patriotic lighting, 
symmetrical bold composition, vintage Americana atmosphere with slight abandoned fairground 
undertone, worn banners and soft dust in the air, gritty but professional editorial illustration, 
high detail, serious tone, not cartoonish

*********************************************************/