/* Custom theme toggle overrides */

/* Slightly larger base font */
html {
    font-size: 17px; /* or 18px if you prefer */
}

/* Larger base font on mobile */
@media (max-width: 768px) {
    html {
      font-size: 18px;  /* was 15–16px in theme */
    }
  
    body {
      line-height: 1.7; /* a touch more line height for readability */
    }
  }

/* Legacy embeds: make iframe-container responsive */
.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-top: 1rem;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Theme toggle control – compact icon button */
.theme-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

.theme-toggle button {
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--window-bg-solid);
    color: var(--text-secondary);
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.theme-toggle button:hover {
    background-color: var(--code-bg);
    transform: translateY(-1px);
}

.theme-toggle button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.theme-toggle-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Mobile layout fixes
   The base theme stacks navigation and article meta vertically at <=600px.
   Override to keep them flowing across the page (wrapping as needed). */
@media (max-width: 600px) {
    nav {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    nav a {
        display: inline-flex;
        padding: 0.4rem 0.6rem;
        white-space: nowrap;
    }

    article .meta {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.7rem;
    }

    .pagination {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .pagination .page-info {
        order: 0;
        margin-bottom: 0;
        text-align: left;
    }
}