/* ==========================================================================
     Project:     Cooper Law Firm
     Date:        07/16/2025 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

:root {
	--black: #000;
	--body: #2D2D2D;
	--green: #4A5D5F;
	--brown: #A0998F;
	--light-beige: #F6F6F6;
	--beige: #F8F5EC;
	--dark-beige: #DED6C4;
	--white: #FFFFFF;
}

/* ==========================================================================
     Typograpy
========================================================================== */

body {font-family: "Alexandria", sans-serif; font-weight: 400; color: var(--body);}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: "Crimson Text", serif; font-weight: 800; color: var(--green);}
p {line-height: 1.8;}

/* ==========================================================================
     Main Layout
========================================================================== */ 

html {scroll-behavior: smooth;}
.page-wrapper {overflow:hidden;background: var(--white)}
main {background: var(--white)}
.container-fluid {max-width: 1800px;}

/* Links */
a {color: var(--body);text-decoration: none;}
a:hover { text-decoration: underline;color: var(--body)}

/* Images */
img {max-width: 100%; height: auto}
.img-fit {object-fit: cover; object-position: center center; width: 100%; height: 100%;}

section:has(.img-bg) {position: relative;}
.img-bg {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit:cover; z-index: -1}

/* Skip */
.skip {position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:var(--green	); width:auto;height:auto;overflow:visible;padding:10px;color:var(--white);font-weight:500;font-size:.875rem;z-index:99;text-decoration:underline}
.skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: var(--white)}

/* Header */
.header-wrapper {position: relative; z-index: 3}

/* Offcanvas */
.offcanvasmenu {position: fixed; top: var(--header-height); height: 100%; width: 100%; bottom: 0px; padding-bottom: 60px; left: 0px; background: var(--white); overflow-x: hidden; overflow-y: auto; z-index: -1; -webkit-transform: scale(.75); -ms-transform: scale(.75); transform: scale(.75); transform-origin: top center; pointer-events: none; opacity: 0; visibility: hidden; transition: transform 250ms ease, opacity 250ms ease;}
.offcanvasmenu .bg-tan {background: var(--tan); border-bottom: 2px solid var(--dark-beige); padding: 10px 0px; margin-bottom: 5px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center;}
.offcanvasmenu form {position: relative; height: 35px; width: 100%;}
.offcanvasmenu form .btn {color: var(--body); width: 35px; height: 35px; padding: 0px; position: absolute; top: 0px; right: 15px; border-radius: 0px; background: none; font-size: .813rem;}
.offcanvasmenu form .btn:hover, .offcanvasmenu form .btn:focus {color: var(--green);}
.offcanvasmenu form input {height: 35px; position: absolute; top: 0px; font-size: .875rem; left: 15px; width: calc(100% - 30px); border: 1px solid var(--grey); border-radius: 4px; padding: 0px 35px 0px 15px;}
.offcanvasmenu form input::-ms-clear {display: none;}
.offcanvasmenu ul {list-style: none; padding: 0px; margin: 0px;}

