/* ==========================================================================
   FSR WiWi – Full Takeover CSS
   Hides ALL TU Chemnitz template elements (header, sidebar, footer, breadcrumbs)
   and makes the page content area full-width.
   
   Template structure (tucal4):
   - header > #tucal-search          → Top bar (Direktlinks, Suche, Login)
   - header > #tucal-head            → TU Logo + main university nav
   - #tucal-printhead                → Print header
   - #tucal-breadcrumb               → Breadcrumbs
   - .tucal-menu / #tucal-menu       → Left sidebar navigation
   - #tucal-content / .tucal-content → Content area (our stuff lives here)
   - #tucal-titlepicture             → Title/banner image
   - footer / #tucal-foot            → Footer
   - #tucal-sos                      → SOS button
   ========================================================================== */

/* ====== 1. TEMPLATE ELEMENTS TO KEEP ======
   The real TU Chemnitz header (top, incl. logo/uni nav) and footer (bottom,
   incl. Impressum/Datenschutz) come from the university's own tuc4.inc and
   MUST stay visible as-is — they are required for compliance and are not
   something we control from this project. Only the breadcrumb, the left
   sidebar menu (duplicates our own nav) and the title picture are hidden;
   everything below is scoped to the content area so it never touches
   header/footer markup even if they happen to reuse Bootstrap classes. */

/* Breadcrumbs */
#tucal-breadcrumb,
.breadcrumb,
nav[aria-label="Breadcrumb"],
.tucal-breadcrumb {
    display: none !important;
}

/* Left sidebar / menu (redundant with our own nav).
   #tucal-edge is the actual sidebar wrapper confirmed from live markup;
   #tucal-menu/.tucal-menu kept in case an older template variant uses it. */
#tucal-edge,
#tucal-menu,
.tucal-menu,
nav[aria-label="Seitennavigation"] {
    display: none !important;
}

/* Title picture / banner from config ($seitenbild).
   Im echten Markup heisst der Block .page-image (mit .tucal-aspectratiobox
   darin) und sass bisher als breites Banner ueber unserer Navigation –
   das war der Hauptgrund, warum der Seitenanfang "komisch" gewirkt hat.
   #tucal-titlepicture bleibt fuer aeltere Template-Varianten stehen. */
#tucal-content .page-image,
#tucal-titlepicture,
.tucal-titlepicture {
    display: none !important;
}

/* Der Titel "Fachschaftsrat Wirtschaftswissenschaften" wird auf Mobil
   zusaetzlich ueber dem Inhalt wiederholt – doppelt und unnoetig gross. */
.tucal-site-mobile-toptitle {
    display: none !important;
}

/* Uni-Kopfzeile: Der Orgtitel ist im Original 1.6em und dominiert alles,
   was darunter kommt. Er gehoert zum offiziellen Kopf und bleibt stehen,
   wird aber etwas zurueckgenommen, damit unsere Navigation daneben nicht
   verloren wirkt. */
#tucal-orgtitle div div {
    font-size: 1.15em !important;
    line-height: 1.25em !important;
    font-weight: 600 !important;
}

/* SOS Button */
#tucal-sos,
.tucal-sos {
    display: none !important;
}

/* Skip-to-content link */
#skip-to-content {
    display: none !important;
}

/* Print elements */
.visible-print,
.visible-print-block,
.visible-print-inline,
.visible-print-inline-block {
    display: none !important;
}

/* ====== 2. MAKE THE CONTENT AREA FULL-WIDTH (scoped, leaves header/footer alone) ====== */

