/* TIOCS Theme - Art Deco inspired styling for Material theme */

/* ============================================================================
   GOOGLE FONTS IMPORT
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Judson:ital,wght@0,400;0,700;1,400&display=swap');

/* ============================================================================
   ROOT VARIABLES - Dark Theme (Default)
   ============================================================================ */
:root {
    /* Dark theme colors - Organic earth tones for reduced eye strain */
    --tiocs-bg-primary: #1c1814;     /* Warm charcoal - easier on eyes than black */
    --tiocs-bg-secondary: #2a241f;   /* Deep coffee - subtle contrast */
    --tiocs-text-primary: #ede3d0;   /* Warm cream - 8.5:1 contrast ratio */
    --tiocs-text-secondary: #d4c4a8; /* Muted gold - softer secondary text */
    --tiocs-accent-gold: #b8956f;    /* Organic bronze - less harsh than bright gold */
    --tiocs-accent-gold-glow: rgba(184, 149, 111, 0.25); /* Softer glow */

    /* Fonts */
    --tiocs-font-body: 'Judson', serif;
    --tiocs-font-display: 'Cinzel', serif;

    /* Typography scale */
    --tiocs-line-height-base: 1.7;
    --tiocs-line-height-heading: 1.3;
    --tiocs-paragraph-spacing: 1.5rem;
}

/* ============================================================================
   ROOT VARIABLES - Light Theme
   ============================================================================ */
[data-md-color-scheme="default"] {
    /* Light theme colors - Natural papyrus tones for comfortable reading */
    --tiocs-bg-primary: #faf8f4;     /* Warm off-white - softer than pure white */
    --tiocs-bg-secondary: #f1ebe3;   /* Natural parchment - subtle texture feel */
    --tiocs-text-primary: #3d342a;   /* Rich brown - 9.2:1 contrast ratio */
    --tiocs-text-secondary: #5a4d3f; /* Medium brown - balanced secondary text */
    --tiocs-accent-gold: #8b6f47;    /* Earthy gold - maintains warmth */
    --tiocs-accent-gold-glow: rgba(139, 111, 71, 0.2); /* Gentler glow */
}

[data-md-color-scheme="slate"] {
    /* Dark theme colors */
    --tiocs-bg-primary: #1a1a1a;
    --tiocs-bg-secondary: rgba(0,0,0,0.2);
    --tiocs-text-primary: #f0e6d2;
    --tiocs-text-secondary: #e6cdae;
    --tiocs-accent-gold: #c5a47e;
    --tiocs-accent-gold-glow: rgba(197, 164, 126, 0.3);
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */
body {
    font-family: var(--tiocs-font-body) !important;
    background-color: var(--tiocs-bg-primary) !important;
    color: var(--tiocs-text-primary) !important;
    line-height: var(--tiocs-line-height-base);
}

/* Override Material theme backgrounds */
.md-main {
    background-color: var(--tiocs-bg-primary) !important;
}

.md-content {
    background-color: var(--tiocs-bg-primary) !important;
}

.md-typeset {
    color: var(--tiocs-text-primary) !important;
    line-height: var(--tiocs-line-height-base);
}

/* ============================================================================
   ENHANCED TYPOGRAPHY
   ============================================================================ */

/* Paragraph spacing and readability */
.md-typeset p {
    margin-bottom: var(--tiocs-paragraph-spacing);
    text-align: justify;
    hyphens: auto;
}

/* Reading optimizations */
.md-typeset {
    print-color-adjust: exact;
    font-size: 0.8rem;
    line-height: 1.6;
    overflow-wrap: break-word;
}

/* Better text spacing */
.md-typeset li {
    margin-bottom: 0.5rem;
}

/* Emphasis styling */
.md-typeset em {
    font-style: italic;
    color: var(--tiocs-text-secondary);
}

.md-typeset strong {
    font-weight: 700;
    color: var(--tiocs-text-secondary);
}

/* Dropcaps for first paragraph of blog posts */
.md-content__inner > .md-typeset > p:first-of-type::first-letter {
    font-family: var(--tiocs-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--tiocs-accent-gold);
    float: left;
    line-height: 0.8;
    margin: 0.1em 0.1em 0 0;
    padding: 0;
}

/* Reading time and metadata */
.md-typeset .md-meta {
    font-family: var(--tiocs-font-display);
    font-size: 0.9rem;
    color: var(--tiocs-text-secondary);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--tiocs-accent-gold);
}

/* Improved spacing for lists */
.md-typeset ul,
.md-typeset ol {
    margin-bottom: var(--tiocs-paragraph-spacing);
}

.md-typeset ul li,
.md-typeset ol li {
    margin-bottom: 0.75rem;
}

/* Better horizontal rules */
.md-typeset hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--tiocs-accent-gold) 50%, transparent 100%);
    margin: 3rem 0;
}

