/* ==========================================================================
   Petal You — shared site styles
   Loaded last on every page, after the page's own <style> blocks.
   Tokens first, then the shared header, footer and small helpers.
   Page-specific layout stays in each page; this file only keeps the
   brand consistent (type, colour, header, footer, focus).
   ========================================================================== */

:root{
  --pp-bg:#FBF7F1;          /* page ground */
  --pp-surface:#FFFCF9;     /* cards, panels */
  --pp-tint:#F6EDE4;        /* soft blocks, hero */
  --pp-tint-2:#F1E6DC;      /* footer */
  --pp-ink:#1F2A30;         /* body text */
  --pp-ink-2:#3A464C;
  --pp-muted:#5E6A70;       /* secondary text, 5:1 on --pp-bg */
  --pp-line:#E7DCD2;
  --pp-line-2:#D9CBBF;
  --pp-accent:#B5432F;      /* terracotta: buttons, links, highlights */
  --pp-accent-deep:#8E3222; /* hover / pressed */
  --pp-accent-soft:#F7E4DC;
  --pp-sage:#3F6234;        /* "Free" */
  --pp-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --pp-sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --pp-radius:16px;
  --pp-gutter:max(24px,calc((100vw - 1312px) / 2));
}

html{-webkit-text-size-adjust:100%}
body{font-family:var(--pp-sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--pp-accent);outline-offset:2px}

/* ---------- Logo (used in every header) ---------- */
.site-logo.site-logo{display:inline-flex!important;align-items:center!important;gap:10px!important;text-decoration:none!important;color:var(--pp-accent)!important;font:500 28px/1 var(--pp-serif)!important;font-style:normal!important;letter-spacing:-.01em;white-space:nowrap;flex:none}
.site-logo.site-logo img{width:42px;height:auto;display:block;flex:none}
.site-logo.site-logo span{font:inherit!important;color:inherit!important}
.site-logo--sm.site-logo--sm{font-size:24px!important}
.site-logo--sm.site-logo--sm img{width:34px}
@media(max-width:720px){.site-logo.site-logo{font-size:25px!important}.site-logo.site-logo img{width:36px}}

/* ---------- Shared header ---------- */
.site-header.site-header{position:relative;z-index:30;height:auto;display:block;padding:0;margin:0;background:var(--pp-bg);border:0;border-bottom:1px solid var(--pp-line);box-shadow:none}
.site-header__in{max-width:1312px;margin:0 auto;padding:14px 24px;min-height:72px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px 32px}
.site-header .site-nav{position:static;height:auto;min-height:0;padding:0;margin:0;border:0;background:none;box-shadow:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;font:500 15px/1.2 var(--pp-sans)}
.site-header .site-nav a,.site-header .site-nav>button,.site-cards__btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;background:none;border:0;border-radius:0;color:var(--pp-ink)!important;font:inherit;text-decoration:none;cursor:pointer;transition:color .15s}
.site-header .site-nav a:hover,.site-header .site-nav>button:hover,.site-cards__btn:hover{color:var(--pp-accent-deep)!important}
.site-header .site-nav a[aria-current="page"]{color:var(--pp-accent)!important}
.site-header .site-nav .site-btn-outline{min-height:40px;padding:0 20px;border:1px solid var(--pp-line-2);border-radius:999px}
.site-header .site-nav .site-btn-outline:hover{border-color:var(--pp-ink)}
.site-header [hidden]{display:none!important}
.auth-pending #loginLink,.auth-pending #registerLink{visibility:hidden}

/* Cards dropdown */
.site-cards{position:relative}
.site-cards__btn svg{transition:transform .15s}
.site-cards.is-open .site-cards__btn svg{transform:rotate(180deg)}
.site-cards__menu{position:absolute;top:calc(100% + 6px);left:-16px;z-index:40;width:236px;padding:8px;background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:14px;box-shadow:0 18px 40px rgba(60,35,28,.12);display:none}
.site-cards.is-open .site-cards__menu{display:block}
.site-cards__menu a{display:flex!important;justify-content:space-between;align-items:center;min-height:40px!important;padding:0 12px!important;border-radius:9px!important;font-size:14px!important}
.site-cards__menu a:hover{background:var(--pp-tint)}
.site-cards__menu hr{border:0;border-top:1px solid var(--pp-line);margin:6px 8px}
.site-cards__menu .is-free{color:var(--pp-sage)!important;font-weight:600}
.site-cards__menu .is-free small{font-size:11px;font-weight:600;color:var(--pp-sage);background:#E6EDDD;border-radius:999px;padding:3px 8px}

/* Phone: links move into the ☰ menu (assets/mobile-menu.js) */
.site-header .mobile-menu{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--pp-line-2);border-radius:12px;background:var(--pp-surface);color:var(--pp-ink);cursor:pointer;flex:none;padding:0}
@media(max-width:720px){
  .site-header__in{min-height:64px;padding:10px 16px}
  .site-header .site-nav{display:none}
  .site-header .mobile-menu{display:inline-flex!important;margin-left:auto}
}