/* The content container – force it to be full width */
#tucal-content,
.tucal-content,
#top,
main,
[role="main"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Override Bootstrap container/row/column widths only inside the content area */
#tucal-content .container,
.tucal-content .container,
main .container,
[role="main"] .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#tucal-content .row,
.tucal-content .row,
main .row,
[role="main"] .row {
    margin: 0 !important;
}

#tucal-content .col-sm-9,
#tucal-content .col-md-9,
#tucal-content .col-lg-9,
.tucal-content .col-sm-9,
.tucal-content .col-md-9,
.tucal-content .col-lg-9,
main .col-sm-9,
main .col-md-9,
main .col-lg-9 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* The now-hidden sidebar's empty column, scoped to the content row only */
#tucal-content .row > .col-sm-3:first-child,
.tucal-content .row > .col-sm-3:first-child,
main .row > .col-sm-3:first-child {
    display: none !important;
}

/* ====== 3. BODY RESET ====== */
body {
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    overflow-x: hidden;
}

/* ====== 4. DESIGN SYSTEM – Apple-Style with TU-Rot ====== */

:root {
    --fsr-primary:        #9D0736;
    --fsr-primary-light:  #B9134A;
    --fsr-primary-dark:   #7A052A;
    --fsr-primary-subtle: #FCEEF2;

    --fsr-text:           #1D1D1F;
    --fsr-text-secondary: #6E6E73;
    --fsr-text-tertiary:  #86868B;

    --fsr-bg:             #FFFFFF;
    --fsr-bg-subtle:      #F5F5F7;

    --fsr-border:         #E8E8ED;
    --fsr-border-light:   #F0F0F2;

    --fsr-shadow-sm:      0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --fsr-shadow:         0 4px 16px rgba(0,0,0,0.08);
    --fsr-shadow-lg:      0 8px 30px rgba(0,0,0,0.10);
    --fsr-shadow-hover:   0 8px 25px rgba(0,0,0,0.12);

    --fsr-radius-sm:      8px;
    --fsr-radius:         12px;
    --fsr-radius-lg:      16px;
    --fsr-radius-xl:      20px;

    --fsr-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;

    --fsr-transition:     all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    --fsr-transition-fast: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);

    --fsr-content-max:    1100px;
    --fsr-content-padding: 0 clamp(16px, 5vw, 48px);
}

/* ====== 5. CUSTOM NAVIGATION ====== */
.fsr-nav {
    position: sticky;
    top: 0;
    /* Bewusst unter 1000: Die Aufklappmenues im offiziellen TU-Kopf
       ("Universitaet", "Fakultaeten", ...) liegen auf z-index 1000. Bei
       Gleichstand gewinnt das spaetere Element im HTML - und das ist unsere
       Leiste, die dann quer durch das aufgeklappte Uni-Menue lief. Der
       Uni-Kopf hat hier Vorrang. */
    z-index: 900;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--fsr-border-light);
    padding: 0 clamp(16px, 5vw, 48px);
}

.fsr-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--fsr-content-max);
    margin: 0 auto;
    height: 72px;
}

.fsr-nav-logo {
    display: flex;
    align-items: center;
    gap: 11.2px;
    text-decoration: none !important;
    color: var(--fsr-text) !important;
    font-weight: 700;
    font-size: 18.4px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    border-bottom: none !important;
}

.fsr-nav-logo:hover {
    color: var(--fsr-primary) !important;
    border-bottom: none !important;
}

/* Feste Box + object-fit: contain – so bleibt das Logo auch dann unverzerrt,
   wenn versehentlich eine nicht-quadratische Variante der Datei hochgeladen
   wird (die Kreisform steckt im PNG selbst, nicht in einem border-radius). */
.fsr-nav-logo img {
    height: 44px;
    width: 44px;
    object-fit: contain;
    display: block;
    border-radius: 0;
}

.fsr-nav-links {
    display: flex;
    align-items: center;
    gap: 2.4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fsr-nav-links li {
    padding: 0;
    margin: 0;
}

.fsr-nav-links li::before {
    display: none !important;
}

.fsr-nav-links a {
    display: inline-flex;
    align-items: center;
    padding: 8.8px 13.6px;
    border-radius: 980px;
    font-family: var(--fsr-font);
    font-size: 16px;
    font-weight: 500;
    color: var(--fsr-text-secondary) !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: var(--fsr-transition-fast);
    white-space: nowrap;
}

/* Zwischenbreiten: lieber etwas enger setzen als umbrechen lassen. */
@media (max-width: 1150px) and (min-width: 769px) {
    .fsr-nav-links a { font-size: 14.7px; padding: 8px 9.6px; }
    .fsr-nav-logo { font-size: 16px; }
    .fsr-nav-logo img { height: 38px; width: 38px; }
}

.fsr-nav-links a:hover {
    color: var(--fsr-text) !important;
    background: var(--fsr-bg-subtle);
    border-bottom: none !important;
}

.fsr-nav-links a.active {
    color: var(--fsr-primary) !important;
    background: var(--fsr-primary-subtle);
}

/* Mobile nav toggle */
.fsr-nav-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--fsr-text);
    font-size: 24px;
    line-height: 1;
}

