/* =========================================================
   GLOBAL RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: #f6f8fc;
    color: #172033;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    /* FIX: a single very long unbreakable token (e.g. a long
       placeholder-less number, long URL, etc.) could otherwise
       force horizontal scroll on narrow phones. */
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #eff6ff;

    --text: #172033;
    --text-soft: #607086;
    --text-muted: #8793a5;

    --border: #e4e9f0;
    --border-dark: #d5dce7;

    --white: #ffffff;

    --page: #f6f8fc;

    --success: #16a34a;

    --danger: #dc2626;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    --shadow-sm:
        0 4px 16px rgba(20, 40, 70, 0.05);

    --shadow-md:
        0 12px 35px rgba(20, 40, 70, 0.08);

    --container: 1180px;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(
        var(--container),
        calc(100% - 40px)
    );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: sticky;
    top: 0;

    z-index: 1000;

    background: rgba(255, 255, 255, 0.96);

    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(12px);
}

.header-inner {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;
}


/* LOGO */

.site-logo {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    font-size: 18px;
    font-weight: 800;
}

.logo-mark {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: var(--primary);

    color: white;

    font-size: 17px;
    font-weight: 800;

    flex-shrink: 0;
}

.logo-text {
    white-space: nowrap;
}


/* NAV */

.main-navigation {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    padding: 9px 13px;

    border-radius: 8px;

    color: var(--text-soft);

    font-size: 14px;
    font-weight: 650;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
    background: var(--primary-light);
    color: var(--primary);
}


/* MOBILE MENU BUTTON */

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    padding: 9px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: white;

    cursor: pointer;

    flex-shrink: 0;
}

.mobile-menu-button span {
    display: block;

    height: 2px;

    margin: 5px 0;

    background: var(--text);

    border-radius: 5px;
}


/* MOBILE NAV */

.mobile-navigation {
    display: none;

    background: white;

    border-bottom: 1px solid var(--border);

    padding: 8px 20px;

    /* FIX: stick under the sticky header and sit above page
       content so it doesn't get pushed around / overlapped
       when opened. */
    position: sticky;
    top: 0;
    z-index: 999;
}

.mobile-navigation a {
    display: block;

    padding: 12px;

    border-radius: 8px;

    color: var(--text-soft);

    font-size: 14px;
    font-weight: 650;
}

.mobile-navigation a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.mobile-navigation.open {
    display: block;
}


/* =========================================================
   HERO
========================================================= */

.hero-section {
    padding: 65px 0 80px;

    background:
        linear-gradient(
            180deg,
            #edf5ff 0%,
            #f6f8fc 100%
        );
}

.hero-content {
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}

.hero-badge {
    display: inline-flex;

    align-items: center;

    padding: 6px 13px;

    margin-bottom: 17px;

    border-radius: 50px;

    background: #dbeafe;

    color: var(--primary);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.7px;
}

.hero-content h1 {
    margin-bottom: 17px;

    font-size:
        clamp(40px, 5vw, 62px);

    line-height: 1.04;

    letter-spacing: -2.5px;
}

.hero-content p {
    max-width: 650px;

    margin: auto;

    color: var(--text-soft);

    font-size:
        clamp(16px, 2vw, 19px);
}


/* =========================================================
   WEBSITE MAIN LAYOUT
========================================================= */

.website-section {
    padding: 0 0 85px;
}


/*
    IMPORTANT:

    Main content = 1fr
    Sidebar = 320px

    This gives us a professional tools-site layout
    while keeping enough width for calculator content.
*/

.website-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    gap: 30px;

    align-items: start;

    margin-top: -35px;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.main-content {
    min-width: 0;
}


/* =========================================================
   CALCULATOR CARD
========================================================= */

.calculator-card {
    padding: 34px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);
}


/* SECTION HEADING */

.section-heading {
    margin-bottom: 30px;
}

.section-label {
    display: inline-block;

    margin-bottom: 7px;

    color: var(--primary);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.8px;
}

