/*
Theme Name: Velvet Otter
Theme URI: https://example.com/velvet-otter
Author: Custom Build
Author URI: https://example.com
Description: A clean, conversion-focused WordPress theme for pool cleaning, maintenance and repair companies, modeled on the page structure of Kennesaw Pool Service (Home, Services with sub-service pages, About, Contact). Every page is edited independently through the standard WordPress block editor, and the whole site's color palette can be changed from the Customizer without touching code.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: velvet-otter
Tags: blog, e-commerce, custom-colors, custom-menu, custom-logo, featured-images, footer-widgets, full-width-template, threaded-comments, translation-ready

Velvet Otter is distributed under the terms of the GNU GPL.
*/

/* ==========================================================================
   1. CSS Custom Properties (default color scheme — overridden inline by
      the Customizer, see inc/customizer.php)
   ========================================================================== */
:root{
  --psp-primary:      #0b6ea8;
  --psp-primary-dark:  #084f79;
  --psp-secondary:    #16b3c9;
  --psp-accent:       #ffb703;
  --psp-text:         #1c2b33;
  --psp-text-light:   #55707c;
  --psp-bg:           #ffffff;
  --psp-bg-alt:       #f2f8fb;
  --psp-dark-bg:      #0b2430;
  --psp-white:        #ffffff;
  --psp-border:       #e1ecf1;
  --psp-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --psp-font-heading: Georgia, "Times New Roman", serif;
  --psp-radius: 10px;
  --psp-shadow: 0 10px 30px rgba(11,36,48,.08);
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--psp-font-body);
  color:var(--psp-text);
  background:var(--psp-bg);
  line-height:1.65;
  font-size:17px;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--psp-primary);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--psp-primary-dark);}
ul{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--psp-font-heading);
  color:var(--psp-text);
  line-height:1.2;
  margin:0 0 .5em;
  font-weight:700;
}
p{margin:0 0 1.2em;}
.screen-reader-text{position:absolute;left:-9999px;}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  background:var(--psp-primary);
  color:var(--psp-white);
  font-weight:700;
  border:2px solid var(--psp-primary);
  cursor:pointer;
  font-size:16px;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{background:var(--psp-primary-dark);border-color:var(--psp-primary-dark);color:var(--psp-white);transform:translateY(-2px);}
.btn-accent{background:var(--psp-accent);border-color:var(--psp-accent);color:var(--psp-text);}
.btn-accent:hover{background:var(--psp-text);border-color:var(--psp-text);color:var(--psp-white);}
.btn-outline{background:transparent;color:var(--psp-white);border-color:var(--psp-white);}
.btn-outline:hover{background:var(--psp-white);color:var(--psp-primary);}
.btn-block{width:100%;justify-content:center;}

.eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:13px;
  font-weight:700;
  color:var(--psp-secondary);
  margin-bottom:10px;
}

