/*
Theme Name: Portfolio Patterns
Author: Zahoor Khan
Description: A designer portfolio WordPress theme for freelance designers, art directors, creative professionals and small studios. Build a polished portfolio website with flexible block patterns for project showcases, case studies, services, testimonials, pricing, journals, contact pages, headers and footers. Every pattern is self-contained and ready to customise in the Site Editor. Includes light and dark style variations, section styles and locally bundled open-source fonts.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portfolio-patterns
Tags: portfolio, blog, one-column, block-patterns, block-styles, editor-style, featured-images, full-site-editing, style-variations, translation-ready, wide-blocks

Copyright 2026 Zahoor Khan.
Portfolio Patterns is distributed under the terms of the GNU GPL v2 or later.

Most of this theme's styling lives in theme.json. The rules below only cover the
few layout devices that theme.json cannot express: the ruled index rows, the
numbered capability rows, and the display heading that mixes two typefaces.
All custom classes are prefixed with "ppat-".
*/

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
.ppat-display {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Keep the link underline clear of descenders. */
a {
	text-underline-offset: 0.15em;
	text-decoration-thickness: from-font;
}

/* -------------------------------------------------------------------------
   Display heading: Archivo, with an emphasised word set in Newsreader
   ---------------------------------------------------------------------- */

.ppat-display em,
.ppat-display i {
	font-family: var( --wp--preset--font-family--newsreader );
	font-style: italic;
	font-weight: 300;
	letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
   Mono meta label
   ---------------------------------------------------------------------- */

.ppat-eyebrow {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--meta );
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Hairlines
   ---------------------------------------------------------------------- */

.ppat-rule-top {
	border-top: 1px solid var( --wp--preset--color--rule );
}

.ppat-rule-top-strong {
	border-top: 1px solid var( --wp--preset--color--ink );
}

.ppat-rule-bottom {
	border-bottom: 1px solid var( --wp--preset--color--rule );
}

.ppat-rule-bottom-strong {
	border-bottom: 1px solid var( --wp--preset--color--ink );
}

/* -------------------------------------------------------------------------
   Index rows: No. / Client / Scope / Year
   ---------------------------------------------------------------------- */

.ppat-index-head,
.ppat-index-row {
	display: grid;
	grid-template-columns: 3.5rem minmax( 0, 1fr ) minmax( 0, 1fr ) 5rem;
	gap: 1.5rem;
	align-items: baseline;
}

.ppat-index-head > * + *,
.ppat-index-row > * + *,
.ppat-cap-row > * + *,
.ppat-meta-band > * + * {
	margin-block-start: 0;
}

.ppat-index-row {
	transition: background-color 0.16s ease, padding-inline 0.16s ease;
}

.ppat-index-row:hover,
.ppat-index-row:focus-within {
	background-color: var( --wp--preset--color--well );
}

.ppat-index-year {
	text-align: right;
}

/* -------------------------------------------------------------------------
   Numbered capability rows
   ---------------------------------------------------------------------- */

.ppat-cap-row {
	display: grid;
	grid-template-columns: 4.375rem minmax( 0, 1fr ) minmax( 0, 0.9fr );
	gap: 1.5rem;
	align-items: baseline;
}

/* -------------------------------------------------------------------------
   Four-column mono meta band
   ---------------------------------------------------------------------- */

.ppat-meta-band {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 2rem;
}

/* -------------------------------------------------------------------------
   Oversized underlined link (giant email call to action)
   ---------------------------------------------------------------------- */

.ppat-underline a {
	display: inline-block;
	border-bottom: 2px solid var( --wp--preset--color--vermilion );
	padding-bottom: 0.25rem;
	text-decoration: none;
}

.ppat-underline a:hover,
.ppat-underline a:focus {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Alignment helpers
   ---------------------------------------------------------------------- */

.ppat-align-right {
	text-align: right;
}

/* -------------------------------------------------------------------------
   Collapse the custom grids on small screens
   ---------------------------------------------------------------------- */

@media ( max-width: 781px ) {

	.ppat-index-head {
		display: none;
	}

	.ppat-index-row,
	.ppat-cap-row {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0.375rem;
	}

	.ppat-index-year {
		text-align: left;
	}

	.ppat-meta-band {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 1.5rem;
	}
}

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

:focus-visible {
	outline: 2px solid var( --wp--preset--color--vermilion );
	outline-offset: 2px;
}

.skip-link:focus {
	background-color: var( --wp--preset--color--card );
	color: var( --wp--preset--color--ink );
}

@media ( prefers-reduced-motion: reduce ) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}