/*!
Theme Name: Nordicstar
*/

@import 'tailwindcss';

@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms';

@source "./*.php";
@source "./templates/**/*.php";
@source "./woocommerce/**/*.php";

/* --- Fonts ------------------------------------------------------------ */

@font-face {
    font-family: 'Helvetica Now Display';
    src: url('../fonts/helvetica-now/HelveticaNowDisplay-ExtraBold.woff2') format('woff2'),
    url('../fonts/helvetica-now/HelveticaNowDisplay-ExtraBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now Display';
    src: url('../fonts/helvetica-now/HelveticaNowDisplay-Black.woff2') format('woff2'),
    url('../fonts/helvetica-now/HelveticaNowDisplay-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('../fonts/helvetica-now/HelveticaNowText-Regular.woff2') format('woff2'),
    url('../fonts/helvetica-now/HelveticaNowText-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('../fonts/helvetica-now/HelveticaNowText-Bold.woff2') format('woff2'),
    url('../fonts/helvetica-now/HelveticaNowText-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mohave';
    src: url('../fonts/mohave/Mohave-Regular.woff2') format('woff2'),
    url('../fonts/mohave/Mohave-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mohave';
    src: url('../fonts/mohave/Mohave-Medium.woff2') format('woff2'),
    url('../fonts/mohave/Mohave-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* --- Theme tokens ----------------------------------------------------- */

@theme {
    /* Type families */
    --font-sans: 'Helvetica Now Text', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-display: 'Helvetica Now Display', ui-sans-serif, system-ui, sans-serif;
    --font-digital: 'Mohave', ui-sans-serif, system-ui, sans-serif;

    /* Brand palette — "night" (deep navy, primary text/UI) */
    --color-night-50: #eef0f4;
    --color-night-100: #d3d6df;
    --color-night-200: #9aa0b1;
    --color-night-300: #3f465d;
    --color-night-400: #232a45;
    --color-night-500: #13192e;
    --color-night-600: #0d1222;
    --color-night-700: #080b18;

    /* Brand palette — "raspberry" (accent pink/red) */
    --color-raspberry-50: #ffe5ed;
    --color-raspberry-100: #ffb3c8;
    --color-raspberry-300: #ff4d85;
    --color-raspberry-500: #ff004f;
    --color-raspberry-600: #c7003e;
    --color-raspberry-700: #8f002d;

    /* Brand palette — "sky" (mid-teal blue) */
    --color-sky-50: #f5fbfd;
    --color-sky-100: #ecf7fc;
    --color-sky-300: #8cd1e9;
    --color-sky-500: #3e94c1;
    --color-sky-700: #12a6ca;
    --color-sky-900: #0a6b85;

    /* Brand palette — "sun" (warm neutral / yellow accents) */
    --color-sun-50: #f8f7f6;
    --color-sun-100: #fefce8;
    --color-sun-300: #fcec09;
    --color-sun-400: #facc14;
    --color-sun-500: #fedb00;

    /* Accent green — replacement-tags promo */
    --color-mint-500: #00a671;
    --color-sun-700: #a16207;

    /* Brand palette — "meadow" (greens) */
    --color-meadow-300: #00e69d;
    --color-meadow-500: #00a671;
    --color-meadow-700: #48671e;

    /* Neutral / UI */
    --color-ghost-50: #f8fafb;
    --color-ghost-100: #e7e8ea;
    --color-ghost-200: #d1d5db;
    --color-ghost-300: #9ca3af;
    --color-ghost-400: #6b7280;
    --color-ghost-500: #4b5563;
    --color-ghost-600: #374151;
    --color-ghost-700: #1f2937;

    /* Semantic aliases */
    --color-primary: var(--color-night-500);
    --color-secondary: var(--color-raspberry-500);
    --color-tertiary: var(--color-sky-700);
    --color-accent: var(--color-sun-500);

    /* Radii */
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
}

/* --- Base ------------------------------------------------------------- */

@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-ghost-200, currentcolor);
    }

    html {
        font-family: var(--font-sans);
        color: var(--color-night-500);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-display);
        font-weight: 700;
        line-height: 1.15;
        color: var(--color-night-500);
    }

    .prose-ul ul {
        @apply pl-0 ml-5 mt-6 text-sm leading-snug md:text-base;
        list-style-image: url('../images/check.svg');
    }

    .fancy-list{
        list-style-image: url('../images/check.svg');
    }

    .prose-ul ul li {
        margin-top: .5em;
        margin-bottom: .5em;
        padding-left: .375em;
    }

    button{
        cursor: pointer;
    }


    @media (min-width: 1024px) {
        .offices {
            grid-template-areas:"a . ." "b . ." "c d e";
            margin-bottom: -40rem;
            top: -40rem
        }
    }

    .offices ul {
        margin-bottom: 1rem
    }

    .offices a {
        font-weight: 700;
        --tw-text-opacity: 1;
        color: rgb(255 0 79 / var(--tw-text-opacity))
    }

    @media (min-width: 1024px) {
        .offices-location:nth-child(1) {
            grid-area: a
        }

        .offices-location:nth-child(2) {
            grid-area: b
        }

        .offices-location:nth-child(3) {
            grid-area: c
        }

        .offices-location:nth-child(4) {
            grid-area: d
        }

        .offices-location:nth-child(5) {
            grid-area: e
        }

        .offices-location:nth-child(6) {
            grid-area: f
        }
    }
}

/* saModifyBlockOutputs wraps block content in .container, which sits between
   .prose and its first/last elements and defeats the typography plugin's
   first/last-child margin resets — the title-to-copy gap ends up 24px larger
   than live. Unlayered on purpose: prose's margins live in the utilities
   layer, which outranks anything inside @layer base. */
.prose > .container:first-child > :first-child {
    margin-top: 0;
}

.prose > .container:last-child > :last-child {
    margin-bottom: 0;
}

/* --- Buttons ---------------------------------------------------------- */

@utility btn {
    @apply inline-block font-medium tracking-wide uppercase no-underline px-5 py-2.5 text-sm shrink-0
    text-white bg-night-500 border border-night-500
    transition hover:bg-night-300 focus:outline-none focus:ring-4 focus:ring-sky-300/40;
    font-family: var(--font-digital);
    &.primary-btn {
        @apply bg-raspberry-500 text-white border-raspberry-500 hover:bg-raspberry-600;
    }

    &.secondary-btn {
        @apply bg-sun-500 text-night-500 border-sun-500 hover:bg-sun-400;
    }

    &.outline-btn {
        @apply bg-transparent text-night-500 border-night-500 hover:bg-night-500 hover:text-white;
    }
}

@utility primary-btn {
    &.btn {
        @apply bg-raspberry-500 text-white border-raspberry-500 hover:bg-raspberry-600;
    }
}

@utility secondary-btn {
    &.btn {
        @apply bg-sun-500 text-night-500 border-sun-500 hover:bg-sun-400;
    }
}

@layer components {
    .bg-peaks {
        background-image: url('../images/peaks.svg');
    }
}