/*
Theme Name: Kubo
Theme URI: https://www.karaokekubo.com
Author: Karaoke Kubo
Description: Karaoke Kubo's own block theme. Colors, fonts and spacing live in theme.json; the header and footer are template parts you can edit in Appearance → Editor.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.4.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kubo
*/

/* Only what theme.json can't express lives here. Keep it short. */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Phone type scale (same step-down Riverbank used below 770px). */
@media (max-width: 769px) {
	body {
		--wp--preset--font-size--small: 12px;
		--wp--preset--font-size--normal: 16px;
		--wp--preset--font-size--medium: 20px;
		--wp--preset--font-size--large: 24px;
		--wp--preset--font-size--x-large: 28px;
		--wp--preset--font-size--huge: 36px;
	}
}

/* ---------- Forms (Amelia, Fluent Forms, Ninja Forms inherit these) ---------- */
input:read-write,
select,
textarea {
	background: var(--wp--preset--color--ti-bg);
	border: 2px solid var(--wp--preset--color--ti-fg);
	border-radius: 5px;
	color: var(--wp--preset--color--ti-fg);
	font-family: inherit;
}
input:read-write:not([type="search"]),
select,
textarea {
	font-size: var(--wp--preset--font-size--normal);
	padding: 11px;
	width: 100%;
}
textarea {
	resize: vertical;
}
button[type="submit"],
input[type="submit"] {
	background: var(--wp--preset--color--ti-accent);
	border: 0;
	border-radius: 3px;
	box-shadow: none;
	color: var(--wp--preset--color--ti-fg-alt);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 600;
	padding: 16px 32px;
}

/* Fluent Forms full width; Amelia booking form: hide the time-zone line. */
.frm-fluent-form {
	max-width: 100% !important;
	width: 100% !important;
}
.am-advsc__time-zone {
	display: none;
}
/* Hide Amelia's "remaining" and "total" amounts on pages that ask for it (Reserve, Happy Hour):
   give any block on the page the class kubo-amelia-hide-totals (Advanced → Additional CSS class). */
body:has(.kubo-amelia-hide-totals) :is(.am-fs__payments-app-info-remaining, .am-fs__payments-app-info-total) {
	display: none !important;
}

/* ---------- Navigation overlay (mobile + homepage ☰ menu) ---------- */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ti-bg);
	color: var(--wp--preset--color--ti-fg);
}
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 24px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a {
	font-size: var(--wp--preset--font-size--large) !important;
}

/* ---------- Tables, captions ---------- */
.wp-block-table thead {
	border-bottom: 2px solid;
}
.wp-block-table tfoot {
	border-top: 2px solid;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--ti-bg-alt);
}
figure.wp-block-image figcaption,
.wp-block-table figcaption {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.6;
}

/* ---------- Footer ---------- */
.kubo-footer__panels {
	align-items: stretch;
}
.kubo-contact {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-start: 5px !important;
}
:not(.kubo-contact) + .kubo-contact {
	margin-block-start: 12px !important;
}
.kubo-contact::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: var(--kubo-icon) center / contain no-repeat;
	mask: var(--kubo-icon) center / contain no-repeat;
}
.kubo-contact a {
	text-decoration: none;
}
.kubo-contact a:hover,
.kubo-contact a:focus {
	text-decoration: underline;
}
.kubo-contact--phone {
	--kubo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}
.kubo-contact--email {
	--kubo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}
.kubo-contact--pin {
	--kubo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* Footer newsletter form (Ninja Forms #1) on the dark panel. */
.kubo-footer__signup input[type="text"],
.kubo-footer__signup input[type="email"] {
	background: transparent;
	border: 2px solid #fff;
	border-radius: 0;
	color: #fff;
}
.kubo-footer__signup input[type="submit"],
.kubo-footer__signup input[type="button"] {
	background-color: var(--wp--preset--color--custom-color-2);
	border-radius: 0;
	color: var(--wp--preset--color--custom-color-3);
	font-size: 12px;
}
.kubo-footer__signup .nf-form-fields-required {
	display: none;
}

/* ---------- Homepage hero ---------- */
.kubo-hero {
	overflow: hidden;
}
/* Let the ☰ menu and disco ball position against the whole hero, not the content box. */
.kubo-hero > .wp-block-cover__inner-container {
	position: static;
}
.kubo-hero__brand,
.kubo-hero__disco {
	position: relative;
	z-index: 2;
}
.kubo-hero > .wp-block-cover__image-background {
	object-position: 90% 50%;
}
@media (min-width: 767px) {
	.kubo-hero > .wp-block-cover__image-background {
		object-position: 50% 50%;
	}
}
.kubo-hero__menu {
	position: absolute;
	top: 30px;
	right: 30px;
	z-index: 100;
}
.kubo-hero__menu .wp-block-navigation__responsive-container-open svg {
	width: 48px;
	height: 48px;
}
.kubo-hero__disco {
	display: none;
}
@media (min-width: 767px) {
	.kubo-hero__disco {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: -25%;
		width: 300px;
		margin: 0 auto !important;
	}
}
.kubo-hero__brand {
	width: 500px;
	max-width: 100%;
	padding-right: 5rem;
	text-align: center;
}
@media (max-width: 766px) {
	/* Phones: center the logo + button instead of hugging the right edge. */
	.kubo-hero.wp-block-cover {
		justify-content: center;
	}
	.kubo-hero > .wp-block-cover__inner-container {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.kubo-hero__brand {
		width: 300px;
		padding-right: 0;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Section styles (Group > Styles > "Section: …"): on a box rather than a full-width band, add side padding and
   round the corners so the text doesn't touch the edges. Full-width bands keep the page's own side padding. */
.wp-block-group[class*="is-style-section-"]:not(.alignfull),
.wp-block-columns[class*="is-style-section-"]:not(.alignfull) {
	border-radius: var(--wp--custom--radius--card);
	padding-left: clamp(20px, 3vw, 40px);
	padding-right: clamp(20px, 3vw, 40px);
}

/* "Chunky" button style (Book Now): pick it in the button's Styles panel. */
.wp-block-button.is-style-chunky .wp-block-button__link {
	background: #000;
	border: 4px solid #000;
	border-radius: 10px;
	color: #fff;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.2;
	padding: 15px 20px;
	text-transform: uppercase;
}
.wp-block-button.is-style-chunky .wp-block-button__link:hover,
.wp-block-button.is-style-chunky .wp-block-button__link:focus {
	background: var(--wp--preset--color--custom-color-3);
	border-color: var(--wp--preset--color--custom-color-3);
	color: #fff;
}

/* Entrance animations (homepage). Skipped for people who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.kubo-fade-down {
		animation: kubo-fade-down 0.8s ease 0.1s both;
	}
	.kubo-fade-in {
		animation: kubo-fade-in 0.5s ease both;
	}
}
@keyframes kubo-fade-down {
	from { opacity: 0; transform: translate3d(0, -40px, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes kubo-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}