@media (max-width: 768px) {
    .fsr-nav-toggle {
        display: flex;
    }
    .fsr-nav-links {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 8px 16px 16px;
        border-bottom: 1px solid var(--fsr-border);
        box-shadow: var(--fsr-shadow);
    }
    .fsr-nav-links.open {
        display: flex;
    }
    .fsr-nav-links a {
        padding: 10.4px 12px;
        width: 100%;
    }
}

/* ====== 6. CONTENT WRAPPER ====== */
.fsr-content {
    max-width: var(--fsr-content-max);
    margin: 0 auto;
    padding: var(--fsr-content-padding);
    font-family: var(--fsr-font);
}

/* ====== 7. TYPOGRAPHY ====== */
.fsr-content,
.fsr-content p,
.fsr-content li,
.fsr-content td {
    font-family: var(--fsr-font);
    color: var(--fsr-text);
    line-height: 1.7;
    letter-spacing: -0.01em;
    font-size: 16px;
}

.fsr-content h1 {
    font-size: 38.4px;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--fsr-text);
    margin: 32px 0 12px;
    line-height: 1.12;
}

.fsr-content h2 {
    font-size: 25.6px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--fsr-text);
    margin: 40px 0 9.6px;
    line-height: 1.2;
}

.fsr-content h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 24px 0 8px;
}

.fsr-content h4 {
    font-size: 16.8px;
    font-weight: 600;
    margin: 19.2px 0 6.4px;
}

.fsr-content a {
    color: var(--fsr-primary);
    text-decoration: none;
    transition: var(--fsr-transition-fast);
}

.fsr-content a:hover {
    color: var(--fsr-primary-light);
}

.fsr-content hr {
    border: none;
    height: 1px;
    background: var(--fsr-border);
    margin: 40px 0;
}

.fsr-content ul {
    padding-left: 0;
    list-style: none;
}

.fsr-content ul li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.6em;
}

.fsr-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fsr-primary);
}

.fsr-content img {
    border-radius: var(--fsr-radius);
    max-width: 100%;
    height: auto;
}

/* ====== 8. HERO ====== */
.fsr-hero {
    text-align: center;
    padding: 64px 16px 32px;
    max-width: 720px;
    margin: 0 auto;
}

.fsr-hero h1 {
    font-size: clamp(32px, 5vw, 44.8px);
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-bottom: 0.5em;
    line-height: 1.1;
}

.fsr-hero p {
    font-size: 17.6px;
    color: var(--fsr-text-secondary);
    line-height: 1.7;
}

/* ====== 9. CARDS ====== */
.fsr-card {
    background: var(--fsr-bg);
    border-radius: var(--fsr-radius);
    box-shadow: var(--fsr-shadow-sm);
    border: 1px solid var(--fsr-border-light);
    padding: 24px;
    transition: var(--fsr-transition);
}

.fsr-card:hover {
    box-shadow: var(--fsr-shadow-hover);
    transform: translateY(-2px);
}

.fsr-card--subtle {
    background: var(--fsr-bg-subtle);
    border: none;
    box-shadow: none;
}

.fsr-card--subtle:hover {
    background: #EDEDF0;
    box-shadow: none;
    transform: none;
}

/* ====== 10. GRIDS ====== */
.fsr-grid { display: grid; gap: 20px; }
.fsr-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fsr-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fsr-grid--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

@media (max-width: 768px) {
    .fsr-grid--2, .fsr-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) and (min-width: 769px) {
    .fsr-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ====== 11. QUICK-ACCESS CARDS ====== */
.fsr-quickcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 20px;
    text-decoration: none !important;
    color: var(--fsr-text) !important;
    cursor: pointer;
}
.fsr-quickcard:hover { color: var(--fsr-primary) !important; }

.fsr-quickcard-icon {
    font-size: 32px;
    margin-bottom: 12px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fsr-primary-subtle);
    border-radius: var(--fsr-radius);
    transition: var(--fsr-transition);
}
.fsr-quickcard:hover .fsr-quickcard-icon {
    background: var(--fsr-primary);
    color: white;
    transform: scale(1.08);
}
.fsr-quickcard-title { font-weight: 600; font-size: 15.2px; margin-bottom: 4px; }
.fsr-quickcard-desc { font-size: 13.1px; color: var(--fsr-text-secondary); line-height: 1.4; }

