/* ==============================================
   InstaCalculate — custom.css
   All brand & calculator styles go here.
   Organized in sections for easy editing.
================================================

   TABLE OF CONTENTS
   1.  CSS Variables (brand tokens)
   2.  Global base styles
   3.  Typography
   4.  Header & navigation
   5.  Hero section (homepage)
   6.  Category grid (homepage)
   7.  Calculator card grid (homepage)
   8.  "Why InstaCalculate" section
   9.  Footer
   10. Calculator page layout
   11. FAQ section
   12. Related calculators block
   13. Buttons
   14. Utility classes
   15. Responsive (mobile)

   NOTE: Calculator input/result/button styles live in
   the InstaCalculate plugin → assets/front.css
   Do NOT add calculator widget styles here.

================================================ */


/* ──────────────────────────────────────────────
   1. CSS VARIABLES — edit here to retheme site
────────────────────────────────────────────── */
:root {
    --ic-green:        #1a6b3c;   /* primary brand green */
    --ic-green-light:  #e8f5ee;   /* soft green backgrounds */
    --ic-green-dark:   #134f2d;   /* hover states */
    --ic-ink:          #111210;   /* headings */
    --ic-ink2:         #4a4a45;   /* body text */
    --ic-ink3:         #8a8a82;   /* muted / labels */
    --ic-bg:           #f7f6f1;   /* page background */
    --ic-white:        #ffffff;
    --ic-border:       #e2e1d8;
    --ic-radius:       8px;
    --ic-radius-lg:    12px;
    --ic-shadow:       0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
    --ic-font-body:    'DM Sans', sans-serif;
    --ic-font-heading: 'DM Serif Display', serif;
}


/* ──────────────────────────────────────────────
   2. GLOBAL BASE STYLES
────────────────────────────────────────────── */
body {
    background-color: var(--ic-bg) !important;
    font-family: var(--ic-font-body) !important;
    color: var(--ic-ink2) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    -webkit-font-smoothing: antialiased;
}

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

.site-container,
.content-container,
.container {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

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

a {
    color: var(--ic-green);
    text-decoration: none;
    transition: color .15s;
}
a:hover {
    color: var(--ic-green-dark);
    text-decoration: underline;
}


/* ──────────────────────────────────────────────
   3. TYPOGRAPHY
────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ic-font-heading) !important;
    color: var(--ic-ink) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
}

h1 { font-size: clamp(28px, 4vw, 44px) !important; }
h2 { font-size: clamp(22px, 3vw, 32px) !important; }
h3 { font-size: 20px !important; }
h4 { font-size: 17px !important; }

p {
    font-family: var(--ic-font-body);
    color: var(--ic-ink2);
    margin-bottom: 1rem;
}


/* ──────────────────────────────────────────────
   4. HEADER & NAVIGATION
────────────────────────────────────────────── */
.site-header,
#masthead,
.kadence-header {
    background: var(--ic-white) !important;
    border-bottom: 1px solid var(--ic-border) !important;
    box-shadow: none !important;
}

/* Logo text */
.site-branding .site-title,
.kadence-header .site-title,
.header-branding .site-title {
    font-family: var(--ic-font-heading) !important;
    font-size: 22px !important;
    color: var(--ic-ink) !important;
    font-weight: 400 !important;
}

/* Make "Calculate" part green in logo */
.site-title span.logo-accent {
    color: var(--ic-green);
}

/* Nav links */
.main-navigation a,
.primary-menu a,
.kadence-navigation a {
    font-family: var(--ic-font-body) !important;
    font-size: 13px !important;
    color: var(--ic-ink2) !important;
    font-weight: 400 !important;
    letter-spacing: .01em;
}
.main-navigation a:hover,
.primary-menu a:hover {
    color: var(--ic-ink) !important;
    text-decoration: none !important;
}

/* Header CTA button */
.header-cta-btn,
.nav-cta {
    background: var(--ic-green) !important;
    color: #fff !important;
    padding: 7px 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background .15s !important;
}
.header-cta-btn:hover,
.nav-cta:hover {
    background: var(--ic-green-dark) !important;
    color: #fff !important;
    text-decoration: none !important;
}


/* ──────────────────────────────────────────────
   5. HERO SECTION (homepage)
────────────────────────────────────────────── */
.ic-hero {
    text-align: center;
    padding: 72px 24px 56px;
    max-width: 720px;
    margin: 0 auto;
}

.ic-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ic-green-light);
    color: var(--ic-green);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 24px;
    letter-spacing: .03em;
}
.ic-hero__eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--ic-green);
    border-radius: 50%;
    display: inline-block;
}

