/*
Theme Name: Calc Expert
Theme URI: https://calc-expert.com
Author: Calc Expert
Description: A lightweight custom WordPress theme for Calc Expert.
Version: 1.0.0
Text Domain: calc-expert
*/


/* =========================
   DESIGN SYSTEM
========================= */

:root {

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

    --ce-text: #0f172a;
    --ce-text-muted: #64748b;

    --ce-white: #ffffff;
    --ce-background: #f8fafc;

    --ce-border: #e2e8f0;

    --ce-radius: 12px;
    --ce-radius-lg: 18px;

    --ce-container: 1180px;

    --ce-shadow:
        0 8px 25px rgba(15, 23, 42, 0.07);
}


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

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--ce-background);

    color: var(--ce-text);

    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}


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

.container {

    width: min(
        var(--ce-container),
        calc(100% - 32px)
    );

    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(--ce-border);

    backdrop-filter: blur(10px);
}


.header-inner {

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* =========================
   LOGO
========================= */

.site-logo {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    text-decoration: none;
}


.logo-mark {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: var(--ce-primary);

    color: var(--ce-white);

    font-size: 20px;

    font-weight: 800;
}


.logo-text {

    font-size: 21px;

    font-weight: 800;

    letter-spacing: -0.4px;

    color: var(--ce-text);
}


.logo-text span {

    color: var(--ce-primary);
}


/* =========================
   NAVIGATION
========================= */

.main-navigation {

    display: flex;

    align-items: center;

    gap: 28px;
}


.main-navigation a {

    padding: 8px 0;

    color: var(--ce-text-muted);

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    transition:
        color 0.2s ease;
}


.main-navigation a:hover {

    color: var(--ce-primary);
}


/* =========================
   MOBILE MENU BUTTON
========================= */

.mobile-menu-toggle {

    display: none;

    width: 42px;
    height: 42px;

    padding: 8px;

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

    border-radius: 10px;

    background: var(--ce-white);

    cursor: pointer;
}


.mobile-menu-toggle span {

    display: block;

    width: 20px;
    height: 2px;

    margin: 4px auto;

    background: var(--ce-text);
}


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

.site-main {

    min-height: 60vh;

    padding: 70px 0;
}


.site-main h1 {

    margin: 0 0 15px;

    font-size: 42px;

    line-height: 1.1;

    letter-spacing: -1px;
}


.site-main p {

    margin: 0;

    color: var(--ce-text-muted);

    font-size: 17px;
}


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

.site-footer {

    margin-top: 50px;

    padding-top: 55px;

    background: #0f172a;

    color: #cbd5e1;
}


.footer-main {

    display: grid;

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

    gap: 45px;

    padding-bottom: 45px;
}


.footer-brand {

    max-width: 360px;
}


.footer-logo {

    display: inline-block;

    color: white;

    font-size: 22px;

    font-weight: 800;

    text-decoration: none;
}


.footer-logo span {

    color: #60a5fa;
}


.footer-brand p {

    margin: 15px 0 0;

    color: #94a3b8;

    font-size: 14px;
}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 9px;
}


.footer-column h3 {

    margin: 0 0 8px;

    color: white;

    font-size: 15px;
}


.footer-column a {

    color: #94a3b8;

    font-size: 14px;

    text-decoration: none;

    transition: color 0.2s ease;
}


.footer-column a:hover {

    color: white;
}


.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);
}


.footer-bottom p {

    margin: 0;

    color: #64748b;

    font-size: 13px;
}


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

@media (max-width: 760px) {

    .container {

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


    .header-inner {

        min-height: 64px;
    }


    .main-navigation {

        display: none;
    }


    .mobile-menu-toggle {

        display: block;
    }


    .site-main {

        padding: 50px 0;
    }


    .site-main h1 {

        font-size: 34px;
    }


    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap: 35px;
    }


    .footer-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }

}


@media (max-width: 480px) {

    .footer-main {

        grid-template-columns: 1fr;
    }

}



/* =========================================================
   CALC EXPERT HOMEPAGE
========================================================= */


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

