/*
	Tammy's Craft Garage — custom overrides
	Loaded after main.css so these rules win. Keeps us out of the SASS build.

	Brand palette
		Plum    #5E244E   (deep background)
		Crimson #AA1C41   (background accent)
		Coral   #E68457   (interactive accent: links, primary buttons, focus)
		Cream   #FFE8B4   (text & borders, replacing the template's white)
*/

/* ============================================================
   0. Typeface — Caveat & Outfit
   ============================================================ */

	body, input, select, textarea {
		font-family: 'Outfit', sans-serif;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Caveat', cursive;
		text-transform: none;
		letter-spacing: 0.05rem;
		font-weight: 700;
	}

	#header h1 {
		font-size: 3.5rem;
	}

/* ============================================================
   1. Color palette
   ============================================================ */

/* --- Base text --- */

	body, input, select, textarea {
		color: #FFE8B4;
	}

	h1, h2, h3, h4, h5, h6, strong, b {
		color: #FFE8B4;
	}

/* Section heading underline -> coral accent */

	h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
		border-bottom-color: #E68457;
	}

/* --- Links --- */

	a {
		color: #E68457;
	}

		a:hover {
			color: #F2A079;
		}

/* --- Background: plum -> crimson gradient --- */

	#bg:after {
		background-image: -webkit-linear-gradient(135deg, #5E244E 0%, #7E1F48 55%, #AA1C41 100%);
		background-image: linear-gradient(135deg, #5E244E 0%, #7E1F48 55%, #AA1C41 100%);
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}

	#bg:before {
		background-image: none;
		background-color: rgba(45, 17, 38, 0.25);
	}

/* --- Modal panels: dark plum tint --- */

	#main article {
		background-color: rgba(45, 17, 38, 0.88);
	}

/* --- Header structure (logo badge, content rules, nav) --- */

	#header > *:before {
		background-color: #FFE8B4 !important;
	}

	/* The theme's "use-middle" nav assumes every item is the same width: it
	   draws a fake divider and a connector line at exactly 50%, and removes the
	   middle item's real border. Real labels are never equal width, so that 50%
	   line never lands on a cell boundary -- the menu looks off-centre and the
	   hover highlight bleeds across it. We disable the whole mechanism: hide the
	   fake divider, hide the connector line pointing at the nav, and give the
	   middle item a real border like every other item. The nav then becomes a
	   self-contained, naturally-centred pill that works with any label text. */
	#header nav.use-middle:after {
		display: none !important;
	}

	#header nav:before {
		display: none !important;
	}

	#header nav.use-middle ul li.is-middle {
		border-left: solid 1px #FFE8B4;
	}

	#header .logo {
		border-color: #FFE8B4;
	}

	#header .content {
		border-color: #FFE8B4;
	}

	/* Dark plum backing behind the menu so the cream text reads with strong
	   contrast instead of floating over the mid-tone plum/crimson gradient. */
	#header nav ul {
		border-color: #FFE8B4;
		background-color: rgba(45, 17, 38, 0.85);
	}

		#header nav ul li {
			border-left-color: #FFE8B4;
			border-top-color: #FFE8B4;
		}

			/* Each cell sizes to its label (symmetric padding, no wrapping) so
			   two-word labels stay on one line and every divider sits on a real
			   boundary -- the hover highlight can never spill into a neighbour. */
			#header nav ul li a {
				padding: 0 1.5rem;
				white-space: nowrap;
				font-weight: 700;
			}

			#header nav ul li a:hover {
				background-color: rgba(230, 132, 87, 0.18);
			}

/* --- Home front: heavier title & tagline ---
   The template renders the landing title at weight 600 and the tagline at the
   body's light 300. Push both heavier so the brand reads boldly on arrival. */

	#header .content .inner h1 {
		font-weight: 900;
	}

	#header .content .inner p {
		font-weight: 700;
	}

/* --- Buttons --- */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		box-shadow: inset 0 0 0 1px #E68457;
		color: #FFE8B4 !important;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			background-color: rgba(230, 132, 87, 0.15);
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(230, 132, 87, 0.3);
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: #E68457;
			box-shadow: inset 0 0 0 1px #E68457;
			color: #3A162F !important;
		}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			button.primary:hover,
			.button.primary:hover {
				background-color: #AA1C41;
				box-shadow: inset 0 0 0 1px #AA1C41;
				color: #FFE8B4 !important;
			}

