/*
Theme Name: ModuleFest Pet Walker Website
Theme URI: https://modulefest.com/
Author: ModuleFest
Author URI: https://modulefest.com/
Description: A clean, ready-to-use website for a dog walking business. Made to go with ModuleFest Pet Walker: it shows your services and lets customers get in touch, while bookings run in your online portal. Any website design you pick in the plugin (colours, fonts, corners) is applied to this theme.
Version: 1.4.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petbiz-walker
Tags: business, one-column, custom-menu, custom-logo, featured-images, full-width-template
*/

:root {
  /* Each value follows the website design chosen in the plugin when there is
     one (the --pc-design-* properties it prints), and falls back to this
     theme's own colours when there is not. */
  --accent: var(--pc-design-accent-btn, #3B82F6);
  --accent-ink: var(--pc-design-accent-ink, #fff);
  --accent-dark: var(--pc-design-accent-dark, #1D4ED8);
  --link: var(--pc-design-link, #1D4ED8);
  --ink: var(--pc-design-ink, #0F1E33);
  --paper: var(--pc-design-paper, #fff);
  --wash: var(--pc-design-wash, #EEF4FF);
  --line: var(--pc-design-line, #e7e2d9);
  --muted: var(--pc-design-muted, #6b6459);
  --band: var(--pc-design-accent2-btn, #0F1E33);
  --band-ink: var(--pc-design-accent2-ink, #fff);
  --radius: var(--pc-design-radius, 16px);
  --font-head: var(--pc-design-font-head, inherit);
  --font-body: var(--pc-design-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --shadow: 0 18px 40px rgba(0,0,0,.10);
}
* { box-sizing: border-box; }
body { margin:0; font-family: var(--font-body); color: var(--ink); background:var(--paper); line-height:1.6; }
img { max-width:100%; height:auto; }
a { color: var(--link); }
h1, h2, h3, h4 { font-family: var(--font-head); }
.wrap { max-width: 1080px; margin:0 auto; padding:0 22px; }
.btn { display:inline-block; background:var(--accent); color:var(--accent-ink); text-decoration:none; padding:13px 22px; border-radius:999px; font-weight:700; box-shadow:0 10px 22px rgba(0,0,0,.14); transition:transform .1s ease, background .15s ease; }
.btn:hover { background:var(--accent-dark); color:var(--accent-ink); transform:translateY(-1px); }
.btn--ghost { background:transparent; color:var(--link); box-shadow:none; border:2px solid var(--accent); }

/* Block-based buttons in the page content (Gutenberg's Button block renders a
   wrapper div plus a `.wp-block-button__link` anchor, not a plain a.btn) — same
   visual values as .btn / .btn--ghost above, just targeting the real markup. */
.wp-block-button__link { display:inline-block; background:var(--accent); color:var(--accent-ink); text-decoration:none; padding:13px 22px; border-radius:999px; font-weight:700; box-shadow:0 10px 22px rgba(0,0,0,.14); transition:transform .1s ease, background .15s ease; }
.wp-block-button__link:hover { background:var(--accent-dark); color:var(--accent-ink); transform:translateY(-1px); }
.wp-block-button.btn--ghost .wp-block-button__link { background:transparent; color:var(--link); box-shadow:none; border:2px solid var(--accent); }
.contact .box .wp-block-button .wp-block-button__link { background:var(--band-ink); color:var(--band); }
.contact .box .wp-block-button .wp-block-button__link:hover { background:var(--wash); }

/* Small utilities used by the seeded homepage content, replacing what used to
   be one-off inline styles — so nothing here needs an inline style attribute,
   which the block editor would otherwise flag as unexpected content. */
.muted { color:var(--muted); }
.tight { margin-bottom:0; }
.panel-lead { margin:0 0 10px; }
.panel-note { margin:0 0 14px; }


.site-header { position:sticky; top:0; z-index:20; background:var(--paper); backdrop-filter:saturate(1.4) blur(6px); border-bottom:1px solid var(--line); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; }
.brand .dot { width:30px; height:30px; border-radius:9px; background:var(--accent); display:inline-block; }
.nav a { margin-left:18px; text-decoration:none; color:var(--ink); font-weight:600; }
.nav a:hover { color:var(--link); }
.nav .btn { color:var(--accent-ink); }

.hero { background:radial-gradient(1200px 400px at 15% -10%, var(--paper), var(--wash)); padding:82px 0 68px; border-bottom:1px solid var(--line); }
.hero h1 { font-size: clamp(34px, 5.4vw, 58px); line-height:1.04; margin:0 0 16px; letter-spacing:-.025em; }
.hero p.lede { font-size:20px; color:var(--muted); max-width:660px; margin:0 0 26px; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero .stars { margin-left:6px; color:var(--link); font-weight:700; font-size:14px; }
.eyebrow { display:inline-block; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:999px; margin-bottom:18px; }

.trust { background:var(--band); color:var(--band-ink); }
.trust .wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:24px 22px; text-align:center; }
.trust .n { font-size:26px; font-weight:800; color:var(--band-ink); }
.trust .l { font-size:13px; color:var(--band-ink); opacity:.78; letter-spacing:.02em; }

.sec { padding:66px 0; }
h2.section-title { font-size: clamp(26px,3.4vw,36px); margin:0 0 8px; letter-spacing:-.01em; }
.section-lead { color:var(--muted); max-width:620px; margin:0 0 30px; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.card h3 { margin:0 0 6px; font-size:19px; }
.card .tick { width:38px; height:38px; border-radius:11px; background:var(--wash); color:var(--link); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; margin-bottom:12px; }

.why { background:var(--wash); }
.why .grid { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.why .card { box-shadow:none; }

.about .inner { display:grid; grid-template-columns:1.2fr 1fr; gap:34px; align-items:center; }
.about .panel { background:var(--wash); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
@media (max-width:760px) { .about .inner { grid-template-columns:1fr; } .trust .wrap { grid-template-columns:1fr; gap:10px; } }

.quote { text-align:center; }
.quote blockquote { font-size:clamp(20px,2.6vw,28px); line-height:1.4; max-width:760px; margin:0 auto 14px; font-weight:600; letter-spacing:-.01em; }
.quote cite { color:var(--muted); font-weight:600; font-style:normal; }

.contact .box { background:var(--band); color:var(--band-ink); border-radius:22px; padding:44px; text-align:center; }
.contact .box h2 { margin:0 0 10px; color:var(--band-ink); }
.contact .box p { color:var(--band-ink); opacity:.86; margin:0 auto 22px; max-width:520px; }
.contact .box a.btn { background:var(--band-ink); color:var(--band); }
.contact .box a.btn:hover { background:var(--wash); }

.site-footer { border-top:1px solid var(--line); padding:30px 0; color:var(--muted); font-size:14px; }
.site-footer .wrap { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* 1.3.0 — the block markup WordPress actually prints for a classic theme.
   A Group block wraps its children in an inner container, which made every
   grid and row above a single cell; let the children take part directly. */
.wp-block-group > .wp-block-group__inner-container { display: contents; }
.trust .wp-block-columns { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; }
.trust .wp-block-column p { margin: 0; }
@media (max-width:760px) { .trust .wp-block-columns { grid-template-columns: 1fr; gap: 10px; } }

/* The ghost button's class sits on the block's wrapper too; only the link is the button. */
.wp-block-button.btn--ghost { border: 0; background: none; box-shadow: none; padding: 0; }

.contact .box .wp-block-buttons { justify-content: center; }

/* A real menu prints list items; keep them on one line like the built-in links. */
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.nav li { list-style: none; margin: 0; padding: 0; }
@media (max-width:760px) { .site-header .wrap { flex-wrap: wrap; gap: 10px; } .nav a { margin-left: 0; margin-right: 16px; } }

/* 1.4.0: the client portal link sits quietly before Book now. */
.nav .account { margin-left:18px; color:var(--link); font-weight:600; text-decoration:none; }
.nav .account::before { content:"\1F464"; margin-right:6px; font-size:13px; }
.nav .btn { margin-left:18px; padding:9px 16px; }
.site-footer a { color:var(--link); }
.nav a.btn, .nav a.btn:hover, .nav a.btn:focus { color:var(--accent-ink); }