/* =========================================================
   NYOSA V2 — GLOBAL CSS PATCH
   Keep your existing global.css and append this at the END.
   This normalizes responsive behavior without styling page-specific cards.
========================================================= */

/* =========================================================
   NYOSA V2
   GLOBAL
========================================================= */

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

html {
    scroll-behavior: smooth;
}

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

    background: #f5f8fc;
    color: #07164a;

    min-height: 100vh;
}

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

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

button {
    cursor: pointer;
}

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

main {
    width: 100%;
}

.container {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
}

:root {

    --nyosa-blue: #0d5eea;
    --nyosa-dark: #07164a;
    --nyosa-text: #18233f;

    --nyosa-light-blue: #eef5ff;

    --green: #45b86b;
    --purple: #7250d8;
    --orange: #ff8b25;
    --red: #ed5870;
    --cyan: #18aabd;

    --border: #e3eaf4;

    --white: #ffffff;

    --shadow:
        0 8px 30px rgba(18, 46, 90, 0.07);

    --radius: 18px;
}

html {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    font-size: 16px;
    line-height: 1.45;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

input,
button,
select,
textarea {
    max-width: 100%;
}

main {
    min-width: 0;
}

.container {
    min-width: 0;
}

/* Avoid long headings and URLs pushing mobile layouts wider than the screen. */
h1,
h2,
h3,
h4,
p,
a,
button,
label,
span {
    overflow-wrap: anywhere;
}

/* Keep this generic: detailed card styling belongs in index.css. */
@media (max-width: 700px) {
    body {
        font-size: 14px;
    }

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