/* Shared shell for content pages (FAQ, Contact, legal pages). */
:root {
    --qc-brand: #4A4A6B;
    --qc-brand-dark: #38384f;
    --qc-accent: #D41959;
    --qc-accent-soft: #FEEBF5;
    --qc-surface: #F6F6FA;
    --qc-text: #2b2b3d;
    --qc-muted: #6b6b80;
    --qc-border: #E4E4EE;
}

.qc-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 16px 48px;
    font-family: 'Hind Siliguri', sans-serif;
    color: var(--qc-text);
}

.qc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: 50px;
    background: var(--qc-surface);
    color: var(--qc-brand);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease;
}

.qc-back:hover,
.qc-back:focus-visible {
    background: var(--qc-accent-soft);
    color: var(--qc-brand);
    text-decoration: none;
}

.qc-hero {
    padding: 28px 24px;
    margin-bottom: 24px;
    border-radius: 20px;
    background: linear-gradient(140deg, #5a5a80 0%, var(--qc-brand) 60%, #2f2f45 100%);
    color: #fff;
    text-align: center;
}

.qc-hero h1 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
}

.qc-hero p {
    margin: 0;
    font-size: 15px;
    opacity: .85;
}

/* Long-form text (privacy policy, terms, account deletion). */
.qc-prose {
    font-size: 16px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.qc-prose h3,
.qc-prose h4,
.qc-prose h5,
.qc-prose h6 {
    margin: 28px 0 10px;
    color: var(--qc-brand);
    font-weight: 700;
    line-height: 1.4;
}

.qc-prose h3 { font-size: 20px; }
.qc-prose h4 { font-size: 18px; }
.qc-prose h5 { font-size: 17px; }
.qc-prose h6 { font-size: 16px; }

.qc-prose p,
.qc-prose ul,
.qc-prose ol {
    margin-bottom: 14px;
}

.qc-prose a {
    color: var(--qc-accent);
}

.qc-prose img,
.qc-prose table {
    max-width: 100%;
}

.qc-prose .table-wrap {
    overflow-x: auto;
}

@media (max-width: 576px) {
    .qc-hero { padding: 22px 16px; border-radius: 16px; }
    .qc-hero h1 { font-size: 22px; }
    .qc-prose { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .qc-back { transition: none; }
}

/* Site layout: footer sticks to the bottom on short pages. */
.qc-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: 'Hind Siliguri', sans-serif;
}

.qc-main {
    flex: 1 0 auto;
}

/* Top navigation */
.qc-nav {
    display: grid;
    /* equal side columns keep the title on the true centre of the page */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.qc-nav > :first-child { justify-self: start; }
.qc-nav > :last-child { justify-self: end; }

/* "nav" prefix outranks the legacy `.navbar-brand img { width: 56px }` in quizgiri-v2.css */
.qc-nav .qc-nav__logo {
    display: block;
    width: auto;
    height: 36px;
}

/* Narrow phones: a slightly smaller logo leaves room for a truly centred title (down to 320px) */
@media (max-width: 374px) {
    .qc-nav { gap: 4px; }
    .qc-nav .qc-nav__logo { height: 34px; }
}

.qc-nav__title {
    white-space: nowrap;
    text-align: center;
    font-weight: 700;
    color: var(--qc-brand);
}

.qc-nav__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    color: var(--qc-brand);
    font-size: 30px;
}

.qc-nav__menu:hover,
.qc-nav__menu:focus-visible {
    color: var(--qc-brand-dark);
}

/* Side menu */
.qc-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color .2s ease;
}

.qc-drawer-close:hover,
.qc-drawer-close:focus-visible {
    background: var(--qc-surface);
}

.main-sidenav .list-group-item {
    color: var(--qc-brand);
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.main-sidenav .list-group-item i {
    color: var(--qc-brand);
    transition: color .2s ease;
}

/* Keyboard focus and touch press always get feedback; hover only on devices that have it. */
.main-sidenav .list-group-item:focus-visible,
.main-sidenav .list-group-item:active {
    background: var(--qc-brand);
    border-color: var(--qc-brand);
    color: #fff;
}

.main-sidenav .list-group-item:focus-visible i,
.main-sidenav .list-group-item:active i {
    color: #fff;
}

@media (hover: hover) {
    .main-sidenav .list-group-item:hover {
        background: var(--qc-brand);
        border-color: var(--qc-brand);
        color: #fff;
        transform: translateX(4px);
    }

    .main-sidenav .list-group-item:hover i {
        color: #fff;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-sidenav .list-group-item,
    .main-sidenav .list-group-item i { transition: none; }
    .main-sidenav .list-group-item:hover { transform: none; }
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--qc-accent);
    outline-offset: 2px;
}

/* Primary button */
.btn-brand {
    background: var(--qc-brand);
    border-color: var(--qc-brand);
    color: #fff;
    font-weight: 700;
    padding: 8px 20px;
}

.btn-brand:hover,
.btn-brand:focus-visible {
    background: var(--qc-brand-dark);
    border-color: var(--qc-brand-dark);
    color: #fff;
}