/*
 * CF Calculators – Universal Compatibility Styles (unminified)
 * -------------------------------------------------------------------------
 * This stylesheet consolidates common utility classes and typography rules
 * across all calculators. It is intentionally unminified for easier theme
 * overrides and debugging. It loads AFTER each calculator's own compat.css
 * but BEFORE the selected theme stylesheet, so any declarations here will
 * take precedence over the minified versions yet remain overridable by the
 * theme.
 * -------------------------------------------------------------------------
 */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap');

/* Base resets & typography ------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

body {
    color: #033652; /* deep teal */
    margin: 0;
    background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

/* Utility classes --------------------------------------------------------- */
.block            { display: block !important; }
.flex             { display: flex !important; }
.flex-wrap        { flex-wrap: wrap !important; }
.items-center     { align-items: center !important; }
.justify-between  { justify-content: space-between !important; }
.justify-center   { justify-content: center !important; }
.justify-evenly   { justify-content: space-evenly !important; }
.w-full           { width: 100% !important; }
.hidden           { display: none !important; }

.mx-auto          { margin-left: auto !important; margin-right: auto !important; }
.mt-10            { margin-top: 2.5rem !important; }

.py-10            { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.px-10            { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }

.text-center      { text-align: center !important; }
.text-right       { text-align: right !important; }
.text-riptide     { color: #00b2a4 !important; }
.text-sm          { font-size: 0.875rem !important; }
.text-xl          { font-size: 1.25rem !important; }
.leading-relaxed  { line-height: 1.625rem !important; }
.leading-loose    { line-height: 2rem !important; }
.font-medium      { font-weight: 500 !important; }
.font-bold        { font-weight: 700 !important; }

/* Links ------------------------------------------------------------------- */
a               { color: #00b2a4; text-decoration: none; transition: color 0.2s ease; }
a:hover         { color: #033652; }

/* Responsive helpers ------------------------------------------------------ */
@media screen and (min-width: 640px) {
    /* main           { display: block; margin-left: auto; margin-right: auto; max-width: 1440px; padding: 2.5rem; }
    .sm\:hidden    { display: none !important; }
    .sm\:flex      { display: flex !important; } */
}

@media screen and (min-width: 1024px) {
    .lg\:flex      { display: flex !important; }
    .lg\:w-1\/2    { max-width: 50% !important; }
}

/* Accent Color ------------------------------------------------------------ */
.has-riptide-color {
    color: #00b2a4 !important;
}

/* Buttons & Inputs -------------------------------------------------------- */
button {
    /* background-color: transparent;
    border: none;
    cursor: pointer; */
}

input, select, textarea {
    font-family: inherit;
}