.ic-hero h1 {
    font-size: clamp(36px, 5vw, 52px) !important;
    margin-bottom: 20px;
    letter-spacing: -.5px;
}
.ic-hero h1 em {
    color: var(--ic-green);
    font-style: italic;
}

.ic-hero__sub {
    font-size: 17px;
    color: var(--ic-ink2);
    max-width: 460px;
    margin: 0 auto 36px;
    font-weight: 300;
    line-height: 1.7;
}

/* Search bar */
.ic-search {
    max-width: 460px;
    margin: 0 auto;
    position: relative;
}
.ic-search input[type="text"],
.ic-search input[type="search"] {
    width: 100%;
    padding: 14px 52px 14px 18px;
    border: 1.5px solid var(--ic-border);
    border-radius: var(--ic-radius);
    font-size: 15px;
    background: var(--ic-white);
    color: var(--ic-ink);
    font-family: var(--ic-font-body);
    outline: none;
    transition: border-color .2s;
}
.ic-search input:focus {
    border-color: var(--ic-green);
}
.ic-search__btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--ic-green);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.ic-search__btn:hover {
    background: var(--ic-green-dark);
}

/* Stats row */
.ic-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.ic-stats__num {
    font-size: 22px;
    font-weight: 600;
    color: var(--ic-ink);
    display: block;
}
.ic-stats__label {
    font-size: 11px;
    color: var(--ic-ink3);
}
.ic-stats__div {
    width: 1px;
    height: 28px;
    background: var(--ic-border);
}


/* ──────────────────────────────────────────────
   6. CATEGORY GRID (homepage)
────────────────────────────────────────────── */
.ic-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ic-ink3);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
}

.ic-cat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 48px;
}

.ic-cat-card {
    background: var(--ic-white);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius);
    padding: 16px 10px;
    text-align: center;
    text-decoration: none !important;
    display: block;
    transition: all .15s;
}
.ic-cat-card:hover {
    border-color: var(--ic-green);
    background: var(--ic-green-light);
    transform: translateY(-2px);
    text-decoration: none !important;
}
.ic-cat-card__icon {
    font-size: 22px;
    display: block;
    margin-bottom: 6px;
}
.ic-cat-card__name {
    font-size: 12px;
    font-weight: 500;
    color: var(--ic-ink);
    display: block;
}
.ic-cat-card__count {
    font-size: 11px;
    color: var(--ic-ink3);
    margin-top: 2px;
    display: block;
}


/* ──────────────────────────────────────────────
   7. CALCULATOR CARD GRID (homepage + archives)
────────────────────────────────────────────── */
.ic-calc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 48px;
}

.ic-calc-card {
    background: var(--ic-white);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius);
    padding: 18px;
    text-decoration: none !important;
    display: block;
    transition: all .15s;
    position: relative;
    overflow: hidden;
}
.ic-calc-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--ic-green);
    opacity: 0;
    transition: opacity .15s;
}
.ic-calc-card:hover {
    border-color: var(--ic-green);
    transform: translateY(-2px);
    box-shadow: var(--ic-shadow);
    text-decoration: none !important;
}
.ic-calc-card:hover::before {
    opacity: 1;
}
.ic-calc-card__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ic-ink);
    margin-bottom: 4px;
    display: block;
}
.ic-calc-card__desc {
    font-size: 12px;
    color: var(--ic-ink3);
    line-height: 1.5;
    margin-bottom: 0;
}
.ic-calc-card__tag {
    display: inline-block;
    font-size: 10px;
    background: var(--ic-green-light);
    color: var(--ic-green);
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 8px;
    font-weight: 500;
}


