/*
 Theme Name: Umut Sevuk Child (Modern v2)
 Theme URI: https://umutsevuk.com
 Description: Minimal, fast child theme for Twenty Twenty-Five. EN-first, TR-ready.
 Author: Umut Sevuk
 Version: 2.1.0
 Template: twentytwentyfive
 Text Domain: umutsevuk-child-modern
*/

/* =============================
   Design tokens (single source)
============================= */
:root{
  /* layout */
  --wrap: 1120px;          /* desktop container width */
  --gap: 20px;             /* global grid gap */
  --radius: 18px;          /* card/button radius */

  /* colors */
  --brand: #10b8aa;        /* primary */
  --brand-ink: #0d3a38;    /* darker for headings */
  --ink: #0f1720;          /* body text */
  --muted: #53606b;        /* secondary text */
  --line: #e9f2f1;         /* borders */
  --bg-soft: #f7fbfa;      /* soft section bg */

  /* effects */
  --shadow: 0 8px 24px rgba(7, 23, 26, .06);
}

html{scroll-behavior:smooth}
body{color:var(--ink); font-feature-settings:"liga" 1, "tnum" 0;}

/* =============================
   Base layout & typography
============================= */
.container{max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.section{padding:48px 0}
.section.alt{background:linear-gradient(180deg,#fff 0%, var(--bg-soft) 100%)}

h1{font-size:clamp(30px,3.2vw,46px); line-height:1.12; letter-spacing:.2px; color:var(--brand-ink); margin:.4rem 0 1rem}
.subtitle{color:var(--muted); font-size:clamp(16px,1.4vw,18px)}
h2{font-size:clamp(22px,2.2vw,30px); margin:0 0 18px; color:var(--brand-ink)}
h3{font-size:clamp(18px,1.6vw,21px); margin:0 0 8px}
p{line-height:1.65}

/* Buttons */
.wp-block-button__link{border-radius:999px; padding:12px 18px; font-weight:600}
.wp-block-button .wp-block-button__link{background:var(--brand); color:#fff; box-shadow:var(--shadow)}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent; border:1px solid var(--brand); color:var(--brand)}
.wp-block-button + .wp-block-button{margin-left:10px}

/* Grid helper */
.grid-3{display:grid; gap:var(--gap); grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{display:grid; gap:var(--gap); grid-template-columns:repeat(2,minmax(0,1fr))}

/* Cards */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; min-height:160px; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.card p{margin:0; color:var(--muted)}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#d9eeeb}
.card .icon{font-size:20px; margin-right:8px; opacity:.9}

/* service list specific tightness */
#services .card{min-height:150px}
/* projects a bit taller */
#projects .card{min-height:220px}

/* Hero */
.hero{padding:28px 0 8px}
.hero .wp-block-buttons{margin-top:14px}

/* Navigation (optional burger) */
.site-nav{display:flex; gap:18px}
@media(max-width:820px){
  .site-nav{display:none; flex-direction:column}
  .site-nav.open{display:flex}
  .nav-toggle{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:8px 10px}
}

/* Utilities */
.m-0{margin:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.text-muted{color:var(--muted)}

/* Booking mini form */
.booking-mini{max-width:420px}

/* =============================
   References card (front page)
============================= */
.card.refs{padding-bottom:24px}
.refs h3{margin:0 0 10px; font-size:1.15rem; font-weight:600}
.logo-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; margin:10px 0 18px; align-items:center}
.logo-item{display:flex; align-items:center; gap:10px; font-size:.98rem; white-space:nowrap}
.logo-item img{width:22px; height:22px; object-fit:contain; filter:grayscale(100%); opacity:.8; transition:.2s}
.logo-item:hover img{filter:none; opacity:1}
.testimonial{margin:6px 0 16px; padding-left:10px; border-left:3px solid var(--brand); color:#2c2c2c; line-height:1.55; font-size:1.02rem}
.refs .cta-row{display:flex; flex-wrap:wrap; gap:10px}
.refs .btn{display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--brand); color:#0d837a; background:#e7fbf8; font-weight:600}
.refs .btn.secondary{background:transparent; color:#1b816d; border-color:#b7efe8}
#projects .grid-3{align-items:stretch} #projects .card{height:100%}



/* =========================================================
   UNIVERSAL SERVICE KIT (v2.3 final)
   Purpose: One CSS to style ALL service pages regardless of markup.
   Supports BOTH markup families used on the site:
   A) .page-service + .hero + .grid-2/.grid-3 + .card + .cta-row
   B) .service-wrap + .service-hero + .service-grid + .service-card + .service-actions (+ .col-*)
   Paste this block at the VERY END of your child theme style.css
   and remove/disable older "Service Pages – Global Kit" to avoid conflicts.
========================================================= */

/* --- Tokens (reuse existing vars if present) --- */
:root{
  --us-accent: var(--brand, #10b8aa);
  --us-ink: var(--ink, #0f1720);
  --us-muted: var(--muted, #53606b);
  --us-line: var(--line, rgba(15,23,42,.12));
  --us-shadow: 0 8px 24px rgba(7,23,26,.06);
  --us-gap: 24px;
}

/* --- Scope container for both markups --- */
.page-service,
.service-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px clamp(16px,4vw,28px);
  color: var(--us-ink);
}

/* --- HERO (both markups) --- */
.page-service .hero,
.service-wrap .service-hero{ margin: 8px 0 28px; }
.page-service .hero h1,
.service-wrap .service-hero h1{
  font-size: clamp(34px,5vw,48px);
  letter-spacing: -.01em; margin: 0 0 10px; color: var(--brand-ink, #0d3a38);
}
.page-service .hero .lead,
.service-wrap .service-hero .lead{
  font-size: clamp(16px,2.2vw,18px);
  color: var(--us-muted); max-width: 68ch;
}

/* --- CTA rows & buttons (both) --- */
.page-service .cta-row,
.service-wrap .service-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.page-service .cta-row .btn,
.service-wrap .service-actions .btn,
.page-service .btn, .service-wrap .btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:12px 18px; font-weight:600;
  border:1px solid transparent; text-decoration:none;
  transition: filter .2s, transform .02s, box-shadow .2s;
  background: var(--us-accent); color:#fff; box-shadow: 0 6px 18px rgba(22,193,183,.25);
}
.page-service .btn:hover,
.service-wrap .btn:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.page-service .btn.btn-outline,
.service-wrap .btn.btn-outline{ background:transparent; color:#073b3a; border-color:var(--us-accent); box-shadow:none; }

/* --- GRID (both) --- */
/* A) page-service uses .grid-2 / .grid-3 */
.page-service .grid-2{ display:grid; gap:var(--us-gap); grid-template-columns:repeat(2,minmax(0,1fr)); }
.page-service .grid-3{ display:grid; gap:var(--us-gap); grid-template-columns:repeat(3,minmax(0,1fr)); }
/* B) service-wrap uses .service-grid + .col-* */
.service-wrap .service-grid{ display:grid; gap:var(--us-gap); grid-template-columns:repeat(12,minmax(0,1fr)); }
.service-wrap .col-6{ grid-column: span 6; }
.service-wrap .col-4{ grid-column: span 4; }
.service-wrap .col-12{ grid-column: 1 / -1; }

/* --- Responsive breakpoints (apply to both) --- */
@media (max-width: 900px){ .page-service .grid-3{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px){
  .page-service .grid-2, .page-service .grid-3{ grid-template-columns: 1fr; }
  .service-wrap .col-6, .service-wrap .col-4{ grid-column: 1 / -1; }
}

/* --- CARDS (both) --- */
.page-service .card,
.service-wrap .service-card{
  background:#fff; border:1px solid var(--us-line);
  border-radius:16px; padding: clamp(16px,2.8vw,22px);
  box-shadow: var(--us-shadow); min-height:auto;
}
.page-service .card h3,
.service-wrap .service-card h3{ margin:0 0 8px; font-size:clamp(18px,2.2vw,20px); }
.page-service .card h4,
.service-wrap .service-card h4{ margin:0 0 6px; font-size:clamp(16px,2vw,18px); }
.page-service .card p,
.service-wrap .service-card p{ margin:0; color: var(--us-muted); }

/* --- LISTS (tick style) – only inside service cards --- */
.page-service .card > ul,
.service-wrap .service-card > ul{ margin:10px 0 0; padding:0; list-style:none; }
.page-service .card > ul > li,
.service-wrap .service-card > ul > li{
  display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; margin:10px 0;
}
.page-service .card > ul > li::before,
.service-wrap .service-card > ul > li::before{
  content:"✓"; width:22px; height:22px; line-height:22px; text-align:center;
  background: var(--us-accent); color:#fff; border-radius:6px; font-weight:700; font-size:13px;
}

/* --- Optional: highlight tech card --- */
.page-service .tech.card,
.service-wrap .service-card.tech{
  background: linear-gradient(180deg, rgba(22,193,183,.06), transparent 80%);
  border: 1px dashed var(--us-accent);
}

/* --- Anchor offset for in-page jumps (admin bar/header) --- */
[id]{ scroll-margin-top: 96px; }