/* ====== 12. ACCORDION/NEWS ====== */
.tucbox-panel {
    border-radius: var(--fsr-radius) !important;
    border: 1px solid var(--fsr-border-light) !important;
    box-shadow: var(--fsr-shadow-sm) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}
.tucbox-panel .panel-heading {
    background: var(--fsr-bg-subtle) !important;
    border-bottom: 1px solid var(--fsr-border) !important;
    padding: 16px 20px !important;
}
.tucbox-panel .panel-title {
    font-family: var(--fsr-font) !important;
    font-size: 17.6px !important;
    font-weight: 600 !important;
    color: var(--fsr-text) !important;
    margin: 0 !important;
}
.tucbox-panel .panel-body { padding: 12px 20px !important; }
.tucbox-collapse { border-bottom: 1px solid var(--fsr-border-light) !important; }
.tucbox-collapse:last-child { border-bottom: none !important; }
.tucbox-collapse-heading a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: var(--fsr-text) !important;
    text-decoration: none !important;
    padding: 8px 4px !important;
    border-radius: var(--fsr-radius-sm) !important;
    transition: var(--fsr-transition-fast) !important;
}
.tucbox-collapse-heading a:hover {
    background: var(--fsr-bg-subtle) !important;
    color: var(--fsr-primary) !important;
}

/* ====== 13. BADGE ====== */
.fsr-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.65em;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    background: var(--fsr-primary-subtle);
    color: var(--fsr-primary);
}

/* ====== 14. CTA / INSTAGRAM ====== */
.fsr-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--fsr-bg-subtle);
    border-radius: var(--fsr-radius);
    margin: 32px 0;
    text-decoration: none !important;
    transition: var(--fsr-transition);
}
.fsr-cta:hover { background: #EDEDF0; transform: translateY(-1px); }
.fsr-cta img { width: 44px; height: 44px; border-radius: var(--fsr-radius-sm); }
.fsr-cta-text { font-size: 15.2px; font-weight: 500; color: var(--fsr-text); }
.fsr-cta-text span { display: block; font-size: 13.1px; font-weight: 400; color: var(--fsr-text-secondary); margin-top: 2px; }

/* ====== 15. CONTACT CARDS ====== */
.fsr-contact-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px; }
.fsr-contact-icon {
    font-size: 24px;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--fsr-primary-subtle);
    border-radius: var(--fsr-radius-sm);
    flex-shrink: 0;
}
.fsr-contact-info h4 { margin: 0 0 4px 0 !important; font-size: 13.1px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: var(--fsr-text-secondary) !important; font-weight: 500 !important; }
.fsr-contact-info p { margin: 0 !important; font-size: 16px; color: var(--fsr-text); }

/* ====== 16. GLOSSAR ====== */
.fsr-glossar-nav {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 16px; background: var(--fsr-bg-subtle);
    border-radius: var(--fsr-radius);
    margin-bottom: 24px;
    position: sticky; top: 73px; z-index: 100;
    border: 1px solid var(--fsr-border-light);
}
.fsr-glossar-nav a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--fsr-radius-sm);
    font-weight: 600; font-size: 14.4px;
    color: var(--fsr-text-secondary) !important;
    text-decoration: none !important;
    transition: var(--fsr-transition-fast);
}
.fsr-glossar-nav a:hover { background: var(--fsr-primary); color: white !important; }
.fsr-glossar-search {
    width: 100%; padding: 14px 20px;
    border: 1px solid var(--fsr-border); border-radius: var(--fsr-radius);
    font-family: var(--fsr-font); font-size: 16px; color: var(--fsr-text);
    background: var(--fsr-bg); margin-bottom: 24px;
    transition: var(--fsr-transition-fast); outline: none;
}
.fsr-glossar-search:focus { border-color: var(--fsr-primary); box-shadow: 0 0 0 3px rgba(177,18,38,0.1); }
.fsr-glossar-search::placeholder { color: var(--fsr-text-tertiary); }
.fsr-glossar-letter { font-size: 24px; font-weight: 700; color: var(--fsr-primary); margin: 32px 0 12px; padding-bottom: 6.4px; border-bottom: 2px solid var(--fsr-primary-subtle); }
.fsr-glossar-term { padding: 14px 16px; border-radius: var(--fsr-radius-sm); margin-bottom: 8px; transition: var(--fsr-transition-fast); border: 1px solid transparent; }
.fsr-glossar-term:hover { background: var(--fsr-bg-subtle); border-color: var(--fsr-border-light); }
.fsr-glossar-term strong { color: var(--fsr-text); font-weight: 600; }
.fsr-glossar-term span { color: var(--fsr-text-secondary); }
.fsr-glossar-section.hidden { display: none; }

