/*
Theme Name: Bright Smile
Theme URI: https://webintegrate.com/#themes
Author: Web Integrate
Author URI: https://webintegrate.com
Description: Bright Smile is a clean, friendly block theme for dental offices, orthodontists and small medical practices. It ships with ready-made patterns for a welcoming hero, services, meet-the-doctor, what to expect on a first visit, patient reviews, FAQs and an appointment call to action — all editable in the Site Editor with no code. Includes a "Modern Sans" style variation with clean sans-serif headings.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bright-smile
Tags: block-patterns, block-styles, full-site-editing, one-column, wide-blocks, custom-colors, custom-logo, custom-menu, editor-style, featured-images, style-variations, template-editing, threaded-comments, translation-ready, blog
*/

/*
 * Most styling lives in theme.json. This file only holds what theme.json
 * cannot express yet.
 */

/* Keyboard focus that stays visible on every background */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ==========================================================================
   Block style variations (registered in functions.php)
   ========================================================================== */

/* Small rounded label above headings, e.g. "What We Offer" */
.is-style-bright-smile-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Pill tag on dark backgrounds, e.g. the hero tagline */
.is-style-bright-smile-pill {
	display: inline-block;
	width: fit-content;
	padding: 0.35em 1.1em;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 15%, transparent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* Service / info card */
.is-style-bright-smile-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.is-style-bright-smile-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--soft);
}
@media (prefers-reduced-motion: reduce) {
	.is-style-bright-smile-card,
	.is-style-bright-smile-card:hover { transition: none; transform: none; }
}

/* Soft square tile behind an icon */
.is-style-bright-smile-icon-tile img {
	box-sizing: content-box;
	padding: 12px;
	border-radius: 14px;
	background: var(--wp--preset--color--tint);
}

/* Translucent panel on the hero gradient */
.is-style-bright-smile-glass {
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 24px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
}

/* White floating card with a strong shadow */
.is-style-bright-smile-floating {
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--strong);
}

/* List with check marks instead of bullets */
.is-style-bright-smile-checklist {
	list-style: none;
	padding-left: 0;
}
.is-style-bright-smile-checklist li {
	position: relative;
	padding: 0.55em 0 0.55em 2em;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.is-style-bright-smile-checklist li:last-child { border-bottom: 0; }
.is-style-bright-smile-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background: var(--wp--preset--color--tint);
}
.is-style-bright-smile-checklist li::after {
	content: "";
	position: absolute;
	left: 0.42em;
	top: 1em;
	width: 0.35em;
	height: 0.6em;
	border: solid var(--wp--preset--color--primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Stats row dividers in the hero */
.bright-smile-stats > * + * {
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	padding-left: var(--wp--preset--spacing--30);
}
@media (max-width: 600px) {
	/* Keep the three stats on one row so no divider starts a new line */
	.bright-smile-stats {
		display: grid;
		grid-template-columns: repeat(3, auto);
		justify-content: start;
		column-gap: var(--wp--preset--spacing--20);
	}
	.bright-smile-stats > * + * {
		padding-left: var(--wp--preset--spacing--20);
	}

	/* The hero already offers "Book an Appointment" right below the header */
	.bright-smile-site-header .wp-block-buttons.bright-smile-header-cta {
		display: none;
	}
}

/* FAQ accordion (Details block) */
.wp-block-details.is-style-bright-smile-faq {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}
.wp-block-details.is-style-bright-smile-faq summary {
	font-weight: 600;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
}
.wp-block-details.is-style-bright-smile-faq[open] summary {
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.5em;
}

/* ==========================================================================
   Header
   ========================================================================== */

/*
 * Header stays pinned to the top on every page.
 * Sticky must sit on the template-part wrapper: the inner group is exactly as
 * tall as its parent, so sticking it would have no effect. No backdrop-filter
 * here — it would trap the mobile navigation overlay inside the header.
 */
.wp-site-blocks > header.wp-block-template-part:has(> .bright-smile-site-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .bright-smile-site-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .bright-smile-site-header) { top: 0; }
}

/* Anchor links (#services, #appointment…) land below the pinned header */
html { scroll-padding-top: calc(6rem + var(--wp-admin--admin-bar--height, 0px)); }

/* Stacked full-width sections sit flush against each other */
.wp-block-post-content > .alignfull + .alignfull,
main > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Headings: break between words; split a word only if it cannot fit at all */
:where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
	hyphens: manual;
}

