/*
 Theme Name:   The Elder Law Firm of Robert Clofine
 Theme URI:    https://estateattorney.com
 Description:  Child theme for The Elder Law Firm of Robert Clofine
 Author:       Eric Karkovack
 Author URI:   https://www.karks.com
 Template:     generatepress
 Version:      0.1
*/

a {
	text-underline-offset: 4px;
}

a:active,
a:focus {
	outline: 2px dotted var(--accent);
	outline-offset: 4px;
}

.inside-header {
	max-width: 1920px;
	margin: auto;
}

.main-navigation .main-nav ul li:last-child a {
	padding-right: 0;
}

/* Phone number in the header widget (from the old theme) */
.call-today {
	color: var(--accent);
	font-weight: 400;
	font-size: 1.5rem;
}

.call-today a {
	color: inherit;
	text-decoration: none;
}

.call-today a:hover {
	color: var(--contrast);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.sub-menu li {
	border-bottom: 1px dotted var(--contrast-3);
}

.sub-menu li:last-child {
	border-bottom: none;
}

.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;
}


/* Home carousel: overlay card on each slide (classes added in GB: hero-overlay > hero-card > hero-card-inner > hero-title) */
.gb-carousel-075a5934 .hero-overlay {
	box-sizing: border-box;
	padding-left: clamp(20px, 4vw, 60px);
	padding-right: clamp(20px, 4vw, 60px);
}

.gb-carousel-075a5934 .hero-card {
	box-sizing: border-box;
	width: min(600px, 100%);
	min-width: 0;
	max-width: 100%;
}

/* Positioning context for the arrows/dots bar, so its bottom: 10% is measured from the slide, not the viewport */
.gb-carousel-075a5934 {
	position: relative;
}

.gb-carousel-075a5934 .hero-title {
	font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
}

footer.entry-meta {
	border-top: 1px solid var(--contrast-3);
	padding-top: 20px;
}

/* Post navigation: previous on the left, next on the right */
nav#nav-below {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 30px;
	margin-top: 3rem;
}

nav#nav-below div.nav-next {
	display: flex;
	align-items: center;
	margin-left: auto;
	text-align: right;
}

/* Arrow after the "next" link text */
nav#nav-below div.nav-next .gp-icon {
	order: 2;
	margin-right: 0;
	margin-left: 0.6em;
}

/* Generic Buttons */

button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.wp-block-button__link:not(.has-background) {
  border-radius: 6px;
  text-transform: uppercase;
}

/* Contact Form 7: fill the column instead of the size="40"/cols="40" intrinsic width, which pushes grid columns past the viewport */
.wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

/* Gutenberg Specific Styles */

.wp-block-latest-posts__list li {
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid var(--contrast-3);
}

/* Legacy Styles from Old Theme */

.trust-symbols-wrap span{
    min-height: 80px;
    display: inline-block;
    padding: 15px 20px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    margin: 0 8px 8px 0;
}

.trust-symbols-wrap img{        
    max-height: 50px;
}

/* Add padding to the site logo and header widget at smaller viewports */
@media (min-width: 1100px) and (max-width: 1921px) {

	.site-header .header-image {
		width: 300px;
	}

	.inside-header {
		padding: 0 20px;
	}
}

/* Laptop and narrow desktop (up to the Customizer's 1600px stacked-header breakpoint):
   the tall header covers the top of the image, so anchor a compact card to the bottom */
@media (min-width: 1025px) and (max-width: 1600px) {
	.gb-carousel-075a5934 .hero-overlay {
		bottom: 20px;
	}

	/* min-width: 0 releases GB's 600px min-width so the narrower width applies */
	.gb-carousel-075a5934 .hero-card {
		width: min(520px, 100%);
		min-width: 0;
	}

	.gb-carousel-075a5934 .hero-card-inner {
		margin: 5px;
		padding: 12px 15px;
	}

	.gb-carousel-075a5934 .hero-title {
		font-size: 1.6rem;
		margin-bottom: 10px;
	}

	.gb-carousel-075a5934 .hero-card-inner p {
		font-size: 17px;
		margin-bottom: 12px;
	}

	/* The card sits at the bottom of the slide, so move the arrows/dots below the image */
	.gb-carousel-075a5934 .gb-element-60324902 {
		position: relative;
		bottom: auto;
		margin-top: 15px;
		/* Room for the active dot's scale(1.5) and glow; the carousel clips anything past its bottom edge */
		padding-bottom: 10px;
	}
}

/* Tablet and mobile: the image is too short to hold the card, so stack it below */
@media (max-width: 1024px) {
	.gb-carousel-075a5934 .hero-overlay {
		position: static;
		padding: 0;
	}

	.gb-carousel-075a5934 .hero-card {
		width: 100%;
	}

	.gb-carousel-075a5934 .hero-card-inner {
		margin: 5px;
		padding: 15px;
	}

	/* Arrows/dots below the slide instead of over the card */
	.gb-carousel-075a5934 .gb-element-60324902 {
		margin-top: 15px;
	}
}

 #sticky-navigation .inside-navigation {
	background-color: #FFF;
 }

/* Responsive Styles */

/* Starts above the Customizer's 1600px "nav below logo" breakpoint, so GP's stacked header applies at 1241–1600 */
@media (min-width: 1601px) {
/* Header: logo left, widget above the nav on the right */
    .nav-float-right .inside-header {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo widget"
            "logo nav";
        align-items: center;
        column-gap: 40px;
        row-gap: 5px;
    }

    .nav-float-right .inside-header::before,
    .nav-float-right .inside-header::after {
        display: none;
    }

    .nav-float-right .inside-header .site-logo {
        grid-area: logo;
    }

    .nav-float-right .header-widget {
        grid-area: widget;
        justify-self: end;
        margin-left: 0;
        text-align: right;
    }

    .nav-float-right #site-navigation {
        grid-area: nav;
        justify-self: end;
        margin-left: 0;
    }
}

@media (min-width: 1241px) {
/* Sticky nav: logo beside the menu, full width */
    #sticky-navigation .inside-navigation {
        flex-direction: row;
        flex-wrap: nowrap;
        max-width: 100%;
        justify-content: center;
        padding-left: 30px;
        padding-right: 30px;
    }

    #sticky-navigation .navigation-branding,
    #sticky-navigation .main-nav {
        flex: 0 0 auto;
    }

    #sticky-navigation .main-nav > ul {
        flex-wrap: nowrap;
    }
}

nav#mobile-header {
	background-color: rgba(255,255,255,0.8);
}

@media (min-width: 768px) and (max-width: 1240px) {

	/* Inset the content area; the header and footer sit outside .site-content and stay full width */
	.right-sidebar .site-content, .full-width-content .site-content {
		width: 96%;
		max-width: 96%;
		margin: 0 auto;
	}

	/* .alignfull breaks out of the 96% container to the full viewport width */
	.full-width-content .content-area .alignfull {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	/* Inner blocks of a full-width section keep the 96% content inset (the carousel stays edge to edge) */
	.full-width-content .content-area .alignfull > :not(.gb-carousel) {
		max-width: min(var(--gb-container-width, 1200px), 96%);
		margin-left: auto;
		margin-right: auto;
	}

	/* 100vw includes the scrollbar on Windows; clip the few extra pixels */
	body {
		overflow-x: clip;
	}

}

@media (max-width: 767px) {

	/*input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea {
		max-width: 300px;
	}*/
}