/*
Theme Name: Euphoria Flowers
Author: DesignedByThomas
Author URI: https://designedbythomas.com
Description: Custom theme for Euphoria Flowers, Glendale CA. Page content is editable Gutenberg blocks.
Version: 1.0.0
Text Domain: euphoria-flowers
*/
:root{
  --bg:#F5F1F7; --ink:#1D2B24; --orchid:#7B3F8C; --leaf:#3E6B50; --blush:#F0CBDA; --plum:#2A1633; --white:#fff;
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:'Gloock',Georgia,'Times New Roman',serif;
  --body:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--safe-t) + 72px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--body);padding-top:var(--safe-t);overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--orchid);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0}
p{margin:0 0 1em;max-width:62ch}
.wp-block-group,.wp-block-buttons,.wp-block-list{margin:0}
.admin-bar .rail,.admin-bar .stem{top:32px}

/* Stem rail */
.rail{position:fixed;inset:0 auto 0 0;width:300px;padding:calc(var(--safe-t) + 36px) 28px 32px 96px;z-index:20;display:flex;flex-direction:column;gap:2.2rem}
.rail .brand{font-family:var(--display);font-size:1.7rem;line-height:1.05;text-decoration:none;color:var(--ink);transition:color .2s var(--ease)}
.rail .brand:hover{color:var(--orchid)}
.rail nav{display:flex;flex-direction:column;gap:.2rem}
.rail nav a{display:block;padding:.35rem 0;text-decoration:none;font-weight:500;color:#4a5a51;position:relative;transition:color .2s var(--ease)}
.rail nav a::before{content:"";position:absolute;left:-18px;top:50%;width:10px;height:2px;background:var(--orchid);transform:scaleX(0);transform-origin:right;transition:transform .25s var(--ease)}
.rail nav a:hover{color:var(--ink)}
.rail nav a.on{color:var(--ink);font-weight:700}
.rail nav a.on::before{transform:scaleX(1)}
.rail .call{margin-top:auto}
.stem{position:fixed;left:48px;top:0;bottom:0;width:2px;background:rgba(62,107,80,.18);z-index:19}
.stem>i{position:absolute;inset:0;background:var(--leaf);transform:scaleY(0);transform-origin:top}
.bloom{position:absolute;left:1px;width:0;height:0}
.bloom b{position:absolute;left:-5px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--leaf);transition:transform .35s var(--ease),background .35s var(--ease)}
.bloom i{position:absolute;left:-7px;bottom:0;width:14px;height:30px;border-radius:50% 50% 50% 50%/75% 75% 25% 25%;background:var(--orchid);opacity:.9;transform-origin:50% 100%;transform:rotate(calc(var(--n)*60deg)) scale(0);transition:transform .6s var(--ease) calc(var(--n)*45ms)}
.bloom i:nth-child(odd){background:#A25FB2}
.bloom.open i{transform:rotate(calc(var(--n)*60deg)) scale(1)}
.bloom.open b{background:var(--blush);transform:scale(1.5)}

/* Mobile bar */
.bar{display:none}

/* Layout */
main{margin-left:300px}
main section{padding:clamp(4rem,9vw,8rem) clamp(1.25rem,5vw,5rem)}
.wrap{max-width:980px}
.btn,.wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.5rem;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--white);font:700 1rem var(--body);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn:hover,.wp-block-button .wp-block-button__link:hover{transform:translateY(-2px);background:var(--orchid);border-color:var(--orchid);color:var(--white)}
.btn:active,.wp-block-button .wp-block-button__link:active{transform:translateY(0)}
.btn-ghost .wp-block-button__link{background:transparent!important;color:var(--ink)!important}
.btn-ghost .wp-block-button__link:hover{background:var(--ink)!important;color:var(--white)!important;border-color:var(--ink)!important}
.btn.sm{min-height:42px;padding:.55rem 1.1rem;font-size:.95rem}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:.75rem}
.dark .wp-block-button .wp-block-button__link{background:var(--white);color:var(--plum);border-color:var(--white)}
.dark .wp-block-button .wp-block-button__link:hover{background:var(--blush);border-color:var(--blush);color:var(--plum)}
.dark .btn-ghost .wp-block-button__link{background:transparent!important;color:var(--white)!important;border-color:var(--white)!important}
.dark .btn-ghost .wp-block-button__link:hover{background:var(--white)!important;color:var(--plum)!important}

