/*
Theme Name: Subversive: Cajun Cabins
Theme URI: https://cajuncabinsonline.com
Author: Subverse LLC
Author URI: https://dissidentchoir.com
Description: A child theme of Subversive for Cajun Cabins of Bayou Corne
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: subversive
Text Domain: subversive-cajuncabins
Tags:
*/

/* Only what blocks cannot express. Colours, type, spacing, buttons, cards,
   section styles and responsive visibility live in theme.json, styles/ and
   the block markup.
---------------------------------------- */

/* Linked card: the first link inside covers the whole card or photo tile.
   Blocks can link a heading or a button, not a whole group or cover. */
.is-style-linked-card {
	position: relative;
}

.is-style-linked-card a:first-of-type::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 2;
}

/* Core positions constrained groups and the cover's inner container, which
   would confine the stretched link to the text. Keep the card as its frame. */
.is-style-linked-card .wp-block-group,
.is-style-linked-card .wp-block-cover__inner-container {
	position: static;
}

/* With the inner container no longer positioned, the cover's photo and shade
   are layered behind the text by z-index inside the card instead. */
.wp-block-cover.is-style-linked-card {
	isolation: isolate;
}

.wp-block-cover.is-style-linked-card > .wp-block-cover__image-background,
.wp-block-cover.is-style-linked-card > .wp-block-cover__background {
	z-index: -1;
}

/* Photo tiles underline their title on hover; cards lift instead. */
.wp-block-cover.is-style-linked-card:hover a:first-of-type {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Hover motion: cards lift, photo tiles ease in. Blocks have no hover
   transforms or transitions. */
.wp-block-group.is-style-linked-card {
	transition: transform 0.25s, box-shadow 0.25s;
}

.wp-block-group.is-style-linked-card:hover {
	box-shadow: 0 18px 40px -24px rgba(63, 42, 34, 0.5);
	transform: translateY(-4px);
}

.wp-block-cover.is-style-linked-card .wp-block-cover__image-background {
	transition: transform 0.6s, filter 0.3s;
}

.wp-block-cover.is-style-linked-card:hover .wp-block-cover__image-background {
	filter: brightness(0.85);
	transform: scale(1.04);
}

/* Cover tiles keep white text on hover; the link colour would turn brown. */
.wp-block-cover.is-style-linked-card a,
.wp-block-cover.is-style-linked-card a:hover {
	color: var(--wp--preset--color--white);
}

/* Line and on-photo buttons on hover. Core prints a style variation's hover
   rule ahead of its base rule at the same specificity, so the base rule wins
   and the hover set in styles/ never shows. */
.wp-block-button.is-style-line .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--secondary-shade);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-on-photo .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--secondary-shade);
}

/* On-photo buttons frost the photo behind them; theme.json has no
   backdrop-filter. */
.wp-block-button.is-style-on-photo .wp-block-button__link {
	backdrop-filter: blur(4px);
}

/* Cabin photo grid: the group's rounded corners clip the photos at every
   width (groups have no overflow setting). On phones only the first photo
   shows, so it takes the full row. */
.cco-cabin-mosaic {
	overflow: hidden;
}

@media (width <= 480px) {
	.cco-cabin-mosaic > :first-child {
		grid-column: 1 / -1;
	}
}

/* Mobile call bar: pinned to the bottom of the screen. Its block visibility
   already limits it to the mobile viewport; position support only offers
   sticky to the top. */
.cco-mobile-bar {
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	z-index: 100;
}

@media (width <= 480px) {
	body {
		padding-bottom: 76px;
	}
}

/* Vertical rhythm: theme.json gives paragraphs, headings and eyebrows their
   own space below, which outranks the layout's last-child reset. Put that
   reset back so the space doesn't spill out of the end of a group. */
:root :where(.is-layout-flow, .is-layout-constrained) > :is(p, h1, h2, h3, h4):last-child {
	margin-block-end: 0;
}

/* Header menu: the current page and the section it sits in are underlined.
   functions.php marks them; blocks have no current-item style. */
.cco-header-nav :is(.current-menu-item, .current-menu-ancestor) > a {
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Header menu: collapses to the menu button below 1040px, where the full menu
   no longer fits on one line. The navigation block only collapses below
   600px. */
@media (600px <= width < 1040px) {
	.cco-header-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.cco-header-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* With the menu collapsed, the menu button sits after the call button at the
   right instead of in the middle of the header. */
@media (width < 1040px) {
	.cco-header-nav {
		order: 1;
	}

	.cco-header-nav + .wp-block-buttons {
		margin-left: auto;
	}
}

/* Cabin tabs: one line that scrolls sideways when it doesn't fit. The
   navigation block can stop wrapping but has no overflow setting. */
.cco-cabin-tabs {
	overflow-x: auto;
}

.cco-cabin-tabs .wp-block-navigation-item {
	flex-shrink: 0;
	white-space: nowrap;
}

/* At phone widths the header drops its call button and is 81px tall, not
   87px. Sticky position has one offset for every screen size. */
@media (width <= 480px) {
	.wp-block-group.cco-cabin-tabs-bar {
		top: 81px;
	}
}

/* In-page links (the cabin tabs, #request) land below the sticky header and
   tab bar instead of underneath them. */
:where(.wp-site-blocks) [id] {
	scroll-margin-top: 160px;
}

/* Rates table: horizontal rules only, labelled header row. Core's own
   `.wp-block-table td` borders out-rank anything theme.json can output. */
.wp-block-table.is-style-rates table {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.wp-block-table.is-style-rates :is(td, th) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--tertiary-shade);
	padding: 0.875rem 1.125rem;
	text-align: left;
}

.wp-block-table.is-style-rates thead {
	border: 0;
}

.wp-block-table.is-style-rates tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-rates th {
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--secondary);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-table.is-style-rates td strong {
	font-weight: 600;
}

/* Phones: sections and photo tiles tighten up. Spacing presets and the cover's
   minimum height are fixed values with no per-screen-size setting. */
@media (width <= 680px) {
	:root {
		--wp--preset--spacing--space-1400: 4rem;
	}

	.wp-block-cover.is-style-linked-card {
		min-height: 320px !important;
	}
}