/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Dr. Sibel Koçbıyık — child theme of Hello Elementor.
Author: Utku Sakallıoğlu
Template: hello-elementor
Version: 2.1.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/*
 * Where styles live
 * - Component styles (sec, kicker, title, lead, btn, card, header, footer…) are Elementor global classes,
 *   built on the Elementor global variables of the same names, so they stay editable in the editor.
 * - This file holds what Elementor cannot express or should not own: tokens for theme-level CSS,
 *   @font-face, base element styles, focus/selection, and the few complex selectors listed below.
 * - The tokens below mirror the Elementor global variables. Elementor prints those on :root under the
 *   same names (kit file post-8.css); this file loads later, so its values win (and add font fallbacks).
 *   Change a value in both places.
 */

/* ---------- Tokens ---------- */
:root {
	--ink: #2C4237;      /* headings, primary button, links */
	--ink-2: #2F4D3F;    /* hover */
	--text: #5B5F5C;     /* body text: 5.9:1 on bg, 5.1:1 on bg-2 */
	--muted: #6D716E;    /* small labels on bg only: 4.5:1 */
	--bg: #F6F4EF;       /* page */
	--bg-2: #E6E4DD;     /* alternate band */
	--line: #DCDAD3;     /* 1px rules */
	--line-2: #CFCDC5;   /* ghost button underline */
	--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--wrap: 1100px;
	--gutter: clamp(20px, 4vw, 48px);
}

/* ---------- Fonts (self-hosted, latin + latin-ext for Turkish) ---------- */
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2-variations"), url("assets/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-serif-4-latin-ext-opsz-normal.woff2") format("woff2-variations"), url("assets/fonts/source-serif-4-latin-ext-opsz-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations"), url("assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2-variations"), url("assets/fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-sans-3-latin-wght-italic.woff2") format("woff2-variations"), url("assets/fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/source-sans-3-latin-ext-wght-italic.woff2") format("woff2-variations"), url("assets/fonts/source-sans-3-latin-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Base ---------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--serif);
	font-weight: 400;
	color: var(--ink);
	line-height: 1.15;
	text-wrap: balance;
}
p {
	text-wrap: pretty;
}
/* Hello's reset colours links pink (#c36); links here are ink with a quiet underline. */
a,
a:hover,
a:active {
	color: var(--ink);
}
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
::selection {
	background: var(--ink);
	color: #fff;
}
:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: 2px;
}
img {
	height: auto;
}

/* ---------- Sticky footer: the footer sits at the bottom of the viewport on short pages ---------- */
body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
body > * {
	flex-shrink: 0;
}
body > .elementor-location-footer {
	margin-top: auto;
}
body.admin-bar {
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
}

/* Elementor resets paragraph/heading links with `all: unset`, which also drops the focus ring. */
.elementor .e-paragraph-link-base:focus-visible,
.elementor .e-heading-link-base:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- "More" links (global class link-more): a small arrow after the text ----------
 * Drawn as a mask so it takes the link colour; inline-block keeps it out of the paragraph's underline.
 * Links that open a new tab (the map) get a diagonal arrow.
 */
.elementor .link-more .e-paragraph-link-base::after {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-left: 0.35em;
	vertical-align: -0.12em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10.5M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10.5M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s;
}
.elementor .link-more .e-paragraph-link-base[target="_blank"]::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6'/%3E%3C/svg%3E");
}
.elementor .link-more .e-paragraph-link-base:hover::after {
	transform: translateX(3px);
}
.elementor .link-more .e-paragraph-link-base[target="_blank"]:hover::after {
	transform: translate(2px, -2px);
}

/* Words that must not break at their hyphen ("e-posta"): wrap them in a bare <span> in the Elementor text
 * (Elementor keeps the span but strips its class, so the rule targets spans without attributes). */
.elementor .e-paragraph-base > span:not([class]):not([style]) {
	white-space: nowrap;
}

