/* Basic Reset & Defaults */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Define Color Variables for Light/Dark Mode & Transition Speed */
:root {
    --bg-color: #e1dbd1;
    --text-color: #5a534a;
    --heading-color: #3b3630;
    --link-color: #7d7463;
    --link-hover-color: #5a534a;
    --button-bg: #1a5f7a;
    --button-text: #ffffff;
    --button-hover-bg: #13445a;
    --button-active-bg: #0e3140;
    --button-shadow-color: rgba(26, 95, 122, 0.2);
    --button-shadow-hover-color: rgba(26, 95, 122, 0.3);
    --content-bg: rgba(255, 255, 255, 0.4);
    --footer-text: #7d7463;
    --toggle-bg: rgba(0, 0, 0, 0.1);
    --toggle-icon-color: var(--heading-color);
    --theme-transition-duration: 0.3s;
}

body.dark-mode {
    --bg-color: #1a1a1a;
    --text-color: #cccccc;
    --heading-color: #e1e1e1;
    --link-color: #999999;
    --link-hover-color: #cccccc;
    --button-bg: #a8dadc;
    --button-text: #1d3557;
    --button-hover-bg: #90c8cc;
    --button-active-bg: #78b8bc;
    --button-shadow-color: rgba(168, 218, 220, 0.2);
    --button-shadow-hover-color: rgba(168, 218, 220, 0.3);
    --content-bg: rgba(50, 50, 50, 0.5);
    --footer-text: #999999;
    --toggle-bg: rgba(255, 255, 255, 0.15);
    --toggle-icon-color: var(--text-color);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 20px;
    overflow-x: hidden;
    transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease;
}

/* ==================== Dark Mode Toggle Button Styles ==================== */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background-color: var(--toggle-bg);
    border: none;
    color: var(--toggle-icon-color);
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.dark-mode-toggle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transition: opacity var(--theme-transition-duration) ease, transform var(--theme-transition-duration) ease;
    pointer-events: none;
}
.dark-mode-toggle .icon-sun {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
    pointer-events: auto;
}
.dark-mode-toggle .icon-moon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}
body.dark-mode .dark-mode-toggle .icon-sun {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
    pointer-events: none;
}
body.dark-mode .dark-mode-toggle .icon-moon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
    pointer-events: auto;
}

/* ==================== Hamburger Toggle Button Styles ==================== */
.hamburger-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px; /* Container height remains 24px */
    transition: transform var(--theme-transition-duration) ease;
}
.hamburger-toggle .hamburger-line {
    width: 100%;
    height: 3px; /* Thicker lines */
    background-color: var(--heading-color);
    transition: transform var(--theme-transition-duration) ease, opacity var(--theme-transition-duration) ease;
}
/* Transform hamburger into a symmetrical X */
.hamburger-toggle.open .hamburger-line:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}
.hamburger-toggle.open .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger-toggle.open .hamburger-line:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* ==================== Side Menu (Off-canvas) ==================== */
.side-menu {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    background-color: var(--bg-color);
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    padding: 20px;
    transition: right 0.3s ease;
    z-index: 1090;
}
.side-menu.open {
    right: 0;
}
.side-menu ul {
    list-style: none;
    padding: 0;
    margin-top: 50px;
}
.side-menu li {
    margin-bottom: 20px;
}
.side-menu a {
    text-decoration: none;
    font-size: 1.2rem;
    color: var(--link-color);
    transition: color var(--theme-transition-duration) ease;
}
.side-menu a:hover {
    color: var(--link-hover-color);
}

/* Main Content Container */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
    width: 100%;
    max-width: 950px;
    padding: 40px 20px;
    margin: auto;
    animation: fadeIn 1s ease-out;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Header & Logo */
.header {
    width: 100%;
    padding: 15px 0;
    text-align: center;
    margin-bottom: 40px;
    min-height: 260px;
}
.header a {
    text-decoration: none;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 400px;
    height: 140px;
    transition: width 0.3s ease, height 0.3s ease;
    max-width: 90%;
}
.logo {
    display: block;
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity var(--theme-transition-duration) ease;
    opacity: 0;
    pointer-events: none;
}
.logo-light { opacity: 1; pointer-events: auto; }
body.dark-mode .logo-light { opacity: 0; pointer-events: none; }
.logo-dark {}
body.dark-mode .logo-dark { opacity: 1; pointer-events: auto; }
#logo-text-fallback {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--heading-color);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    transition: color var(--theme-transition-duration) ease, font-size 0.3s ease;
    pointer-events: none;
}

