/*
Theme Name:   To Do In Destin
Theme URI:    https://todoindestin.com
Description:  Child theme of Hello Elementor for todoindestin.com. Holds the brand colors, fonts and shared styles from the approved mockups.
Author:       To Do In Destin
Template:     hello-elementor
Version:      0.18.0
Requires PHP: 7.4
Text Domain:  todoindestin
*/

/* Brand tokens. The brief's values come first; the last four appear in the mockups but not in the brief. */
:root {
	--tdid-text: #0B3C49;
	--tdid-button: #1F6E78;
	--tdid-accent: #0E9A90;
	--tdid-bg-light: #F2FAF8;
	--tdid-chip: #DDF1F0;
	--tdid-border: #D5E7E5;
	--tdid-pin: #FF7A5C;
	--tdid-muted: #4A5B63;
	--tdid-card-border: #E3ECEE;
	--tdid-hero-fallback: #3F98AB;
	--tdid-white: #FFFFFF;

	--tdid-font-heading: 'Archivo Black', Arial, sans-serif;
	--tdid-font-script: 'Kaushan Script', cursive;
	--tdid-font-body: 'Montserrat', Arial, sans-serif;

	--tdid-radius-pill: 28px;
	--tdid-radius-card: 18px;
	--tdid-max-width: 1200px;
}

body {
	margin: 0;
	font-family: var(--tdid-font-body);
	color: var(--tdid-text);
	background: var(--tdid-white);
}

a { color: var(--tdid-button); }
a:hover, a:focus { color: var(--tdid-text); }

/* Hello Elementor's reset makes plain buttons pink (#c36). Use the brand teal instead. */
[type=button], [type=submit], button { border-color: var(--tdid-button); color: var(--tdid-button); }
[type=button]:focus, [type=button]:hover,
[type=submit]:focus, [type=submit]:hover,
button:focus, button:hover { background-color: var(--tdid-button); color: var(--tdid-white); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tdid-font-heading);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.1;
	color: var(--tdid-text);
}

/* Script accent, as in "Find Things To Do in" */
.tdid-script {
	font-family: var(--tdid-font-script);
	text-transform: none;
}

.tdid-container {
	max-width: var(--tdid-max-width);
	margin: 0 auto;
	padding: 0 16px;
}

.tdid-muted { color: var(--tdid-muted); }

/* Pill button */
.tdid-button,
.tdid-button:visited {
	display: inline-block;
	background: var(--tdid-button);
	color: var(--tdid-white);
	border-radius: var(--tdid-radius-pill);
	padding: 12px 22px;
	font-weight: 700;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}
.tdid-button:hover,
.tdid-button:focus { background: var(--tdid-text); color: var(--tdid-white); }

/* Category and area chips */
.tdid-chip {
	display: inline-block;
	background: var(--tdid-chip);
	color: var(--tdid-text);
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}

/* Featured tag */
.tdid-featured-tag {
	display: inline-block;
	background: var(--tdid-white);
	color: var(--tdid-button);
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 800;
}

/* Cards */
.tdid-card {
	border: 1px solid var(--tdid-card-border);
	border-radius: var(--tdid-radius-card);
	overflow: hidden;
	background: var(--tdid-white);
}

/* Header (Main.dc.html) */
.tdid-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 40px;
	background: var(--tdid-white);
}
/* 96px, larger than the mockup's 72px, so "to do in" is readable (owner's choice) */
.tdid-header__logo img { height: 96px; width: auto; display: block; }
.tdid-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.tdid-menu a { text-decoration: none; color: var(--tdid-text); }
.tdid-menu a:hover,
.tdid-menu a:focus,
.tdid-menu .current-menu-item > a { color: var(--tdid-accent); }
.tdid-menu .tdid-nav-button > a {
	background: var(--tdid-button);
	color: var(--tdid-white);
	border-radius: var(--tdid-radius-pill);
	padding: 12px 22px;
	display: inline-block;
}
.tdid-menu .tdid-nav-button > a:hover,
.tdid-menu .tdid-nav-button > a:focus { background: var(--tdid-text); color: var(--tdid-white); }

