/* Faz: the journal's own look over Health Sciences.
   Black type on white as on the poster; the puzzle colours appear only as a thin strip
   above the header; İMÜ teal marks focus and hover, darkened for text so it keeps a
   contrast ratio above 4.5:1 on white. */

:root {
	--faz-ink: #111111;
	--faz-muted: #5b5b5b;
	--faz-rule: #e4e4e4;
	--faz-teal: #1dcdca;        /* İMÜ Dilbilimi mark */
	--faz-teal-text: #0b6e6c;   /* the same hue, dark enough for text */
	--faz-pink: #f3a8b7;
	--faz-yellow: #f2c641;
	--faz-green: #3ea84a;
	--faz-red: #ef4a2e;
	--faz-violet: #7b7488;
	--faz-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
}

body {
	background: #ffffff;
	color: var(--faz-ink);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.page-title, .article-details-title {
	font-family: var(--faz-display);
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--faz-ink);
}

a {
	color: var(--faz-teal-text);
}

a:hover,
a:focus {
	color: var(--faz-ink);
}

/* colour strip */
.faz-strip {
	display: flex;
	height: 5px;
}

.faz-strip span { flex: 1 1 0; }
.faz-strip span:nth-child(1) { background: var(--faz-pink); }
.faz-strip span:nth-child(2) { background: var(--faz-yellow); }
.faz-strip span:nth-child(3) { background: var(--faz-green); }
.faz-strip span:nth-child(4) { background: var(--faz-red); }
.faz-strip span:nth-child(5) { background: var(--faz-violet); }

/* header */
.main-header {
	background: #ffffff;
	border-bottom: 1px solid var(--faz-rule);
}

.faz-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	color: var(--faz-ink);
	text-decoration: none;
}

.faz-wordmark {
	display: block;
	height: 58px;
	width: auto;
	color: var(--faz-ink);
}

.faz-motto {
	font-family: var(--faz-display);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--faz-ink);
	text-align: center;
	white-space: normal;
}

.navbar-logo a:hover,
.navbar-logo a:focus,
.navbar-brand:hover,
.navbar-brand:focus {
	text-decoration: none;
}

.navbar-brand .faz-wordmark { height: 34px; }
.navbar-brand .faz-motto { display: none; }

#primaryNav .nav-link {
	font-family: var(--faz-display);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--faz-ink);
}

#primaryNav .nav-link:hover,
#primaryNav .nav-link:focus {
	border-color: transparent;
	box-shadow: inset 0 -2px 0 var(--faz-teal);
}

/* dropdowns: white panels with a black rule instead of the parent's coloured panel */
#primaryNav .dropdown-menu,
#primaryNav .dropdown-menu.show {
	background: #ffffff;
	border: 1px solid var(--faz-ink);
	border-radius: 0;
}

#primaryNav .dropdown-menu .dropdown-item {
	color: var(--faz-ink);
	font-family: var(--faz-display);
	font-weight: 400;
	border-left: 3px solid transparent;
}

#primaryNav .dropdown-menu .dropdown-item:hover,
#primaryNav .dropdown-menu .dropdown-item:focus {
	color: var(--faz-ink);
	background: #f4f4f4;
	border-left-color: var(--faz-teal);
}

.hs-search .hs-search-button {
	border-color: var(--faz-ink);
	color: var(--faz-ink);
}

/* home page, after the poster */
.faz-hero {
	padding: 3rem 0 2.5rem;
	text-align: center;
	border-bottom: 1px solid var(--faz-rule);
}

.faz-hero-headline {
	font-family: var(--faz-display);
	font-weight: 600;
	font-size: clamp(1.75rem, 4.2vw, 2.9rem);
	line-height: 1.15;
	max-width: 20ch;
	margin: 0 auto 1.6rem;
	color: var(--faz-ink);
}

.faz-hero-principle {
	list-style: none;
	margin: 0 auto 2rem;
	padding: 0;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--faz-ink);
}

.faz-hero-image {
	max-width: 532px;
	margin: 0 auto 2rem;
}

.faz-hero-image img {
	display: block;
	width: 100%;
	height: auto;
}

.faz-hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
}

.faz-hero-actions .btn {
	font-family: var(--faz-display);
	font-weight: 500;
	letter-spacing: 0.04em;
	border-radius: 0;
	padding: 0.7rem 1.4rem;
}

.faz-btn-primary {
	background: var(--faz-ink);
	border: 1px solid var(--faz-ink);
	color: #ffffff;
}

.faz-btn-primary:hover,
.faz-btn-primary:focus {
	background: #ffffff;
	color: var(--faz-ink);
	box-shadow: inset 0 -3px 0 var(--faz-teal);
}

.faz-btn-secondary {
	background: #ffffff;
	border: 1px solid var(--faz-ink);
	color: var(--faz-ink);
}

.faz-btn-secondary:hover,
.faz-btn-secondary:focus {
	background: #f4f4f4;
	color: var(--faz-ink);
}

/* footer */
.site-footer {
	background: #ffffff;
	border-top: 1px solid var(--faz-rule);
	color: var(--faz-muted);
}

.faz-footer {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--faz-rule);
	margin-bottom: 1rem;
}

.faz-footer-imu {
	display: block;
	height: 46px;
	width: auto;
}

.faz-footer-text {
	font-size: 0.95rem;
	line-height: 1.5;
}

