/*
 Theme Name:   Victor Child
 Theme URI:    https://samuelesteri.com
 Description:  Custom child theme for Victor Community Support Services.
 Author:       SAM - EVERYTHING HAPPENS FOR A REASON
 Author URI:   https://samuelesteri.com
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  victor-child
*/

/* ═══════════════════════════════════════════════════
   DESIGN SYSTEM - CSS Custom Properties
   Values TBD from Simona's Figma file.
   ═══════════════════════════════════════════════════ */

:root {

    /* ── Colors (extracted from PROPOSTA_4 design) ──
       Brand = navy + yellow. Contrast-safe pairings only:
         navy text on yellow      8.23:1  PASS
         white text on navy      15.43:1  PASS
         yellow text on navy      8.23:1  PASS
       NEVER use:
         white on yellow / yellow on white  1.87:1  FAIL
       Rule: text on yellow is always navy.
    */
    --victor-primary:       #012255;  /* navy */
    --victor-primary-dark:  #011A40;  /* darker navy for hover */
    --victor-primary-light: #E8EDF5;  /* pale navy tint for backgrounds */
    --victor-accent:        #FAAF16;  /* yellow */
    --victor-accent-dark:   #E09D0A;  /* darker yellow for hover */
    --victor-accent-light:  #FFF4DB;  /* pale yellow tint */

    --victor-text:          #012255;  /* body text uses navy, not pure black */
    --victor-text-light:    #3A4A6B;
    --victor-text-muted:    #6B7689;
    --victor-text-on-navy:  #FFFFFF;
    --victor-text-on-yellow:#012255;  /* enforced: navy only */
    --victor-lightblue:       #546B8D;

    --victor-bg:            #FFFFFF;
    --victor-bg-alt:        #F7F8FA;
    --victor-bg-navy:       #012255;
    --victor-bg-yellow:     #FAAF16;
     
    

    --victor-border:        #E0E0E0;
    --victor-border-light:  #F0F0F0;

    --victor-success:       #2E7D5B;
    --victor-error:         #C62828;
    --victor-warning:       #E09D0A;

    --victor-focus-color:   #012255;  /* navy focus ring, high contrast on white/yellow */

    /* ── Typography (Lato, from design tokens) ── */
    --victor-font-primary:   'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --victor-font-heading:   'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --victor-fs-xs:    1rem;   /* 12px */
    --victor-fs-sm:    1.1rem;  /* 14px */
    --victor-fs-base:  1.2rem;      /* 16px */
    --victor-fs-md:    1.35rem;  /* 18px */
    --victor-fs-lg:    1.4rem;   /* 20px */
    --victor-fs-xl:    1.5rem;    /* 24px */
    --victor-fs-2xl:   2rem;      /* 32px */
    --victor-fs-3xl:   2.5rem;    /* 40px */
    --victor-fs-4xl:   3rem;      /* 48px */

    --victor-fw-regular:  400;
    --victor-fw-medium:   500;
    --victor-fw-semibold: 600;
    --victor-fw-bold:     700;
    --victor-fw-black:     900;

    --victor-lh-tight:    1.2;
    --victor-lh-normal:   1.5;
    --victor-lh-relaxed:  1.75;

    /* ── Spacing Scale ── */
    --victor-space-xs:   0.25rem;  /* 4px  */
    --victor-space-sm:   0.5rem;   /* 8px  */
    --victor-space-md:   1rem;     /* 16px */
    --victor-space-lg:   1.5rem;   /* 24px */
    --victor-space-xl:   2rem;     /* 32px */
    --victor-space-2xl:  3rem;     /* 48px */
    --victor-space-3xl:  4rem;     /* 64px */
    --victor-space-4xl:  6rem;     /* 96px */

    /* ── Layout ──
       --victor-container-max: maximum content width (centered).
                               Below this viewport, padding kicks in.
                               Above, you see equal gutters left/right.
       --victor-container-pad: inner side padding of the container.
    */
    --victor-container-max:   1200px;
    --victor-container-narrow: 900px;
    --victor-container-pad:   1.5rem;       /* 24px mobile */
    --victor-radius-sm:  4px;
    --victor-radius-md:  8px;
    --victor-radius-lg:  12px;
    --victor-radius-full: 9999px;

    /* ── Shadows ── */
    --victor-shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
    --victor-shadow-md:  0 4px 12px rgba(0,0,0,0.08);
    --victor-shadow-lg:  0 8px 24px rgba(0,0,0,0.12);

    /* ── Transitions ── */
    --victor-transition: 0.2s ease;
}


