/* ==========================================================================
 * 5 Hermoupolis Concept Sites: general styles.
 *
 * Loaded on every view (functions.php points optheme_view_stylesheet here),
 * after the theme's base style.css: fonts, tokens, the shared parts (titles,
 * buttons, arrows, sliders), header and menu, forms, footer, policy pages.
 * The homepage adds home.css, the room pages and the rooms list rooms.css
 * (functions.php, hermoupolis_page_style). Elementor widgets carry h5- classes
 * and no style settings of their own.
 *
 * Measurements come from the 1920px desktop design and scale with the
 * viewport through clamp(); the phone layout is its own block at the end.
 * ========================================================================== */

@font-face{
	font-family:"Noto Serif Display";
	src:url("../fonts/noto-serif-display.woff2") format("woff2");
	font-weight:300 500;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:"Manrope";
	src:url("../fonts/manrope.woff2") format("woff2");
	font-weight:300 600;
	font-style:normal;
	font-display:swap;
}

/* ---- tokens -------------------------------------------------------------- */

:root{
	--h5-bg:#FCF9F6;
	--h5-sand:#F4EFEA;
	--h5-stone:#F5F0ED;      /* 2 lighter than the design's #F3EEEB, for contrast */
	--h5-gold:#D1B274;
	--h5-gold-dark:#8D6D2F;  /* the same gold darkened to 4.5:1 on --h5-bg, for small text */
	--h5-brown:#5E4C37;
	--h5-ink:#322819;
	--h5-copper:#CA9E66;
	--h5-white:#ffffff;

	--h5-serif:"Noto Serif Display","Noto Serif",Georgia,"Times New Roman",serif;
	--h5-sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Greek",sans-serif;

	--h5-edge:clamp(12px,1.05vw,20px);          /* hero and gallery inset from the window */
	--h5-inset:clamp(24px,6.6vw,127px);          /* about */
	--h5-inset-wide:clamp(24px,10.9vw,210px);    /* rooms, contact, footer */
	--h5-radius:clamp(22px,2.2vw,42px);

	--h5-title:clamp(44px,4.17vw,80px);
	--h5-lead:clamp(21px,2.08vw,40px);
	--h5-body:clamp(16px,1.04vw,20px);
	--h5-arrow:clamp(44px,2.92vw,56px);

	--h5-ease:cubic-bezier(.22,.61,.36,1);

	/* the theme's own tokens, dressed */
	--op-bg:var(--h5-bg);
	--op-ink:var(--h5-ink);
	--op-muted:var(--h5-brown);
	--op-accent:var(--h5-brown);
	--op-on-accent:#ffffff;
	--op-font:var(--h5-sans);
	--op-header-bg:transparent;
	--op-header-ink:var(--h5-ink);
	--op-overlay-bg:var(--h5-bg);
	--op-overlay-ink:var(--h5-brown);
	--op-measure:1500px;
	--op-gutter:var(--h5-inset);
}

/* Elementor containers carry 10px padding and a 20px widget gap by default;
   the gap is set again on every .elementor-element by the kit's own CSS.
   Every container here is laid out below, so both start from zero. */
.elementor{
	--container-default-padding-top:0px;
	--container-default-padding-right:0px;
	--container-default-padding-bottom:0px;
	--container-default-padding-left:0px;
}
.elementor .elementor-element{
	--widgets-spacing:0px 0px;
	--widgets-spacing-row:0px;
	--widgets-spacing-column:0px;
}

/* ---- base ---------------------------------------------------------------- */

