/* Rice & Rings — shared site chrome (header + footer). Ported from the mockup
   chrome and re-themed to the wedding palette used by the landing page
   (ink #261c24, wine #64344e, rose #b86d78, paper #fbf8f3).
   Scoped to chrome class-names only; inner-page content stays on Tailwind. */
:root{--green:#64344e;--green-dark:#4e2840;--navy:#261c24}

.container{max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- header ---------- */
.site-header{height:86px;background:#fff;border-bottom:1px solid #f0e7ea;position:sticky;top:0;z-index:30}
.header-inner{height:100%;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:245px;text-decoration:none}
.brand-mark{width:48px;height:48px;display:block;flex:0 0 48px}
.brand-mark svg{display:block;width:100%;height:100%}
.brand-text strong{display:block;font-family:Georgia,'Times New Roman',serif;font-weight:600;font-size:27px;line-height:1;letter-spacing:.02em;color:var(--navy)}
.brand-text small{display:block;margin-top:4px;color:var(--green);text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:3px}
.main-nav{display:flex;gap:42px;margin-left:auto;font-size:15px;font-weight:600;letter-spacing:.01em;color:#2b2027}
.main-nav a{color:inherit;text-decoration:none}
.header-search{width:290px;height:42px;display:flex;align-items:center;gap:9px;flex:0 0 290px;padding:0 13px;border:1px solid #e2d5da;border-radius:10px;background:#faf6f7;color:#7c6b72}
.header-search:focus-within{border-color:#b86d78;background:#fff;box-shadow:0 0 0 3px rgba(184,109,120,.15)}
.header-search svg{width:18px;height:18px;flex:0 0 auto;stroke-width:2}
.header-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#2b2027;font:inherit;font-size:14px}
.header-search input::placeholder{color:#a08d95}
.heart{font-size:27px;margin-left:22px;color:#2b2027;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:6px;border:0;font-weight:650;letter-spacing:.005em;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn-primary{background:#64344e;color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 1px 2px rgba(38,28,36,.12)}
.btn-primary:hover{background:#4e2840}
.btn-outline{background:#fff;color:var(--green);border:2px solid var(--green);box-shadow:none}

/* ---------- footer ---------- */
.site-footer{padding:58px 0 36px;margin-top:64px;background:radial-gradient(circle at 18% 0%,#5c3048 0,#3a1d2e 45%,#241019 100%);color:#fff}
.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:58px}
.footer-brand{text-decoration:none}
.footer-brand .brand-text strong{color:#fff}
.footer-brand .brand-text small{display:none}
.site-footer p{max-width:280px;margin:18px 0 20px;color:#ecdde3}
.site-footer h4{margin:0 0 14px;color:#fff;font-size:16px}
.site-footer nav a{display:block;margin-bottom:10px;color:#ecdde3;text-decoration:none}
.site-footer nav a:hover{color:#fff}
.socials{display:flex;gap:11px}
.socials a{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);font-weight:900;text-decoration:none}
.copyright{text-align:center;color:#cbaebb;margin-top:42px;font-size:14px}

@media(max-width:1180px){
  /* nav carries two dropdowns + four links now; collapse it before it can
     overflow the container (below this the header shows brand + CTA only). */
  .main-nav{display:none}
}
@media(max-width:1000px){
  .heart{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .container{padding:0 18px}
  .site-header{height:auto;padding:16px 0}
  .header-inner .btn{display:none}
  .header-inner{gap:14px}
  .brand{min-width:0;flex:1 1 auto}
  .header-search{width:142px;flex-basis:142px}
  .brand-text strong{font-size:21px}
  .footer-grid{grid-template-columns:1fr}
}

/* ---------- directory two-column (results + map) + map panel ----------
   Raw CSS, not Tailwind: the compiled bundle lacks lg:w-3/5, lg:w-2/5, lg:gap-8,
   lg:top-24, lg:mt-0, lg:hidden — relying on them collapsed the map to a sliver
   and leaked the mobile map-tab onto desktop. */
.pmb-dir{display:block}
.pmb-dir-main{min-width:0}
.pmb-dir-aside{margin-top:1.5rem}
@media(min-width:1024px){
  .pmb-dir{display:flex;gap:2rem;align-items:flex-start}
  .pmb-dir-main{flex:1 1 auto;min-width:0}
  .pmb-dir-aside{flex:0 0 40%;max-width:40%;margin-top:0;position:sticky;top:6rem;align-self:flex-start}
}
/* Map panel: sticky column on desktop; hidden until a side-tab opens it (as a
   fullscreen overlay) on mobile. */
#pmbmap{height:calc(100dvh - 5rem);min-height:60vh;overflow:hidden;background:#f5edef}
.pmb-maptab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;display:flex;
            flex-direction:column;align-items:center;gap:4px;background:var(--green);color:#fff;
            border:0;padding:12px 8px 12px 11px;border-radius:12px 0 0 12px;box-shadow:0 8px 20px rgba(0,0,0,.22);cursor:pointer}
.pmb-maptab span{font-size:10px;font-weight:900;letter-spacing:.06em}
.pmb-mappanel{display:none}
.pmb-mappanel.open{display:block;position:fixed;inset:0;z-index:70;background:#fff;overflow-y:auto}
.pmb-map-mhead{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7e5e4;padding:12px 16px}
.pmb-map-mhead button{background:none;border:0;cursor:pointer;color:#7c6b72;padding:6px;border-radius:8px}
.pmb-map-dhead{display:none}
@media(min-width:1024px){
  .pmb-maptab{display:none}
  .pmb-mappanel{display:block;position:static}
  .pmb-mappanel.open{position:sticky;inset:auto}
  .pmb-map-mhead{display:none}
  .pmb-map-dhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  #pmbmap{height:calc(100vh - 8rem);border:1px solid #e7e5e4;border-radius:1rem;box-shadow:0 1px 3px rgba(38,28,36,.06)}
}
.pmb-map-dhead h2{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#7c6b72;margin:0}
.pmb-map-dhead span{font-size:12px;color:#a08d95}

/* ---------- directory card thumbnail (website screenshots) ----------
   Defined here (not Tailwind) because the compiled bundle has no aspect-[]/
   object-top/w-28 utilities. aspect-ratio gives a definite box (no flaky
   percentage-height chain inside the flex card), absolute-fill covers it. */
.pmb-thumb{position:relative;display:flex;align-items:center;justify-content:center;
           flex:0 0 auto;width:7rem;min-height:9.5rem;
           overflow:hidden;background:#f5f5f4;border:0;padding:0;cursor:pointer;text-align:left}
/* The frame's aspect-ratio matches the SOURCE capture, so object-fit:cover is an
   exact fit and never crops: portrait phone captures are 390x520 (3:4), desktop
   captures 1280x800 (16:10). The column is a fixed width and the frame is centred
   in it, so a card taller than the frame gets background, never a cropped image.
   Getting this wrong is what chopped the sides off every thumbnail: a 16:10 image
   cover-fitted into a column stretched to the row height loses ~40% of its width. */
.pmb-thumb .shot{display:block;width:100%;height:auto;object-fit:cover;object-position:top}
.pmb-thumb .shot-portrait{aspect-ratio:3/4}
.pmb-thumb .shot-landscape{aspect-ratio:16/10}
.pmb-thumb .logo-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;padding:.75rem}
.pmb-thumb .logo-wrap img{max-width:100%;max-height:100%;object-fit:contain}
@media(min-width:640px){
  /* Desktop shows the same PORTRAIT phone-view capture as mobile does; 10rem wide
     makes the 3:4 frame 213px tall, which sets the card's minimum height. */
  .pmb-thumb{width:10rem;min-height:13.5rem}
}

/* ---------- header dropdowns (moving type + locations) ---------- */
.main-nav{gap:32px}
.nav-dd{position:relative;display:inline-flex}
.nav-dd>button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;line-height:1}
.nav-dd>button svg{width:13px;height:13px;transition:transform .15s}
.nav-dd:hover>button svg,.nav-dd:focus-within>button svg{transform:rotate(180deg)}
/* padding-top is a transparent hover bridge: cursor never crosses a gap */
.nav-dd-panel{position:absolute;left:0;top:100%;padding-top:16px;min-width:266px;opacity:0;visibility:hidden;transition:opacity .12s;z-index:50}
.nav-dd-panel.narrow{min-width:184px}
.nav-dd-panel.mega{left:auto;right:-335px;width:min(880px,calc(100vw - 56px))}
.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel{opacity:1;visibility:visible}
.nav-dd-inner{background:#fff;border:1px solid #e7dbdf;border-radius:14px;box-shadow:0 18px 42px rgba(38,28,36,.14);padding:8px}
.nav-dd-inner .dd-head{padding:6px 12px 3px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#a08d95}
.nav-dd-inner a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 12px;border-radius:9px;font-size:14px;font-weight:600;color:#2b2027;text-decoration:none}
.nav-dd-inner a:hover{background:#f7eef1;color:var(--green-dark)}
.nav-dd-inner a .n{font-size:12px;font-weight:700;color:#a08d95}
.nav-dd-inner .dd-all{margin-top:5px;border-top:1px solid #f4edef;color:var(--green);font-weight:800}
.nav-dd-inner .dd-all:hover{background:#f7eef1;color:var(--green-dark)}
.mega-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 12px;border-bottom:1px solid #f0e7ea;font-size:15px;font-weight:900}
.mega-head>a{padding:0;color:var(--green);font-size:13px}
.location-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 22px;padding:10px}
.location-group{padding:4px 2px 10px}
.nav-dd-inner .location-group>a{display:block;padding:5px 8px;font-size:13px;font-weight:600;color:#5f5158}
.nav-dd-inner .location-group>.state-link{display:flex;margin-bottom:2px;padding:7px 8px;border-bottom:1px solid #f0e7ea;font-size:14px;font-weight:900;color:#2b2027}
.nav-dd-inner .location-group>.state-link:hover{color:var(--green-dark)}

/* Restrained action styling: squarer edges, normal editorial type and no
   floating coloured glow. This keeps links looking authored, not templated. */
.pmb-card-action{border:1px solid #4e2840;border-radius:6px;background:#64344e;color:#fff;padding:8px 15px;font-size:14px;font-weight:650;line-height:1.25;cursor:pointer;box-shadow:0 1px 2px rgba(38,28,36,.12)}
.pmb-card-action:hover{background:#4e2840}