/*
 Theme Name:   Astra Mister Child
 Theme URI:    https://www.misterhypotheekadvies.nl
 Description:  Calm, professional Astra child theme in deep blue palette for Mister Hypotheek Advies.
 Author:       ChatGPT
 Author URI:   https://openai.com
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-mister-child
*/

:root{
  --brand:#1D3557;   /* deep blue */
  --brand-2:#457B9D; /* soft blue */
  --ink:#1A1A1A;     /* text */
  --bg:#FFFFFF;      /* background */
  --soft:#F5F8FA;    /* subtle background */
  --border:#E7EDF3;
}

html{font-size:17px;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
}

/* Header (clean, roomy) */
.site-header,.header-primary{
  background:#fff;
  border-bottom:1px solid var(--border);
}
.branding .site-logo-img img{height:48px;width:auto;}

/* Nav */
.main-navigation .menu>li>a{font-weight:600;padding:.9rem 1rem;}
.main-navigation .menu>li>a:hover{color:var(--brand);}

/* Buttons */
.button-primary, .wp-block-button__link, .btn-primary{
  background:var(--brand);
  color:#fff !important;
  border-radius:12px;
  padding:.9rem 1.15rem;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
}
.button-primary:hover{opacity:.92}
.button-secondary{
  background:var(--soft);
  color:var(--brand);
  border-radius:12px;
  padding:.9rem 1.15rem;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
}

/* Hero (minimal, lots of white space) */
.hero{
  padding: 5.5rem 1.5rem 3.25rem;
  background:#fff;
}
.hero h1{
  font-size: clamp(2.1rem, 2.8vw + 1rem, 3.2rem);
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 .5rem 0;
}
.hero p.lead{
  font-size: clamp(1.05rem, .6vw + .9rem, 1.22rem);
  max-width: 62ch;
  margin: .25rem 0 1.2rem;
  color:#2b2b2b;
}

/* Sections */
.section{padding: 3rem 1.5rem}
.section.alt{background:var(--soft)}
.section h2{font-size: clamp(1.6rem, .9vw + 1.2rem, 2.2rem); letter-spacing:-0.01em; margin:0 0 1rem 0}
.grid{display:grid; gap:1rem}
.grid.cols-3{grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
.card{border:1px solid var(--border); border-radius:16px; padding:1.15rem; background:#fff}
.card h3{margin:.25rem 0 .25rem}

/* Testimonial */
.testimonial{border-left:4px solid var(--brand); padding:.9rem 1rem; background:#fff; border-radius:8px}

/* Footer */
.site-footer{background:var(--brand); color:#e9f2fb; padding:2rem 1.5rem}
.site-footer a{color:#fff; text-decoration:underline}


/* Icon styling (clean, line-based) */
.icon svg{
  width: 28px;
  height: 28px;
  stroke: var(--brand);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display:block;
  margin-bottom:.6rem;
}

/* Card spacing for calmer feel */
.card p{margin:.35rem 0 0 0}
.grid.cols-3{gap:1.1rem}