/* (shortened for brevity in this cell) */
/*
Theme Name: MPC Theme
Theme URI: https://www.mypeoplecounter.com/
Author: My People Counter / Ludovic
Author URI: https://www.mypeoplecounter.com/
Description: A clean, fast WordPress theme inspired by mypeoplecounter.com. Includes hero, services grid, CTA, blog, and customizable brand colors.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mpc
Tags: one-column, blog, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, translation-ready, rtl-language-support
*/

:root {
  --mpc-primary:#1f4fa3;
  --mpc-secondary:#0f295a;
  --mpc-accent:#26b0ff;
  --mpc-bg:#ffffff;
  --mpc-muted:#f5f7fb;
  --mpc-text:#1b1f24;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--mpc-bg); color:var(--mpc-text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol'; line-height:1.6; }
a{ color:var(--mpc-primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; display:block; }

.container{ width:min(1200px,92%); margin-inline:auto; }
.btn{ display:inline-block; padding:.8rem 1.2rem; background:var(--mpc-primary); color:#fff; border-radius:.6rem; font-weight:600; }
.btn-outline{ background:transparent; border:2px solid var(--mpc-primary); color:var(--mpc-primary); }
.btn:hover{ filter:brightness(1.05); }
.section{ padding:4rem 0; }
.grid{ display:grid; gap:1.25rem; }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){ .grid-3{ grid-template-columns:1fr; } }

/* Topbar (contacts above logo) */
.topbar{ background: var(--mpc-secondary); color:#fff; }
.topbar a{ color:#fff; text-decoration:none; }
.topbar-inner{ display:flex; align-items:center; justify-content:flex-end; gap:1rem; padding:.35rem 0; font-size:.9rem; }
.topbar .tb-item{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.topbar .sep{ opacity:.5; margin: 0 .25rem; }
@media (max-width: 720px){ .topbar-inner{ justify-content:center; flex-wrap:wrap; row-gap:.25rem; }}

/* Header */
.site-header{ position: sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid #e7eaf1; }
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.nav-left{ display:flex; align-items:center; gap:1rem; }
.logo{ font-weight:800; color:var(--mpc-primary); font-size:1.25rem; letter-spacing:.2px; }

/* Horizontal menu */
.main-menu ul.menu{ list-style:none; display:flex; gap:.5rem; margin:0; padding:0; }
.main-menu ul.menu > li > a{ display:block; padding:.5rem .75rem; border-radius:.5rem; }
.main-menu a.current{ background:var(--mpc-muted); }
@media (max-width: 820px){ .main-menu ul.menu{ flex-wrap:wrap; } }

/* Hero */
.hero{ background: linear-gradient(135deg, var(--mpc-muted), #fff); }
.hero-inner{ display:grid; gap:1.5rem; grid-template-columns: 1.1fr .9fr; align-items:center; padding: 2.5rem 0; }
.hero h1{ font-size: clamp(1.8rem, 3.2vw, 3rem); margin: 0 0 .75rem 0; }
.hero p{ font-size: clamp(1rem, 1.5vw, 1.2rem); opacity:.9; }
.hero .badge{ display:inline-block; background: var(--mpc-primary); color:#fff; padding:.35rem .6rem; border-radius:.5rem; font-size:.85rem; }
@media (max-width: 900px){ .hero-inner{ grid-template-columns:1fr; } }

/* Cards & Footer */
.card{ background:#fff; border:1px solid #e7eaf1; border-radius:1rem; padding:1.25rem; box-shadow:0 2px 10px rgba(0,0,0,.02); }
.card h3{ margin:.2rem 0 .5rem; }
.site-footer{ background:#0f1524; color:#bcd; padding:2rem 0; margin-top:3rem; }
.site-footer a{ color:#fff; opacity:.9; }
.site-footer .grid{ grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 900px){ .site-footer .grid{ grid-template-columns:1fr; gap:1.5rem; } }

.alignwide{ max-width:1200px; margin-left:auto; margin-right:auto; }
.alignfull{ width:100vw; margin-left:50%; transform:translateX(-50%); }