/* ==================================================================
   The Longevity Edge — Contact page styles
   ================================================================== */

/* === Kill Kadence default page header so our hero owns the top === */
body.page-template-page-contact .entry-header,
body.page-template-page-contact .page-title,
body.page-template-page-contact .entry-title { display: none !important; }
body.page-template-page-contact .content-area { margin-top: 0 !important; padding: 0 !important; }
body.page-template-page-contact .entry-content-wrap { padding: 0 !important; }
body.page-template-page-contact main#main { padding: 0 !important; }
body.page-template-page-contact .primary-sidebar { display: none !important; }

/* Shared container helper — matches the mockup _shared.css */
.contact-hero .container,
.contact-trust .container,
.contact-section .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-5); }

/* === HERO === */
.contact-hero { background: var(--canvas); padding: var(--s-9) 0 var(--s-7); border-bottom: 1px solid var(--navy-100); text-align: center; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.contact-hero .eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; color: var(--gold-text); text-transform: uppercase; letter-spacing: var(--ls-widest); margin: 0 0 var(--s-3); }
.contact-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4xl); color: var(--navy-900); margin: 0 0 var(--s-3); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.contact-hero-lede { margin: 0 auto; max-width: 60ch; font-size: var(--fs-lg); color: var(--ink-700); line-height: var(--lh-relaxed); }

/* === TRUST STRIP === */
.contact-trust { padding: var(--s-7) 0; background: var(--gold-50); border-top: 1px solid var(--gold-100); border-bottom: 1px solid var(--gold-100); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.contact-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 768px) { .contact-trust-grid { grid-template-columns: 1fr; } }
.contact-trust-item { display: flex; align-items: center; gap: var(--s-4); justify-content: center; }
.contact-trust-item svg { color: var(--gold-text); flex-shrink: 0; }
.contact-trust-item p { margin: 0; font-size: var(--fs-sm); color: var(--ink-900); line-height: var(--lh-normal); }
.contact-trust-item p strong { display: block; color: var(--navy-900); font-weight: 700; font-size: var(--fs-base); margin-bottom: 2px; }

/* === FORM + SIDEBAR GRID === */
.contact-section { padding: var(--s-9) 0 var(--s-6); background: var(--surface); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.contact-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-7); } }

/* === FORM CARD === */
.contact-form-card { background: var(--surface); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: var(--s-7); box-shadow: var(--shadow-sm); }
.contact-form-card h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); color: var(--navy-900); margin: 0 0 var(--s-3); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.contact-form-lede { margin: 0 0 var(--s-6); font-size: var(--fs-base); color: var(--ink-700); line-height: var(--lh-relaxed); }
.contact-form-tertiary { margin: var(--s-4) 0 0; font-size: var(--fs-sm); color: var(--ink-500); text-align: center; }
.contact-form-tertiary a { color: var(--gold-text); font-weight: 600; text-decoration: underline; }
.contact-form-tertiary a:hover { color: var(--cta-600); }
.contact-form-fallback { padding: var(--s-5); text-align: center; background: var(--canvas); border: 1px dashed var(--navy-100); border-radius: var(--r-md); }
.contact-form-fallback p { margin: 0 0 var(--s-4); color: var(--ink-700); }

/* === Fluent Forms field overrides (match billing form styling) === */
.contact-form-card .fluentform { font-family: var(--font-body); }
.contact-form-card .fluentform .ff-el-input--label label,
.contact-form-card .fluentform label { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-700); margin: 0 0 6px; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.contact-form-card .fluentform .ff-el-form-control,
.contact-form-card .fluentform input[type="text"],
.contact-form-card .fluentform input[type="email"],
.contact-form-card .fluentform input[type="tel"],
.contact-form-card .fluentform input[type="number"],
.contact-form-card .fluentform select,
.contact-form-card .fluentform textarea { width: 100% !important; padding: 0 var(--s-3) !important; height: 44px; font-family: var(--font-body) !important; font-size: var(--fs-base) !important; color: var(--navy-900) !important; background: var(--canvas) !important; border: 1.5px solid var(--navy-100) !important; border-radius: var(--r-md) !important; box-sizing: border-box !important; line-height: 44px !important; transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.contact-form-card .fluentform textarea { height: 140px; padding: var(--s-3) !important; line-height: 1.5 !important; resize: vertical; }
.contact-form-card .fluentform input:focus,
.contact-form-card .fluentform select:focus,
.contact-form-card .fluentform textarea:focus { outline: none !important; border-color: var(--gold-600) !important; box-shadow: 0 0 0 3px rgba(196, 156, 88, 0.15) !important; }

/* Two-column rows (FF supports container or two-fields-per-row). The mockup
   showed First/Last and Email/Topic side-by-side. We let FF handle layout
   classes; just give those classes the right grid behavior. */
.contact-form-card .fluentform .ff_columns_total_2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 var(--s-4) !important; }
@media (max-width: 560px) {
	.contact-form-card .fluentform .ff_columns_total_2 { grid-template-columns: 1fr !important; }
}

