/*
Theme Name: Merseyside Police Federation
Theme URI: https://merpolfed.org.uk
Author: W Web Design & Hosting
Author URI: https://wwebdesign.co.uk
Description: Lightweight custom theme for Merseyside Police Federation. Code-registered ACF blocks, no page builder, no build step.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mpf
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
    /* Brand */
    --mpf-navy:        #304c84;   /* primary brand: nav bar, headings, buttons */
    --mpf-navy-dark:   #25406f;   /* copyright bar, hovers */
    --mpf-navy-darker: #1d3358;
    --mpf-blue:        #1863dc;   /* bright link / accent blue */
    --mpf-blue-dark:   #0f4fb5;
    --mpf-teal:        #0a9aa6;   /* secondary accent: promo cards, CTA buttons */
    --mpf-teal-dark:   #07818b;

    /* Neutrals */
    --mpf-text:        #212121;
    --mpf-muted:       #4e4b66;
    --mpf-heading:     #233a66;
    --mpf-bg:          #ffffff;
    --mpf-bg-alt:      #f4f6f9;   /* light section background */
    --mpf-card-bg:     #ffffff;
    --mpf-border:      #e4e8ef;
    --mpf-line:        #d9dee7;

    /* Layout */
    --mpf-content-max: 1200px;
    --mpf-content-wide:1400px;
    --mpf-gutter:      24px;
    --mpf-radius:      10px;
    --mpf-radius-sm:   6px;
    --mpf-shadow:      0 6px 24px rgba(31, 45, 80, .08);
    --mpf-shadow-lg:   0 14px 40px rgba(31, 45, 80, .14);

    /* Typography — system stack, matching the original Kadence theme */
    --mpf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mpf-font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Chrome heights */
    --mpf-topbar-h:    40px;
    --mpf-header-h:    96px;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--mpf-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--mpf-text);
    background: var(--mpf-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: var(--mpf-blue); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--mpf-blue-dark); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mpf-font-head);
    color: var(--mpf-heading);
    line-height: 1.2;
    margin: 0 0 .6em;
    font-weight: 700;
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.4em; }
li { margin-bottom: .4em; }

/* ============================================================
   Layout helpers
   ============================================================ */
.mpf-container {
    width: 100%;
    max-width: var(--mpf-content-max);
    margin-inline: auto;
    padding-inline: var(--mpf-gutter);
}
.mpf-container--wide { max-width: var(--mpf-content-wide); }

.mpf-section { padding-block: clamp(48px, 6vw, 84px); }
.mpf-section--alt { background: var(--mpf-bg-alt); }

.mpf-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mpf-teal);
    margin-bottom: .6em;
}

.mpf-section__head { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); }
.mpf-section__head h2 { margin-bottom: .3em; }
.mpf-section__head p { color: var(--mpf-muted); font-size: 1.05rem; }

/* ============================================================
   Buttons
   ============================================================ */
.mpf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .8em 1.6em;
    border-radius: var(--mpf-radius-sm);
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.mpf-btn:hover { transform: translateY(-1px); }
.mpf-btn--primary { background: var(--mpf-navy); color: #fff; }
.mpf-btn--primary:hover { background: var(--mpf-navy-dark); color: #fff; }
.mpf-btn--blue { background: var(--mpf-blue); color: #fff; }
.mpf-btn--blue:hover { background: var(--mpf-blue-dark); color: #fff; }
.mpf-btn--teal { background: var(--mpf-teal); color: #fff; }
.mpf-btn--teal:hover { background: var(--mpf-teal-dark); color: #fff; }
.mpf-btn--ghost { background: transparent; color: var(--mpf-navy); border-color: var(--mpf-navy); }
.mpf-btn--ghost:hover { background: var(--mpf-navy); color: #fff; }
.mpf-btn--white { background: #fff; color: var(--mpf-navy); }
.mpf-btn--white:hover { background: #f0f3f8; color: var(--mpf-navy); }

/* ============================================================
   Default page content (the_content / wysiwyg)
   ============================================================ */
.mpf-prose { color: var(--mpf-text); }
.mpf-prose > *:first-child { margin-top: 0; }
.mpf-prose h2 { margin-top: 1.6em; }
.mpf-prose h3 { margin-top: 1.4em; }
.mpf-prose img { border-radius: var(--mpf-radius-sm); margin: 1.2em 0; }
.mpf-prose a { text-decoration: underline; }
.mpf-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.mpf-prose th, .mpf-prose td { border: 1px solid var(--mpf-border); padding: .6em .8em; text-align: left; }
.mpf-prose th { background: var(--mpf-bg-alt); }

/* ============================================================
   Notice / alert box (e.g. temporary service notices)
   ============================================================ */
.mpf-notice {
    display: flex;
    gap: 16px;
    margin: 0 0 28px;
    padding: 20px 24px;
    border-radius: var(--mpf-radius);
    background: #fff8e6;
    border: 1px solid #f3d98a;
    border-left: 6px solid #e6a700;
    box-shadow: var(--mpf-shadow);
}
.mpf-notice--info    { background: #eaf3fb; border-color: #aacdf0; border-left-color: var(--mpf-blue); }
.mpf-notice--success { background: #eafaef; border-color: #a4d6b0; border-left-color: #1f9d57; }
.mpf-notice__icon { font-size: 1.6rem; line-height: 1.2; flex: 0 0 auto; }
.mpf-notice__body { flex: 1; }
.mpf-notice__body > :first-child { margin-top: 0; }
.mpf-notice__body > :last-child { margin-bottom: 0; }
.mpf-notice__body h3 { color: #8a5a00; margin: 0 0 .5em; font-size: 1.2rem; }
.mpf-notice--info .mpf-notice__body h3 { color: var(--mpf-navy); }
.mpf-notice__phone {
    font-size: 1.5rem; font-weight: 800; color: var(--mpf-navy); margin: .4em 0;
}
.mpf-notice__phone a { color: var(--mpf-navy); text-decoration: none; }
.mpf-notice__phone a:hover { text-decoration: underline; }

/* Screen-reader only */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}

/* ============================================================
   WordPress default alignments
   ============================================================ */
.alignfull  { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.alignwide  { max-width: var(--mpf-content-wide); }
.aligncenter{ margin-inline: auto; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }