/*
Theme Name: Scottish Island Holidays
Theme URI: https://scottishislandholidays.com
Author: Isle Develop CIC
Author URI: https://scottishislandholidays.com
Description: Block theme for Scottish Island Holidays, the island holiday booking site run by Isle Develop CIC. Built for the booking app's WordPress plugin, with patterns for listings, islands and the social enterprise story.
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: scottish-island-holidays
Tags: block-patterns, full-site-editing, accessibility-ready, custom-colors, editor-style, wide-blocks
*/

/* ---------- Base and accessibility ---------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--wp--preset--color--paper);
	border-radius: 4px;
}
.has-ink-background-color :where(a, button, summary):focus-visible,
.has-deep-background-color :where(a, button, summary):focus-visible,
.wp-block-cover :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--lichen);
	box-shadow: 0 0 0 6px var(--wp--preset--color--deep);
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--lichen);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Links on dark grounds */
.has-ink-background-color a:where(:not(.wp-element-button)),
.has-deep-background-color a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--lichen); }
.has-ink-background-color a:where(:not(.wp-element-button)):hover,
.has-deep-background-color a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--paper); }

/* Buttons: comfortable touch targets */
.wp-element-button, .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: inherit; border: 2px solid currentColor;
	padding-top: calc(0.9rem - 2px); padding-bottom: calc(0.9rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(255,255,255,0.14); }
.has-ground-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-paper-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--mist); }

/* ---------- Header ---------- */

.sih-header { border-bottom: 1px solid #DCE2DF; }
.sih-header .wp-block-site-title a { display: inline-flex; align-items: center; gap: 0.7rem; max-width: 11ch; }
.sih-header .wp-block-site-title a::before {
	content: ""; flex: none; width: 42px; height: 42px;
	background: url("assets/images/mark.svg") center / contain no-repeat;
}
.sih-header .wp-block-navigation a { padding: 0.6rem 0.25rem; }
.sih-header .wp-block-navigation .current-menu-item > a,
.sih-header .wp-block-navigation a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { min-width: 48px; min-height: 48px; justify-content: center; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ground) !important; padding: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0.5rem; font-size: 1.375rem; }

/* ---------- Eyebrow, tags ---------- */

.sih-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 0.875rem; }
.sih-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sih-tag { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; background: var(--wp--preset--color--mist); color: var(--wp--preset--color--sea); margin: 0; }
.sih-tag.is-dark { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

/* ---------- Cards ---------- */

.sih-card { overflow: hidden; height: 100%; }
.sih-card > .wp-block-image { margin: 0; }
.sih-card > .wp-block-image img { border-radius: 0; width: 100%; display: block; }
.sih-card .sih-card__body { padding: 1.25rem 1.4rem 1.6rem; }
.sih-card h3 a { color: inherit; text-decoration: none; }
.sih-card h3 a::after { content: ""; position: absolute; inset: 0; }
.sih-card.is-linked { position: relative; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.sih-card.is-linked:hover { box-shadow: 0 10px 30px rgba(18, 48, 58, 0.14); transform: translateY(-2px); }
.sih-card.is-linked:focus-within { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.sih-card.is-linked h3 a:focus-visible { outline: none; box-shadow: none; }

.sih-number { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 3.5rem; line-height: 1; color: var(--wp--preset--color--sea); margin: 0; }

/* Island tiles */
.sih-isle { position: relative; border-radius: 18px; overflow: hidden; }
.sih-isle .wp-block-image { margin: 0; }
.sih-isle .wp-block-image img { border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
.sih-isle h3 { margin: 0; padding: 0.9rem 1.1rem; font-size: 1.4rem; background: var(--wp--preset--color--paper); }
.sih-isle h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.sih-isle h3 a::after { content: ""; position: absolute; inset: 0; }
.sih-isle:hover h3 a { text-decoration: underline; }
.sih-isle:focus-within { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.sih-isle h3 a:focus-visible { outline: none; box-shadow: none; }

/* Island name list */
.sih-isle-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); column-gap: 2.5rem; }
.sih-isle-list li { border-bottom: 1px solid var(--wp--preset--color--stone); }
.sih-isle-list a { display: flex; justify-content: space-between; align-items: baseline; padding: 0.85rem 0; min-height: 48px; box-sizing: border-box; text-decoration: none; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; }
.sih-isle-list a::after { content: "\2192"; }
.sih-isle-list a:hover { color: var(--wp--preset--color--sea); text-decoration: underline; }

/* Steps */
.sih-steps { list-style: none; padding: 0; margin: 0; counter-reset: sih-step; }
.sih-steps li { counter-increment: sih-step; display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--wp--preset--color--stone); }
.sih-steps li:last-child { border-bottom: 1px solid var(--wp--preset--color--stone); }
.sih-steps li::before { content: counter(sih-step); font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--wp--preset--color--sea); }

/* Ticks */
.sih-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.sih-ticks li { position: relative; padding-left: 2rem; }
.sih-ticks li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.1rem; height: 0.6rem; border-left: 3px solid var(--wp--preset--color--sea); border-bottom: 3px solid var(--wp--preset--color--sea); transform: rotate(-45deg); }