/* FF submit button matches Place Order / primary CTA */
.contact-form-card .fluentform .ff-btn-submit,
.contact-form-card .fluentform button[type="submit"] { display: block; width: 100%; height: 56px; line-height: 56px; padding: 0 var(--s-4); margin-top: var(--s-3); font-family: var(--font-body); font-size: var(--fs-base); font-weight: 700; color: #fff !important; background: var(--cta-600) !important; border: 0 !important; border-radius: var(--r-md); cursor: pointer; box-shadow: 0 4px 12px rgba(168, 38, 50, 0.18); transition: background 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); text-transform: none; }
.contact-form-card .fluentform .ff-btn-submit:hover { background: var(--cta-700) !important; box-shadow: 0 8px 20px rgba(168, 38, 50, 0.26); transform: translateY(-1px); }

/* FF success message — themed */
.contact-form-card .ff-message-success,
.contact-form-card .ff_submit_btn_loader + .ff-message-success { background: var(--gold-50) !important; border: 1px solid var(--gold-100) !important; border-left: 4px solid var(--gold-600) !important; border-radius: var(--r-md); padding: var(--s-4) var(--s-5); color: var(--navy-900); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.contact-form-card .ff-message-success a { color: var(--gold-text); font-weight: 600; }

/* FF inline errors */
.contact-form-card .fluentform .error,
.contact-form-card .fluentform .text-danger { color: var(--cta-600); font-size: var(--fs-xs); margin-top: 4px; font-weight: 500; }

/* FF checkbox row (newsletter opt-in) */
.contact-form-card .fluentform .ff-el-form-check { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--s-2); }
.contact-form-card .fluentform .ff-el-form-check input[type="checkbox"] { width: 18px !important; height: 18px !important; accent-color: var(--gold-600); margin-top: 2px; }
.contact-form-card .fluentform .ff-el-form-check label { font-size: var(--fs-sm); color: var(--ink-700); margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; }

/* === SIDEBAR === */
.contact-sidebar { display: flex; flex-direction: column; gap: var(--s-5); }

.sidebar-card { background: var(--surface); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: var(--s-6); }
.sidebar-card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--navy-900); margin: 0 0 var(--s-3); letter-spacing: var(--ls-tight); }
.sidebar-card-lede { font-size: var(--fs-sm); color: var(--ink-700); margin: 0 0 var(--s-4); line-height: var(--lh-relaxed); }
.sidebar-card--cta { background: linear-gradient(135deg, var(--canvas) 0%, var(--surface) 100%); }
.sidebar-card .btn-block { display: block; width: 100%; text-align: center; }

/* Dr. Dave card */
.doc-card { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: #fff; border: 0; border-radius: var(--r-lg); padding: var(--s-6); position: relative; overflow: hidden; }
.doc-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(229,189,92,0.18) 0%, transparent 55%); pointer-events: none; }
.doc-card-content { position: relative; z-index: 1; }
.doc-card-photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold-300); margin: 0 0 var(--s-4); background: linear-gradient(165deg, #3a3128 0%, #211a13 100%); }
.doc-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-card-photo-placeholder { display: flex; align-items: center; justify-content: center; color: var(--gold-300); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; text-align: center; letter-spacing: var(--ls-widest); }
.doc-card-tag { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--gold-300); font-weight: 700; margin: 0 0 var(--s-3); display: block; }
.doc-card h3 { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); margin: 0 0 var(--s-3); letter-spacing: var(--ls-tight); }
.doc-card-quote { color: var(--navy-100); font-size: var(--fs-sm); margin: 0 0 var(--s-4); line-height: var(--lh-relaxed); font-style: italic; }
.doc-card-email { display: inline-flex; align-items: center; gap: var(--s-2); color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold-300); padding-bottom: 1px; font-size: var(--fs-sm); }
.doc-card-email:hover { color: var(--gold-300); }

