/*
Theme Name: Fabriele Law
Theme URI: https://www.fabrielelaw.com/
Description: A custom Genesis child theme for John B. Fabriele, III, LLC.
Author: Fabriele Law
Version: 1.0.0
Template: genesis
Text Domain: fabriele-law
*/

:root {
	--fl-ink: #102235;
	--fl-navy: #173a5e;
	--fl-blue: #245b8f;
	--fl-sand: #f4f0e8;
	--fl-gold: #c69a4b;
	--fl-red: #d82124;
	--fl-white: #ffffff;
	--fl-muted: #586675;
	--fl-border: #d9dfe4;
	--fl-body: "Montserrat", sans-serif;
	--fl-display: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--fl-white);
	color: var(--fl-ink);
	font-family: var(--fl-body);
	font-size: 18px;
	line-height: 1.65;
}
a { color: var(--fl-blue); text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover, a:focus { color: var(--fl-red); }
img { height: auto; max-width: 100%; }
.site-container { overflow: hidden; }
.site-inner, .fl-shell { margin: 0 auto; max-width: 1410px; padding-left: 32px; padding-right: 32px; }
.content-sidebar-wrap, .content { width: 100%; }
.sidebar { display: none; }

/* Header */
.fl-site-header { background: rgba(16, 34, 53, .88); color: #fff; position: relative; z-index: 5; }
.home .fl-site-header { background: rgba(5, 25, 42, .28); left: 0; position: absolute; right: 0; top: 0; }
.home .fl-hero .fl-shell { min-height: 590px; }
.fl-header-row { align-items: center; display: grid; gap: 28px; grid-template-columns: 290px 1fr auto; min-height: 96px; }
.fl-logo { display: inline-block; line-height: 0; max-width: 290px; }
.fl-logo img { display: block; width: 100%; }
.fl-nav { justify-self: center; }
.fl-nav .menu { align-items: stretch; display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.fl-nav .menu-item { margin: 0; position: relative; }
.fl-nav a { color: #fff; display: block; font-size: 18px; letter-spacing: .01em; padding: 9px 12px; text-decoration: none; }
.fl-nav a:hover, .fl-nav a:focus, .fl-nav .current-menu-item > a { color: #e9b7b7; }
.fl-nav .sub-menu { background: var(--fl-navy); box-shadow: 0 8px 18px rgba(16, 34, 53, .22); display: none; list-style: none; margin: 0; min-width: 225px; padding: 0; position: absolute; z-index: 20; }
.fl-nav .menu-item:hover > .sub-menu, .fl-nav .menu-item:focus-within > .sub-menu { display: block; }
.fl-nav .sub-menu a { padding: 11px 17px; }
.fl-phone { align-items: center; color: #fff; display: grid; font-size: 12px; font-weight: 600; grid-template-columns: 38px 1fr; line-height: 1.15; min-width: 192px; }
.fl-phone-icon { align-items: center; border: 1px solid #fff; border-radius: 50%; display: inline-flex; font-family: var(--fl-display); font-size: 14px; font-weight: 400; grid-row: span 2; height: 35px; justify-content: center; width: 35px; }
.fl-phone a { color: #fff; display: block; font-family: var(--fl-display); font-size: 23px; font-weight: 700; letter-spacing: .025em; text-decoration: none; }

/* Shared typography and WordPress content */
.entry { margin: 0; }
.entry-header { margin: 58px auto 25px; max-width: 900px; }
.entry-title, h1, h2, h3 { color: var(--fl-ink); font-family: var(--fl-display); line-height: 1.15; }
.entry-title, h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -.025em; margin: 0; }
h2 { font-size: clamp(28px, 3vw, 39px); margin: 1.8em 0 .45em; }
h3 { font-size: 25px; margin: 1.5em 0 .4em; }
.entry-content { margin: 0 auto 70px; max-width: 900px; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-meta { color: var(--fl-muted); font-size: 14px; }
.archive-description { background: var(--fl-sand); margin: 0; padding: 58px max(32px, calc((100vw - 1200px) / 2)); }
.after-entry, .author-box { border: 1px solid var(--fl-border); margin: 0 auto 40px; max-width: 900px; padding: 24px; }
.pagination { margin: 0 auto 60px; max-width: 900px; }
.comment-respond, .entry-comments { margin: 0 auto 60px; max-width: 900px; }
input, textarea, select { border: 1px solid #b7c0c9; border-radius: 0; font: inherit; max-width: 100%; padding: 12px; width: 100%; }
button, input[type="submit"], .button, .wp-block-button__link {
	background: var(--fl-red); border: 0; border-radius: 0; color: #fff; cursor: pointer; display: inline-block; font: 700 16px var(--fl-body); padding: 13px 21px; text-decoration: none;
}
button:hover, button:focus, input[type="submit"]:hover, input[type="submit"]:focus, .button:hover, .button:focus, .wp-block-button__link:hover, .wp-block-button__link:focus { background: #841922; color: #fff; }

/* Home */
.home .site-inner { max-width: none; padding: 0; }
.fl-hero { background: linear-gradient(90deg, rgba(3,17,29,.5), rgba(3,17,29,.08) 72%), url("assets/images/lady-of-justice.png") center center / cover no-repeat; color: #fff; overflow: hidden; position: relative; }
.fl-hero::before { background: linear-gradient(90deg, rgba(5,20,33,.7), rgba(5,20,33,.1) 65%); content: ""; inset: 0; position: absolute; z-index: -1; }
.fl-hero .fl-shell { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(275px, .72fr); min-height: 537px; position: relative; z-index: 1; }
.fl-hero-copy { align-self: center; padding: 68px 42px 68px 0; }
.fl-kicker { color: #fff; font-family: var(--fl-display); font-size: 24px; font-weight: 400; letter-spacing: 0; margin: 0 0 19px; padding-top: 18px; position: relative; text-transform: none; }
.fl-kicker::before { background: var(--fl-red); content: ""; height: 3px; left: 0; position: absolute; top: 0; width: 65px; }
.fl-hero h1 { color: var(--fl-red); font-family: var(--fl-body); font-size: 60px; font-weight: 900; letter-spacing: .01em; line-height: .95; margin: 0 0 22px; max-width: 660px; text-transform: uppercase; }
.fl-hero h1 span { color: #fff; display: block; }
.fl-hero p:not(.fl-kicker) { color: #f0f4f6; font-size: 16px; line-height: 1.55; margin: 0 0 25px; max-width: 480px; }
.fl-hero-subhead { border-top: 1px solid rgba(255,255,255,.65); font: 19px var(--fl-display) !important; margin-bottom: 15px !important; padding-top: 11px; }
.fl-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.fl-button { background: var(--fl-red); color: #fff; display: inline-block; font-size: 16px; font-weight: 800; padding: 14px 22px; text-decoration: none; text-transform: uppercase; }
.fl-button:hover, .fl-button:focus { background: #841922; color: #fff; }
.fl-button--outline { background: transparent; border: 2px solid var(--fl-red); }
.fl-button--outline:hover, .fl-button--outline:focus { background: var(--fl-red); color: #fff; }
.fl-hero-portrait { align-items: end; display: flex; justify-content: end; overflow: hidden; position: relative; }
.fl-hero-portrait::before { background: radial-gradient(ellipse, rgba(86,126,154,.4), transparent 63%); content: ""; height: 90%; position: absolute; right: -16%; top: 8%; width: 110%; }
.fl-hero-portrait img { align-self: end; max-height: 595px; mix-blend-mode: screen; object-fit: contain; object-position: bottom right; position: relative; width: auto; z-index: 1; }
.fl-trustbar { background: #082b46; border-top: 2px solid rgba(174,35,46,.72); }
.fl-trustbar .fl-shell { align-items: center; display: grid; gap: 24px; grid-template-columns: 1fr 1.2fr 1fr 1.1fr 1.8fr; min-height: 103px; }
.fl-badge { align-items: center; display: flex; justify-content: center; min-height: 74px; }
.fl-badge img { filter: grayscale(1) invert(1) brightness(2.6) contrast(1.3); max-width: 100%; mix-blend-mode: screen; object-fit: contain; }
.fl-section { padding-bottom: 84px; padding-top: 84px; }
.fl-section--soft { background: #f7f8f8; }
.fl-section-heading { margin-bottom: 38px; max-width: 760px; }
.fl-section-heading .fl-kicker { color: var(--fl-red); }
.fl-section-heading h2 { margin: 0 0 15px; }
.fl-section-heading p:last-child { color: var(--fl-muted); margin: 0; }
.fl-practice-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.fl-practice-card { background: #fff; border-top: 4px solid var(--fl-gold); box-shadow: 0 10px 25px rgba(16,34,53,.07); padding: 29px; }
.fl-practice-card h3 { font-size: 25px; margin: 0 0 10px; }
.fl-practice-card p { color: var(--fl-muted); font-size: 16px; margin: 0 0 16px; }
.fl-practice-card a { font-size: 15px; font-weight: 800; text-decoration: none; }
.fl-why { display: grid; gap: 54px; grid-template-columns: .82fr 1.18fr; }
.fl-why-copy { border-left: 4px solid var(--fl-gold); padding-left: 27px; }
.fl-why-copy h2 { margin-top: 0; }
.fl-why-copy p { color: var(--fl-muted); }
.fl-steps { counter-reset: case-steps; display: grid; gap: 22px; }
.fl-step { align-items: start; border-bottom: 1px solid var(--fl-border); display: grid; gap: 18px; grid-template-columns: 50px 1fr; padding-bottom: 22px; }
.fl-step::before { color: var(--fl-gold); content: "0" counter(case-steps); counter-increment: case-steps; font: 30px var(--fl-display); line-height: 1; }
.fl-step h3 { font-size: 21px; margin: 0 0 5px; }
.fl-step p { color: var(--fl-muted); font-size: 16px; margin: 0; }
.fl-blog-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.fl-post-card { border: 1px solid var(--fl-border); display: flex; flex-direction: column; padding: 25px; }
.fl-post-card .entry-meta { margin-bottom: 9px; }
.fl-post-card h3 { font-size: 23px; margin: 0 0 13px; }
.fl-post-card h3 a { color: var(--fl-ink); text-decoration: none; }
.fl-post-card h3 a:hover { color: var(--fl-red); }
.fl-post-card p { color: var(--fl-muted); font-size: 16px; margin: 0 0 18px; }
.fl-post-card .fl-read-more { font-size: 14px; font-weight: 800; margin-top: auto; text-decoration: none; }
.fl-consultation { background: var(--fl-ink); color: #fff; }
.fl-consultation .fl-shell { align-items: center; display: grid; gap: 30px; grid-template-columns: 1fr auto; padding-bottom: 60px; padding-top: 60px; }
.fl-consultation h2 { color: #fff; margin: 0 0 7px; }
.fl-consultation p { color: #d5e0e7; margin: 0; }

/* Footer */
.fl-footer { background: #0b1928; color: #c7d2da; }
.fl-footer-main { display: grid; gap: 42px; grid-template-columns: 1.4fr .8fr 1fr; padding-bottom: 48px; padding-top: 60px; }
.fl-footer h2 { color: #fff; font-size: 21px; margin: 0 0 15px; }
.fl-footer p { font-size: 15px; margin: 0 0 10px; }
.fl-footer a { color: #fff; }
.fl-footer .menu { list-style: none; margin: 0; padding: 0; }
.fl-footer .menu li { margin-bottom: 7px; }
.fl-footer .menu a { font-size: 15px; text-decoration: none; }
.fl-footer-bottom { border-top: 1px solid #344657; color: #9eafbd; font-size: 13px; padding-bottom: 20px; padding-top: 20px; }
.fl-footer-bottom p { margin: 0; }

@media (max-width: 860px) {
	.site-inner, .fl-shell { padding-left: 24px; padding-right: 24px; }
	.fl-header-row { gap: 14px 22px; grid-template-columns: 230px 1fr; padding-bottom: 14px; padding-top: 14px; }
	.fl-nav { grid-column: 1 / -1; justify-self: start; }
	.fl-phone { justify-self: end; }
	.fl-nav a { padding: 8px 11px; }
	.fl-hero .fl-shell { grid-template-columns: 1fr .48fr; min-height: 480px; }
	.home .fl-hero .fl-shell { min-height: 525px; }
	.fl-hero-copy { padding-bottom: 65px; padding-top: 65px; }
	.fl-hero-portrait img { max-height: 420px; }
	.fl-trustbar .fl-shell { gap: 14px; grid-template-columns: repeat(5, 1fr); }
	.fl-practice-grid, .fl-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	body { font-size: 17px; }
	.site-inner, .fl-shell { padding-left: 20px; padding-right: 20px; }
	.fl-header-row { grid-template-columns: 1fr auto; min-height: 0; }
	.fl-logo { max-width: 222px; }
	.fl-logo img { width: 100%; }
	.fl-phone { grid-template-columns: 31px; min-width: 31px; }
	.fl-phone > span:not(.fl-phone-icon) { display: none; }
	.fl-phone-icon { grid-row: auto; height: 31px; width: 31px; }
	.fl-phone a { font-size: 18px; }
	.fl-nav { grid-column: 1 / -1; justify-self: stretch; }
	.fl-nav .menu { justify-content: flex-start; width: 100%; }
	.fl-nav a { font-size: 13px; padding: 11px 9px; }
	.fl-nav .sub-menu { display: none !important; }
	.fl-hero .fl-shell { display: block; min-height: 0; }
	.home .fl-hero .fl-shell { min-height: 0; }
	.fl-hero-copy { padding: 62px 0 42px; }
	.home .fl-hero-copy { padding-top: 168px; }
	.fl-hero h1 { font-size: 43px; }
	.fl-hero p:not(.fl-kicker) { font-size: 18px; }
	.fl-hero-portrait { display: none; }
	.fl-trustbar .fl-shell { gap: 12px; grid-template-columns: repeat(2, 1fr); padding-bottom: 18px; padding-top: 18px; }
	.fl-badge { min-height: 46px; }
	.fl-badge:last-child { grid-column: 1 / -1; }
	.fl-consultation .fl-shell, .fl-why, .fl-footer-main { grid-template-columns: 1fr; }
	.fl-section { padding-bottom: 60px; padding-top: 60px; }
	.fl-practice-grid, .fl-blog-grid { grid-template-columns: 1fr; }
	.fl-footer-main { gap: 30px; padding-bottom: 38px; padding-top: 45px; }
}