/*
 * Sizing note
 *
 * Every length here is in pixels rather than rem on purpose. The site's theme
 * sets a reduced root font size, so a rem-based component renders at roughly
 * 60% of its intended size inside it. Pixels make the plugin independent of
 * whatever the theme does to the root, which is what a self-contained
 * component needs. Do not convert these back to rem.
 */

@font-face {
	font-family: "Barlow Condensed";
	src: url('fonts/barlow-condensed-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url('fonts/barlow-condensed-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url('fonts/barlow-condensed-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Scheherazade New";
	src: url('fonts/scheherazade-new-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF,
		U+200C-200F, U+2010-2011;
}

/*
 * HDF Islamic Calendar
 *
 * Visual language taken from hdfund.org/fundraisers and the amana, gaza and
 * match subdomains: a cream page, mosaics of solid colour blocks, giant
 * Barlow Condensed numerals, yellow uppercase eyebrows, fully rounded pill
 * buttons, and no shadows anywhere. Colour and type are HDF brand constants.
 *
 * Barlow Condensed and Scheherazade New ship with the plugin, self-hosted and
 * subsetted. Inter is expected from the theme.
 */

.hdf-ic {
	--blue: #2564AA;
	/* Dark bands. Deep enough to separate from the site footer. */
	--navy: #18406C;
	/* Unlit side of the moon. */
	--navy-deep: #071A2E;
	--yellow: #FED545;
	--yellow-deep: #F5C822;
	--charcoal: #1C1C1C;
	--red: #BB0305;
	/* Page grounds are white; panels and cards carry the grey. */
	--cream: #FFFFFF;
	--tint: #FFFFFF;
	--card: #F1F2F4;
	--card-2: #E7E9EC;
	--rule: #DEE1E6;
	--ink-soft: #4A4F57;

	--sans: Inter, "Helvetica Neue", Arial, sans-serif;
	--cond: "Barlow Condensed", "Inter", Arial, sans-serif;
	--arabic: 'Scheherazade New', serif;

	--r: 8px;

	/* The moon. Artwork lives in assets/moons/; these control its colour. */
	--moon-lit: #FED545;
	--moon-ring: rgba(255, 255, 255, 0.85);
	--moon-size: 76px;

	font-family: var(--sans);
	font-size: 17px;
	color: var(--charcoal);
	line-height: 1.55;
	background: var(--cream);
}

.hdf-ic *,
.hdf-ic *::before,
.hdf-ic *::after {
	box-sizing: border-box;
}

.hdf-ic__wrap {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 0;
}

.hdf-ic a {
	color: var(--blue);
}

.hdf-ic :focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------- type */

/* Eyebrow: yellow on dark, blue on light. Condensed, caps, tracked out. */
.hdf-ic__eyebrow {
	display: block;
	font-family: var(--cond);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blue);
	margin: 0 0 10px;
}

.hdf-ic__eyebrow--on-dark {
	color: var(--yellow);
}

.hdf-ic h1,
.hdf-ic h2,
.hdf-ic h3 {
	font-family: var(--sans);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: var(--charcoal);
	text-wrap: balance;
}

.hdf-ic h1 {
	margin: 0 0 28px;
}

.hdf-ic h2 {
	margin: 0 0 40px;
}

.hdf-ic h3 {
	margin: 0 0 16px;
}

/* A heading followed by its own supporting line closes up; the wrapper then
   supplies the gap before whatever comes next. */
.hdf-ic h1 + .hdf-ic__lede,
.hdf-ic h2 + p,
.hdf-ic h3 + p {
	margin-top: -16px;
}

.hdf-ic h1 {
	font-size: clamp(34px, 7.5vw, 57px);
}

.hdf-ic h2 {
	font-size: clamp(26px, 5.5vw, 40px);
}

.hdf-ic h3 {
	font-size: 18px;
	letter-spacing: -0.01em;
}

/* Marker highlight behind a key word, as on amana. */
.hdf-ic__mark {
	background: var(--yellow);
	color: var(--charcoal);
	padding: 0.04em 0.28em 0.1em;
	border-radius: 3px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.hdf-ic__lede {
	font-size: clamp(17px, 2.8vw, 21px);
	color: var(--ink-soft);
	max-width: 60ch;
	margin: 0 0 8px;
}

.hdf-ic p {
	max-width: 52ch;
}

/* --------------------------------------------------------------- structure */

.hdf-ic__section {
	padding: 80px 0 0;
}

.hdf-ic__section-head {
	max-width: 672px;
	margin-bottom: 56px;
}

/* The yellow mark's background sits below the baseline, so headings need a
   little more clearance than the raw type would suggest. */
.hdf-ic__section-head h2,
.hdf-ic__section-head h3 {
	margin-bottom: 20px;
}

.hdf-ic__section-head p:last-child {
	margin-bottom: 0;
}

.hdf-ic__crumbs {
	font-family: var(--cond);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-soft);
	padding: 28px 0 0;
}

.hdf-ic__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hdf-ic__crumbs li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--rule);
}

/* ------------------------------------------------------------ pill buttons */

/*
 * Solid pill, white caps, a thin chevron rule at the right. No filled disc.
 * The chevron is two 2px bars rotated into a > using borders on one box.
 */
.hdf-ic__btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 58px;
	padding: 14px 28px;
	background: var(--blue);
	color: #fff;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--blue);
	border-radius: 999px;
	line-height: 1.2;
}

.hdf-ic__btn::after {
	content: "";
	width: 9px;
	height: 9px;
	flex: none;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.9;
}

