/*
Theme Name: Sara Shannon Law
Description: Child theme of Hello Elementor for Sara Shannon Law. Pages, header and footer are built in Elementor; this file adds finishing touches (hover states, form styling, sticky header).
Template: hello-elementor
Version: 1.0.0
Text Domain: sara-shannon-law
*/

:root {
	--ssl-navy: var(--e-global-color-primary, #0D1B2A);
	--ssl-brass: var(--e-global-color-accent, #B08D57);
	--ssl-brass-dk: var(--e-global-color-sslbrassdk, #8A6A3A);
	--ssl-brass-lt: var(--e-global-color-sslbrasslt, #CBAA72);
	--ssl-cream: var(--e-global-color-sslcream, #F7F3EC);
	--ssl-line: var(--e-global-color-sslline, #E5DED1);
	--ssl-text: var(--e-global-color-text, #3A4653);
}

html { scroll-behavior: smooth; scroll-padding-top: 132px; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: #fff; }
::selection { background: var(--ssl-brass-lt); color: var(--ssl-navy); }
a { transition: color .2s ease; }
:focus-visible { outline: 2px solid var(--ssl-brass); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---------- header ---------- */
header#masthead { position: sticky; top: 0; z-index: 990; }
.admin-bar header#masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar header#masthead { top: 0; } }
.ssl-header { box-shadow: 0 6px 24px -18px rgba(13, 27, 42, .45); }
.ssl-logo img { display: block; height: auto; }
.ssl-topbar .elementor-heading-title { margin: 0; }
.ssl-topbar-links a { text-decoration: none; }
@media (max-width: 767px) {
	.ssl-topbar { justify-content: center; }
	.ssl-topbar > .e-con-inner { justify-content: center; }
	.ssl-topbar-links .elementor-icon-list-item:nth-child(2) { display: none; }
}
.ssl-nav .hfe-nav-menu a.hfe-menu-item { position: relative; }
.ssl-nav .hfe-nav-menu__layout-horizontal a.hfe-menu-item::after {
	content: ""; position: absolute; left: 15px; right: 15px; bottom: 5px; height: 2px;
	background: var(--ssl-brass); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.ssl-nav .hfe-nav-menu__layout-horizontal a.hfe-menu-item:hover::after,
.ssl-nav .hfe-nav-menu__layout-horizontal .current-menu-item > a.hfe-menu-item::after { transform: scaleX(1); }
.ssl-nav .hfe-nav-menu__toggle { margin-left: auto; padding: 6px; }
.ssl-nav nav.hfe-dropdown, .ssl-nav nav.hfe-dropdown-expandible { border-top: 1px solid var(--ssl-line); box-shadow: 0 18px 30px -20px rgba(13, 27, 42, .5); }
.ssl-nav nav.hfe-dropdown li.menu-item, .ssl-nav nav.hfe-dropdown-expandible li.menu-item { border-bottom: 1px solid var(--ssl-line); }

/* ---------- text ---------- */
.ssl-text p { margin: 0 0 1.15em; }
.ssl-text p:last-child, .ssl-text ul:last-child { margin-bottom: 0; }
.ssl-text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ssl-on-dark a { color: var(--ssl-brass-lt); }
.ssl-on-dark a:hover { color: #fff; }
.ssl-eyebrow .elementor-heading-title { margin: 0; }
.ssl-hero-note { opacity: .82; }
.ssl-prose p { max-width: 68ch; }
.ssl-legal h2 { font-size: 28px; margin: 1.8em 0 .5em; }
.ssl-legal h2:first-child { margin-top: 0; }
.ssl-cred ul { list-style: none; margin: 0; padding: 0; }
.ssl-cred li { padding: 10px 0; border-bottom: 1px solid var(--ssl-line); color: #66727F; font-style: italic; }

/* ---------- buttons ---------- */
.ssl-btn .elementor-button { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.ssl-btn .elementor-button:hover { transform: translateY(-1px); }
.ssl-btn .elementor-button-content-wrapper { align-items: center; }
.ssl-btn .elementor-button-icon svg { width: .95em; height: .95em; }
@media (max-width: 480px) {
	.ssl-hero .ssl-btn, .ssl-hero .ssl-btn .elementor-button { width: 100%; }
}
.ssl-cta-buttons .ssl-btn .elementor-button { width: 100%; }

/* ---------- cards ---------- */
.ssl-card { text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; position: relative; }
a.ssl-card:hover { transform: translateY(-5px); border-color: var(--ssl-brass) !important; box-shadow: 0 26px 46px -30px rgba(13, 27, 42, .45); }
a.ssl-card .elementor-divider-separator { transition: width .3s ease; }
a.ssl-card:hover .elementor-divider-separator { width: 64px !important; }
.ssl-card .ssl-card-more { margin-top: auto !important; }
.ssl-card-more .elementor-heading-title { display: inline-block; transition: transform .25s ease; }
a.ssl-card:hover .ssl-card-more .elementor-heading-title { transform: translateX(5px); }
.ssl-step { border-top: 2px solid var(--ssl-brass); padding-top: 22px !important; }
.ssl-proc { border-top: 1px solid rgba(203, 170, 114, .45); }
.ssl-value .elementor-icon-box-icon { line-height: 1; }
.ssl-value .elementor-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ssl-line); border-radius: 50%; background: var(--ssl-cream); }
.ssl-portrait { position: relative; }
.ssl-portrait img { display: block; width: 100%; box-shadow: 0 34px 60px -38px rgba(13, 27, 42, .65); position: relative; z-index: 1; }
.ssl-portrait::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--ssl-brass); border-radius: 3px; }
@media (max-width: 767px) { .ssl-portrait::before { inset: 12px -10px -12px 12px; } .ssl-portrait { margin-right: 10px; } }

/* ---------- lists ---------- */
.ssl-list .elementor-icon-list-text { line-height: 1.55; }
.ssl-list a { text-decoration: none; }
.ssl-two-col .elementor-icon-list-items, .ssl-jump .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.ssl-two-col .elementor-icon-list-item, .ssl-jump .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
.ssl-jump .elementor-icon-list-item { border-bottom: 1px solid var(--ssl-line); padding: 0 0 12px !important; }
.ssl-jump .elementor-icon-list-text { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; color: var(--ssl-navy); }
.ssl-jump a:hover .elementor-icon-list-text { color: var(--ssl-brass-dk); }
@media (max-width: 600px) { .ssl-two-col .elementor-icon-list-items, .ssl-jump .elementor-icon-list-items { grid-template-columns: 1fr; } }
.ssl-contact-list .elementor-icon-list-text { font-size: 17px; color: var(--ssl-navy); }
.ssl-contact-list .elementor-icon-list-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #fff; border: 1px solid var(--ssl-line); display: inline-flex; align-items: center; justify-content: center; margin-top: -8px; }
.ssl-contact-list .elementor-icon-list-item { align-items: flex-start; }
.ssl-contact-list .elementor-icon-list-item > a { align-items: flex-start; }
.ssl-area { scroll-margin-top: 110px; }

/* ---------- FAQ ---------- */
.ssl-faq .elementor-toggle-item { border-radius: 3px; overflow: hidden; transition: border-color .25s ease; }
.ssl-faq .elementor-toggle-item:hover { border-color: var(--ssl-brass) !important; }
.ssl-faq .elementor-tab-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 0 !important; margin: 0; cursor: pointer; }
.ssl-faq .elementor-tab-title .elementor-toggle-icon { order: 2; float: none; width: auto; font-size: 13px; }
.ssl-faq .elementor-tab-title a { text-decoration: none; }
.ssl-faq .elementor-tab-content { border: 0 !important; }
.ssl-faq .elementor-tab-content p { margin: 0; max-width: 70ch; }

/* ---------- contact form (Contact Form 7) ---------- */
.ssl-form .wpcf7 form { margin: 0; }
.ssl-form .ssl-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 600px) { .ssl-form .ssl-f-row { grid-template-columns: 1fr; } }
.ssl-form label { display: block; margin: 0 0 20px; font: 600 12.5px/1.4 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--ssl-navy); }
.ssl-form .ssl-req { color: var(--ssl-brass-dk); }
.ssl-form .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.ssl-form input[type="text"], .ssl-form input[type="tel"], .ssl-form input[type="email"], .ssl-form select, .ssl-form textarea {
	width: 100%; padding: 14px 16px; border: 1px solid #D8D0C1; border-radius: 2px; background: #FDFCFA; color: var(--ssl-navy);
	font: 400 16px/1.5 Inter, sans-serif; letter-spacing: 0; text-transform: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; box-shadow: none;
}
.ssl-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230D1B2A' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.ssl-form textarea { min-height: 140px; resize: vertical; }
.ssl-form input:focus, .ssl-form select:focus, .ssl-form textarea:focus { outline: 0; border-color: var(--ssl-brass); background: #fff; box-shadow: 0 0 0 3px rgba(176, 141, 87, .18); }
.ssl-form ::placeholder { color: #9AA3AD; }
.ssl-form .ssl-f-accept { margin: 2px 0 24px; }
.ssl-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.ssl-form .wpcf7-acceptance label { display: flex; gap: 12px; align-items: flex-start; margin: 0; font: 400 14px/1.55 Inter, sans-serif; letter-spacing: 0; text-transform: none; color: var(--ssl-text); cursor: pointer; }
.ssl-form .wpcf7-acceptance input { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--ssl-navy); flex: 0 0 auto; }
.ssl-form input[type="submit"] {
	width: 100%; padding: 19px 30px; border: 1px solid var(--ssl-navy); border-radius: 2px; background: var(--ssl-navy); color: #fff; cursor: pointer;
	font: 600 13.5px/1.2 Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ssl-form input[type="submit"]:hover { background: var(--ssl-brass-lt); border-color: var(--ssl-brass-lt); color: var(--ssl-navy); }
.ssl-form input[type="submit"]:disabled { opacity: .55; cursor: not-allowed; }
.ssl-form .wpcf7-spinner { position: absolute; margin: 16px 0 0 -40px; }
.ssl-form .wpcf7-not-valid-tip { margin-top: 6px; font: 400 13px/1.4 Inter, sans-serif; letter-spacing: 0; text-transform: none; color: #A3322B; }
.ssl-form .wpcf7 form .wpcf7-response-output { margin: 22px 0 0; padding: 14px 18px; border: 1px solid var(--ssl-line); border-left: 3px solid var(--ssl-brass); border-radius: 2px; background: var(--ssl-cream); font: 400 15px/1.55 Inter, sans-serif; color: var(--ssl-navy); }
.ssl-form .wpcf7 form.invalid .wpcf7-response-output, .ssl-form .wpcf7 form.failed .wpcf7-response-output { border-left-color: #A3322B; }
.ssl-form-card { box-shadow: 0 34px 60px -44px rgba(13, 27, 42, .5); }

/* ---------- footer ---------- */
.ssl-footer-list a:hover .elementor-icon-list-text { color: #fff; }
.ssl-footnote { max-width: 640px; text-align: right; }
.ssl-copyright, .ssl-copyright .hfe-copyright-wrapper { white-space: nowrap; }
.ssl-copyright .hfe-copyright-wrapper span, .ssl-copyright .hfe-copyright-wrapper a { color: inherit; }
@media (max-width: 767px) { .ssl-footnote { text-align: left; } .ssl-copyright, .ssl-copyright .hfe-copyright-wrapper { white-space: normal; } }

/* ---------- alignment fixes ---------- */
.ssl-two-col .elementor-icon-list-item, .ssl-two-col .elementor-icon-list-item > a { align-items: flex-start !important; }
.ssl-form label { margin-bottom: 22px; }