/*
 * WordPress-specific rules.
 *
 * style.css is the stylesheet from the static site, kept byte-identical so a
 * fix made in one place applies to both while they run side by side. Everything
 * that exists only because this is WordPress -- block editor output, menu
 * markup, pagination, the admin bar -- lives here instead, so that file never
 * has to be edited.
 */

/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */

/* wp_nav_menu wraps its items in a ul. display:contents lets the links stay the
   flex items of .nav, so the spacing rules in style.css keep working whether
   the menu comes from Appearance > Menus or from the theme's fallback. */
.nav ul,
.nav li {
	display: contents;
}

.nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
   Block editor output
   --------------------------------------------------------------------------- */

/* Tour sections are Group blocks rendered as <section>. The stylesheet targets
   .content section, so the block's own class must not add margins on top. */
.content .wp-block-group,
.prose .wp-block-group {
	margin: 0;
}

/* Core adds its own list margins; the site's lists set their own. */
.content .wp-block-list,
.prose .wp-block-list {
	margin: 0;
}

/* A shortcode block that produced block-level markup must not sit inside a
   paragraph. shortcode_unautop() handles this for standalone shortcodes, but a
   stray wrapper would collapse the itinerary, so it is neutralised here too. */
.content p:empty,
.prose p:empty {
	display: none;
}

/* The details block carries its own class; the site styles bare <details>. */
.wp-block-details {
	margin: 0;
}

/* Wide and full alignments, which the block editor offers by default. */
.alignwide {
	max-width: min(100%, 1100px);
	margin-inline: auto;
}

.alignfull {
	max-width: none;
	margin-inline: 0;
}

.aligncenter {
	margin-inline: auto;
	text-align: center;
}

.wp-block-image img,
.wp-block-cover img {
	max-width: 100%;
	height: auto;
	border-radius: var(--r);
}

.wp-block-image figcaption,
.wp-block-embed figcaption {
	font-size: 0.85rem;
	color: var(--muted);
	margin-top: 6px;
}

.wp-block-table {
	margin: 0;
	overflow-x: auto;
}

.wp-block-quote {
	margin: 0;
	padding-left: 16px;
	border-left: 3px solid var(--line);
	color: var(--muted);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 8px 0;
}

/* The editor's colour palette, matched to the stylesheet's own variables. */
.has-navy-color { color: #0b2a44; }
.has-sea-color { color: #176e8a; }
.has-chalk-color { color: #f6f4ef; }
.has-ink-color { color: #1b1b1b; }
.has-navy-background-color { background-color: #0b2a44; }
.has-sea-background-color { background-color: #176e8a; }
.has-chalk-background-color { background-color: #f6f4ef; }
.has-ink-background-color { background-color: #1b1b1b; }

/* ---------------------------------------------------------------------------
   Page layouts
   --------------------------------------------------------------------------- */

/* A page whose content is a layout rather than prose: the booking form, which
   is two columns and must not be squeezed into the 720px reading column. */
.page-wide {
	display: grid;
	gap: 16px;
}

/* Only the text is held to a reading width. Constraining containers instead
   would also catch the Group block's inner wrapper, which is what the form
   itself lives in -- and the form is the reason this layout is wide. */
.page-wide p,
.page-wide h2,
.page-wide h3,
.page-wide > ul,
.page-wide > ol {
	max-width: 720px;
}

/* ...except inside the form, where the columns set their own widths. */
.page-wide .booking p,
.page-wide .booking h2,
.page-wide .booking h3 {
	max-width: none;
}

/* ---------------------------------------------------------------------------
   Pagination and search
   --------------------------------------------------------------------------- */

.wp-block-query-pagination,
.navigation.pagination {
	margin: 24px 0 48px;
}

.navigation.pagination .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
}

.navigation.pagination .page-numbers.current {
	background: var(--navy, #0b2a44);
	border-color: var(--navy, #0b2a44);
	color: #fff;
}

.search-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	max-width: 480px;
}

.search-form label {
	flex: 1 1 200px;
}

.search-form input[type="search"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	font: inherit;
}

/* ---------------------------------------------------------------------------
   Admin bar
   --------------------------------------------------------------------------- */

/* Logged in, WordPress fixes a 32px bar to the top of the window. The sticky
   price bar sits at the bottom, so only the header needs to know. */
body.admin-bar .bar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .bar {
		top: 46px;
	}
}

/* The skip link must clear the admin bar when it is focused. */
body.admin-bar .skip:focus {
	top: 40px;
}

/* ---------------------------------------------------------------------------
   Editor-only
   --------------------------------------------------------------------------- */

/* Inside the editor there is no page wrapper, so sections would be flush
   against each other and hard to tell apart while writing. */
.editor-styles-wrapper .wp-block-group {
	padding-block: 6px;
}