/* Call to Action Section */
.cta-section { margin-bottom: 40px; }
.cta-button {
    display: inline-block;
    background-color: var(--button-bg);
    color: var(--button-text);
    padding: 16px 40px;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color var(--theme-transition-duration) ease, transform 0.2s ease, box-shadow 0.3s ease, padding 0.3s ease, font-size 0.3s ease;
    box-shadow: 0 4px 15px var(--button-shadow-color);
}
.cta-button:hover { background-color: var(--button-hover-bg); transform: translateY(-3px); box-shadow: 0 6px 20px var(--button-shadow-hover-color); }
.cta-button:active { background-color: var(--button-active-bg); transform: translateY(0px); box-shadow: 0 4px 15px var(--button-shadow-color); }

/* Substack Feed Preview Section */
.substack-preview-section {
    max-width: 800px;
    width: 90%;
    margin: 0 auto 45px auto;
    padding: 30px 35px;
    background-color: var(--content-bg);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: left;
    transition: background-color var(--theme-transition-duration) ease;
}
.substack-preview-section h2 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--heading-color);
    font-weight: 700;
    font-size: 1.7rem;
    transition: color var(--theme-transition-duration) ease;
}
.substack-posts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}
.substack-post {
    background-color: rgba(0,0,0,0.03);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.substack-post:hover { transform: translateY(-4px); box-shadow: 0 5px 12px rgba(0,0,0,0.08); }
.substack-post img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.substack-post-content {
    padding: 18px 15px 15px 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.substack-post h3 {
    font-size: 1.15rem;
    margin: 0 0 10px 0;
    color: var(--heading-color);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--theme-transition-duration) ease;
}
.substack-post .meta {
    font-size: 0.85rem;
    color: var(--link-color);
    margin-top: auto;
    padding-top: 12px;
    transition: color var(--theme-transition-duration) ease;
}
.substack-post .meta span { display: block; margin-top: 5px; }
.substack-all-posts-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--theme-transition-duration) ease;
}
.substack-all-posts-link:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}
body.dark-mode .substack-post {
    background-color: rgba(255,255,255,0.06);
    box-shadow: 0 1px 3px rgba(255,255,255,0.05);
}
body.dark-mode .substack-post:hover {
    box-shadow: 0 4px 10px rgba(255,255,255,0.08);
}
body.dark-mode .substack-post img {
    border-bottom-color: rgba(255,255,255,0.1);
}

/* Inline Navigation (Secondary Info) */
.secondary-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}
.secondary-info a {
    color: var(--link-color);
    text-decoration: none;
    font-size: 1rem;
    transition: color var(--theme-transition-duration) ease;
}
.secondary-info a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* About Section & General Page Content */
.about-section,
.page-content:not(.substack-preview-section) {
    max-width: 800px;
    width: 90%;
    margin: 0 auto 40px auto;
    padding: 35px 45px;
    background-color: var(--content-bg);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    animation: fadeIn 1s ease-out;
    text-align: left;
    transition: background-color var(--theme-transition-duration) ease;
    flex-grow: 1;
}
.page-content h2 {
    text-align: center;
    margin-bottom: 25px;
    color: var(--heading-color);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.3;
    transition: color var(--theme-transition-duration) ease;
}
.page-content p {
    margin-bottom: 18px;
    line-height: 1.7;
    color: var(--text-color);
    transition: color var(--theme-transition-duration) ease;
}
.page-content a:not(.back-link):not(.substack-post) {
    color: var(--button-bg);
    text-decoration: underline;
    font-weight: 600;
    transition: color var(--theme-transition-duration) ease;
}
.page-content a:not(.back-link):not(.substack-post):hover {
    color: var(--button-hover-bg);
}
.back-link {
    display: block;
    margin-top: 30px;
    text-align: center;
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--theme-transition-duration) ease;
}
.back-link:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* Footer */
.footer {
    width: 100%;
    text-align: center;
    padding: 25px 0;
    font-size: 0.85rem;
    color: var(--footer-text);
    margin-top: auto;
    transition: color var(--theme-transition-duration) ease;
}

