/*
Theme Name: Hotel HMS Suitely
Author: HMS Hotel Software
Author URI: https://www.hmsotel.com/
Description: Hotel HMS Suitely is a free, modern block theme for hotels, resorts, apart-hotels and boutique stays. It ships with a split hero, a booking bar, alternating room showcases, special offers, dining, experiences, gallery, guest reviews, FAQ, booking call to action and contact patterns, plus complete page layouts and five colour style variations, so every hotel can present its own corporate identity through the Site Editor without writing code.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hotel-hms-suitely
Tags: one-column, wide-blocks, block-styles, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, style-variations, template-editing, threaded-comments, translation-ready

Hotel HMS Suitely WordPress Theme, (C) 2026 HMS Hotel Software
Hotel HMS Suitely is distributed under the terms of the GNU GPL v2 or later.

This theme is a block theme. Almost all of its styling lives in theme.json.
The CSS below only covers the few things theme.json cannot express yet.
*/

/* ---------------------------------------------------------------------------
 * Smooth anchor scrolling (respects reduced-motion preference).
 * ------------------------------------------------------------------------- */
@media ( prefers-reduced-motion: no-preference ) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------------------------------------------------------------------------
 * Accessibility: visible focus ring that follows the brand colour.
 * ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var( --wp--preset--color--secondary );
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Block style: Card (core/group) – border darkens on hover.
 * The base look is registered in functions.php via register_block_style().
 * ------------------------------------------------------------------------- */
.is-style-card {
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.is-style-card:hover {
	border-color: var( --wp--preset--color--secondary );
	box-shadow: var( --wp--preset--shadow--lift );
}

/* ---------------------------------------------------------------------------
 * Block style: Checkmarks (core/list).
 * ------------------------------------------------------------------------- */
ul.is-style-checkmarks {
	list-style: none;
	padding-left: 0;
}

ul.is-style-checkmarks li {
	position: relative;
	padding-left: 1.6em;
}

ul.is-style-checkmarks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var( --wp--preset--color--secondary );
}

/* ---------------------------------------------------------------------------
 * Block style: Arrow link (core/paragraph) – an inline "Read more →" link.
 * ------------------------------------------------------------------------- */
.is-style-arrow-link a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.15em;
}

.is-style-arrow-link a::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.4em;
	transition: transform 0.2s ease;
}

@media ( prefers-reduced-motion: no-preference ) {
	.is-style-arrow-link a:hover::after {
		transform: translateX( 4px );
	}
}

/* ---------------------------------------------------------------------------
 * Outline buttons keep the current text colour for their border so they
 * work on both light and dark sections.
 * ------------------------------------------------------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
	border-style: solid;
	border-color: currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--secondary );
	border-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
}

/* ---------------------------------------------------------------------------
 * Gallery: sharp corners, gentle zoom on hover.
 * ------------------------------------------------------------------------- */
.wp-block-gallery .wp-block-image {
	overflow: hidden;
}

.wp-block-gallery .wp-block-image img {
	transition: transform 0.5s ease;
}

@media ( prefers-reduced-motion: no-preference ) {
	.wp-block-gallery .wp-block-image:hover img {
		transform: scale( 1.04 );
	}
}

/* ---------------------------------------------------------------------------
 * Details block (FAQ): a thin divider and a tidy summary line.
 * ------------------------------------------------------------------------- */
.wp-block-details {
	border-bottom: 1px solid var( --wp--preset--color--neutral-light );
	padding-bottom: var( --wp--preset--spacing--30 );
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Navigation: mobile overlay uses the base colour.
 * ------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--base );
}

/* ---------------------------------------------------------------------------
 * Sticky header.
 *
 * The sticky element has to be the <header> wrapper that WordPress prints
 * around the header template part, not the bar inside it: a sticky element
 * can never travel outside its parent's box, and that parent would otherwise
 * be exactly as tall as the header itself, so it would never stick at all.
 *
 * Sticking begins at 783px, the width at which the admin bar becomes fixed.
 * Narrower screens let the header scroll away so it does not eat the viewport.
 * --wp-admin--admin-bar--height is only defined while the admin bar is on
 * screen, so logged-out visitors fall back to 0px.
 * ------------------------------------------------------------------------- */
.hotel-hms-suitely-header {
	box-shadow: 0 1px 0 var( --wp--preset--color--neutral-light );
}

@media ( min-width: 783px ) {
	header.wp-block-template-part {
		position: sticky;
		top: var( --wp-admin--admin-bar--height, 0px );
		z-index: 100;
	}

	/* Stop in-page anchors from landing behind the sticky header. */
	html {
		scroll-padding-top: calc( var( --wp-admin--admin-bar--height, 0px ) + 8.5rem );
	}
}

/* ---------------------------------------------------------------------------
 * Post navigation and pagination spacing tidy-ups.
 * ------------------------------------------------------------------------- */
.wp-block-query-pagination {
	margin-top: var( --wp--preset--spacing--50 );
}

.wp-block-post-navigation-link {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 600;
}