/*
Theme Name: Helen Powell Driving School - Modern
Theme URI: https://www.helendriving.co.uk
Author: Redesign for Helen Powell Driving Instructor
Author URI: https://www.helendriving.co.uk
Description: A modern, light, friendly redesign of the Helen Powell Driving School site. Brand colours: pink, grey and black. Built for approachability and clarity for new learner drivers.
Version: 1.0
Requires PHP: 7.4
Text Domain: helen-driving-modern
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* Brand pink */
  --pink: #FF4F87;
  --pink-dark: #DE1F6B;
  --pink-darker: #B31658;
  --pink-light: #FFE3EE;
  --pink-lighter: #FFF3F8;

  /* Brand black / greys */
  --black: #17151B;
  --grey-900: #262330;
  --grey-700: #4A4652;
  --grey-500: #7A7583;
  --grey-300: #D8D4DD;
  --grey-200: #E9E6ED;
  --grey-100: #F5F3F7;
  --white: #FFFFFF;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(23,21,27,0.06);
  --shadow-md: 0 12px 32px rgba(23,21,27,0.10);
  --shadow-pink: 0 14px 30px rgba(255,79,135,0.28);

  --container: 1180px;
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--grey-900);
  background: var(--white);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--pink-dark); text-decoration:none; transition: color .15s ease; }
a:hover{ color: var(--pink-darker); }
ul{ padding-left: 1.2em; }
h1,h2,h3,h4,h5{
  font-family: var(--font-heading);
  color: var(--black);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5em;
}
h1{ font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -0.5px; }
h2{ font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -0.3px; }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section{ padding: 72px 0; }
.section--tight{ padding: 48px 0; }
.bg-grey{ background: var(--grey-100); }
.bg-black{ background: var(--black); color: var(--grey-200); }
.bg-black h2, .bg-black h3{ color: var(--white); }
.bg-pink-tint{ background: linear-gradient(180deg, var(--pink-lighter), var(--white)); }
.eyebrow{
  display:inline-block; font-family: var(--font-heading); font-weight:600;
  font-size: .8rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--pink-dark); background: var(--pink-light);
  padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.text-center{ text-align:center; }
.lede{ font-size: 1.15rem; color: var(--grey-700); max-width: 640px; }
.center-col{ max-width: 720px; margin: 0 auto; }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-heading); font-weight:600; font-size: .98rem;
  padding: 14px 28px; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor:pointer; transition: all .18s ease;
}
.btn-primary{ background: var(--pink); color: var(--white); box-shadow: var(--shadow-pink); }
.btn-primary:hover{ background: var(--pink-dark); color:var(--white); transform: translateY(-2px); }
.btn-dark{ background: var(--black); color: var(--white); }
.btn-dark:hover{ background: var(--grey-900); color:var(--white); transform: translateY(-2px); }
.btn-outline{ background: transparent; border-color: var(--black); color: var(--black); }
.btn-outline:hover{ background: var(--black); color: var(--white); }
.btn-outline-white{ background: transparent; border-color: rgba(255,255,255,.5); color: var(--white); }
.btn-outline-white:hover{ background: var(--white); color: var(--black); }
.btn-block{ width:100%; justify-content:center; }
.btn-row{ display:flex; flex-wrap:wrap; gap: 14px; align-items:center; }

