/*
Theme Name: Spartner Child
Template: twentytwentyfive
Description: Child theme for Twenty Twenty-Five
Version: 1.0.0
Author: Spartner
*/

/* Design Notes: spartner.nl replication */

/*
================================================================================
DETAILED DESIGN NOTES
================================================================================

This child theme replicates the spartner.nl design with template-controlled
structure and scoped CSS styling.

STRUCTURE:

Header (parts/header.html):
- Full-width group (.spartner-header)
- Inner constrained group (max-width 1240px)
- 3-column layout: left logo (200px), center nav (flex-grow), right CTA (200px)
- Site Title as text logo: "Spartner", font-weight 700, size 18px
- Navigation menu (ref:4) with 5 items:
  1. Start met AI → /starten-met-ai
  2. Diensten → /diensten
  3. Cases → /ons-werk
  4. Over ons → /wie-we-zijn
  5. Contact → /contact
- CTA button: "Vrijblijvend consult" → /contact

Hero (templates/front-page.html):
- Full-width group (.spartner-hero)
- Inner constrained (max-width 1200px, centered)
- H1 with explicit line break: "Weg die black box.\n<strong>Gebruik je eigen AI model.</strong>"
- Paragraph width ~65ch
- 3 buttons in a row:
  - Primary: "Vrijblijvend consult" → /contact
  - Secondary: "10 Voorbeelden" → /ai-platform
  - Tertiary: "Bekijk video" → /assets/mind-vergunning-chat-mobile-1770663501176.webm

KEY CSS SELECTORS:

Header:
- .spartner-header: White bg, 72px min-height, sticky top, subtle border-bottom
- .spartner-header__inner: max-width 1240px, padding left/right 24px, height 72px, flex align-center justify-between
- .spartner-header .wp-block-site-title a: Logo text styling (18px, weight 700)
- .spartner-nav: Center navigation, 15px font-size, 600 weight, 24px gap
- .spartner-nav a: color #111, hover underline
- .spartner-header__cta .wp-block-button__link: Dark pill button (#111, border-radius 999px, padding 12px 18px, hover #222)

Hero:
- .spartner-hero: padding 56px 24px 24px, white bg, border-bottom
- .spartner-hero__inner: max-width 1240px, padding left/right 24px
- .spartner-hero h1: clamp(40px, 4vw, 64px), line-height 1.05, weight 700
- .spartner-hero h1 strong: Weight 800, display block (heavier second line)
- .spartner-hero p: Max-width 65ch, color #666
- .spartner-hero__buttons: Flex center, 1rem gap
- Primary button: #111 bg, 14px 24px padding, 8px border-radius
- Secondary button: Outlined, transparent bg, 1px border
- Tertiary button: Text link style, underline decoration

Design Principles:
- Minimal !important usage (only where Twenty Twenty-Five forces override)
- Scoped selectors targeting specific components
- Consistent spacing via clamp() and relative units
- Hover transitions: color shift, underline, translateY, box-shadow
- Dark palette: #111 primary, #2a2a2a hover, #666 muted text

================================================================================
*/

/* ==========================================================================
   Base Typography
   ========================================================================== */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #1a1a1a;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ==========================================================================
   Header Styles
   ========================================================================== */

.spartner-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: 72px;
    display: flex;
    align-items: center;
}

.spartner-header__inner {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

.spartner-header .wp-block-columns {
    margin: 0;
    align-items: center;
    width: 100%;
}

/* Logo/Site Title */
.spartner-header .wp-block-site-title {
    margin: 0;
    line-height: 1;
}

.spartner-header .wp-block-site-title a {
    text-decoration: none;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.spartner-header .wp-block-site-title a:hover {
    color: #1a1a1a;
}

/* Navigation */
.spartner-nav {
    display: flex;
    justify-content: center;
}

.spartner-nav.wp-block-navigation {
    font-size: 15px;
    font-weight: 600;
}

.spartner-nav .wp-block-navigation__responsive-container-content,
.spartner-nav .wp-block-navigation__container {
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.spartner-nav .wp-block-navigation-item {
    margin: 0;
}

.spartner-nav .wp-block-navigation-item a {
    color: #111111;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    padding: 0.5rem 0;
}

.spartner-nav .wp-block-navigation-item a:hover {
    color: #666;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* CTA Button in Header */
.spartner-header__cta {
    display: flex;
    justify-content: flex-end;
}

.spartner-header__cta .wp-block-button {
    margin: 0;
}

.spartner-header__cta .wp-block-button__link {
    background: #111111;
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    line-height: 1;
}

.spartner-header__cta .wp-block-button__link:hover {
    background: #222222;
    transform: translateY(-1px);
}

/* ==========================================================================
   Hero Section Styles
   ========================================================================== */

.spartner-hero {
    padding: 56px 24px 24px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.spartner-hero__inner {
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
    text-align: center;
}

/* Hero Heading */
.spartner-hero h1 {
    font-size: clamp(40px, 4vw, 64px);
    font-weight: 700;
    line-height: 1.05;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
}

/* Hero Paragraph */
.spartner-hero p {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #666;
    max-width: 65ch;
    margin: 0 auto 2.5rem;
}

/* Hero Buttons */
.spartner-hero__buttons {
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

.spartner-hero__buttons .wp-block-button {
    margin: 0;
}

/* Primary Button */
.spartner-hero__buttons .is-primary .wp-block-button__link,
.spartner-hero .wp-block-button.is-style-fill .wp-block-button__link {
    background: #111111;
    color: #ffffff;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid #111111;
    line-height: 1.5;
}

.spartner-hero__buttons .is-primary .wp-block-button__link:hover,
.spartner-hero .wp-block-button.is-style-fill .wp-block-button__link:hover {
    background: #2a2a2a;
    border-color: #2a2a2a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Secondary Button - Outlined */
.spartner-hero__buttons .is-secondary .wp-block-button__link,
.spartner-hero .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: #111111;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #111111;
    line-height: 1.5;
}

.spartner-hero__buttons .is-secondary .wp-block-button__link:hover,
.spartner-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: #f5f5f5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Tertiary/Text Link Button */
.spartner-hero .wp-block-button.is-style-link .wp-block-button__link {
    background: transparent;
    color: #111111;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    border: none;
    transition: all 0.2s ease;
    line-height: 1.5;
}

.spartner-hero .wp-block-button.is-style-link .wp-block-button__link:hover {
    color: #666;
    text-decoration-color: #666;
}

/* ==========================================================================
   Utility Styles
   ========================================================================== */

.wp-site-blocks {
    padding-top: 0;
}

/* Ensure no unwanted spacing at top */
.wp-site-blocks > * {
    margin-block-start: 0;
}

/* Front page specific: ensure hero starts right after header
   !important required here to override Twenty Twenty-Five's inline spacing styles */
.home .wp-site-blocks,
.page-id-5 .wp-site-blocks {
    padding-top: 0 !important;
}

.home .spartner-hero,
.page-id-5 .spartner-hero {
    margin-top: 0;
    padding-top: 6rem;
}

.home main,
.page-id-5 main {
    margin-top: 0;
    padding-top: 0;
}