/*
 Theme Name:   Good Better Best
 Theme URI:    https://generatepress.com
 Description:  Custom GeneratePress Child Theme
 Author:       Kyle Van Deusen
 Author URI:   https://ogalweb.com
 Template:     generatepress
 Version:      0.1
*/
.editor-styles-wrapper .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 768px;
}

/* ==========================================================================
   Additional CSS for Testing Only.
   All finalized CSS should be added to a stylesheet in the Child Theme.
   ==========================================================================

   TABLE OF CONTENTS
   1.  Global
   2.  Shared Button Treatment (SVG background)
   3.  Header & Navigation
   4.  Header Search Overlay
   5.  Underline Accent
   6.  Dynamic Eyebrow Icons
   7.  Marquee
   8.  Forms (WS Form)
   9.  Easy Table of Contents
   10. Archives
   11. Blog / Single Post Content
   12. Utilities
   13. Backend / Editor Tweaks
   ========================================================================== */


/* ==========================================================================
   1. Global
   ========================================================================== */

html {
	scroll-behavior: smooth;
}


/* ==========================================================================
   2. Shared Button Treatment (SVG background)
   Used by: header menu toggle, header search button, WS Form submit button.
   Context-specific overrides live in their own sections below.
   ========================================================================== */

header .gb-menu-toggle-237c458f,
.gb-overlay__content button,
.wsf-grid button {
	background: unset;
	background-image: url('/wp-content/uploads/2026/06/button-bg.svg');
	background-size: cover;
	color: white;
	transition: all .25s ease;
}
.gb-overlay__content button,
.wsf-grid button:is(:hover, :focus-visible, :focus) {
		background-color: unset;
		filter: saturate(110%);
		color: white;
}


/* ==========================================================================
   3. Header & Navigation
   ========================================================================== */

/* Primary CTA menu item */
header .btn-primary .gb-menu-link {
	padding: unset;
	padding-inline: 1.25em;
	padding-block: 1em;
	line-height: 1;
	color: white;
}

header .btn-primary a[aria-current="page"] {
	color: var(--white);
}

/* Mobile menu */
@media (max-width: 1024px) {
	.menu-item.btn-primary {
		max-width: max-content;

		a {
			color: white;
		}
	}

	.gb-menu-container--mobile {
		padding-inline: var(--gutter);
	}
}

.gb-menu-container-31849a06.gb-menu-container--mobile {
	padding-block-start: var(--space-s);
	padding-block-end: var(--space-l);
}


/* ==========================================================================
   4. Header Search Overlay
   ========================================================================== */

.gb-overlay__content {
	.wp-block-search__inside-wrapper {
		border: unset;
	}

	.wp-block-search__input {
		border: none;
	}

	/* Button base styles come from Section 2 */
	button {
		font-size: .875rem;
		font-family: var(--gp-font--nomads-notebook) !important;
	}
}


/* ==========================================================================
   5. Underline Accent
   ========================================================================== */

.underline-green {
	position: relative;
}
.underline-green::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4px;
		background-image: url('/wp-content/uploads/2026/06/underline-green.svg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
}


/* ==========================================================================
   6. Dynamic Eyebrow Icons
   ========================================================================== */

.eyebrow-icon {
	position: relative;
}

/* Fallback — shows whenever no specific content type matches */
.dynamic-icon::before {
	content: url('/wp-content/uploads/2026/06/Gear-guide-icon.svg');
	margin-top: 5px;
}

/* Per content-type overrides — just swap the SVG path */
.term-destination-guide .dynamic-icon::before,
.content-type-destination-guide .dynamic-icon::before {
	content: url('/wp-content/uploads/2026/06/Destination-icon.svg');
}

.term-how-to .dynamic-icon::before,
.content-type-how-to .dynamic-icon::before {
	content: url('/wp-content/uploads/2026/06/How-to-icon.svg');
}

.term-review .dynamic-icon::before,
.content-type-review .dynamic-icon::before {
	content: url('/wp-content/uploads/2026/06/reviews-icon.svg');
}


/* ==========================================================================
   7. Marquee
   ========================================================================== */

@keyframes marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pause on hover */
.marquee:hover .marquee-track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
	}
}


/* ==========================================================================
   8. Forms (WS Form)
   ========================================================================== */

.wsf-grid {
	.wsf-field {
		background: var(--white) !important;
		padding: 12px 16px !important;
	}

	/* Button base styles come from Section 2 */
	button {
		color: var(--white) !important;
		font-family: var(--gp-font--nomads-notebook) !important;
		padding: 12px 16px !important;
	}
}

/* Specific form container */
.gb-element-c0254f49 {
	max-width: 40ch;

	.wsf-field {
		padding: 12px 16px !important;
		font-family: var(--gp-font--nomads-notebook) !important;
	}
}


/* ==========================================================================
   9. Easy Table of Contents
   ========================================================================== */

#ez-toc-container {
	width: 100% !important;
	margin-bottom: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: unset !important;
	font-size: var(--fs-p);
	color: var(--soft-black);

	ul {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
	}

	li {
		position: relative;
		overflow: unset !important;
		line-height: 1.3 !important;
	}

	/* Squiggle divider between items */
	li:not(> a, :last-of-type)::after {
		content: '';
		position: absolute;
		bottom: -6px;
		left: 0;
		width: 100%;
		height: 3px;
		background-image: url('/wp-content/uploads/2026/06/squiggle-divider-green.svg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 12;
	}



	a:hover {
		text-decoration: none !important;
		color: var(--orange) !important;
	}
}


/* ==========================================================================
   10. Archives
   ========================================================================== */

/* Hide taxonomy nav on author archives */
.archive.author .achrive-nav {
	display: none;
}

/* Author archive hero */
.author-hero {
	background-position: 50% 30%;
}


/* ==========================================================================
   11. Blog / Single Post Content
   ========================================================================== */

/* Spacing & images */
.post-content > .dynamic-entry-content > :is(h2, h3, h4, h5, h6) {
	margin-top: 1.5em;
}

.post-content > .dynamic-entry-content > figure img {
	border-radius: 5px;
}

.post-content > .dynamic-entry-content > figure{
	margin-bottom: 1.5rem;
}

.dynamic-entry-content figure img {
	aspect-ratio: 5/3;
	object-fit: cover;
}

/* Tables */
.post-content .wp-block-table {
	line-height: 1.2;
	max-width: calc(100vw - 48px);
}

.post-content table {
	background: #F3C94940;
}

.post-content table thead tr:first-of-type {
	font-family: var(--gp-font--nomads-notebook);
	background: var(--yellow);
}


/* ==========================================================================
   12. Utilities
   ========================================================================== */

.no-wrap {
	white-space: nowrap;
}


/* ==========================================================================
   13. Backend / Editor Tweaks
   ========================================================================== */

.block-editor-iframe__body figure {
	max-width: 100% !important;
}

.wp-caption {
	width: auto !important;
	max-width: 100% !important;
}