/*
Theme Name: JB Celebrations
Description: Custom theme for jbcelebrations.ca. The header, footer, fonts and styles live here and can't be changed from the dashboard; each page's content is one Custom HTML block. Generated by tools/build-wordpress.js.
Author: JB Celebrations
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
*/
html{-webkit-text-size-adjust:100%}body{margin:0}.jb img{display:block;max-width:100%}.jb a{color:inherit}
/* -- Header only. This is the one part of the page that needs a real stylesheet: a media
   query to swap the desktop links for a menu button, which inline styles cannot express.
   On the live site these rules live in the theme's style.css (tools/build-wordpress.js
   copies them there). Everything below the header is inline-styled and paste-ready for a
   Custom HTML block. The menu is <details>/<summary>, so it opens and
   closes with no JavaScript. -- */
/* Wordmark: "JB Celebrations" set as one display-serif lockup, with the small tracked
   condensed face moved onto the Weddings & Events tagline beside it. The two halves of the
   name swap colour on hover. */
.jb-brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;min-width:0}
.jb-wordmark{display:inline-flex;align-items:baseline;gap:.24em;text-decoration:none;line-height:1;white-space:nowrap}
.jb-wordmark .jb-initials{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(22px,1.1vw + 16px,30px);letter-spacing:.01em;color:#FEFFEA;transition:color .2s ease}
.jb-wordmark .jb-word{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(22px,1.1vw + 16px,30px);letter-spacing:.01em;text-transform:uppercase;color:#FFFFFF;transition:color .2s ease}
.jb-tagline{font-stretch:62.5%;font-size:clamp(10px,.3vw + 8px,13px);letter-spacing:.32em;text-transform:uppercase;color:#FFFFFF;line-height:1;white-space:nowrap}
.jb-wordmark:hover .jb-initials,.jb-wordmark:focus-visible .jb-initials{color:#FFFFFF}
.jb-wordmark:hover .jb-word,.jb-wordmark:focus-visible .jb-word{color:#FEFFEA}
.jb-wordmark:focus-visible{outline:2px solid #FEFFEA;outline-offset:6px}
@media (prefers-reduced-motion:reduce){.jb-wordmark .jb-initials,.jb-wordmark .jb-word{transition:none}}
.jb-desktop-nav{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(9px,1vw,15px)}
.jb-mobile-nav{display:none}
@media (max-width:1023px){.jb-desktop-nav{display:none}.jb-mobile-nav{display:block}}
@media (max-width:699px){.jb-brand{flex-direction:column;align-items:flex-start;gap:5px}}
.jb-mobile-nav summary{list-style:none;cursor:pointer;display:inline-block;background:#FEFFEA;border:1px solid #1C1B1A;padding:9px 12px 5px;box-shadow:3px 3px 0 #1C1B1A;transition:background .18s ease,box-shadow .18s ease,transform .18s ease}
.jb-mobile-nav summary::-webkit-details-marker{display:none}
.jb-mobile-nav summary::marker{content:''}
.jb-mobile-nav[open]>summary{background:#FEFFEA;transform:translate(3px,3px);box-shadow:0 0 0 #1C1B1A}
.jb-mobile-nav>nav{position:absolute;left:0;right:0;top:100%;background:#545454;padding:24px clamp(20px,4vw,48px) 30px;z-index:20;display:flex;flex-direction:column;align-items:flex-start;gap:15px}
/* Nav buttons: a hard offset block instead of a soft shadow — it belongs with the hairline
   rules and the highlight blocks rather than looking like a web-app button. Hover presses
   the button down into its own shadow. */
.jb-nav a{display:inline-block;text-decoration:none;font-family:inherit;font-stretch:62.5%;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#1C1B1A;background:#FEFFEA;border:1px solid #1C1B1A;padding:9px 17px;line-height:1;box-shadow:3px 3px 0 #1C1B1A;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.jb-nav a:hover,.jb-nav a:focus-visible{background:#FEFFEA;transform:translate(3px,3px);box-shadow:0 0 0 #1C1B1A}
.jb-nav a:focus-visible{outline:2px solid #FEFFEA;outline-offset:4px}
.jb-nav a[aria-current="page"]{background:#1C1B1A;color:#FEFFEA;box-shadow:3px 3px 0 #FEFFEA}
.jb-nav a[aria-current="page"]:hover,.jb-nav a[aria-current="page"]:focus-visible{background:#1C1B1A;color:#FEFFEA;box-shadow:0 0 0 #FEFFEA}
@media (prefers-reduced-motion:reduce){.jb-nav a,.jb-mobile-nav summary{transition:none}.jb-nav a:hover,.jb-nav a:focus-visible,.jb-mobile-nav[open]>summary{transform:none}}


/* about page */
/* About intro: the portrait fills the intro band from the header's edge to the section's
   bottom, flush with the right page margin, and is cropped from the left. On narrow
   screens it stacks under the heading at a fixed aspect instead. */
.about-intro-img{flex:0 0 clamp(300px,36%,460px);aspect-ratio:1080/1353}
@media (max-width:760px){
  .about-intro{flex-direction:column;gap:0;padding-bottom:0}
  .about-intro>div:first-child{padding-bottom:28px}
  .about-intro-img{flex:0 0 auto;aspect-ratio:1080/1353;margin:0 calc(-1 * clamp(20px,4vw,48px))}
}