/* Footer (Main.dc.html) */
.tdid-footer {
	background: var(--tdid-bg-light);
	padding: 32px 48px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
}
.tdid-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Menu button (phones and tablets). Shown only when JavaScript is running. */
.tdid-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--tdid-text);
	cursor: pointer;
	position: relative;
}
.tdid-menu-toggle:hover,
.tdid-menu-toggle:focus { background: var(--tdid-chip); color: var(--tdid-text); }
.tdid-menu-toggle:focus-visible { outline: 2px solid var(--tdid-button); outline-offset: 2px; }
.tdid-menu-toggle__bars,
.tdid-menu-toggle__bars::before,
.tdid-menu-toggle__bars::after {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.tdid-menu-toggle__bars { top: 21px; }
.tdid-menu-toggle__bars::before,
.tdid-menu-toggle__bars::after { content: ''; left: 0; }
.tdid-menu-toggle__bars::before { top: -7px; }
.tdid-menu-toggle__bars::after { top: 7px; }
/* Turns into an X when open */
.tdid-header--open .tdid-menu-toggle__bars { background: transparent; }
.tdid-header--open .tdid-menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.tdid-header--open .tdid-menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Dropdowns (a menu item with items under it, e.g. About → Community Partners). Desktop: opens on hover or keyboard focus. */
.tdid-menu > .menu-item-has-children { position: relative; }
.tdid-menu > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 3px 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.tdid-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 50;
	min-width: 220px;
	margin: 0;
	padding: 18px 0 0;
	list-style: none;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.tdid-menu .sub-menu::before {
	content: "";
	position: absolute;
	inset: 10px 0 0;
	z-index: -1;
	border: 1px solid var(--tdid-border);
	border-radius: 14px;
	background: var(--tdid-white);
	box-shadow: 0 10px 24px rgba(11, 60, 73, 0.12);
}
.tdid-menu .sub-menu a { display: block; padding: 12px 18px; white-space: nowrap; }
.tdid-menu > .menu-item-has-children:hover > .sub-menu,
.tdid-menu > .menu-item-has-children:focus-within > .sub-menu,
.tdid-menu > .menu-item-has-children.tdid-sub-open > .sub-menu { visibility: visible; opacity: 1; transform: none; }
.tdid-menu .current-menu-parent > a { color: var(--tdid-accent); }

@media (max-width: 960px) {
	.tdid-header--js .tdid-menu-toggle { display: block; }
	.tdid-header--js .tdid-header__nav { display: none; flex-basis: 100%; }
	.tdid-header--js.tdid-header--open .tdid-header__nav { display: block; }
	.tdid-header--js .tdid-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 0 16px;
		border-top: 1px solid var(--tdid-border);
	}
	.tdid-header--js .tdid-menu a {
		display: block;
		padding: 14px 4px;
		border-bottom: 1px solid var(--tdid-border);
	}
	.tdid-header--js .tdid-menu .tdid-nav-button { margin-top: 16px; }
	.tdid-header--js .tdid-menu > .menu-item-has-children > a::after { display: none; }
	.tdid-header--js .tdid-menu .sub-menu { position: static; min-width: 0; padding: 0; visibility: visible; opacity: 1; transform: none; transition: none; }
	.tdid-header--js .tdid-menu .sub-menu::before { display: none; }
	.tdid-header--js .tdid-menu .sub-menu a { padding: 12px 4px 12px 22px; font-size: 13px; white-space: normal; }
	.tdid-header--js .tdid-menu .tdid-nav-button > a { text-align: center; border-bottom: 0; padding: 14px 22px; }
}

@media (max-width: 720px) {
	.tdid-header { padding: 10px 16px; }
	.tdid-header__logo img { height: 68px; }
	.tdid-menu { gap: 12px 18px; font-size: 13px; }
	.tdid-footer { padding: 24px 16px; }
}

/* Palm fronds at the sides of a section (see [tdid_palms]) */
.tdid-has-palms { position: relative; overflow: hidden; }
.tdid-palms { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tdid-palms svg { position: absolute; }
/* Lift content above the fronds. :where() keeps this at zero priority, so a section's own
   positioning (like the hero's stacked slides) always wins. */
:where(.tdid-has-palms > *:not(.tdid-palms)) { position: relative; z-index: 1; }

/* Wavy bottom edge of the hero (see [tdid_wave]) */
.tdid-wave {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 130px;
	pointer-events: none;
}

@media (max-width: 720px) {
	.tdid-palms { display: none; }
	.tdid-wave { height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* Verified badge (listing page pill and card icon) */
.tdid-verified { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 20px; background: var(--tdid-chip, #DDF1F0); color: var(--tdid-accent); font-family: var(--tdid-font-body, Montserrat, Arial, sans-serif); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; vertical-align: middle; cursor: help; }
.tdid-verified svg { flex: 0 0 auto; }
.tdid-verified__text { color: var(--tdid-text); }
.tdid-verified::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); z-index: 20; width: 240px; padding: 10px 12px; border-radius: 10px; background: var(--tdid-text); color: #FFFFFF; font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.4; text-transform: none; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s; }
.tdid-verified:hover::after, .tdid-verified:focus::after { opacity: 1; visibility: visible; }
.tdid-verified:focus { outline: 2px solid var(--tdid-button); outline-offset: 2px; }
.tdid-verified-icon { display: inline-flex; margin-left: 6px; color: var(--tdid-accent); vertical-align: -3px; }
.tdid-verified-icon svg { width: 17px; height: 17px; }
.tdid-l-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tdid-l-titlerow h1 { margin-bottom: 0; }
@media (max-width: 600px) { .tdid-verified::after { left: 0; transform: none; width: 220px; } }

/* Cloudflare Turnstile "I am human" check, above each form's send button */
.tdid-turnstile { margin: 4px 0 14px; min-height: 65px; }
.tdid-turnstile .cf-turnstile { max-width: 400px; }

/* "2 months free" sign-up offer (Plans page Paid card and claim form), shown only while Cali has it on */
.tdid-offer-badge { margin: 8px 0 12px; padding: 10px 14px; border: 2px dashed var(--tdid-accent); border-radius: 12px; background: var(--tdid-chip, #DDF1F0); color: var(--tdid-text); font-size: 14px; font-weight: 800; line-height: 1.4; }
.tdid-offer-badge--claim { display: none; margin-top: 14px; }
.tdid-cl-form[data-plan="paid"] .tdid-offer-badge--claim { display: block; }