/* css */
/* Additions: prevent horizontal scroll on small screens and in general tight layouts */
html, body {
    overflow-x: hidden;
}

/* Ensure layout wrapper never causes horizontal scroll */
.layout-container {
    overflow-x: clip;
}

/* Keep existing styles below... */

/* CSS */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Section cards: stronger separation */
.section-card {
    background: rgba(18, 13, 34, 0.75);
    border: 1px solid #2a1f4a;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin: 1rem 0;
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

/* Page hero spacing */
.page-hero {
    margin-bottom: 0.75rem;
    text-align: center;
}

/* TL;DR callout variant */
.callout--tldr {
    border-color: #5c2bd6;
    background: linear-gradient(180deg, rgba(92, 43, 214, 0.18), rgba(18,13,34,0.65));
}

/* Sticky in-content TOC */
.toc-card {
    margin: 1rem 0 1.25rem;
    border-color: #3b2a69;
    background: rgba(18, 13, 34, 0.85);
}
.toc-link {
    text-decoration: none;
}
.toc-link:hover { text-decoration: underline; }

/* Headings with anchor links */
.section-card h2 {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    margin: 0 0 0.5rem 0;
    color: #e8dcff;
}
.anchor {
    opacity: 0;
    font-weight: 700;
    color: #a97dff;
    text-decoration: none;
    transition: opacity 140ms ease;
}
.section-card:hover .anchor,
.section-card h2:hover .anchor {
    opacity: 0;
}

/* Enhanced unordered rule list */
.rule-list {
    padding-left: 1.2rem;
}
.rule-list li {
    margin: 0.3rem 0;
    list-style: none;
    position: relative;
    padding-left: 0.4rem;
}
.rule-list li::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 0.7em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background:
            radial-gradient(circle at 30% 30%, #debaff, #a97dff);
    box-shadow: 0 0 0 2px rgba(169, 125, 255, 0.24);
    transform: translateY(-50%);
}

/* Numbered steps with counters */
.steps-list {
    counter-reset: step;
    margin-left: 0;
    padding-left: 0;
}
.steps-list > li {
    list-style: none;
    counter-increment: step;
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    align-items: start;
    gap: 0.6rem;
    margin: 0.5rem 0;
    padding: 0.3rem 0.5rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
}
.steps-list > li::before {
    content: counter(step);
    display: inline-grid;
    place-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-top: 0.15rem;
    border-radius: 8px;
    background: linear-gradient(180deg, #6a2fe0, #4d0eb3);
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(77,14,179,0.4);
}

/* Details/summary as mini-cards */
.details-card {
    margin-top: 0.6rem;
    border: 1px dashed #3b2a69;
    border-radius: 12px;
    background: rgba(18, 13, 34, 0.6);
    overflow: hidden;
}
.details-card > summary {
    cursor: pointer;
    padding: 0.6rem 0.8rem;
    font-weight: 600;
    color: #debaff;
    list-style: none;
    position: relative;
}
.details-card > summary::-webkit-details-marker { display: none; }
.details-card > summary::after {
    content: "▼";
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transition: transform 160ms ease;
    color: #a97dff;
    font-size: 0.85em;
}
.details-card[open] > summary::after {
    transform: translateY(-50%) rotate(0deg);
}
.details-card > *:not(summary) {
    padding: 0 0.8rem 0.8rem 0.8rem;
}

/* Back-to-top button */
.back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #5c2bd6;
    background: linear-gradient(180deg, #6a2fe0, #4d0eb3);
    color: white;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 10;
}
.back-to-top.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Optional: widen readable layout slightly on wide screens */
@media (min-width: 1200px) {
    .content { max-width: 1200px; }
}

.layout-container {
    display: flex;
    flex-direction: row; /* Arrange sidebar and content side by side */
    position: relative; /* Establish a positioning context for children */
    min-height: calc(100vh - 80px); /* Full height, excluding header */
}

/* === Main Content Styles === */
.content {
    flex: 1; /* Take the remaining width */
    padding: 2rem;
    background: #0e0e0e; /* Content background color */

    max-width: 1100px; /* Restrict the main content width */
    margin: 2rem auto; /* Center content horizontally and vertically */
    background: linear-gradient(135deg, rgba(77, 14, 179, 0.2), rgba(255, 255, 255, 0.05)); /* Subtle gradient */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Soft border */
    border-radius: 15px; /* Rounded corners for a modern look */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* Subtle shadow for depth */
    color: #e6e6e6; /* Light text color */
    text-align: justify;
    line-height: 1.8; /* Improve readability */
    backdrop-filter: blur(5px); /* Add a translucent glass effect */
}

/* === Headings === */
.content h1 {
    font-size: 2.5rem;
    color: #debaff; /* Accent color for h1 */
    font-weight: bold; /* Highlight h1 */
    text-align: center; /* Centered heading */
    margin-bottom: 1.5rem;
    text-transform: capitalize;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.15);
    animation: fadeIn 1s ease-in-out; /* Subtle animation */
}

/* === Paragraphs === */
.content p {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9); /* Slightly lighter text for secondary content */
}

