/*
Theme Name: GeneratePress Child - Headsail Consulting (Corrected)
Theme URI: https://headsailconsulting.co.uk
Description: Child theme for GeneratePress with custom styles for Headsail Consulting.
Author: Headsail
Template: generatepress
Version: 1.0.2
Text Domain: generatepress-child-corrected
*/

/* -------------------- Tokens -------------------- */
:root{
  --brand:#0C3C78;        /* deep nautical blue */
  --brand-2:#2E8B78;      /* sea green */
  --accent:#D4AF37;       /* nautical gold (sparingly) */
  --ink:#1E1E1E;          /* main text */
  --muted:#5B6573;        /* secondary text */
  --bg:#F4F7F6;           /* light background */
  --surface:#FFFFFF;      /* cards/surfaces */
  --hair:#E6ECF2;         /* subtle borders */
  --r-sm:8px;
  --r:12px;
  --shadow:0 6px 18px rgba(12,60,120,.06);

  /* Fluid type scale */
  --fs-body: clamp(16px, 1.5vw, 18px);
  --lh-body: 1.6;
  --fs-h1: clamp(32px, 5vw, 56px);
  --fs-h2: clamp(24px, 3.2vw, 36px);
  --fs-h3: clamp(20px, 2.5vw, 28px);
}

/* -------------------- Base -------------------- */
body{
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--brand);
  line-height: 1.2;
  letter-spacing: -0.2px;
  margin: 0 0 .5em;
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }

a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }
:focus-visible{ outline:2px solid var(--brand-2); outline-offset:3px; }

/* Optional wrapper – if you use GP’s .grid-container, you can remove this */
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* Section rhythm utility */
.section{ padding:80px 0; }
@media (max-width:1024px){ .section{ padding:56px 0; } }
@media (max-width:768px){ .section{ padding:40px 0; } }

/* -------------------- Buttons -------------------- */
.wp-element-button,
.wp-block-button__link,
button,.button,.btn{
  background: var(--brand);
  color:#fff;
  border:2px solid var(--brand);
  border-radius: var(--r-sm);
  padding:12px 25px;
  font-weight:600;
  transition: filter .2s ease, box-shadow .2s ease, transform .02s;
}
.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-secondary{ background:var(--brand-2); border-color:var(--brand-2); }
.btn-outline{ background:transparent; color:var(--brand); border-color:var(--brand); }
.wp-element-button:hover,
.wp-block-button__link:hover,
button:hover,.button:hover,.btn:hover{
  filter:brightness(.95);
  box-shadow: var(--shadow);
}
.btn-outline:hover{ background:var(--brand); color:#fff; }
.btn-large{ padding:15px 30px; font-size:1.1em; }

/* -------------------- Header & Nav -------------------- */
.site-header{ background:#fff; padding:15px 0; border-bottom:1px solid #eee; }
.main-navigation ul li a{
  font-family:'Montserrat',sans-serif; font-weight:600; color:var(--brand);
}
.main-navigation ul li a:hover{ color:var(--brand-2); }

/* -------------------- Hero -------------------- */
.hero{ background: var(--bg); padding:100px 0; text-align:center; }
.hero-content{ max-width:800px; margin:0 auto; }
.hero-title{ font-size: var(--fs-h1); margin-bottom:20px; line-height:1.1; }
.hero-subtitle{ font-size: clamp(16px,1.8vw,20px); color:#555; margin-bottom:40px; }

/* -------------------- Overview / Services (cards) -------------------- */
.service-overview{ padding:80px 0; background:#fff; }
.overview-grid,
.service-grid,
.approach-grid,
.contact-details-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:30px;
}
.overview-card,
.service-card,
.approach-item,
.contact-detail,
.testimonial-card{
  background: var(--surface);
  border:1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:24px 30px;
  text-align:left;
}
.overview-icon{ font-size:3em; margin-bottom:12px; }
.overview-card h3, .service-card h3{ font-size:1.4em; margin-bottom:10px; }
.overview-card p, .service-card p{ color:#666; }

/* -------------------- About preview -------------------- */
.about-preview{ padding:80px 0; background: var(--bg); }
.about-content{ display:flex; align-items:center; gap:50px; }
.about-text{ flex:1; }
.about-text p{ margin-bottom:20px; }
.about-image{ flex:1; text-align:center; }
.about-image img{
  max-width:100%; height:auto; border-radius:var(--r); box-shadow:var(--shadow);
}
@media (max-width:900px){ .about-content{ flex-direction:column; } }

/* -------------------- Testimonials -------------------- */
.testimonials{ padding:80px 0; background:#fff; text-align:center; }
.testimonial-carousel{ display:flex; justify-content:center; gap:30px; flex-wrap:wrap; }
.testimonial-card p{ font-style:italic; margin-bottom:20px; color:#555; }
.testimonial-author{ font-weight:600; color:var(--brand); }

/* -------------------- CTA band -------------------- */
.cta-section{
  background:var(--brand); color:#fff; text-align:center; padding:80px 0;
}
.cta-section h2{ color:#fff; font-size: clamp(28px,3.6vw,44px); margin-bottom:.4em; }
.cta-section p{ font-size: clamp(16px,1.8vw,20px); max-width:700px; margin:0 auto 32px; }
.cta-buttons .btn{ margin:0 10px; }

/* -------------------- Page header (inner pages) -------------------- */
.page-header{
  background: var(--bg); padding:60px 0 40px; text-align:center; border-bottom:1px solid #eee;
}
.page-header h1{ font-size: clamp(30px,4vw,48px); margin-bottom:15px; }
.page-header p{ font-size: clamp(16px,1.6vw,18px); color:#555; max-width:800px; margin:0 auto; }
.breadcrumb{ font-size:.9em; color:#777; margin-bottom:15px; }
.breadcrumb a{ color:var(--brand); }
.breadcrumb a:hover{ text-decoration:underline; }

/* -------------------- Service pillar sections -------------------- */
.service-pillar-section{ padding:80px 0; }
.service-pillar-section.alt-bg{ background:#f9f9f9; }
.service-pillar-section h2{ font-size: clamp(28px,3.6vw,40px); margin-bottom:15px; text-align:center; }
.service-pillar-section .section-subtitle{
  text-align:center; font-size:1.1em; color:#555; margin-bottom:50px;
}

/* -------------------- About page specifics -------------------- */
.our-story-section{ padding:80px 0; }
.story-content{ display:flex; align-items:center; gap:50px; }
.story-text{ flex:1; }
.story-text p{ margin-bottom:20px; }
.story-image{ flex:1; text-align:center; }
.story-image img{
  max-width:100%; height:auto; border-radius:var(--r); box-shadow:var(--shadow);
}
.approach-section-about{ padding:80px 0; background: var(--bg); text-align:center; }

/* -------------------- Contact page specifics -------------------- */
.contact-section{ padding:80px 0; }
.contact-form-container{
  max-width:700px; margin:0 auto;
  background: var(--surface);
  border:1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:32px;
}
.contact-form-container h2{ text-align:center; margin-bottom:30px; }
.contact-details-section{ padding:60px 0; background: var(--bg); text-align:center; }

/* -------------------- Responsive tweaks -------------------- */
@media (max-width:768px){
  .hero{ padding:60px 0; }
  .hero-title{ font-size: clamp(28px,7vw,40px); }
  .hero-subtitle{ font-size:1.1em; }
  .about-image{ margin-top:30px; }
  .cta-buttons .btn{ display:block; margin:15px auto; }
  .cta-buttons{ display:flex; flex-direction:column; align-items:center; }
  .testimonial-card{ max-width:90%; }
}

/* Respect user motion prefs */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}