/* 1 Welcome */
#welcome{min-height:100svh;display:flex;align-items:center;padding-top:6rem}
#welcome h1{font-size:clamp(3.4rem,11vw,9.5rem);letter-spacing:-.02em;color:var(--plum)}
#welcome h1 .row{display:block}
#welcome h1 .row.two{color:var(--orchid);padding-left:.6em}
.ch{display:inline-block}
.js .ch{opacity:0;transform:translateY(.6em) rotate(6deg);animation:rise .8s var(--ease) forwards;animation-delay:calc(var(--i)*55ms + 150ms)}
@keyframes rise{to{opacity:1;transform:none}}
#welcome .lead{font-size:clamp(1.15rem,2vw,1.4rem);margin-top:2rem;max-width:34ch}
#welcome .wp-block-buttons{margin-top:1.75rem}
.js #welcome .lead,.js #welcome .wp-block-buttons{opacity:0;animation:rise .7s var(--ease) 1s forwards}
.js #welcome .wp-block-buttons{animation-delay:1.15s}
.rating-line{display:block;margin-top:1.75rem;font-weight:700}
.rating-line span{display:inline-block;background:var(--blush);padding:.2rem .7rem;border-radius:999px;margin-right:.4rem}

/* 2 Photos */
#photos{background:var(--blush)}
main h2{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:.5em}
.shots{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem;align-items:start;margin-top:2.5rem}
.shot{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#fff 0%,#E9D3EE 100%);display:flex;align-items:flex-end;padding:1.1rem;color:#5b3d66;font-weight:500;font-size:.95rem;border:2px dashed rgba(123,63,140,.45)}
.shot p{margin:0}
.shot:nth-child(1){grid-column:1/4;aspect-ratio:4/5;transform-origin:20% 100%}
.shot:nth-child(2){grid-column:4/7;aspect-ratio:1/1;margin-top:3.5rem;transform-origin:80% 100%}
.shot:nth-child(3){grid-column:2/6;aspect-ratio:16/9;transform-origin:50% 100%}
.shot:has(img){border:0;padding:0;background:none}
.shot figure,.shot .wp-block-image{margin:0;width:100%;height:100%}
.js .shot{opacity:0;transform:translateY(40px) scale(.82) rotate(-2deg);transition:opacity .7s var(--ease),transform .8s cubic-bezier(.3,1.35,.5,1)}
.js .shot.in{opacity:1;transform:none}
.js .shot:nth-child(2){transition-delay:.12s}.js .shot:nth-child(3){transition-delay:.24s}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.shot:hover img{transform:scale(1.04)}

/* 3 Offer */
#offer{background:var(--white)}
#offer h2{margin-bottom:1.5rem}
.rows{list-style:none;padding:0;border-top:2px solid var(--ink)}
.rows li{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.5rem .25rem;border-bottom:1px solid rgba(29,43,36,.25);font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.6rem);overflow:hidden;transition:padding-left .35s var(--ease),color .3s var(--ease)}
.rows li::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--orchid);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.rows li:hover,.rows li:focus-within{padding-left:1.25rem;color:var(--orchid)}
.rows li:hover::after{transform:scaleX(1)}
.rows small{font:500 .95rem var(--body);color:#6a776f}
.js .rows li{opacity:0;transform:translateX(-24px);transition:opacity .5s var(--ease),transform .55s var(--ease),padding-left .35s var(--ease),color .3s var(--ease)}
.js .rows li.in{opacity:1;transform:none}
.js .rows li:nth-child(2){transition-delay:.08s,.08s,0s,0s}.js .rows li:nth-child(3){transition-delay:.16s,.16s,0s,0s}

/* 4 Hours */
#hours{background:var(--leaf);color:var(--white)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem;max-width:900px}
.day{border:1.5px solid rgba(255,255,255,.55);border-radius:14px;padding:1rem .6rem;text-align:center;transition:background .25s var(--ease),transform .25s var(--ease)}
.day:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
.day p{margin:0;max-width:none}
.day .d{font-family:var(--display);font-size:1.35rem}
.day .h{font-size:.9rem;opacity:.85;margin-top:.35rem}
.js .day{opacity:0;transform:scale(.7);transition:opacity .45s var(--ease),transform .55s cubic-bezier(.3,1.5,.5,1),background .25s var(--ease)}
.js .day.in{opacity:1;transform:none}
.js .day:nth-child(2){transition-delay:.05s}.js .day:nth-child(3){transition-delay:.1s}.js .day:nth-child(4){transition-delay:.15s}.js .day:nth-child(5){transition-delay:.2s}.js .day:nth-child(6){transition-delay:.25s}.js .day:nth-child(7){transition-delay:.3s}

/* 5 Visit */
#visit{background:var(--bg)}
#visit h2{margin-bottom:1rem}
.addr{font-family:var(--display);font-size:clamp(1.8rem,4.6vw,3.6rem);line-height:1.12;margin:0 0 2rem;color:var(--plum);max-width:none}
.addr span{display:block;overflow:hidden}
.addr span em{display:block;font-style:normal;transform:translateY(105%);transition:transform .8s var(--ease)}
.addr.in span em{transform:none}
.addr.in span:nth-child(2) em{transition-delay:.1s}
.phone-big{margin-bottom:1.75rem}
.phone-big a{display:inline-block;font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);text-decoration:none;color:var(--orchid);border-bottom:3px solid var(--blush);transition:border-color .25s var(--ease)}
.phone-big a:hover{border-color:var(--orchid)}

