/* ------------------------------------------
   1. Typography Imports
------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ------------------------------------------
   2. Functional Design Tokens (Brand System)
------------------------------------------- */
:root {
    /* Core brand + UI colors */
    --brand-primary: #013220;         /* Primary UI actions (buttons, key accents) */
    --brand-accent: #013220;          /* Decorative accents, borders */
    --brand-highlight: #b4bfda;       /* Optional subtle highlight / hover */
    --ink: #000000;                   /* Pure “print” black */
    --navbar-bg: #f0e9e1;             /* Custom navbar background color */

    /* Surface + text */
    --background-main: #FDF8F2;       /* Overall page background / shell */
    --text-body: #333333;             /* General body text (if needed globally) - lightened for better distinction */

    --background-section: #F5F5F5;    /* Section reading surface (cards, content areas) */
    --text-body-section: #333333;     /* Text inside content sections - lightened */
    --background-preview-meta: #F7E6D2; /* For profile page preview-meta contents */

    /* Links */
    --link-color: #013220;            /* Standard link color */
    --link-hover: #556B2F;            /* Link hover color */
}

/* ------------------------------------------
   3. Bootstrap Overrides (Theme-Level)
------------------------------------------- */

/* Primary button (solid) */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-highlight);
    border-color: var(--brand-highlight);
    color: #000000;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    opacity: 0.65;
}

/* Outline primary button */
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
}

.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--brand-highlight);
    border-color: var(--brand-highlight);
    color: #000000;
}

/* ------------------------------------------
   4. Global Styles / Resets
------------------------------------------- */

body {
    background-color: var(--background-main);
    color: var(--brand-accent);
    font-family: Merriweather, Georgia, serif;
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    padding: 0;
}

/* Optional: global link styling (keeps theme consistent) */
a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6,
.splash-heading {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
}

/* Make h3 standout */
.content-section h3 {
    font-size: 1.5rem;
    color: var(--ink);
    border-bottom: 1px solid var(--brand-highlight);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* Style for hr dividers */
.content-section hr {
    border: 0;
    border-top: 4px solid var(--brand-highlight);
    margin: 2rem 0;
}

/* Profile section text color */
.profile-section,
.profile-section p,
.profile-section .post-preview p {
    color: var(--text-body-section);
}

/* Content section link styling */
.content-section a {
    color: var(--link-color);
    text-decoration: underline;
}

.content-section a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Headline mode styles */
.content-section.headline-mode .post-preview-meta {
    display: none;
}

/* Post preview meta styling */
.post-preview-meta {
    background-color: var(--background-preview-meta);
    padding: 10px;
    border-radius:0.5rem;
}

/* Sidebar link styling */
#sidebar a {
    color: var(--link-color);
    text-decoration: none;
}

#sidebar a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* ------------------------------------------
   5. Components
------------------------------------------- */

/* 5.1 Navbar */

/*!* Expanded state *!*/
/*.navbar .expanded {*/
/*    padding: 2rem 0; !* Tall like newspaper masthead *!*/
/*}*/
/*.navbar .expanded .logo-monogram {*/
/*    width: 200px; !* Larger logo *!*/
/*}*/
/*.navbar .expanded .splash-heading {*/
/*    font-size: 3rem; !* Big heading *!*/
/*}*/

/*!* Collapsed state *!*/
/*.navbar .collapsed .logo-monogram {*/
/*    width: 100px; !* Smaller logo *!*/
/*}*/
/*.navbar.shrink {*/
/*    background-color: var(--background-main); !* Or your brand color *!*/
/*    padding: 0.5rem 1rem; !* Compact padding *!*/
/*    box-shadow: 0 2px 4px rgba(0,0,0,0.1); !* Subtle shadow for fixed nav *!*/
/*}*/
/*.navbar.shrink .expanded {*/
/*    display: none;*/
/*}*/
/*.navbar.shrink .collapsed {*/
/*    display: block !important;*/
/*}*/

/*.navbar {*/
/*    background-color: var(--navbar-bg) !important;*/
/*    box-shadow: 0 2px 4px rgba(0,0,0,0.1); !* Subtle fixed shadow *!*/
/*}*/
/*.navbar .nav-link {*/
/*    color: var(--link-color);*/
/*}*/
/*.navbar .nav-link:hover {*/
/*    color: var(--link-hover);*/
/*}*/

/* 5.2 Splash Screen / Home Card */

