/*
Theme Name: SA Housekeeping
Theme URI: https://sahousekeeping.example.com
Author: Custom Build
Author URI: https://sahousekeeping.example.com
Description: Bespoke fully dynamic WordPress theme for SA Housekeeping domestic cleaning company. Every section is manageable from the WP Admin (Customizer, Menus, and custom post types for Services, Pricing, FAQs and Reviews).
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: sa-housekeeping
*/

/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */

:root{
  --color-teal:#12a79b;
  --color-teal-dark:#0c7a71;
  --color-yellow:#f6cf1e;
  --color-dark:#141414;
  --color-dark-2:#1e1e1e;
  --color-light:#ffffff;
  --color-grey:#f4f4f4;
  --color-text:#333333;
  --radius:10px;
  --shadow:0 10px 30px rgba(0,0,0,.15);
  --container:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Poppins',Arial,Helvetica,sans-serif;
  color:var(--color-text);
  background:var(--color-light);
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{margin:0;padding:0;}
h1,h2,h3,h4{margin:0 0 15px;font-weight:700;line-height:1.25;}
p{margin:0 0 15px;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:55px 0;}
.section-title {
    text-align: center;
    font-size: 34px;
    color: var(--color-dark);
    margin-bottom: 40px;
    font-weight: 600;
        text-transform: capitalize;
}
.section-subtitle{text-align:center;color:#666;max-width:700px;margin:0 auto 40px;}
.btn{
  display:inline-block;
  padding:14px 30px;
  background:var(--color-teal);
  color:#fff;
  border:none;
  border-radius:50px;
  font-weight:600;
  cursor:pointer;
  transition:.25s ease;
  font-size:15px;
  text-align:center;
  font-family: 'Poppins';
}
.btn:hover{    background: var(--color-yellow);
    color: var(--color-dark);}
.btn-yellow{background:var(--color-yellow);color:var(--color-dark);}
.btn-yellow:hover{    background: var(--color-teal);color:#fff;}
.btn-outline{background:transparent;border:2px solid #fff;color:#fff;}
.btn-outline:hover{background:#fff;color:var(--color-dark);}
.btn-block{width:100%;text-transform: capitalize;}
.sa-field-error {
    color: #b02a2a;
    font-size: 13px;
}
/* ==========================================================================
   2. HEADER
   ========================================================================== */
.site-header{
  background:var(--color-dark);
  position:sticky;top:0;left:0;right:0;z-index:999;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.header-inner ul.main-menu {
    display: flex;
    gap: 30px;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:0 24px;max-width:var(--container);margin:0 auto;
}
.header-nav-left,.header-nav-right{
  display:flex;align-items:center;gap:26px;flex:1;
}
.header-nav-right{justify-content:flex-end;}
.site-logo-wrap{flex:0 0 auto;text-align:center;}
.site-logo-wrap img{max-height:115px;width:auto;margin:0 auto;}
.site-logo-wrap .site-title-text{
  color:#fff;font-size:22px;font-weight:700;letter-spacing:.5px;
}
.main-menu li{list-style:none;position:relative;}
.main-menu a{
  color:#fff;font-weight:500;font-size:15px;padding:8px 4px;
  transition:.2s;position:relative;
}
.main-menu a:hover{color:var(--color-yellow);}
.header-enquiry-btn{margin-left:10px;}
.menu-toggle{
  display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;
  position:relative;width:30px;height:30px;align-items:center;justify-content:center;
}
.menu-toggle .icon-bars,.menu-toggle .icon-close{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:1;
}
.menu-toggle .icon-close{display:none;font-size:30px;}
.menu-toggle.open .icon-bars{display:none;}
.menu-toggle.open .icon-close{display:block;}
@media(min-width:901px){
.mobile-menu {
    display: none;
}
}
@media(max-width:1199px){
.main-menu a {
    font-size: 14px;
}

.header-enquiry-btn {
    padding: 14px 20px;
}
.site-footer .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
}
  }
@media(max-width:900px){
  .header-nav-left,.header-nav-right{display:none;}
  .menu-toggle{display:flex;}
  .header-inner{justify-content:space-between;        padding: 5px 24px;}
  .site-logo-wrap img{max-height:94px;}

  .mobile-menu{
    display:none;flex-direction:column;background:var(--color-dark-2);
    padding:10px 24px 20px;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu li{list-style:none;border-bottom:1px solid rgba(255,255,255,.08);}
  .mobile-menu a{display:block;padding:12px 0;color:#fff;}
  .mobile-menu .header-enquiry-btn{margin:14px 0 4px;display:block;text-align:center;        color: #000;}
  .section-title {
    font-size: 25px;
    margin-bottom: 28px;
}

.section {
    padding: 38px 0;
}

.section.why-choose .why-choose-content h2 {
    font-size: 24px;
    margin: 0 0 0;
}

.section.why-choose.why-choose .flex {
    gap: 6px;
}
.hero-inner .hero-box p {
    font-size: 16px;
}

.hero-inner .hero-rating {
    font-size: 16px;
}

.hero-inner .hero-stats {
    font-size: 16px;
}
.site-footer .footer-grid {
    grid-template-columns: repeat(2, 1fr);
}
}

/* ==========================================================================
   3. HERO (Homepage section 1)
   ========================================================================== */
.hero{
  position:relative;background-size:cover;background-position:center;
  color:#fff;padding:110px 0 50px;
}
.hero::before{
  content:'';position:absolute;inset:0;background:rgba(10,10,10,.55);
}
.hero-inner{position:relative;z-index:2;max-width:850px;margin:0 auto;text-align:center;}
.hero h1 {
    font-size: 44px;
    margin-bottom: 22px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 2px 16px rgba(0, 0, 0, .45);
}
.hero-badge{
  display:inline-block;background:var(--color-yellow);color:var(--color-dark);
  padding:8px 18px;border-radius:50px;font-weight:600;font-size:14px;margin-bottom:22px;
}
.hero-box{
  background:rgba(20,20,20,.82);border-radius:var(--radius);padding:35px 40px;margin-top:10px;
}
.hero-box p{font-size:18px;color:#eee;}
.hero-rating{margin:18px 0;font-size:18px;color:#fff;}
.hero-rating .stars{color:var(--color-yellow);margin-right:8px;letter-spacing:2px;}
.hero-stats{margin-top:16px;font-size:18px;color:#eee;}
.hero-stats strong{color:var(--color-yellow);}
.hero-box .btn{margin-top:10px;}

@media(max-width:600px){
  .hero{padding:70px 0;}
  .hero h1{font-size:30px;}
  .hero-box{padding:25px 20px;}
}

/* ==========================================================================
   4. SERVICES SECTION (Homepage section 2 + Listing page)
   ========================================================================== */
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
}
@media(max-width:900px){.services-grid{grid-template-columns:1fr;}}
.service-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:.25s;text-align:center;
}
.service-card .service-thumb {
    height: 220px;
    width: 100%;
    object-fit: cover;
    background: var(--color-grey);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}
.service-card:hover img {
    transform: scale(1.08);
    overflow: hidden;
}
.service-card .service-thumb-wrap{overflow:hidden;height:220px;display: block;}
.service-card-body{padding:22px 20px 28px;}
.service-card-body h3 {
    font-size: 20px;
    color: var(--color-dark);
    font-weight: 600;
    margin: 0 0 12px;
}
.service-card-body p {
    color: #666;
    font-size: 14px;
    min-height: 64px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.service-card-body .btn{padding:10px 22px;font-size:14px;}

/* Services listing page header banner */
.page-banner{
      background: var(--color-dark);
    color: #fff;
    padding: 70px 0;
    text-align: center;
    position: relative;
    background-position: 100%;
    background-size: cover;
}

.page-banner h1 {
    color: #fff;
    margin-bottom: 8px;
    z-index: 2;
    position: relative;
    font-weight: 600;
}
.page-banner p{color:#fff;max-width:650px;margin:0 auto; position: relative;    z-index: 2;position: relative;
    font-weight: 500;}

/* Service detail page */
.service-detail-hero{
  height:360px;width:100%;object-fit:cover;border-radius:var(--radius);margin-bottom:30px;
}
.service-detail-content{margin:0 auto;}
.service-detail-content h1{color:var(--color-dark);font-size:36px;}
.service-detail-cta{
  background:var(--color-grey);border-radius:var(--radius);padding:30px;text-align:center;margin-top:0;    max-width: initial !important;
}
.service-detail-cta h3 {
    text-transform: capitalize;
    font-size: 24px;
    font-weight: 600;
}
.single-service .section.shared-question-cta {
    display: none;
}
.page-template-template-pricing .service-detail-cta {
    margin-top: 49px;
}
/* ==========================================================================
   5. PRICING (Homepage preview + Pricing page)
   ========================================================================== */
.pricing-section{
  background:var(--color-teal);color:#fff;text-align:center;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 2px,transparent 2px,transparent 12px);
}
.pricing-section .section-title{color:#fff;}
.pricing-table{
  max-width:750px;margin:30px auto 0;background:rgba(0,0,0,.05);border-radius:var(--radius);overflow:hidden;
}
.pricing-row{
  display:grid;grid-template-columns:1.4fr 1fr;
}
.pricing-row .cell{
  background:#fff;color:var(--color-text);padding:16px 22px;font-size:15px;text-align:left;
}
.pricing-row .cell.price {
    color: #000;
    font-weight: 500;
}
.pricing-row + .pricing-row{border-top:1px solid rgba(0,0,0,.06);}
.pricing-head{
  display:grid;grid-template-columns:1.4fr 1fr;font-weight:700;text-transform:none;
}
.pricing-head .cell {
    background: #f8d243;
    padding: 13px 22px 10px;
    font-size: 15px;
    color: #000;
    font-weight: 600;
    text-align: left;
}
.pricing-note{max-width:650px;margin:22px auto 0;font-size:14px;color:rgba(255,255,255,.9);}
.pricing-section .btn{    margin-top: 26px;
    background: var(--color-yellow);
    color: #000;

    border: 1px solid var(--color-yellow);}
.pricing-section .btn:hover{
      background: var(--color-teal);
      color: #fff;
          border: 1px solid #fff;
}
@media(max-width:600px){
  .pricing-row .cell.price{border-top:1px solid rgba(0,0,0,.06);}
}

/* ==========================================================================
   6. WHY CHOOSE US (Homepage section 4 + inline enquiry form)
   ========================================================================== */
.why-choose{background:var(--color-dark-2);color:#fff;}
.why-choose .flex{display:flex;gap:50px;align-items:flex-start;flex-wrap:wrap;}
.why-choose-content{flex:1 1 420px;}
.why-choose-content h2 {
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    text-transform: capitalize;
}
.why-choose-list{margin-top:20px;}
.why-choose-list li{
  list-style:none;display:flex;gap:12px;margin-bottom:14px;color:#ddd;font-size:15px;
}
.why-choose-list li .tick{
  color:var(--color-yellow);font-weight:700;flex:0 0 auto;
}
.why-choose-form-wrap{
  flex:1 1 380px;background:#fff;border-radius:var(--radius);padding:30px;color:var(--color-text);
}
.why-choose-form-wrap h3{color:var(--color-dark);}

/* ==========================================================================
   7. ENQUIRY FORM (shared: modal + inline + contact page)
   ========================================================================== */
.sa-form-row{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.sa-form-row .sa-form-group{flex:1 1 200px;    margin-bottom: 0;}
.sa-form-group{margin-bottom:16px;}
.sa-form-group label{display:none;}
.sa-form-group input,
.sa-form-group select,
.sa-form-group textarea{
  width:100%;padding:13px 16px;border:1px solid #ddd;border-radius:8px;
  font-family:inherit;font-size:14px;background:#fafafa;
}
.sa-form-group textarea{resize:vertical;min-height:100px;}
.sa-form-group input:focus,.sa-form-group select:focus,.sa-form-group textarea:focus{
  outline:none;border-color:var(--color-teal);background:#fff;
}
.sa-form-msg{margin-top:14px;font-size:14px;padding:10px 14px;border-radius:6px;display:none;}
.sa-form-msg.success{display:block;background:#e5f6ee;color:#1c7c4c;}
.sa-form-msg.error{display:block;background:#fdeaea;color:#b02a2a;}
.sa-form-submitting{opacity:.6;pointer-events:none;}
.section.shared-question-cta {
    padding: 0 0 55px;
}
/* Modal */
.sa-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;
  align-items:center;justify-content:center;z-index:9999;padding:20px;
}
.sa-modal-overlay.open{display:flex;}
.sa-modal{
  background:#fff;border-radius:var(--radius);max-width:520px;width:100%;
  padding:34px;max-height:92vh;overflow-y:auto;position:relative;
}
.sa-modal-close{
  position:absolute;top:16px;right:18px;background:var(--color-grey);border:none;
  width:34px;height:34px;border-radius:50%;font-size:25px;cursor:pointer;
}
.sa-modal h2{color:var(--color-dark);font-size:20px;    text-transform: capitalize;    font-weight: 600;}
.sa-modal .sa-modal-sub{color:#777;font-size:14px;margin-bottom:24px;}

/* Contact page */
.contact-page-wrap{display:flex;gap:28px;flex-wrap:wrap;}
.contact-info{flex:1 1 300px;}
.contact-info h2{color:var(--color-dark);}
.contact-info ul{margin-top:20px;}
.contact-info li{list-style:none;margin-bottom:16px;font-size:15px;}
.contact-info li strong{display:block;color:var(--color-teal-dark);font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;}
.contact-form-box{flex:2 1 420px;background:var(--color-grey);padding:34px;border-radius:var(--radius);}
.why-choose-form-wrap h2 {
    font-size: 22px;
    text-transform: capitalize;
    font-weight: 600;
    margin: 0 0 3px;
}

.why-choose-form-wrap p {
    font-size: 14px;
}
/* ==========================================================================
   8. REVIEWS (Homepage section 5)
   ========================================================================== */
.reviews-section{background:var(--color-light);}
.reviews-track-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.reviews-track {
    display: flex;
    width: 100%;
    overflow: visible;
    transition: transform 0.45s ease;
    will-change: transform;
}
.review-card {
    flex: 0 0 calc((100% - 48px) / 3);
    width: calc((100% - 48px) / 3);
    min-width: 0;
    box-sizing: border-box;
    background: var(--color-grey);
    border-left: 4px solid var(--color-teal);
    border-radius: 8px;
    padding: 24px;
        margin: 0 10px;
}
.reviews-slider {
    position: relative;
}
.review-card h4{margin-bottom:2px;color:var(--color-dark);font-size:16px;}
.review-card .review-loc{color:#888;font-size:13px;margin-bottom:8px;}
.review-card .stars{color:var(--color-yellow);margin-bottom:10px;letter-spacing:2px;}
.review-card p{font-size:14px;color:#555;margin-bottom:0;padding-right: 15px;}
.reviews-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #ddd;
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow);z-index:2;font-size:18px;
}
.reviews-prev{left: -13px;    margin-top: 1px;
}
.reviews-next{    right: -14px;}
.reviews-actions{text-align:center;margin-top:34px;}
.reviews-actions .btn{margin:0 8px;}
.reviews-actions .see-more{display:inline-block;margin-left:14px;color:var(--color-teal-dark);font-weight:600;}

@media(max-width:900px){
  .review-card{flex:0 0 calc(50% - 12px);}
}
@media(max-width:600px){
  .review-card{flex:0 0 100%;}
  .reviews-prev{left:-10px;}
  .reviews-next{right:-20px;}
}

/* ==========================================================================
   9. FAQ PAGE
   ========================================================================== */
.faq-list{margin:0 auto;}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 17px;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-dark);
    font-size: 16px;
    background: var(--color-grey);
    margin-bottom: 10px;
}
.faq-question .icon{color:var(--color-teal);font-size:22px;transition:.25s;}
.faq-item.active .faq-question .icon{transform:rotate(45deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 4px;}
.faq-answer-inner{padding-bottom:20px;color:#666;font-size:15px;}
.page-template-template-contact .section.shared-question-cta {
    display: none;
}
/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer{background:var(--color-dark);color:#ccc;padding:60px 0 0;}
.footer-grid {
    display: grid;
    grid-template-columns: 435px 416px 1fr;
    gap: 40px;
    padding-bottom: 40px;
}
.site-footer .footer-col.footer-contact {
    max-width: 330px;
}
.footer-contact a:hover {
    color: var(--color-yellow);
}
.footer-social a:hover svg path {
    fill: #000;
}
@media(max-width:800px){.site-footer .footer-grid{grid-template-columns:1fr;}}
.footer-col h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 18px;
    font-weight: 600;
}
.footer-col ul li{list-style:none;margin-bottom:10px;font-size:14px;}
.footer-col address{font-style:normal;font-size:14px;}
.footer-social{display:flex;gap:12px;margin-top:6px;}
.footer-social a{
  width:40px;height:40px;background:rgba(255,255,255,.08);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;transition:.2s;
}
.footer-social a:hover{background:var(--color-yellow);color: #000;}
.footer-services li a:hover{color:var(--color-yellow);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding:20px 0;text-align:center;font-size:13px;color:#888;
}
.site-footer .footer-contact p {
    font-size: 15px;
    color: #ffffffc7;
    line-height: 25px;
}
/* ==========================================================================
   11. GENERIC / WP DEFAULTS
   ========================================================================== */
.screen-reader-text{position:absolute;left:-9999px;}
.alignwide,.alignfull{max-width:100%;}
.sa-empty-state{text-align:center;color:#888;padding:30px 0;}