.hdf-ic__btn:hover,
.hdf-ic__btn:focus-visible {
	background-color: #1D5292;
	border-color: #1D5292;
	color: #fff;
}

/*
 * Buttons are usually links, and `.hdf-ic a` (0,1,1) outranks the button
 * classes (0,1,0), so it was overriding their text colour. These raise the
 * specificity to settle it.
 */
.hdf-ic a.hdf-ic__btn {
	color: #fff;
}

.hdf-ic a.hdf-ic__btn--yellow {
	color: var(--charcoal);
}

.hdf-ic a.hdf-ic__btn--ghost {
	color: #fff;
}

.hdf-ic a.hdf-ic__btn--ghost:hover,
.hdf-ic a.hdf-ic__btn--ghost:focus-visible {
	color: var(--blue);
}

.hdf-ic a.hdf-ic__btn--ghost-light {
	color: #fff;
}

.hdf-ic a.hdf-ic__btn--ghost-light:hover,
.hdf-ic a.hdf-ic__btn--ghost-light:focus-visible {
	color: var(--navy);
}

/* On a dark band, yellow carries better than blue. */
.hdf-ic__btn--yellow {
	background: var(--yellow);
	border-color: var(--yellow);
	color: var(--charcoal);
}

.hdf-ic__btn--yellow:hover,
.hdf-ic__btn--yellow:focus-visible {
	background-color: var(--yellow-deep);
	border-color: var(--yellow-deep);
	color: var(--charcoal);
}

/* Solid HDF Blue by default, inverting to white with a blue border on hover. */
.hdf-ic__btn--ghost {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.hdf-ic__btn--ghost:hover,
.hdf-ic__btn--ghost:focus-visible {
	background-color: #fff;
	border-color: var(--blue);
	color: var(--blue);
}

.hdf-ic__btn--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.hdf-ic__btn--ghost-light:hover,
.hdf-ic__btn--ghost-light:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: var(--navy);
}

.hdf-ic__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

/* --------------------------------------------------- the date mosaic hero */

.hdf-ic__mosaic {
	display: grid;
	gap: 8px;
	margin: 24px 0 0;
}

/* Primary block: the Hijri date. */
.hdf-ic__tile {
	border-radius: var(--r);
	padding: 24px 22px;
	position: relative;
	overflow: hidden;
}

.hdf-ic__tile--navy {
	background: var(--navy);
	color: #fff;
}

.hdf-ic__tile--blue {
	background: var(--blue);
	color: #fff;
}

.hdf-ic__tile--yellow {
	background: var(--yellow);
	color: var(--charcoal);
}

.hdf-ic__tile--ink {
	background: var(--charcoal);
	color: #fff;
}

.hdf-ic__tile--outline {
	background: #fff;
	color: var(--charcoal);
	border: 1px solid var(--rule);
}

.hdf-ic__tile--date {
	min-height: 260px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: 28px;
}

/* Giant numeral, the signature of the match/amana stat blocks. */
.hdf-ic__numeral {
	display: block;
	font-family: var(--cond);
	font-weight: 600;
	font-size: clamp(57px, 22vw, 102px);
	line-height: 0.82;
	letter-spacing: -0.02em;
	color: var(--yellow);
	margin: 0;
}

.hdf-ic__numeral--sm {
	font-size: clamp(37px, 13vw, 57px);
}

.hdf-ic__tile-caption {
	display: block;
	font-family: var(--cond);
	font-weight: 600;
	font-size: clamp(12px, 3.4vw, 16px);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-top: 12px;
	color: #fff;
}

.hdf-ic__tile--yellow .hdf-ic__tile-caption,
.hdf-ic__tile--outline .hdf-ic__tile-caption {
	color: var(--charcoal);
}

.hdf-ic__tile--yellow .hdf-ic__numeral {
	color: var(--charcoal);
}

/* Moon. The SVG is inlined so CSS can recolour it; classes on the shapes
   override the fills baked into the files. */
.hdf-ic__moon {
	display: inline-block;
	width: var(--moon-size);
	height: var(--moon-size);
	flex: none;
	line-height: 0;
}

.hdf-ic__moon svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hdf-ic__moon .hdf-ic__moon-lit {
	fill: var(--moon-lit);
}

.hdf-ic__moon .hdf-ic__moon-ring {
	stroke: var(--moon-ring);
}

/* The new moon shows only its outline. */
.hdf-ic__moon svg [fill="none"].hdf-ic__moon-lit {
	fill: none;
}

.hdf-ic__moon--corner {
	position: absolute;
	top: 20px;
	right: 20px;
	--moon-size: 56px;
}

/* Arabic rendition, in its own yellow block. */
.hdf-ic__tile-arabic {
	font-family: var(--arabic);
	direction: rtl;
	font-weight: 400;
	font-size: clamp(22px, 6.5vw, 31px);
	line-height: 1.5;
	margin: 0;
	color: var(--charcoal);
}

.hdf-ic__tile-greg {
	font-size: clamp(13px, 3vw, 17px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
}

.hdf-ic__tile-note {
	font-size: 12px;
	line-height: 1.45;
	margin: 10px 0 0;
	max-width: 36ch;
	color: inherit;
	opacity: 0.82;
}

.hdf-ic__tag {
	display: inline-block;
	font-family: var(--cond);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--charcoal);
	color: var(--yellow);
	padding: 4px 10px;
	border-radius: 999px;
	margin-top: 14px;
}

/* ----------------------------------------------------------- the converter */