/* ---------- Header navigation: current page (set by assets/js/site.js) ---------- */
.nav a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--ink);
}

/* ---------- Mobile menu (≤1024px): header button + Elementor popup ----------
 * The button is an e-flexbox with class `menu-btn`; the two-line icon is drawn here because
 * Elementor's own .e-con::before overlay rules would fight a class-level pseudo-element.
 */
.elementor .menu-btn::after {
	content: "";
	position: static;
	display: block;
	width: 22px;
	height: 8px;
	border-top: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	opacity: 1;
	background: none;
}
.elementor .menu-close::after {
	content: "\00D7";
	position: static;
	display: block;
	font-size: 1.5rem;
	line-height: 1;
	opacity: 1;
	background: none;
}
/* Popup shell: full screen, page colour, no Elementor close icon (the panel has its own button). */
.elementor-popup-modal.skc-menu-modal .dialog-close-button,
.elementor-popup-modal:has(.mnav) .dialog-close-button {
	display: none;
}
.elementor-popup-modal.skc-menu-modal .dialog-widget-content,
.elementor-popup-modal:has(.mnav) .dialog-widget-content {
	background-color: var(--bg);
	box-shadow: none !important; /* the popup's own rule uses an id selector */
	border-radius: 0;
}
.mnav a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* ---------- Footer: tel/mailto links keep the text colour of their line ---------- */
.site-footer a[href^="tel:"],
.site-footer a[href^="mailto:"] {
	color: inherit;
}
.elementor .foot-meta .e-paragraph-link-base {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* ---------- Long text from the WordPress editor (posts, legal pages) ----------
 * The single templates wrap Elementor's Post Content widget in an e-div-block with the class `post-body`.
 */
.post-body {
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--text);
}
.post-body > .elementor-widget-theme-post-content > :first-child,
.post-body .elementor-widget-container > :first-child {
	margin-top: 0;
}
.post-body :where(p, ul, ol, blockquote, figure, table, pre) {
	margin: 0 0 1.25em;
}
.post-body :where(h2, h3, h4) {
	font-family: var(--serif);
	color: var(--ink);
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}
.post-body h2 {
	font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
	font-weight: 500;
	margin: 2em 0 0.6em;
}
.post-body h3 {
	font-size: 1.3125rem;
	font-weight: 500;
	margin: 1.75em 0 0.5em;
}
.post-body h4 {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 600;
	margin: 1.5em 0 0.4em;
}
.post-body :where(ul, ol) {
	padding-left: 1.25em;
}
.post-body li + li {
	margin-top: 0.35em;
}
.post-body li::marker {
	color: var(--muted);
}
.post-body a {
	color: var(--ink);
	text-decoration: underline;
}
.post-body strong {
	font-weight: 600;
	color: var(--ink);
}
.post-body blockquote {
	margin-left: 0;
	padding-left: 1.25em;
	border-left: 2px solid var(--line-2);
	font-family: var(--serif);
	font-size: 1.1875rem;
	color: var(--ink);
}
.post-body blockquote p:last-child {
	margin-bottom: 0;
}
.post-body hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.5em 0;
}
.post-body img {
	max-width: 100%;
}
.post-body figcaption {
	font-size: var(--fs-small, 0.9375rem);
	color: var(--muted);
	margin-top: 0.5em;
}
.post-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}
.post-body :where(th, td) {
	text-align: left;
	padding: 0.6em 0.75em 0.6em 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

/* Publication titles (Hakkımda) link to the DOI: quiet underline that darkens on hover. */
.elementor .cv-title .e-paragraph-link-base {
	text-decoration: underline;
	text-decoration-color: var(--line-2);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: text-decoration-color 0.2s;
}
.elementor .cv-title .e-paragraph-link-base:hover {
	text-decoration-color: var(--ink);
}

/* Loop titles link through e-heading's link; keep the underline for hover/focus only. */
.elementor .post-item-title .e-heading-link-base:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}