/*
Theme Name: Palm Beach Exteriors
Theme URI: https://palmbeachexteriors.com
Author: Palm Beach Exteriors
Author URI: https://palmbeachexteriors.com
Description: A coastal-inspired WordPress theme for Palm Beach Exteriors — a Palm Beach, FL pressure washing & soft washing (chemical rinsing) company serving residential and commercial properties. Beach palette, sunny FL imagery, and a full set of custom post types, ACF fields, Gutenberg blocks, menus, and widgets.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pbe
Tags: business, portfolio, custom-logo, custom-menu, featured-images, block-styles, wide-blocks, editor-style, threaded-comments, translation-ready
*/

:root {
  --pbe-sand:       #F4ECDD;
  --pbe-sky:        #BDE0FE;
  --pbe-ocean:      #0F4C81;
  --pbe-palm:       #2F6B4F;
  --pbe-sunset:     #E8825B;
  --pbe-ink:        #1B2A33;
  --pbe-cloud:      #FFFFFF;
  --pbe-shell:      #FAF6EE;
  --pbe-font-head:  "Playfair Display", Georgia, serif;
  --pbe-font-body:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pbe-radius:     12px;
  --pbe-shadow:     0 10px 30px rgba(15, 76, 129, .08);
  --pbe-container:  1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--pbe-font-body);
  color: var(--pbe-ink);
  background: var(--pbe-shell);
  line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--pbe-font-head); color: var(--pbe-ocean); line-height: 1.2; margin: 0 0 .5em; }
a { color: var(--pbe-ocean); text-decoration: none; }
a:hover { color: var(--pbe-sunset); }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--pbe-container); margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.site-header { background: var(--pbe-cloud); border-bottom: 1px solid rgba(0,0,0,.06); position: sticky; top: 0; z-index: 50; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: .75rem; padding-bottom: .75rem; }
.site-logo img { max-height: 56px; width: auto; }
.site-logo .text-logo { font-family: var(--pbe-font-head); font-size: 1.4rem; color: var(--pbe-ocean); font-weight: 700; }
.primary-nav ul { display: flex; gap: 1.5rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.primary-nav a { font-weight: 500; }
.header-cta { background: var(--pbe-sunset); color: #fff; padding: .65rem 1.1rem; border-radius: 999px; font-weight: 600; }
.header-cta:hover { background: var(--pbe-ocean); color: #fff; }

/* Hero */
.pbe-hero { background: linear-gradient(135deg, var(--pbe-ocean), var(--pbe-palm)); color: #fff; padding: 5rem 0; text-align: center; }
.pbe-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); }
.pbe-hero p { font-size: 1.15rem; max-width: 640px; margin: 0 auto 1.5rem; opacity: .95; }
.pbe-btn { display: inline-block; background: var(--pbe-sunset); color: #fff; padding: .85rem 1.6rem; border-radius: 999px; font-weight: 600; }
.pbe-btn.secondary { background: #fff; color: var(--pbe-ocean); }

/* Sections & cards */
.section { padding: 4rem 0; }
.grid { display: grid; gap: 1.5rem; }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: #fff; border-radius: var(--pbe-radius); box-shadow: var(--pbe-shadow); overflow: hidden; transition: transform .2s ease; }
.card:hover { transform: translateY(-4px); }
.card .card-body { padding: 1.5rem; }

/* Service card block */
.pbe-service-card { background: #fff; border-radius: var(--pbe-radius); box-shadow: var(--pbe-shadow); padding: 1.75rem; border-top: 4px solid var(--pbe-sunset); }
.pbe-service-card h3 { margin-top: 0; }

/* Footer */
.site-footer { background: var(--pbe-ink); color: #cfd9e0; padding: 3rem 0 1.5rem; margin-top: 4rem; }
.site-footer h4 { color: #fff; }
.site-footer a { color: var(--pbe-sky); }
.footer-widgets { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 2rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; font-size: .9rem; text-align: center; }

/* Forms */
input, textarea, select { width: 100%; padding: .75rem; border: 1px solid #d0d7de; border-radius: 8px; font: inherit; }

@media (max-width: 768px) {
  .primary-nav ul { gap: 1rem; font-size: .95rem; }
  .site-header .container { flex-wrap: wrap; }
}