/* ==========================================================================
   4. HEADER / NAV
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 999;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--grey-200);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; max-width: var(--container); margin:0 auto; }
.site-logo{ display:flex; align-items:center; gap:10px; font-family: var(--font-heading); font-weight:700; font-size:1.2rem; color: var(--black); }
.site-logo img{ max-height: 52px; width:auto; }
.logo-dot{ color: var(--pink); }
.primary-nav{ display:flex; align-items:center; gap: 6px; }
.primary-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap: 2px; }
.primary-nav li{ position:relative; }
.primary-nav a{
  display:block; color: var(--grey-900); font-weight:500; font-size:.98rem;
  padding: 10px 14px; border-radius: var(--radius-pill);
}
.primary-nav > ul > li > a:hover{ background: var(--pink-light); color: var(--pink-darker); }
.primary-nav .sub-menu{
  list-style:none; margin:0; padding: 10px; position:absolute; top: 110%; left:0;
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  min-width: 260px; opacity:0; visibility:hidden; transform: translateY(6px);
  transition: all .18s ease; border: 1px solid var(--grey-200);
}
.primary-nav li:hover > .sub-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.primary-nav .sub-menu a{ padding: 10px 12px; border-radius: var(--radius-sm); font-size:.94rem; }
.primary-nav .sub-menu a:hover{ background: var(--grey-100); }
.primary-nav .menu-item-has-children > a::after{ content:"▾"; font-size:.7em; margin-left:5px; color: var(--grey-500); }
.header-cta{ display:flex; align-items:center; gap:14px; }
.header-phone{ display:flex; align-items:center; gap:7px; font-weight:600; color: var(--grey-900); font-size:.95rem; white-space:nowrap; }
.header-phone svg{ flex-shrink:0; color: var(--pink); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background: var(--black); margin:5px 0; border-radius:2px; }

@media (max-width: 960px){
  .header-inner{ position: relative; z-index: 1000; }
  .primary-nav{
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    height: calc(100dvh - 72px);
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 998;
  }
  .primary-nav.is-open{ transform: translateX(0); }
  .primary-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .primary-nav .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background: var(--grey-100); display:none; margin: 4px 0 8px; }
  .primary-nav li.is-open > .sub-menu{ display:block; }
  .nav-toggle{ display:block; position: relative; z-index: 1001; }
  .header-phone span.phone-text{ display:none; }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero{ padding: 60px 0 40px; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items:center; }
.hero h1{ margin-bottom: .4em; }
.hero .lede{ margin-bottom: 1.6em; }
.trust-row{ display:flex; flex-wrap:wrap; gap: 22px; margin-top: 34px; }
.trust-item{ display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color: var(--grey-700); }
.trust-item svg{ color: var(--pink); flex-shrink:0; }
@media (max-width: 860px){ .hero-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   6. IMAGE PLACEHOLDER
   ========================================================================== */
.img-placeholder{
  position:relative; width:100%; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--pink-light), var(--grey-100));
  border: 2px dashed var(--pink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 28px; overflow:hidden;
}
.img-placeholder.ratio-4-3{ aspect-ratio: 4/3; }
.img-placeholder.ratio-16-9{ aspect-ratio: 16/9; }
.img-placeholder.ratio-1-1{ aspect-ratio: 1/1; }
.img-placeholder.ratio-3-4{ aspect-ratio: 3/4; }
.img-placeholder .ph-icon{ color: var(--pink-dark); margin-bottom:14px; opacity:.85; }
.img-placeholder .ph-label{ font-family: var(--font-heading); font-weight:600; font-size:.82rem; color: var(--grey-900); background: rgba(255,255,255,.8); padding:4px 10px; border-radius: var(--radius-pill); margin-bottom:8px; }
.img-placeholder .ph-desc{ font-size:.82rem; color: var(--grey-700); max-width: 320px; }

/* Real photo wrapper — use this once you swap a placeholder for an
   actual image, so it keeps the same rounded corners / aspect ratio. */
.real-photo{ width:100%; border-radius: var(--radius-lg); overflow:hidden; }
.real-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.real-photo.ratio-4-3{ aspect-ratio: 4/3; }
.real-photo.ratio-16-9{ aspect-ratio: 16/9; }
.real-photo.ratio-1-1{ aspect-ratio: 1/1; }
.real-photo.ratio-3-4{ aspect-ratio: 3/4; }

/* ==========================================================================
   7. CARDS / GRIDS
   ========================================================================== */
.grid{ display:grid; gap: 26px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 960px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-md);
  padding: 30px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-icon{
  width:52px; height:52px; border-radius: var(--radius-sm); background: var(--pink-light);
  color: var(--pink-dark); display:flex; align-items:center; justify-content:center; margin-bottom: 18px;
}
.card h3{ margin-bottom:.4em; }
.card p{ color: var(--grey-700); margin-bottom:0; font-size:.96rem; }