/* === Links Within Content === */
.content a {
    color: #a97dff; /* Accent color */
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out;
}
.content a:hover {
    color: #debaff; /* Hover effect */
    text-decoration: none;
}

#velarion-economy-info {
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    text-size-adjust: 75%;
    gap: 1rem;
}

#velarion-economy-info p {
    font-size: .95rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
}

/* Sidebar (this page’s layout; may be overridden by shared nav.css on purpose) */
.side-nav {
    width: 250px; /* Fixed width */
    position: absolute; /* Align relative to parent container */
    top: 80px; /* Start below the header (adjust this based on header height) */
    bottom: 0; /* Extend up to the footer */
    left: 0; /* Offset to the left */
    background: linear-gradient(180deg, #292929, #111); /* Transitioned tone */
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.5);
    padding: 1rem;
    overflow-y: auto; /* Enable vertical scrolling for overflow content */
    z-index: 1000; /* Ensure it stays above other elements */
}

/* Scrollbar for WebKit browsers */
.side-nav::-webkit-scrollbar {
    width: 8px;
}
.side-nav::-webkit-scrollbar-track {
    background: #1b1b1b;
}
.side-nav::-webkit-scrollbar-thumb {
    background: rgba(100, 50, 200, 0.8);
    border-radius: 5px;
}
.side-nav::-webkit-scrollbar-thumb:hover {
    background: #7603ff;
}

/* Image + text utility */
.img-text-container {
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between the image and text */
}
.img-text-container img {
    width: 100px; /* Adjust width as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional rounded corners */
}

/* ===== Moved from inline styles (home.html) ===== */

/* Hero */
.hero {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 0 1.25rem;
}
.hero h1 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    margin: 0;
}
.hero p {
    color: #cfcfe6;
    max-width: 65ch;
}

/* Center the paragraph inside the hero section */
.hero > p {
    text-align: center;
    max-width: 65ch;       /* optional: keeps lines readable */
    margin-inline: auto;   /* centers the block if max-width is set */
}


/* Search bar */
.searchbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
}
.searchbar input {
    flex: 1;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    border: 1px solid #3b2a69;
    background: #140f26;
    color: #eae7ff;
    outline: none;
}
.searchbar button {
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    border: 1px solid #5c2bd6;
    background: linear-gradient(180deg, #6a2fe0, #4d0eb3);
    color: white;
    cursor: pointer;
}

/* Section title */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.75rem;
    font-size: 1.1rem;
}

/* Quicklinks grid and cards */
.quicklinks {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.quicklink {
    background: #120d22;
    border: 1px solid #2a1f4a;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 108px;
}
.quicklink a {
    color: #e8dcff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.1px;
    line-height: 1.25;
    display: inline-block;
    margin-bottom: 0.15rem;
}
.quicklink .muted {
    color: #bdb7d7;
    line-height: 1.35;
}
.quicklink:hover {
    border-color: #5c2bd6;
    transform: translateY(-1px);
    transition: 160ms ease;
}

/* Featured grid and cards */
.grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card, .callout {
    background: #120d22;
    border: 1px solid #2a1f4a;
    border-radius: 14px;
    padding: 1rem 1.1rem;
}
.card:hover {
    border-color: #5c2bd6;
    transform: translateY(-1px);
    transition: 160ms ease;
}

/* Utility text */
.muted {
    color: #bdb7d7;
}

/* Tight lists */
.list-tight {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}
.list-tight li {
    margin: 0.25rem 0;
}

/* CTA */
.cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #5c2bd6;
    background: #1a1135;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

/* Footer spacing specific to this page */
footer {
    margin-top: 1.5rem;
}

/* ===== Responsive (moved from inline) ===== */

/* Subtle wider layout on larger screens to avoid crowding */
@media (min-width: 1080px) {
    .quicklinks { gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .grid { gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* Mobile tweaks for quicklink cards */
@media (max-width: 520px) {
    .quicklink { padding: 0.9rem; gap: 0.35rem; }
}

/* === Existing Mobile Adjustments === */
@media screen and (max-width: 768px) {
    .content {
        padding: 1rem; /* Reduce padding */
        margin: 1rem; /* Reduce margins */
    }
    .content h1 {
        font-size: 2rem; /* Reduce heading font size */
    }
    .content p {
        font-size: 1rem; /* Reduce paragraph font size */
    }
}

@media screen and (max-width: 768px) {
    .img-text-container {
        flex-direction: column; /* Stack the items vertically */
        align-items: flex-start; /* Align items to the left */
    }
    .img-text-container img {
        width: 80px; /* Reduce the image size further for mobiles */
    }
}