.offcanvasmenu .mainmenu {font-weight: 700; flex-direction: column; align-items: stretch; padding: 0; display: flex;}
.offcanvasmenu .mainmenu > li {width: 100%; border-bottom: 1px solid var(--lightest-grey); position: relative;}
.offcanvasmenu .mainmenu > li::after {content: none !important;}
.offcanvasmenu .mainmenu a {display: flex; justify-content: space-between; align-items: center; padding: 15px; text-decoration: none; color: var(--body);}
.offcanvasmenu .dropdown {display: none; margin: 0 15px 15px; padding-left: 10px; border-left: 2px solid var(--green); font-weight: 600; font-size: 0.875rem;}
.offcanvasmenu .dropdown.active {display: block;}
.offcanvasmenu li {position: relative;}
.offcanvasmenu li a[aria-haspopup] {margin-right: 55px;}
.offcanvasmenu li .fa-angle-down {font-size: 1rem; transition: transform 200ms ease-in-out;}
.offcanvasmenu li .fa-angle-down.rotate {-webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg);}
.offcanvasmenu a {color: var(--body); display: block; padding: 15px; text-decoration: none; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center;}
.offcanvasmenu a:hover, .offcanvasmenu a:focus {color: var(--green);}
.offcanvasmenu .btn-translate {padding: 15px; font-weight: 500;}
.offcanvasmenu .btn-translate:hover, .offcanvasmenu .btn-translate:focus {color: var(--green);}
.offcanvasmenu .btn-toggle-dropdown {position: absolute; top: 10px; right: 15px; width: 35px; height: 35px; padding: 0px; border-radius: 4px; border: none; background: var(--beige);}
.offcanvasmenu .btn-toggle-dropdown:hover, .offcanvasmenu .btn-toggle-dropdown:focus {color: var(--green);}
.offcanvasmenu .dropdown {border-left: 2px solid var(--green); margin: 0px 15px 15px 15px; font-weight: 600; display: none; font-size: .875rem;}
.offcanvasmenu .dropdown.active {display: block;}
.offcanvasmenu .dropdown a {padding: 10px;}
.offcanvasmenu::-webkit-scrollbar {-webkit-appearance: none; width: 5px;}
.offcanvasmenu::-webkit-scrollbar-track-piece {margin: 15px 0px;}
.offcanvasmenu::-webkit-scrollbar-thumb {border-radius: 4px; background-color: rgba(0,0,0,.3);}
.offcanvas-open {overflow: hidden;}
.offcanvas-open .offcanvasmenu {pointer-events: all; opacity: 1; z-index: 2; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
.offcanvas-open .header-overlay .hamburger-inner, .offcanvas-open .header-overlay .hamburger-inner:after, .offcanvas-open .header-overlay .hamburger-inner:before {background-color: var(--white);}
.btn-toggle-offcanvas {margin: 0px; border-radius: 0px; height: 36px; padding: 5px; transition-timing-function: linear; transition-duration: .15s; transition-property: opacity; text-transform: none; color: inherit; border: 0;}

/* Hamburger */
.hamburger-box {position: relative; display: inline-block; width: 24px; height: 24px;}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {position: absolute; width: 24px; height: 2.5px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; border-radius: 3.5px; background-color: var(--green); right: 0px;}
.hamburger-inner {top: 50%; display: block; transition-timing-function: cubic-bezier(.55,.055,.675,.19); transition-duration: .22s;}
.hamburger-inner:after, .hamburger-inner:before {display: block; content: "";}
.hamburger-inner:before {transition: top .1s ease-in .25s, opacity .1s ease-in; top: -8px;}
.hamburger-inner:after {transition: bottom .1s ease-in .25s, transform .22s cubic-bezier(.55,.055,.685,.19); bottom: -8px;}
.btn-toggle-offcanvas.active .hamburger-inner {transition-delay: .12s; transition-timing-function: cubic-bezier(.215,.61,.355,1); transform: rotate(-225deg);}
.btn-toggle-offcanvas.active .hamburger-inner:before {top: 0; transition: top .1s ease, opacity .1s ease .12s; opacity: 0; width: 100%;}
.btn-toggle-offcanvas.active .hamburger-inner:after {bottom: 0; transition: bottom .1s ease, transform .22s cubic-bezier(.215,.61,.355,1) .12s; transform: rotate(90deg); width: 100%;}

/* Main */
main {position: relative; z-index:1}

/* Search */
.search-wrapper {height: 50px;position: fixed; top: 0px; left: 0px; width: 100%; z-index:-1; pointer-events: none;background: var(--dark-beige) !important}
.search-wrapper form {position: relative; width: 100%}
.search-wrapper input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none;appearance: none;}
.search-wrapper input {font-weight: 600; font-size: .913rem; border: none; background:var(--dark-beige); color: var(--green); height: 50px; padding: 0px 5px 0px 0px; width: calc(100% - 20px)}
.search-wrapper input:focus {outline:none}
.search-wrapper input::placeholder {color: var(--body)}
.search-wrapper input::-ms-input-placeholder {color: var(--body)}
.search-wrapper button[type="submit"],.search-wrapper .btn-close-search {color: var(--body)}
.search-wrapper button[type="submit"] {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 0px; font-size: .875rem; }
.search-wrapper button[type="submit"]:hover, .search-wrapper button[type="submit"]:focus {color: var(--green)}
.search-wrapper .btn-close-search {-webkit-text-stroke: 1px var(--green); position: relative}
.search-wrapper .btn-close-search::after {content:""; display:block; background: rgba(0,0,0,.35); width: 1px; position: absolute; left: -10px; top: 15px;bottom: 15px}
.search-wrapper .btn-close-search:hover, .search-wrapper .btn-close-search:focus {}

