/*
Theme Name: Karrivo
Theme URI: https://karrivo.de
Author: Karrivo
Description: Multi-page WordPress theme for Karrivo – international apprenticeship placement.
Version: 0.3.0
License: Proprietary
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root, [data-theme="light"] {
  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  --text-base: clamp(1rem,     0.96rem + 0.2vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.6vw,  1.375rem);
  --text-xl:   clamp(1.5rem,   1.15rem + 1.1vw,  2rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.2vw,  3.25rem);

  /* Spacing (4px base) */
  --space-1:2px; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;

  /* Colors */
  --color-bg:               #eef1f3;
  --color-surface:          #fff;
  --color-surface-2:        #f5f7f8;
  --color-surface-offset:   #eef1f3;
  --color-border:           #dfe3e7;
  --color-border-2:         #d3d9df;
  --color-divider:          #e8ebed;
  --color-text:             #12171c;
  --color-text-muted:       #59616b;
  --color-text-faint:       #8a9199;
  --color-text-inverse:     #fff;
  --color-primary:          #0d7d74;
  --color-primary-hover:    #0c5257;
  --color-primary-highlight:#e0f0ee;
  --color-primary-light:    #5aa0aa;
  --color-success:          #437a22;
  --shadow-sm: 0 1px 2px rgba(18,23,28,.06);
  --shadow-md: 0 20px 40px rgba(18,23,28,.12);

  /* Fonts */
  --font-display: 'Clash Display', sans-serif;
  --font-body: 'General Sans', 'Switzer', system-ui, sans-serif;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  --content-default: 1120px;
  --transition: 180ms cubic-bezier(0.16,1,0.3,1);
}

[data-theme="dark"] {
  --color-bg:               #0e1318;
  --color-surface:          #161c23;
  --color-surface-2:        #1c232c;
  --color-surface-offset:   #1c232c;
  --color-border:           #2a333d;
  --color-border-2:         #36414c;
  --color-divider:          #1f2830;
  --color-text:             #dce4ec;
  --color-text-muted:       #8a9eb0;
  --color-text-faint:       #6b7c8d;
  --color-text-inverse:     #0e1318;
  --color-primary:          #5aa0aa;
  --color-primary-hover:    #7eb5bc;
  --color-primary-highlight:#1a3538;
  --color-primary-light:    #5aa0aa;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 20px 40px rgba(0,0,0,.45);
}

/* ============================================================
   2. RESET
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100dvh;display:flex;flex-direction:column;font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;background:var(--color-bg);color:var(--color-text)}
#main{flex:1}
img,svg{display:block;max-width:100%;height:auto}
a,button,input,textarea{font:inherit;color:inherit}
a{text-decoration:none}
button{border:none;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
.skip-link{position:absolute;left:-999px;top:var(--space-3)}
.skip-link:focus{left:var(--space-3);z-index:100;background:var(--color-surface);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md)}

/* ============================================================
   3. LAYOUT
   ============================================================ */

.container{width:min(calc(100% - 3rem),var(--content-default));margin-inline:auto}
.section{padding:clamp(var(--space-12),7vw,var(--space-20)) 0}
.section-head{display:grid;gap:var(--space-3);margin-bottom:var(--space-8);max-width:44rem}
.section-head h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.section-head p{color:var(--color-text-muted)}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-8);align-items:start}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ============================================================
   4. HEADER
   ============================================================ */

