/*
Theme Name: AbiCare Consultancy Theme
Theme URI: http://example.com/
Author: Abi (AbiCare)
Author URI: http://example.com/
Description: A simple, accessible WordPress theme for a social care provider & consultancy. Includes pre-built homepage sections (About, Services, Consultancy, Contact) and branding colours.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abicare
Tags: one-column, custom-logo, accessibility-ready
*/

/* Basic theme styles and brand colours */
:root{
  --brand-teal: #1B3C45;
  --brand-green: #74B49B;
  --brand-cream: #F7F5EE;
  --brand-accent: #D9A441;
  --max-width: 1100px;
}

html,body{margin:0;padding:0;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial; color:var(--brand-teal); background:var(--brand-cream); line-height:1.6;}
a{color:var(--brand-teal); text-decoration:none;}
.container{max-width:var(--max-width); margin:0 auto; padding:40px 20px;}
.site-header{background:transparent; padding:20px 0;}
.site-branding{display:flex; align-items:center; gap:16px;}
.site-title{font-size:28px; margin:0;}
.site-tagline{margin:0; color:rgba(27,60,69,0.8); font-size:14px;}
.nav{margin-top:14px;}
.nav ul{list-style:none;padding:0;display:flex;gap:12px;}
.hero{display:flex; gap:30px; align-items:center; padding:40px 0;}
.hero .hero-text{flex:1;}
.hero .hero-image{width:420px; max-width:40%; border-radius:12px; overflow:hidden;}
.section{background:white; border-radius:10px; padding:24px; margin:18px 0; box-shadow:0 4px 10px rgba(0,0,0,0.04);}
.section h2{margin-top:0; color:var(--brand-teal);}
.services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;}
.cta{display:inline-block; margin-top:12px; padding:10px 16px; background:var(--brand-green); color:white; border-radius:8px;}
.footer{padding:24px 0; color:rgba(27,60,69,0.8); font-size:14px; text-align:center;}

/* Responsive */
@media (max-width:800px){
  .hero{flex-direction:column;}
  .hero .hero-image{max-width:100%; width:100%;}
}