@tailwind base;
@tailwind components;
@tailwind utilities;

/* Reset */
html,
body {
    margin: 0;
    padding: 0;
}

/* Base typography (NYRA-like) */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: #000;
    background-color: #fff;
}

/* =========================================================
   NYRA ROTATING PILL (GLOBAL VERSION)
   ========================================================= */

#whoweare_creativetext {
    background: linear-gradient(-90deg, #0a587b 0%, #b53855 100%);
    padding: 3% 9%;
    border: 3px solid #ffffff;

    border-top-left-radius: 80px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 0px;

    margin-bottom: -3px;
    margin-left: -3px;

    font-family: Helvetica, Arial, sans-serif;
    line-height: 0.95em;

    font-size: 0;

    position: relative;
}

/* rotating text container */
.txt-rotate-keywords {
    display: inline-flex;
    position: relative;
    white-space: nowrap;

    background: inherit;

    transition: width 0.8s cubic-bezier(0.86, 0, 0.07, 1);
    will-change: width;

    transform: translate3d(0, 0, 0);
}

/* actual animated word */
.txt-rotate-keyword {
    display: inline-block;
    color: #ffffff;
    font-size: 56px;
    font-weight: 300;
}

/* mobile behaviour (original site) */
@media screen and (max-width: 479px) {
    .txt-rotate-keywords {
        white-space: normal;
        min-width: 100%;
    }
}

@layer utilities {
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scroll-smooth {
        scroll-behavior: smooth;
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Optional: Custom scrollbar for desktop */
.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #62c0e2, #b53855);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    opacity: 0.8;
}

/* =========================================================
   MOBILE FIXES – ASSESSMENTS PAGE
   ========================================================= */
@media screen and (max-width: 640px) {

    /* Move title box inward on mobile */
    .assessment-title-box {
        left: 16px !important;
    }

    /* Reduce title size on mobile */
    .assessment-title-box h1 {
        font-size: 24px !important;
    }

    /* Make cards single-column on mobile */
    .assessment-grid {
        grid-template-columns: 1fr !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 24px !important;
    }

    /* Reduce extra spacing below hero */
    .assessment-spacing {
        height: 64px !important;
    }
}

.icon-gradient svg {
    fill: url(#icon-gradient-def) !important;
}

/* For browsers that support it */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .icon-gradient {
        background: linear-gradient(to bottom right, rgb(15, 27, 67) 20%, rgb(188, 11, 134) 80%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: inline-block;
    }

    .icon-gradient svg {
        fill: currentColor !important;
    }
}

img {
    max-width: 100%;
}