/*
 * legal.css — Premium Legal Page Styles
 * Harmonie & Tasten Pro · v4.7.0
 *
 * Scoped to .ip-* and .legal-card so nothing bleeds into other sections.
 * Gold accent: #C9A96E  |  Serif: Cormorant Garamond  |  max-width: 760px
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL CARD — reusable premium component
   Usage: <div class="legal-card"> … </div>
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-card {
	background    : #fff;
	border-radius : 3px;
	box-shadow    : 0 20px 60px -24px rgba(44, 36, 22, .16),
	                0  2px  8px -2px rgba(44, 36, 22, .06);
	max-width     : 760px;
	margin        : 0 auto 2.8rem;
	padding       : clamp(2rem, 4vw, 3.2rem) clamp(1.6rem, 4vw, 3.2rem);
	border-left   : 3px solid var(--color-gold, #C9A96E);
	position      : relative;
}

.legal-card + .legal-card {
	margin-top : 2rem;
}

.legal-card h3 {
	font-family   : var(--font-serif, 'Cormorant Garamond', Georgia, serif);
	font-size     : 1.28rem;
	font-weight   : 500;
	color         : var(--color-espresso, #2C2416);
	margin-bottom : .7rem;
	padding-bottom: .5rem;
	border-bottom : 1px solid rgba(201, 169, 110, .22);
}

.legal-card p,
.legal-card address {
	font-size   : .97rem;
	line-height : 1.78;
	color       : var(--color-muted, #7A6F5C);
	font-style  : normal;
	margin      : 0;
}

.legal-card address + address,
.legal-card p + p {
	margin-top : .7em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */

