/*
Theme Name: Gordon Law Firm
Theme URI: https://www.attorneyallisongordon.com/
Author: Josh Castro
Author URI: https://threeringfocus.com/
Description: Custom WordPress theme for Gordon Law Firm.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: gordon
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =====================================================
   DEFAULTS
   ===================================================== */
/* Box model reset  */
*,
*::before,
*::after {
    box-sizing: border-box; /* border & padding included inside box */
    margin: 0;
    padding: 0;
}
/* Root & body base */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* stop iOS auto-zooming text */
}
body {
    min-height: 100vh;
    line-height: 1.5; /* comfortable reading rhythm, better than browser default ~1.2 */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
}
/* Media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%; /* prevents images breaking layout on small screens */
    height: auto;
}
/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-weight: inherit; /* don't force bold until you set your own scale */
    line-height: 1.2;
	letter-spacing: .06em;
}
p, li {
    overflow-wrap: break-word; /* long words/URLs don't overflow containers */
	line-height: 1.6rem;
}
a {
    color: inherit;
    text-decoration: none;
	transition: color .4s ease-in-out, background-color .4s ease-in-out;
}
/* Lists */
li {
	list-style-position: inside;
}
ul li::marker,
ol li::marker{
  color: #9d1c1f;
}
/* Forms & buttons inherit fonts (Safari/Firefox don't by default) */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
    background: none;
    border: none;
	letter-spacing: .06em;
	transition: color .4s ease-in-out, background-color .4s ease-in-out, border-color .4s ease-in-out;
}
/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
}
/* Root variables — Gordon Law Firm brand palette */
:root {
    /* Backgrounds */
    --color-background: #fff;
    --color-background-dark: #191919;
    /* Text */
    --color-text: #000000;
    --color-text-on-dark: #ffffff;
    /* Headings */
    --color-heading-primary: #9d1c1f;
    --color-heading-secondary: #000000;
    /* Buttons */
    --color-button-bg: #9d1c1f;
    --color-button-text: #ffffff;
    --color-button-border: #9d1c1f;
    --color-button-bg-hover: #ffffff;
    --color-button-text-hover: #9d1c1f;
    /* Typography */
    --font-base: roboto, sans-serif;
    --font-heading: avenir-lt-pro, sans-serif;
}
/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* Focus visibility (don't remove outlines without replacing them) */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* Screen-reader-only text: visually hidden but still announced by
   assistive tech. Reused for skip links, form labels, etc. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
/* When a screen-reader-text element receives focus (e.g. the skip
   link is tabbed to), reveal it visibly so sighted keyboard users
   can see and use it too. */
.screen-reader-text:focus {
    background-color: var(--color-background, #f1f1f1);
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: var(--color-heading-primary, #1a1a1a);
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}
/* Background images cover and are responsive */
.bg-cover {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* =====================================================
   BASE COMPONENTS
   ===================================================== */
body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-base);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}
h1, h3, h4, h5, h6 {
	font-weight: 800;
}
h2, h3, h4 {
    color: var(--color-heading-primary);
}
h1, h4, h5, h6 {
	text-transform: uppercase;
}
/* Standard (light-context) button — solid fill by default, outlines on hover */
.button,
button[type="submit"],
input[type="submit"] {
    display: inline-block;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: 1px solid var(--color-button-border);
    font-family: var(--font-heading);
    text-transform: uppercase;
    padding: 1em 1.5em;
    border-radius: 0;
    font-weight: 700;
	font-size: 1.1em;
	line-height: normal;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
.button:hover,
.button:focus,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--color-button-bg-hover);
    color: var(--color-button-text-hover);
}
/* Apply to any section with a dark background (e.g. footer, CTA banners)
   so text/links automatically use the light-on-dark palette. */
.has-dark-background {
    background-color: var(--color-background-dark);
    color: var(--color-text-on-dark);
}
.has-dark-background h1,
.has-dark-background h2,
.has-dark-background h3,
.has-dark-background h4,
.has-dark-background h5,
.has-dark-background h6 {
    color: var(--color-text-on-dark);
}

/* =====================================================
   TYPE SCALE
   ===================================================== */
h1 { font-size: 2.917rem; } /* 35pt */
h2 { font-size: 2.917rem; } /* 35pt */
h3 { font-size: 2.083rem; } /* 25pt */
h4 { font-size: 1.667rem; } /* 20pt */
h5 { font-size: 1.5rem; }   /* 18pt */
h6 { font-size: 1.333rem; } /* 16pt */

/* =====================================================
   TYPOGRAPHY SPACING (vertical rhythm)
   ===================================================== */
h1, h2, h3, h4, h5, h6 {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}
p, ul, ol, blockquote, table, figure {
    margin-bottom: 1.25rem;
}
/* Remove the extra top margin when a heading is the very first
   element in a content block (e.g. right after opening a card,
   section, or .entry-content) — avoids unwanted gap at the top */
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child,
p:first-child {
    margin-top: 0;
}
/* Remove trailing margin on the last element inside a content block. */
.entry-content > :last-child,
.entry-content-2 > :last-child,
.pr-col > :last-child{
    margin-bottom: 0;
}

/* =====================================================
   SITE HEADER
   ===================================================== */
.site-header {
    width: 100%;
    padding: 40px 0 0 40px;
    position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}
.site-logo {
	display: inline-block;
}
.site-logo img {
    display: block;
    max-height: 74px;
    width: auto;
}

/* =====================================================
   FRONT PAGE
   ===================================================== */
.hero {
    width: 100%;
    height: 100vh;
    max-height: 970px;
    min-height: 550px;
	padding-top: 120px;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
	background-image: url("images/home/hero.jpg");
	display: flex;
	align-items: flex-end;
}
.hero-column {
	height: 100%;
	max-height: 580px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.hero-headline {
	padding-left: 7vw;
}
.hero-headline h1 {
	font-size: 5rem;
	color: #fff;
	font-weight: 400;
	letter-spacing: .1em;
}
.hero-headline span {
	color: #9d1c1f;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: .06em;
}
.hero-base {
	padding: 20px 80px 20px 7vw;
	color: #fff;
	background-color: #9d1c1f;
	clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
}
.hero-base p {
	margin: 0;
	text-transform: uppercase;
	font-size: 1.3em;
}
.hero-base a {
	color: #fff;
}
.hero-base a:hover {
	color: #000;
}
.front-page-one {
    width: 100%;
    padding: 100px 7vw 0px 7vw;
	position: relative;
}
.logomark-home {
	width: 124px;
	margin: auto;
	border-radius: 50%;
	padding: 20px 0;
	background-color: var(--color-background);
	position: absolute;
	top: -40px;
	left: 0;
	right: 0;
}
.fp1-wrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.fp1-column {
	width: 100%;
	max-width: 420px;
}
.fp1-column h2 {
	text-transform: uppercase;
	color: var(--color-heading-secondary);
	font-weight: 800;
    font-size: 1.5rem;
}
.fp1-column a {
	color: #9d1c1f;
	font-weight: bold;
}
.fp1-column a:hover {
	color: #000;
}
.fp1-button-area {
	width: 100%;
	margin-top: 80px;
	text-align: center;
}
.fp-spacer-box {
	padding: 50px 20px;
	position: relative;
}
.gordon {
	width: 90%;
	max-width: 1550px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	opacity: 0;
}
.fpsb-line {
	width: 2px;
	height: 220px;
	margin: 0 auto;
	background-color: var(--color-button-bg);
	position: relative;
	z-index: 1;
}
.front-page-two {
	width: 100%;
	padding: 0px 20px 120px 20px;
	text-align: center;
}
.front-page-two h2 {
	font-size: 2.5rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--color-heading-secondary);
}
.front-page-two h3 {
	font-weight: 400;
}
.front-page-two p {
	max-width: 880px;
	margin: 50px auto;
}
.front-page-three {
	width: 100%;
	padding: 0 20px;
}
.fp3-wrap {
	width: 100%;
	max-width: 1730px;
	margin: auto;
	display: flex;
	align-items: flex-end;
}
.fp3-contact {
	width: 100%;
	max-width: 970px;
	padding: 100px 200px 100px 100px;
	background-color: var(--color-button-bg);
	position: relative;
}
.fp3-contact h2 {
	color: #fff;
	font-size: 1.6rem;
	text-transform: uppercase;
}
.fp3-contact h2 span {
	font-weight: 800;
	font-size: 2.8rem;
}
/* Gravity Forms Plugin */
.fp3-contact .gform-theme--framework .gfield_list_group_item:before,
.fp3-contact .gform-theme--framework .gform-field-label {
	color: #fff;
}
.fp3-contact .gform-theme--framework .gform-field-label>.gfield_required {
	color: #fff;
}
.fp3-contact .gfield input,
.fp3-contact .gfield textarea {
	background-color: transparent !important;
	border: 1px solid #fff !important;
	border-radius: 0 !important;
	color: #fff !important;
}
.fp3-contact .gform-footer .gform_button {
	background-color: #fff !important;
	color: #9d1c1f !important;
	border-radius: 0 !important;
	font-weight: bold !important;
	transition: color .4s ease-in-out, background-color .4s ease-in-out !important;
}
.fp3-contact .gform-footer .gform_button:hover,
.fp3-contact .gform-footer .gform_button:active {
	background-color: #000 !important;
	color: #ffffff !important;
}
/* END Gravity Forms Plugin */
.fp3-image {
	width: 100%;
	max-width: 870px;
	height: 550px;
	position: relative;
	z-index: 10;
	margin-left: -100px;
}
.front-page-four {
	width: 100%;
	padding: 140px 0px;
}
/* ---- Testimonial carousel ---- */
.testimonial-carousel {
	width: 100%;
	display: flex;
	align-items: center;
}
.tc-arrow {
	flex: 0 0 54px;
	width: 54px;
	height: 60px;
	padding: 0;
}
.tc-arrow img {
	display: block;
	width: 54px;
	height: 60px;
	max-width: 54px; /* locks size — overrides the global img max-width:100% reset */
}
.tc-viewport {
	flex: 1 1 auto;
	min-width: 0; /* allows the flex child to actually shrink below content size */
	overflow: hidden;
	padding: 0 80px;
}
.tc-track {
	display: flex;
	list-style: none;
}
.tc-slide {
	flex: 0 0 var(--tc-slide-width, 100%);
	margin-right: var(--tc-gap, 80px);
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.tc-quote {
	flex: 0 0 82px;
	width: 82px;
	height: 64px;
	max-width: 82px; /* locks size — overrides the global img max-width:100% reset */
}
.tc-slide p {
	margin: 0;
	/* color inherits #fff from .has-dark-background on the parent section */
}

/* =====================================================
   STANDARD PAGES
   ===================================================== */
.entry-thumbnail {
	position: relative;
	width: 100%;
	height: 550px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.entry-header {
	padding: 25px 100px 25px 70px;
	text-align: center;
	background-color: var(--color-button-bg);
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
}
.entry-header h1 {
	margin: 0;
	color: var(--color-text-on-dark);
    line-height: 1em;
    font-size: 2rem;
}
article {
	padding: 1px 20px;
}
.entry-content {
	width: 100%;
	max-width: 1024px;
    margin: 60px auto 80px auto;
}

/* =====================================================
   TEMPLATE PAGES
   ===================================================== */
.side-padding {
	padding-left: 0;
}
.side-content-wrap {
	width: 100%;
	padding-top: 40px;
	display: flex;
	gap: 40px;
	justify-content: space-between;
	align-items: flex-start;
}
.sidebar {
	flex: 1;
	width: 100%;
	max-width: 450px;
	background-color: #f3f3f3;
	padding: 50px 50px 50px 80px;
}
.sidebar ul {
    list-style: none;
	margin: 0;
}
.sidebar li {
    line-height: normal;
    padding: 20px 0;
    border-bottom: 1px solid #000;
	font-weight: 600;
	text-transform: uppercase;
}
.sidebar li:first-child {
	padding-top: 0;
}
.sidebar a {
	color: #9d1c1f;
}
.sidebar a:hover,
.sidebar a:active,
.sidebar li.current_page_item a,
.sidebar li.current_menu_item a {
	color: #000;
}
.ec-2 {
	flex: 3;
    margin-top: 10px;
}
.ec-v2 {
	max-width: 1300px;
}
.ec-v2 :where(.wp-block-columns.is-layout-flex) {
    gap: 6em;
}
.practice-sub {
	width: 100%;
	padding: 100px 20px;
	background-color: rgba(0,0,0,.05);
	display: flex;
	justify-content: flex-end;
}
.ps-wrap {
	width:100%;
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 6em;
}
.ps-text {
	width: 100%;
}
.ps-image {
	width: 100%;
	height: 400px;
	background-size: cover;
	background-position: center;
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
	padding: 1px 0;
	text-transform: uppercase;
}
.site-footer a:hover {
	color: #9d1c1f;
}
.footer-top {
	width: 100%;
	margin-top: -40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer-line {
	width: calc(50% - 70px);
	height: 1px;
	background-color: #fff;
}
.logomark {
	border-radius: 50%;
	padding: 20px 0;
}
.footer-middle {
	width: 100%;
	max-width: 1770px;
	padding: 0px 20px;
	margin: 60px auto;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-weight: 800;
}
.foot-nav {
	width: 100%;
	max-width: 520px;
	display: flex;
	justify-content: space-between;
}
.fn-line {
	height: 100px;
	margin: 0 20px;
	border-right: 1px solid #9d1c1f;
}
#footer-menu {
	list-style: none;	
}
#footer-menu li {
    margin-bottom: 14px;
}
#footer-menu li:last-child {
    margin-bottom: 0px;
}
.fc-wrap {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}
.fc-wrap .fa-solid {
	font-size: 1.4rem;
	color: #9d1c1f;
}
.fc-wrap p {
	margin: 0 0 0 10px;
}
.footer-bottom {
	width: 100%;
	max-width: 1770px;
	padding: 0px 20px;
	margin: 40px auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.footer-bottom p {
	margin: 0;
}
a.trf {
	color: #9d1c1f;
}
a.trf:hover {
	color: #fff;
}

/* =====================================================
   RESPONSIVE ELEMENTS
   ===================================================== */
.response img {
    width: 100%;
    height: auto;
    display: block;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.map-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.map-container iframe, .map-container object, .map-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* =====================================================
   PAGE BREAKS
   ===================================================== */
@media (max-width: 1300px) {
	
}
@media (max-width: 1200px) {
	.fp3-contact {padding: 80px 140px 80px 40px;}
}
@media (max-width: 1100px) {
	.logomark-home {top: -20px;}
}
@media (max-width: 1080px) {
	.hero-headline {padding: 0 0 30px 20px;}
	.front-page-one {padding: 100px 20px 0px 20px;}
	.hero-column {height: auto; max-height: none;}
	.tc-viewport {padding: 0 20px;}
}
@media (max-width: 1000px) {
	.fp3-contact {padding: 50px 20px 300px 20px;}
	.fp3-image {height: 340px;}
	.side-padding {padding-left: 20px;}
	.side-content-wrap {flex-direction: column-reverse;}
	.ec-2 {margin-bottom: 10px;}
	.sidebar {margin-bottom: 40px;}
}
@media (max-width: 800px) {
	.entry-thumbnail {height: 450px;}
	.hero-headline h1 {font-size: 3rem; }
	.tc-quote {display: none; }
	.fp1-wrap {gap: 50px; flex-direction: column; align-items: center;}
	.fp1-column {max-width: 600px;}
	.button, button[type="submit"], input[type="submit"] {padding: .9em 1.25em; font-size: 1em;}
	.front-page-three {padding: 0;}
	.fp3-image {display: none;}
	.fp3-contact {padding: 50px 20px;}
}
@media (max-width: 781px) {
	.ec-v2 :where(.wp-block-columns.is-layout-flex), .ps-wrap {gap: 2em;}
	.ps-wrap {flex-direction:column-reverse;}
}
@media (max-width: 700px) {
	h1 { font-size: 2.5rem; }
	h2 { font-size: 2rem; }
	h3 { font-size: 1.75rem; }
	h4 { font-size: 1.5rem; }
	h5 { font-size: 1.25rem; }
	h6 { font-size: 1rem; }
	.entry-header h1 {font-size: 1.5rem;}
	.front-page-two h2 {font-size: 2rem;}
	
	.site-header {padding: 20px 0 0 20px;}
	.site-logo img {max-height: 60px;}
	.entry-header {padding: 20px 60px 20px 20px;}
	.hero {background-image: url("images/home/hero-mobile.jpg");}
	.site-footer {text-align: center;}
	.footer-middle {margin: 20px auto; flex-direction: column; align-items: center;}
	.foot-nav {justify-content: space-evenly;}
	.fc-wrap {margin-bottom: 10px; justify-content: center;}
	.footer-bottom {margin: 0px auto 20px auto; flex-direction: column-reverse;}
}
@media (max-width: 600px) {
	.entry-header h1 {font-size: 1.15rem;}
	.hero-base {padding: 20px 40px 20px 20px;}
	.entry-thumbnail {height: 300px;}
	.ps-image {height: 300px;}
}
@media (max-width: 500px) {
	.sidebar {padding: 50px 20px;}
}