.header{position:sticky;top:0;z-index:30;background:#12171c;color:#e7ecef}
.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) 0;gap:var(--space-4)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:.01em;color:#fff}
.brand-mark{width:32px;height:32px;padding:.3rem;border-radius:8px;background:var(--color-primary);color:#fff;flex-shrink:0}
.nav-controls{display:flex;align-items:center;gap:var(--space-3)}
.nav-menu{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-menu a{font-size:15px;font-weight:500;color:#aab3bb;transition:color var(--transition)}
.nav-menu a:hover,.nav-menu .current-menu-item > a,.nav-menu .current_page_item > a{color:#fff}
.hamburger{width:2.75rem;height:2.75rem;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.15);display:none;place-items:center;background:rgba(255,255,255,.07);color:#fff}
.theme-toggle{width:2.75rem;height:2.75rem;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;background:rgba(255,255,255,.07);color:#fff}
.header-cta{background:var(--color-primary);color:#fff;font-weight:600;font-size:14px;padding:11px 20px;border-radius:var(--radius-md);white-space:nowrap;transition:background var(--transition)}
.header-cta:hover{background:var(--color-primary-hover)}

/* ============================================================
   5. FOOTER
   ============================================================ */

.footer{padding:var(--space-8) 0 var(--space-10);background:var(--color-surface-offset);border-top:1px solid var(--color-border)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.footer-copy{color:var(--color-text-muted);font-size:var(--text-sm)}
.footer-nav-list{display:flex;gap:var(--space-5);list-style:none;margin:0;padding:0}
.footer-nav-list a{font-size:var(--text-sm);color:var(--color-text-muted)}
.footer-nav-list a:hover{color:var(--color-text)}

/* ============================================================
   6. EYEBROW & LABELS
   ============================================================ */

/* Design-style: plain text, no pill/background */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--color-primary);letter-spacing:.02em;margin-bottom:var(--space-3)}
.eyebrow-tick{width:22px;height:2px;background:var(--color-primary);display:inline-block;flex-shrink:0}

/* Uppercase kicker (used on subpages & in some sections) */
.kicker{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-primary);font-weight:700;margin-bottom:var(--space-4)}

/* ============================================================
   7. BUTTONS
   ============================================================ */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:14px 24px;border-radius:var(--radius-md);font-size:15px;font-weight:600;transition:all var(--transition);cursor:pointer;border:none}
/* Ink primary (homepage hero main CTA) */
.btn-primary{background:#12171c;color:#fff}
.btn-primary:hover{background:#232a31}
/* Teal primary (header, banners, subpage CTAs, form) */
.btn-teal{background:var(--color-primary);color:#fff}
.btn-teal:hover{background:var(--color-primary-hover)}
/* Secondary outline */
.btn-secondary{background:var(--color-surface);border:1px solid var(--color-border-2);color:var(--color-text)}
.btn-secondary:hover{border-color:var(--color-text-faint)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ============================================================
   8. HERO (Homepage)
   ============================================================ */

.hero{background:var(--color-surface)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr}
.hero-content{padding:80px 48px 64px}
.hero-h1{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,1.2rem+2.2vw,3.25rem);line-height:1.03;letter-spacing:-.02em;margin:20px 0 22px;color:var(--color-text);max-width:14ch}
.hero-body{font-size:18px;line-height:1.6;color:var(--color-text-muted);max-width:48ch;margin:0}

/* Designed graphic — right column */
.hero-graphic{position:relative;min-height:420px;background:#12171c;background-image:radial-gradient(#2a3239 1px,transparent 1px);background-size:22px 22px;overflow:hidden}
.hero-route-label{position:absolute;display:flex;align-items:center;gap:10px}
.hero-route-label.from{left:9%;bottom:14%}
.hero-route-label.to{right:9%;top:16%;flex-direction:row-reverse}
.hero-route-dot-open{width:14px;height:14px;border-radius:999px;border:2px solid #5aa0aa;background:#12171c;flex-shrink:0}
.hero-route-dot-filled{width:16px;height:16px;border-radius:999px;background:var(--color-primary);flex-shrink:0}
.hero-route-text{font-size:13px;font-weight:600;letter-spacing:.02em}
.hero-route-text.from{color:#c7cfd6}
.hero-route-text.to{color:#fff}
.hero-float-card{position:absolute;border-radius:10px;padding:18px 22px;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.hero-float-card.white{background:#fff;left:10%;top:14%}
.hero-float-card.teal{background:var(--color-primary);right:8%;bottom:12%}
.hero-float-card .fc-value{font-family:var(--font-display);font-weight:600;font-size:28px;line-height:1}
.hero-float-card.white .fc-value{color:#12171c}
.hero-float-card.teal .fc-value{color:#fff}
.hero-float-card .fc-label{font-size:12px;margin-top:6px;max-width:16ch}
.hero-float-card.white .fc-label{color:var(--color-text-muted)}
.hero-float-card.teal .fc-label{color:#d8f0ee}

/* ============================================================
   9. KPI STRIP
   ============================================================ */

.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#12171c;color:#e7ecef}
.kpi-cell{padding:30px 40px;border-right:1px solid #232a31}
.kpi-cell:last-child{border-right:none}
.kpi-value{font-family:var(--font-display);font-weight:600;font-size:36px;line-height:1;color:#fff}
.kpi-label{font-size:14px;color:#aab3bb;margin-top:8px}

/* ============================================================
   10. CARDS
   ============================================================ */

/* Generic card (for quote-style, misc usage) */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:24px}
.card h3{font-family:var(--font-display);font-weight:600;font-size:19px;margin-bottom:12px}
.card p{color:var(--color-text-muted)}

/* Bordered cards (subpages — individual bordered articles) */
.card-bordered{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:24px}
.card-bordered h3{font-family:var(--font-display);font-weight:600;font-size:19px;margin-bottom:12px}
.card-bordered p{color:var(--color-text-muted)}
.card-bordered ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;color:var(--color-text-muted);font-size:14px}
.card-bordered h4{font-family:var(--font-display);font-weight:600;font-size:17px;margin-bottom:8px}

/* Hairline grid (homepage — cells separated by 1px border-color gaps) */
.hairline-grid{display:grid;gap:1px;background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden}
.hairline-grid-3{grid-template-columns:repeat(3,1fr)}
.hairline-grid-4{grid-template-columns:repeat(4,1fr)}
.hg-cell{background:var(--color-surface);padding:30px}
.hg-num{font-family:var(--font-display);font-size:14px;color:var(--color-primary);letter-spacing:.04em}
.hg-title{font-family:var(--font-display);font-weight:600;font-size:20px;margin:12px 0 10px}
.hg-body{font-size:14px;line-height:1.55;color:var(--color-text-muted)}
/* Hairline timeline row */
.hg-row{background:var(--color-surface);padding:22px 24px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.hg-step-num{font-family:var(--font-display);font-size:15px;color:var(--color-primary);line-height:1.4}
.hg-step-title{font-family:var(--font-display);font-weight:600;font-size:17px;margin-bottom:4px}
.hg-step-body{color:var(--color-text-muted);margin:0}

/* Step badge (subpage timeline) */
.step-badge{width:32px;height:32px;border-radius:999px;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex-shrink:0}
.timeline-step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.timeline-step h3{font-family:var(--font-display);font-weight:600;font-size:17px;margin-bottom:4px}
.timeline-step p{color:var(--color-text-muted);margin:0}

/* ============================================================
   11. QUOTE CARD
   ============================================================ */

.quote-card{padding:var(--space-8);border-radius:var(--radius-xl);background:var(--color-surface-offset);border:1px solid var(--color-border)}
.quote-card p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,1rem + 1.5vw,2.1rem);line-height:1.2;max-width:14ch;margin:0}
.quote-card small{display:block;margin-top:var(--space-4);color:var(--color-text-muted)}

/* ============================================================
   12. CTA BANNER
   ============================================================ */

.cta-banner{background:#12171c;color:#fff;border-radius:var(--radius-2xl);padding:clamp(var(--space-8),6vw,var(--space-12));display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.cta-banner .eyebrow{color:#5aa0aa;margin-bottom:0}
.cta-banner h2{font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.1;letter-spacing:-.02em;margin:10px 0 8px;color:#fff}
.cta-banner p{color:#aab3bb;max-width:48ch;margin:0}

/* ============================================================
   13. CONTACT / FORM
   ============================================================ */

.kontakt-panel{background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:clamp(var(--space-8),6vw,var(--space-12));display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:start}
.form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:28px;display:grid;gap:16px}
.form{display:grid;gap:var(--space-4)}
.field{display:grid;gap:8px}
label{font-size:14px;font-weight:600}
input,textarea{width:100%;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--color-border-2);background:var(--color-surface);font:inherit;color:var(--color-text)}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus{border-color:var(--color-primary);outline:none}

/* ============================================================
   14. PAGE TEMPLATES
   ============================================================ */

.page-hero{padding:clamp(3rem,7vw,5.5rem) 0 var(--space-10);border-bottom:1px solid var(--color-border)}
.page-hero .kicker{margin-bottom:var(--space-4)}
.page-hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(1.75rem,.8rem+2vw,2.125rem);line-height:1.08;letter-spacing:-.02em;max-width:18ch;margin-bottom:var(--space-4)}
.page-hero p{color:var(--color-text-muted);max-width:54ch}
.page-hero .hero-actions{margin-top:24px}

.prose{max-width:70ch}
.prose h1{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);line-height:1.05;letter-spacing:-.02em;margin-bottom:var(--space-8)}
.prose h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);line-height:1.15;letter-spacing:-.01em;margin:var(--space-8) 0 var(--space-3)}
.prose h3{font-size:var(--text-base);font-weight:600;margin:var(--space-6) 0 var(--space-2)}
.prose p{color:var(--color-text-muted);margin-bottom:var(--space-4)}
.prose ul,.prose ol{padding-left:var(--space-5);margin-bottom:var(--space-4);color:var(--color-text-muted)}
.prose li{margin-bottom:var(--space-2)}
.prose a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--color-primary-hover)}

.page-content{padding:clamp(var(--space-12),7vw,var(--space-20)) 0}

/* Pill tags (Kontakt page) */
.pill-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pill-tag{font-size:13px;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border-2);padding:8px 14px;border-radius:var(--radius-full)}

/* ============================================================
   15. CONTACT FORM 7
   ============================================================ */

.wpcf7-form{display:grid;gap:var(--space-4)}
.wpcf7-form p{display:grid;gap:8px;margin:0}
.wpcf7-form label{font-size:14px;font-weight:600}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea{width:100%;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--color-border-2);background:var(--color-surface);font:inherit;color:var(--color-text)}
.wpcf7-form textarea{min-height:110px;resize:vertical}
.wpcf7-form .wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:14px 24px;border-radius:var(--radius-md);font-size:15px;font-weight:600;background:var(--color-primary);color:#fff;border:none;cursor:pointer;transition:background var(--transition)}
.wpcf7-form .wpcf7-submit:hover{background:var(--color-primary-hover)}
.wpcf7-response-output{font-size:var(--text-sm);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-top:var(--space-3);border:1px solid transparent}
.wpcf7-mail-sent-ok{background:color-mix(in oklab,var(--color-success) 12%,transparent);border-color:color-mix(in oklab,var(--color-success) 40%,transparent);color:var(--color-success)}

/* ============================================================
   16. MOBILE NAV
   ============================================================ */

@media (max-width:960px){
  .hamburger{display:grid}
  .nav-links{display:none;width:100%;order:3;padding:var(--space-4) 0 var(--space-5);border-top:1px solid rgba(255,255,255,.1);margin-top:var(--space-3)}
  .nav-links.nav-open{display:block}
  .nav{flex-wrap:wrap}
  .nav-controls{order:2}
  .nav-menu{flex-direction:column;align-items:flex-start;gap:0}
  .nav-menu li{width:100%}
  .nav-menu a{display:block;padding:var(--space-3) 0;font-size:var(--text-base);color:#c7cfd6;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-menu li:last-child a{border-bottom:none}
  .header-cta{display:none}
}

/* ============================================================
   17. RESPONSIVE LAYOUTS
   ============================================================ */

@media (max-width:960px){
  .hero-grid,.split,.kontakt-panel,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .hero-content{padding:48px 24px 40px}
  .hero-graphic{min-height:300px}
  .kpi-strip{grid-template-columns:repeat(2,1fr)}
  .kpi-cell{border-right:none;border-bottom:1px solid #232a31}
  .kpi-cell:nth-child(odd){border-right:1px solid #232a31}
  .kpi-cell:nth-last-child(-n+2){border-bottom:none}
  .hairline-grid-3,.hairline-grid-4{grid-template-columns:1fr}
  .cta-banner{flex-direction:column;align-items:flex-start}
  .page-hero h1{max-width:none}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
}

@media (max-width:640px){
  .hero-h1{font-size:clamp(1.75rem,.5rem+5vw,2.5rem)}
  .hero-float-card{padding:12px 16px}
  .hero-float-card .fc-value{font-size:22px}
  .kontakt-panel{padding:var(--space-6)}
  .form-card{padding:var(--space-5)}
  .kpi-strip{grid-template-columns:1fr}
  .kpi-cell{border-right:none;border-bottom:1px solid #232a31}
  .kpi-cell:last-child{border-bottom:none}
  .footer-nav-list{flex-wrap:wrap;gap:var(--space-3)}
}

/* ============================================================
   18. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}