.search-open .header-wrapper {margin-top: 50px}
.search-open .search-wrapper {z-index:0; pointer-events: all; }

/* Heros */
.hero {position: relative; display: inline-block;}
.hero img { position: absolute; top: 0px; left: 0px; z-index: 0}
.hero .caption {position: relative; z-index: 2;}
.hero .caption {position: relative; z-index: 1;}
.hero .overlay {position: absolute; top: 0; left: 0; height: 100%; background-color: rgba(255, 255, 255, 0.75); z-index: 1; pointer-events: none;}
.hero .container-fluid + .cms-contentmenu {position: absolute; left: 50%;}

/* Footer */
footer {font-family: "Alexandria", sans-serif; font-weight: 600;font-size: .875rem;}
footer address {color: var(--green);}
footer a {color: var(--green);}
footer li {color: var(--green);}
footer span {font-size: 1rem;}
footer .list-inline {font-size: .875rem;}

/* ==========================================================================
     Components
========================================================================== */ 

/* Backgrounds */
.bg-beige {background: var(--beige); color: var(--body)}
.bg-light-beige {background: var(--light-beige); color: var(--body)}
.bg-dark-beige {background: var(--dark-beige); color: var(--body)}
.bg-brown {background: var(--brown);}

/* Form */
.form-input {border: none; border-bottom: 1px solid var(--green); padding: 12px 12px 12px 6px; font-size: 1rem; font-family: "Alexandria", sans-serif; width: 100%; transition: border-color 0.3s ease; border-radius: 0px; background-color: var(--beige);}
.form-input:focus {background-color: var(--light-beige);}
.form-input::placeholder {font-family: "Alexandria", sans-serif; font-weight: 300; color: var(--green); font-size: .875rem;}

/* Testemonials */
.testimonial { border: 2px solid var(--green); padding: 20px; position: relative; background-color: var(--white); width: 100%; height: 100%; margin: 20px auto; box-sizing: border-box; min-height: 100px; }
.testimonial::before { content: ""; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border: 1px solid var(--green); pointer-events: none; }
.testimonial p { font-family: "Alexandria", sans-serif; font-weight: 300; margin-bottom: 30px; }
.testimonial p.author { position: absolute; bottom: 20px; left: 20px; color: var(--green); margin: 0; font-size: 1.5rem; font-family: "Crimson Text", serif;}

/* Practice Cards */
.practice-cards {min-height: 200px;width: 100%}
.practice-cards { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 20px; }
.practice-cards p { font-size: 0.813rem; margin-bottom: 10px; }
.practice-cards h3 { font-size: 1.375rem; font-weight: 600; }
.practice-cards a { align-self: flex-start; text-decoration: none; color: var(--green); font-weight: 600; }

/* Mastheads */
.masthead-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: -2;}
.masthead-wrapper {height: 200px; position: relative; overflow: hidden; z-index: 0;}
.masthead-wrapper .breadcrumb {background-color: transparent;}
.masthead-wrapper::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); z-index: -1;}
.masthead-content {position: relative; z-index: 1; width: 100%; padding: 0 15px;}
.masthead-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255, 0.7); z-index: 0;}

/* Lines */
.line-below { position: relative; }
.line-below::after { content: ''; position: absolute; bottom: -15px; left: 0; width: 11%; height: 2px; background-color: var(--green); }

/* ==========================================================================
     CMS Components
========================================================================== */