body{
	background:var(--h5-bg);
	color:var(--h5-ink);
	font-family:var(--h5-sans);
	font-size:var(--h5-body);
	line-height:1.4;
}
::selection{ background:var(--h5-gold); color:#fff; }
a{ color:inherit; }
p{ margin:0 0 1.4em; }
p:last-child{ margin-bottom:0; }

.elementor .h5-title .elementor-heading-title,
.h5-title-text{
	font-family:var(--h5-serif);
	font-weight:300;
	font-size:var(--h5-title);
	line-height:1;
	letter-spacing:-.01em;
	color:var(--h5-gold);
	margin:0;
}

.elementor .h5-lead,
.elementor .h5-lead p{
	font-size:var(--h5-lead);
	font-weight:500;
	line-height:1.2;
	color:var(--h5-brown);
	letter-spacing:-.005em;
}

.elementor .h5-body,
.elementor .h5-body p{
	font-size:var(--h5-body);
	line-height:1.4;
	color:var(--h5-ink);
}

/* Round arrow buttons: both outlined at rest, filled brown with a white arrow
   on hover. The design draws the two states side by side (the outlined one is
   the rest state, the filled one the hover; Nikolaos 2026-10-12). Hover only
   where a pointer hovers, so a tap on a phone does not leave one filled. */
.h5-arrows{
	display:flex;
	gap:clamp(10px,.85vw,16px);
}
.h5-arrow{
	width:var(--h5-arrow);
	height:var(--h5-arrow);
	border-radius:50%;
	border:1.5px solid var(--h5-brown);
	background:transparent;
	color:var(--h5-brown);
	display:grid;
	place-items:center;
	padding:0;
	transition:background-color .25s,border-color .25s,color .25s,transform .25s var(--h5-ease);
}
.h5-arrow svg{ width:28%; height:auto; display:block; }
@media (hover:hover){
	.h5-arrow:hover{ background:var(--h5-brown); border-color:var(--h5-brown); color:#fff; transform:scale(1.06); }
}
.h5-arrow:focus-visible{ outline-offset:3px; }

/* Outline pill with the long arrow: VIEW ALL ROOMS, SEND FORM. */
.h5-line-button,
.elementor .h5-btn-line .elementor-button{
	display:inline-flex;
	align-items:center;
	justify-content:space-between;
	min-width:clamp(220px,14.5vw,278px);
	gap:clamp(16px,1.2vw,22px);
	min-height:clamp(50px,3.4vw,66px);
	padding:0 clamp(26px,1.8vw,35px);
	border:1px solid var(--h5-brown);
	border-radius:999px;
	background:transparent;
	color:var(--h5-ink);
	font-family:var(--h5-sans);
	font-size:clamp(15px,1.04vw,20px);
	font-weight:400;
	line-height:1;
	text-transform:uppercase;
	text-decoration:none;
	transition:background-color .25s,color .25s;
}
.h5-line-button::after,
.elementor .h5-btn-line .elementor-button::after{
	content:"";
	width:30px;
	height:10px;
	background:currentColor;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M0 5h28.5M24.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M0 5h28.5M24.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
	transition:transform .25s var(--h5-ease);
}
.h5-line-button:hover,
.elementor .h5-btn-line .elementor-button:hover{ background:var(--h5-brown); color:#fff; }
.h5-line-button:hover::after,
.elementor .h5-btn-line .elementor-button:hover::after{ transform:translateX(4px); }
.elementor .h5-btn-line .elementor-button-content-wrapper{ display:contents; }

/* ==========================================================================
 * HEADER
 * The logo sits outside #masthead in the theme markup, so both are placed
 * over the hero absolutely. The header scrolls away with the page.
 * ========================================================================== */

.site-logo{
	position:fixed;
	z-index:1001;
	top:calc(var(--h5-edge) + clamp(14px,1.7vw,34px));
	left:clamp(36px,3.75vw,72px);
	line-height:0;
}
.site-logo img,
header#masthead .site-logo img{
	width:clamp(120px,10.9vw,210px);
	height:auto;
	max-width:none;
	max-height:none;
}
.site-logo .site-title{ margin:0; font-family:var(--h5-serif); font-size:24px; }

header#masthead{
	position:fixed;
	top:0;
	background:transparent;
	backdrop-filter:none;
	-webkit-backdrop-filter:none;
	z-index:1000;
}
.header-container{
	max-width:none;
	min-height:0;
	justify-content:flex-end;
	align-items:center;
	gap:0;
	padding:calc(var(--h5-edge) + clamp(10px,1.4vw,28px)) clamp(26px,1.7vw,32px) 0 0;
}

.h5-phone{
	width:clamp(48px,4.27vw,82px);
	height:clamp(48px,4.27vw,82px);
	border-radius:50%;
	background:var(--h5-copper);
	color:#51402D;
	display:grid;
	place-items:center;
	margin-right:clamp(10px,1.2vw,22px);
	transition:transform .25s var(--h5-ease),background-color .25s;
}
.h5-phone svg{ width:58%; height:auto; display:block; stroke-width:1.4; }
.h5-phone:hover{ transform:scale(1.05); background:#d4ad7a; }

/* Fixed header that gets out of the way. optheme's javascript.js marks <body>
   scrolled_top (within 120px of the top), scrolling_down and scrolling_up; the
   theme ships no CSS for them, this is it. Going down past the top the header
   and the logo slide up out of view, any scroll up brings them back as a
   compact cream bar. Visible is transform:none on purpose: any transform on
   #masthead would make the fixed menu overlay inside it size to the header. */
header#masthead,
.site-logo{
	transition:transform .45s var(--h5-ease),background-color .3s,box-shadow .3s,top .3s;
}
.site-logo img,
.header-icons,
.h5-book,
.h5-book a,
.h5-phone,
.header-container{
	transition:width .3s var(--h5-ease),height .3s var(--h5-ease),padding .3s var(--h5-ease),font-size .3s,border-color .3s,filter .3s;
}
body.admin-bar header#masthead{ top:32px; }
body.admin-bar .site-logo{ top:calc(32px + var(--h5-edge) + clamp(14px,1.7vw,34px)); }

body.scrolling_down:not(.scrolled_top) header#masthead{ transform:translateY(-110%); }
body.scrolling_down:not(.scrolled_top) .site-logo{ transform:translateY(calc(-100% - 60px)); }

body:not(.scrolled_top) header#masthead{
	background:var(--h5-bg);
	box-shadow:0 1px 0 rgba(94,76,55,.08),0 10px 28px rgba(40,28,14,.07);
}
body:not(.scrolled_top) .header-container{ padding-top:10px; padding-bottom:10px; }
body:not(.scrolled_top) .site-logo{ top:12px; }
body.admin-bar:not(.scrolled_top) .site-logo{ top:44px; }
body:not(.scrolled_top) .site-logo img{ width:clamp(72px,4.8vw,92px); }
body:not(.scrolled_top) .header-icons,
body:not(.scrolled_top) .h5-book{ height:clamp(52px,3.55vw,68px); border-color:#E6DDD3; }
body:not(.scrolled_top) .h5-phone{ width:clamp(44px,3vw,58px); height:clamp(44px,3vw,58px); }
body:not(.scrolled_top) .h5-book a{ font-size:clamp(15px,1.15vw,22px); padding:0 clamp(16px,1.4vw,28px); }
body:not(.scrolled_top) #menu-button{ color:var(--h5-brown); }

/* The homepage logo is white over the photograph: the black artwork inverted.
   On the cream bar and over the open menu it stays black. */
body.home.scrolled_top .site-logo img,
body.single-room.scrolled_top .site-logo img{ filter:invert(1); }
html.menu-scroll-lock body.home .site-logo img,
html.menu-scroll-lock body.single-room .site-logo img{ filter:none; }

/* The pill: the burger and BOOK NOW drawn as one white ring. The theme prints
   them as siblings, so each carries half of the ring. */
.header-icons{
	height:clamp(58px,5.3vw,102px);
	border:clamp(3px,.26vw,5px) solid #fff;
	border-right:0;
	border-radius:999px 0 0 999px;
	padding-left:clamp(14px,1.45vw,28px);
}
.h5-book{
	height:clamp(58px,5.3vw,102px);
	border:clamp(3px,.26vw,5px) solid #fff;
	border-left:0;
	border-radius:0 999px 999px 0;
	display:flex;
	align-items:center;
	padding:clamp(4px,.42vw,8px) clamp(5px,.52vw,10px) clamp(4px,.42vw,8px) clamp(8px,.83vw,16px);
}
.h5-book a{
	height:100%;
	display:flex;
	align-items:center;
	padding:0 clamp(20px,2.1vw,40px);
	border-radius:999px;
	background:var(--h5-brown);
	color:#fff;
	font-family:var(--h5-serif);
	font-weight:300;
	font-size:clamp(16px,1.67vw,32px);
	letter-spacing:.01em;
	text-transform:uppercase;
	text-decoration:none;
	white-space:nowrap;
	transition:background-color .25s;
}
.h5-book a:hover{ background:#4b3c2b; }

/* burger */
.menu-button-container{ position:relative; z-index:2; }
#menu-button{
	background:none;
	border:0;
	padding:0;
	width:clamp(30px,2.6vw,50px);
	height:clamp(30px,2.6vw,50px);
	color:#fff;
	display:grid;
	place-items:center;
}
#menu-button b{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(1px,1px,1px,1px);
	white-space:nowrap;
}
#menu-button > div{
	position:relative;
	width:100%;
	height:62%;
}
#menu-button span{
	position:absolute;
	left:0;
	width:100%;
	height:clamp(2px,.16vw,3px);
	border-radius:2px;
	background:currentColor;
	transition:transform .35s var(--h5-ease),opacity .2s,top .35s var(--h5-ease);
}
#menu-button span:nth-child(1){ top:0; }
#menu-button span:nth-child(2){ top:calc(50% - 1px); }
#menu-button span:nth-child(3){ top:calc(100% - 2px); }
#menu-button span:nth-child(n+4){ display:none; }
.menu-opened #menu-button{ color:var(--h5-brown); }
.menu-opened #menu-button span:nth-child(1){ top:calc(50% - 1px); transform:rotate(45deg); }
.menu-opened #menu-button span:nth-child(2){ opacity:0; }
.menu-opened #menu-button span:nth-child(3){ top:calc(50% - 1px); transform:rotate(-45deg); }