/* ====== 17. MEMBERS GRID ====== */
.fsr-members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; padding: 16px 0; }
.fsr-member-card {
    background: var(--fsr-bg); border-radius: var(--fsr-radius);
    box-shadow: var(--fsr-shadow-sm); border: 1px solid var(--fsr-border-light);
    overflow: hidden; transition: var(--fsr-transition); cursor: pointer;
}
.fsr-member-card:hover { box-shadow: var(--fsr-shadow-hover); transform: translateY(-3px); }
.fsr-member-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: var(--fsr-transition); }
.fsr-member-card:hover .fsr-member-img { transform: scale(1.03); }
.fsr-member-img-wrapper { overflow: hidden; position: relative; }
.fsr-member-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7) 100%);
    opacity: 0; transition: var(--fsr-transition);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px; color: white;
}
.fsr-member-card:hover .fsr-member-overlay, .fsr-member-card.active .fsr-member-overlay { opacity: 1; }
.fsr-member-overlay-referat { font-size: 13.1px; font-weight: 600; margin-bottom: 2.4px; }
.fsr-member-overlay-studiengang { font-size: 12.5px; opacity: 0.9; }
.fsr-member-overlay-meta { font-size: 11.5px; opacity: 0.7; margin-top: 5.6px; }
.fsr-member-info { padding: 12px 16px; text-align: center; }
.fsr-member-name { font-weight: 600; font-size: 14.7px; color: var(--fsr-text); margin: 0; }
.fsr-member-role { font-size: 12.5px; color: var(--fsr-text-secondary); margin-top: 2.4px; }

@media (max-width: 500px) { .fsr-members-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ====== 18. TOOL CARDS ====== */
.fsr-tool-card { display: flex; flex-direction: column; height: 100%; }
.fsr-tool-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fsr-tool-card-icon { font-size: 24px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--fsr-primary-subtle); border-radius: var(--fsr-radius-sm); flex-shrink: 0; }
.fsr-tool-card h4 { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; }
.fsr-tool-card p { font-size: 14.4px; color: var(--fsr-text-secondary); flex-grow: 1; }
.fsr-link-btn { display: inline-flex; align-items: center; gap: 5.6px; font-size: 14.1px; font-weight: 500; color: var(--fsr-primary) !important; text-decoration: none !important; transition: var(--fsr-transition-fast); }
.fsr-link-btn:hover { gap: 8.8px; color: var(--fsr-primary-light) !important; }
.fsr-link-btn::after { content: '→'; transition: var(--fsr-transition-fast); }

/* ====== 19. TOPICS GRID ====== */
.fsr-topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; list-style: none !important; padding: 0 !important; margin: 24px 0 !important; }
.fsr-topics-grid li { padding: 0 !important; margin: 0 !important; }
.fsr-topics-grid li::before { display: none !important; }
.fsr-topic-item { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--fsr-bg-subtle); border-radius: var(--fsr-radius-sm); transition: var(--fsr-transition-fast); }
.fsr-topic-item:hover { background: #EDEDF0; }
.fsr-topic-icon { font-size: 20px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fsr-topic-text strong { display: block; font-size: 14.4px; margin-bottom: 2.4px; }
.fsr-topic-text span { font-size: 12.8px; color: var(--fsr-text-secondary); }

/* ====== 20. LINK LIST ====== */
.fsr-link-list { list-style: none !important; padding: 0 !important; }
.fsr-link-list li { padding: 0 !important; margin: 0 !important; }
.fsr-link-list li::before { display: none !important; }
.fsr-link-list a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--fsr-radius-sm); color: var(--fsr-text) !important; text-decoration: none !important; font-weight: 500; transition: var(--fsr-transition-fast); }
.fsr-link-list a::before { content: '→'; color: var(--fsr-primary); font-weight: 600; transition: var(--fsr-transition-fast); }
.fsr-link-list a:hover { background: var(--fsr-bg-subtle); color: var(--fsr-primary) !important; }
.fsr-link-list a:hover::before { transform: translateX(4px); }