.splash-container {
    text-align: center;
    padding: 2rem;
    background-color: #ffffff;      /* Pure white “card” on warm shell */
    border: 2px solid var(--ink);
    border-radius: 10%;
    box-shadow: 0 4px 8px rgba(1, 50, 32, 0.1);
    animation: fadeIn 1s ease-in-out;
    max-width: 520px;
    width: 100%;
}

/* Fade-in animation for splash card */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Logo block (for ornaments above/below EP monogram) */
.logo-block {
    display: inline-block;
    margin-bottom: 0.75rem;
}

.logo-block::before,
.logo-block::after {
    content: "— ★ —";
    display: block;
    font-size: 0.9rem;
    color: var(--ink);
}

.logo-block::before {
    margin-bottom: 0.4rem;
}

.logo-block::after {
    margin-top: 0.4rem;
}

/* Logo SVG itself */
.logo-monogram {
    width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: brightness(1);
    transition: filter 0.3s ease;
}

.logo-monogram:hover {
    filter: brightness(1.04); /* subtle micro-interaction */
}

.initial-header .logo-monogram {
    min-width: 100px;  /* Prevents shrinking below 100px wide in initial header */
    min-height: 50px;  /* Optional: Prevents shrinking below 50px tall */
    object-fit: contain;  /* Ensures proper scaling */
}

/* EINPOST heading */
.splash-heading {
    font-family: 'Roboto Slab', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.5rem;
    letter-spacing: 0.15em;
}

/* Horizontal bar under heading */
.horizontal-bar {
    width: 80%;
    margin: 0.75rem auto 1.25rem;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    height: 4px;
}

/* Splash page nav links (About / Terms / Privacy) */
.splash-nav .nav-link {
    color: var(--link-color);
    text-decoration: none;
    font-size: 1.1rem;
    padding: 0 0.5rem;
    transition: color 0.3s ease;
}

.splash-nav .nav-link:hover {
    color: var(--link-hover);
    text-decoration: none;
}

/* 5.3 Site-wide document sections (About, Terms, Privacy, etc.) */

.section-site-defaults {
    /* you can move shared layout here if you like */
    /* max-width: 800px;
       margin: 0 auto; */
}

/* Typography defaults for site-wide content */
.section-site-defaults p,
.section-site-defaults ul,
.section-site-defaults ol,
.section-site-defaults li {
    color: var(--text-body-section);
    text-align: left;
    line-height: 1.65;
    font-size: 1rem;
}

/* Lists: spacing + indentation for readability */
.section-site-defaults ul,
.section-site-defaults ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.section-site-defaults li {
    margin-bottom: 0.35rem;
}

/* 5.4 User-facing content sections (posts, headlines, essays, etc.) */

.section-user-defaults {
    max-width: 720px;
    margin: 0 auto 3rem;
    padding: 1.75rem 1.25rem;
    background-color: var(--background-section); /* off-white reading surface */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Base typography for user content */
.section-user-defaults p,
.section-user-defaults ul,
.section-user-defaults ol,
.section-user-defaults li {
    color: var(--text-body-section);
    line-height: 1.7;
    font-size: 1rem;
}

/* Lists – clean, readable bullets */
.section-user-defaults ul,
.section-user-defaults ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.section-user-defaults li {
    margin-bottom: 0.4rem;
}

.section-user-defaults h1,
.section-user-defaults h2,
.section-user-defaults h3 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    color: var(--ink);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.section-user-defaults h1 {
    font-size: 2rem;
}

.section-user-defaults h2 {
    font-size: 1.5rem;
}

.section-user-defaults h3 {
    font-size: 1.25rem;
}

/* Blockquotes in user content */
.section-user-defaults blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--brand-primary);
    background-color: rgba(0, 0, 0, 0.02);
    font-style: italic;
}

/* Images inside posts */
.section-user-defaults img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Horizontal rule for section breaks */
.section-user-defaults hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.45);
    margin: 2rem 0;
}

.section-user-defaults a {
    color: var(--link-color);
    text-decoration: underline;
}

.section-user-defaults a:hover {
    color: var(--link-hover);
    text-decoration: none;
}

/* ------------------------------------------
   6. Media Queries
------------------------------------------- */

@media (max-width: 768px) {
    .logo-monogram {
        width: 120px;
    }

    .splash-heading {
        font-size: 2rem;
    }

    .splash-nav {
        flex-direction: column;
        gap: 0.5rem;
    }
}