/*!
Theme Name: NMR
Theme URI: https://www.nmr.co.uk/
Description: National Milk Records — bespoke WordPress theme (Tailwind v4 + Alpine.js).
Author: Speed Agency
Version: 1.0.0
*/

@import "tailwindcss";

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

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

/* The offer page's gated body (restore payload v42+) lives in post_content,
   which no @source glob scans — Tailwind only compiles classes it can see in
   theme files, so the table header sat white-on-navy in the markup and
   navy-on-navy on screen. These are the classes that body uses and nothing in
   the theme's own templates does. Keep this list in step with the
   /investors/offer-for-nmr entry in _restore_data.json. */
@source inline("align-top");
@source inline("mt-1");
@source inline("overflow-x-auto");
@source inline("px-6");
@source inline("space-y-6");
@source inline("table-auto");
@source inline("w-1/3");
@source inline("text-night-500/50");
@source inline("text-night-500/70");
@source inline("md:prose-p:mt-0");
@source inline("md:prose-xl");

/* -------------------------------------------------------------------------- */
/*  Brand web fonts                                                           */
/* -------------------------------------------------------------------------- */

@font-face {
    font-family: "Helvetica Now Display";
    src: url("../fonts/HelveticaNowDisplay-ExtraBold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Helvetica Now Display";
    src: url("../fonts/HelveticaNowDisplay-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Helvetica Now Text";
    src: url("../fonts/HelveticaNowText-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Helvetica Now Text";
    src: url("../fonts/HelveticaNowText-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Mohave";
    src: url("../fonts/Mohave-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Mohave";
    src: url("../fonts/Mohave-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------------- */
/*  Design tokens                                                             */
/* -------------------------------------------------------------------------- */

@theme {
    /* Typography — names match nmr.co.uk's Tailwind config */
    --font-sans: "Helvetica Now Text", ui-sans-serif, system-ui, sans-serif;     /* body */
    --font-display: "Helvetica Now Display", ui-sans-serif, system-ui, sans-serif; /* headings */
    --font-digital: "Mohave", ui-sans-serif, system-ui, sans-serif;             /* nav / accents */
    /* Aliases kept for theme-authored partials */
    --font-body: var(--font-sans);
    --font-accent: var(--font-digital);
    --default-font-family: var(--font-sans);

    /* Night — primary dark navy */
    --color-night-50: #f4f5f7;
    --color-night-100: #e3e4e9;
    --color-night-200: #b6b9c4;
    --color-night-300: #3f465d;
    --color-night-400: #262d44;
    --color-night-500: #13192e;
    --color-night-600: #0f1426;
    --color-night-700: #0b0f1c;
    --color-night-800: #070a13;
    --color-night-900: #03050a;

    /* Mint — primary brand green */
    --color-mint-50: #e6fdf4;
    --color-mint-100: #b9f8e1;
    --color-mint-200: #80f2cc;
    --color-mint-300: #4dedb8;
    --color-mint-400: #1ae8a5;
    --color-mint-500: #00e69d;
    --color-mint-600: #00b87e;
    --color-mint-700: #00a671;
    --color-mint-800: #008055;
    --color-mint-900: #00543a;

    /* Raspberry — accent */
    --color-raspberry-50: #ffe5ed;
    --color-raspberry-100: #ffb8cd;
    --color-raspberry-200: #ff8aab;
    --color-raspberry-300: #ff5c89;
    --color-raspberry-400: #ff2e67;
    --color-raspberry-500: #ff004f;
    --color-raspberry-600: #c7003e;
    --color-raspberry-700: #99002f;
    --color-raspberry-800: #6b0021;
    --color-raspberry-900: #3d0013;

    /* Sky — secondary light blue */
    --color-sky-50: #f5fbfd;
    --color-sky-100: #ecf7fc;
    --color-sky-200: #d3edf7;
    --color-sky-300: #b6e1f0;
    --color-sky-400: #a3daed;
    --color-sky-500: #8cd1e9;
    --color-sky-600: #3e94c1;
    --color-sky-700: #12a6ca;
    --color-sky-800: #0a7a98;
    --color-sky-900: #005a78;

    /* Sun — yellow highlight */
    --color-sun-50: #f8f7f6;
    --color-sun-100: #fff8c2;
    --color-sun-200: #fff299;
    --color-sun-300: #fdee5c;
    --color-sun-400: #fdef2e;
    --color-sun-500: #fcec09;
    --color-sun-600: #d4c700;
    --color-sun-700: #a89c00;
    --color-sun-800: #7a7100;
    --color-sun-900: #4d4700;

    /* Ghost — cool off-white surfaces */
    --color-ghost-50: #f8fafb;
    --color-ghost-100: #f1f4f6;
    --color-ghost-200: #e7e8ea;
    --color-ghost-300: #d6d9de;

    /* Semantic aliases */
    --color-primary: var(--color-night-500);
    --color-secondary: var(--color-mint-500);
    --color-accent: var(--color-raspberry-500);

    /* Shadows */
    --shadow-card: 0 10px 30px -12px rgb(19 25 46 / 0.18);
    --shadow-card-hover: 0 20px 40px -12px rgb(19 25 46 / 0.28);
    --shadow-nav: 0 2px 20px -6px rgb(19 25 46 / 0.12);

    /* Radii */
    --radius-card: 1rem;
}

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

@layer base {
    body {
        font-family: var(--font-body);
        color: var(--color-night-500);
        background-color: #ffffff;
    }

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

/* -------------------------------------------------------------------------- */
/*  Components                                                                */
/* -------------------------------------------------------------------------- */

@layer components {
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 9999px;
        padding-inline: 1.75rem;
        padding-block: 0.85rem;
        font-family: var(--font-accent);
        font-weight: 500;
        font-size: 1rem;
        line-height: 1;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }

    .btn-primary {
        background-color: var(--color-mint-500);
        color: var(--color-night-500);
    }
    .btn-primary:hover {
        background-color: var(--color-mint-600);
    }

    .btn-dark {
        background-color: var(--color-night-500);
        color: #ffffff;
    }
    .btn-dark:hover {
        background-color: var(--color-night-400);
    }

    .btn-accent {
        background-color: var(--color-raspberry-500);
        color: #ffffff;
    }
    .btn-accent:hover {
        background-color: var(--color-raspberry-600);
    }

    .btn-outline {
        background-color: transparent;
        color: var(--color-night-500);
        box-shadow: inset 0 0 0 2px var(--color-night-500);
    }
    .btn-outline:hover {
        background-color: var(--color-night-500);
        color: #ffffff;
    }

    .btn-outline-light {
        background-color: transparent;
        color: #ffffff;
        box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.5);
    }
    .btn-outline-light:hover {
        background-color: #ffffff;
        color: var(--color-night-500);
    }

    .container-tight {
        width: 100%;
        max-width: 80rem;
        margin-inline: auto;
        padding-inline: 1.5rem;
    }

    .eyebrow {
        font-family: var(--font-accent);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.8125rem;
        color: var(--color-mint-700);
    }

    /* WordPress pagination (the_posts_pagination) */
    .pagination .nav-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
    .pagination .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        height: 2.75rem;
        padding-inline: 0.85rem;
        border-radius: 9999px;
        font-family: var(--font-accent);
        font-weight: 500;
        color: var(--color-night-500);
        background: var(--color-ghost-100);
        transition: all 200ms ease;
    }
    .pagination .page-numbers:hover {
        background: var(--color-mint-500);
    }
    .pagination .page-numbers.current {
        background: var(--color-night-500);
        color: #fff;
    }
}

/* Custom utilities ported from nmr.co.uk's Tailwind config */
@utility bg-half-ghost {
    background: linear-gradient(90deg, #fff 0%, #fff 50%, #f8fafb 50%);
}
@utility absolute-center {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Mobile sub-menu plus/minus icon: hide the vertical bar when open */
[data-primary-menu-sub-toggle].is-open .plus-minus-v {
    display: none;
}

/* Multiline truncation helper */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}