/* Contact channels (text/call/email/address tiles) */
.contact-channel { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); align-items: start; padding: var(--s-3); margin: 0 0 var(--s-3); border: 1.5px solid var(--navy-100); border-radius: var(--r-md); background: var(--canvas); text-decoration: none; color: var(--ink-900); transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), transform 180ms var(--ease-out); }
.contact-channel:hover { border-color: var(--gold-600); background: var(--gold-50); }
.contact-channel:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }
.contact-channel:last-child { margin-bottom: 0; }
.contact-channel-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-50); color: var(--navy-700); flex-shrink: 0; }
.contact-channel-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.contact-channel-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: 700; color: var(--ink-700); display: inline-flex; align-items: center; gap: var(--s-2); }
.contact-channel-tag { display: inline-block; background: var(--gold-600); color: #fff; padding: 2px 8px; border-radius: var(--r-pill); font-size: 10px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1.2; }
.contact-channel-value { font-family: var(--font-body); font-weight: 700; color: var(--navy-900); font-size: var(--fs-base); }
.contact-channel-value--secondary { font-size: var(--fs-base); font-weight: 600; color: var(--navy-700); }
.contact-channel-value--addr { font-weight: 500; font-size: var(--fs-sm); color: var(--ink-900); line-height: 1.4; }
.contact-channel-meta { font-size: var(--fs-xs); color: var(--ink-500); }

/* Primary (text us) channel — gold border to lead the eye */
.contact-channel--primary { border-color: var(--gold-600); background: var(--gold-50); }
.contact-channel--primary .contact-channel-icon { background: var(--gold-600); color: #fff; }
.contact-channel--primary:hover { background: var(--gold-100); transform: translateY(-1px); }

/* Non-link static row (address) — flatten interactions */
.contact-channel--static { cursor: default; }
.contact-channel--static:hover { border-color: var(--navy-100); background: var(--canvas); transform: none; }

/* === DEFLECTION FAQ === */
.contact-faq { padding: var(--s-6) 0 var(--s-9); background: var(--canvas); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.contact-faq-inner { max-width: 760px; margin: 0 auto; padding: 0 var(--s-5); }
.contact-faq-head { margin: 0 0 var(--s-6); }
.contact-faq-head .eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; color: var(--gold-text); text-transform: uppercase; letter-spacing: var(--ls-widest); margin: 0 0 var(--s-3); }
.contact-faq-head h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); color: var(--navy-900); margin: 0; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }

.contact-faq-item { border-bottom: 1px solid var(--navy-100); padding: var(--s-4) 0; }
.contact-faq-item:last-of-type { border-bottom: 0; }
.contact-faq-item summary { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--navy-900); cursor: pointer; list-style: none; padding-right: 32px; position: relative; transition: color 180ms var(--ease-out); }
.contact-faq-item summary::-webkit-details-marker { display: none; }
.contact-faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 700; font-size: 20px; color: var(--gold-text); transition: transform 180ms var(--ease-out); }
.contact-faq-item[open] summary::after { content: "−"; }
.contact-faq-item summary:hover { color: var(--gold-text); }
.contact-faq-body { margin-top: var(--s-3); font-size: var(--fs-base); color: var(--ink-700); line-height: var(--lh-relaxed); }
.contact-faq-body p { margin: 0; }
.contact-faq-body a { color: var(--gold-text); font-weight: 600; text-decoration: underline; }
.contact-faq-body a:hover { color: var(--cta-600); }

.contact-faq-followup { margin: var(--s-7) 0 0; padding-top: var(--s-5); border-top: 1px dashed var(--navy-100); text-align: center; font-size: var(--fs-base); color: var(--ink-700); }
.contact-faq-followup a { color: var(--gold-text); font-weight: 700; text-decoration: underline; }
.contact-faq-followup a:hover { color: var(--cta-600); }

/* v1.9.46 — Vertically center text inside Manage My Subscriptions button
   (and any sidebar block-button). Flex layout regardless of padding/line-height. */
.contact-sidebar .sidebar-card .btn-block,
.contact-sidebar .sidebar-card a.btn,
.contact-sidebar .sidebar-card .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 48px; line-height: 1.2 !important; text-align: center; box-sizing: border-box; }