/* ==========================================================================
   Post content — also covers posts written in the classic editor
   ========================================================================== */

/* Long words and URLs never push the page wider than the screen */
.wp-block-post-content,
.wp-block-post-excerpt,
.wp-block-comment-content {
	overflow-wrap: break-word;
}
.wp-block-post-content a,
.wp-block-comment-content a,
.wp-block-post-navigation-link {
	overflow-wrap: anywhere;
}

/* Media shrinks to fit narrow screens */
.wp-block-post-content :where(img, video, iframe, embed, object) {
	max-width: 100%;
}
.wp-block-post-content :where(img) {
	height: auto;
}
.wp-block-post-content .wp-caption {
	max-width: 100%;
}

/* Preformatted text scrolls inside its box instead of widening the page */
.wp-block-post-content pre {
	max-width: 100%;
	overflow-x: auto;
}

/* Classic alignments (block alignments are handled by the layout engine) */
.wp-block-post-content .alignleft {
	float: left;
	margin-top: 0.4em;
	margin-bottom: 1em;
	margin-inline-end: var(--wp--preset--spacing--30);
}
.wp-block-post-content .alignright {
	float: right;
	margin-top: 0.4em;
	margin-bottom: 1em;
	margin-inline-start: var(--wp--preset--spacing--30);
}
.wp-block-post-content .aligncenter {
	margin-left: auto;
	margin-right: auto;
}
.wp-block-post-content img.aligncenter {
	display: block;
}
.wp-block-post-content::after {
	content: "";
	display: table;
	clear: both;
}

/* Classic captions */
.wp-block-post-content .wp-caption-text,
.wp-block-post-content .gallery-caption {
	margin-top: 0.5em;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* Classic [gallery] shortcode as a responsive grid */
.wp-block-post-content .gallery {
	display: grid;
	grid-template-columns: repeat(var(--bright-smile-gallery-columns, 3), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}
.wp-block-post-content .gallery-columns-1 { --bright-smile-gallery-columns: 1; }
.wp-block-post-content .gallery-columns-2 { --bright-smile-gallery-columns: 2; }
.wp-block-post-content .gallery-columns-4 { --bright-smile-gallery-columns: 4; }
.wp-block-post-content .gallery-columns-5 { --bright-smile-gallery-columns: 5; }
.wp-block-post-content .gallery-columns-6 { --bright-smile-gallery-columns: 6; }
.wp-block-post-content .gallery-columns-7 { --bright-smile-gallery-columns: 7; }
.wp-block-post-content .gallery-columns-8 { --bright-smile-gallery-columns: 8; }
.wp-block-post-content .gallery-columns-9 { --bright-smile-gallery-columns: 9; }
.wp-block-post-content .gallery .gallery-item {
	margin: 0;
	/* WordPress prints an inline width/float for each item; the grid replaces it */
	width: auto !important;
	float: none !important;
}
.wp-block-post-content .gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
}
@media (max-width: 600px) {
	.wp-block-post-content .gallery {
		grid-template-columns: repeat(min(var(--bright-smile-gallery-columns, 3), 2), minmax(0, 1fr));
	}
}

/* Page links for posts split with <!--nextpage--> */
.bright-smile-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.bright-smile-page-links .post-page-numbers {
	display: inline-block;
	min-width: 2.4em;
	padding: 0.35em 0.7em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	text-align: center;
	text-decoration: none;
}
.bright-smile-page-links .post-page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}