/*
Theme Name:   Newline
Theme URI:    https://newlinebeauty.co.ke
Description:  Child theme of Twenty Twenty-Four for Newline Beauty Clinic. Colours, fonts and spacing live in theme.json.
Author:       Intent Brands
Author URI:   https://intentbrands.digital
Template:     twentytwentyfour
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  newline
*/

/* ------------------------------------------------------------------
   1. Width control
   Wide blocks stop at 1120px. Custom HTML blocks get the same limit,
   so they never stretch edge to edge on large screens.
   ------------------------------------------------------------------ */
.wp-block-html.alignwide,
.alignwide > .wp-block-html,
.nl-wide {
	max-width: var(--wp--style--global--wide-size, 1120px);
	margin-left: auto;
	margin-right: auto;
}

/* Stop images and embeds inside Custom HTML from overflowing on phones */
.wp-block-html img,
.wp-block-html iframe {
	max-width: 100%;
	height: auto;
}

.wp-block-html iframe[src*="google.com/maps"] {
	width: 100%;
	min-height: 320px;
	border: 0;
	border-radius: 12px;
}

/* ------------------------------------------------------------------
   2. Links and buttons
   Buttons keep the body font and never pick up link underlines or
   link colours, including buttons written in Custom HTML.
   ------------------------------------------------------------------ */
.wp-element-button,
.wp-block-button__link,
.nl-btn {
	font-family: var(--wp--preset--font-family--body);
	text-decoration: none;
}

.nl-btn {
	display: inline-block;
	padding: 0.85em 1.6em;
	border-radius: 999px;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nl-btn,
.nl-btn:visited {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.nl-btn:hover,
.nl-btn:focus {
	background-color: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.nl-btn--outline,
.nl-btn--outline:visited {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--accent);
}

.nl-btn--outline:hover,
.nl-btn--outline:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Links inside Custom HTML follow the theme, not the browser default */
.wp-block-html a:not(.nl-btn) {
	color: var(--wp--preset--color--accent);
}

/* Visible keyboard focus everywhere */
a:focus-visible,
.wp-element-button:focus-visible,
.nl-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   3. Floating WhatsApp button (phones only)
   Markup goes in the footer as Custom HTML:
   <a class="nl-wa-float" href="https://wa.me/254725560513?text=..." aria-label="Book on WhatsApp">...</a>
   ------------------------------------------------------------------ */
.nl-wa-float {
	display: none;
}

@media (max-width: 781px) {
	.nl-wa-float {
		display: flex;
		align-items: center;
		gap: 0.5em;
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 50;
		padding: 0.8em 1.2em;
		border-radius: 999px;
		background-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		font-family: var(--wp--preset--font-family--body);
		font-weight: 500;
		font-size: 15px;
		text-decoration: none;
		box-shadow: 0 6px 18px rgba(50, 18, 63, 0.25);
	}

	.nl-wa-float:visited,
	.nl-wa-float:hover {
		color: var(--wp--preset--color--base);
	}
}

/* ------------------------------------------------------------------
   4. Small labels (e.g. "In progress", product badges)
   ------------------------------------------------------------------ */
.nl-label {
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------
   5. WooCommerce catalogue mode
   The Code Snippets snippet removes the cart. These rules hide any
   leftover cart UI the block templates still print.
   ------------------------------------------------------------------ */
.wc-block-mini-cart,
.wp-block-woocommerce-mini-cart,
.woocommerce .quantity {
	display: none !important;
}

.woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
}