/* ──────────────────────────────────────────────
   8. WHY INSTACALCULATE SECTION
────────────────────────────────────────────── */
.ic-why {
    background: var(--ic-white);
    border-top: 1px solid var(--ic-border);
    border-bottom: 1px solid var(--ic-border);
    padding: 56px 24px;
    margin: 0 -24px 56px;
}
.ic-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 900px;
    margin: 28px auto 0;
}
.ic-why__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.ic-why__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--ic-radius);
    background: var(--ic-green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ic-why__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ic-ink);
    margin-bottom: 4px;
    font-family: var(--ic-font-body) !important;
}
.ic-why__body {
    font-size: 13px;
    color: var(--ic-ink3);
    line-height: 1.6;
    margin-bottom: 0;
}


/* ──────────────────────────────────────────────
   9. FOOTER
────────────────────────────────────────────── */
.site-footer,
#colophon {
    background: var(--ic-white) !important;
    border-top: 1px solid var(--ic-border) !important;
    padding: 36px 24px !important;
    text-align: center;
}

.site-footer .site-info,
.footer-wrap {
    font-size: 12px;
    color: var(--ic-ink3);
}

.site-footer a {
    color: var(--ic-ink3);
    font-size: 12px;
    margin: 0 10px;
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--ic-green);
}


/* ──────────────────────────────────────────────
   10. CALCULATOR PAGE LAYOUT
────────────────────────────────────────────── */
.is-calculator-page .entry-content,
.is-calculator-page .content-container {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Page title */
.is-calculator-page .entry-title,
.is-calculator-page h1.page-title {
    font-size: clamp(26px, 3.5vw, 38px) !important;
    margin-bottom: 16px !important;
    color: var(--ic-ink) !important;
}

/* Intro paragraph */
.ic-intro {
    font-size: 16px;
    color: var(--ic-ink2);
    line-height: 1.75;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ic-border);
}

/* Calculator wrapper box */
.ic-calculator-box {
    background: var(--ic-white);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    padding: 28px 32px;
    margin-bottom: 36px;
    box-shadow: var(--ic-shadow);
}

/* How to use */
.ic-how-to-use {
    background: var(--ic-green-light);
    border-left: 3px solid var(--ic-green);
    border-radius: 0 var(--ic-radius) var(--ic-radius) 0;
    padding: 16px 20px;
    margin-bottom: 32px;
}
.ic-how-to-use h3 {
    font-size: 14px !important;
    font-family: var(--ic-font-body) !important;
    font-weight: 600 !important;
    color: var(--ic-green) !important;
    margin-bottom: 8px !important;
}
.ic-how-to-use ol {
    margin: 0;
    padding-left: 18px;
}
.ic-how-to-use ol li {
    font-size: 13px;
    color: var(--ic-ink2);
    margin-bottom: 4px;
    line-height: 1.5;
}


