/*
Theme Name: GreenLeap
Theme URI: https://greenleapworks.com
Author: Julie
Description: One-page theme for GreenLeap. Digital solutions for food businesses.
Version: 11.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: greenleap
*/

:root{
  --paper:#FAFAF7; --surface:#FFFFFF; --ink:#2B3036; --text:#444B52; --ink-soft:#5F6B73; --rule:#D5DEE5;
  --blue:#52799A; --green:#5A9145; --green-ink:#3F6B30; --cta:#C45A22; --cta-dark:#A64B1A; --tint-green:#EAF2E5; --tint-blue:#E6EEF4; --orange:#E07B3C; --err:#B84A4A;
  --heading:"Quicksand","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --display:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:1rem;line-height:1.7}
img{max-width:100%;height:auto}
a{color:var(--blue);text-underline-offset:3px;font-weight:600}
h1,h2,h3{font-family:var(--heading);margin:0;line-height:1.15;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.2rem,6.6vw,3.6rem);font-weight:700;letter-spacing:-0.01em}
h2{font-size:clamp(1.55rem,4vw,2.1rem);font-weight:700;letter-spacing:-0.005em}
h3{font-size:1.2rem;font-weight:700}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
@media(min-width:720px){.wrap{padding-inline:40px}}
@media(min-width:1100px){.wrap{padding-inline:56px}}
.prose{max-width:62ch}
.stack{display:flex;flex-direction:column;gap:14px}
.muted{color:var(--ink-soft)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:9}

/* header: brand sheet uses a thick green rule under the logo */
.top{background:var(--paper);border-bottom:6px solid var(--green)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-block:32px}
.brand{display:block;line-height:0}
.brand img,.logo-img{height:54px;width:auto;display:block}
@media(max-width:600px){.bar{padding-block:14px;gap:6px 16px}.brand img,.logo-img{height:38px}.nav{font-size:.92rem}.menu-list{gap:2px 16px}}
.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px}
.nav,.foot-nav{font-family:var(--heading);font-weight:700;font-size:1.08rem}
.nav a{color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:3px solid transparent;font-weight:700}
.nav a:hover{border-color:var(--rule)}
.nav a[aria-current="page"],.nav .current-menu-item>a,.nav .current_page_item>a{border-color:var(--green)}

/* buttons: white text on a deeper shade of the brand orange (white on #E07B3C is only 3:1) */
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.2;text-decoration:none;cursor:pointer;
  background:var(--cta);color:#fff;border:2px solid var(--cta);border-radius:8px;padding:14px 26px;text-align:center;transition:background-color .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn:hover{background:var(--cta-dark);border-color:var(--cta-dark);color:#fff;transform:translateY(-1px);box-shadow:0 4px 10px rgba(19,19,19,.18)}
.btn:active{transform:none;box-shadow:none}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
.btn.alt{background:transparent;color:var(--ink);border-color:var(--blue)}
.btn.alt:hover{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none;transform:none}
.btn:focus-visible,.chip:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{box-shadow:none;transform:none}
.cta{display:flex;flex-wrap:wrap;gap:10px}

/* sections */
.sec{padding-block:52px;border-top:1px solid var(--rule)}
.sec>.wrap{display:flex;flex-direction:column;gap:26px}
.sec-head{display:flex;flex-direction:column;gap:10px}

/* contact */
.todo{color:var(--err)}
.list{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px;max-width:60ch}
.list li::marker{color:var(--green)}