/* ====== 21. BUTTON OVERRIDES ====== */
.btn-default.btn-block {
    background: var(--fsr-bg-subtle) !important;
    border: 1px solid var(--fsr-border) !important;
    color: var(--fsr-text) !important;
    padding: 14px 24px !important;
    border-radius: var(--fsr-radius) !important;
    font-family: var(--fsr-font) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: var(--fsr-transition) !important;
}
.btn-default.btn-block:hover {
    background: var(--fsr-primary) !important;
    border-color: var(--fsr-primary) !important;
    color: white !important;
    box-shadow: var(--fsr-shadow) !important;
}

/* ====== 22. PAGINATION ====== */
.pagination { list-style: none !important; display: flex !important; justify-content: center !important; padding: 0 !important; margin: 32px 0 !important; gap: 4px !important; }
.pagination li a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 36px !important; height: 36px !important; border-radius: var(--fsr-radius-sm) !important; font-size: 14.4px !important; font-weight: 500 !important; color: var(--fsr-text-secondary) !important; text-decoration: none !important; transition: var(--fsr-transition-fast) !important; }
.pagination li a:hover { background: var(--fsr-bg-subtle) !important; color: var(--fsr-text) !important; }
.pagination li.active a { background: var(--fsr-primary) !important; color: white !important; }
.pagination li.disabled a { opacity: 0.3 !important; pointer-events: none !important; }

/* ====== 23. ANIMATIONS ====== */
.fsr-fade-in { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.25,0.1,0.25,1), transform 0.6s cubic-bezier(0.25,0.1,0.25,1); }
.fsr-fade-in.fsr-visible { opacity: 1; transform: translateY(0); }
.fsr-fade-in-children > * { opacity: 0; transform: translateY(12px); transition: opacity 0.5s cubic-bezier(0.25,0.1,0.25,1), transform 0.5s cubic-bezier(0.25,0.1,0.25,1); }
.fsr-fade-in-children.fsr-visible > *:nth-child(1) { transition-delay: 0s; }
.fsr-fade-in-children.fsr-visible > *:nth-child(2) { transition-delay: 0.06s; }
.fsr-fade-in-children.fsr-visible > *:nth-child(3) { transition-delay: 0.12s; }
.fsr-fade-in-children.fsr-visible > *:nth-child(4) { transition-delay: 0.18s; }
.fsr-fade-in-children.fsr-visible > *:nth-child(5) { transition-delay: 0.24s; }
.fsr-fade-in-children.fsr-visible > *:nth-child(6) { transition-delay: 0.30s; }
.fsr-fade-in-children.fsr-visible > *:nth-child(7) { transition-delay: 0.36s; }
.fsr-fade-in-children.fsr-visible > *:nth-child(8) { transition-delay: 0.42s; }
.fsr-fade-in-children.fsr-visible > *:nth-child(9) { transition-delay: 0.48s; }
.fsr-fade-in-children.fsr-visible > * { opacity: 1; transform: translateY(0); }

/* ====== 24. RESPONSIVE IMAGE ====== */
.responsive-img { max-width: 100%; height: auto; display: block; margin: 24px auto; border-radius: var(--fsr-radius); }

/* ====== 25. SECTION HELPERS ====== */
.fsr-section { margin: 40px 0; }

/* ====== 26. CUSTOM FOOTER ====== */
.fsr-footer {
    background: var(--fsr-bg-subtle);
    border-top: 1px solid var(--fsr-border-light);
    padding: 32px clamp(16px, 5vw, 48px);
    margin-top: 64px;
    text-align: center;
    font-family: var(--fsr-font);
}
.fsr-footer-inner {
    max-width: var(--fsr-content-max);
    margin: 0 auto;
}
.fsr-footer p {
    font-size: 13.6px;
    color: var(--fsr-text-tertiary);
    margin: 4px 0;
}
.fsr-footer a {
    color: var(--fsr-text-secondary);
    text-decoration: none;
    transition: var(--fsr-transition-fast);
}
.fsr-footer a:hover { color: var(--fsr-primary); }

/* ====== 27. SMOOTH SCROLL ====== */
html { scroll-behavior: smooth; }