/*
Theme Name: Strawberry Fields Canine Concierge EXACT
Theme URI: https://itk.net/
Author: OpenAI
Description: Locked one-page Strawberry Fields design with full pricing, working section navigation and Meet & Greet form.
Version: 1.5.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: strawberry-fields-exact
*/

:root{
  --sf-green:#0d4b38;
  --sf-deep:#063d2d;
  --sf-gold:#d6a83e;
  --sf-cream:#f9f4eb;
  --sf-ink:#153d31;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f3f0e9;color:#182b25;font-family:Georgia,"Times New Roman",serif}
a{color:inherit}
.sf-shell{min-height:100vh;padding:0;width:100%;overflow-x:hidden}
.sf-page-card{position:relative;width:100%;max-width:none;margin:0;border-radius:0;overflow:hidden;background:#fff;box-shadow:none}
.sf-page-art{display:block;width:100%;height:auto}
.sf-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:18px}
.sf-hotspot{position:absolute;z-index:8;display:block;border-radius:999px;text-indent:-9999px;overflow:hidden;cursor:pointer;background:rgba(255,255,255,0)}
.sf-hotspot:focus-visible{outline:4px solid #fff;box-shadow:0 0 0 7px var(--sf-green)}

/* Hotspot positions are percentages of the locked artwork. */
.sf-hs-home{left:1.5%;top:9.2%;width:10.9%;height:2.8%}
.sf-hs-about{left:1.5%;top:11.8%;width:10.9%;height:2.8%}
.sf-hs-services{left:1.5%;top:14.4%;width:10.9%;height:2.8%}
.sf-hs-pricing{left:1.5%;top:17.0%;width:10.9%;height:2.8%}
.sf-hs-boarding{left:1.5%;top:19.7%;width:10.9%;height:2.8%}
.sf-hs-faq{left:1.5%;top:22.4%;width:10.9%;height:2.8%}
.sf-hs-contact{left:1.5%;top:25.0%;width:10.9%;height:2.8%}
.sf-hs-hero-meet{left:34.0%;top:16.1%;width:25.6%;height:2.7%}
.sf-hs-hero-price{left:34.1%;top:18.6%;width:25.6%;height:2.7%}
.sf-hs-footer-meet{left:68.7%;top:89.0%;width:24.0%;height:3.0%}
.sf-hs-email{left:8.1%;top:89.4%;width:23.6%;height:2.6%}
.sf-hs-phone{left:33.0%;top:89.4%;width:17.0%;height:2.6%}
.sf-hs-address{left:50.2%;top:89.1%;width:18.0%;height:3.2%}

/* Editable contact text placed over deliberately blanked areas in artwork. */
.sf-contact-live{position:absolute;z-index:7;top:90.25%;font-family:Arial,Helvetica,sans-serif;font-size:clamp(13px,1.25vw,18px);font-weight:600;color:#2c382f;white-space:nowrap}
.sf-contact-email{left:12.8%}
.sf-contact-phone{left:36.9%}

/* Floating navigation: hidden at top so the artwork remains exactly as approved. */
.sf-float-nav{position:fixed;z-index:50;left:18px;top:50%;transform:translateY(-50%) translateX(-130%);opacity:0;pointer-events:none;width:102px;padding:10px 7px;border:2px solid #bc8a25;border-radius:20px;background:linear-gradient(180deg,#f4d778,#d7a63c);box-shadow:0 12px 28px rgba(0,0,0,.24);transition:.25s ease}
.sf-float-nav.is-visible{transform:translateY(-50%) translateX(0);opacity:1;pointer-events:auto}
.sf-float-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--sf-green);padding:9px 4px;border-radius:12px;font:700 11px/1.1 Arial,Helvetica,sans-serif;letter-spacing:.03em}
.sf-float-nav a:hover,.sf-float-nav a.is-active{background:rgba(255,255,255,.42)}
.sf-float-nav .dashicons{font-size:23px;width:23px;height:23px}

.sf-mobile-nav{display:none;position:fixed;z-index:55;left:10px;right:10px;bottom:10px;padding:7px;background:linear-gradient(90deg,#e6bd55,#c9962e);border:2px solid #9d721d;border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.sf-mobile-nav-inner{display:flex;justify-content:space-around;gap:3px}
.sf-mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;padding:5px;color:var(--sf-green);font:700 8px/1 Arial,sans-serif;text-decoration:none}
.sf-mobile-nav .dashicons{font-size:20px;width:20px;height:20px;margin-bottom:2px}


/* Full-screen presentation: preserve the approved artwork while letting it fill the browser width. */
@media(min-width:761px){
  .sf-page-art{width:100vw;max-width:none}
  .sf-contact-live{font-size:clamp(15px,1.15vw,22px)}
}

/* Modal */
.sf-modal[hidden]{display:none!important}
.sf-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,32,24,.77)}
.sf-modal-card{position:relative;width:min(680px,96vw);max-height:92vh;overflow:auto;border:2px solid #c79a35;border-radius:22px;background:var(--sf-cream);box-shadow:0 30px 80px rgba(0,0,0,.4);padding:28px}
.sf-modal-close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:var(--sf-green);font-size:34px;line-height:1;cursor:pointer}
.sf-modal h2{margin:0 45px 8px 0;color:var(--sf-green);font-size:32px}
.sf-modal p{font-size:17px;line-height:1.5}
.sf-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sf-field{display:flex;flex-direction:column;gap:6px}
.sf-field.sf-wide{grid-column:1/-1}
.sf-field label{font:700 14px Arial,sans-serif;color:var(--sf-green)}
.sf-field input,.sf-field select,.sf-field textarea{width:100%;border:1.5px solid #c9ad72;border-radius:10px;background:#fff;padding:12px 13px;font:16px Arial,sans-serif;color:#222}
.sf-field textarea{min-height:115px;resize:vertical}
.sf-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:linear-gradient(180deg,#efd06c,#c89124);color:#122d22;font:800 16px Arial,sans-serif;padding:14px 22px;cursor:pointer;box-shadow:0 6px 16px rgba(80,54,0,.2)}
.sf-direct-email{display:inline-block;margin-left:12px;color:var(--sf-green);font:700 15px Arial,sans-serif}
.sf-toast{position:fixed;z-index:1200;right:18px;top:18px;max-width:420px;background:#fff7df;border:2px solid #d6a83e;color:#173c2f;padding:14px 18px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.25);font:600 15px/1.4 Arial,sans-serif}

@media(max-width:1350px){.sf-float-nav{display:none}.sf-mobile-nav{display:block}.sf-shell{padding-bottom:86px}}
@media(max-width:760px){
  .sf-shell{padding:0 0 82px;background:#f3f0e9;overflow-x:auto}
  .sf-page-card{width:760px;max-width:none;border-radius:0;margin:0}
  .sf-contact-live{font-size:12px}
  .sf-form-grid{grid-template-columns:1fr}
  .sf-modal-card{padding:24px 18px}
}