/* footer */
.foot{border-top:1px solid var(--rule);padding-block:28px 40px;font-size:.95rem;color:var(--ink-soft)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px}
.foot a{color:var(--ink-soft)}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.foot-nav .menu-list{gap:4px 18px}
.foot-widgets{display:flex;align-items:center}
.foot-widgets ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.foot-widgets li{margin:0;padding:0}
.foot-widgets .wp-block-social-links{margin:0;padding:0}
.foot-widgets .wp-social-link a{color:#fff}

/* WordPress content */
.entry-content{display:flex;flex-direction:column;gap:16px}
.entry h2 a{color:var(--ink);text-decoration:none}
.alignleft{float:left;margin:0 1rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1rem}
.aligncenter{display:block;margin-inline:auto}
.wp-caption-text{font-size:.9rem;color:var(--ink-soft)}
.nav-links{display:flex;gap:16px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}

/* Contact Form 7 */
.wpcf7{max-width:840px}
.wpcf7 form{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:22px 20px;display:flex;flex-direction:column;gap:18px}
.wpcf7 form>p{margin:0}
.wpcf7 label{display:flex;flex-direction:column;gap:8px;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink-soft)}
.wpcf7 .wpcf7-form-control-wrap{display:block}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 select,.wpcf7 textarea{font:600 1rem var(--display);color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:8px;padding:11px 12px;width:100%}
.wpcf7 input:focus-visible,.wpcf7 select:focus-visible,.wpcf7 textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wpcf7 .wpcf7-list-item{display:block;margin:0 0 8px}
.wpcf7 .wpcf7-list-item label{flex-direction:row;align-items:center;gap:10px;color:var(--ink);font-weight:600}
.wpcf7 input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue)}
.wpcf7 .wpcf7-submit{display:block;margin-inline:auto;font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.2;cursor:pointer;background:var(--cta);color:#fff;border:2px solid var(--cta);border-radius:8px;padding:14px 26px;width:auto;transition:background-color .15s,border-color .15s}
.wpcf7 .wpcf7-submit:hover{background:var(--cta-dark);border-color:var(--cta-dark)}
.wpcf7 .wpcf7-not-valid-tip{color:var(--err);font-size:.9rem;font-weight:600}
.wpcf7 form.init .wpcf7-response-output,.wpcf7 form .wpcf7-response-output:empty{display:none}
.wpcf7 form .wpcf7-response-output{margin:0;border:2px solid var(--blue);border-radius:10px;padding:14px 16px;font-family:var(--display);font-weight:700}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--green)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output{border-color:var(--err)}
.wpcf7-spinner{margin:0 0 0 10px}

/* ---------- one-page layout ---------- */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:12px}

/* sections alternate backgrounds so each one reads as its own block */
.sec{border-top:1px solid var(--rule);padding-block:60px}
@media(min-width:840px){.sec{padding-block:88px}}
.sec.white{background:var(--surface)}
.hero{border-bottom:0}
.sec.green{background:var(--tint-green)}
.sec.blue{background:var(--tint-blue)}
.sec-head{gap:8px}
.sec-head p{color:var(--text);max-width:64ch}
.sec h2{font-size:clamp(1.8rem,4.2vw,2.5rem)}

.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink)}

.hero{padding-block:44px 56px}
@media(min-width:840px){.hero{padding-block:80px 88px}}
.hero .hero-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:900px){.hero .hero-grid{grid-template-columns:1.45fr .55fr;gap:56px;align-items:center}}
.hero-copy{gap:14px}
.hero .hero-copy h1{font-size:clamp(2.2rem,4.6vw,3.3rem);line-height:1.1;margin-block:4px 8px}
.hero-copy p{font-size:1.1rem}
.hero-copy .lead{font-size:1.15rem;color:var(--text)}
.hero-copy .cta{margin-top:10px}

