/* Theme Variables */
:root[data-theme="ocean-breeze"] {
    --primary: #0077B6;
    --primary-dark: #005f91;
    --secondary: #90E0EF;
    --accent: #FFD700;
    --background: #F8F9FA;
    --border: #E0F7FA;
    --card-bg: white;
    --text: #03045E;
}

:root[data-theme="sunset-glow"] {
    --primary: #FF6B6B;
    --primary-dark: #CC4B4B;
    --secondary: #FFB088;
    --accent: #FFA07A;
    --background: #FFF1E6;
    --border: #FFD4BC;
    --card-bg: white;
    --text: #943826;
}

:root[data-theme="midnight-mystique"] {
    --primary: #4A148C;
    --primary-dark: #2C0E5E;
    --secondary: #8E24AA;
    --accent: #E040FB;
    --background: #1C1C1E;
    --border: #333;
    --card-bg: #2C2C2E;
    --text: #E0E0E0;
}

:root[data-theme="earth-tones"] {
    --primary: #2E7D32;
    --primary-dark: #1B5E20;
    --secondary: #A1887F;
    --accent: #9E9D24;
    --background: #FAF3E0;
    --border: #D7CCC8;
    --card-bg: white;
    --text: #4E342E;
}

:root[data-theme="arctic-ice"] {
    --primary: #89CFF0;
    --primary-dark: #5B9BD5;
    --secondary: #D6E6F2;
    --accent: #A1C3D1;
    --background: #F9FBFD;
    --border: #DCEEF7;
    --card-bg: white;
    --text: #003366;
}

:root[data-theme="golden-elegance"] {
    --primary: #DAA520;
    --primary-dark: #B8860B;
    --secondary: #FDF5E6;
    --accent: #D2691E;
    --background: #FAF1E6;
    --border: #EEE8AA;
    --card-bg: white;
    --text: #5D4037;
}

:root[data-theme="tech-blue"] {
    --primary: #00BCD4;
    --primary-dark: #008394;
    --secondary: #3949AB;
    --accent: #64FFDA;
    --background: #263238;
    --border: #37474F;
    --card-bg: #455A64;
    --text: #CFD8DC;
}

:root[data-theme="spring-bloom"] {
    --primary: #FF99C8;
    --primary-dark: #F06292;
    --secondary: #B8E994;
    --accent: #FFF275;
    --background: #FEF9EF;
    --border: #F8BBD0;
    --card-bg: white;
    --text: #424242;
}

:root[data-theme="copper-charm"] {
    --primary: #B87333;
    --primary-dark: #8A4E1C;
    --secondary: #E4B062;
    --accent: #9A3334;
    --background: #FFF8E1;
    --border: #E3DAC9;
    --card-bg: white;
    --text: #5D4037;
}

:root[data-theme="zen-garden"] {
    --primary: #6B8E23;
    --primary-dark: #556B2F;
    --secondary: #B0BEC5;
    --accent: #A9A9A9;
    --background: #F3F4F6;
    --border: #CFD8DC;
    --card-bg: white;
    --text: #2E3B4E;
}

:root[data-theme="aurora-glow"] {
    --primary: #5E60CE;
    --primary-dark: #4A4CB0;
    --secondary: #5390D9;
    --accent: #80FFDB;
    --background: #0D1B2A;
    --text: #E0FBFC;
    --border: #3A506B;
    --card-bg: #1B263B;
}

:root[data-theme="rustic-charm"] {
    --primary: #6C584C;
    --primary-dark: #59463D;
    --secondary: #A98467;
    --accent: #EED6C4;
    --background: #F0EFEB;
    --text: #2C3639;
    --border: #D3C1A3;
    --card-bg: #E7E4DE;
}

:root[data-theme="solar-burst"] {
    --primary: #FF9F1C;
    --primary-dark: #CC7F17;
    --secondary: #FFBF69;
    --accent: #FFFFFF;
    --background: #2EC4B6;
    --text: #011627;
    --border: #FFD166;
    --card-bg: #81D8C6;
}

:root[data-theme="berry-bliss"] {
    --primary: #8A2BE2;
    --primary-dark: #6E23B5;
    --secondary: #BA55D3;
    --accent: #FF69B4;
    --background: #F0F8FF;
    --text: #4B0082;
    --border: #DDA0DD;
    --card-bg: #E6E6FA;
}

:root[data-theme="citrus-fresh"] {
    --primary: #FFA500;
    --primary-dark: #CC8400;
    --secondary: #FFD700;
    --accent: #00FA9A;
    --background: #FFFACD;
    --text: #556B2F;
    --border: #FFE600;
    --card-bg: #FFF8B0;
}