/* 6 Reviews */
#reviews{background:var(--plum);color:var(--white)}
.score{display:flex;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.score p{max-width:28ch;margin-bottom:.6rem;font-size:1.2rem}
.score .n{font-family:var(--display);font-size:clamp(6rem,18vw,13rem);line-height:.85;color:var(--blush);margin:0;max-width:none}
.stars{display:flex;gap:.35rem;margin:1.25rem 0 2rem}
.stars svg{width:30px;height:30px;fill:var(--blush)}
.js .stars svg{transform:scale(0) rotate(-40deg);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.js .stars.in svg{transform:none}
.js .stars.in svg:nth-child(2){transition-delay:.08s}.js .stars.in svg:nth-child(3){transition-delay:.16s}.js .stars.in svg:nth-child(4){transition-delay:.24s}.js .stars.in svg:nth-child(5){transition-delay:.32s}

/* Footer */
.site-footer{margin-left:300px;background:#1B0E22;color:rgba(255,255,255,.88);padding:2.5rem clamp(1.25rem,5vw,5rem) calc(2rem + var(--safe-b))}
.site-footer .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.2)}
.site-footer .top div{font-size:.98rem}
.site-footer .top strong{font-family:var(--display);font-weight:400;font-size:1.4rem;display:block;margin-bottom:.25rem}
.site-footer a{text-decoration-thickness:1px;text-underline-offset:3px}
.site-footer .credit{margin:1.25rem 0 0;font-size:.85rem;color:rgba(255,255,255,.78);max-width:none}
.site-footer .credit a{color:#fff;transition:color .2s var(--ease)}
.site-footer .credit a:hover{color:var(--blush)}

.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ease),transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* Plain pages */
.plain{margin-left:300px;padding:8rem clamp(1.25rem,5vw,5rem) 4rem;max-width:900px}

@media (max-width:899px){
  .rail,.stem{display:none}
  main,.site-footer,.plain{margin-left:0}
  .bar{display:flex;position:fixed;top:0;left:0;right:0;z-index:30;align-items:center;justify-content:space-between;gap:.75rem;padding:calc(var(--safe-t) + .6rem) 1rem .6rem;background:rgba(245,241,247,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(29,43,36,.12)}
  .admin-bar .bar{top:46px}
  .bar a.brand{font-family:var(--display);font-size:1.3rem;text-decoration:none}
  .bar .prog{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--orchid);transform:scaleX(0);transform-origin:left}
  .bar .menu{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;border-radius:10px}
  .bar .menu span,.bar .menu span::before,.bar .menu span::after{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),background .2s}
  .bar .menu span{position:relative}
  .bar .menu span::before,.bar .menu span::after{content:"";position:absolute;left:0}
  .bar .menu span::before{top:-7px}.bar .menu span::after{top:7px}
  .bar .menu[aria-expanded="true"] span{background:transparent}
  .bar .menu[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
  .bar .menu[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
  .drawer{position:fixed;left:0;right:0;top:0;z-index:25;background:var(--bg);padding:calc(var(--safe-t) + 4.5rem) 1.25rem 1.5rem;display:flex;flex-direction:column;border-bottom:2px solid var(--ink);transform:translateY(-105%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s}
  .drawer.open{transform:none;visibility:visible;transition:transform .35s var(--ease)}
  .drawer a{padding:.8rem 0;font-family:var(--display);font-size:1.6rem;text-decoration:none;border-bottom:1px solid rgba(29,43,36,.15)}
  #welcome{padding-top:7rem}
  .shots{grid-template-columns:1fr 1fr;gap:.9rem}
  .shot:nth-child(1){grid-column:1/2}.shot:nth-child(2){grid-column:2/3;margin-top:2rem}.shot:nth-child(3){grid-column:1/3}
  .days{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:900px){.drawer{display:none}}
@media (max-width:520px){
  .days{grid-template-columns:repeat(3,1fr)}
  .rows li{flex-direction:column;gap:.25rem}
  #welcome h1 .row.two{padding-left:.3em}
  .wp-block-button,.wp-block-button .wp-block-button__link{width:100%}
  .wp-block-buttons{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .ch,.js #welcome .lead,.js #welcome .wp-block-buttons,.js .shot,.js .reveal,.js .rows li,.js .day,.js .stars svg{opacity:1!important;transform:none!important}
  .addr span em{transform:none!important}
}