.section{padding:80px 0;}
.section-alt{background:var(--psp-bg-alt);}
.section-dark{background:var(--psp-dark-bg);color:#cfe4ec;}
.section-dark h2,.section-dark h3{color:var(--psp-white);}
.section-header{max-width:680px;margin:0 auto 48px;text-align:center;}
.section-header.align-left{margin-left:0;text-align:left;}

/* ==========================================================================
   3. Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--psp-white);
  border-bottom:1px solid var(--psp-border);
}
.header-top{
  background:var(--psp-dark-bg);
  color:#cfe4ec;
  font-size:13px;
}
.header-top .container{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:6px;padding-bottom:6px;flex-wrap:wrap;gap:8px;
  font-size:12px;
}
.header-top a{color:#cfe4ec;}
.header-top a:hover{color:var(--psp-accent);}
.header-main .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:10px;padding-bottom:10px;gap:20px;
  flex-wrap:nowrap;
}
/* Logo/name + tagline stack vertically, and the whole block is allowed to
   grow into the free space beside the nav/CTA — so the tagline has room
   to sit on one line instead of wrapping under a cramped column. */
.site-branding{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  flex:1 1 auto;min-width:0;
}
.site-branding-main{display:flex;align-items:center;}
.site-branding img{max-height:42px;width:auto;}
.site-title{
  font-family:var(--psp-font-heading);
  font-size:20px;margin:0;font-weight:700;line-height:1.15;
}
.site-title a{color:var(--psp-text);}
.site-description{
  font-size:12px;color:var(--psp-text-light);margin:0;
  width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.header-cta{display:flex;align-items:center;gap:14px;flex:none;}
.header-phone{
  display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:17px;color:var(--psp-primary);white-space:nowrap;
}
.header-phone .dashicons,.header-phone svg{flex:none;}
.header-phone small{display:block;font-weight:400;font-size:11px;color:var(--psp-text-light);text-transform:uppercase;letter-spacing:.06em;}

/* primary nav — always a single row beside the logo and CTA; it never
   wraps onto its own lines until the mobile breakpoint below switches it
   to the toggle menu entirely. */
.main-navigation{display:flex;flex:none;}
.main-navigation ul{list-style:none;display:flex;flex-wrap:nowrap;align-items:center;gap:2px;}
.main-navigation li{position:relative;}
.main-navigation a{
  display:block;padding:10px 13px;font-weight:600;color:var(--psp-text);font-size:15px;white-space:nowrap;
}
.main-navigation a:hover,.main-navigation .current-menu-item > a{color:var(--psp-primary);}
.main-navigation .sub-menu{
  list-style:none;position:absolute;top:100%;left:0;min-width:240px;
  background:var(--psp-white);box-shadow:var(--psp-shadow);border-radius:8px;
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all .18s ease;z-index:50;
}
.main-navigation li:hover > .sub-menu,.main-navigation li.focus > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.main-navigation .sub-menu a{padding:10px 14px;border-radius:6px;font-weight:500;}
.main-navigation .sub-menu a:hover{background:var(--psp-bg-alt);}
.main-navigation .menu-item-has-children > a::after{content:"";display:inline-block;margin-left:6px;border:5px solid transparent;border-top-color:currentColor;vertical-align:middle;}

.menu-toggle{
  display:none;background:var(--psp-primary);color:var(--psp-white);border:0;
  border-radius:8px;padding:10px 12px;font-size:20px;cursor:pointer;
}

@media (max-width:900px){
  .header-main .container{flex-wrap:wrap;}
  .menu-toggle{display:block;order:3;}
  .main-navigation{order:4;flex-basis:100%;display:none;}
  .main-navigation.is-open{display:block;}
  .main-navigation ul{flex-direction:column;align-items:stretch;width:100%;}
  .main-navigation .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:none;padding-left:12px;}
  .main-navigation li.is-open > .sub-menu{display:block;}
  .header-cta{order:2;}
  .header-phone span.phone-label{display:none;}
}

/* ==========================================================================
   4. Hero
   ========================================================================== */
.hero{
  position:relative;
  color:var(--psp-white);
  background:linear-gradient(180deg, rgba(6,26,36,.72), rgba(6,26,36,.55)), var(--psp-primary) center/cover no-repeat;
  padding:110px 0;
  overflow:hidden;
}
.hero.has-image{background-image:linear-gradient(180deg, rgba(6,26,36,.75), rgba(6,26,36,.55)), var(--psp-hero-image);}
.hero-inner{max-width:680px;}
.hero h1{color:var(--psp-white);font-size:clamp(32px,5vw,54px);margin-bottom:18px;}
.hero p.hero-sub{font-size:19px;color:#e7f3f7;margin-bottom:28px;max-width:560px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.hero-phone{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--psp-white);
  background:rgba(255,255,255,.12);padding:12px 20px;border-radius:999px;backdrop-filter:blur(4px);
}
.hero.small{padding:70px 0;}
.hero.small h1{font-size:clamp(28px,4vw,40px);}

/* breadcrumbs */
.breadcrumbs{font-size:13px;color:#dcecf1;margin-bottom:14px;}
.breadcrumbs a{color:#dcecf1;text-decoration:underline;}

/* ==========================================================================
   5. Content sections & cards
   ========================================================================== */
.grid{display:grid;gap:28px;}
.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:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--psp-white);
  border:1px solid var(--psp-border);
  border-radius:var(--psp-radius);
  padding:32px;
  box-shadow:var(--psp-shadow);
  height:100%;
}
.card .card-icon{
  width:56px;height:56px;border-radius:14px;
  background:var(--psp-bg-alt);color:var(--psp-primary);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:18px;
}
.card h3{font-size:20px;margin-bottom:10px;}
.card a.card-link{font-weight:700;display:inline-flex;align-items:center;gap:6px;margin-top:8px;}

.value-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  background:var(--psp-bg-alt);border-radius:var(--psp-radius);padding:36px;
}
@media (max-width:780px){.value-strip{grid-template-columns:1fr;}}
.value-strip .value-item{text-align:center;}
.value-strip .value-item strong{display:block;font-size:28px;color:var(--psp-primary);font-family:var(--psp-font-heading);}