/* ---------- Task-page headers (checkout, card maker, DIY, My Petal…) ----------
   These keep their own markup and scripts; only the look is aligned. */
header.top,header.py-header,body>nav,.card-backbar{background:var(--pp-bg)!important;border-bottom:1px solid var(--pp-line)!important;box-shadow:none!important}

/* ---------- Shared footer ---------- */
.site-footer.site-footer{display:block;margin:0;padding:0;background:var(--pp-tint-2);border:0;color:#5E544E;font:400 14px/1.5 var(--pp-sans);text-align:left}
.site-footer__in{max-width:1312px;margin:0 auto;padding:40px 24px;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px 48px}
.site-footer__brand{display:flex;flex-direction:column;gap:8px}
.site-footer__contact{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.site-footer__contact a,.site-footer__contact button{padding:0;border:0;background:none;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:32px;color:#5E544E!important;text-decoration:none}
.site-footer__contact a span,.site-footer__contact button span{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.site-footer__contact a:hover,.site-footer__contact button:hover{color:var(--pp-ink)!important}.site-footer__contact a:hover span,.site-footer__contact button:hover span{text-decoration-color:currentColor}
.site-footer__contact svg{flex:none;color:var(--pp-accent,#C4553F)}
.site-footer__legal{font-size:.92em;color:#7A6E67}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:4px 24px;position:static;height:auto;padding:0;border:0;background:none}
.site-footer nav a{color:#5E544E!important;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:32px}
.site-footer nav a:hover{color:var(--pp-ink)!important;text-decoration-color:currentColor}

/* ---------- Small shared helpers ---------- */
.pp-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex:none}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* "My Petal" link the server adds to task-page headers when signed in */
a.signed-in-mypetal.signed-in-mypetal{border:1px solid var(--pp-line-2);color:var(--pp-ink)!important;font:500 14px/1.2 var(--pp-sans);min-height:40px;padding:0 18px;background:transparent}
a.signed-in-mypetal.signed-in-mypetal:hover{border-color:var(--pp-ink);background:transparent}
.signed-in-email.signed-in-email{font-family:var(--pp-sans);color:var(--pp-muted)}

/* Brand line under a keyword page heading (Just because, Free cards, Invitations) */
.pp-brandline,.pp-gallery .head p.pp-brandline,.head p.pp-brandline{margin:2px auto 10px;font:italic 400 22px/1.3 var(--pp-serif);color:var(--pp-accent-deep);letter-spacing:0}
@media(max-width:720px){.pp-brandline,.pp-gallery .head p.pp-brandline,.head p.pp-brandline{font-size:19px}}

/* "Your message is saved" note on a gallery after Use this message */
.pp-gallery .head p.pp-chosen-note{display:inline-block;margin:16px auto 0;padding:8px 16px;border-radius:999px;background:#FFFFFF;border:1px solid #E6CFC3;color:var(--pp-accent-deep);font-size:14px;font-weight:500}
.pp-gallery .head a.pp-ideas{display:block;margin-top:6px;color:var(--pp-accent-deep);font-weight:600;font-size:15px}


/* ---------- Main buttons: soft paper grain, gentle depth, lift on hover ----------
   Layers sit on top of each button's own colour, so every page keeps its colours and hover colours. */
.hero-actions .btn,
a.btn.make-btn,
.pay,
a.continue,
.social-btn.primary,
.btn.primary:not(.danger),
.nav-btn.primary,
#payBtn,
form #submit.btn,
#dashboard.btn,
.insp .btn,
.share-moment-btn.primary,
.ending .recipient-action-row button.primary,
.ending .ending-main-actions a{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 55%,rgba(60,14,6,.12) 100%)!important;
  background-size:140px 140px,100% 100%!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(90,24,14,.18),0 1px 2px rgba(110,40,25,.22),0 8px 18px -6px rgba(142,50,34,.45)!important;
  text-shadow:0 1px 0 rgba(90,24,14,.25);
  transition:transform .18s ease,box-shadow .18s ease,background-color .15s ease!important;
}
.hero-actions .btn:hover:not(:disabled),
a.btn.make-btn:hover:not(:disabled),
.pay:hover:not(:disabled),
a.continue:hover:not(:disabled),
.social-btn.primary:hover:not(:disabled),
.btn.primary:not(.danger):hover:not(:disabled),
.nav-btn.primary:hover:not(:disabled),
#payBtn:hover:not(:disabled),
form #submit.btn:hover:not(:disabled),
#dashboard.btn:hover:not(:disabled),
.insp .btn:hover:not(:disabled),
.share-moment-btn.primary:hover:not(:disabled),
.ending .recipient-action-row button.primary:hover:not(:disabled),
.ending .ending-main-actions a:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(90,24,14,.2),0 2px 3px rgba(110,40,25,.22),0 14px 26px -8px rgba(142,50,34,.5)!important;
}
.hero-actions .btn:active:not(:disabled),
a.btn.make-btn:active:not(:disabled),
.pay:active:not(:disabled),
a.continue:active:not(:disabled),
.social-btn.primary:active:not(:disabled),
.btn.primary:not(.danger):active:not(:disabled),
.nav-btn.primary:active:not(:disabled),
#payBtn:active:not(:disabled),
form #submit.btn:active:not(:disabled),
#dashboard.btn:active:not(:disabled),
.insp .btn:active:not(:disabled),
.share-moment-btn.primary:active:not(:disabled),
.ending .recipient-action-row button.primary:active:not(:disabled),
.ending .ending-main-actions a:active:not(:disabled){
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(90,24,14,.3),0 2px 6px -2px rgba(142,50,34,.35)!important;
}
@media (prefers-reduced-motion:reduce){
.hero-actions .btn,
a.btn.make-btn,
.pay,
a.continue,
.social-btn.primary,
.btn.primary:not(.danger),
.nav-btn.primary,
#payBtn,
form #submit.btn,
#dashboard.btn,
.insp .btn,
.share-moment-btn.primary,
.ending .recipient-action-row button.primary,
.ending .ending-main-actions a{transition:none!important}
}

/* ---------- Larger header and footer text (to match the page's scale) ---------- */
@media(min-width:900px){
  .site-logo.site-logo{font-size:32px!important}
  .site-logo.site-logo img{width:48px}
  .site-header__in{min-height:84px;padding:16px 32px}
  .site-header .site-nav{font-size:17px;gap:6px 32px}
  .site-header .site-nav .site-btn-outline{min-height:46px;padding:0 24px}
  a.signed-in-mypetal.signed-in-mypetal{font-size:16px;min-height:46px}
  .site-logo--sm.site-logo--sm{font-size:28px!important}
  .site-logo--sm.site-logo--sm img{width:40px}
  .site-footer.site-footer{font-size:16px}
  .site-footer__in{padding:48px 32px;gap:24px 56px}
  .site-footer nav{gap:6px 28px}
  .site-footer nav a{min-height:36px}
}
@media(max-width:720px){
  .site-footer.site-footer{font-size:15px}
}

/* ---------- Sticky top navigation (every page) ---------- */
:root{--pp-header-h:88px}
@media(max-width:720px){:root{--pp-header-h:68px}}
html{scroll-padding-top:calc(var(--pp-header-h) + 8px)}
.site-header.site-header,
body>header.top,
body>.card-backbar,
body>nav:first-child{position:sticky!important;top:0!important;z-index:40!important}
body>nav:first-child{background:rgba(255,250,245,.94)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* a soft shadow appears once the page has scrolled (assets/site.js adds .pp-scrolled) */
.pp-scrolled .site-header.site-header,
.pp-scrolled body>header.top,
.pp-scrolled body>.card-backbar,
.pp-scrolled body>nav:first-child{box-shadow:0 6px 18px -12px rgba(76,45,34,.35)!important}
/* panels that already stick to the top now sit below the navigation */
body .delivery-panel{top:calc(var(--pp-header-h) + 16px)}
body .builder-copy,body .interaction{top:calc(var(--pp-header-h) + 16px)!important}
/* never let a wide row push the page sideways on phones ("clip" keeps the sticky header working) */
html,body{overflow-x:clip}