/* overlay menu */
#site-navigation{
	z-index:1;
	background:var(--op-overlay-bg);
	color:var(--h5-brown);
	visibility:visible;
	transition:right .55s var(--h5-ease),visibility 0s;
}
.menu-closed #site-navigation{
	visibility:hidden;
	transition:right .55s var(--h5-ease),visibility 0s linear .55s;
}
#primary-menu-list{ align-items:center; gap:clamp(6px,1vw,14px); }
#primary-menu-list a{
	font-family:var(--h5-serif);
	font-weight:300;
	font-size:clamp(40px,4.4vw,84px);
	line-height:1.1;
	color:var(--h5-gold);
	margin:0;
	transition:color .25s;
}
#primary-menu-list a:hover{ color:var(--h5-brown); }
#primary-menu-list li{
	opacity:0;
	transform:translateY(14px);
	transition:opacity .4s,transform .5s var(--h5-ease);
}
#primary-menu-list li.flipped{ opacity:1; transform:none; }
.menu-bottom-container{ margin-top:clamp(28px,3vw,56px); text-align:center; }
.menu-bottom{ font-size:clamp(16px,1.04vw,20px); color:var(--h5-brown); line-height:1.6; }
.menu-bottom a{ text-decoration:none; }
.menu-bottom a:hover{ text-decoration:underline; }