.process-steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
@media (max-width:780px){.process-steps{grid-template-columns:1fr;}}
.process-step{position:relative;padding-left:12px;}
.process-step::before{
  counter-increment:step;content:counter(step);
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--psp-primary);color:var(--psp-white);font-weight:700;font-size:18px;
  margin-bottom:16px;
}

/* FAQ accordion */
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--psp-border);}
.faq-question{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:20px 0;font-size:17px;font-weight:700;color:var(--psp-text);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-question::after{content:"+";font-size:22px;color:var(--psp-primary);transition:transform .2s ease;}
.faq-item.is-open .faq-question::after{transform:rotate(45deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-answer-inner{padding-bottom:20px;color:var(--psp-text-light);}

/* Contact form */
.contact-form-wrap{
  background:var(--psp-white);border-radius:var(--psp-radius);box-shadow:var(--psp-shadow);
  padding:40px;border:1px solid var(--psp-border);
}
.psp-form-row{margin-bottom:18px;}
.psp-form-row label{display:block;font-weight:600;margin-bottom:6px;font-size:14px;}
.psp-form-row .req{color:#d1453b;}
.psp-form-row input,.psp-form-row select,.psp-form-row textarea{
  width:100%;padding:12px 14px;border:1px solid var(--psp-border);border-radius:8px;
  font-family:inherit;font-size:15px;background:var(--psp-bg-alt);
}
.psp-form-row input:focus,.psp-form-row select:focus,.psp-form-row textarea:focus{
  outline:2px solid var(--psp-secondary);outline-offset:1px;background:var(--psp-white);
}
.psp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
@media (max-width:600px){.psp-form-grid{grid-template-columns:1fr;}}
.psp-form-success{background:#e7f8ee;border:1px solid #b6e6c8;color:#146c34;padding:16px 20px;border-radius:8px;margin-bottom:20px;}
.psp-form-error{background:#fdeceb;border:1px solid #f3bcb6;color:#9a2c22;padding:16px 20px;border-radius:8px;margin-bottom:20px;}

/* Map */
.map-embed iframe{width:100%;height:360px;border:0;border-radius:var(--psp-radius);}

/* Service detail layout */
.service-layout{display:grid;grid-template-columns:2.2fr 1fr;gap:48px;align-items:start;}
@media (max-width:900px){.service-layout{grid-template-columns:1fr;}}
.service-sidebar{background:var(--psp-bg-alt);border-radius:var(--psp-radius);padding:28px;}
.service-sidebar h3{font-size:17px;}
.service-sidebar ul{list-style:none;}
.service-sidebar li + li{margin-top:4px;}
.service-sidebar a{display:block;padding:10px 12px;border-radius:8px;font-weight:600;}
.service-sidebar a:hover,.service-sidebar .current a{background:var(--psp-white);color:var(--psp-primary);}
.service-sidebar .cta-box{margin-top:24px;background:var(--psp-primary);color:var(--psp-white);padding:24px;border-radius:var(--psp-radius);text-align:center;}
.service-sidebar .cta-box a{color:var(--psp-white);}

.check-list{list-style:none;}
.check-list li{position:relative;padding-left:30px;margin-bottom:10px;}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--psp-secondary);font-weight:700;}

/* ==========================================================================
   6. Footer
   ========================================================================== */
.site-footer{background:var(--psp-bg-alt);color:var(--psp-text-light);padding-top:0;}
.site-footer h3{color:var(--psp-text);font-size:17px;margin-bottom:18px;}
.site-footer a{color:var(--psp-text-light);}
.site-footer a:hover{color:var(--psp-primary);}

.footer-map{width:100%;}
.footer-map .map-embed{border-radius:0;}
.footer-map .map-embed iframe{width:100%;height:340px;border:0;border-radius:0;display:block;}
.footer-map .map-view-link{margin:0;padding:6px 0;text-align:center;background:var(--psp-dark-bg);}
.footer-map .map-view-link a{color:#cfe4ec;font-size:13px;font-weight:600;}
.footer-map .map-view-link a:hover{color:var(--psp-accent);}
.footer-map-empty{background:var(--psp-accent);padding:10px 0;}
.footer-map-empty .psp-admin-hint{margin:0;font-size:14px;font-weight:600;text-align:center;color:var(--psp-text);}

/* "You Can Also Find Us Here" — extra location/listing links, shown right
   under the map as their own centered band. */
.footer-other-locations{
  background:var(--psp-dark-bg);color:#cfe4ec;
  padding:20px 0;text-align:center;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-other-locations h3{
  color:var(--psp-white);font-size:15px;margin:0 0 12px;
  text-transform:uppercase;letter-spacing:.04em;
}
.footer-other-locations ul{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 28px;margin:0;padding:0;
}
.footer-other-locations a{
  color:#cfe4ec;font-weight:600;font-size:14px;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.footer-other-locations a:hover{color:var(--psp-accent);border-bottom-color:var(--psp-accent);}

.footer-centered{
  text-align:center;padding:56px 0 32px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.footer-logo{color:var(--psp-text);font-family:var(--psp-font-heading);font-size:28px;font-weight:700;display:block;}
.footer-nav ul{list-style:none;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.footer-nav li{position:relative;}
.footer-nav a{display:block;padding:8px 14px;font-weight:600;color:var(--psp-text);border-bottom:2px solid transparent;}
.footer-nav a:hover{border-bottom-color:var(--psp-primary);color:var(--psp-primary);}
.footer-nav .current-menu-item > a{border-bottom-color:var(--psp-primary);}

.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding:64px 0 48px;border-bottom:1px solid var(--psp-border);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:10px;}
.footer-grid .footer-logo{margin-bottom:10px;}

.social-icons{display:flex;gap:10px;}
.social-icons a{
  width:40px;height:40px;border-radius:50%;background:var(--psp-white);border:1px solid var(--psp-border);
  display:flex;align-items:center;justify-content:center;color:var(--psp-text);
}
.social-icons a:hover{background:var(--psp-primary);color:var(--psp-white);border-color:var(--psp-primary);}

.site-info{padding:20px 0 32px;font-size:13px;text-align:center;border-top:1px solid var(--psp-border);margin-top:8px;}
.footer-grid + .site-info{border-top:0;margin-top:0;}

/* ==========================================================================
   7. Core block-editor content styling
   (this is what makes plain WordPress blocks — Paragraph, Heading, Image,
   List, Media & Text, Buttons — come out looking like the sections on the
   reference site, with zero custom shortcodes required)
   ========================================================================== */
.entry-content{max-width:100%;}
.entry-content > *:first-child{margin-top:0;}
.entry-content h2{font-size:32px;margin-top:1.6em;}
.entry-content h3{font-size:22px;margin-top:1.4em;}
.entry-content > .wp-block-heading:first-child,
.entry-content > h2:first-child,
.entry-content > h3:first-child{margin-top:0;}
.entry-content ul{list-style:disc;padding-left:22px;margin-bottom:1.2em;}
.entry-content ul li{margin-bottom:8px;}
.entry-content img{border-radius:var(--psp-radius);}
.entry-content figure{margin:0 0 1.5em;}
.entry-content figcaption{font-size:13px;color:var(--psp-text-light);margin-top:8px;}

/* Media & Text block — this is the alternating image/text layout used for
   "Our Process", "Comprehensive Cleaning", "Expert Repairs", etc. */
.wp-block-media-text{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;
  margin:64px 0;
}
.wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr 1fr;}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:2;}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{order:1;}
/* Force the photo to fill its whole grid column edge-to-edge, no matter
   what width/height the block editor wrote inline on the <img> (dragging
   the resize handle, or inserting at a small registered image size, both
   add an inline style/attribute that would otherwise beat this CSS —
   hence the !important overrides below). */
.wp-block-media-text__media{width:100%;height:100%;align-self:stretch;}
.wp-block-media-text__media figure{margin:0;width:100%;height:100%;}
.wp-block-media-text__media img{
  border-radius:var(--psp-radius);box-shadow:var(--psp-shadow);
  display:block;
  width:100% !important;height:100% !important;
  max-width:100% !important;
  min-height:360px;
  object-fit:cover;
}
.wp-block-media-text__content{padding:0 8px;}
.wp-block-media-text__content h2,.wp-block-media-text__content h3{margin-top:0;}
@media (max-width:780px){
  .wp-block-media-text,
  .wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr;gap:24px;margin:40px 0;}
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media,
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{order:initial;}
  .wp-block-media-text__media img{min-height:220px;}
}

/* Buttons block */
.wp-block-buttons{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0;list-style:none;padding:0;}
.wp-block-button__link{
  display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;
  background:var(--psp-primary);color:var(--psp-white)!important;font-weight:700;
  border:2px solid var(--psp-primary);text-decoration:none!important;
}
.wp-block-button__link:hover{background:var(--psp-primary-dark);border-color:var(--psp-primary-dark);}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--psp-primary)!important;}
.is-style-psp-accent .wp-block-button__link{background:var(--psp-accent);border-color:var(--psp-accent);color:var(--psp-text)!important;}

/* FAQ styling: a centered H2 "FAQs" heading followed by bold
   question / plain answer pairs, written as ordinary paragraphs. */
.faq-block{max-width:820px;margin:0 auto;}
.faq-block h2{text-align:center;margin-bottom:40px;}
.faq-block p{margin-bottom:28px;}
.faq-block p strong{display:block;font-size:18px;color:var(--psp-text);margin-bottom:6px;}

/* Section anchor targets (used by the "jump to section" list in the intro) */
.entry-content [id]{scroll-margin-top:100px;}

/* Sample-content notice banner (shown only while a page still has no real
   content of its own — disappears automatically once you edit the page) */
.psp-sample-notice{
  background:var(--psp-accent);color:var(--psp-text);
  font-size:14px;font-weight:600;text-align:center;padding:10px 0;
}

/* Home page "rest" area (everything after the More tag): a <section> block
   (our alternating-background demo sections, or a Media & Text block you
   add yourself) is already full-bleed and self-contained. Anything else —
   a plain paragraph/heading/list/image typed directly here — gets
   contained and padded automatically so it still lines up with the rest
   of the page. */
.psp-home-rest > *:not(section){
  max-width:1180px;margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px;box-sizing:border-box;
}
.psp-home-rest > *:not(section):first-child{padding-top:80px;}
.psp-home-rest > *:not(section):last-child{padding-bottom:80px;}

/* widgets */
.widget{margin-bottom:32px;}
.widget_text ul,.widget ul{list-style:none;}

/* utility */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}