.hdf-ic__converter {
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 14px;
	padding: 26px 24px;
	margin: 0;
}

.hdf-ic__conv-grid {
	display: grid;
	gap: 16px;
}

.hdf-ic__field label {
	display: block;
	font-family: var(--cond);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 7px;
}

.hdf-ic__field input,
.hdf-ic__field select {
	width: 100%;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 500;
	padding: 15px 16px;
	border: 1px solid #B9B6AC;
	border-radius: 6px;
	background: #fff;
	color: var(--charcoal);
	min-height: 48px;
}

.hdf-ic__field input:focus,
.hdf-ic__field select:focus {
	border-color: var(--blue);
}

/* Both date rows use the same day / month-name / year shape. Sized for the
   larger type so a four-digit year does not clip. */
.hdf-ic__hijri-inputs,
.hdf-ic__greg-inputs {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) 112px;
	gap: 8px;
}

.hdf-ic__conv-out {
	display: block;
	margin-top: 20px;
	padding: 18px 20px;
	background: #fff;
	border-radius: 9px;
	border-left: 4px solid var(--blue);
	font-size: 16px;
	min-height: 56px;
}

.hdf-ic__conv-out strong {
	display: block;
	font-size: 18px;
	color: var(--navy);
}

.hdf-ic__conv-out--error {
	background: #FDEDED;
	border-left-color: var(--red);
	color: var(--red);
	font-size: 12px;
}

.hdf-ic__conv-range {
	font-family: var(--cond);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 14px 0 0;
}

/* ------------------------------------------------------- upcoming as tiles */

.hdf-ic__upcoming {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.hdf-ic__up-item a,
.hdf-ic__up-inner {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 0 20px;
	align-items: center;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 14px;
	padding: 18px 22px;
	text-decoration: none;
	color: inherit;
}

.hdf-ic__up-item a:hover,
.hdf-ic__up-item a:focus-visible {
	border-color: var(--blue);
	background: var(--card-2);
}

.hdf-ic__up-count {
	font-family: var(--cond);
	font-weight: 600;
	font-size: 34px;
	line-height: 0.9;
	color: var(--blue);
	text-align: center;
}

.hdf-ic__up-count small {
	display: block;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-top: 3px;
}

.hdf-ic__up-count--now {
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--yellow);
	color: var(--charcoal);
	border-radius: 999px;
	padding: 6px 4px;
}

.hdf-ic__up-name {
	display: block;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.01em;
	color: var(--navy);
}

.hdf-ic__up-when {
	display: block;
	font-size: 15px;
	color: var(--ink-soft);
	margin-top: 2px;
}

.hdf-ic__up-hijri {
	color: var(--ink-soft);
}

/* countdown chip, for the shortcode */

.hdf-ic-chip {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--sans);
	background: var(--navy);
	color: #fff;
	border-radius: 999px;
	padding: 8px 20px 8px 12px;
	text-decoration: none;
}

.hdf-ic-chip__n {
	font-family: var(--cond);
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
	color: var(--yellow);
}

.hdf-ic-chip small {
	opacity: 0.8;
}

/* -------------------------------------------------------- months as tiles */

.hdf-ic__months {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.hdf-ic__month-cell {
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 12px;
	padding: 14px 15px 16px;
	min-height: 142px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.hdf-ic__month-cell--current {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.hdf-ic__month-cell--current a,
.hdf-ic__month-cell--current .hdf-ic__month-name {
	color: #fff;
}

.hdf-ic__month-n {
	font-family: var(--cond);
	font-weight: 600;
	font-size: 26px;
	line-height: 1;
	color: var(--rule);
	letter-spacing: -0.01em;
}

.hdf-ic__month-cell--current .hdf-ic__month-n {
	color: var(--yellow);
}

.hdf-ic__month-name {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-top: auto;
	color: var(--navy);
}

.hdf-ic__month-name a {
	text-decoration: none;
}

.hdf-ic__month-ar {
	font-family: var(--arabic);
	direction: rtl;
	width: fit-content;
	font-size: 20px;
	color: var(--ink-soft);
	margin-top: 3px;
}

.hdf-ic__month-cell--current .hdf-ic__month-ar {
	color: rgba(255, 255, 255, 0.8);
}

/* Sacred months carry a yellow corner flag, not a floating dot. */
.hdf-ic__month-cell--sacred::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 26px solid var(--yellow);
	border-left: 26px solid transparent;
	border-top-right-radius: var(--r);
}

/* ---------------------------------------------------------- year selector */

/* The margin is in the shorthand on purpose: a separate margin-top here was
   silently overridden by a later `margin: 0` in this same block. */
.hdf-ic__years {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
}

.hdf-ic__years a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 88px;
	font-family: var(--cond);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.05em;
	padding: 3px 22px;
	border: 2px solid var(--blue);
	border-radius: 999px;
	color: var(--blue);
	text-decoration: none;
}

.hdf-ic__years a[aria-current="page"] {
	background: var(--blue);
	color: #fff;
}

/* On a dark band the blue outline disappears, so switch to white. */
.hdf-ic__years--on-dark a {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.hdf-ic__years--on-dark a[aria-current="page"] {
	background: var(--yellow);
	border-color: var(--yellow);
	color: var(--charcoal);
}

.hdf-ic__hero-grid--single {
	grid-template-columns: minmax(0, 1fr) !important;
}

/* ----------------------------------------------------------- calendar grid */

.hdf-ic__monthnav {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 0 0 12px;
	margin: 0 0 16px;
	-webkit-overflow-scrolling: touch;
}

.hdf-ic__monthnav button {
	flex: none;
	font-family: var(--cond);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 20px;
	min-height: 46px;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 999px;
	color: var(--charcoal);
	cursor: pointer;
}

.hdf-ic__monthnav button[aria-selected="true"] {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.hdf-ic__cal {
	display: grid;
	gap: 12px;
}

.hdf-ic__cal-month {
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 14px;
	overflow: hidden;
}

.hdf-ic__cal-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 16px 18px;
	background: transparent;
	color: var(--charcoal);
	border-bottom: 1px solid var(--rule);
}

.hdf-ic__cal-title {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--charcoal);
}

.hdf-ic__cal-hijri {
	font-family: var(--cond);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blue);
}

