/*
Theme Name: Besir Sebib
Theme URI: https://besirsebib.com
Author: Beşir Sebib
Description: Custom block theme for besirsebib.com. Design tokens live in theme.json; this file holds only the rules theme.json cannot express.
Version: 0.2.3
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: besirsebib
Tags: block-theme, full-site-editing, business
*/

/* Keep this file small on purpose — reach for theme.json first.
   What lives here: interaction states, transitions, and the couple of
   decorative details theme.json has no vocabulary for. */

/* --- Accessibility ---------------------------------------------------- */

.skip-link:focus {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(.wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Dark page, dark form controls and scrollbars. */
:root {
	color-scheme: dark;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* --- Buttons ---------------------------------------------------------- */

.wp-block-button__link {
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Core's outline variation inherits the text colour, which is invisible
   against a dark ground until it is given its own border and hover. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--elevated);
	color: var(--wp--preset--color--contrast);
}

/* --- Eyebrow label ---------------------------------------------------- */

.bsb-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Measure ---------------------------------------------------------- */

/* Sections run to the 1200px shell so cards and columns line up, but prose
   must not. Constrained layout centres every child with `margin: auto
   !important`, so pinning a narrower block to the left edge has to override
   it at the same weight. */

.bsb-measure,
.bsb-measure-tight {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.bsb-measure {
	max-width: 58ch;
}

.bsb-measure-tight {
	max-width: 20ch;
}

/* --- Cards ------------------------------------------------------------ */

.bsb-card {
	transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.bsb-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--elevated);
}

/* Numbered index on the service cards. */
.bsb-card__index {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
}

/* --- Stats ------------------------------------------------------------ */

.bsb-stat {
	font-variant-numeric: tabular-nums;
}

/* --- Header ----------------------------------------------------------- */

.wp-site-blocks > header {
	position: relative;
	z-index: 2;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* --- Media ------------------------------------------------------------ */

.wp-block-media-text__media img,
.wp-block-post-featured-image img {
	border-radius: 14px;
}

/* A portrait slot that still reads as deliberate before the photo lands. */
.wp-block-media-text__media:empty {
	min-height: 320px;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
}

/* --- Motion ----------------------------------------------------------- */

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

	.bsb-card:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}