/*
Theme Name: Alyde Apartments
Theme URI: https://alydeapartments.it
Author: Octopus Creative Agency
Author URI: https://www.octopuscreativeagency.it
Description: Tema WordPress personalizzato per Àlyde Apartments, Napoli. Include appartamenti, gallerie, recensioni, Vivi Napoli, traduzioni e sincronizzazione iCal.
Version: 1.5.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: alyde-apartments
*/

/* Selettore lingue. Le bandiere sono disegnate in CSS per una resa uniforme. */
.language-switcher > ul {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.language-switcher .lang-item-fr a::before {
	background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%);
}

/* La foto della hero deve riempire la sezione: .photo-frame viene dichiarata
 * più avanti nel foglio principale e senza questa specificità la rendeva
 * nuovamente relativa, lasciando metà hero bianca su smartphone. */
.hero > .hero-photo {
	position: absolute;
	inset: 0;
	height: 100%;
}

.hero > .hero-photo img {
	height: 100%;
}

@media (max-width: 1220px) {
	.header {
		isolation: isolate;
	}

	.header .header-actions {
		flex: 0 0 auto;
		min-width: 0;
		margin-left: auto;
	}

	.header .language-switcher {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static;
		height: auto;
		margin: 0;
		padding: 0;
	}

	.header .language-switcher > ul {
		display: flex !important;
		flex-flow: row nowrap !important;
		align-items: center;
		gap: 3px;
		margin: 0;
		padding: 0;
		list-style: none;
		white-space: nowrap;
	}

	.header .language-switcher .lang-item {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.header .language-switcher .lang-item a {
		display: inline-flex;
		width: 28px;
		height: 34px;
		align-items: center;
		justify-content: center;
		padding: 5px 4px;
		border-radius: 6px;
		font-size: 0;
		line-height: 1;
		transition: background-color .2s ease;
	}

	.header .language-switcher .lang-item a::before {
		content: "";
		display: block;
		width: 20px;
		height: 14px;
		flex: 0 0 20px;
		border: 1px solid rgba(0, 0, 0, .14);
		border-radius: 2px;
		background-size: 100% 100%;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
	}

	.header .language-switcher .lang-item-it a::before {
		background: linear-gradient(90deg, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%);
	}

	.header .language-switcher .lang-item-en a::before {
		background:
			linear-gradient(33deg, transparent 42%, #fff 42% 48%, #c8102e 48% 52%, #fff 52% 58%, transparent 58%),
			linear-gradient(-33deg, transparent 42%, #fff 42% 48%, #c8102e 48% 52%, #fff 52% 58%, transparent 58%),
			linear-gradient(90deg, transparent 40%, #fff 40% 60%, transparent 60%),
			linear-gradient(0deg, transparent 34%, #fff 34% 66%, transparent 66%),
			linear-gradient(90deg, transparent 46%, #c8102e 46% 54%, transparent 54%),
			linear-gradient(0deg, transparent 42%, #c8102e 42% 58%, transparent 58%),
			#012169;
	}

	.header .language-switcher .lang-item-es a::before {
		background: linear-gradient(0deg, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%);
	}

	.header .language-switcher .lang-item-fr a::before {
		background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%);
	}

	.header .language-switcher .lang-item a:hover,
	.header .language-switcher .current-lang a {
		background: rgba(200, 161, 90, .16);
	}

	.header .site-nav.is-open {
		z-index: 30;
		max-height: calc(100svh - 88px);
		overflow-y: auto;
	}

	body.menu-open {
		overflow: hidden;
	}
}

@media (max-width: 640px) {
	html,
	body {
		overflow-x: clip;
	}

	.header {
		height: 72px;
		padding-right: 14px;
		padding-left: 14px;
	}

	.header .brand-logo {
		width: 56px;
		height: 56px;
	}

	.header .header-actions {
		gap: 3px;
	}

	.header .language-switcher > ul {
		gap: 2px;
	}

	.header .language-switcher .lang-item a {
		width: 27px;
		height: 34px;
		padding-right: 3px;
		padding-left: 3px;
	}

	.header .language-switcher .lang-item a::before {
		width: 19px;
		height: 13px;
		flex-basis: 19px;
	}

	.header .menu-toggle {
		flex: 0 0 40px;
		width: 40px;
		margin-right: -6px;
	}

	.header .site-nav.is-open {
		max-height: calc(100svh - 72px);
	}

	.hero {
		height: calc(100svh - 72px);
		min-height: 640px;
		max-height: 780px;
		background: #1d1d1b;
	}

	.hero > .hero-photo::before {
		z-index: 1;
		background:
			linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .48) 48%, rgba(0, 0, 0, .78) 100%),
			linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .08));
	}

	.hero > .hero-photo img {
		object-position: 58% center;
	}

	.hero .hero-overlay {
		z-index: 2;
		left: 20px;
		right: 20px;
		max-width: 520px;
	}

	.hero h1 {
		font-size: clamp(42px, 12.5vw, 49px);
		line-height: .98;
		margin-bottom: 22px;
	}

	.hero p {
		max-width: 34em;
		margin-bottom: 27px;
		color: #f0ede8;
		font-size: 15px;
		line-height: 1.55;
	}

	.hero .eyebrow {
		margin-bottom: 18px;
	}

	.hero .button {
		width: min(100%, 280px);
		padding: 17px 18px;
	}

	.trust-strip {
		padding: 18px 20px;
	}

	.trust-strip span {
		line-height: 1.45;
	}

	.section,
	.page-hero {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.intro,
	.details,
	.story,
	.contact,
	.room-info {
		gap: 34px;
	}

	.section h2,
	.intro h2 {
		font-size: clamp(40px, 11.4vw, 44px);
		line-height: 1.02;
	}

	.eyebrow {
		margin-bottom: 18px;
	}

	.lead {
		font-size: 21px;
		line-height: 1.42;
	}

	.intro p:not(.lead),
	.details-copy p,
	.location p,
	.story p,
	.page-content p,
	.section-head p {
		color: #5f5a53;
	}

	.section-head {
		margin-bottom: 46px;
	}

	.room-grid {
		gap: 42px;
	}

	.room-card > div:last-child {
		padding-top: 22px;
		padding-bottom: 0;
	}

	.details {
		padding-top: 72px;
	}

	.mosaic {
		grid-template-rows: 270px 155px;
		gap: 12px;
	}

	.reason-grid h3 {
		margin-top: 25px;
	}

	.location {
		padding-top: 72px;
		padding-bottom: 72px;
		gap: 42px;
	}

	.location > .photo-frame,
	.location .placeholder {
		min-height: 350px;
	}

	.cta {
		padding: 82px 20px;
	}

	.page-hero {
		padding-top: 88px;
		padding-bottom: 60px;
	}

	.page-hero h1,
	.contact h1 {
		font-size: 46px;
	}

	.footer {
		gap: 44px;
	}

	.footer-bottom {
		margin-top: 18px;
	}

	.post-content {
		padding-right: 20px;
		padding-bottom: 72px;
		padding-left: 20px;
	}
}

/* Footer social links and safe journal flow. */
.footer-socials{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:12px!important;margin-top:10px}.footer-socials a{display:inline-flex;align-items:center;gap:7px;color:#d7d2c9}.footer-socials svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}.footer-socials a:nth-child(2) svg{fill:currentColor;stroke:none}.footer-socials a:hover{color:var(--gold)}
.journal{position:relative;clear:both;overflow:visible}.journal .article-grid{align-items:start;margin-bottom:0}.journal .article-grid article{position:relative;min-width:0;height:auto}.journal:after{content:"";display:block;clear:both}.journal+*{clear:both}
.stories-section{padding-top:30px}.stories-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.story-card{overflow:hidden;border:1px solid var(--sand);background:#fff}.story-card-photos{display:grid;height:360px;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--sand)}.story-card-photos img{width:100%;height:100%;object-fit:cover}.story-card-photos-1{grid-template-columns:1fr}.story-card-photos-2{grid-template-columns:repeat(2,1fr)}.story-card-copy{padding:34px}.story-card-copy .eyebrow{margin-bottom:13px}.story-card-copy h2{margin:0 0 18px;font-family:var(--serif);font-size:36px;font-weight:400;line-height:1.08}.story-card-text{color:var(--grey)}.story-card-copy footer{display:flex;flex-direction:column;margin-top:25px;padding-top:18px;border-top:1px solid var(--sand);font-size:12px}.story-card-copy footer span{color:var(--grey)}
@media(max-width:760px){.stories-grid{grid-template-columns:1fr}.story-card-photos{height:300px}.story-card-copy{padding:27px 23px}.story-card-copy h2{font-size:31px}}
@media(min-width:1001px) and (max-width:1320px){.site-nav .nav-list{gap:18px}.site-nav{font-size:10px}.header-actions{gap:9px}.button-small{padding-left:14px;padding-right:14px}}

@media (max-width: 370px) {
	.header {
		padding-right: 10px;
		padding-left: 10px;
	}

	.header .brand-logo {
		width: 52px;
		height: 52px;
	}

	.header .language-switcher > ul {
		gap: 0;
	}

	.header .language-switcher .lang-item a {
		width: 24px;
	}

	.header .language-switcher .lang-item a::before {
		width: 18px;
		height: 12px;
		flex-basis: 18px;
	}
}