@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	--primary-color: #910911;
	--red: #910911;
	--rosewood: #67060D;
	--clay: #BD665B;
	--peach: #FED7C9;
	--black: #110A0A;
	--dark-grey: #333333;
	--grey: #B0B0B0;
	--light-grey: #F7F7F7;

	/* Vertical rhythm scale — keeps every marketing section consistent.
	   Overridden at breakpoints below so the whole site scales together. */
	--hn-section-py: 104px;   /* major content sections */
	--hn-section-py-tight: 76px;  /* "tight" variant */
	--hn-band-py: 64px;       /* slim bands (trust / press strips) */
}

@media (max-width: 768px) {
	:root {
		--hn-section-py: 72px;
		--hn-section-py-tight: 56px;
		--hn-band-py: 48px;
	}
}

@media (max-width: 576px) {
	:root {
		--hn-section-py: 60px;
		--hn-section-py-tight: 48px;
		--hn-band-py: 40px;
	}
}

::-moz-selection, ::selection {
	color: var(--red);
	background-color: var(--peach);
}

::placeholder {
	color: var(--grey) !important;
	opacity: 1;
}

::-ms-input-placeholder {
	color: var(--grey) !important;
}

.red {
	color: var(--red);
}

.rosewood {
	color: var(--rosewood);
}

.peach {
	color: var(--peach);
}

.black {
	color: var(--black);
}

.clay {
	color: var(--clay);
}

.bg-red {
	color: var(--peach);
	background-color: var(--red);
}

html {
	width: 100vw;
	overflow-x: hidden;
}

body {
	color: var(--dark-grey);
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	width: 100vw;
}

.alert {
	z-index: 1000;
	position: absolute;
    width: 100%;
}

.alert-primary {
	color: var(--red);
	background-color: var(--peach);
	border: 1px solid var(--peach);
}

.alert.red-bg {
	background-color: var(--red);
	border-radius: 0px;
	color: var(--peach);
	font-weight: 500;
}

.toast {
	background-color: var(--red);
    border: 1px solid var(--red);
}

.toast-header {
	color: var(--red);
}

.toast-body {
    color: var(--peach);
}

.toast .btn-link {
    color: var(--red);
    margin-left: 8px;
}

.green-toast .toast {
	color: var(--green);
	background-color: var(--light-green) !important;
	border: 1px solid var(--green) !important;
	font-weight: 600;
}

.green-toast .toast-body {
	color: var(--green);
	background-color: var(--light-green) !important;
}

.green-toast .toast-header {
	color: var(--green);
}

.green-toast .btn-link {
    color: var(--green);
}

/* ──────────────────────────────────────────────────────────
   Site message toasts (base.html). Clean white cards with a
   coloured accent bar + icon — no title, no timestamp.
   ────────────────────────────────────────────────────────── */
.hn-toast-stack {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 1090;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(380px, calc(100vw - 32px));
	pointer-events: none;
}

/* In-flow wrapper for form-error toasts before JS relocates them into the
   fixed stack (also the graceful fallback when JS is unavailable). */
.hn-toast-inline {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}

/* Hidden state — let the close button actually dismiss it. Higher specificity
   than .toast.hn-toast so removing .show wins over the display:flex below. */
.toast.hn-toast:not(.show) { display: none; }

/* .toast.hn-toast — the compound selector outranks the base .toast rule. */
.toast.hn-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	max-width: 100%;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 14px;
	padding: 15px 14px 15px 17px;
	box-shadow: 0 18px 45px rgba(17, 10, 10, 0.16);
	position: relative;
	overflow: hidden;
	animation: hnToastIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Left accent bar */
.hn-toast::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
}