/* Accordions */
.cms-accordion {}
	.cms-accordion .card {background:none; border-radius: 0px; border: none; border-bottom: 2px solid rgba(165,163,162,0.25) !important;}
	.cms-accordion .card:first-child {border-top: 2px solid rgba(165,163,162,0.25);}
	.cms-accordion .card-header, .cms-accordion p[aria-controls] {transition: color 250ms ease;position: relative;border-radius: 0px; background:none;border:none; padding: 25px 50px 25px 50px!important; color: var(--green); font-weight: 700;}
	.cms-accordion .card-header:hover, .cms-accordion .card-header:focus, .cms-accordion p[aria-controls]:hover {text-decoration:none; cursor: pointer}
	.cms-accordion .card-header::before, .cms-accordion p[aria-controls]::before {transition: transform 250ms ease; background: url(/img/icon-plus.svg) center center no-repeat;background-size: 100% 100%; width: 25px; height: 25px; content:""; position: absolute; left: 0px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
	.cms-accordion .card-header[aria-expanded=true], .cms-accordion p[aria-controls][aria-expanded=true] { color: var(--green); border-bottom: none}
	.cms-accordion .card-header[aria-expanded=true]::before, .cms-accordion p[aria-controls][aria-expanded=true]::before {-webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg);transform: translateY(-50%) rotate(45deg); }
	.cms-accordion .card-body p {color: var(--body);}
	.cms-accordion .card-body {padding: 0px 30px 30px 30px; margin-bottom: 20px;position: relative; margin-top: 20px; overflow:hidden /* This last property will grow this element with it's floated children */ }
	.cms-accordion .card-body::after {width: 4px; background: var(--green); content: ""; position: absolute; top: 0px; left: 0px; bottom: 30px; }
	.cms-accordion .card-body *:last-child {margin-bottom: 0px}
	.cms-accordion .collapsing {transition-duration: 500ms; transition-timing-function: ease-in-out;}

/* Tabs */
.cms-tabs {}
	.cms-tabs .nav {margin-bottom: 0px !important}
	.cms-tabs .nav p:hover {cursor: pointer}
	.cms-tabs .nav-pills .nav-link {background: var(--grey); color: var(--green); font-weight: bold;border-radius: 0px; border:none; padding: 5px 25px}
	.cms-tabs .nav-pills .nav-link.active, .cms-tabs.nav-pills .show>.nav-link {background: var(--green);color: var(--white); }
	.cms-tabs .tab-content { padding: 1.5rem;}
	.cms-tabs .tab-content *:last-child {margin-bottom: 0px}

/* Calendar */
.cms-calendar .text-primary {color: var(--green) !important}
.cms-calendar .bg-primary {background: var(--green) !important}


/* ==========================================================================
     CMS Classes
========================================================================== */

/* Text */
.text-lg {font-size: 1.25rem;}
.text-green {color: var(--green);}

.font-dynalight {font-family: "Dynalight", cursive; font-weight: 400;}
.font-alexandria {font-family: "Alexandria", sans-serif; font-weight: 400;}
.font-parisienne {font-family: "Parisienne", cursive; font-weight: 400;}

.fw-light {font-weight: 100;}

/* Buttons */
.btn-green, form[name="frmSearch"] .btn-primary {font-family: "Alexandria", sans-serif; font-weight: 600; font-size: 1rem; white-space: normal; line-height: 1; padding:10px 30px; border-radius: 0px; color: var(--white);text-decoration:none; transition: all 250ms ease;}
.btn-lg {padding:15px 60px;}
.btn-green, form[name="frmSearch"] .btn-primary {background-color: var(--green);}
.btn-green:hover, 
.btn-green:focus,
form[name="frmSearch"] .btn-primary:hover,
form[name="frmSearch"] .btn-primary:focus {background-color: color-mix(in srgb, var(--green) 80%, var(--black) 20%);color: var(--dark-beige);}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {
	/* Type */
	h1, .h1 { font-size: 2.25rem; }
	h2, .h2 { font-size: 2rem; }
	h3, .h3 { font-size: 1.5rem; }
	h4, .h4 { font-size: 1rem; }
	h5, .h5 { font-size: 0.9rem; }
	h6, .h6 { font-size: 0.8rem; }

	/* Header */
	.header-wrapper img {width: 140px}

	/* Overlay */
	.hero .overlay {width: 100%;}

	/* Caption */
	.hero .caption {max-width: 750px;}

	/* Images */
	.half-circle-arch {height: 350px; width: 100%; object-fit: cover;object-position: center 25%}
}