:root[data-theme="neon-dreams"] {
    --primary: #FF00FF;
    --primary-dark: #CC00CC;
    --secondary: #00FFFF;
    --accent: #8A2BE2;
    --background: #000000;
    --text: #E0FFFF;
    --border: #FF69B4;
    --card-bg: #1A1A1A;
}

:root[data-theme="urban-slate"] {
    --primary: #708090;
    --primary-dark: #5A6C73;
    --secondary: #B0C4DE;
    --accent: #4682B4;
    --background: #2F4F4F;
    --text: #F8F8FF;
    --border: #647B85;
    --card-bg: #3E606F;
}

:root[data-theme="peach-paradise"] {
    --primary: #FFB6C1;
    --primary-dark: #D99DA8;
    --secondary: #FFDAB9;
    --accent: #FFE4E1;
    --background: #FFF5EE;
    --text: #FF6347;
    --border: #FFC1C1;
    --card-bg: #FFEFEA;
}

:root[data-theme="forest-whisper"] {
    --primary: #556B2F;
    --primary-dark: #445723;
    --secondary: #6B8E23;
    --accent: #ADFF2F;
    --background: #F5FFFA;
    --text: #2E8B57;
    --border: #A2C93A;
    --card-bg: #EBF9F1;
}

:root[data-theme="galaxy-pulse"] {
    --primary: #1E90FF;
    --primary-dark: #1871CC;
    --secondary: #9370DB;
    --accent: #FF4500;
    --background: #000033;
    --text: #FFFFFF;
    --border: #4169E1;
    --card-bg: #1C1C4D;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    overflow: hidden;
}

body {
    font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    background: var(--background);
    transition: background-color 0.3s ease;
}

.running-text, .key-takeaway{
    max-width: 100%;
    min-width: 100%;
    margin: 0 auto;
}

.link-section {
    max-width: 70%;
    min-width: 70%;
    margin: 0 auto;
}

.running-text h1, .key-takeaway h1 {
    padding-bottom: 0.5rem;
    margin-top: 2rem;
}

.running-text h2, .key-takeaway h2 {
    margin-top: 1.5rem;
}

.running-text h3, .key-takeaway h3 {
    margin-top: 1.25rem;
}

.running-text p, .key-takeaway p {
    margin: 1rem 0;
}

.running-text ul, .running-text ol, .key-takeaway ul, .running-text ol {
    padding-left: 2rem;
}

.running-text li, .running-text li {
    margin: 0.5rem 0;
}

.running-text {
    background-color: var(--card-bg);
    border-left: 4px solid var(--primary);
    padding: 1rem;
    color: var(--text);
    margin: 1.5rem auto; /* Center horizontally */
    width: 70%; /* Set width to 80% of the parent container */
    box-sizing: border-box; /* Ensure padding is included in the width */
}

.key-takeaway {
    background-color: var(--card-bg);
    border-left: 4px solid var(--primary);
    padding: 1rem;
    color: var(--text);
    margin: 1.5rem auto; /* Center horizontally */
    width: 70%; /* Default width for larger devices */
    box-sizing: border-box; /* Include padding in width calculation */
}

.math {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
}

header {
    background-color: var(--primary-dark); /* Adjust to match your theme */
    color: white;
    padding: 1rem 2rem;
    overflow: hidden; /* Clear floats */
}

header h1 {
    float: left; /* Align the header text to the left */
    margin: 0;
    font-size: 1.5rem;
    line-height: 2rem; /* Ensure it aligns with the dropdown */
}

.header-container {
    display: flex; /* Use Flexbox for alignment */
    align-items: center; /* Align items vertically */
    justify-content: space-between; /* Place h1 on the left and select on the right */
}

header p {
    margin: 0.5rem 0 0; /* Add space above the paragraph */
    font-size: 1rem;
    text-align: left; /* Align text to the left */
}

.theme-switcher {
    float: right;
    margin: 0;
    position: relative;
    width: 40px; /* Adjust width to fit the icon */
    height: 40px; /* Adjust height for a square button */
}

.theme-switcher select {
    appearance: none; /* Remove default dropdown styles */
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none; /* Firefox */
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Optional: Make the dropdown look like a button */
    background: url('https://cdn-icons-png.flaticon.com/512/32/32195.png') no-repeat center;
    background-size: 24px 24px; /* Icon size */
    cursor: pointer;
    text-indent: -9999px; /* Visually hides the text */
    padding: 0.5rem;
    border: 1px solid var(--border);
    font-size: 1rem;
    line-height: 1.5;
}

.theme-switcher select:focus {
    outline: none; /* Remove focus outline */
}