/* Plain bulleted lists in panels */
.sih-features { padding-left: 1.1rem; margin: 0; }

/* Housing bar */
.sih-bar { display: flex; height: 64px; border-radius: 12px; overflow: hidden; margin: 0; }
.sih-bar span { display: block; height: 100%; }
.sih-bar span + span { border-left: 2px solid var(--wp--preset--color--ink); }
.sih-key { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1rem; }
.sih-key li { display: grid; grid-template-columns: 14px 1fr; gap: 0.75rem; }
.sih-key li::before { content: ""; width: 14px; height: 14px; margin-top: 0.55rem; border-radius: 3px; background: var(--key); outline: 1px solid rgba(255,255,255,0.35); }
.sih-key strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; color: var(--wp--preset--color--paper); }

/* Big stat */
.sih-stat { font-family: var(--wp--preset--font-family--display); font-weight: 700; line-height: 0.9; margin: 0; }

/* Listing page */
.sih-gallery { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 22px; overflow: hidden; }
.sih-gallery .wp-block-image { margin: 0; }
.sih-gallery .wp-block-image img { border-radius: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; display: block; }
.sih-gallery .wp-block-image:first-child { grid-column: span 2; grid-row: span 2; }
.sih-gallery .wp-block-image:first-child img { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 781px) {
	.sih-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.sih-gallery .wp-block-image:first-child { grid-row: span 1; }
	.sih-gallery .wp-block-image:first-child img { aspect-ratio: 16 / 10; }
}
.sih-facts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sih-facts > .sih-fact { flex: 1 1 8.5rem; }
.sih-fact { background: var(--wp--preset--color--ground); border-radius: 12px; padding: 0.8rem 1rem; margin: 0; }
.sih-fact span { display: block; font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.sih-fact strong { font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; }
.sih-breadcrumb { font-size: 0.9375rem; }

/* Where the booking app plugin drops its embeds. Kept visible in the editor only. */
.editor-styles-wrapper .sih-app-slot { outline: 2px dashed var(--wp--preset--color--sea); outline-offset: 8px; }

/* Columns: let sidebars stack on tablets in portrait */
@media (max-width: 1023px) {
	.sih-split.wp-block-columns { flex-wrap: wrap !important; }
	.sih-split.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
}

/* Cover hero */
.wp-block-cover.sih-hero.has-custom-content-position .wp-block-cover__inner-container { width: 100% !important; margin: 0 !important; }
.sih-hero h1 { max-width: 15ch; }

/* Footer */
.sih-footer a { color: var(--wp--preset--color--stone); }
.sih-footer a:hover { color: var(--wp--preset--color--paper); }
.sih-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.sih-footer ul a { display: inline-block; padding: 0.3rem 0; }

.sih-price { font-family: var(--wp--preset--font-family--display); font-size: 2.25rem; line-height: 1; }
.sih-footer-title { font-family: var(--wp--preset--font-family--display); font-weight: 700; }
.sih-steps p { margin: 0.25rem 0 0; }

/* ---------- Booking app embeds (isleHoliday Embed plugin) ---------- */
/* Host-level custom properties override the widget's :host defaults inside its shadow root. */
[data-isleholiday] {
	--ih-bg: transparent;
	--ih-card: #FFFFFF;
	--ih-fg: #12303A;
	--ih-muted: #4A5A5F;
	--ih-border: #C9D2CF;
	--ih-accent: #E3A635;
	--ih-accent-fg: #12303A;
	--ih-radius: 14px;
	--ih-font: "Instrument Sans", "Segoe UI", Helvetica, Arial, sans-serif;
	width: 100%;
	box-sizing: border-box;
}
[data-isleholiday="search"] { --ih-bg: #FFFFFF; border-radius: 18px; padding: 1.25rem; overflow: hidden; }
.sih-app-slot > * { width: 100%; }

/* Listing columns: panels fill their column */
.sih-split .is-vertical.is-layout-flex { align-items: stretch; }
.sih-split .is-vertical.is-layout-flex > * { width: 100%; box-sizing: border-box; }
.sih-split .wp-block-buttons { justify-content: flex-start; }

/* Custom blocks inside vertical stacks: take the full width so Chrome sizes their height from it */
.sih-facts, .sih-key, .sih-isle-list, .sih-steps, .sih-ticks, .sih-housing, .sih-tags { width: 100%; box-sizing: border-box; }

/* Mobile menu: left-aligned, larger links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.5rem; font-family: var(--wp--preset--font-family--display); }