/* ═══════════════════════════════════════════════════
   BASE RESETS & GLOBAL STYLES
   ═══════════════════════════════════════════════════ */

body {
    font-family: var(--victor-font-primary);
    font-size: var(--victor-fs-base);
    line-height: var(--victor-lh-normal);
    color: var(--victor-text);
    background-color: var(--victor-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--victor-font-heading);
    font-weight: var(--victor-fw-bold);
    line-height: var(--victor-lh-tight);
    color: var(--victor-text);
}


/* ═══════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════ */

/* Screen reader only utility */
.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible baseline */
:focus-visible {
    outline: 3px solid var(--victor-focus-color);
    outline-offset: 2px;
}

/* Minimum tap target for mobile (WCAG 2.1 AA) */
a, button, input, select, textarea {
    min-height: 44px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ═══════════════════════════════════════════════════
   CONTAINER
   ═══════════════════════════════════════════════════ */

.victor-container {
    width: 100%;
    max-width: var(--victor-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--victor-container-pad);
    padding-right: var(--victor-container-pad);
}

.victor-container--narrow {
    max-width: var(--victor-container-narrow);
}

.victor-container--full {
    max-width: 1600;
     margin-left: auto;
    margin-right: auto;
    padding-left: var(--victor-container-pad);
    padding-right: var(--victor-container-pad);
}


/* ═══════════════════════════════════════════════════
   COMPONENT PLACEHOLDERS
   Styles below are structural only.
   Visual design applied after Simona's Figma.
   ═══════════════════════════════════════════════════ */

/* Location card (archive grid item) */
.victor-location-card {
    background: var(--victor-bg);
    border: 1px solid var(--victor-border);
    border-radius: var(--victor-radius-md);
    padding: var(--victor-space-lg);
    transition: box-shadow var(--victor-transition);
}
.victor-location-card:hover,
.victor-location-card:focus-within {
    box-shadow: var(--victor-shadow-md);
}

/* Service card */
.victor-service-card {
    background: var(--victor-bg);
    border: 1px solid var(--victor-border);
    border-radius: var(--victor-radius-md);
    padding: var(--victor-space-lg);
    text-align: center;
    transition: box-shadow var(--victor-transition);
}
.victor-service-card:hover,
.victor-service-card:focus-within {
    box-shadow: var(--victor-shadow-md);
}

/* JotForm embed container */
.victor-jotform-wrap {
    width: 100%;
    max-width: var(--victor-container-narrow);
    margin: var(--victor-space-xl) auto;
}

/* CTA button base */
.victor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--victor-space-sm) var(--victor-space-lg);
    font-family: var(--victor-font-primary);
    font-size: var(--victor-fs-base);
    font-weight: var(--victor-fw-semibold);
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--victor-radius-md);
    cursor: pointer;
    transition: background-color var(--victor-transition),
                color var(--victor-transition),
                border-color var(--victor-transition);
}
.victor-btn--primary {
    background-color: var(--victor-primary);
    color: var(--victor-text-on-navy);
}
.victor-btn--primary:hover,
.victor-btn--primary:focus-visible {
    background-color: var(--victor-primary-dark);
    color: var(--victor-text-on-navy);
}
.victor-btn--accent {
    background-color: var(--victor-accent);
    color: var(--victor-text-on-yellow); /* navy, contrast-safe */
}
.victor-btn--accent:hover,
.victor-btn--accent:focus-visible {
    background-color: var(--victor-accent-dark);
    color: var(--victor-text-on-yellow);
}
.victor-btn--secondary {
    background-color: transparent;
    color: var(--victor-primary);
    border-color: var(--victor-primary);
}
.victor-btn--secondary:hover,
.victor-btn--secondary:focus-visible {
    background-color: var(--victor-primary);
    color: var(--victor-text-on-navy);
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Mobile-first: base = mobile (320px+)
   ═══════════════════════════════════════════════════ */

/* Tablet (768px+) */
@media (min-width: 48rem) {
    :root {
        --victor-container-pad: 2rem;       /* 32px */
    }
}

/* Desktop (1024px+) */
@media (min-width: 64rem) {
    :root {
        --victor-container-pad: 2.5rem;     /* 40px */
    }
}

/* Wide (1280px+) */
@media (min-width: 80rem) {
    :root {
        --victor-container-pad: 3rem;       /* 48px */
    }
}