/* photo slots: swap the placeholder for an <img class="photo-img"> when you have the photo */
.photo{margin:0}
.photo-ph,.photo-img{display:block;width:100%;aspect-ratio:4/5;border-radius:14px}
.photo-img{object-fit:cover}
.photo-ph{display:grid;place-items:center;text-align:center;padding:16px;border:2px dashed #9DB2C2;background:var(--tint-blue);color:var(--ink-soft);font-family:var(--display);font-weight:600;font-size:.95rem}
@media(max-width:899px){.photo-ph,.photo-img{aspect-ratio:4/3}}
.about-grid .photo-ph,.about-grid .photo-img{aspect-ratio:1/1}
@media(max-width:899px){.about-grid .photo{max-width:320px}}

/* offer: boxed cards, stacked full width, heading on the left and text on the right */
.rows{display:flex;flex-direction:column;gap:16px}
.row-item{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--rule);border-left:6px solid var(--green);border-radius:10px;padding:22px 22px}
.row-item:nth-child(1){border-left-color:var(--blue)}
.row-item:nth-child(2){border-left-color:var(--orange)}
.row-item:nth-child(3){border-left-color:var(--green)}
.row-item:nth-child(4){border-left-color:var(--text)}
.row-item h3{font-size:1.3rem}
.row-item .body{display:flex;flex-direction:column;gap:12px;color:var(--text);max-width:68ch}
@media(min-width:840px){.row-item{display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:40px;padding:28px 32px;align-items:start}}

/* packages: stacked, each as a wide panel */
.pkgs{display:flex;flex-direction:column;gap:20px}
.pkg{background:var(--surface);border:1px solid var(--rule);border-left:6px solid var(--green);border-radius:10px;padding:24px 22px;display:flex;flex-direction:column;gap:20px}
.pkg.basic{border-left-color:var(--blue)}
.pkg-head{display:flex;flex-direction:column;gap:8px}
.pkg-head p{color:var(--text)}
.pkg-head .sub{font-family:var(--display);font-weight:700;color:var(--green-ink)}
.pkg .intro{font-family:var(--display);font-weight:700;margin-bottom:8px}
.pkg .list{max-width:none}
.pkg .ideal{padding-top:14px;border-top:1px solid var(--rule);font-size:.95rem;color:var(--text)}
@media(min-width:840px){
  .pkg{display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:12px 40px;padding:30px 32px}
  .pkg .ideal{grid-column:1 / -1}
  .pkg .list{columns:2;column-gap:32px;display:block}
  .pkg .list li{break-inside:avoid;margin-bottom:6px}
}
.sec-foot{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;margin-top:10px}
.sec-foot p{color:var(--text)}

/* contact: text on top, form underneath, both centered */
.contact-copy{display:flex;flex-direction:column;gap:18px;max-width:840px;width:100%;margin-inline:auto}
.contact-copy h2{margin-bottom:6px}
.contact-form{max-width:840px;width:100%;margin-inline:auto;margin-top:8px}
.contact-form .wpcf7{margin-inline:auto}
.fine{font-size:.92rem;color:var(--ink-soft)}

.sec .about-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:900px){.sec .about-grid{grid-template-columns:.6fr 1.4fr;gap:56px;align-items:start}}
.about-body{max-width:760px;display:flex;flex-direction:column;gap:16px}
.cta-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.cta-center .btn{margin-top:8px}
.about-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

.foot{background:var(--paper)}
.foot .social{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.foot .social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff}
.foot .social a:hover{background:var(--ink)}

/* contact list with icons */
.ch{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.ch a{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;text-decoration:none;color:var(--ink)}
.ch a:hover .ch-text{text-decoration:underline}
.ch-icon{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;flex:none}
.ch a:hover .ch-icon{background:var(--ink)}
.ch-text{overflow-wrap:anywhere}

/* hero without a photo: single column */
.hero .hero-grid.hero-solo{grid-template-columns:1fr}
.hero-solo .hero-copy{max-width:820px}

/* phones: keep the four header links on one line (.top raises the specificity above any later .nav rule) */
@media(max-width:600px){
  .top .nav{font-size:.95rem}
  .top .nav .menu-list{gap:2px 14px}
}

/* back to top */
.to-top{position:fixed;right:16px;bottom:16px;z-index:20;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(19,19,19,.25);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s,background-color .15s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--ink)}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}