/*
 * Separated borders turn each day into its own rounded tile, the structure
 * from the reference calendar UI, while keeping a real table underneath for
 * semantics and crawlability.
 */
.hdf-ic__cal-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 5px;
	table-layout: fixed;
	padding: 5px 5px 9px;
}

.hdf-ic__cal-table th {
	font-family: var(--cond);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft);
	padding: 4px 0 8px;
	text-align: left;
	padding-left: 8px;
}

.hdf-ic__cal-table td {
	padding: 0;
	vertical-align: top;
	height: 64px;
	background: #fff;
	border-radius: 9px;
}

.hdf-ic__cal-table td:empty {
	background: transparent;
}

.hdf-ic__day {
	display: block;
	padding: 7px 6px;
	height: 100%;
	position: relative;
	border-radius: 9px;
}

.hdf-ic__day-g {
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	display: block;
	color: var(--charcoal);
}

.hdf-ic__day-h {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-soft);
	line-height: 1.15;
	display: block;
	margin-top: 3px;
	white-space: nowrap;
	letter-spacing: -0.01em;
}

/* First day of a Hijri month: tinted tile with a blue marker bar. */
.hdf-ic__cal-table td.is-hijri-start {
	background: #E4EDF7;
	box-shadow: inset 3px 0 0 var(--blue);
}

.hdf-ic__cal-table td.is-hijri-start .hdf-ic__day-h {
	color: var(--blue);
	font-weight: 700;
}

/* Today: filled tile with a ring, as the selected day in the reference. */
.hdf-ic__cal-table td.is-today {
	background: var(--blue);
	box-shadow: 0 0 0 2px var(--yellow);
}

.hdf-ic__cal-table td.is-today .hdf-ic__day-g {
	color: #fff;
}

/* White rather than yellow: at 13px this is normal-size text, so it needs
   4.5:1 and yellow on blue only reaches 4.26:1. */
.hdf-ic__cal-table td.is-today .hdf-ic__day-h {
	color: #fff;
	font-weight: 700;
}

/* An Islamic date gets a yellow marker bar, matching the event bars. */
.hdf-ic__cal-table td.has-event {
	box-shadow: inset 3px 0 0 var(--yellow);
}

.hdf-ic__cal-table td.has-event.is-hijri-start {
	box-shadow: inset 3px 0 0 var(--blue), inset 0 -3px 0 var(--yellow);
}

.hdf-ic__cal-table td.is-today.has-event {
	box-shadow: 0 0 0 2px var(--yellow);
}

/* Fridays carry no fill: a grey tile read as a disabled day. */

.hdf-ic__cal-events {
	list-style: none;
	margin: 0;
	padding: 14px 18px 18px;
	border-top: 1px solid var(--rule);
	background: transparent;
	display: grid;
	gap: 8px;
	font-size: 14px;
}

.hdf-ic__cal-events li {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 10px;
	align-items: baseline;
	background: #fff;
	border-radius: 7px;
	border-left: 3px solid var(--yellow);
	padding: 7px 10px;
}

.hdf-ic__cal-events b {
	font-family: var(--cond);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.hdf-ic__cal-events a {
	font-weight: 600;
	text-decoration: none;
}

.hdf-ic__cal-events--start {
	border-left-color: var(--blue);
}

.hdf-ic__cal-events--start span {
	color: var(--blue);
	font-weight: 600;
}

/* ------------------------------------------------------------------ tables */

.hdf-ic__table-wrap {
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 14px;
}

.hdf-ic__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.hdf-ic__table th,
.hdf-ic__table td {
	text-align: left;
	padding: 13px 16px;
	border-bottom: 1px solid #EDEBE4;
	white-space: nowrap;
}

.hdf-ic__table thead th {
	font-family: var(--cond);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	background: var(--card-2);
	border-bottom: 0;
}

/* Corners follow the wrapper's radius rather than floating inside it. */
.hdf-ic__table thead th:first-child {
	border-radius: 13px 0 0 0;
}

.hdf-ic__table thead th:last-child {
	border-radius: 0 13px 0 0;
}

/* Row headers are content, not column labels. No background of their own:
   an earlier `transparent` here let the wrapper's grey show through only in
   the first column, which read as a broken table. */
/* Arabic cells need more size than the Latin columns beside them. */
.hdf-ic__table td[lang="ar"] {
	font-size: 21px;
	line-height: 1.6;
}

.hdf-ic__table tbody th {
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--navy);
	white-space: normal;
}

.hdf-ic__table tbody tr:nth-child(even) th,
.hdf-ic__table tbody tr:nth-child(even) td {
	background: #FAFAFB;
}

.hdf-ic__table tbody tr:last-child td,
.hdf-ic__table tbody tr:last-child th {
	border-bottom: 0;
}