.hn-toast-error::before   { background: var(--red); }
.hn-toast-info::before    { background: var(--clay); }
.hn-toast-success::before { background: var(--hn-success, #10B97A); }
.hn-toast-warning::before { background: var(--hn-warn, #F59E0B); }

.hn-toast-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.hn-toast-error   .hn-toast-icon { background: var(--peach); color: var(--red); }
.hn-toast-info    .hn-toast-icon { background: #f4e3da; color: var(--clay); }
.hn-toast-success .hn-toast-icon { background: var(--hn-success-soft, #E3F8EE); color: var(--hn-success, #10B97A); }
.hn-toast-warning .hn-toast-icon { background: var(--hn-warn-soft, #FFF1D9); color: var(--hn-warn, #F59E0B); }

.hn-toast-msg {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--dark-grey);
	overflow-wrap: anywhere;
}

.hn-toast-close {
	flex-shrink: 0;
	background: none;
	border: none;
	color: var(--grey);
	font-size: 14px;
	line-height: 1;
	padding: 7px;
	border-radius: 8px;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
	align-self: flex-start;
}

.hn-toast-close:hover {
	color: var(--red);
	background: var(--light-grey);
}

@keyframes hnToastIn {
	from { opacity: 0; transform: translateY(14px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 576px) {
	.hn-toast-stack { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* Spacing */

.pb-54 {
	padding-bottom: 54px;
}

.p-54 {
	padding: 54px;
}

.px-54 {
	padding-left: 54px;
	padding-right: 54px;
}

.px-108 {
	padding-left: 108px;
	padding-right: 108px;
}

.mt-24 {
	margin-top: 24px !important;
}

.mb-24 {
	margin-bottom: 24px !important;
}

.mt-18 {
	margin-top: 24px !important;
}

.my-24 {
	margin-top: 24px !important;
	margin-bottom: 24px !important;
}

.me-24 {
	margin-right: 24px;
}

.py-54 {
	padding-bottom: 54px;
	padding-top: 54px;
}

.my-54 {
	margin-bottom: 54px;
	margin-top: 54px;
}

.mb-54 {
	margin-bottom: 54px;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-54 {
	margin-top: 54px;
}

.font-sm {
	font-size: 13px;
}

.bg-peach {
	color: var(--red);
	background-color: var(--peach) !important;
}

.border-red {
	border-color: var(--red) !important;
}

/* Buttons */

.btn {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 500;
	border-radius: 3rem;
	padding: 8px 36px;
}

a {
	text-decoration: none;
	color: var(--dark-grey);
}

a:hover, .nav-link:focus, .nav-link:hover { 
	color: var(--red);
}

a, .btn:hover {
	transition: .3s all ease-out;
}

.btn-medium {
	padding: 8px 36px;
}

.btn-small {
	font-size: 12px;
	padding: 8px 18px;
}

.btn-large {
	font-size: 14px;
	padding: 20px 72px;
}

.btn-primary, .btn-red, .btn-primary-outline:hover, .btn-primary-outline:active {
	color: var(--peach);
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color) !important;
}

.btn-primary:hover, .btn-red:hover, .btn-primary-outline {
	color: var(--red);
	background: none;
	border: 1px solid var(--primary-color) !important;
}

.btn-secondary, .btn-black {
	color: var(--peach);
	background-color: var(--dark-grey);
	border: 1px solid var(--dark-grey) !important;
}

.btn-secondary:hover, .btn-black:hover, .btn-secondary-outline {
	color: var(--dark-grey);
	background: none;
	border: 1px solid var(--dark-grey) !important;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
	background-color: var(--primary-color);
}

.btn-peach-outline, .btn-peach:hover {
	color: var(--peach);
	border: 1px solid var(--peach);
	background: var(--red);
}

.btn-peach, .btn-peach-outline:hover {
	background-color: var(--peach);
	color: var(--red);
}

.btn-check:focus+.btn, .btn:focus {
    box-shadow: 0 0 0 .25rem rgb(145 9 17 / 50%);
}

.btn-check:focus+.btn-primary, .btn-primary:focus {
    background-color: var(--red);
    box-shadow: 0 0 0 .25rem var(--peach);
}

/* ============================================================
   flatpickr date picker — themed to match the platform UI
   (see date-fields.js). Compact sizing + clay-red brand accent,
   inheriting the page font so the calendar blends with the forms.
   Default flatpickr is oversized (135% month/year, 39px cells,
   ~308px wide); this tightens it into a card-like popover.
   ============================================================ */
.flatpickr-calendar {
    font-family: inherit;
    font-size: 13px;
    width: auto;
    border: 1px solid var(--light-grey);
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(17, 10, 10, 0.13);
}
.flatpickr-calendar.arrowTop::after { border-bottom-color: #fff; }
.flatpickr-calendar.arrowBottom::after { border-top-color: #fff; }

/* Header — smaller month + year, tighter height */
.flatpickr-months { padding: 7px 6px 2px; }
.flatpickr-months .flatpickr-month { height: 30px; }
.flatpickr-current-month {
    font-size: 14px;
    font-weight: 600;
    height: 30px;
    padding: 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-grey);
}
.flatpickr-current-month .flatpickr-monthDropdown-months { padding: 0 4px; }
.flatpickr-current-month .numInputWrapper { width: 5ch; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { height: 30px; padding: 6px 8px; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { width: 12px; height: 12px; }

/* Weekday row — small + muted */
.flatpickr-weekdays { height: 24px; }
span.flatpickr-weekday {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--grey);
    text-transform: none;
}

/* Day grid — compact cells, narrower overall */
.flatpickr-days { width: 252px; }
.dayContainer { width: 252px; min-width: 252px; max-width: 252px; padding: 0 5px 7px; }
span.flatpickr-day {
    max-width: 34px;
    height: 34px;
    line-height: 34px;
    margin: 1px 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dark-grey);
    border-radius: 9px;
    border: 1px solid transparent;
}
span.flatpickr-day.flatpickr-disabled,
span.flatpickr-day.prevMonthDay,
span.flatpickr-day.nextMonthDay { color: var(--grey); }

/* Brand accent */
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover { background: var(--peach); border-color: var(--peach); color: var(--rosewood); }
.flatpickr-day.today { border-color: var(--red); }
.flatpickr-day.today:hover { background: var(--peach); color: var(--rosewood); border-color: var(--peach); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.today,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    font-weight: 600;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--red); }

@media (max-width: 576px) { .flatpickr-calendar { max-width: 92vw; } }