footer {
    background-color: var(--primary-dark);
    color: white;
    text-align: center;
    padding: 1rem;
    flex-shrink: 0;
    font-size: 0.8rem;
    transition: background-color 0.3s ease;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers child elements horizontally */
    min-height: 0;
    max-height: 100vh; /* Limit height to the viewport height */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
    padding: 1rem; /* Optional padding for better spacing */
    box-sizing: border-box; /* Ensures padding is included in height calculation */
}


.search-section {
    background: var(--card-bg);
    padding: 1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.3s ease;
}

.search-bar {
    max-width: 600px;
    margin: 0 auto;
}

.search-bar input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--secondary);
    border-radius: 4px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.search-bar input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(27, 73, 101, 0.1);
}

.link-section {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--background);
    transition: background-color 0.3s ease;
}

.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.link-grid li {
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--border);
}

.link-grid li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 73, 101, 0.1);
}

.card-link {
    display: block;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
}

.card-title {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
    background-color: var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.card-title:hover {
    background-color: var(--accent);
}

.card-description {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 0.5rem;
    transition: color 0.3s ease;
}


.hidden {
    display: none;
}

/* Scrollbar Styling */
.link-section::-webkit-scrollbar {
    width: 8px;
}

.link-section::-webkit-scrollbar-track {
    background: var(--background);
}

.link-section::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 4px;
}

.link-section::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Add these styles to your existing CSS */
.link-group {
    margin-bottom: 2rem;
}

.group-header {
    color: var(--primary-dark);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile-first approach */
body {
    font-size: 16px;
    margin: 0;
    padding: 0;
}

/* Adjust styles for smaller screens (up to 768px wide) */
@media (max-width: 768px) {
    .running-text, .key-takeaway {
        width: 90%; /* Adjust width for smaller screens */
        margin: 1rem auto;
    }

    header h1 {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    .theme-switcher select {
        font-size: 0.9rem;
    }

    .link-grid {
        grid-template-columns: 1fr; /* Single column for smaller screens */
        gap: 0.5rem;
    }

    .card-title {
        font-size: 1rem;
        padding: 0.5rem;
    }

    .card-description {
        font-size: 0.8rem;
    }
}

/* Adjust styles for medium screens (768px to 1024px wide) */
@media (min-width: 768px) and (max-width: 1024px) {
    .running-text, .key-takeaway {
        width: 80%; /* Adjust width for medium screens */
    }

    img {
        max-width: 100%; /* Ensures the image doesn't overflow the container */
        height: auto; /* Maintains aspect ratio */
        display: block; /* Removes inline-block spacing issues */
        margin: 0 auto; /* Centers the image */
    }

    .link-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
    }

    .main {
        padding: 0rem; /* Remove padding */
        width: 100%; /* Full width */
    }
    
}

/* Styles for large screens (more than 1024px wide) */
@media (min-width: 1024px) {
    .link-grid {
        grid-template-columns: repeat(3, 1fr); /* Three columns for large screens */
    }
}


/* Styles for Samsung Galaxy S21 (Portrait Mode) */
@media (min-width: 344px) and (max-width: 768px) {
    body {
        font-size: 14px; /* Smaller font size for better readability */
        padding: 10px; /* Adjust spacing */
    }

    main {
        padding: 0rem; /* Remove padding */
        width: 100%; /* Full width */
    }
    
    .running-text, .key-takeaway, .link-section {
        width: 100%; /* Maximize width usage for narrow screens */
        margin: 1rem auto; /* Center align */
        font-size: 0.9rem; /* Adjust text size */
    }

    .link-section {
        padding: 0rem; /* Adjust padding */
    }


    header h1 {
        font-size: 1.2rem; /* Smaller header text */
        line-height: 1.4rem;
    }

    .theme-switcher select {
        font-size: 0.8rem; /* Adjust dropdown size */
        padding: 0.3rem;
    }

    .link-grid {
        grid-template-columns: 1fr; /* Single column for narrow screens */
        gap: 0.5rem; /* Reduce gap */
    }

    .card-title {
        font-size: 1rem; /* Adjust card title size */
        padding: 0.5rem;
    }

    .card-description {
        font-size: 0.8rem; /* Smaller description font */
    }

    img {
        max-width: 100%; /* Ensures the image doesn't overflow the container */
        height: auto; /* Maintains aspect ratio */
        display: block; /* Removes inline-block spacing issues */
        margin: 0 auto; /* Centers the image */
    }
}


@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    .running-text, .link-section, .key-takeaway {
        max-width: 100%;
        min-width: 100%;
        margin: 0 auto;
    }
}