/* ============================================================================
   ART DECO COMPONENTS
   ============================================================================ */
.art-deco-title {
    font-family: var(--tiocs-font-display);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tiocs-text-secondary);
}

.art-deco-border {
    border: 2px solid var(--tiocs-accent-gold);
    box-shadow: 0 0 15px var(--tiocs-accent-gold-glow);
    position: relative;
    background:
        linear-gradient(to right, var(--tiocs-accent-gold) 2px, transparent 2px) 0 0,
        linear-gradient(to right, var(--tiocs-accent-gold) 2px, transparent 2px) 0 100%,
        linear-gradient(to left, var(--tiocs-accent-gold) 2px, transparent 2px) 100% 0,
        linear-gradient(to left, var(--tiocs-accent-gold) 2px, transparent 2px) 100% 100%,
        linear-gradient(to bottom, var(--tiocs-accent-gold) 2px, transparent 2px) 0 0,
        linear-gradient(to bottom, var(--tiocs-accent-gold) 2px, transparent 2px) 100% 0,
        linear-gradient(to top, var(--tiocs-accent-gold) 2px, transparent 2px) 0 100%,
        linear-gradient(to top, var(--tiocs-accent-gold) 2px, transparent 2px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.art-deco-header {
    border-bottom: 2px solid var(--tiocs-accent-gold);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-family: var(--tiocs-font-display);
    font-weight: 700;
    color: var(--tiocs-text-secondary);
}

/* ============================================================================
   CONTENT BLOCKS
   ============================================================================ */
.math-block {
    background-color: var(--tiocs-bg-secondary);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid var(--tiocs-accent-gold);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.keyword {
    font-weight: 700;
    color: var(--tiocs-text-secondary);
}

/* ============================================================================
   ICONS AND DECORATIVE ELEMENTS
   ============================================================================ */
.icon-container {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-right: 1.5rem;
}

.icon-svg {
    stroke: var(--tiocs-accent-gold);
    stroke-width: 1.5;
    fill: none;
}

.takeaway-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}

.takeaway-list li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--tiocs-accent-gold);
}

/* ============================================================================
   MATERIAL THEME INTEGRATION
   ============================================================================ */

/* Header styling */
.md-header {
    background: linear-gradient(135deg, var(--tiocs-bg-primary) 0%, var(--tiocs-bg-secondary) 100%);
    border-bottom: 1px solid var(--tiocs-accent-gold);
}

