/* Thursday Faith: the weather page's look (solid cards, clear figures, soft 3D objects), with the tint following the
   hour of prayer. */
@property --ttf-h1 { syntax: '<color>'; inherits: true; initial-value: #fdf1da; }
@property --ttf-h2 { syntax: '<color>'; inherits: true; initial-value: #dce9fa; }
@property --ttf-hink { syntax: '<color>'; inherits: true; initial-value: #0b1220; }
@font-face { font-family: "TT Inter"; src: url(/wp-content/themes/thursday-times/assets/fonts/Inter-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

.ttf {
	--ttf-ease: cubic-bezier(0.22, 0.8, 0.2, 1);
	--ttf-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
	--ttf-ink: #0b1220;
	--ttf-dim: #5d6779;
	--ttf-faint: #8c95a6;
	--ttf-card: #ffffff;
	--ttf-line: rgba(11, 18, 32, 0.07);
	--ttf-well: rgba(11, 18, 32, 0.05);
	--ttf-hot: #ff4200;
	--ttf-lift: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -14px rgba(15, 23, 42, 0.16);
	--ttf-ui: "TT Inter", Inter, system-ui, -apple-system, sans-serif;
	color: var(--ttf-ink);
	background: linear-gradient(180deg, #f4f6fa, #e9eff7);
	font-family: var(--ttf-ui);
	-webkit-font-smoothing: antialiased;
	transition: --ttf-h1 1.1s var(--ttf-ease), --ttf-h2 1.1s var(--ttf-ease), --ttf-hink 1.1s var(--ttf-ease);
	overflow: clip;
}
.ttf[dir="rtl"] { font-family: var(--font-urdu), var(--ttf-ui); }
.ttf a { color: inherit; }
.ttf button { font: inherit; color: inherit; }
.ttf i, .ttf-search i { font-style: normal; }
.ttf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ttf-wrap { max-width: 1180px; margin: 0 auto; padding: 16px 16px 56px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }

.ttf-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 16px; background: var(--ttf-well); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ttf-tabs a { padding: 9px 14px; border-radius: 12px; font-size: 14px; font-weight: 650; text-decoration: none; color: var(--ttf-dim); white-space: nowrap; }
.ttf-tabs a.on { background: var(--ttf-card); color: var(--ttf-ink); box-shadow: var(--ttf-lift); }

.ttf-bar { display: flex; gap: 8px; }
.ttf-find, .ttf-near { display: flex; align-items: center; gap: 10px; height: 52px; border: 0; border-radius: 16px; background: var(--ttf-card); box-shadow: var(--ttf-lift); cursor: pointer; transition: transform 0.25s var(--ttf-ease); }
.ttf-find { flex: 1; min-width: 0; padding: 0 16px; text-align: start; }
.ttf-find__name { font-weight: 750; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttf-find__hint { margin-inline-start: auto; font-size: 13px; color: var(--ttf-dim); white-space: nowrap; }
.ttf-near { width: 52px; justify-content: center; flex: none; }
.ttf-find:active, .ttf-near:active { transform: scale(0.97); }
.ttf-find svg, .ttf-near svg, .ttf-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.ttf-near.busy svg { animation: ttf-spin 1.2s linear infinite; }
@keyframes ttf-spin { to { transform: rotate(360deg); } }

.ttf-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; padding: 22px 22px 26px; min-height: 300px; color: var(--ttf-hink); background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--ttf-h1) 70%, #fff 30%), transparent 60%), linear-gradient(150deg, var(--ttf-h1), var(--ttf-h2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 24px 50px -30px color-mix(in srgb, var(--ttf-h2) 80%, #000 20%); }
.ttf-hero--find { min-height: 220px; }
.ttf-hero--find[data-f="c"] { --ttf-h1: #e6eeff; --ttf-h2: #c3d5ff; }
.ttf-hero--find[data-f="s"] { --ttf-h1: #fff3d4; --ttf-h2: #ffd98c; }
.ttf-hero--find[data-f="h"] { --ttf-h1: #ffe8d6; --ttf-h2: #ffc29c; }
.ttf-hero--find[data-f="z"] { --ttf-h1: #ffe6da; --ttf-h2: #ffb79e; }
.ttf-hero--find[data-f="j"] { --ttf-h1: #ffe4ec; --ttf-h2: #ffbccf; }
.ttf-hero--find[data-f="b"] { --ttf-h1: #fff2dc; --ttf-h2: #f2d39f; }
.ttf-hero--find[data-f="a"] { --ttf-h1: #def7f0; --ttf-h2: #a8e5d6; }
.ttf-hero--find[data-f="k"] { --ttf-h1: #f4e8db; --ttf-h2: #dcbd9e; }
.ttf-lede { margin: 2px 18px 6px; font-size: 15px; line-height: 1.55; color: var(--ttf-ink); }
.ttf[dir="rtl"] .ttf-lede { line-height: 2; }
.ttf-hero__art { position: absolute; top: 12px; inset-inline-end: 4px; width: min(40vw, 190px); aspect-ratio: 1; pointer-events: none; animation: ttf-float 6s ease-in-out infinite; }
.ttf-hero__art svg { width: 100%; height: 100%; overflow: visible; transition: opacity 0.5s var(--ttf-ease), transform 0.8s var(--ttf-spring); }
.ttf-hero__art svg.pre { opacity: 0; transform: scale(0.86) translateY(-6%); transition: none; }
@keyframes ttf-float { 50% { transform: translateY(-4%); } }
.ttf-kick { margin: 2px 0 14px; }
.ttf-kick .tt-label path, .ttf-kick .tt-label svg > path:first-child { fill: var(--ttf-hink) !important; }
.ttf-kick .tt-label { color: var(--ttf-hink) !important; }
.ttf-place { margin: 0; max-width: 62%; font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 6.4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.ttf[dir="rtl"] .ttf-place { font-family: var(--font-urdu); font-weight: 700; letter-spacing: 0; line-height: 1.45; }
.ttf-date { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: 64%; font-size: 14px; font-weight: 600; opacity: 0.75; }
#ttf-hijri:not(:empty)::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 8px; vertical-align: middle; border-radius: 2px; background: var(--ttf-hot); }
.ttf-next { margin-top: 30px; display: flex; flex-direction: column; }
.ttf-next__k { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; opacity: 0.75; }
.ttf-next__in { margin-top: 4px; font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 15vw, 110px); line-height: 0.92; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.ttf[dir="rtl"] .ttf-next__in { text-align: end; }
.ttf-next__at { margin-top: 8px; font-size: 16px; font-weight: 600; opacity: 0.8; }

.ttf-card { background: var(--ttf-card); border-radius: 26px; box-shadow: var(--ttf-lift); padding: 18px 0 16px; }
.ttf-card__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px 12px; flex-wrap: wrap; }
.ttf-card__h h2 { margin: 0; font-family: var(--ttf-ui); font-weight: 650; font-size: 13px; letter-spacing: 0.02em; color: var(--ttf-dim); }
.ttf[dir="rtl"] .ttf-card__h h2 { font-family: var(--font-urdu); font-size: 15px; font-weight: 700; }
.ttf-card__note { font-size: 13px; color: var(--ttf-dim); }
.ttf-note { margin: 12px 18px 0; font-size: 13.5px; line-height: 1.5; color: var(--ttf-dim); }
.ttf[dir="rtl"] .ttf-note { line-height: 1.9; }

.ttf-seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--ttf-well); }
.ttf-seg button { border: 0; background: none; padding: 6px 10px; border-radius: 9px; font-size: 13px; font-weight: 650; color: var(--ttf-dim); cursor: pointer; }
.ttf-seg button[aria-checked="true"] { background: var(--ttf-card); color: var(--ttf-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }

.ttf-times { list-style: none; margin: 0; padding: 0 8px; }
.ttf-times li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 16px; transition: background 0.3s; }
.ttf-times li + li { margin-top: 2px; }
.ttf-times__i { width: 38px; height: 38px; }
.ttf-times__n { font-weight: 650; font-size: 16px; }
.ttf-times__t { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ttf[dir="rtl"] .ttf-times__t { font-family: var(--font-urdu); font-weight: 700; letter-spacing: 0; }
.ttf-times li[data-k="sunrise"] { opacity: 0.6; }
.ttf-times li.is-next { background: var(--ttf-ink); color: var(--ttf-card); opacity: 1; }
.ttf-times li.is-past:not(.is-next) .ttf-times__t, .ttf-times li.is-past:not(.is-next) .ttf-times__n { color: var(--ttf-faint); }

.ttf-pair { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.ttf-compass { width: min(70vw, 260px); aspect-ratio: 1; margin: 6px auto 0; position: relative; }
.ttf-compass svg { width: 100%; height: 100%; overflow: visible; }
.ttf-compass .rose { transition: transform 0.6s var(--ttf-ease); transform-origin: 100px 100px; }
.ttf-compass .needle { transition: transform 1.2s var(--ttf-spring); transform-origin: 100px 100px; }
.ttf-compass text { font-family: var(--ttf-ui); font-weight: 750; font-size: 11px; fill: var(--ttf-faint); text-anchor: middle; }
.ttf-compass text.n { fill: var(--ttf-hot); }
.ttf .ttf-btn { display: inline-flex; margin: 12px 18px 0; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--ttf-ink); color: var(--ttf-card); font-size: 14px; font-weight: 650; cursor: pointer; }
.ttf .ttf-btn--ghost { margin: 0; padding: 7px 12px; background: var(--ttf-well); color: var(--ttf-ink); font-size: 13px; }
.ttf-big { margin: 4px 18px 0; font-family: var(--font-display); font-weight: 900; font-size: 40px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ttf[dir="rtl"] .ttf-big { font-family: var(--font-urdu); font-weight: 700; letter-spacing: 0; }
.ttf-big small { display: block; font-family: var(--ttf-ui); font-size: 13px; font-weight: 650; letter-spacing: 0; color: var(--ttf-dim); margin-top: 4px; }

.ttf-month__scroll { overflow-x: auto; padding: 0 10px; }
.ttf-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.ttf-table th { padding: 8px 8px; font-size: 12px; font-weight: 700; color: var(--ttf-dim); text-align: start; white-space: nowrap; }
.ttf-table td { padding: 9px 8px; border-top: 1px solid var(--ttf-line); white-space: nowrap; }
.ttf-table td:first-child { font-weight: 650; }
.ttf-table tr.is-today td { background: color-mix(in srgb, var(--ttf-hot) 9%, transparent); font-weight: 750; }
.ttf-table tr.is-fri td:first-child { color: var(--ttf-hot); }

/* Places of worship. */
.ttf-faiths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ttf-faiths button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 0; border-radius: 22px; background: var(--ttf-card); box-shadow: var(--ttf-lift); cursor: pointer; font-weight: 700; font-size: 15px; text-align: start; transition: transform 0.3s var(--ttf-ease); }
.ttf-faiths button b { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; }
.ttf .ttf-faiths button[aria-pressed="true"] { background: var(--ttf-ink); color: var(--ttf-card); }
.ttf-faiths button:active { transform: scale(0.98); }
.ttf-faiths__i { width: 46px; height: 46px; }
.ttf-places { list-style: none; margin: 0; padding: 0 8px; }
.ttf-pl { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px 10px; }
.ttf-pl + .ttf-pl { border-top: 1px solid var(--ttf-line); }
.ttf-pl__i { width: 50px; height: 50px; }
.ttf-pl__n { font-weight: 700; font-size: 16px; line-height: 1.3; }
.ttf-pl__d { font-size: 13px; color: var(--ttf-dim); margin-top: 2px; line-height: 1.4; }
.ttf-pl__k { font-family: var(--font-display); font-weight: 800; font-size: 17px; white-space: nowrap; text-align: end; }
.ttf-pl__k a { display: inline-block; margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: var(--ttf-well); font-family: var(--ttf-ui); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.ttf-empty { padding: 18px; color: var(--ttf-dim); font-size: 15px; line-height: 1.5; }

.ttf-credit { margin: 4px 4px 0; font-size: 12.5px; line-height: 1.6; color: var(--ttf-faint); }
.ttf-credit a { text-decoration: underline; text-underline-offset: 3px; }

/* Verified times. */
.ttf-svc { list-style: none; margin: 10px 0 0; padding: 0 18px; }
.ttf-svc li { padding: 10px 0; border-top: 1px solid var(--ttf-line); }
.ttf-svc__n { font-weight: 700; font-size: 15px; }
.ttf-svc__t, .ttf-pl__t { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ttf-svc__t span, .ttf-pl__t span { padding: 4px 8px; border-radius: 9px; background: var(--ttf-well); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ttf-svc__t span b, .ttf-pl__t span b { font-family: var(--font-display); font-weight: 800; }
.ttf-svc__s, .ttf-pl__s { margin-top: 6px; font-size: 12px; color: var(--ttf-faint); }
.ttf-svc__s a, .ttf-pl__s a { text-decoration: underline; text-underline-offset: 2px; }
.ttf-pl__v { display: inline-block; margin-inline-start: 6px; padding: 1px 6px; border-radius: 6px; background: #e6f6ec; color: #11743a; font-size: 11px; font-weight: 800; vertical-align: middle; }
.ttf-note a { color: var(--ttf-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* The public form. */
.ttf-f { display: grid; gap: 14px; padding: 6px 18px 4px; }
.ttf-f label { display: grid; gap: 6px; font-size: 14px; font-weight: 650; }
.ttf-f input, .ttf-f select, .ttf-f textarea { font: inherit; font-size: 16px; font-weight: 500; padding: 11px 12px; border: 1.5px solid var(--ttf-line); border-radius: 12px; background: #f7f9fc; color: var(--ttf-ink); }
.ttf-f input:focus, .ttf-f select:focus, .ttf-f textarea:focus { outline: none; border-color: var(--ttf-ink); background: #fff; }
.ttf-f .ttf-btn { margin: 4px 0 0; justify-self: start; padding: 12px 18px; }
.ttf-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ttf-ok { margin: 6px 18px 0; padding: 14px 16px; border-radius: 14px; background: #e6f6ec; color: #11743a; font-weight: 650; line-height: 1.5; }
.ttf-err { margin: 6px 18px 0; padding: 12px 14px; border-radius: 12px; background: #fdecea; color: #b3261e; font-weight: 650; }

/* Search panel. */
.ttf-search { --ttf-ink: #0b1220; --ttf-dim: #5d6779; --ttf-hot: #ff4200; font-family: "TT Inter", Inter, system-ui, sans-serif; position: fixed; inset: 0; z-index: 2147483000; display: flex; justify-content: center; align-items: flex-start; padding: 12px; box-sizing: border-box; background: rgba(11, 18, 32, 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.3s; color: var(--ttf-ink); }
.ttf-search[dir="rtl"] { font-family: var(--font-urdu), sans-serif; }
.ttf-search.on { opacity: 1; }
.ttf-search[hidden] { display: none; }
.ttf-search button { font: inherit; color: inherit; }
.ttf-search__box { width: 100%; max-width: 620px; margin-top: 5vh; background: #fff; border-radius: 26px; box-shadow: 0 30px 80px -30px rgba(11, 18, 32, 0.45); padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; max-height: 86vh; transform: translateY(14px); transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.2, 1); }
.ttf-search.on .ttf-search__box { transform: none; }
.ttf-search__field { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 54px; border-radius: 18px; background: #f2f4f8; }
.ttf-search__field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ttf-ink); font: inherit; font-size: 17px; outline: none; }
.ttf-search__field input::-webkit-search-cancel-button { display: none; }
.ttf-search__x { border: 0; background: none; font-size: 14px; color: var(--ttf-dim); cursor: pointer; padding: 8px 0 8px 8px; }
.ttf-results { list-style: none; margin: 6px 0 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.ttf-res { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; cursor: pointer; }
.ttf-res[aria-selected="true"], .ttf-res:hover { background: #f2f4f8; }
.ttf-res__n { font-weight: 650; font-size: 16px; }
.ttf-res__d { font-size: 13px; color: var(--ttf-dim); }
.ttf-res__none { padding: 14px; color: var(--ttf-dim); }

.ttf-toast { font-family: "TT Inter", Inter, system-ui, sans-serif; position: fixed; left: 50%; bottom: 24px; z-index: 2147483001; transform: translate(-50%, 20px); padding: 12px 16px; border-radius: 14px; background: #0b1220; color: #fff; font-size: 14px; opacity: 0; transition: opacity 0.3s, transform 0.4s; pointer-events: none; max-width: calc(100vw - 32px); }
.ttf-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 720px) {
	.ttf-wrap { padding: 22px 28px 72px; gap: 16px; }
	.ttf-hero { padding: 34px 40px 36px; border-radius: 36px; min-height: 340px; }
	.ttf-hero__art { top: 50%; transform: translateY(-50%); inset-inline-end: 5%; width: min(34%, 300px); animation: none; }
	.ttf-pair { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
	.ttf-bar { max-width: 560px; }
}
@media print {
	.ttf-tabs, .ttf-bar, .ttf-hero, .ttf-today, .ttf-pair, .ttf-credit, .ttf-btn, #ttf-print, .tt-site-header, .tt-site-footer, footer, header { display: none !important; }
	.ttf, .ttf-card { background: #fff !important; box-shadow: none !important; }
	.ttf-table { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.ttf, .ttf * { transition-duration: 0.01s !important; }
	.ttf-hero__art { animation: none !important; }
}