/*
Theme Name: Oh Flora
Theme URI: https://ohflora.ca
Author: Cairn Studio
Author URI: https://cairnstudio.ca
Description: Custom garden-style florist theme for Oh Flora (Calgary). Editorial, image-forward, block-content friendly.
Version: 1.1.1
Requires at least: 6.4
Tested up to: 6.6
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: ohflora
*/

/* ======================================================================
   Tokens
====================================================================== */
:root{
  --cream:#FAF7F2; --cream2:#F1ECE4;
  --blush:#C98B86; --blush-deep:#B5746F; --blush-soft:#F4E7E2; --blush-mid:#E7C9C2; --blush-label:#E9D0CA;
  --sage:#A8B5A0; --sage-deep:#6E7B64; --sage-darker:#5F6B57; --footer:#4f5a48;
  --ink:#2E2A26; --ink-soft:#6B635B; --cream-text:#F7F2EA;
  --serif:'Fraunces',Georgia,serif; --sans:'Jost',system-ui,sans-serif; --script:'Sacramento',cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--cream);line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:var(--blush-deep);text-decoration:none}
:focus-visible{outline:2px solid var(--blush-deep);outline-offset:2px}
a:focus-visible,button:focus-visible,.wp-block-button__link:focus-visible,.ohf-btn:focus-visible,.oh-parent:focus-visible,.oh-burger:focus-visible{outline:2px solid var(--blush-deep);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2rem,4vw,2.9rem)} h2{font-size:clamp(1.7rem,3.4vw,2.4rem)} h3{font-size:1.4rem}
p{margin:0 0 1rem}
em{font-style:normal;color:var(--blush-deep);font-weight:600}
h1 em,h2 em,h3 em{font-style:normal;color:var(--blush-deep);font-weight:600}
.oh-overline{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);font-weight:400}

/* ======================================================================
   Layout (classic theme + block content)
====================================================================== */
.entry-content{width:100%;overflow-x:clip}
.alignfull{width:100%;margin-left:0;margin-right:0}
/* constrained groups carry their own contentSize from block markup; this is a fallback */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:1320px;margin-left:auto;margin-right:auto}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px 14px;z-index:2000;border-radius:4px}

/* ======================================================================
   Buttons
====================================================================== */
.wp-block-button__link{border-radius:999px;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;font-family:var(--sans);padding:13px 32px;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(150,110,105,.22)}
.wp-block-button:not(.is-style-outline) .wp-block-button__link{background:var(--blush);color:#fff}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{background:var(--blush-deep)}
.wp-block-button.is-style-outline .wp-block-button__link{color:var(--blush-deep);border:1px solid var(--blush);background:transparent}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--blush);color:#fff;border-color:var(--blush)}