.md-header__title {
    font-family: var(--tiocs-font-display);
    color: var(--tiocs-text-secondary) !important;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Navigation */
.md-nav__title {
    font-family: var(--tiocs-font-display);
    color: var(--tiocs-text-secondary);
    font-weight: 600;
}

.md-nav__link {
    color: var(--tiocs-text-primary);
}

.md-nav__link:hover {
    color: var(--tiocs-accent-gold);
}

.md-nav__link--active {
    color: var(--tiocs-accent-gold) !important;
}

/* Sidebar */
.md-sidebar {
    background-color: var(--tiocs-bg-primary);
}

.md-sidebar__scrollwrap {
    background-color: var(--tiocs-bg-primary);
}

/* Content area */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-family: var(--tiocs-font-display);
    color: var(--tiocs-text-secondary);
    font-weight: 700;
    line-height: var(--tiocs-line-height-heading);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.md-typeset h1 {
    border-bottom: 2px solid var(--tiocs-accent-gold);
    padding-bottom: 0.5rem;
}

.md-typeset h2 {
    border-bottom: 1px solid var(--tiocs-accent-gold);
    padding-bottom: 0.3rem;
}

/* Code blocks */
.md-typeset pre {
    background-color: var(--tiocs-bg-secondary) !important;
    border: 1px solid var(--tiocs-accent-gold);
}

.md-typeset code {
    background-color: var(--tiocs-bg-secondary);
    color: var(--tiocs-text-primary);
}

/* Links */
.md-typeset a {
    color: var(--tiocs-accent-gold);
}

.md-typeset a:hover {
    color: var(--tiocs-text-secondary);
}

/* Blockquotes */
.md-typeset blockquote {
    border-left: 4px solid var(--tiocs-accent-gold);
    background-color: var(--tiocs-bg-secondary);
    color: var(--tiocs-text-primary);
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    position: relative;
    font-style: italic;
    font-size: 0.95rem;
}

.md-typeset blockquote p {
    margin-bottom: 0;
}

.md-typeset blockquote::before {
    content: '"';
    font-family: var(--tiocs-font-display);
    font-size: 2rem;
    color: var(--tiocs-accent-gold);
    position: absolute;
    left: 0.5rem;
    top: 0.2rem;
    line-height: 1;
}

/* Tables */
.md-typeset table {
    background-color: var(--tiocs-bg-secondary);
}

.md-typeset th {
    background-color: var(--tiocs-accent-gold);
    color: var(--tiocs-bg-primary);
    font-family: var(--tiocs-font-display);
    font-weight: 600;
}

/* Search */
.md-search__input {
    background-color: var(--tiocs-bg-secondary);
    color: var(--tiocs-text-primary);
    border: 1px solid var(--tiocs-accent-gold);
}

.md-search__input::placeholder {
    color: var(--tiocs-text-secondary);
}

/* Footer */
.md-footer {
    background-color: var(--tiocs-bg-primary);
    border-top: 1px solid var(--tiocs-accent-gold);
}

.md-footer-meta {
    background-color: var(--tiocs-bg-secondary);
}

/* ============================================================================
   BLOG SPECIFIC STYLES
   ============================================================================ */
.md-typeset .md-blog__meta {
    color: var(--tiocs-text-secondary);
    font-style: italic;
}

.md-typeset .md-blog__title {
    font-family: var(--tiocs-font-display);
    color: var(--tiocs-text-secondary);
}

/* Tags */
.md-tag {
    background-color: var(--tiocs-accent-gold) !important;
    color: var(--tiocs-bg-primary) !important;
    font-family: var(--tiocs-font-display);
    font-size: 0.8em;
    font-weight: 600;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */
@media screen and (max-width: 76.1875em) {
    .md-nav--primary .md-nav__title {
        background-color: var(--tiocs-bg-primary);
        color: var(--tiocs-text-secondary);
    }
}

/* Mobile padding adjustments */
@media screen and (max-width: 44.9375em) {
    /* Add padding to main content on mobile */
    .md-content__inner {
        padding: 1rem;
    }

    /* Ensure proper text container padding */
    .md-typeset {
        padding: 0 1rem;
    }

    /* Adjust header padding */
    .md-header__inner {
        padding: 0 1rem;
    }

    /* Blog post content padding */
    .md-typeset .md-content__inner {
        padding: 1rem;
    }

    /* Code blocks should respect padding */
    .md-typeset pre {
        margin: 1rem -0.5rem;
        border-radius: 0;
    }

    /* iOS-specific fix: Remove sticky positioning on mobile to prevent header overlap */
    .md-nav--primary .md-nav__title,
    .md-nav--secondary .md-nav__title {
        position: relative !important;
        top: auto !important;
    }

    /* Ensure drawer content starts at correct position */
    .md-nav--primary {
        padding-top: 0 !important;
    }
}

/* Tablet padding adjustments */
@media screen and (max-width: 59.9375em) {
    .md-content__inner {
        padding: 0 1.5rem;
    }
}

/* Override Material's sticky navigation title styling */
.md-nav--primary .md-nav__title,
.md-nav--secondary .md-nav__title {
    background: var(--tiocs-bg-primary) !important;
    box-shadow: 0 0 .4rem .4rem var(--tiocs-bg-primary) !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ============================================================================
   THEME TOGGLE ENHANCEMENTS
   ============================================================================ */
.md-header__button.md-icon {
    color: var(--tiocs-accent-gold);
}

.md-header__button.md-icon:hover {
    color: var(--tiocs-text-secondary);
}

/* ============================================================================
   CUSTOM UTILITY CLASSES
   ============================================================================ */
.tiocs-highlight {
    background: linear-gradient(120deg, transparent 0%, var(--tiocs-accent-gold-glow) 50%, transparent 100%);
    padding: 0.2em 0.4em;
    border-radius: 0.2em;
}

.tiocs-card {
    background-color: var(--tiocs-bg-secondary);
    border: 1px solid var(--tiocs-accent-gold);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 0 4px 8px var(--tiocs-accent-gold-glow);
}

.tiocs-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--tiocs-accent-gold) 50%, transparent 100%);
    margin: 2rem 0;
    border: none;
}

/* ============================================================================
   READING EXPERIENCE ENHANCEMENTS
   ============================================================================ */

/* Better content width for readability */
.md-content__inner {
    margin: 0 auto;
    max-width: 800px;
}

/* Improved focus for reading */
.md-typeset p:focus-within {
    background-color: var(--tiocs-bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
}

/* Print styles for philosophical essays */
@media print {
    .md-typeset {
        font-size: 12pt;
        line-height: 1.6;
        color: #000;
    }

    .md-typeset h1,
    .md-typeset h2,
    .md-typeset h3 {
        page-break-after: avoid;
        color: #333;
    }

    .md-typeset blockquote {
        page-break-inside: avoid;
        border-left: 2px solid #333;
        background: #f9f9f9;
    }
}

/* Subtle text selection styling */
::selection {
    background-color: var(--tiocs-accent-gold-glow);
    color: var(--tiocs-text-primary);
}

/* Better spacing for footnotes and references */
.md-typeset .footnote {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tiocs-accent-gold);
}