/*
Theme Name: Figma Guide Theme
Theme URI: http://example.com/
Author: Generated by ChatGPT
Author URI: http://example.com/
Description: Starter WordPress theme converted from a Figma design. Replace assets and tweak styles as needed.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: figma-guide-theme
*/

/* Theme variables and basic styles */
:root {
  --brand-100: #0b72b9;
  --brand-200: #074f7f;
  --muted: #6b7280;
  --max-width: 1200px;
  --container-padding: 24px;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

* { box-sizing: border-box; }
html,body { height:100%; }
body{
  font-family: var(--font-sans);
  line-height:1.5;
  margin:0;
  color:#111827;
}

a{ color:var(--brand-100); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:var(--max-width); margin:0 auto; padding:0 var(--container-padding); }

.site-header{ background:#fff; border-bottom:1px solid #e6e9ee; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px; }
.site-logo{ display:flex; align-items:center; gap:12px; }
.site-logo img{ height:40px; }
.site-nav ul{ display:flex; gap:16px; list-style:none; margin:0; padding:0; }
.site-nav a{ padding:8px 0; display:inline-block; }

.hero{ padding:60px 0; display:flex; gap:32px; align-items:center; }
.hero .hero-copy{ flex:1; }
.hero h1{ font-size:36px; margin:0 0 16px; }
.hero p.lead{ margin:0 0 20px; color:var(--muted); }
.hero .hero-media{ flex:1; }

section { padding:40px 0; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.card{ background:#fff; border-radius:12px; padding:18px; box-shadow:0 6px 20px rgba(11,16,26,0.04); }
.card h3{ margin-top:0; }

.site-footer{ border-top:1px solid #e6e9ee; padding:28px 0; color:var(--muted); }

@media (max-width:768px){
  .header-inner{ padding:0 8px; }
  .hero{ flex-direction:column; padding:36px 0; }
  .hero h1{ font-size:28px; }
}