.hdf-ic__table tr.is-next th,
.hdf-ic__table tr.is-next td {
	background: #FFF8DE;
}

.hdf-ic__table tr.is-next th:first-child {
	box-shadow: inset 3px 0 0 var(--yellow);
}

.hdf-ic__table tr.is-past th,
.hdf-ic__table tr.is-past td {
	color: #8B9099;
}

/* Status pill, as in the reference transactions table. */
.hdf-ic__pill {
	display: inline-block;
	font-family: var(--cond);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 1px 10px 2px;
	border-radius: 999px;
	white-space: nowrap;
	vertical-align: 0.05em;
}

.hdf-ic__pill--expected {
	background: #FFF1C2;
	color: #7A5A00;
}

.hdf-ic__pill--confirmed {
	background: #DCEEDF;
	color: #1F6330;
}

.hdf-ic__pill--past {
	background: var(--card-2);
	color: var(--ink-soft);
}

.hdf-ic__num {
	font-family: var(--cond);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- callouts */

.hdf-ic__note {
	background: var(--yellow);
	color: var(--charcoal);
	padding: 22px 24px;
	border-radius: var(--r);
	font-size: 16px;
	margin: 24px 0 0;
}

/*
 * Two classes so this outranks `.hdf-ic p { max-width: 52ch }`, which has
 * the same specificity and would otherwise re-cap the measure. The note is a
 * full-width callout, so the text runs the width of the panel.
 */
.hdf-ic .hdf-ic__note p {
	margin: 0;
	max-width: none;
}

.hdf-ic__note strong {
	font-weight: 700;
}

/* CTA band, one per page. */
/* A content wrapper only. The surrounding band supplies the background and
   the padding, so repeating them here nested one section inside another. */
.hdf-ic__cta {
	color: inherit;
	padding: 0;
	margin: 0;
}

.hdf-ic__cta h2 {
	color: #fff;
	max-width: 30ch;
}

.hdf-ic__cta p {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 17px;
	max-width: 54ch;
}

/* ------------------------------------------------------------------- faq */

.hdf-ic__faq {
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 14px;
	overflow: hidden;
}

.hdf-ic__faq details + details {
	border-top: 1px solid var(--rule);
}

.hdf-ic__faq summary {
	cursor: pointer;
	padding: 17px 48px 17px 20px;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: var(--navy);
	position: relative;
	list-style: none;
	min-height: 56px;
	display: flex;
	align-items: center;
}

.hdf-ic__faq summary::-webkit-details-marker {
	display: none;
}

.hdf-ic__faq summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--yellow);
	background-image: linear-gradient(to right, var(--charcoal) 0 100%), linear-gradient(to right, var(--charcoal) 0 100%);
	background-size: 11px 2px, 2px 11px;
	background-position: center, center;
	background-repeat: no-repeat;
}

.hdf-ic__faq details[open] summary::after {
	background-size: 11px 2px, 0 0;
}

.hdf-ic__faq-a {
	padding: 0 28px 28px;
	font-size: 16px;
	color: var(--ink-soft);
}

.hdf-ic__faq-a p {
	margin: 0;
}

/* -------------------------------------------------------- related links */