@media (min-width: 768px) {
	/* Type */
	h1, .h1{font-size: 3rem;}
	h2, .h2 {font-size: 2.5rem;}
	h3, .h3 {font-size: 1.75rem;}
	h4, .h4 {font-size: 1.125rem;}
	h5, .h5 {font-size: 1rem;}
	h6, .h6 {font-size: .875rem;}
}

@media (min-width: 992px) {
	/* Hero */
	.header-wrapper img {width: 275px}

	/* Gutters */
	.row.gx-lg-5 > [class^="col-"] {padding-right: 1.5rem;padding-left: 1.5rem;}

	/* Images */
	.half-circle-arch {height: calc(100%);  width: calc(100% - 15px); object-position: right center;}
	
	/* Overlay */
	.hero .overlay {width: 38%;}
	.hero .caption {width: calc(38% - 1rem)}

	/* Header */
	.headermenu .mainmenu {font-family: "Alexandria", sans-serif; font-weight: 300;}
	.headermenu .mainmenu > li {position: relative; padding: 0px 20px 20px 20px;margin-bottom: -20px; }
	.headermenu .mainmenu > li:nth-last-child(2) {padding-left: 10px}
	.headermenu .mainmenu > li:not(:nth-last-child(-n+2))::after {content: ""; position: absolute; top: -3px; right: 0px; width: 1px; height: 30px; background: rgba(0, 0, 0, 1); transform: rotate(0deg); -webkit-transform: rotate(0deg);}
	.headermenu .mainmenu > li > a {text-decoration: none;}
	.headermenu .mainmenu > li > a:hover, .headermenu .quicklinks > li > a:focus {color: var(--green);}

	.officelinks {font-size: .875rem; display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 15px; text-align: center;}
	.officelinks span {display: flex; align-items: center; gap: 5px;}
	.officelinks span strong {position: relative; padding-right: 20px; font-weight: 700;}
	.officelinks span strong:not(:last-child)::after {content: ""; position: absolute; top: 10%; right: 10px; width: 1px; height: 16px; background: rgba(0, 0, 0, 1);}

	
	/* Google Translate */
	#google_translate_element a:has(img) {display:none}
	#google_translate_element .skiptranslate {font-size: 0px}
	#google_translate_element select {padding: 2px 12px; border: 1px solid var(--body); border-radius: 20px; font-size: 0.625rem; font-weight: 500; color: var(--body); background: transparent;}

	/* Dropdown */
	.headermenu .dropdown {position: absolute; top: calc(100% - 15px); left: 50%; transform: translateX(-50%); width: 250px; padding: 10px; background: var(--white); border-radius: 4px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms ease, top 250ms ease; z-index: 2; text-align: left; text-transform: none;}
	.headermenu .dropdown.active {opacity: 1; visibility: visible; pointer-events: auto;}
	.headermenu .dropdown::before {content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 7.5px solid transparent; border-right: 7.5px solid transparent; border-bottom: 7.5px solid var(--white);}
	.headermenu .dropdown > li {display: block; font-family: "Encode Sans", sans-serif; font-weight: 500; font-size: 0.813rem; width: 100%;}
	.headermenu .dropdown > li:not(:last-child) {border-bottom: 1px solid rgba(255,255,255,0.2);}
	.headermenu .dropdown > li > a {padding: 5px 7.5px; transition: background 0.25s ease; border-radius: 4px; color: var(--green); display: block; width: 100%; text-decoration: none;}
	.headermenu .dropdown > li > a:hover, .headermenu .dropdown > li > a:focus {background: rgba(0,0,0,0.15); color: var(--green);}

	/* Hamburger */
	.hamburger-box {display: inline-block; position: relative; width: 30px; height: 22px;}
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {display: block; position: absolute; width: 30px; height: 4px; background: var(--body); border-radius: 4px; transition: all 0.3s ease;}
	.hamburger-inner {top: 50%; transform: translateY(-50%);}
	.hamburger-inner::before {content: ""; top: -10px;}
	.hamburger-inner::after {content: ""; top: 10px;}
}

@media (min-width: 1200px) {
	/* Header */
	.headermenu .mainmenu > li { padding: 0px 40px 20px 40px;margin-bottom: -20px; }
	.headermenu .mainmenu > li:nth-last-child(2) {padding-left: 40px}

	/* Mastheads */
	.masthead-bg { object-position: center 30%;}

}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
}