/* Responsive Design Adjustments */
@media (min-width: 481px) {
    .header a { width: 500px; height: 170px; max-width: 85%; }
    #logo-text-fallback { font-size: 4.0rem; }
}
@media (min-width: 769px) {
    .header a { width: 600px; height: 200px; max-width: 80%; }
    #logo-text-fallback { font-size: 4.5rem; }
    body { padding: 20px; }
    .main-container { padding: 40px 20px; max-width: 90%; }
    .cta-button { padding: 16px 40px; font-size: 1.2rem; }
    .secondary-info { gap: 30px; }
    .secondary-info a { font-size: 1rem; }
    .page-content, .about-section, .substack-preview-section { padding: 35px 45px; }
    .page-content h2, .substack-preview-section h2 { font-size: 1.8rem; }
    .dark-mode-toggle { bottom: 20px; left: 20px; width: 45px; height: 45px; font-size: 1.2rem; }
}
@media (min-width: 1025px) {
    .header a { width: 720px; height: 240px; max-width: 720px; }
    #logo-text-fallback { font-size: 5.0rem; }
    .main-container { max-width: 950px; }
    .cta-button { padding: 18px 45px; font-size: 1.3rem; }
    .secondary-info { gap: 35px; }
    .secondary-info a { font-size: 1.05rem; }
}
@media (max-width: 480px) {
    body { padding: 15px 10px; }
    .main-container { padding: 20px 5px; justify-content: flex-start; }
    .header { margin-bottom: 25px; min-height: 150px; }
    #logo-text-fallback { font-size: 3.5rem; }
    .cta-section { margin-bottom: 35px; }
    .cta-button { padding: 13px 30px; font-size: 1rem; width: 85%; max-width: 320px; }
    .secondary-info { gap: 25px; margin-bottom: 40px; }
    .secondary-info a { font-size: 0.95rem; }
    .substack-preview-section { padding: 25px 15px; margin-bottom: 35px; }
    .substack-preview-section h2 { font-size: 1.5rem; margin-bottom: 20px; }
    .substack-posts-container { gap: 20px; margin-bottom: 25px; }
    .substack-post img { height: 140px; }
    .substack-post-content { padding: 15px 12px; }
    .substack-post h3 { font-size: 1.05rem; margin-bottom: 8px; -webkit-line-clamp: 3; }
    .substack-post .meta { font-size: 0.8rem; padding-top: 10px; }
    .page-content:not(.substack-preview-section),
    .about-section { padding: 25px 20px; }
    .page-content h2 { font-size: 1.5rem; }
    .page-content p { font-size: 0.95rem; }
    .footer { font-size: 0.8rem; padding: 20px 0; }
    .dark-mode-toggle { bottom: 10px; left: 10px; width: 40px; height: 40px; font-size: 1.1rem; }
}
/* ==================== Pop-up Subscribe Card Styles ==================== */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1200; /* Ensure it's above other elements */
    padding: 20px;
    animation: fadeInOverlay 0.3s ease-out;
}
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }

.popup-card {
    background-color: var(--bg-color); /* Use website background */
    color: var(--text-color); /* Use website text color */
    padding: 35px 40px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 550px; /* Max width for the card */
    width: 90%; /* Responsive width */
    position: relative; /* For positioning the close button */
    transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease;
    animation: scaleInPopup 0.3s ease-out;
    overflow: hidden; /* Prevent iframe overflow issues */
}
@keyframes scaleInPopup { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

.popup-card h2 {
    color: var(--heading-color); /* Use website heading color */
    font-size: 1.6rem;
    margin-bottom: 15px;
    transition: color var(--theme-transition-duration) ease;
}

.popup-card p {
    color: var(--text-color); /* Use website text color */
    margin-bottom: 25px;
    line-height: 1.5;
    font-size: 1rem;
    transition: color var(--theme-transition-duration) ease;
}

.popup-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--link-color); /* Use website link color */
    cursor: pointer;
    padding: 5px;
    transition: color var(--theme-transition-duration) ease, transform 0.2s ease;
}
.popup-close-button:hover {
    color: var(--link-hover-color); /* Use link hover color */
    transform: scale(1.1);
}

.popup-iframe-container {
    width: 100%;
    max-width: 480px; /* Match iframe width */
    height: 320px; /* Match iframe height */
    margin: 0 auto;
    overflow: hidden; /* Hide scrollbars if iframe dimensions are slightly off */
    border-radius: 4px; /* Optional: slightly round corners */
}

.popup-iframe-container iframe {
   width: 100%;
   height: 100%;
   /* The inline styles on the iframe (border, background) might need adjustment
      if they clash with the dark mode popup background. Consider removing them
      if the substack embed provides dark mode support itself. */
}

/* Dark Mode Adjustments for Popup */
body.dark-mode .popup-overlay {
    background-color: rgba(0, 0, 0, 0.7); /* Slightly darker overlay */
}
/* body.dark-mode .popup-card is already handled by variables */
/* body.dark-mode .popup-card h2, p, button already handled by variables */

/* Responsive Adjustments for Popup */
@media (max-width: 600px) {
    .popup-card {
        padding: 25px 20px;
        max-width: 95%;
    }
    .popup-card h2 {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    .popup-card p {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    .popup-close-button {
        font-size: 1.8rem;
        top: 5px;
        right: 10px;
    }
    /* Adjust iframe container height if needed on small screens */
    .popup-iframe-container {
        height: 300px; /* Slightly smaller height */
    }
}

@media (max-width: 400px) {
   .popup-iframe-container {
       height: 280px;
   }
}