/* ==========================================================================
   Base: fonts, design tokens, container, utilities.
   Mobile-first. Container width comes from Astra (see --ps-container, set in inc/enqueue.php).
   ========================================================================== */

/* ---- Fonts (self-hosted, SIL Open Font License; licences in /assets/fonts) ---- */
@font-face { font-family: 'Inter'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/Inter-Light.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/Inter-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/Quicksand-Light.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Quicksand-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Quicksand-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/Quicksand-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Roboto-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/Roboto-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Roboto-Medium.woff2') format('woff2'); }

/* ---- Design tokens (values taken from the Figma file) ---- */
:root {
	--ps-container: 1160px; /* overridden inline from Astra's container width (includes the side gutters, like .ast-container) */
	--ps-gutter: clamp(16px, 4vw, 20px);
	--ps-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ps-font-brand: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ps-black: #000;
	--ps-white: #fff;
	--ps-text: #000;
	--ps-muted: #606060;
	--ps-line: #cac4d0;
	--ps-pill-text: #49454f;
	--ps-accent: #9c0000;       /* resume section headings */
	--ps-link-accent: #e80000;  /* About "Resume" link */
	--ps-link-accent-2: #d70000;/* About "Linked in" link */
}

/* ---- Document ---- */
body.ps-site {
	margin: 0;
	background: var(--ps-white);
	color: var(--ps-text);
	font-family: var(--ps-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.ps-site-wrap { overflow-x: clip; }
:where(.ps-site) :where(img, video) { max-width: 100%; height: auto; }
.ps-site a { text-underline-offset: 0.2em; }
.ps-content { display: block; }
.ps-main:focus { outline: none; }

/* ---- Container: inherits Astra's content width; hero-like sections opt out by simply not using it ---- */
.ps-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ps-container);
	margin-inline: auto;
	padding-inline: var(--ps-gutter);
}

/* ---- Utilities ---- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}
.screen-reader-text:focus { clip-path: none; width: auto; height: auto; margin: 0; padding: 12px 16px; background: #fff; color: #000; z-index: 100000; }

:where(a, button, [tabindex]):focus-visible { outline: 2px solid #1a73e8; outline-offset: 3px; }

/* ---- Button (PDF download etc.) ---- */
.ps-button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 28px;
	border: 1px solid var(--ps-text); border-radius: 100px;
	font-family: var(--ps-font-brand); font-weight: 500; font-size: 15px; letter-spacing: 0.02em;
	color: var(--ps-text); background: transparent; text-decoration: none;
	transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1), color 0.2s cubic-bezier(0, 0, 0.58, 1);
}
.ps-button:hover { background: var(--ps-text); color: var(--ps-white); }

/* ---- Icons ---- */
.ps-icon { display: block; width: 1em; height: 1em; overflow: visible; }

/* ---- Elementor-built content must never cause horizontal overflow ---- */
.ps-elementor-content { max-width: 100%; overflow-x: clip; }
/* Browsers without `overflow: clip` (Safari < 16) fall back to hidden for the same guard. */
@supports not (overflow: clip) { .ps-elementor-content, .ps-project__body { overflow-x: hidden; } } /* not .ps-site-wrap: a scroll container would break the sticky header */
.ps-elementor-content .elementor { max-width: 100%; }

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

/* ---- Astra paints a background/colour on button:hover/focus; our custom buttons keep their own look ---- */
:where(.ps-card__link, .ps-reel-button, .ps-modal__close, .ps-modal__swap, .ps-entry__play):is(:hover, :focus, :active) { background: transparent; box-shadow: none; }
.ps-modal__close:focus-visible, .ps-modal__swap:focus-visible, .ps-reel-button:focus-visible, .ps-entry__play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.ps-reel-button--dark:focus-visible { outline-color: #1e1e1e; }

/* ---- Minimum tap area for stand-alone text links without changing the layout (padding is cancelled by margin) ---- */
.ps-footer__inquiry a, .ps-contacts__email, .ps-entry__link a, .ps-modal__project a, .ps-contacts .ps-link-accent { display: inline-block; padding-block: 6px; margin-block: -6px; }