/* --- Form fields --- */

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		border-color: rgba(255, 232, 180, 0.5);
	}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			background: rgba(230, 132, 87, 0.1);
			border-color: #E68457;
			box-shadow: 0 0 0 1px #E68457;
		}

	select option {
		color: #FFE8B4;
		background: #5E244E;
	}

	/* Cream dropdown arrow to match the new text color */
	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23FFE8B4' /%3E%3C/svg%3E");
	}

	input[type="checkbox"] + label,
	input[type="radio"] + label {
		color: #FFE8B4;
	}

		input[type="checkbox"] + label:before,
		input[type="radio"] + label:before {
			border-color: rgba(255, 232, 180, 0.5);
		}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #E68457 !important;
			border-color: #E68457 !important;
			color: #3A162F;
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			background: rgba(230, 132, 87, 0.1);
			border-color: #E68457;
			box-shadow: 0 0 0 1px #E68457;
		}

/* --- Tables (Upcoming Shows) --- */

	table tbody tr {
		border-color: rgba(255, 232, 180, 0.35);
	}

		table tbody tr:nth-child(2n + 1) {
			background-color: rgba(255, 232, 180, 0.06);
		}

	table th {
		color: #FFE8B4;
	}

	table thead {
		border-bottom-color: #E68457;
	}

	table tfoot {
		border-top-color: rgba(255, 232, 180, 0.35);
	}

/* --- Text selection --- */

	::-moz-selection {
		background-color: #E68457;
		color: #3A162F;
	}

	::selection {
		background-color: #E68457;
		color: #3A162F;
	}

/* ============================================================
   2. Header logo: large, prominent brand mark
   ============================================================ */

	/* Deep-plum disc with a defined cream edge so the logo reads as a distinct medallion */
	#header .logo {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 13rem;
		height: 13rem;
		line-height: 1;
		border: solid 2px rgba(255, 232, 180, 0.7);
		border-radius: 50%;
		background-color: #2D1126;
		overflow: hidden;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
	}

		#header .logo img {
			display: block;
			width: auto;
			height: 11.5rem;
		}

	@media screen and (max-width: 980px) {
		#header .logo {
			width: 11rem;
			height: 11rem;
		}
			#header .logo img {
				height: 9.75rem;
			}
	}

	@media screen and (max-width: 736px) {
		#header .logo {
			width: 11.5rem;
			height: 11.5rem;
		}
			#header .logo img {
				height: 10.25rem;
			}
	}

	@media screen and (max-width: 480px) {
		#header .logo {
			width: 11.5rem;
			height: 11.5rem;
		}
			#header .logo img {
				height: 10.25rem;
			}
	}

/* ============================================================
   3. Custom Designs: responsive gallery grid
   ============================================================ */

	#designs .gallery-hint {
		display: inline-block;
		margin: 0.5rem 0 0 0;
		font-size: 0.9rem;
		font-style: italic;
		letter-spacing: 0.05rem;
		color: #FFE8B4;
		opacity: 0.8;
	}

		#designs .gallery-hint .fa-expand-arrows-alt {
			margin-right: 0.4rem;
		}

	#designs .gallery {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1rem;
		margin: 1.5rem 0 0 0;
	}

		#designs .gallery a {
			position: relative;
			display: block;
			border-bottom: none;
			cursor: zoom-in;
		}

		/* Persistent expand badge so the click/tap affordance is visible
		   even on touch devices, where the :hover lift never fires. */
		#designs .gallery a::after {
			content: "\f31e";
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			position: absolute;
			top: 0.6rem;
			right: 0.6rem;
			width: 1.9rem;
			height: 1.9rem;
			line-height: 1.9rem;
			text-align: center;
			font-size: 0.9rem;
			color: #FFE8B4;
			background-color: rgba(45, 17, 38, 0.72);
			border-radius: 50%;
			opacity: 0.85;
			pointer-events: none;
			-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
			transition: opacity 0.2s ease, transform 0.2s ease;
		}

		#designs .gallery a:hover::after {
			opacity: 1;
			-webkit-transform: scale(1.1);
			transform: scale(1.1);
		}

		#designs .gallery img {
			display: block;
			width: 100%;
			height: 210px;
			object-fit: contain;
			background-color: rgba(255, 232, 180, 0.08);
			border-radius: 6px;
			padding: 0.5rem;
			box-sizing: border-box;
			-webkit-transition: -webkit-transform 0.2s ease, box-shadow 0.2s ease;
			transition: transform 0.2s ease, box-shadow 0.2s ease;
		}

		#designs .gallery a:hover img {
			-webkit-transform: translateY(-3px);
			transform: translateY(-3px);
			box-shadow: 0 8px 20px rgba(45, 17, 38, 0.5);
		}

	@media screen and (max-width: 480px) {
		#designs .gallery {
			grid-template-columns: repeat(2, 1fr);
			gap: 0.75rem;
		}

			#designs .gallery img {
				height: 160px;
			}
	}