.step-card{ position:relative; padding-top: 46px; }
.step-num{
  position:absolute; top:0; left:0; width:38px; height:38px; border-radius:50%;
  background: var(--black); color: var(--white); font-family: var(--font-heading); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}

/* Pricing */
.price-card{ background: var(--white); border-radius: var(--radius-lg); border:1px solid var(--grey-200); padding: 34px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; }
.price-card.is-highlight{ border-color: var(--pink); box-shadow: var(--shadow-pink); position:relative; }
.price-card.is-highlight::before{ content:"Most Popular"; position:absolute; top:-14px; left:50%; transform:translateX(-50%); background: var(--pink); color:#fff; font-size:.72rem; font-weight:700; padding:5px 14px; border-radius: var(--radius-pill); font-family: var(--font-heading); }
.price-amount{ font-family: var(--font-heading); font-size: 2.4rem; font-weight:700; color: var(--black); margin: 6px 0 2px; }
.price-amount span{ font-size:.95rem; font-weight:500; color: var(--grey-500); }
.price-save{ color: var(--pink-dark); font-weight:600; font-size:.85rem; margin-bottom: 18px; }
.price-list{ list-style:none; padding:0; margin: 18px 0 26px; flex-grow:1; }
.price-list li{ display:flex; gap:10px; padding: 7px 0; font-size:.92rem; color: var(--grey-700); border-top:1px solid var(--grey-100); }
.price-list li:first-child{ border-top:none; }
.price-list svg{ flex-shrink:0; color: var(--pink); margin-top:2px; }

/* Testimonials */
.testimonial-card{ background: var(--white); border-radius: var(--radius-md); padding: 30px; border:1px solid var(--grey-200); box-shadow: var(--shadow-sm); }
.stars{ color: var(--pink); letter-spacing:2px; margin-bottom: 12px; font-size: 1rem; }
.testimonial-quote{ font-size: 1.02rem; color: var(--grey-900); font-style: italic; margin-bottom: 18px; }
.testimonial-author{ font-family: var(--font-heading); font-weight:600; font-size:.9rem; color: var(--pink-darker); }
.testimonial-card.is-placeholder{ border: 2px dashed var(--grey-300); background: var(--grey-100); }
.testimonial-card.is-placeholder .testimonial-quote{ color: var(--grey-500); font-style:normal; }

/* FAQ accordion (native <details>) */
.faq-item{ background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-md); margin-bottom: 14px; overflow:hidden; }
.faq-item summary{
  cursor:pointer; list-style:none; padding: 20px 24px; font-family: var(--font-heading);
  font-weight:600; font-size: 1.02rem; color: var(--black); display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.5rem; color: var(--pink); font-weight:400; flex-shrink:0; transition: transform .2s ease; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item .faq-body{ padding: 0 24px 22px; color: var(--grey-700); }
.faq-item .faq-body ul{ margin-top:0; }
.faq-group-title{ margin-top: 44px; margin-bottom: 18px; }
.qa-num{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background: var(--pink-light); color: var(--pink-darker); font-size:.78rem; font-weight:700; font-family: var(--font-heading); flex-shrink:0; }

/* CTA banner */
.cta-banner{ background: var(--black); border-radius: var(--radius-lg); padding: 56px; display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap:wrap; }
.cta-banner h2{ color: var(--white); margin-bottom:.25em; }
.cta-banner p{ color: var(--grey-300); margin-bottom:0; }
.cta-banner-pink{ background: linear-gradient(120deg, var(--pink), var(--pink-darker)); }
.cta-banner-pink h2, .cta-banner-pink p{ color:#fff; }

/* Checklist */
.checklist{ list-style:none; padding:0; margin:0; }
.checklist li{ display:flex; gap:12px; padding: 10px 0; border-top:1px solid var(--grey-200); }
.checklist li:first-child{ border-top:none; }
.checklist svg{ flex-shrink:0; color: var(--pink); margin-top:3px; }

.warning-box{ background: var(--pink-lighter); border-left: 4px solid var(--pink); border-radius: var(--radius-sm); padding: 20px 24px; }
.warning-box h4{ margin-bottom:.3em; color: var(--pink-darker); }

/* Table (pricing summary) */
table.hpd-table{ width:100%; border-collapse: collapse; background:var(--white); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-sm); }
table.hpd-table th, table.hpd-table td{ padding: 14px 18px; text-align:left; border-bottom: 1px solid var(--grey-200); font-size:.95rem; }
table.hpd-table th{ background: var(--black); color:#fff; font-family: var(--font-heading); font-weight:600; }
table.hpd-table tr:last-child td{ border-bottom:none; }

/* Video embed */
.video-wrap{ position:relative; padding-top:56.25%; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); background:#000; }
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Breadcrumb / page intro */
.page-intro{ padding: 52px 0 20px; text-align:center; }
.page-intro .lede{ margin:0 auto; }

.breadcrumbs{ padding: 14px 0 0; }
.breadcrumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; font-size:.82rem; color: var(--grey-500); }
.breadcrumbs li{ display:flex; align-items:center; gap:6px; }
.breadcrumbs a{ color: var(--grey-500); }
.breadcrumbs a:hover{ color: var(--pink-dark); }
.breadcrumbs span[aria-current]{ color: var(--grey-700); font-weight:600; }
.breadcrumbs .crumb-sep{ color: var(--grey-300); }

/* Footer */
.site-footer{ background: var(--black); color: var(--grey-300); padding: 64px 0 24px; margin-top: 80px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-grid h4{ color: var(--white); font-size: .95rem; letter-spacing:.5px; text-transform:uppercase; margin-bottom: 16px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom: 10px; }
.footer-grid a{ color: var(--grey-300); font-size: .93rem; }
.footer-grid a:hover{ color: var(--pink); }
.footer-logo{ font-family: var(--font-heading); font-weight:700; font-size:1.3rem; color:#fff; margin-bottom: 12px; display:block; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; }
.footer-social a:hover{ background: var(--pink); }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color: var(--grey-500); }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* Sticky mobile call bar */
.mobile-call-bar{ display:none; }
@media (max-width: 720px){
  .mobile-call-bar{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:998;
    background: var(--white); border-top:1px solid var(--grey-200); padding: 10px 16px;
    box-shadow: 0 -6px 20px rgba(0,0,0,.08); gap:10px;
  }
  .mobile-call-bar .btn{ flex:1; padding: 12px 10px; font-size:.9rem; }
  body{ padding-bottom: 68px; }
}

/* Utility spacing */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.section-head{ margin-bottom: 40px; max-width: 680px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* Photo slot with no image uploaded yet: soft brand block instead of a broken image */
.real-photo.no-photo{ background: linear-gradient(135deg, var(--pink-light), var(--grey-100)); display:flex; align-items:center; justify-content:center; }
.real-photo.no-photo::after{ content:""; width:56px; height:56px; opacity:.5; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DE1F6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 17h14M6 17l1.2-5.4A2 2 0 0 1 9.15 10h5.7a2 2 0 0 1 1.95 1.6L18 17M8 10l1-3h6l1 3M7 17a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm10 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/></svg>") center/contain no-repeat; }

/* Contact form */
.hpd-form .field{ margin-bottom:16px; }
.hpd-form .grid{ margin-bottom:0; gap:16px; }
.hpd-form label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.hpd-form input[type=text],.hpd-form input[type=email],.hpd-form input[type=tel],.hpd-form textarea{ width:100%; padding:12px; border:1px solid var(--grey-300); border-radius:var(--radius-sm); font:inherit; background:#fff; }
.hpd-form input:focus,.hpd-form textarea:focus{ outline:2px solid var(--pink); outline-offset:1px; border-color:var(--pink); }
.hpd-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-privacy{ font-size:.8rem; color:var(--grey-500); margin:12px 0 0; }
.form-notice{ padding:14px 16px; border-radius:var(--radius-sm); margin-bottom:18px; font-weight:500; }
.form-notice-ok{ background:#E9F8EF; color:#14663A; border:1px solid #BFE8CF; }
.form-notice-err{ background:var(--pink-lighter); color:var(--pink-darker); border:1px solid var(--pink-light); }