.section-heading h2 {
    margin-bottom: 5px;

    font-size: 27px;

    line-height: 1.25;
}

.section-heading p {
    color: var(--text-soft);

    font-size: 14px;
}


/* =========================================================
   SCALE SELECTOR (NEW)
========================================================= */

.scale-selector {
    margin-bottom: 22px;

    padding: 16px;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    background: #f8fafc;
}

.scale-selector-label {
    display: block;

    margin-bottom: 10px;

    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}

.scale-options {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.scale-option {
    position: relative;

    flex: 1 1 130px;
}

.scale-option input {
    position: absolute;

    opacity: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    cursor: pointer;
}

.scale-option span {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 8px 10px;

    border: 1px solid var(--border-dark);

    border-radius: 9px;

    background: white;

    color: var(--text-soft);

    font-size: 13px;
    font-weight: 700;

    text-align: center;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.scale-option input:checked + span {
    border-color: var(--primary);

    background: var(--primary-light);

    color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10);
}

.scale-option input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}


/* =========================================================
   SEMESTER TABLE
========================================================= */

.semester-table-heading,
.semester-row {
    display: grid;

    grid-template-columns:
        minmax(130px, 1.25fr)
        minmax(100px, 1fr)
        minmax(120px, 1fr)
        44px;

    gap: 14px;

    align-items: center;
}

.semester-table-heading {
    padding: 0 12px 9px;

    color: var(--text-muted);

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


/* ROW */

.semester-row {
    padding: 14px 12px;

    margin-bottom: 11px;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    background: white;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.semester-row:hover {
    border-color: #cbd5e1;

    box-shadow:
        0 5px 18px rgba(20, 40, 70, 0.04);
}


/* SEMESTER TITLE */

.semester-title {
    font-size: 14px;
    font-weight: 750;
}


/* FORM FIELD */

.form-field {
    min-width: 0;
}

.form-field label {
    display: none;

    margin-bottom: 5px;

    color: var(--text-soft);

    font-size: 11px;
    font-weight: 700;
}

.form-field input {
    width: 100%;
    height: 46px;

    padding: 0 12px;

    border: 1px solid var(--border-dark);

    border-radius: 9px;

    outline: none;

    background: white;

    color: var(--text);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* FIX: input has no explicit font-size, so on iOS Safari
   the default inherited size (14-16px depending on zoom)
   can sometimes dip under 16px and trigger an automatic
   zoom-in on focus, which breaks the layout on mobile. */
.form-field input {
    font-size: 16px;
}

.form-field input::placeholder {
    color: #a5afbd;
}

.form-field input:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10);
}

.form-field input.input-error {
    border-color: var(--danger);

    box-shadow:
        0 0 0 3px rgba(220, 38, 38, 0.10);
}


/* REMOVE */

.remove-semester {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: none;

    border-radius: 9px;

    background: #fff1f2;

    color: var(--danger);

    cursor: pointer;

    font-size: 22px;

    line-height: 1;

    transition: 0.2s ease;
}

.remove-semester:hover {
    background: #ffe4e6;
}


/* =========================================================
   ADD SEMESTER
========================================================= */

.add-semester-button {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 16px;

    border: 1px dashed #b8c4d4;

    border-radius: 10px;

    background: #fafbfd;

    color: var(--primary);

    cursor: pointer;

    font-size: 14px;
    font-weight: 750;

    transition: 0.2s ease;
}

.add-semester-button:hover {
    border-color: var(--primary);

    background: var(--primary-light);
}

.plus-icon {
    font-size: 21px;
    line-height: 1;
}


/* =========================================================
   CALCULATE BUTTON
========================================================= */

.calculate-button {
    width: 100%;
    min-height: 52px;

    margin-top: 12px;

    border: none;

    border-radius: 10px;

    background: var(--primary);

    color: white;

    cursor: pointer;

    font-size: 15px;
    font-weight: 750;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.calculate-button:hover {
    background: var(--primary-dark);

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(37, 99, 235, 0.20);
}

.calculate-button:active {
    transform: translateY(0);
}


/* =========================================================
   RESULT
========================================================= */

.result-box {
    margin-top: 25px;

    padding: 28px;

    text-align: center;

    border: 1px solid #bfdbfe;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #f8fbff
        );
}

.result-title {
    color: var(--text-soft);

    font-size: 13px;
    font-weight: 700;
}

.cgpa-result {
    margin: 3px 0;

    color: var(--primary);

    font-size: 52px;
    font-weight: 850;

    line-height: 1.2;

    letter-spacing: -1px;

    /* FIX: allow the big number to shrink instead of
       overflowing its box on very narrow phones. */
    word-break: break-word;
}

.cgpa-scale-tag {
    display: inline-block;

    margin-top: 2px;

    color: var(--text-muted);

    font-size: 12px;
    font-weight: 700;
}

.result-message {
    color: var(--text-soft);

    font-size: 13px;
}


/* =========================================================
   CONTENT CARD
========================================================= */

.content-card {
    margin-top: 28px;

    padding: 38px;

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);
}

