/**
 * Standalone stylesheet for template-parts/contact-widget.php - same
 * self-contained approach as login-modal.css: relies only on the
 * `--ink`/`--champagne`/`--pearl`/`--text`/`--muted`/`--line`/`--surface`/
 * `--glass`/`--soft`/`--ease` custom-property names blog.css AND
 * homepage.css already define identically, plus its own copy of `.icon`
 * sizing so it renders correctly even on a page with neither stylesheet.
 * Bottom-RIGHT placement (not bottom-left like the reference mockup) is
 * deliberate: blog.css's own `.toast` notification already owns
 * bottom-left:24px site-wide, so the contact button sits on the opposite
 * corner instead of fighting it for space when both are visible at once.
 */
.icon{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.125em;flex:none}

/* Floating toggle button */
.contact-toggle{position:fixed;z-index:920;right:24px;bottom:24px;width:76px;height:76px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--ink);box-shadow:0 18px 40px rgba(10,23,37,.28);isolation:isolate;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.contact-toggle:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(10,23,37,.34)}
.contact-toggle::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--champagne) 55%,transparent);animation:contactHalo 2.6s ease-out infinite;pointer-events:none}
@keyframes contactHalo{0%{transform:scale(.94);opacity:.8}75%{transform:scale(1.16);opacity:0}100%{transform:scale(1.16);opacity:0}}
.contact-toggle-inner{width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--champagne);border:1px solid rgba(255,255,255,.14)}
.contact-toggle-inner .icon{font-size:24px;color:#f3f6f7}
.contact-toggle-inner span:last-child{font-size:10.5px;font-weight:800;color:#f3f6f7;white-space:nowrap}
.contact-toggle[aria-expanded="true"]{transform:scale(.92);box-shadow:0 10px 24px rgba(10,23,37,.24)}
.contact-toggle[aria-expanded="true"]::before{display:none}

/* Backdrop + drawer */
.contact-backdrop{position:fixed;inset:0;z-index:930;background:rgba(6,14,22,.42);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
.contact-backdrop.show{opacity:1;visibility:visible}

.contact-drawer{position:fixed;z-index:940;top:0;right:0;bottom:0;width:min(400px,92vw);padding:26px 22px 28px;background:var(--glass);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-left:1px solid var(--line);box-shadow:-24px 0 56px rgba(10,23,37,.14);transform:translateX(105%);transition:transform .4s var(--ease);display:flex;flex-direction:column;overflow-y:auto}
.contact-drawer.open{transform:translateX(0)}

.contact-drawer-head{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:30px}
.contact-drawer-close{flex:0 0 auto}
.contact-drawer-title{text-align:right;padding-top:8px}
.contact-drawer-title h2{margin:0 0 8px;font-size:26px;font-weight:850;letter-spacing:-.03em;color:var(--text)}
.contact-drawer-title p{margin:0;font-size:13px;line-height:1.9;color:var(--muted)}

.contact-drawer-list{display:flex;flex-direction:column;gap:14px}
.contact-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--soft);text-decoration:none;color:var(--text);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.contact-card:hover{transform:translateX(-3px);border-color:color-mix(in srgb,var(--champagne) 45%,var(--line))}
.contact-card-icon{flex:0 0 54px;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--ink);color:var(--champagne)}
.contact-card-icon .icon{font-size:26px}
.contact-card-copy{flex:1;min-width:0;text-align:right}
.contact-card-copy strong{display:block;font-size:16px;font-weight:850;margin-bottom:5px}
.contact-card-copy span{display:block;font-size:12px;line-height:1.7;color:var(--muted)}
.contact-card-arrow{flex:0 0 auto;color:var(--muted)}
.contact-card-arrow .icon{font-size:16px}

.contact-drawer-foot{margin-top:auto;padding-top:26px;text-align:center}
.contact-drawer-foot p{margin:0;font-size:12.5px;line-height:1.9;color:var(--muted)}

@media(max-width:640px){
  .contact-toggle{width:64px;height:64px;right:16px;bottom:16px}
  .contact-toggle-inner .icon{font-size:20px}
  .contact-toggle-inner span:last-child{font-size:9.5px}
  .contact-drawer{padding:20px 16px 22px}
}