/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.0
*/


/* ============================================================
   FONTS
   ============================================================ */

@font-face {
    font-family: 'Marcellus SC';
    src: url('fonts/MarcellusSC-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Majoris';
    src: url('fonts/MajorisRegular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jellyka CuttyCupcakes';
    src: url('fonts/JellykaCuttyCupcakes.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* source-code-pro-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/source-code-pro-v31-latin-regular.woff2') format('woff2');
}

/* source-code-pro-italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Code Pro';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/source-code-pro-v31-latin-italic.woff2') format('woff2');
}

/* source-code-pro-500 - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/source-code-pro-v31-latin-500.woff2') format('woff2');
}

/* source-code-pro-500italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Code Pro';
    font-style: italic;
    font-weight: 500;
    src: url('fonts/source-code-pro-v31-latin-500italic.woff2') format('woff2');
}

/* source-sans-3-300 - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/source-sans-3-v19-latin-300.woff2') format('woff2');
}

/* source-sans-3-300italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 300;
    src: url('fonts/source-sans-3-v19-latin-300italic.woff2') format('woff2');
}

/* source-sans-3-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/source-sans-3-v19-latin-regular.woff2') format('woff2');
}

/* source-sans-3-italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/source-sans-3-v19-latin-italic.woff2') format('woff2');
}

/* source-sans-3-500 - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/source-sans-3-v19-latin-500.woff2') format('woff2');
}

/* source-sans-3-600 - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/source-sans-3-v19-latin-600.woff2') format('woff2');
}


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
    --mw-red:        #A91E17;
    --mw-red-deep:   #7A1410;
    --mw-red-bright: #C8362D;
    --mw-ink:        #070707;
    --mw-gray-500:   #898384;
    --mw-gray-300:   #BFBCBA;
    --mw-paper:      #F9F9F9;
    --mw-white:      #FFFFFF;
    --border-1:      #E5E2DE;

    --font-display: "Marcellus SC", serif;
    --font-sans:    "Source Sans 3", system-ui, sans-serif;
    --font-accent:  "Majoris", "Source Sans 3", sans-serif;
    --font-mono:    "Source Code Pro", ui-monospace, monospace;
    --font-script:  "Jellyka CuttyCupcakes", cursive;
}


/* ============================================================
   HEADING COLORS
   Prevents GP body color setting from cascading into headings.
   ============================================================ */

.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main h6 {
    color: var(--mw-ink);
}


/* ============================================================
   H1 + FLOURISH
   Defined here instead of GP customizer to support clamp()
   fluid scaling and the inline flourish span relationship.
   ============================================================ */

/* H1 — fluid scale from 36px (mobile) to 65px (desktop) */
/* Example: "Full cycle technology solutions." */
h1,
.display--xl {
    font-family:    var(--font-display);
    font-size:      clamp(36px, 5vw, 65px);
    font-weight:    400;
    line-height:    1.05;
    letter-spacing: 0.06em;
    color:          var(--mw-ink);
    margin:         0;
}

/* Flourish — inline script accent, scales with parent H1 automatically */
/* Usage: <h1>Full cycle technology <span class="flourish">solutions</span>.</h1> */
.flourish {
    font-family: var(--font-script);
    font-size:   1.5em;
    color:       var(--mw-red);
}


/* ============================================================
   H2 — DISPLAY STYLE
   Large section heading set in GP customizer.
   Defined here only to prevent GP body color inheritance.
   ============================================================ */

/* display--l — visual H2 match applied to <p> tags
   Use when a heading look is needed without semantic H2 weight.
   Example: "Full cycle. One point of contact."
   Example: "Let's talk about your next project." */
.display--l {
    font-family:    var(--font-display);
    font-size:      clamp(26px, 3.5vw, 40px);
    font-weight:    400;
    line-height:    1.05;
    letter-spacing: 0.06em;
    color:          var(--mw-ink);
    margin:         0;
}


/* ============================================================
   EYEBROW
   Small all-caps label. Used as <p> for decorative labels,
   or as <h2> for section headings that need SEO weight
   but eyebrow visual treatment.
   Example <p>: "Independent technology consulting"
   Example <h2>: "Services", "Work", "Get in Touch"
   ============================================================ */

.eyebrow,
h2.eyebrow {
    font-family:    var(--font-display);
    font-size:      12px;
    font-weight:    400;
    letter-spacing: 0.22em;
    line-height:    1;
    text-transform: uppercase;
    color:          var(--mw-red);
    margin:         0 0 16px;
    padding:        9px 0;
}


/* ============================================================
   HERO TRIAD
   Sub-line beneath H1, displays the three service pillars.
   Sized relative to H1 so it scales with clamp automatically.
   Example: "Diagnosis · Implementation · Adoption"
   ============================================================ */

.mw-hero__triad {
    display:        block;
    font-family:    var(--font-display);
    font-size:      0.58em;
    font-weight:    400;
    letter-spacing: 0.14em;
    line-height:    1.4;
    color:          var(--mw-gray-500);
    margin-top:     0.5em;
}


/* ============================================================
   HERO LIST
   Service names in the aside card.
   Example: "Systems Integration and Migration"
   ============================================================ */

.mw-hero__list,
.mw-hero__list.wp-block-list {
    font-family:  var(--font-display);
    font-size:    22px;
    font-weight:  400;
    letter-spacing: 0.04em;
    line-height:  1.5;
    color:        var(--mw-ink);
    list-style:   none;
    margin:       0 0 18px;
    padding:      0;
}

.mw-hero__list li,
.mw-hero__list.wp-block-list li {
    list-style: none;
    padding:    9px 0;
    border-bottom: 1px solid rgba(7,7,7,0.08);
}

.mw-hero__list li:last-child,
.mw-hero__list.wp-block-list li:last-child {
    border-bottom: none;
}


/* ============================================================
   SERVICE CARD META + CTA
   ============================================================ */

/* Scope/engagement tag — "Full cycle · scoped to outcome" */
.mw-svc__meta {
    font-family:    var(--font-mono);
    font-size:      10px;
    font-weight:    400;
    letter-spacing: 0.06em;
    line-height:    1;
    text-transform: uppercase;
    color:          var(--mw-gray-500);
}

/* Card CTA link — "Schedule a call →" */
.mw-svc__cta {
    font-family:     var(--font-sans);
    font-size:       12px;
    letter-spacing:  0.04em;
    color:           var(--mw-ink);
    text-decoration: none;
}


/* ============================================================
   LINKS
   ============================================================ */

a {
    text-decoration-color:     var(--mw-red);
    text-underline-offset:     4px;
    text-decoration-thickness: 1.5px;
}


/* ============================================================
   SEPARATOR
   ============================================================ */

.wp-block-separator {
    border:     none;
    border-top: 1px solid var(--border-1);
    margin:     10px 0;
}

.wp-block-separator.is-style-wide {
    width:        100%;
    margin-left:  auto;
    margin-right: auto;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

/* Red underline on nav links, visible on hover and active page */
.main-navigation a {
    text-decoration:           underline;
    text-decoration-color:     transparent;
    text-underline-offset:     4px;
    text-decoration-thickness: 1.5px;
    transition:                text-decoration-color 200ms;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    text-decoration-color: var(--mw-red);
}


/* ============================================================
   SCREEN READER ONLY
   Hides elements visually while keeping them readable
   by search engines and assistive technology.
   ============================================================ */

.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
}

/* Service card column — flex column keeps bottom row pinned */
.mw-svc {
    display:        flex;
    flex-direction: column;
}

/* Separator inside service card — pushes bottom row to baseline */
.mw-svc .wp-block-separator {
    margin-top: auto;
}