.hero-section {

    padding: 90px 0 75px;

    background:
        radial-gradient(
            circle at 85% 20%,
            #dbeafe 0,
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );

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


.hero-section .container {

    text-align: center;
}


.hero-eyebrow,
.section-eyebrow {

    display: inline-block;

    margin-bottom: 12px;

    color: var(--ce-primary);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.hero-section h1 {

    max-width: 850px;

    margin: 0 auto;

    font-size: clamp(42px, 6vw, 68px);

    line-height: 1.05;

    letter-spacing: -2.5px;
}


.hero-section h1 span {

    color: var(--ce-primary);
}


.hero-description {

    max-width: 700px;

    margin: 22px auto 30px;

    color: var(--ce-text-muted);

    font-size: 18px;

    line-height: 1.7;
}


/* =========================
   SEARCH
========================= */

.calculator-search {

    display: flex;

    max-width: 700px;

    margin: 0 auto;

    padding: 6px;

    background: var(--ce-white);

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

    border-radius: 14px;

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


.calculator-search input {

    flex: 1;

    min-width: 0;

    padding: 14px 16px;

    border: 0;

    outline: none;

    background: transparent;

    color: var(--ce-text);

    font-size: 15px;
}


.calculator-search input::placeholder {

    color: #94a3b8;
}


.calculator-search button {

    padding: 0 24px;

    min-height: 46px;

    border: 0;

    border-radius: 10px;

    background: var(--ce-primary);

    color: white;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

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


.calculator-search button:hover {

    background: var(--ce-primary-dark);

    transform: translateY(-1px);
}


/* =========================
   POPULAR SEARCH LINKS
========================= */

.hero-popular {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 18px;

    font-size: 13px;
}


.hero-popular span {

    color: var(--ce-text-muted);

    font-weight: 600;
}


.hero-popular a {

    color: var(--ce-primary);

    text-decoration: none;

    font-weight: 600;
}


.hero-popular a:hover {

    text-decoration: underline;
}


/* =========================
   SECTIONS
========================= */

.calculators-section,
.categories-section,
.how-section {

    padding: 80px 0;
}


.section-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 32px;
}


.section-header.centered {

    display: block;

    max-width: 680px;

    margin-left: auto;

    margin-right: auto;

    text-align: center;
}


.section-header h2 {

    margin: 0;

    font-size: 32px;

    line-height: 1.2;

    letter-spacing: -0.8px;
}


.section-header p {

    margin: 12px 0 0;

    color: var(--ce-text-muted);

    font-size: 16px;
}


.section-header > a {

    color: var(--ce-primary);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}


.section-header > a:hover {

    text-decoration: underline;
}


/* =========================
   CALCULATOR CARDS
========================= */

.calculator-grid {

    display: grid;

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

    gap: 18px;
}


.calculator-card {

    display: flex;

    flex-direction: column;

    padding: 25px;

    background: var(--ce-white);

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

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

    text-decoration: none;

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


.calculator-card:hover {

    transform: translateY(-4px);

    border-color: #bfdbfe;

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


.calculator-card-icon {

    width: 50px;

    height: 50px;

    display: grid;

    place-items: center;

    margin-bottom: 20px;

    border-radius: 13px;

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

    color: var(--ce-primary);

    font-size: 17px;

    font-weight: 800;
}


.calculator-card h3 {

    margin: 0 0 8px;

    font-size: 17px;

    line-height: 1.35;
}


.calculator-card p {

    margin: 0 0 20px;

    color: var(--ce-text-muted);

    font-size: 14px;

    line-height: 1.6;
}


.calculator-card a {

    margin-top: auto;

    color: var(--ce-primary);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;
}


.calculator-card a:hover {

    text-decoration: underline;
}


/* =========================
   CATEGORIES
========================= */

.categories-section {

    background: var(--ce-white);

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

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


.category-grid {

    display: grid;

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

    gap: 18px;

    margin-top: 40px;
}


.category-card {

    display: block;

    padding: 28px 24px;

    background: var(--ce-background);

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

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

    text-decoration: none;

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


.category-card:hover {

    transform: translateY(-4px);

    border-color: #bfdbfe;

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


.category-icon {

    width: 50px;

    height: 50px;

    display: grid;

    place-items: center;

    margin-bottom: 20px;

    border-radius: 13px;

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

    color: var(--ce-primary);

    font-size: 20px;

    font-weight: 800;
}


.category-card h3 {

    margin: 0 0 9px;

    font-size: 18px;
}


.category-card p {

    margin: 0 0 20px;

    color: var(--ce-text-muted);

    font-size: 14px;

    line-height: 1.6;
}


.category-card span {

    color: var(--ce-primary);

    font-size: 14px;

    font-weight: 700;
}


/* =========================
   WHY CALC EXPERT
========================= */

.why-section {

    padding: 85px 0;

    background: #eff6ff;
}


.why-content {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 70px;
}


.why-content h2 {

    max-width: 500px;

    margin: 0 0 18px;

    font-size: 38px;

    line-height: 1.15;

    letter-spacing: -1px;
}


.why-content > div > p {

    max-width: 560px;

    margin: 0;

    color: var(--ce-text-muted);

    font-size: 16px;

    line-height: 1.7;
}


/* =========================
   BENEFITS
========================= */

.benefits-grid {

    display: grid;

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

    gap: 18px;
}


.benefit {

    display: flex;

    gap: 14px;

    padding: 20px;

    background: white;

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

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

}


.benefit > strong {

    flex: 0 0 30px;

    width: 30px;

    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #dcfce7;

    color: #16a34a;

    font-size: 15px;
}


.benefit h3 {

    margin: 0 0 5px;

    font-size: 15px;
}


.benefit p {

    margin: 0;

    color: var(--ce-text-muted);

    font-size: 13px;

    line-height: 1.5;
}


/* =========================
   HOW IT WORKS
========================= */

.steps-grid {

    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}


.step {

    position: relative;

    padding: 30px;

    background: white;

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

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


.step > span {

    display: inline-block;

    margin-bottom: 20px;

    color: var(--ce-primary);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;
}


.step h3 {

    margin: 0 0 8px;

    font-size: 18px;
}


.step p {

    margin: 0;

    color: var(--ce-text-muted);

    font-size: 14px;

    line-height: 1.6;
}


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

@media (max-width: 1000px) {

    .calculator-grid {

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


    .category-grid {

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


    .why-content {

        grid-template-columns: 1fr;

        gap: 40px;
    }

}


@media (max-width: 700px) {

    .hero-section {

        padding: 65px 0 55px;
    }


    .hero-section h1 {

        font-size: 42px;

        letter-spacing: -1.5px;
    }


    .hero-description {

        font-size: 16px;
    }


    .calculator-search {

        flex-direction: column;

        padding: 7px;
    }


    .calculator-search input {

        min-height: 48px;
    }


    .calculator-search button {

        width: 100%;
    }


    .section-header {

        align-items: flex-start;

        flex-direction: column;
    }


    .calculators-section,
    .categories-section,
    .how-section,
    .why-section {

        padding: 60px 0;
    }


    .calculator-grid {

        grid-template-columns: 1fr;
    }


    .category-grid {

        grid-template-columns: 1fr;
    }


    .benefits-grid {

        grid-template-columns: 1fr;
    }


    .steps-grid {

        grid-template-columns: 1fr;
    }


    .why-content h2 {

        font-size: 32px;
    }

}


@media (max-width: 480px) {

    .hero-section h1 {

        font-size: 36px;
    }


    .hero-popular {

        flex-direction: column;

        gap: 5px;
    }

}




/* =========================================================
   CALC EXPERT - THEME SYSTEM
   ========================================================= */

:root {
    --ce-bg: #f6f8fb;
    --ce-surface: #ffffff;
    --ce-surface-soft: #f8fafc;

    --ce-text: #172033;
    --ce-text-soft: #5f6b7a;
    --ce-text-muted: #7a8493;

    --ce-border: #e2e7ee;

    --ce-primary: #2563eb;
    --ce-primary-soft: #eaf1ff;

    --ce-header-bg: #ffffff;

    --ce-footer-bg: #0f172a;
    --ce-footer-text: #ffffff;

    --ce-shadow:
        0 18px 50px rgba(15, 23, 42, 0.07);

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


/* =========================================================
   DARK THEME VARIABLES
   ========================================================= */

html[data-theme="dark"] {

    --ce-bg: #0b1220;
    --ce-surface: #111a2b;
    --ce-surface-soft: #172235;

    --ce-text: #f1f5f9;
    --ce-text-soft: #b8c2d1;
    --ce-text-muted: #8d9aae;

    --ce-border: #273449;

    --ce-primary: #60a5fa;
    --ce-primary-soft: #172c4d;

    --ce-header-bg: #0f172a;

    --ce-footer-bg: #070d18;
    --ce-footer-text: #f8fafc;

    --ce-shadow:
        0 18px 50px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   BODY
   ========================================================= */

body {
    background: var(--ce-bg);
    color: var(--ce-text);

    transition: var(--ce-transition);
}


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

.site-header {
    background: var(--ce-header-bg);

    border-bottom-color: var(--ce-border);

    transition: var(--ce-transition);
}


.main-navigation a {
    color: var(--ce-text-soft);
}


.main-navigation a:hover {
    color: var(--ce-primary);
}


/* =========================================================
   THEME TOGGLE
   ========================================================= */

.theme-toggle {
    position: relative;

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

    width: 42px;
    height: 42px;

    margin-left: 14px;

    padding: 0;

    border: 1px solid var(--ce-border);
    border-radius: 11px;

    background: var(--ce-surface-soft);
    color: var(--ce-text);

    cursor: pointer;

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


.theme-toggle:hover {
    border-color: var(--ce-primary);

    color: var(--ce-primary);

    transform: translateY(-1px);
}


.theme-toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 2px;
}


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


/* Light mode */

.theme-icon-moon {
    display: none;
}


/* Dark mode */

html[data-theme="dark"] .theme-icon-sun {
    display: none;
}


html[data-theme="dark"] .theme-icon-moon {
    display: block;
}


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

.site-footer {
    background: var(--ce-footer-bg);
    color: var(--ce-footer-text);
}


/* =========================================================
   GENERAL TRANSITIONS
   ========================================================= */

.site-header,
.site-footer,
.main-navigation a,
.theme-toggle,
body {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


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

@media (max-width: 700px) {

    .theme-toggle {
        width: 40px;
        height: 40px;

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

}