/* =========================
   Color Variables
   ========================= */
:root {
    --purple-dark: #3b2f4a;
    --purple-gray: #5a5168;
	--purple-light-gray: #9c95a6;
    --gray-light: #f2f2f5;
    --yellow-accent: #f4c430;
    --yellow-soft: #ffecb0;
	--yellow-softer: 
}

/* =========================
   Global
   ========================= */
body {
    background-color: var(--gray-light);
    color: #2b2b2b;
    font-family: "Inter", system-ui, sans-serif;
}

/* =========================
   Header
   ========================= */
.site-header {
    position: relative;
    overflow: hidden;               /* keeps the background tidy */
    background-color: var(--yellow-accent);      /* fallback if image missing */
	color: var(--purple-dark);
    border-bottom: 3px solid var(--purple-dark);
	padding: 1.2rem 0 0.8rem;       /* keeps header height as-is */
}

/* Tiled, 50% opacity background image */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("headerbackground.png");
    background-repeat: repeat;      /* seamless tiling */
    background-size: auto;          /* keep original tile size */
    opacity: 0.10;                   /* 15% opacity */
    z-index: 0;
}

/* Ensure header content sits above the background */
.site-header .container {
    position: relative;
    z-index: 1;
}

.site-title {
    font-family: "Archivo", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
}



/* =========================
   Content
   ========================= */

h2 {
    color: var(--purple-light-gray);
    font-family: "Archivo", system-ui, sans-serif;
    font-weight: 700;              /* thin */
 
}



 h3 {
    font-family: "Source Serif 4", Georgia, serif;
}

a {
    color: var(--purple-gray);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover,
a:focus {
    color: var(--yellow-accent);
}

.abstract {
  border: 1px outset black;
  padding: 10px;
}

.abstract-toggle {
    background: none;
    border: none;
    padding: 0;

    color: var(--purple-gray);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;

    font: inherit;
    cursor: pointer;
}

/* Hover / focus */
.abstract-toggle:hover,
.abstract-toggle:focus {
    color: var(--yellow-accent);
    background: none;
    outline: none;
}

.hline {
    border: none;
    border-bottom: 2px solid var(--purple-gray);
    margin: 2rem 0;
}

.vcenter {
    display: flex;
    align-items: center;     /* vertical centering */
}

p.lead {
    font-weight: 400;
}



.news {
    background-color: var(--purple-light-gray);
    padding: 2rem 2.5rem;
    margin: 1rem 0;
	border: 2px solid var(--purple-dark);
}

/* News title */
.news h2 {
    color: var(--yellow-accent);
    font-family: "Archivo", system-ui, sans-serif;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* News content */
.news p,
.news li,
.news span {
    color: #ffffff;
	font-size: 1.1rem; 
}

/* Optional: links inside news */
.news a {
    color: var(--yellow-soft);
}

.news a:hover {
    color: var(--yellow-accent);
}

.highlight-paragraph {
    background-color: var(--yellow-soft);        /* light yellow */
    border: 2px solid var(--yellow-accent);
    padding: 1rem 1.25rem;
    margin: 0rem 0;

    text-align: justify;
    line-height: 1.6;
}

/* =========================
   Footer
   ========================= */
.site-footer {
    margin-top: 4rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(90, 81, 104, 0.3);
    font-size: 0.85rem;
    color: rgba(90, 81, 104, 0.8);
}

.site-footer p {
    margin: 0;
}