/* ──────────────────────────────────────────────
   11. FAQ SECTION
────────────────────────────────────────────── */
.ic-faq {
    margin: 36px 0;
}
.ic-faq h2 {
    font-size: 22px !important;
    margin-bottom: 20px !important;
}
.ic-faq__item {
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius);
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--ic-white);
}
.ic-faq__question {
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--ic-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ic-ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.ic-faq__question::after {
    content: '+';
    font-size: 18px;
    color: var(--ic-ink3);
    flex-shrink: 0;
    transition: transform .2s;
}
.ic-faq__item.open .ic-faq__question::after {
    content: '−';
}
.ic-faq__answer {
    display: none;
    padding: 0 18px 16px;
    font-size: 13px;
    color: var(--ic-ink2);
    line-height: 1.7;
    border-top: 1px solid var(--ic-border);
}
.ic-faq__item.open .ic-faq__answer {
    display: block;
}

/* FAQ schema script (hidden) */
.ic-faq-schema { display: none; }


/* ──────────────────────────────────────────────
   12. RELATED CALCULATORS BLOCK
────────────────────────────────────────────── */
.ic-related {
    margin: 36px 0 0;
    padding-top: 28px;
    border-top: 1px solid var(--ic-border);
}
.ic-related h3 {
    font-size: 16px !important;
    font-family: var(--ic-font-body) !important;
    font-weight: 500 !important;
    color: var(--ic-ink) !important;
    margin-bottom: 14px !important;
}
.ic-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.ic-related__link {
    background: var(--ic-white);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius);
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ic-ink);
    text-decoration: none !important;
    transition: all .15s;
    display: block;
}
.ic-related__link:hover {
    border-color: var(--ic-green);
    background: var(--ic-green-light);
    color: var(--ic-green);
    text-decoration: none !important;
}


/* ──────────────────────────────────────────────
   13. BUTTONS
────────────────────────────────────────────── */
.ic-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--ic-radius);
    font-family: var(--ic-font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none !important;
    border: none;
}
.ic-btn--primary {
    background: var(--ic-green);
    color: #fff !important;
}
.ic-btn--primary:hover {
    background: var(--ic-green-dark);
    color: #fff !important;
}
.ic-btn--outline {
    background: transparent;
    color: var(--ic-green) !important;
    border: 1.5px solid var(--ic-green) !important;
}
.ic-btn--outline:hover {
    background: var(--ic-green-light);
}

/* Kadence default button override */
.wp-block-button__link,
.kb-button {
    background-color: var(--ic-green) !important;
    border-color: var(--ic-green) !important;
    border-radius: var(--ic-radius) !important;
    font-family: var(--ic-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.wp-block-button__link:hover,
.kb-button:hover {
    background-color: var(--ic-green-dark) !important;
    border-color: var(--ic-green-dark) !important;
}


/* ──────────────────────────────────────────────
   14. UTILITY CLASSES
────────────────────────────────────────────── */
.ic-text-center  { text-align: center; }
.ic-text-muted   { color: var(--ic-ink3); }
.ic-text-green   { color: var(--ic-green); }
.ic-bg-white     { background: var(--ic-white); }
.ic-bg-green     { background: var(--ic-green-light); }
.ic-border       { border: 1px solid var(--ic-border); border-radius: var(--ic-radius); }
.ic-p-sm         { padding: 12px 16px; }
.ic-p-md         { padding: 20px 24px; }
.ic-mt-sm        { margin-top: 12px; }
.ic-mt-md        { margin-top: 24px; }
.ic-mt-lg        { margin-top: 40px; }
.ic-mb-sm        { margin-bottom: 12px; }
.ic-mb-md        { margin-bottom: 24px; }
.ic-mb-lg        { margin-bottom: 40px; }
.ic-hidden       { display: none !important; }

/* Breadcrumb */
.ic-breadcrumb {
    font-size: 12px;
    color: var(--ic-ink3);
    margin-bottom: 16px;
}
.ic-breadcrumb a {
    color: var(--ic-ink3);
}
.ic-breadcrumb a:hover {
    color: var(--ic-green);
}
.ic-breadcrumb span {
    margin: 0 6px;
}


/* ──────────────────────────────────────────────
   15. RESPONSIVE — MOBILE
────────────────────────────────────────────── */
@media (max-width: 768px) {

    .ic-cat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .ic-calc-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .ic-why__grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .ic-related__grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .ic-hero {
        padding: 48px 16px 40px;
    }

    .ic-calculator-box {
        padding: 20px 18px;
    }

    .ic-stats {
        gap: 16px;
    }
}

@media (max-width: 480px) {

    .ic-cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ic-calc-grid {
        grid-template-columns: 1fr !important;
    }

    .ic-related__grid {
        grid-template-columns: 1fr !important;
    }

    .ic-stats__div {
        display: none;
    }
}