/* Pages with no photograph under the header: the white ring and the white
   burger would vanish on the cream, so they go sand and brown. */
body.h5-plain-header .header-icons,
body.h5-plain-header .h5-book{ border-color:#E6DDD3; }
body.h5-plain-header #menu-button{ color:var(--h5-brown); }

/* Sliders (site.js .h5-slider): the hero, the gallery, a room's photographs.
   The slides lie on top of each other and site.js gives each its place in
   whole widths from the one in view (--h5-pos: -1 left, 0 in view, 1 right);
   while a finger or the mouse drags, --h5-drag carries them all along. Before
   the script runs the first slide shows and the rest wait to the right.
   Vertical swipes stay the page's (touch-action), horizontal ones are ours.
   The pairs of selectors are for Elementor, which puts a 400ms transform
   transition on every widget. */
.h5-slider,
.elementor .e-con.h5-slider{
	--h5-drag:0px;
	overflow:hidden;
	touch-action:pan-y;
	touch-action:pan-y pinch-zoom;
	-webkit-user-select:none;
	user-select:none;
}
.h5-slider > .h5-slide,
.elementor .h5-slider > .h5-slide{
	position:absolute;
	inset:0;
	margin:0;
	overflow:hidden; /* the hero's slow zoom would spill the neighbours' edges into view */
	transform:translateX(calc(var(--h5-pos,0) * 100% + var(--h5-drag)));
	transition:none;
}
.h5-slider > .h5-slide ~ .h5-slide{ --h5-pos:1; }
.h5-slider.is-ready > .h5-slide,
.elementor .h5-slider.is-ready > .h5-slide{ transition:transform .9s var(--h5-ease); }
.h5-slider.is-dragging > .h5-slide,
.elementor .h5-slider.is-dragging > .h5-slide,
.h5-slider > .h5-slide.is-jump,
.elementor .h5-slider > .h5-slide.is-jump{ transition:none; }
.h5-slider img,
.h5-carousel img{ -webkit-user-drag:none; }
.elementor .h5-slide img{
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
	display:block;
}

/* A hand that grabs where the mouse can drag. */
.h5-grabbing{ -webkit-user-select:none; user-select:none; }
@media (hover:hover) and (pointer:fine){
	.h5-slider,
	.h5-carousel{ cursor:grab; }
	.h5-arrow{ cursor:pointer; }
	.h5-grabbing,
	.h5-grabbing *{ cursor:grabbing; }
}

/* Contact Form 7's own stylesheet is not loaded (functions.php); these are the
   parts of it the forms need, in the site's colours. */
.wpcf7 .screen-reader-response{
	position:absolute; overflow:hidden; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
	height:1px; width:1px; margin:-1px; padding:0; border:0; word-wrap:normal !important; word-break:normal !important;
}
.wpcf7 .hidden-fields-container{ display:none; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output{ display:none; }
.wpcf7-form-control-wrap{ position:relative; }
.wpcf7-not-valid-tip{ display:block; font-weight:400; }
.wpcf7-list-item{ display:inline-block; margin:0; }
.wpcf7-spinner{
	visibility:hidden; display:inline-block; width:22px; height:22px; padding:0; border:0;
	border-radius:100%; background:var(--h5-brown); opacity:.75;
}
form.submitting .wpcf7-spinner{ visibility:visible; }
.wpcf7-spinner::before{
	content:""; position:absolute; top:4px; left:4px; width:6px; height:6px; border-radius:100%;
	background:var(--h5-bg); transform-origin:7px 7px; animation:h5-spin 1s linear infinite;
}
@keyframes h5-spin{ to{ transform:rotate(360deg); } }
.wpcf7 [inert]{ opacity:.5; }
.wpcf7 .wpcf7-submit:disabled{ cursor:not-allowed; }
.wpcf7 input[type=url],
.wpcf7 input[type=email],
.wpcf7 input[type=tel]{ direction:ltr; }

/* forms: Contact Form 7, with its paragraph wrapping off (theme) */
.elementor .h5-form{ margin-top:clamp(20px,1.15vw,22px); }
.elementor .h5-form .wpcf7-form{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.05vw,20px); }
.elementor .h5-form .h5-field--full,
.elementor .h5-form .h5-form__submit,
.elementor .h5-form .wpcf7-response-output{ grid-column:1 / -1; }
.elementor .h5-form .wpcf7-form-control-wrap{ display:block; }
.elementor .h5-form input[type=text],
.elementor .h5-form input[type=email],
.elementor .h5-form input[type=tel],
.elementor .h5-form textarea{
	width:100%;
	height:clamp(54px,3.65vw,70px);
	padding:0 clamp(16px,1.15vw,22px);
	border:1px solid transparent;
	border-radius:clamp(10px,.73vw,14px);
	background:var(--h5-sand);
	color:var(--h5-ink);
	font:inherit;
	font-size:clamp(16px,.94vw,18px);
	cursor:text;
	transition:border-color .2s,background-color .2s;
}
.elementor .h5-form textarea{ height:clamp(150px,9.4vw,180px); padding-top:clamp(14px,1vw,20px); resize:vertical; }
.elementor .h5-form input:focus,
.elementor .h5-form textarea:focus{ border-color:var(--h5-gold); background:#fff; }
.elementor .h5-form ::placeholder{ color:#9b8f82; opacity:1; }
.elementor .h5-form .confirm-email,
.elementor .h5-form [data-name="confirm-email"],
.confirm-email{ display:none !important; }
.elementor .h5-form__submit{ position:relative; margin-top:clamp(0px,.5vw,8px); }
.elementor .h5-form .wpcf7-submit{
	display:inline-flex;
	align-items:center;
	min-height:clamp(54px,3.4vw,66px);
	min-width:clamp(220px,14.5vw,278px);
	padding:0 clamp(62px,4.3vw,82px) 0 clamp(26px,1.7vw,32px);
	text-align:left;
	border:1px solid var(--h5-brown);
	border-radius:999px;
	background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M0 5h28.5M24.5 1l4 4-4 4' fill='none' stroke='%23322819' stroke-width='1.2'/%3E%3C/svg%3E") right clamp(26px,1.7vw,32px) center/30px 10px no-repeat;
	color:var(--h5-ink);
	font:inherit;
	font-size:clamp(15px,1.04vw,20px);
	text-transform:uppercase;
	transition:background-color .25s,color .25s;
}
.elementor .h5-form .wpcf7-submit:hover{
	background-color:var(--h5-brown);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M0 5h28.5M24.5 1l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");
	color:#fff;
}
.wpcf7 .wpcf7-spinner{ position:absolute; margin:0 0 0 12px; top:50%; transform:translateY(-50%); }
.wpcf7-not-valid-tip{ font-size:14px; color:#a1442c; margin-top:6px; }
.wpcf7 form .wpcf7-response-output{
	margin:4px 0 0;
	padding:12px 16px;
	border:1px solid var(--h5-copper);
	border-radius:12px;
	font-size:15px;
	color:var(--h5-ink);
}
.wpcf7 form.sent .wpcf7-response-output{ border-color:#7d9a6b; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{ border-color:#a1442c; }

/* ==========================================================================
 * FOOTER
 * ========================================================================== */

.site-footer{ padding-bottom:clamp(24px,2.3vw,44px); }
.site-footer .footer-inner{
	max-width:none;
	padding:0 clamp(16px,2.8vw,53px) 0 var(--h5-inset-wide);
}
.site-footer .footer-columns{
	margin-right:calc(var(--h5-inset-wide) - clamp(16px,2.8vw,53px));
	border-top:1px solid var(--h5-gold);
	padding-top:clamp(26px,1.8vw,34px);
	margin-top:clamp(40px,4.3vw,82px);
}
/* Two columns: social at the left, the badges at the right end of the line.
   The design also had navigation and a newsletter; both were taken out on
   2026-10-12. */
.site-footer .footer-columns-inner{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,335px);
	align-items:start;
	gap:0 24px;
}
.site-footer .widget-title{
	margin:0 0 clamp(22px,2.2vw,42px);
	font-family:var(--h5-serif);
	font-weight:300;
	font-size:clamp(32px,2.3vw,44px);
	line-height:1;
	color:var(--h5-gold);
}
/* Each link is exactly as tall as its line: the item is a flex row, so no line
   box makes the item and the link different heights. 1.32 is the tightest line
   height that still holds Manrope's letters (its top metric is tall, and the
   descender of "g" sets the limit). */
.h5-footer-list{
	list-style:none;
	margin:0;
	padding:0;
	font-size:clamp(18px,1.35vw,26px);
	line-height:1.32;
	color:var(--h5-ink);
}
.h5-footer-list li{ display:flex; }
.h5-footer-list a{ margin:5px 0; text-decoration:none; }
.h5-footer-list a:hover{ color:var(--h5-gold); }
.site-footer .footer-col-3{ padding-top:clamp(14px,1.4vw,26px); }
.site-footer .h5-badges img{ width:min(100%,335px); max-width:none; height:auto; }

.site-footer .bottom-bar{ margin-top:clamp(48px,5.8vw,112px); }
.site-footer .bottom-bar-inner > .widget{ flex:1 1 auto; }
.site-footer .bottom-bar-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	font-size:clamp(15px,1.15vw,22px);
}
.h5-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; flex-wrap:wrap; }
.h5-bottom a{ text-decoration:none; }
.h5-bottom a:hover{ text-decoration:underline; }
.h5-bottom__policies span{ margin:0 .45em; }
.h5-bottom__right{ display:flex; gap:clamp(16px,1.5vw,29px); align-items:center; }
.h5-copyright{ color:var(--h5-gold-dark); }

/* ==========================================================================
 * POLICY PAGES (page-policy.php): privacy policy, cookie policy
 * One quiet column, 750px at most.
 * ========================================================================== */

.h5-policy{
	max-width:750px;
	margin:0 auto;
	padding:clamp(150px,13.5vw,260px) 20px clamp(64px,6vw,110px);
	box-sizing:content-box;
}
.h5-policy__header{
	padding-bottom:clamp(20px,1.6vw,30px);
	margin-bottom:clamp(28px,2.2vw,42px);
	border-bottom:1px solid var(--h5-gold);
}
.h5-policy__title{
	margin:0;
	font-family:var(--h5-serif);
	font-weight:300;
	font-size:clamp(40px,3.6vw,64px);
	line-height:1.05;
	color:var(--h5-gold);
}
.h5-policy__updated{
	margin:.8em 0 0;
	font-size:14px;
	color:#8a7d6e;
}
.h5-policy__content{
	font-size:clamp(16px,.95vw,17px);
	line-height:1.7;
	color:var(--h5-ink);
}
.h5-policy__content h2{
	margin:2.2em 0 .6em;
	font-family:var(--h5-sans);
	font-weight:600;
	font-size:clamp(18px,1.15vw,21px);
	line-height:1.3;
	color:var(--h5-brown);
}
.h5-policy__content h3{
	margin:1.6em 0 .4em;
	font-weight:600;
	font-size:clamp(16px,.95vw,17px);
	color:var(--h5-brown);
}
.h5-policy__content p{ margin:0 0 1.1em; }
.h5-policy__content ul,
.h5-policy__content ol{ margin:0 0 1.2em; padding-left:1.3em; }
.h5-policy__content li{ margin:.35em 0; padding-left:.2em; }
.h5-policy__content li::marker{ color:var(--h5-gold); }
.h5-policy__content a{ color:var(--h5-brown); text-decoration:underline; text-underline-offset:3px; }
.h5-policy__content a:hover{ color:var(--h5-gold); }

/* Cookiebot's cookie list on the Cookie Policy ([cookie_declaration]; its script
   brings plain black boxes and equal width columns that cut words on phones):
   the site's colours, columns sized by their content, and a wide table scrolls
   sideways inside its box instead of being cut. */
.h5-policy__content .CookieDeclarationType{
	margin:1.4em 0 0;
	padding:clamp(14px,1.2vw,20px) clamp(14px,1.2vw,20px) 2px;
	border:1px solid var(--h5-gold);
	border-radius:14px;
	overflow-x:auto;
}
.h5-policy__content .CookieDeclarationTypeHeader{ font-weight:600; color:var(--h5-brown); }
.h5-policy__content .CookieDeclarationTable{ table-layout:auto; min-width:480px; font-size:15px; line-height:1.5; }
.h5-policy__content .CookieDeclarationTableHeader,
.h5-policy__content .CookieDeclarationTableCell{
	padding:8px 14px 8px 0;
	border-bottom-color:#E6DDD3;
	overflow-wrap:normal;
}
.h5-policy__content .CookieDeclarationTableHeader{ font-weight:600; color:var(--h5-brown); }

/* ==========================================================================
 * NOT FOUND (404.php): the text on the left, a photograph filling the right
 * half of the window, after the hotel 404 Nikolaos picked. On phones the text
 * alone, centred.
 * ========================================================================== */

.h5-404{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	min-height:100vh;
	min-height:100svh;
}
.h5-404--text-only{ grid-template-columns:minmax(0,1fr); }
.h5-404__text{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	padding:clamp(120px,10vw,180px) clamp(24px,5vw,96px) clamp(48px,5vw,96px) var(--h5-inset);
}
.h5-404__eyebrow{
	margin:0 0 clamp(12px,1vw,18px);
	font-size:clamp(16px,1.04vw,20px);
	color:var(--h5-ink);
}
.h5-404__title{
	margin:0;
	font-family:var(--h5-serif);
	font-weight:300;
	font-size:var(--h5-title);
	line-height:1.02;
	letter-spacing:-.01em;
	color:var(--h5-gold);
}
.h5-404__lead{
	max-width:30em;
	margin:clamp(20px,1.6vw,30px) 0 clamp(28px,2.4vw,44px);
	font-size:var(--h5-body);
	line-height:1.5;
	color:var(--h5-ink);
}
.h5-404__photo{
	position:relative;
	margin:var(--h5-edge) var(--h5-edge) var(--h5-edge) 0;
	border-radius:var(--h5-radius);
	overflow:hidden;
	background:var(--h5-sand);
}
.h5-404__img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
	object-position:50% 50%; /* the door hanger sits in the middle of the photograph */
}
/* The header's ring and burger sit on the photograph here, so white as on the
   homepage; on phones there is no photograph and they stay sand and brown. */
@media (min-width:768px){
	body.error404.scrolled_top .header-icons,
	body.error404.scrolled_top .h5-book{ border-color:#fff; }
	body.error404.scrolled_top #menu-button{ color:#fff; }
}

/* ==========================================================================
 * PHONE AND TABLET
 * ========================================================================== */

@media (max-width:767px){
	:root{
		--h5-edge:0px;
		--h5-inset:20px;
		--h5-inset-wide:20px;
		--h5-radius:22px;
		--h5-title:36px;
		--h5-lead:18px;
		--h5-body:16px;
		--h5-arrow:36px;
	}

	.site-logo{ top:18px; left:18px; }
	body.admin-bar header#masthead{ top:46px; }
	body.admin-bar .site-logo{ top:64px; }
	body:not(.scrolled_top) .site-logo{ top:10px; }
	body.admin-bar:not(.scrolled_top) .site-logo{ top:56px; }
	body:not(.scrolled_top) .site-logo img,
	body:not(.scrolled_top) header#masthead .site-logo img{ width:64px; }
	body:not(.scrolled_top) .header-container{ padding-top:8px; padding-bottom:8px; }
	body:not(.scrolled_top) .header-icons,
	body:not(.scrolled_top) .h5-book{ height:48px; }
	body:not(.scrolled_top) .h5-phone{ width:40px; height:40px; }
	body:not(.scrolled_top) .h5-book a{ font-size:14px; padding:0 12px; }
	.site-logo img,
	header#masthead .site-logo img{ width:104px; }
	.header-container{ padding:18px 14px 0 0; }
	.h5-phone{ width:44px; height:44px; margin-right:8px; }
	.header-icons,
	.h5-book{ height:54px; border-width:3px; }
	.header-icons{ padding-left:12px; }
	.h5-book{ padding:4px 5px 4px 8px; }
	.h5-book a{ padding:0 14px; font-size:15px; }
	#menu-button{ width:28px; height:28px; }

	.elementor .h5-form .wpcf7-form{ grid-template-columns:1fr; }

	.site-footer .footer-inner{ padding:0 20px; }
	.site-footer .footer-columns{ margin-right:0; }
	.site-footer .footer-columns-inner{ grid-template-columns:minmax(0,1fr); row-gap:36px; }
	.site-footer .footer-col-3{ padding-top:0; }
	.h5-bottom{ flex-direction:column-reverse; align-items:flex-start; gap:14px; }

	.h5-policy{ padding-top:130px; }
	.h5-404{ grid-template-columns:minmax(0,1fr); min-height:auto; }
	.h5-404__text{ align-items:center; text-align:center; padding:150px 20px 72px; }
	.h5-404__photo{ display:none; }

	.h5-bottom__right{ flex-direction:column; align-items:flex-start; gap:6px; }
	.site-footer .bottom-bar{ margin-top:48px; }
}

/* Below 600px WordPress lets its admin bar scroll away with the page. */
@media (max-width:600px){
	body.admin-bar:not(.scrolled_top) header#masthead{ top:0; }
	body.admin-bar:not(.scrolled_top) .site-logo{ top:10px; }
}

@media (max-width:389px){
	.site-logo{ left:14px; }
	.site-logo img,
	header#masthead .site-logo img{ width:92px; }
	.header-container{ padding-right:10px; }
	.h5-phone{ width:40px; height:40px; margin-right:6px; }
	.header-icons,
	.h5-book{ height:50px; }
	.header-icons{ padding-left:10px; }
	#menu-button{ width:24px; height:24px; }
	.h5-book a{ padding:0 11px; font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
	.h5-slider.is-ready > .h5-slide,
	.elementor .h5-slider.is-ready > .h5-slide{ transition:none; }
}