/* ==========================================================================
   Samui Explorer – Legal pages (Privacy policy, Terms & booking conditions)
   Paste the whole block at the end of your general stylesheet.
   Uses the brand tokens from :root, with fallbacks if one is missing.

   Impreza classes ("Extra class" on the element):
   - Section 1, text element ........ se-legal-intro
   - Section 2, left text element .... se-legal-nav   (column 1/4, sticky)
   - Section 2, right text element ... se-legal       (column 3/4)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Anchor offset: raise it if your sticky header covers a heading
   after clicking a link in the "On this page" list.
   -------------------------------------------------------------------------- */
:root {
	--se-legal-anchor-offset: 7rem;
	--se-legal-measure: 46rem;
	--se-legal-radius: 1rem;
}

/* --------------------------------------------------------------------------
   2. Section 1 – page intro (H1, intro, last updated)
   -------------------------------------------------------------------------- */
.se-legal-intro h1 {
	margin-bottom: 0.75rem;
}

.se-legal-intro p {
	max-width: 44rem;
	margin-bottom: 0;
	color: var(--color-text-light, #5f6770);
	font-size: 1.125rem;
}

.se-legal-intro p + p {
	margin-top: 0.75rem;
}

.se-legal-intro p.se-legal-intro__meta {
	margin-top: 1.25rem;
	color: var(--color-primary, #17324d);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   3. Section 2 – "On this page" navigation (left column)
   -------------------------------------------------------------------------- */
.se-legal-nav .se-legal-nav__title {
	margin: 0 0 0.75rem;
	color: var(--color-text-light, #5f6770);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.se-legal-nav ol {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--color-border, #dde2e6);
}

.se-legal-nav ol li {
	margin: 0;
	padding: 0;
}

.se-legal-nav ol li::before {
	content: none;
}

.se-legal-nav a {
	display: block;
	margin-left: -2px;
	padding: 0.375rem 0 0.375rem 1rem;
	border-left: 2px solid transparent;
	color: var(--color-primary, #17324d);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.se-legal-nav a:hover {
	border-left-color: var(--color-accent, #f05a28);
	color: var(--color-accent, #f05a28);
}

.se-legal-nav a:focus-visible {
	outline: 3px solid var(--color-info, #3c6d97);
	outline-offset: 2px;
}

@media (max-width: 899px) {
	/* Columns stack: the list becomes a box above the text */
	.se-legal-nav {
		margin-bottom: 1rem;
		padding: 1.25rem 1.5rem;
		background-color: var(--color-mist, #edf3f6);
		border-radius: var(--se-legal-radius);
	}

	.se-legal-nav ol {
		border-left-color: rgba(23, 50, 77, 0.15);
	}
}

/* --------------------------------------------------------------------------
   4. Section 2 – legal text (right column)
   -------------------------------------------------------------------------- */
.se-legal {
	max-width: var(--se-legal-measure);
}

.se-legal > :first-child {
	margin-top: 0;
}

.se-legal [id] {
	scroll-margin-top: var(--se-legal-anchor-offset);
}

.se-legal .se-legal__lead {
	color: var(--color-text, #2b3137);
	font-size: 1.0625rem;
}

/* Each H2 starts a new part, with a hairline above it */
.se-legal h2 {
	margin: 3rem 0 1rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--color-border, #dde2e6);
}

.se-legal > h2:first-child {
	padding-top: 0;
	border-top: 0;
}

.se-legal h3 {
	margin: 1.75rem 0 0.5rem;
}

.se-legal p {
	margin-bottom: 1rem;
}

.se-legal ul {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
}

.se-legal li {
	margin-bottom: 0.625rem;
	padding-left: 0.25rem;
}

.se-legal li::marker {
	color: var(--color-accent, #f05a28);
}

.se-legal li strong,
.se-legal dt {
	color: var(--color-primary, #17324d);
}

/* Definitions (Privacy policy) */
.se-legal dl {
	margin: 0 0 1.25rem;
}

.se-legal dt {
	font-weight: 700;
}

.se-legal dd {
	margin: 0.125rem 0 1rem;
}

/* Links */
.se-legal a {
	color: var(--color-primary, #17324d);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--color-accent, #f05a28);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
	overflow-wrap: anywhere;
}

.se-legal a:hover {
	color: var(--color-accent, #f05a28);
}

.se-legal a:focus-visible {
	outline: 3px solid var(--color-info, #3c6d97);
	outline-offset: 3px;
}

/* Contact details list – no bullets */
.se-legal ul.se-legal__contact {
	padding-left: 0;
	list-style: none;
}

.se-legal ul.se-legal__contact li {
	padding-left: 0;
}

/* --------------------------------------------------------------------------
   5. Highlight box – the cancellation policy on the Terms page
   -------------------------------------------------------------------------- */
.se-legal .se-legal__box {
	margin: 3rem 0;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background-color: var(--color-mist, #edf3f6);
	border-left: 4px solid var(--color-accent, #f05a28);
	border-radius: var(--se-legal-radius);
}

.se-legal .se-legal__box h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.se-legal .se-legal__box h3:first-of-type {
	margin-top: 1.25rem;
}

.se-legal .se-legal__box > :last-child {
	margin-bottom: 0;
}

/* The box already separates, so the next H2 needs no hairline */
.se-legal .se-legal__box + h2 {
	padding-top: 0;
	border-top: 0;
}

/* --------------------------------------------------------------------------
   6. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.se-legal-nav a {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Bottom footer – legal links with dotted underline
   -------------------------------------------------------------------------- */
.bottom-footer .wpb_text_column a {
	color: inherit;
	text-decoration: underline dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: color 0.2s ease;
}

.bottom-footer .wpb_text_column a:hover {
	color: var(--color-accent, #f05a28);
	text-decoration-style: solid;
}

.bottom-footer .wpb_text_column a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}