@media (max-width: 991.98px) {
	.faz-hero { padding: 2rem 0 1.75rem; }
	.faz-footer-imu { margin-bottom: 0.75rem; }
}

/* the parent theme colours footer links for a dark footer; the Faz footer is white */
.site-footer a,
.site-footer a:visited {
	color: var(--faz-teal-text);
	text-decoration: underline;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--faz-ink);
}

/* One puzzle colour per article (id mod 5): a band above the article page and a tile
   beside the title in tables of contents and lists. */
.faz-tone-0 { --faz-tone: var(--faz-pink); }
.faz-tone-1 { --faz-tone: var(--faz-yellow); }
.faz-tone-2 { --faz-tone: var(--faz-green); }
.faz-tone-3 { --faz-tone: var(--faz-red); }
.faz-tone-4 { --faz-tone: var(--faz-violet); }

.faz-band {
	height: 10px;
	background: var(--faz-tone);
	margin-bottom: 1.5rem;
}

.article-summary[class*="faz-tone-"] {
	position: relative;
	padding-left: 1.75rem;
}
.article-summary[class*="faz-tone-"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 2px;
	background: var(--faz-tone);
}

/* Home page once articles exist: the poster shrinks to a band (headline and buttons
   beside a small puzzle) and the current issue is shown as cards. */
.faz-hero--compact { padding: 1.5rem 0; }
.faz-hero--compact .container {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "headline image" "actions image";
	align-items: center;
	gap: 0.5rem 2rem;
}
.faz-hero--compact .faz-hero-headline { grid-area: headline; margin: 0; font-size: 1.5rem; text-align: left; }
.faz-hero--compact .faz-hero-principle { display: none; }
.faz-hero--compact .faz-hero-image { grid-area: image; margin: 0; }
.faz-hero--compact .faz-hero-image img { width: 180px; height: auto; }
.faz-hero--compact .faz-hero-actions { grid-area: actions; margin: 0; justify-content: flex-start; text-align: left; }
@media (max-width: 575px) {
	.faz-hero--compact .container { grid-template-columns: 1fr; grid-template-areas: "headline" "actions"; }
	.faz-hero--compact .faz-hero-image { display: none; }
}

.faz-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
	margin: 2rem 0;
}
.faz-card {
	border: 1px solid var(--faz-rule);
	border-top: 8px solid var(--faz-tone);
	border-radius: 3px;
	padding: 1rem 1.1rem 1.1rem;
	background: #fff;
	display: flex;
	flex-direction: column;
}
.faz-card-section {
	font-family: var(--faz-display);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--faz-muted);
	margin: 0 0 0.4rem;
}
.faz-card-title {
	font-size: 1.1rem;
	line-height: 1.35;
	margin: 0 0 0.6rem;
}
.faz-card-title a { color: var(--faz-ink); text-decoration: none; }
.faz-card-title a:hover, .faz-card-title a:focus { color: var(--faz-teal-text); text-decoration: underline; }
.faz-card-authors { font-size: 0.9rem; margin: 0 0 0.4rem; }
.faz-card-doi { font-size: 0.8rem; margin: auto 0 0; }
/* the parent theme spaces paragraphs and headings of the home container generously */
.faz-cards .faz-card > p,
.faz-cards .faz-card > h3 { padding: 0; margin-top: 0; }
.faz-cards .faz-card > .faz-card-section { margin-bottom: 0.4rem; }
.faz-cards .faz-card > .faz-card-title { margin-bottom: 0.6rem; font-size: 1.05rem; }
.faz-cards .faz-card > .faz-card-doi { margin-top: auto; margin-bottom: 0; }

/* How Faz works: five steps as puzzle pieces joined in a row (a column on phones) */
.faz-flow { margin: 3rem 0 2rem; }
.faz-flow-title,
.faz-review-title { font-size: 1.5rem; margin: 0 0 1.25rem; text-align: center; }
.faz-flow-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	counter-reset: none;
}
.faz-flow-step {
	position: relative;
	padding: 1.1rem 1.25rem 1.2rem 1.4rem;
	background: var(--faz-tone);
	color: var(--faz-ink);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
/* dark text passes 4.5:1 on every colour except violet, where white does */
.faz-flow-step.faz-tone-4 { color: #fff; }
/* the knob of each piece reaches into the next one */
.faz-flow-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -0.8rem;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: -0.8rem;
	border-radius: 50%;
	background: var(--faz-tone);
	z-index: 1;
}
.faz-flow-num {
	font-family: var(--faz-display);
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 1;
}
.faz-flow-name {
	font-family: var(--faz-display);
	font-weight: 600;
	font-size: 1.05rem;
}
.faz-flow-text { font-size: 0.9rem; line-height: 1.4; }
@media (max-width: 991px) {
	.faz-flow-steps { grid-template-columns: 1fr; }
	.faz-flow-step:not(:last-child)::after {
		top: auto;
		bottom: -0.8rem;
		right: auto;
		left: 2rem;
		margin-top: 0;
	}
	.faz-flow-step { padding-left: 1.5rem; }
}

.faz-review-call {
	max-width: 44rem;
	margin: 2.5rem auto 3rem;
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--faz-rule);
	border-left: 6px solid var(--faz-teal);
	text-align: center;
}
.faz-review-call p { margin: 0 0 1rem; }
.faz-review-call p:last-child { margin-bottom: 0; }