/* ============================================================
   3. Responsive nav — stack earlier so two-word labels fit
   ------------------------------------------------------------
   The template only stacks the menu below 480px; between 480px
   and 736px the horizontal pill is too narrow for labels like
   "Upcoming Shows", so the second word wrapped and overflowed
   the fixed-height links. Apply the stacked layout up to 736px.
   ============================================================ */

	@media screen and (max-width: 736px) {

		#header nav ul {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			min-width: 12rem;
			max-width: 100%;
		}

			#header nav ul li,
			#header nav.use-middle ul li.is-middle {
				border-left: 0;
				border-top: solid 1px #FFE8B4;
			}

				#header nav ul li:first-child {
					border-top: 0;
				}

				#header nav ul li a {
					height: 3rem;
					line-height: 3rem;
					min-width: 0;
					width: 100%;
				}

		#header nav.use-middle:after {
			display: none;
		}

	}

/* ============================================================
   4. About Me & Upcoming Shows — smaller, centred lead image
   ------------------------------------------------------------
   The template renders ".image.main" full-bleed across the
   article. For these two sections a smaller, centred image
   reads better alongside the text. Cap the width and centre it.
   ============================================================ */

	#about .image.main,
	#shows .image.main {
		max-width: 24rem;
		margin-left: auto;
		margin-right: auto;
	}

/* ============================================================
   Contact form — Turnstile widget + status message
   ============================================================ */

	#contact-form .cf-turnstile {
		margin: 0 0 1.5rem 0;
	}

	#contact-status {
		margin: 1rem 0 0 0;
		min-height: 1.5em;
	}

		#contact-status.status-success {
			color: #FFE8B4;
			font-weight: bold;
		}

		#contact-status.status-error {
			color: #E68457;
			font-weight: bold;
		}

/* ============================================================
   Contact success modal
   ------------------------------------------------------------
   Shown by contact.js after a message is sent. A fixed,
   flex-centred overlay above everything (articles sit inside
   #main); a dimmed plum backdrop with the same dark-plum card
   and Close affordance the template uses for articles.
   ============================================================ */

	.contact-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding: 2rem;
		z-index: 10000;
		background-color: rgba(45, 17, 38, 0.65);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		opacity: 0;
		-webkit-transition: opacity 0.325s ease-in-out;
		transition: opacity 0.325s ease-in-out;
	}

	.contact-modal[hidden] {
		display: none;
	}

	.contact-modal.is-visible {
		opacity: 1;
	}

		.contact-modal-card {
			position: relative;
			width: 30rem;
			max-width: 100%;
			padding: 3.5rem 2.5rem 2rem 2.5rem;
			text-align: center;
			background-color: rgba(45, 17, 38, 0.95);
			border: solid 1px rgba(255, 232, 180, 0.5);
			border-radius: 4px;
			box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
			-webkit-transform: translateY(0.5rem);
			-ms-transform: translateY(0.5rem);
			transform: translateY(0.5rem);
			-webkit-transition: -webkit-transform 0.325s ease-in-out;
			transition: transform 0.325s ease-in-out;
			outline: 0;
		}

		.contact-modal.is-visible .contact-modal-card {
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
		}

			.contact-modal-card .contact-modal-icon {
				width: 4rem;
				height: 4rem;
				margin: 0 auto 1.25rem auto;
				line-height: 4rem;
				font-size: 2rem;
				color: #3A162F;
				background-color: #E68457;
				border-radius: 50%;
			}

			.contact-modal-card h2 {
				margin-bottom: 0.75rem;
			}

			.contact-modal-card p {
				margin-bottom: 0;
			}

			/* Reuse the template's article close button (top-right X). */
			.contact-modal-card .close {
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				width: 4rem;
				height: 4rem;
				cursor: pointer;
				text-indent: 4rem;
				overflow: hidden;
				white-space: nowrap;
			}

				.contact-modal-card .close:before {
					content: '';
					display: block;
					position: absolute;
					top: 0.75rem;
					left: 0.75rem;
					width: 2.5rem;
					height: 2.5rem;
					border-radius: 100%;
					background-position: center;
					background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
					background-size: 20px 20px;
					background-repeat: no-repeat;
					-webkit-transition: background-color 0.2s ease-in-out;
					transition: background-color 0.2s ease-in-out;
				}

				.contact-modal-card .close:hover:before {
					background-color: rgba(255, 255, 255, 0.075);
				}

				.contact-modal-card .close:active:before {
					background-color: rgba(255, 255, 255, 0.175);
				}

	@media (prefers-reduced-motion: reduce) {
		.contact-modal,
		.contact-modal-card {
			-webkit-transition: none;
			transition: none;
		}
	}