.ip-page-wrap {
	background : var(--color-ivory, #FBF7F2);
	overflow   : hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.ip-hero {
	position        : relative;
	display         : flex;
	align-items     : center;
	justify-content : center;
	text-align      : center;
	min-height      : clamp(300px, 40vw, 480px);
	padding         : clamp(100px, 14vw, 150px) 0 clamp(56px, 8vw, 90px);
	color           : var(--color-ivory, #FBF7F2);
	overflow        : hidden;
	isolation       : isolate;
}

.ip-hero__bg {
	position   : absolute;
	inset      : 0;
	z-index    : 0;
	background :
		linear-gradient(165deg, rgba(44,36,22,.92) 0%, rgba(20,16,10,.97) 100%),
		radial-gradient(ellipse at 60% 40%, #3a2f1c 0%, #1a140b 100%);
	pointer-events : none;
}

.ip-hero--has-image .ip-hero__bg {
	background-image  : linear-gradient(165deg, rgba(20,16,10,.72) 0%, rgba(10,8,5,.85) 100%), var(--ip-hero-bg, none);
	background-size   : cover;
	background-position: center top;
}

.ip-hero__bg::before {
	content    : "";
	position   : absolute;
	inset      : 0;
	background :
		radial-gradient(ellipse at 25% 60%, rgba(201,169,110,.12) 0%, transparent 55%),
		radial-gradient(ellipse at 75% 30%, rgba(201,169,110,.07) 0%, transparent 55%);
	filter     : blur(32px);
}

.ip-hero__content {
	position  : relative;
	z-index   : 2;
	max-width : 700px;
	animation : fadeUp 1s cubic-bezier(.22,.61,.36,1) both;
}

.ip-hero .eyebrow { color: var(--color-gold, #C9A96E); }

.ip-hero__title {
	font-family : var(--font-serif, 'Cormorant Garamond', Georgia, serif);
	font-size   : clamp(2.4rem, 5.5vw, 4.4rem);
	font-weight : 300;
	color       : var(--color-ivory, #FBF7F2);
	margin      : .6rem 0 0;
	line-height : 1.1;
}

.ip-hero__sub {
	font-size  : clamp(.9rem, 1.3vw, 1.04rem);
	color      : rgba(251,247,242,.72);
	margin-top : 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.ip-content-wrap {
	padding    : clamp(64px, 9vw, 120px) 28px clamp(80px, 10vw, 140px);
	max-width  : 860px;
	margin     : 0 auto;
}

/* Table of contents */
.ip-toc {
	background    : var(--color-beige, #F5EFE6);
	border-left   : 3px solid var(--color-gold, #C9A96E);
	padding       : 1.4rem 1.8rem;
	margin-bottom : clamp(48px, 7vw, 80px);
	border-radius : 2px;
}

.ip-toc__label {
	font-size     : .7rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color         : var(--color-gold, #C9A96E);
	font-weight   : 500;
	margin-bottom : .7rem;
}

.ip-toc ul {
	list-style : none;
	padding    : 0;
	margin     : 0;
	display    : flex;
	gap        : 1.6rem;
	flex-wrap  : wrap;
}

.ip-toc ul li a {
	font-size        : .9rem;
	color            : var(--color-espresso, #2C2416);
	text-decoration  : none;
	border-bottom    : 1px solid rgba(201,169,110,.35);
	padding-bottom   : 1px;
	transition       : color .25s ease, border-color .25s ease;
}

.ip-toc ul li a:hover {
	color        : var(--color-gold, #C9A96E);
	border-color : var(--color-gold, #C9A96E);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════════════ */

.ip-section {
	margin-bottom : clamp(56px, 8vw, 96px);
}

.ip-section__head {
	margin-bottom : clamp(28px, 4vw, 44px);
}

.ip-section__head h2 {
	font-family : var(--font-serif, 'Cormorant Garamond', Georgia, serif);
	font-size   : clamp(2rem, 3.5vw, 3rem);
	font-weight : 400;
	color       : var(--color-espresso, #2C2416);
	margin      : .4rem 0 0;
}

.ip-section__rule {
	width      : 56px;
	height     : 1px;
	background : var(--color-gold, #C9A96E);
	margin-top : 1.2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT BLOCKS (ip-block = a legal-card inside the section body)
   ═══════════════════════════════════════════════════════════════════════════ */

.ip-section__body .ip-block {
	background    : #fff;
	border-radius : 3px;
	box-shadow    : 0 20px 60px -24px rgba(44,36,22,.14),
	                0  2px  8px -2px rgba(44,36,22,.05);
	max-width     : 760px;
	margin-bottom : 1.6rem;
	padding       : clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.4rem, 3.5vw, 2.8rem);
	border-left   : 3px solid var(--color-gold, #C9A96E);
}

.ip-section__body .ip-block h3 {
	font-family   : var(--font-serif, 'Cormorant Garamond', Georgia, serif);
	font-size     : 1.22rem;
	font-weight   : 500;
	color         : var(--color-espresso, #2C2416);
	margin        : 0 0 .7rem;
	padding-bottom: .5rem;
	border-bottom : 1px solid rgba(201,169,110,.2);
}

.ip-section__body .ip-block p,
.ip-section__body .ip-block address {
	font-size   : .96rem;
	line-height : 1.8;
	color       : var(--color-muted, #7A6F5C);
	font-style  : normal;
	margin      : 0;
}

.ip-section__body .ip-block p + p {
	margin-top : .6em;
}

/* Intro paragraph — sits above the individual blocks */
.ip-intro {
	font-size     : 1.04rem;
	line-height   : 1.8;
	color         : var(--color-muted, #7A6F5C);
	margin-bottom : 2rem;
	max-width     : 700px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BACK CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.ip-back-cta {
	text-align  : center;
	margin-top  : clamp(48px, 7vw, 80px);
	padding-top : clamp(32px, 4vw, 48px);
	border-top  : 1px solid rgba(201,169,110,.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER COOKIE BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.footer-cookie-btn {
	display          : inline;
	background       : none;
	border           : none;
	padding          : 0;
	margin           : 0;
	font-family      : inherit;
	font-size        : inherit;
	color            : inherit;
	cursor           : pointer;
	text-decoration  : none;
	border-bottom    : 1px solid transparent;
	transition       : color .25s ease, border-color .25s ease;
	vertical-align   : baseline;
	line-height      : inherit;
}

.footer-cookie-btn:hover {
	color        : var(--color-gold, #C9A96E);
	border-color : var(--color-gold, #C9A96E);
}

.footer-cookie-btn:focus-visible {
	outline        : 2px solid var(--color-gold, #C9A96E);
	outline-offset : 3px;
	border-radius  : 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KLARO OVERRIDES — match theme palette
   ═══════════════════════════════════════════════════════════════════════════ */

.klaro .cookie-modal,
.klaro .cookie-notice {
	font-family : var(--font-sans, 'Inter', Arial, sans-serif) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cn-buttons .cm-btn.cm-btn-success {
	background : var(--color-gold, #C9A96E) !important;
	color      : var(--color-espresso, #2C2416) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cn-buttons .cm-btn.cm-btn-success:hover {
	background : var(--color-espresso, #2C2416) !important;
	color      : var(--color-ivory, #FBF7F2) !important;
}

.klaro .cookie-modal a,
.klaro .cookie-notice a {
	color : var(--color-gold, #C9A96E) !important;
}

.klaro .cookie-modal .cm-toggle-title,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2 {
	font-family : var(--font-serif, 'Cormorant Garamond', Georgia, serif) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
	.ip-toc ul { flex-direction: column; gap: .7rem; }
	.legal-card { padding: 1.4rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ip-hero__content { animation: none; }
}