.content-card h2 {
    margin-top: 48px;
    margin-bottom: 14px;

    font-size: 27px;

    line-height: 1.25;

    letter-spacing: -0.4px;
}

.content-card h2:first-of-type {
    margin-top: 0;
}

.content-card p {
    margin-bottom: 15px;

    color: var(--text-soft);

    font-size: 15px;
}


/* =========================================================
   FORMULA
========================================================= */

.formula-card {
    margin: 25px 0;

    padding: 25px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background: #f8fafc;

    text-align: center;
}

.formula-title {
    margin-bottom: 8px;

    color: var(--text);

    font-size: 13px;
    font-weight: 750;
}

.formula {
    color: var(--primary);

    font-size: 18px;
    font-weight: 800;

    /* FIX: the formula line is long and used a fixed
       font-size, which could overflow narrow phones. */
    word-break: break-word;
}


/* =========================================================
   STEPS
========================================================= */

.steps-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    margin-top: 24px;
}

.step-card {
    padding: 23px;

    border: 1px solid var(--border);

    border-radius: 13px;

    background: white;
}

.step-number {
    margin-bottom: 12px;

    color: var(--primary);

    font-size: 12px;
    font-weight: 850;
}

.step-card h3 {
    margin-bottom: 7px;

    font-size: 17px;
}

.step-card p {
    margin: 0;

    font-size: 13px;
}


/* =========================================================
   FAQ
========================================================= */

