/**
 * Theme - Main Stylesheet
 *
 * BASE ONLY — CSS variables, reset, typography, container, buttons and the
 * shared pagination block. Never append page or component styles here:
 *   - page styles      -> assets/css/pages/[page-name].css
 *   - component styles -> assets/css/components/[component-name].css
 * (register each in inc/enqueue.php with 'jpd-main' as dependency).
 *
 * @package jpd-theme
 */

/* ─────────────────────────────────────────────
   Design tokens
   TODO: set the brand palette once the project's
   design is confirmed. Never redefine these
   elsewhere — only use them.
───────────────────────────────────────────── */
:root {
    /* Colours */
    --jpd-primary:        #01B496;
    --jpd-primary-light:  #00D4B0;
    --jpd-secondary:      #E8A020;
    --jpd-dark:           #032F3C;
    --jpd-light:          #F5F7FA;
    --jpd-white:          #FFFFFF;
    --jpd-text:           #333333;
    --jpd-text-light:     #666666;
    --jpd-border:         #DDDDDD;
    --jpd-teal:           #01B496;
    

    --jpd-teal-rgb: 1, 180, 150;
    --jpd-dark-green-rgb: 3, 47, 60;

    /* Typography (project fonts get added per design; keep a system fallback) */
    --jpd-font-main:      'Segoe UI', Arial, sans-serif;
    --jpd-font-heading:   var(--jpd-font-main);

    /* Spacing */
    --jpd-spacing-xs:     0.25rem;
    --jpd-spacing-sm:     0.5rem;
    --jpd-spacing-md:     1rem;
    --jpd-spacing-lg:     2rem;
    --jpd-spacing-xl:     4rem;

    /* Container */
    --jpd-container-max:  1200px;
    --jpd-container-pad:  1.5rem;

    /* Transitions */
    --jpd-transition:     all 0.3s ease;
}

/* ─────────────────────────────────────────────
   Reset
───────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-x: none;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--jpd-font-main);
    color: var(--jpd-text);
    background: var(--jpd-white);
    line-height: 1.6;
    overscroll-behavior-x: none;
}

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

/* ─────────────────────────────────────────────
   Typography
───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--jpd-font-heading);
    color: var(--jpd-dark);
    line-height: 1.25;
    margin-bottom: var(--jpd-spacing-md);
}

p {
    margin-bottom: var(--jpd-spacing-md);
}

a {
    color: var(--jpd-primary);
    text-decoration: none;
    transition: var(--jpd-transition);
}

a:hover,
a:focus {
    color: var(--jpd-dark);
}

ul,
ol {
    padding-left: 1.25em;
    margin-bottom: var(--jpd-spacing-md);
}

/* ─────────────────────────────────────────────
   Layout
───────────────────────────────────────────── */
.jpd-container {
    max-width: var(--jpd-container-max);
    margin-inline: auto;
    padding-inline: var(--jpd-container-pad);
}

.jpd-main {
    display: block; /* IE11-safe main */
}

/* Keep footer pinned to viewport bottom on short pages. */
body > .jpd-main {
    flex: 1 0 auto;
    width: 100%;
}

/* ─────────────────────────────────────────────
   Buttons
───────────────────────────────────────────── */
.jpd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px; /* WCAG mobile touch target */
    padding: 0.6em 1.5em;
    border: 2px solid var(--jpd-primary);
    border-radius: 6px;
    background: var(--jpd-primary);
    color: var(--jpd-white);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--jpd-transition);
}

.jpd-btn:hover,
.jpd-btn:focus {
    background: var(--jpd-dark);
    border-color: var(--jpd-dark);
    color: var(--jpd-white);
}

.jpd-btn--secondary {
    background: transparent;
    color: var(--jpd-primary);
}

.jpd-btn--secondary:hover,
.jpd-btn--secondary:focus {
    background: var(--jpd-primary);
    color: var(--jpd-white);
}

/* ─────────────────────────────────────────────
   Shared pagination (site-wide)
   Render with jpd_pagination_html() in helpers.php.
   Listing pages use jpd_listing_pagination_html() which
   wraps the same helper. Keep styles here — do not
   duplicate in page CSS files.
───────────────────────────────────────────── */
.jpd-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: var(--jpd-spacing-lg) 0 0;
}

.jpd-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 0 0.85em;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    color: #444444;
    background: var(--jpd-white);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.jpd-pagination a.page-numbers:hover,
.jpd-pagination a.page-numbers:focus {
    border-color: var(--jpd-secondary, #e8a020);
    color: #1a1a1a;
}

.jpd-pagination .page-numbers.current {
    background: var(--jpd-secondary, #e8a020);
    border-color: var(--jpd-secondary, #e8a020);
    color: var(--jpd-white);
}

.jpd-pagination .page-numbers.dots {
    border: 1px solid #d0d0d0;
    background: var(--jpd-white);
    color: #888888;
    letter-spacing: 0.08em;
}

.jpd-pagination .next,
.jpd-pagination .prev {
    gap: 0.35em;
    min-width: auto;
    padding-inline: 1em;
}

@media (max-width: 900px) {
    .jpd-pagination ul {
        justify-content: center;
    }
}