/* ======================================================================
   Header: announcement + split nav + centered logo
====================================================================== */
.oh-announce{background:var(--blush-deep);color:#fff;text-align:center;font-family:var(--sans);font-weight:400;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;padding:9px 16px}
.oh-header{position:sticky;top:0;z-index:999;background:var(--cream);border-bottom:1px solid #ece3d8}
.oh-header-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;padding:20px 40px}
.oh-nav{display:flex;justify-content:center}
.oh-nav>ul{display:flex;list-style:none;margin:0;padding:0;gap:34px;align-items:center}
.oh-nav a,.oh-nav .oh-parent{font-family:var(--sans);font-weight:400;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);transition:color .2s ease;white-space:nowrap}
.oh-nav .oh-parent{background:none;border:0;cursor:pointer;padding:0;display:inline-flex;align-items:center;line-height:inherit}
.oh-nav a:hover,.oh-nav .oh-parent:hover{color:var(--blush-deep)}
/* Services dropdown — soft botanical */
.oh-nav li{position:relative}
.oh-caret{display:inline-block;width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin:-3px 0 0 6px;vertical-align:middle;transition:transform .25s ease}
.oh-has-sub:hover .oh-caret{transform:rotate(45deg) translate(1px,1px)}
.oh-submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(12px);min-width:240px;list-style:none;margin:0;padding:14px 10px;background:var(--cream);border:1px solid #ece0d6;border-radius:0 0 14px 14px;box-shadow:0 20px 46px rgba(120,90,86,.20);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:60}
.oh-submenu::before{content:"";position:absolute;top:-2px;left:14px;right:14px;height:2px;background:linear-gradient(90deg,var(--blush),var(--sage));border-radius:2px}
.oh-has-sub:hover>.oh-submenu,.oh-has-sub:focus-within>.oh-submenu,.oh-has-sub.open>.oh-submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.oh-submenu li{width:100%;text-align:left}
.oh-submenu a{display:block;padding:9px 20px 9px 34px;font-family:var(--serif);font-weight:400;font-size:.97rem;letter-spacing:0;text-transform:none;color:var(--ink);position:relative;white-space:nowrap;transition:color .2s ease}
.oh-submenu a::before{content:"";position:absolute;left:16px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--blush);opacity:0;transform:translateY(-50%) scale(.5);transition:.22s ease}
.oh-submenu a:hover{color:var(--blush-deep)}
.oh-submenu a:hover::before{opacity:1;transform:translateY(-50%) scale(1)}
.oh-brand{justify-self:center;text-align:center;line-height:1;margin-top:-6px}
.oh-brand img{height:50px;width:auto;margin:0 auto}
.oh-burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.oh-burger span{display:block;width:24px;height:2px;background:var(--ink);transition:.2s}
@media(max-width:900px){
  .oh-header-inner{display:flex;flex-wrap:wrap;gap:0;padding:14px 18px;position:relative}
  /* logo pinned to the top row; nav groups stack below it */
  .oh-brand{order:-1;flex:0 0 100%;margin:0 auto;justify-self:auto}
  .oh-brand img{height:46px}
  .oh-burger{display:flex;position:absolute;left:18px;top:28px;transform:none;z-index:2}
  .oh-nav-left{order:1}
  .oh-nav-right{order:2}
  .oh-nav{display:block;flex:0 0 100%;max-height:0;overflow:hidden;transition:max-height .35s ease}
  .oh-nav>ul{flex-direction:column;align-items:stretch;gap:0}
  .oh-nav li{width:100%;text-align:center}
  .oh-header.open .oh-nav{max-height:80vh;overflow-y:auto}
  /* dividers + full-width rows only when the menu is open (no stray line when collapsed) */
  .oh-header.open .oh-nav>ul>li>a{display:block;padding:14px;border-top:1px solid #f0e8df}
  .oh-header.open .oh-parent{display:flex;width:100%;justify-content:center;padding:14px;border-top:1px solid #f0e8df}
  /* Services becomes a tap-to-open accordion on mobile */
  .oh-caret{display:inline-block}
  .oh-has-sub.open .oh-caret{transform:rotate(-135deg)}
  .oh-submenu{position:static;transform:none;left:auto;opacity:1;visibility:visible;pointer-events:auto;max-height:0;overflow:hidden;transition:max-height .3s ease;min-width:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#f6efe7;background-image:none}
  .oh-has-sub.open>.oh-submenu{max-height:420px;transform:none;left:auto}
  .oh-submenu::before{display:none}
  .oh-submenu a{text-align:center;padding:12px;font-size:.92rem;border-top:1px solid #ece0d6}
  .oh-submenu a::before{display:none}
}

/* ======================================================================
   Hero (full-bleed centered)
====================================================================== */
.ohf-hero{position:relative;min-height:86vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.ohf-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
.ohf-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,42,38,.34),rgba(46,42,38,.46) 55%,rgba(46,42,38,.58))}
.ohf-hero-inner{position:relative;z-index:2;padding:60px 24px;max-width:720px;color:var(--cream-text)}
.ohf-eyebrow{font-family:var(--sans);font-weight:400;letter-spacing:.34em;text-transform:uppercase;font-size:.76rem;color:#ecdcd4;margin:0 0 18px}
.ohf-headline{font-family:var(--serif);font-weight:400;color:#fff;font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.14;letter-spacing:.01em;margin:0 0 22px}
.ohf-welcome{font-family:var(--script);font-size:clamp(2rem,4vw,3rem);color:#f3e9df;margin:0 0 -4px;line-height:1.1}
.ohf-wordmark{font-family:var(--serif);font-weight:400;color:#fff;font-size:clamp(2.8rem,6vw,5rem);letter-spacing:.05em;text-transform:uppercase;line-height:1.05;margin:0}
.ohf-est{margin:18px 0 14px}
.ohf-rule{display:inline-flex;align-items:center;gap:12px;color:#ecdcd4;letter-spacing:.3em;font-size:.7rem;text-transform:uppercase;font-family:var(--sans)}
.ohf-rule::before,.ohf-rule::after{content:"";width:42px;height:1px;background:#ecdcd4;opacity:.8}
.ohf-tag{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.25rem);color:#f0e7dd;margin:0 0 30px}
.ohf-btn{display:inline-block;background:var(--blush);color:#fff;border-radius:999px;padding:14px 34px;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;transition:transform .2s ease,box-shadow .2s ease,background .2s,color .2s}
.ohf-btn:hover{background:var(--blush-deep);color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(150,110,105,.25)}
.ohf-btn--light{background:transparent;border:1px solid rgba(247,242,234,.65);color:var(--cream-text)}
.ohf-btn--light:hover{background:var(--cream-text);color:var(--ink);border-color:var(--cream-text)}
@media(max-width:880px){.ohf-hero{min-height:72vh}.ohf-hero-inner{padding:48px 6%}}

/* ======================================================================
   About emblem + signatures
====================================================================== */
.oh-emblem{margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.oh-emblem img{height:150px;width:auto;object-fit:contain}
@media(max-width:560px){.oh-emblem img{height:120px}}
.oh-sign-sm{font-family:var(--script);font-size:3rem;color:var(--ink);line-height:1.05}
.oh-pull{font-family:var(--serif);font-weight:500;color:var(--blush-deep);position:relative;padding-top:1.7rem}
.oh-pull::before{content:"";display:block;width:46px;height:2px;background:var(--blush);border-radius:2px;margin:0 auto 1.5rem}
.oh-sign{font-family:var(--script);font-size:3rem;color:var(--ink);line-height:1.05}
.oh-sign span{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-soft);margin-top:.7rem}

/* ======================================================================
   Services (sage band, cream cards)
====================================================================== */
.oh-svc-band .oh-overline{color:#fff}
.oh-svc-band h2,.oh-svc-band .wp-block-heading{color:#fff}
.oh-svc-band .wp-block-columns{gap:1.8rem}
.oh-svc-band .oh-card{background:var(--cream);border-radius:6px;overflow:hidden;box-shadow:0 14px 34px rgba(70,76,64,.18);text-align:center;padding-bottom:1.7rem}
.oh-svc-band .oh-card .wp-block-cover{border-radius:0;min-height:230px}
.oh-svc-band .oh-card h3{margin:1.3rem 0 .5rem;font-size:1.42rem;color:var(--ink)}
.oh-svc-band .oh-card p:not(.oh-more){color:var(--ink-soft);padding:0 1.5rem}
.oh-svc-band .oh-card .oh-more{padding:0 1.5rem;margin-top:.4rem}
.oh-more a{color:var(--blush-deep);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.oh-more a:hover{color:#9c5f5a;text-decoration:underline}
.oh-card{transition:transform .35s ease}
.oh-card:hover{transform:translateY(-4px)}
.oh-facts{list-style:none;margin:1.1rem 0 1.4rem;padding:0}
.oh-facts li{position:relative;padding-left:1.3rem;margin:.45rem 0;line-height:1.5}
.oh-facts li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--blush)}

/* ======================================================================
   Image zoom + masonry gallery
====================================================================== */
.oh-zoom{overflow:hidden}
.oh-zoom .wp-block-cover__image-background,.oh-zoom img{transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.oh-zoom:hover .wp-block-cover__image-background,.oh-zoom:hover img{transform:scale(1.06)}
.wp-block-gallery.columns-3{display:block !important;column-count:3;column-gap:18px}
.wp-block-gallery.columns-3 .wp-block-image{display:block !important;width:100% !important;margin:0 0 18px !important;break-inside:avoid;position:relative;overflow:hidden;border-radius:3px}
.wp-block-gallery.columns-3 .wp-block-image img{width:100% !important;height:auto;border-radius:3px;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.wp-block-gallery.columns-3 .wp-block-image:hover img{transform:scale(1.05)}
.wp-block-gallery.columns-3 .wp-block-image figcaption{position:absolute;left:0;right:0;bottom:0;color:#fff;margin:0;padding:2.4em 1em .7em;font-family:var(--serif);font-weight:500;background:linear-gradient(0deg,rgba(46,42,38,.62),rgba(46,42,38,0))}
@media(max-width:880px){.wp-block-gallery.columns-3{column-count:2}}
@media(max-width:520px){.wp-block-gallery.columns-3{column-count:1}}

/* ======================================================================
   Instagram row
====================================================================== */
.oh-ig-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.oh-ig-row a{position:relative;aspect-ratio:1/1;background-size:cover;background-position:center;display:block}
.oh-ig-row a::after{content:"";position:absolute;inset:0;background:rgba(168,181,160,0);transition:background .3s ease}
.oh-ig-row a:hover::after{background:rgba(168,181,160,.28)}
@media(max-width:880px){.oh-ig-row{grid-template-columns:repeat(2,1fr)}}

/* ======================================================================
   Service-page "how it works" steps
====================================================================== */
.oh-steps{position:relative;display:flex;justify-content:center;gap:2.5rem;max-width:1000px;margin:0 auto}
.oh-steps::before{content:"";position:absolute;top:34px;left:16.6%;right:16.6%;height:1px;background:#D8CFC2;z-index:0}
.oh-step{position:relative;z-index:1;flex:1 1 0;max-width:300px;text-align:center}
.oh-step-num{width:68px;height:68px;margin:0 auto 1.3rem;border:1px solid var(--blush);border-radius:50%;background:var(--cream2);color:var(--blush-deep);font-family:var(--serif);font-weight:500;font-size:1.55rem;display:flex;align-items:center;justify-content:center;transition:background .3s ease,color .3s ease}
.oh-step:hover .oh-step-num{background:var(--blush);color:#fff}
.oh-step h3{margin:0 0 .6rem;font-size:1.4rem}
.oh-step p{color:var(--ink-soft);margin:0 auto;max-width:250px;line-height:1.65}
@media(max-width:760px){.oh-steps{flex-direction:column;align-items:center;gap:2.2rem}.oh-steps::before{display:none}}

/* ======================================================================
   Fluent Forms
====================================================================== */
.fluentform .ff-el-input--label label{font-family:var(--sans);color:var(--ink);font-weight:400}
.fluentform input[type=text],.fluentform input[type=email],.fluentform input[type=tel],.fluentform textarea,.fluentform select{border:1px solid #E7DED3;border-radius:4px;background:#fff;color:var(--ink);font-family:var(--sans);padding:12px 14px;transition:border-color .2s ease,box-shadow .2s ease}
.fluentform input:focus,.fluentform textarea:focus,.fluentform select:focus{border-color:var(--blush);box-shadow:0 0 0 3px rgba(201,139,134,.14);outline:none}
.fluentform .ff-btn-submit,.fluentform button[type=submit]{background-color:var(--blush);border-color:var(--blush);border-radius:999px;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;padding:13px 32px;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.fluentform .ff-btn-submit:hover,.fluentform button[type=submit]:hover{background-color:var(--blush-deep);border-color:var(--blush-deep);transform:translateY(-2px);box-shadow:0 8px 22px rgba(150,110,105,.22)}

/* ======================================================================
   Footer
====================================================================== */
.oh-footer{background:var(--footer);color:#e6e4d9}
.oh-footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;max-width:1200px;margin:0 auto;padding:58px 32px 40px}
.oh-footer-inner h4{font-family:var(--serif);color:#fbf6ee;font-weight:500;font-size:1.5rem;margin:0 0 10px;letter-spacing:.04em}
.oh-foot-brand img{height:42px;width:auto;margin-bottom:14px;filter:brightness(0) invert(1);opacity:.92}
.oh-footer .muted{color:#c7c8ba;font-size:.88rem;max-width:280px}
.oh-footer ul{list-style:none;margin:0;padding:0}
.oh-footer li{margin:7px 0}
.oh-footer a{font-size:.86rem;color:#dedcce}
.oh-footer a:hover{color:#fff}
.oh-foot-label{text-transform:uppercase;letter-spacing:.24em;font-size:.64rem;color:var(--blush-label);margin-bottom:14px}
.oh-subfoot{background:var(--blush-soft);color:#6c5a55;text-align:center;padding:14px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.oh-subfoot a{color:#6c5a55;text-decoration:underline;text-underline-offset:2px}
@media(max-width:880px){.oh-footer-inner{grid-template-columns:1fr 1fr;gap:30px 20px}}
@media(max-width:560px){
  .oh-footer-inner{grid-template-columns:1fr 1fr;gap:26px 16px;text-align:center;padding:44px 22px 28px}
  .oh-foot-brand,.oh-foot-hello{grid-column:1 / -1}
  .oh-foot-brand img{margin:0 auto 12px}
  .oh-footer .muted{margin:0 auto}
  .oh-foot-label{margin-bottom:10px}
  .oh-footer li{margin:5px 0}
}

/* ======================================================================
   Animations (revealed by mu-plugin JS; visible if JS off)
====================================================================== */
html.oh-anim .ohf-rise{opacity:0;transform:translateY(18px)}
html.oh-anim .ohf-hero .ohf-rise{animation:ohRise .9s cubic-bezier(.2,.6,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes ohRise{to{opacity:1;transform:none}}
html.oh-anim .oh-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1)}
html.oh-anim .oh-reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.oh-anim .ohf-rise,html.oh-anim .oh-reveal{opacity:1;transform:none;animation:none;transition:none}
  .oh-zoom:hover .wp-block-cover__image-background,.oh-zoom:hover img,.wp-block-gallery .wp-block-image:hover img,.oh-card:hover,.wp-block-button__link:hover,.ohf-btn:hover{transform:none}
}