.hdf-ic__related {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.hdf-ic__related a {
	display: block;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 12px;
	padding: 16px 20px;
	text-decoration: none;
	color: var(--navy);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.01em;
	min-height: 68px;
}

.hdf-ic__related a:hover,
.hdf-ic__related a:focus-visible {
	border-color: var(--blue);
	background: var(--card-2);
}

.hdf-ic__related span {
	display: block;
	font-family: var(--cond);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-top: 3px;
}

/* ------------------------------------------------------------- utilities */

.hdf-ic__source {
	font-size: 15px;
	color: var(--ink-soft);
	margin: 52px 0 0;
	padding: 28px 0 64px;
	border-top: 1px solid var(--rule);
	max-width: 74ch;
}

.hdf-ic__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hdf-ic__foot-nav {
	padding-top: 64px;
}

/* Separates stacked blocks inside one band, replacing inline margin hacks. */
.hdf-ic__stack {
	margin-top: 72px;
}

/* ---------------------------------------------------------------- 560px+ */

@media (min-width: 560px) {
	.hdf-ic__months {
		grid-template-columns: repeat(3, 1fr);
	}

	.hdf-ic__conv-grid {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	.hdf-ic__tile {
		padding: 28px 26px;
	}

	.hdf-ic__upcoming {
		grid-template-columns: repeat(2, 1fr);
	}

	.hdf-ic__related {
		grid-template-columns: repeat(2, 1fr);
	}

	.hdf-ic__cal-table td {
		height: 68px;
	}

}

/* ---------------------------------------------------------------- 900px+ */

@media (min-width: 900px) {
	/* The mosaic: tall date block beside a stacked pair, as on match. */
	.hdf-ic__mosaic {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		grid-template-rows: auto auto;
	}

	.hdf-ic__tile--date {
		grid-row: 1 / span 2;
		min-height: 340px;
	}

	.hdf-ic__tile {
		padding: 32px 30px;
	}

	.hdf-ic__moon--corner {
		--moon-size: 84px;
		top: 28px;
		right: 28px;
	}

	.hdf-ic__months {
		grid-template-columns: repeat(4, 1fr);
	}

	.hdf-ic__upcoming {
		grid-template-columns: repeat(3, 1fr);
	}

	.hdf-ic__up-item a,
	.hdf-ic__up-inner {
		grid-template-columns: 1fr;
		gap: 12px;
		align-items: start;
		padding: 20px;
		min-height: 200px;
		align-content: space-between;
	}

	.hdf-ic__up-count {
		text-align: left;
		font-size: 40px;
	}

	.hdf-ic__up-count--now {
		font-size: 16px;
		width: fit-content;
		padding: 6px 14px;
	}

	.hdf-ic__cal {
		grid-template-columns: repeat(2, 1fr);
	}

	.hdf-ic__monthnav {
		display: none;
	}

	.hdf-ic__cal-month {
		display: block !important;
	}

	.hdf-ic__related {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------------------------------------------- 1180px+ */

@media (min-width: 1180px) {
	.hdf-ic__cal-table td {
		height: 72px;
	}
}

/* Three across only once a card can hold a legible day cell. */
@media (min-width: 1320px) {
	.hdf-ic__cal {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	.hdf-ic * {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------------------------------------------------------------- print */

@media print {
	.hdf-ic {
		background: #fff;
	}

	.hdf-ic__monthnav,
	.hdf-ic__converter,
	.hdf-ic__cta,
	.hdf-ic__foot-nav {
		display: none;
	}

	.hdf-ic__tile--navy,
	.hdf-ic__tile--ink {
		background: #fff !important;
		color: #000 !important;
		border: 1px solid #000;
	}

	.hdf-ic__numeral {
		color: #000 !important;
	}

	.hdf-ic__cal-head {
		background: #fff !important;
		color: #000 !important;
		border-bottom: 1px solid #000;
	}

	.hdf-ic__cal-title,
	.hdf-ic__cal-hijri {
		color: #000 !important;
	}

	.hdf-ic__cal {
		grid-template-columns: repeat(3, 1fr);
	}

	.hdf-ic__cal-month {
		display: block !important;
		break-inside: avoid;
	}
}

/* =================================================================
 * Full-bleed bands
 *
 * The reference pages alternate edge-to-edge colour bands rather than
 * floating cards on a single background. Each band holds one .hdf-ic__wrap.
 * ================================================================= */

.hdf-ic__band {
	padding: 80px 8%;
	background: var(--cream);
}

/*
 * A light band directly after another light band shares its background, so
 * two full paddings just read as a large empty gap. The following one gets a
 * minimal top instead.
 */
.hdf-ic__band:not(.hdf-ic__band--navy):not(.hdf-ic__band--charcoal)
	+ .hdf-ic__band:not(.hdf-ic__band--navy):not(.hdf-ic__band--charcoal) {
	padding-top: 10px;
}

.hdf-ic__band--ice {
	background: var(--cream);
}

.hdf-ic__band--navy {
	background: var(--navy);
	color: #fff;
}

.hdf-ic__band--charcoal {
	background: var(--charcoal);
	color: #fff;
}

.hdf-ic__band--tight {
	padding: 48px 8%;
}

.hdf-ic__band--navy h2,
.hdf-ic__band--charcoal h2,
.hdf-ic__band--navy h3,
.hdf-ic__band--charcoal h3 {
	color: #fff;
}

.hdf-ic__band--navy p,
.hdf-ic__band--charcoal p {
	color: rgba(255, 255, 255, 0.86);
}

.hdf-ic__band--navy .hdf-ic__eyebrow,
.hdf-ic__band--charcoal .hdf-ic__eyebrow {
	color: var(--yellow);
}

/*
 * Scoped to prose directly in the band. Without the :not() guards this
 * leaked yellow link colour onto white cards and tables sitting inside a
 * dark band, which measured about 1.6:1 against white.
 */
.hdf-ic__band--navy p > a:not(.hdf-ic__btn),
.hdf-ic__band--charcoal p > a:not(.hdf-ic__btn) {
	color: var(--yellow);
}

.hdf-ic__band--navy .hdf-ic__table a,
.hdf-ic__band--charcoal .hdf-ic__table a,
.hdf-ic__band--navy .hdf-ic__cal-month a,
.hdf-ic__band--charcoal .hdf-ic__cal-month a {
	color: var(--blue);
}

/* Sections inside a band should not re-add the standalone top padding. */
.hdf-ic__band .hdf-ic__section {
	padding-top: 0;
}

/* --------------------------------------------------------------- the hero */

/* Banners use HDF Blue. The CTA band keeps --navy so it stays clear of the
   site footer, which was the original reason for the deeper tone. */
.hdf-ic__hero {
	background: var(--blue);
	color: #fff;
	padding: 0 8% 80px;
}

.hdf-ic__hero .hdf-ic__crumbs,
.hdf-ic__hero .hdf-ic__crumbs a {
	color: rgba(255, 255, 255, 0.72);
}

.hdf-ic__hero .hdf-ic__crumbs li + li::before {
	color: rgba(255, 255, 255, 0.4);
}

.hdf-ic__hero .hdf-ic__eyebrow {
	color: var(--yellow);
}

/*
 * Now the banner is HDF Blue, `.hdf-ic a` would paint links the same blue as
 * the background. Two classes here so this outranks it.
 */
.hdf-ic .hdf-ic__hero p a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hdf-ic .hdf-ic__hero p a:hover,
.hdf-ic .hdf-ic__hero p a:focus-visible {
	color: var(--yellow);
}

.hdf-ic__hero-grid {
	display: grid;
	gap: 36px;
	padding-top: 44px;
}

/* The date itself: giant condensed numeral, month set beneath it. */
.hdf-ic__date {
	margin: 0 0 20px;
	color: #fff;
}

.hdf-ic__date-day {
	display: block;
	font-family: var(--cond);
	font-weight: 600;
	font-size: clamp(57px, 20vw, 108px);
	line-height: 0.8;
	letter-spacing: -0.02em;
	color: var(--yellow);
}

.hdf-ic__date-month {
	display: block;
	font-family: var(--sans);
	font-weight: 700;
	font-size: clamp(18px, 5vw, 28px);
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin-top: 14px;
	color: #fff;
}

.hdf-ic__greg {
	font-size: clamp(16px, 2.8vw, 19px);
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
	max-width: 46ch;
}

.hdf-ic__greg strong {
	font-weight: 700;
	color: #fff;
}

.hdf-ic__hero-note {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	margin: 12px 0 0;
	max-width: 48ch;
}

/* -------------------------------------------------------------- stat rows */

.hdf-ic__stats {
	list-style: none;
	margin: 48px 0 0;
	padding: 36px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 20px;
}

.hdf-ic__stat-n {
	display: block;
	font-family: var(--cond);
	font-weight: 600;
	font-size: clamp(23px, 5vw, 31px);
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: #fff;
}

/* Secondary part of a stat, picked out in yellow as on amana. */
.hdf-ic__stat-n em {
	font-style: normal;
	color: var(--yellow);
}

/* 19px at 700 counts as WCAG large text, so yellow on the blue banner
   clears the 3:1 threshold rather than failing the 4.5:1 one. */
.hdf-ic__stat-l {
	display: block;
	font-family: var(--cond);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--yellow);
	margin-top: 6px;
}

/* ---------------------------------------------------------------- legend */

.hdf-ic__legend {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	font-size: 12px;
	color: var(--ink-soft);
}

.hdf-ic__legend li {
	display: flex;
	align-items: center;
	gap: 7px;
}

.hdf-ic__legend i {
	width: 15px;
	height: 15px;
	flex: none;
	border-radius: 3px;
	display: inline-block;
}

.hdf-ic__legend .k-today {
	background: var(--navy);
	box-shadow: inset 0 0 0 2px var(--yellow);
}

.hdf-ic__legend .k-start {
	background: var(--tint);
	box-shadow: inset 3px 0 0 var(--blue);
}

.hdf-ic__legend .k-event {
	background: var(--yellow);
	border: 1px solid rgba(0, 0, 0, 0.22);
	border-radius: 50%;
	width: 11px;
	height: 11px;
}

/* ------------------------------------------------------- small note types */

.hdf-ic__conv-note,
.hdf-ic__table-note {
	font-family: var(--cond);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 14px 0 0;
}

.hdf-ic__band--navy .hdf-ic__conv-note,
.hdf-ic__band--navy .hdf-ic__table-note,
.hdf-ic__band--charcoal .hdf-ic__conv-note,
.hdf-ic__band--charcoal .hdf-ic__table-note {
	color: rgba(255, 255, 255, 0.7);
}

/* Admin-only simulated-date notice. */
.hdf-ic__preview {
	background: var(--yellow);
	color: var(--charcoal);
	border-radius: 999px;
	padding: 11px 18px;
	margin: 16px 0 0;
	font-size: 12px;
	font-weight: 600;
	max-width: none;
}

.hdf-ic__preview a {
	color: var(--charcoal);
}

/* ------------------------------------------------------- band responsive */

@media (min-width: 560px) {
	.hdf-ic__stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 900px) {
	.hdf-ic__hero {
		padding-bottom: 80px;
	}

	.hdf-ic__hero-grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 56px;
		align-items: center;
		padding-top: 56px;
	}

	.hdf-ic__date {
		margin-bottom: 0;
	}
}

@media print {
	.hdf-ic__band--navy,
	.hdf-ic__band--charcoal,
	.hdf-ic__hero {
		background: #fff !important;
		color: #000 !important;
	}

	.hdf-ic__date-day,
	.hdf-ic__stat-l,
	.hdf-ic__stat-n em {
		color: #000 !important;
	}

	.hdf-ic__date-month,
	.hdf-ic__greg,
	.hdf-ic__greg strong,
	.hdf-ic__stat-n,
	.hdf-ic__band--navy h2,
	.hdf-ic__band--charcoal h2 {
		color: #000 !important;
	}
}

/* ------------------------------------------------- hero aside (hub only) */

.hdf-ic__hero-aside {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.hdf-ic__hero-arabic {
	font-family: var(--arabic);
	direction: rtl;
	/* Arabic ascenders and descenders need more room than Latin. */
	line-height: 1.7;
	font-weight: 400;
	font-size: clamp(27px, 6.5vw, 40px);
	line-height: 1.6;
	color: #fff;
	margin: 0;
	width: fit-content;
}

/* The moon reads the Hijri day as a lunar phase, with the phase named. */
.hdf-ic__hero-moon {
	display: flex;
	align-items: center;
	gap: 14px;
}

.hdf-ic__hero-moon {
	--moon-size: 76px;
}

.hdf-ic__hero-phase {
	font-family: var(--cond);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yellow);
}

@media (min-width: 900px) {
	.hdf-ic__hero-aside {
		align-items: flex-end;
		text-align: right;
	}

	.hdf-ic__hero-moon {
		--moon-size: 92px;
	}
}

/* =================================================================
 * Motion
 *
 * Rules: transform and opacity only, so nothing triggers layout and
 * Cumulative Layout Shift stays at zero. Reveal states are applied by
 * JavaScript adding .hdf-ic--anim to the root, so with JS off or with
 * reduced motion requested every element renders in its final state.
 * ================================================================= */

.hdf-ic {
	--dur: 180ms;
	--dur-slow: 520ms;
	--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ------------------------------------------------------ interactive states */

.hdf-ic__btn {
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.hdf-ic__btn:hover {
	transform: translateY(-2px);
}

.hdf-ic__btn:active {
	transform: translateY(0);
}

.hdf-ic__btn::after {
	transition: transform var(--dur) var(--ease);
}

.hdf-ic__btn:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}

.hdf-ic__years a,
.hdf-ic__monthnav button {
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

/* Cards lift very slightly rather than growing, so neighbours never move. */
.hdf-ic__up-item a,
.hdf-ic__related a {
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.hdf-ic__up-item a:hover,
.hdf-ic__related a:hover {
	transform: translateY(-3px);
}

.hdf-ic a:not([class*="hdf-ic__btn"]) {
	transition: color var(--dur) var(--ease);
}

.hdf-ic__field input,
.hdf-ic__field select {
	transition:
		border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.hdf-ic__field input:focus,
.hdf-ic__field select:focus {
	box-shadow: 0 0 0 3px rgba(37, 100, 170, 0.18);
}

/* Day tiles: a quiet hover so the grid feels live without jumping. */
.hdf-ic__cal-table td {
	transition: background-color var(--dur) var(--ease);
}

.hdf-ic__cal-table td:not(:empty):not(.is-today):hover {
	background: var(--card-2);
}

.hdf-ic__month-cell {
	transition: transform var(--dur) var(--ease);
}

/* ------------------------------------------------------------------- FAQ */

.hdf-ic__faq summary {
	transition: color var(--dur) var(--ease);
}

.hdf-ic__faq summary::after {
	transition:
		transform var(--dur) var(--ease),
		background-size var(--dur) var(--ease);
}

.hdf-ic__faq details[open] summary::after {
	transform: translateY(-50%) rotate(180deg);
}

/* The answer fades and rises as it appears. Height is not animated, so
   there is no reflow thrash on open. */
.hdf-ic--anim .hdf-ic__faq details[open] .hdf-ic__faq-a {
	animation: hdf-ic-fade-up 260ms var(--ease) both;
}

/* --------------------------------------------------------- scroll reveal */

@keyframes hdf-ic-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hdf-ic--anim .hdf-ic-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--dur-slow) var(--ease),
		transform var(--dur-slow) var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.hdf-ic--anim .hdf-ic-reveal.is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* ------------------------------------------------------------ hero entrance */

.hdf-ic--anim .hdf-ic__hero .hdf-ic__eyebrow,
.hdf-ic--anim .hdf-ic__hero .hdf-ic__date,
.hdf-ic--anim .hdf-ic__hero .hdf-ic__greg,
.hdf-ic--anim .hdf-ic__hero .hdf-ic__hero-note,
.hdf-ic--anim .hdf-ic__hero .hdf-ic__stats,
.hdf-ic--anim .hdf-ic__hero .hdf-ic__years,
.hdf-ic--anim .hdf-ic__hero-aside {
	animation: hdf-ic-fade-up var(--dur-slow) var(--ease) both;
}

.hdf-ic--anim .hdf-ic__hero .hdf-ic__eyebrow  { animation-delay: 40ms; }
.hdf-ic--anim .hdf-ic__hero .hdf-ic__date     { animation-delay: 110ms; }
.hdf-ic--anim .hdf-ic__hero .hdf-ic__greg     { animation-delay: 180ms; }
.hdf-ic--anim .hdf-ic__hero .hdf-ic__hero-note{ animation-delay: 230ms; }
.hdf-ic--anim .hdf-ic__hero .hdf-ic__years    { animation-delay: 280ms; }
.hdf-ic--anim .hdf-ic__hero .hdf-ic__stats    { animation-delay: 320ms; }
.hdf-ic--anim .hdf-ic__hero-aside             { animation-delay: 260ms; }

/* The yellow marker wipes in behind the highlighted words. */
@keyframes hdf-ic-mark-in {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

.hdf-ic--anim .hdf-ic__hero .hdf-ic__mark {
	animation: hdf-ic-mark-in 420ms var(--ease) 260ms both;
}

.hdf-ic--anim .hdf-ic-reveal.is-revealed .hdf-ic__mark {
	animation: hdf-ic-mark-in 420ms var(--ease) 160ms both;
}

/* The moon settles in, then breathes very slightly. */
@keyframes hdf-ic-moon-in {
	from {
		opacity: 0;
		transform: scale(0.8) rotate(-12deg);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hdf-ic-moon-float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}

.hdf-ic--anim .hdf-ic__moon {
	animation:
		hdf-ic-moon-in 620ms var(--ease) 300ms both,
		hdf-ic-moon-float 6s ease-in-out 1s infinite;
}

/* --------------------------------------------------------------- counters */

/* Reserve the final width so counting up cannot reflow the line. */
.hdf-ic__up-count[data-counting],
.hdf-ic__date-day[data-counting],
.hdf-ic__numeral[data-counting] {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.hdf-ic *,
	.hdf-ic *::before,
	.hdf-ic *::after {
		animation: none !important;
		transition: none !important;
	}

	/* Reveal targets must not be left invisible. */
	.hdf-ic .hdf-ic-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.hdf-ic__btn:hover,
	.hdf-ic__up-item a:hover,
	.hdf-ic__related a:hover {
		transform: none;
	}
}