/*
Theme Name: Cuddle Up With Laura 1.0
Theme URI: https://lauraleelockwood.com/
Author: Miguel Perez (microcodes.me)
Description: Custom theme for Cuddle Up With Laura website
Version: 1.0.12
Requires at least: 7.0
Requires PHP: 7.4
Text Domain: cuwl1
*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	isolation: isolate;
	min-height: 100vh;
}

/* Keeps the site blocks above the decorative background. */
.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* Positions the full-page decorative background layer. */
.cuwl1-site-decoration {
	inset: 0;
	margin: 0 !important;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	z-index: -10;
}

/* Shares the horizontal placement rules for the header and footer decorations. */
.cuwl1-header-decoration,
.cuwl1-footer-decoration {
	left: 0;
	position: absolute;
	right: 0;
}

/* Draws the decorative image strip at the top of the page. */
.cuwl1-header-decoration {
	background-image:
		var(--cuwl1-header-left-image),
		var(--cuwl1-header-right-image),
		var(--cuwl1-header-center-image);
	background-position:
		left top,
		right top,
		left top;
	background-repeat:
		no-repeat,
		no-repeat,
		repeat-x;
	background-size:
		min(30vw, var(--cuwl1-header-left-max-width)) auto,
		min(30vw, var(--cuwl1-header-right-max-width)) auto,
		auto;
	height: 300px;
	top: 0;
}

/* Draws the decorative image strip at the bottom of the page. */
.cuwl1-footer-decoration {
	background-image:
		var(--cuwl1-footer-left-image),
		var(--cuwl1-footer-right-image),
		var(--cuwl1-footer-center-image);
	background-position:
		left bottom,
		right bottom,
		left bottom;
	background-repeat:
		no-repeat,
		no-repeat,
		repeat-x;
	background-size:
		min(30vw, var(--cuwl1-footer-left-max-width)) auto,
		min(30vw, var(--cuwl1-footer-right-max-width)) auto,
		auto;
	bottom: 0;
	height: 300px;
}

/* Aligns the left desktop footer content to the right. */
.cuwl1-footer-desktop-left {
	text-align: right;
}

/* Sets the desktop footer container dimensions and line height. */
.cuwl1-footer-desktop {
	line-height: 1;
	width: 100%;
}

/* Styles the site title inside the desktop footer. */
.cuwl1-footer-desktop .wp-block-site-title {
	font-size: 1.1em;
	font-weight: 700;
}

/* Aligns the right desktop footer content to the left. */
.cuwl1-footer-desktop-right {
	text-align: left;
}

/* Gives footer stickers and their images a consistent square size. */
.cuwl1-footer-sticker,
.cuwl1-footer-sticker img {
	height: 200px;
	width: 200px;
}

/* Centers and sizes the mobile footer content. */
.cuwl1-footer-mobile {
	line-height: 1.2;
	text-align: center;
	width: 100%;
}

/* Styles the site title inside the mobile footer. */
.cuwl1-footer-mobile .wp-block-site-title {
	font-size: 1.1em;
	font-weight: 700;
}

/* Makes eligible MailerLite form inputs fill their available width. */
.mailerlite-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]) {
	min-height: 40px;
	width: 100%;
}

/* Sets a usable minimum size for MailerLite form buttons. */
.mailerlite-form button {
	min-height: 40px;
	min-width: 120px;
}

/* Centers the navigation inside the language switcher. */
.cuwl-header-langswitch nav {
	text-align: center;
}

/* Displays the language switcher list items inline. */
.cuwl-header-langswitch ul,
.cuwl-header-langswitch li {
	display: inline-block;
	margin: 0;
	padding: 0;
}

/* Sizes and spaces language switcher flag images. */
.cuwl-header-langswitch img {
	height: 18px !important;
	margin-right: 10px;
	width: 30px !important;
}

a {
	text-underline-offset: 0.15em;
}

h1,
h2 {
	-webkit-text-stroke: 8px #fff;
	filter: drop-shadow(2px 3px 2px rgba(37, 71, 79, 0.35));
	paint-order: stroke fill;
}

/* Colors alternating rows in striped WordPress tables. */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: #fff8f1;
}

img {
	height: auto;
	max-width: 100%;
}

/* Constrains and centers the desktop header. */
.cuwl1-header-desktop {
	margin-inline: auto;
	max-width: 960px;
	width: 100%;
}

/* Sizes the custom logo displayed in the top bar. */
.cuwl1-top-bar-site-icon .custom-logo {
	height: 60px;
	object-fit: contain;
	width: 120px;
}

/* Styles the Polylang language switcher layout. */
.wp-block-polylang-language-switcher {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
	position: relative;
	top: -30px;
	z-index: 10;
}

/* Displays each Polylang language switcher image as a block. */
.wp-block-polylang-language-switcher img {
    display: block;
}

/* Sets the Polylang language switcher flag width. */
.wp-block-polylang-language-switcher img {
    width: 32px !important;
    height: auto !important;
}

/* Sizes the navigation container that holds the Polylang switcher. */
nav:has(.wp-block-polylang-language-switcher) {
    display: block;
    width: fit-content;
	align-self: center;
}