.faq-list {
    margin-top: 20px;

    border-top: 1px solid var(--border);
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-question {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 19px 3px;

    border: none;

    background: transparent;

    color: var(--text);

    text-align: left;

    cursor: pointer;

    font-size: 15px;
    font-weight: 700;
}

.faq-icon {
    flex-shrink: 0;

    color: var(--primary);

    font-size: 21px;

    transition: transform 0.2s ease;
}

.faq-answer {
    display: none;

    padding: 0 3px 19px;
}

.faq-answer p {
    margin: 0;

    font-size: 14px;
}

.faq-item.open .faq-answer {
    display: block;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    min-width: 0;

    position: sticky;

    top: 92px;

    display: flex;

    flex-direction: column;

    gap: 24px;

    /* FIX: on shorter viewports (laptops with small screen
       height, landscape tablets) a tall sticky sidebar could
       get clipped against the viewport with no way to scroll
       within itself. Cap its height and let it scroll. */
    max-height: calc(100vh - 112px);

    overflow-y: auto;
}


/* =========================================================
   ADVERTISEMENT
========================================================= */

.ad-container {
    width: 100%;
}

.ad-label {
    margin-bottom: 7px;

    color: #9aa5b5;

    font-size: 9px;
    font-weight: 700;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}

.ad-box {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: #f9fafc;

    color: #b0b9c5;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.7px;
}

.ad-300 {
    min-height: 250px;
}


/*
    When AdSense code is inserted later,
    remove/replace the placeholder span.
*/


/* =========================================================
   SIDEBAR CARD
========================================================= */

.sidebar-card {
    padding: 20px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: white;

    box-shadow: var(--shadow-sm);
}

.sidebar-heading {
    margin-bottom: 15px;
}

.sidebar-heading > span {
    display: block;

    margin-bottom: 3px;

    color: var(--primary);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.8px;
}

.sidebar-heading h2 {
    font-size: 20px;

    line-height: 1.25;
}


/* =========================================================
   TOOLS LIST
========================================================= */

.tools-list {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.tool-item {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        18px;

    align-items: center;

    gap: 10px;

    padding: 10px 7px;

    border-radius: 9px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.tool-item:hover {
    background: #f5f8fc;

    transform: translateX(2px);
}


/* TOOL ICON */

.tool-icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 10px;
    font-weight: 850;
}


/* TOOL INFO */

.tool-info {
    min-width: 0;

    display: flex;

    flex-direction: column;
}

.tool-info strong {
    overflow: hidden;

    color: var(--text);

    font-size: 13px;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.tool-info small {
    overflow: hidden;

    color: var(--text-muted);

    font-size: 10px;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.tool-arrow {
    color: #a0aaba;

    font-size: 15px;
}


/* =========================================================
   POPULAR TOOLS
========================================================= */

.popular-list {
    list-style: none;
}

.popular-list li {
    border-bottom: 1px solid #edf0f4;
}

.popular-list li:last-child {
    border-bottom: none;
}

.popular-list a {
    display: flex;

    align-items: center;

    padding: 10px 2px;

    color: var(--text-soft);

    font-size: 13px;

    transition: 0.2s ease;
}

.popular-list a::before {
    content: "→";

    margin-right: 8px;

    color: var(--primary);
}

.popular-list a:hover {
    color: var(--primary);
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding: 55px 0 25px;

    background: #111827;

    color: white;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr;

    gap: 50px;

    padding-bottom: 38px;
}

.footer-logo {
    color: white;

    margin-bottom: 15px;
}

.footer-brand p {
    max-width: 340px;

    color: #9ca7b8;

    font-size: 13px;
}

.footer-column {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.footer-column h3 {
    margin-bottom: 6px;

    font-size: 14px;
}

.footer-column a {
    color: #9ca7b8;

    font-size: 13px;

    transition: 0.2s ease;
}

.footer-column a:hover {
    color: white;
}

.footer-bottom {
    padding-top: 22px;

    border-top: 1px solid #293244;

    color: #8792a4;

    font-size: 12px;
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1100px) {

    .website-layout {
        grid-template-columns:
            minmax(0, 1fr)
            290px;

        gap: 24px;
    }

    .container {
        width: min(
            100% - 32px,
            var(--container)
        );
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .website-layout {
        grid-template-columns:
            minmax(0, 1fr)
            270px;

        gap: 20px;
    }

    .calculator-card {
        padding: 25px;
    }

    .content-card {
        padding: 28px;
    }

    .steps-grid {
        grid-template-columns:
            1fr;
    }

    .semester-table-heading,
    .semester-row {
        grid-template-columns:
            minmax(100px, 1fr)
            minmax(85px, 1fr)
            minmax(100px, 1fr)
            42px;
    }

    /* FIX: at this width the 320px/270px sidebar column plus a
       320px-ish tools card starts fighting the main column for
       space and the "2fr" footer brand column gets cramped.
       Give the footer a bit more breathing room here too. */
    .footer-grid {
        gap: 34px;
    }

}


/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media (max-width: 760px) {

    .header-inner {
        min-height: 64px;
    }

    .main-navigation {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

    .hero-section {
        padding: 50px 0 65px;
    }

    .website-layout {
        grid-template-columns: 1fr;

        margin-top: -25px;
    }

    /*
        Sidebar becomes normal content below main content.
        No sticky behavior on smaller screens.
    */

    .sidebar {
        position: static;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        align-items: start;

        /* FIX: sticky-only max-height/overflow rules from the
           desktop sidebar must not carry over once it becomes
           a static, non-scrolling block on tablet/mobile. */
        max-height: none;
        overflow: visible;
    }

    /*
        Tools card gets full width.
    */

    .sidebar-card:first-of-type {
        grid-column: 1 / -1;
    }

    /*
        Ads remain normal responsive blocks.
    */

    .ad-container {
        width: 100%;
    }

    .ad-300 {
        min-height: 250px;
    }

    /* FIX: on tablet the 3-column footer becomes very tight
       (2fr/1fr/1fr across a ~700px container). Switch to two
       columns with the brand block spanning full width. */
    .footer-grid {
        grid-template-columns: 1fr 1fr;

        gap: 30px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-brand p {
        max-width: 100%;
    }

    /* FIX: 3-across scale options got tight around 480-760px
       once combined with the calculator card's smaller
       padding; let them wrap into two rows more gracefully. */
    .scale-option {
        flex: 1 1 140px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

    .container {
        width: calc(100% - 24px);
    }

    .hero-section {
        padding: 42px 0 55px;
    }

    .hero-content h1 {
        font-size: 38px;

        letter-spacing: -1.7px;
    }

    .hero-content p {
        font-size: 15px;
    }


    .website-section {
        padding-bottom: 55px;
    }


    .website-layout {
        gap: 18px;
    }


    .calculator-card {
        padding: 18px;

        border-radius: 14px;
    }


    .section-heading h2 {
        font-size: 23px;
    }


    /*
        On phones, each semester becomes a
        compact card instead of a table row.
    */

    .semester-table-heading {
        display: none;
    }

    .semester-row {
        grid-template-columns:
            1fr 1fr;

        gap: 10px;

        padding: 15px;
    }

    .semester-title {
        grid-column: 1 / -1;

        padding-bottom: 1px;
    }

    .form-field {
        display: flex;

        flex-direction: column;
    }

    .form-field label {
        display: block;
    }

    .remove-semester {
        grid-column: 1 / -1;

        width: 100%;

        height: 38px;

        font-size: 18px;
    }


    .calculate-button {
        min-height: 50px;
    }


    .result-box {
        padding: 24px 15px;
    }

    .cgpa-result {
        font-size: 46px;
    }


    .content-card {
        padding: 23px 18px;

        border-radius: 14px;
    }

    .content-card h2 {
        margin-top: 40px;

        font-size: 23px;
    }


    /*
        Sidebar becomes a single column.
    */

    .sidebar {
        display: flex;

        flex-direction: column;

        gap: 18px;
    }

    .sidebar-card:first-of-type {
        grid-column: auto;
    }


    /*
        On mobile, tools appear before ads.
        This keeps related navigation useful.
    */

    .ad-300 {
        min-height: 250px;
    }


    .footer-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .footer-brand {
        grid-column: auto;
    }

    /* FIX: scale selector should stack to one-per-row on
       small phones instead of squeezing 2-3 across. */
    .scale-options {
        flex-direction: column;
    }

    .scale-option {
        flex: 1 1 auto;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .hero-content h1 {
        font-size: 34px;
    }

    .calculator-card {
        padding: 14px;
    }

    .semester-row {
        padding: 12px;
    }

    .content-card {
        padding: 20px 15px;
    }

    .tool-item {
        padding-left: 3px;
        padding-right: 3px;
    }

    /* FIX: 52px result number plus default padding could
       feel cramped on 320-360px phones; shrink slightly
       further so it never wraps awkwardly. */
    .cgpa-result {
        font-size: 40px;
    }

}


/* =========================================================
   PROFESSIONAL UI REFRESH + SHARED SIDEBAR
   The shared sidebar is rendered by /includes/tools-footer.php.
========================================================= */

body {
    background:
        radial-gradient(circle at 4% 0%, rgba(37, 99, 235, 0.11), transparent 27rem),
        radial-gradient(circle at 96% 16%, rgba(14, 165, 233, 0.10), transparent 24rem),
        #f5f7fb;
}

.site-header {
    background: rgba(255, 255, 255, 0.82);
    border-bottom-color: rgba(226, 232, 240, 0.9);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.logo-mark {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

.nav-link {
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-link:hover {
    transform: translateY(-1px);
}

.hero-section {
    background:
        radial-gradient(circle at 82% 30%, rgba(96, 165, 250, 0.38), transparent 25rem),
        linear-gradient(120deg, #0f172a, #172554 54%, #1d4ed8);
}

.hero-content h1,
.hero-content p {
    color: #ffffff;
}

.hero-content p {
    color: rgba(255, 255, 255, 0.78);
}

.calculator-card,
.content-card,
.sidebar-card {
    border-color: rgba(226, 232, 240, 0.9);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.calculator-card {
    border-top: 3px solid #3b82f6;
}

.calculate-button,
.pe-btn-primary {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    border: 0;
    box-shadow: 0 9px 18px rgba(37, 99, 235, 0.20);
}

.website-layout > .sidebar:not(.site-sidebar) {
    display: none !important;
}

.site-sidebar {
    display: flex !important;
}

.sidebar-feature-card {
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 92% 4%, rgba(255, 255, 255, 0.26), transparent 8rem),
        linear-gradient(145deg, #1d4ed8, #4338ca);
    border: 0;
}

.sidebar-feature-card h2,
.sidebar-feature-card p {
    color: #ffffff;
}

.sidebar-feature-card p {
    margin: 8px 0 18px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 13px;
}

.sidebar-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.72);
}

.sidebar-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 13px;
    font-weight: 750;
}

.sidebar-cta:hover {
    background: rgba(255, 255, 255, 0.24);
}

.sidebar-category-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sidebar-category-links a {
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
}

.sidebar-category-links a:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: var(--primary);
}

.site-footer {
    background: linear-gradient(135deg, #0f172a, #172554);
}


/* =========================================================
   SITE-WIDE RESPONSIVE COMPATIBILITY LAYER
   This is the single shared public stylesheet for the
   homepage, generator pages, and all shared tool pages.
========================================================= */

/* Homepage / legacy-header compatibility */
.header-container {
    width: min(var(--container), calc(100% - 40px));
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.main-nav a {
    padding: 9px 13px;
    border-radius: 8px;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 700;
}

.main-nav a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.page-container {
    width: min(var(--container), calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 70px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 30px;
    align-items: start;
}

.content-box {
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid var(--border);
    border-top: 3px solid #3b82f6;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.content-box h1 {
    margin-bottom: 14px;
    color: #0f172a;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.content-box h2 {
    margin: 42px 0 10px;
    color: #172554;
    font-size: clamp(22px, 2.8vw, 27px);
    line-height: 1.25;
}

.content-box p {
    margin-bottom: 14px;
    color: var(--text-soft);
}

.calculator-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.calculator-list-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 5px 13px rgba(15, 23, 42, 0.035);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.calculator-list-item a:hover {
    transform: translateY(-3px);
    border-color: transparent;
    background: linear-gradient(135deg, #1d4ed8, #4338ca);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.23);
    color: #ffffff;
}

.calculator-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.calculator-info { min-width: 0; }
.calculator-name { display: block; font-size: 14px; font-weight: 800; }
.calculator-desc { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.calculator-list-item a:hover .calculator-desc { color: rgba(255, 255, 255, 0.76); }

.footer-container {
    width: min(var(--container), calc(100% - 40px));
    margin: 0 auto;
    padding: 48px 0;
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(130px, 1fr));
    gap: 32px;
}

.footer-column h3 { margin-bottom: 12px; color: #ffffff; font-size: 17px; }
.footer-column p, .footer-column a { color: rgba(255, 255, 255, 0.68); font-size: 14px; }
.footer-column a { display: block; margin: 7px 0; }
.footer-column a:hover { color: #ffffff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 18px 20px; color: rgba(255,255,255,0.55); text-align: center; font-size: 13px; }

/* Prevent tool UIs, canvases and user-generated output from overflowing. */
.main-content, .calculator-card, .content-card, .content-box { min-width: 0; }
canvas, svg, video, iframe, table, pre { max-width: 100%; }
pre { overflow-x: auto; }
input, select, textarea, button { max-width: 100%; }

/* Avoid rendering below-the-fold informational content until it is needed. */
.content-card { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* FAQ accordion toggles via a JS class change deep inside .content-card.
   content-visibility:auto's containment can keep that update from being
   reflected reliably, so opt this interactive section back into normal
   rendering while the rest of .content-card keeps the performance win. */
.content-card .faq-list {
    content-visibility: visible;
}

@media (max-width: 900px) {
    .page-container { grid-template-columns: 1fr; }
    .page-container > .site-sidebar { position: static; max-height: none; }
    .header-container { width: calc(100% - 32px); }
    .main-nav { flex-wrap: wrap; justify-content: flex-end; }
    .website-layout { grid-template-columns: 1fr; margin-top: -22px; }
    .site-sidebar { position: static; max-height: none; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-sidebar .sidebar-feature-card, .site-sidebar .ad-container { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    html { scroll-padding-top: 72px; }
    .header-container { min-height: 64px; width: calc(100% - 24px); }
    .site-logo { font-size: 16px; }
    .logo-mark { width: 34px; height: 34px; font-size: 15px; }
    .main-nav { gap: 1px; }
    .main-nav a { padding: 7px 8px; font-size: 12px; }
    .page-container { width: calc(100% - 24px); padding: 22px 0 48px; gap: 20px; }
    .content-box, .calculator-card, .content-card { padding: 20px 16px; border-radius: 14px; }
    .calculator-list { grid-template-columns: 1fr; gap: 10px; }
    .calculator-list-item a { min-height: 68px; padding: 12px; }
    .site-sidebar { grid-template-columns: 1fr; gap: 16px; }
    .site-sidebar .sidebar-feature-card, .site-sidebar .ad-container { grid-column: auto; }
    .footer-container { width: calc(100% - 24px); grid-template-columns: 1fr; padding: 36px 0; gap: 24px; }
    .hero-section { padding: 48px 0 66px; }
    .hero-content h1 { font-size: clamp(32px, 10vw, 42px); }
}

/* Shared navigation, formerly duplicated inside page templates. */
.nav-dropdown, .nav-mega-dropdown { position: relative; display: inline-block; }
/* Keep the trigger hovered while the pointer travels down to its menu.
   Desktop mega menus are fixed below the header, so without this bridge the
   small gap could close the menu before a visitor reached its links. */
@media (min-width: 901px) {
    .nav-dropdown::after, .nav-mega-dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        left: -12px;
        width: calc(100% + 24px);
        height: 28px;
    }
}
.nav-dropdown-menu, .mega-menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1100;
    margin-top: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
}
.nav-dropdown-menu { min-width: 210px; padding: 8px; }
.nav-dropdown-menu a, .mega-menu-column a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}
.nav-dropdown-menu a:hover, .mega-menu-column a:hover { background: #eff6ff; color: var(--primary); }
.nav-dropdown.open .nav-dropdown-menu, .nav-dropdown:hover .nav-dropdown-menu { display: block; }
.mega-menu-panel { padding: 20px; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 24px; }
.nav-mega-dropdown.open .mega-menu-panel, .nav-mega-dropdown:hover .mega-menu-panel { display: grid; }
.mega-menu-column-title, .nav-dropdown-group-label { padding: 4px 8px 8px; margin-bottom: 6px; border-bottom: 1px solid #eef2f7; color: #64748b; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.nav-dropdown-group-label:not(:first-child) { margin-top: 6px; padding-top: 10px; }
.breadcrumb-nav { margin-bottom: 14px; color: #64748b; font-size: 13px; }
.breadcrumb-nav a { color: #64748b; }
.breadcrumb-nav a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb-nav span[aria-current] { color: var(--text); font-weight: 700; }

@media (max-width: 900px) {
    .nav-dropdown-menu, .mega-menu-panel { position: static; margin-top: 0; border: 0; border-radius: 0; box-shadow: none; }
    .mega-menu-panel { padding: 0; grid-auto-flow: unset; grid-auto-columns: unset; }
    .nav-mega-dropdown:hover .mega-menu-panel { display: none; }
    .nav-mega-dropdown.open .mega-menu-panel { display: block; }
    .mega-menu-column { margin-bottom: 12px; }
}

/* Keep every desktop mega menu centred in the viewport. Calculator and
   Converter have wider lists, so positioning them beside their link made
   their panels run off-screen on some laptops. */
.mega-menu-panel { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 92px); overflow: auto; }
@media (min-width: 1101px) {
    .nav-mega-dropdown .mega-menu-panel {
        position: fixed;
        top: 72px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}
.tt-game-input-label { display: block; margin: 14px 0 6px; color: #475569; font-size: 14px; font-weight: 700; }
.tt-game-input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 9px; font: inherit; font-size: 16px; text-transform: uppercase; }
.tt-game-input:disabled { cursor: not-allowed; background: #f8fafc; }

@media (max-width: 1100px) {
    .main-navigation { display: none; }
    .mobile-menu-button { display: block; }
    .mobile-navigation { position: fixed; top: 72px; right: 0; left: 0; z-index: 1001; max-height: calc(100vh - 72px); overflow-y: auto; box-shadow: 0 16px 28px rgba(15, 23, 42, 0.14); }
}
@media (min-width: 1101px) { .mobile-navigation.open { display: none; } }
.pdf-file-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 8px 0; padding: 10px; border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc; }
.pdf-file-row span:first-child { min-width: 0; overflow: hidden; }
.pdf-file-row strong, .pdf-file-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-file-row small { color: #64748b; font-size: 12px; }
.pdf-file-row button { margin-left: 4px; padding: 5px 7px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; cursor: pointer; }

/* Compact site-wide tool search in both shared headers. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.header-tool-search { position: relative; display: flex; align-items: center; min-width: 0; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
.header-tool-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.header-tool-search input { width: 170px; min-width: 0; height: 38px; padding: 0 8px 0 12px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; }
.header-tool-search button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--primary); font-size: 21px; cursor: pointer; }
.header-tool-search button:hover { background: var(--primary-light); }
@media (max-width: 1100px) {
    .header-inner { gap: 12px; }
    .header-tool-search { margin-left: auto; }
}
@media (max-width: 900px) {
    .mobile-navigation { top: 64px; max-height: calc(100vh - 64px); }
    .header-tool-search input { width: 138px; }
}
@media (max-width: 480px) {
    .logo-text { display: none; }
    .header-tool-search input { width: 104px; }
}

/* Shared instructions appear on every tool page through tools-footer.php. */
.tool-use-guide { margin-top: 24px; }
.tool-use-steps { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: tool-step; }
.tool-use-steps li { position: relative; min-height: 48px; padding: 12px 12px 12px 54px; border: 1px solid #dbeafe; border-radius: 10px; background: #f8fbff; color: var(--text-soft); }
.tool-use-steps li::before { content: counter(tool-step); counter-increment: tool-step; position: absolute; top: 11px; left: 12px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; }
.tool-use-steps strong { color: var(--text); }

/* Consistent visible focus and respectful animation behaviour across tools. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}