/*!
Theme Name: Pott Project
Theme URI: https://sixtudio.com
Author: Sixtudio
Author URI: https://sixtudio.com
Description: Theme for Pott Project.
Version: 1.1.1
Tested up to: 6.1
Requires PHP: 8.1
Text Domain: unk
*/

/* Cascade layers — declared early so order is established before any rule lands in the unlayered bucket. */
@layer reset, vendor, components, utilities;

:root {
	--unk-font-01: 'Everett', Helvetica, system-ui, sans-serif;

	--unk-font-weight-01: 500;
	--unk-font-weight-02: normal;
	--unk-font-weight-03: 300;

	--unk-text-size-l: 14px;
	--unk-text-size-m: 12px;
	--unk-text-size-s: 10px;
	--unk-text-size-xs: 8px;

	--unk-text-line-height-l: 1.6;
	--unk-text-line-height-m: 1.3;
	--unk-text-line-height-s: 1;

	--unk-color-01: #000000;
	--unk-color-02: #ffffff;
	--unk-color-03: #808080;
	--unk-border-color: rgba(0, 0, 0, 0.25);
	--unk-corner-line: linear-gradient(var(--unk-color-01), var(--unk-color-01));
	--unk-panel-corners:
		var(--unk-corner-line) top left / 6px 1px no-repeat,
		var(--unk-corner-line) top left / 1px 6px no-repeat,
		var(--unk-corner-line) top right / 6px 1px no-repeat,
		var(--unk-corner-line) top right / 1px 6px no-repeat,
		var(--unk-corner-line) bottom left / 6px 1px no-repeat,
		var(--unk-corner-line) bottom left / 1px 6px no-repeat,
		var(--unk-corner-line) bottom right / 6px 1px no-repeat,
		var(--unk-corner-line) bottom right / 1px 6px no-repeat;

	--unk-max-width: 1920px;

	--unk-transition-01: background-color 100ms linear, color 100ms linear, opacity 100ms linear;
	--unk-transition-02: fill 100ms linear;

	--unk-column-gap: 12px;
	--unk-header-height: 30px;

	--unk-space-2xs: 4px;
	--unk-space-xs: 8px;
	--unk-space-sm: 12px;
	--unk-space-md: 16px;
	--unk-space-lg: 24px;
	--unk-space-xl: 48px;
	--unk-space-2xl: 96px;

	--unk-z-base: 1;
	--unk-z-raised: 9;
	--unk-z-fixed: 100;
	--unk-z-overlay: 900;
	--unk-z-modal: 1000;
	--unk-z-cursor: 9999999999;
}

@media only screen and (max-width: 767.98px) {
	:root {
		--unk-text-size-l: 14px;
		--unk-text-size-m: 12px;
		--unk-text-size-s: 10px;
		--unk-text-size-xs: 8px;

		--unk-column-gap: 6px;
	}
}

/* Font Faces */
@font-face {
	font-family: 'Everett';
	src:
		url('assets/fonts/Everett-Regular.woff2') format('woff2'),
		url('assets/fonts/Everett-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Everett';
	src:
		url('assets/fonts/Everett-Medium.woff2') format('woff2'),
		url('assets/fonts/Everett-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Everett';
	src:
		url('assets/fonts/Everett-Light.woff2') format('woff2'),
		url('assets/fonts/Everett-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Ortica';
	src:
		url('assets/fonts/OrticaLinear-Bold.woff2') format('woff2'),
		url('assets/fonts/OrticaLinear-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/*
 * Reset note:
 * `assets/css/vendor/reset.min.css` is enqueued ahead of this file (see includes/theme.php).
 * The rules below intentionally extend that base reset (button normalization, fast-click hints,
 * selection styles, image defaults). Migrating to a single in-theme reset wrapped in
 * `@layer reset { ... }` is deferred — it requires a coordinated PHP enqueue change.
 */
/* Reset - Expand */
button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	background-color: transparent;
	color: inherit;
	font: inherit;
	line-height: 1em;
	text-align: inherit;

	display: inline-flex;
}

/* Fast click */
button,
a,
input[type='button'],
input[type='submit'],
[role='button'] {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	display: inline-flex;
}

:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}

img,
video {
	touch-action: manipulation;
}

/* Hack :active iOS */
body::before {
	content: '';
	display: none;
}

/* Selection */
::-moz-selection {
	background-color: var(--unk-color-03);
	color: var(--unk-color-01);
}
::selection {
	background-color: var(--unk-color-03);
	color: var(--unk-color-01);
}

/* Images */
img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Admin */
#wpadminbar {
	display: none !important;
}

/* General */
html,
body {
	font-family: var(--unk-font-01);
	font-size: var(--unk-text-size-m);
	font-weight: var(--unk-font-weight-02);
	line-height: var(--unk-text-line-height-m);

	background: var(--unk-color-02);
	color: var(--unk-color-01);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'kern', 'liga', 'clig', 'calt';
}

.font-style-02 {
	font-family: 'Ortica', serif;
}

.uppercase {
	text-transform: uppercase;
}

.text_s-l {
	font-size: var(--unk-text-size-l);
}

.text_s-m {
	font-size: var(--unk-text-size-m);
}

.text_s-s,
small {
	font-size: var(--unk-text-size-s);
}

a,
button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
	text-decoration: none;
	transition: var(--unk-transition-01);

	color: var(--unk-color-01);
}

button,
.nowrap {
	white-space: nowrap;
}

.fade {
	color: var(--unk-color-03);
}

@media screen and (pointer: fine) {
	a:hover,
	button:hover,
	input[type='button']:hover,
	input[type='submit']:hover,
	input[type='reset']:hover {
		color: var(--unk-color-03);
	}
}

.bold,
strong {
	font-weight: var(--unk-font-weight-01);
}

.underline,
.paragraphs a {
	text-decoration: underline;
}

.pretty {
	text-wrap: pretty;
}

/* Structure */
@media only screen and (min-width: 1024px) {
	/*
	.sticky-top {
		position: sticky !important;
		top: calc(var(--unk-column-gap) * 2);
		color: var(--unk-color-02);
		mix-blend-mode: difference;
		z-index: 99;
	}
	*/
}

.wide {
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
}

#unk_nav-more-panel::before,
.grid-system-filters-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--unk-panel-corners);
	transition: inset 0.2s ease;
}

@media (pointer: fine) {
	#unk_nav-more-panel.is-open:hover::before,
	grid-system-filters[open] .grid-system-filters-panel:hover::before {
		inset: -2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#unk_nav-more-panel::before,
	.grid-system-filters-panel::before {
		transition: none;
	}
}

.container-full {
	padding-left: calc(var(--unk-column-gap) * 2);
	padding-right: calc(var(--unk-column-gap) * 2);
	width: 100%;
	max-width: var(--unk-max-width);
}

.fullscreen:not(img) {
	position: fixed;
	width: 100vw;
	height: 100dvh;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

img.fullscreen {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

ul:not([role='menu']) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
}

ul:not([role='menu']) > li {
	display: flex;
}

ul.horizontal {
}

ul.vertical {
	flex-direction: column;
}

/* Blend mode */
.blend-mode {
	mix-blend-mode: difference;
}

/* Mobile: hasta 767px */
@media only screen and (max-width: 767.98px) {
	.hidden-mobile {
		display: none !important;
	}

	.visible-mobile {
		display: block !important;
	}

	.visible-mobile.flex {
		display: flex !important;
	}
}

/* Tablet: 768px a 1024px */
@media only screen and (min-width: 768px) and (max-width: 1023.98px) {
	.hidden-tablet {
		display: none !important;
	}

	.visible-tablet {
		display: block !important;
	}

	.visible-tablet.flex {
		display: flex !important;
	}
}

/* Desktop: 1025px en adelante */
@media only screen and (min-width: 1024px) {
	.hidden-desktop {
		display: none !important;
	}

	.visible-desktop {
		display: block !important;
	}

	.visible-desktop.flex {
		display: flex !important;
	}
}

/* Text */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: var(--unk-text-size-l);
	font-weight: var(--unk-font-weight-01);
}

/* Site */
#unk_site {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
}

@media only screen and (max-width: 767.98px) {
	#unk_site {
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

/* Structure */
#unk_page {
	position: relative;
	width: 100%;
	min-height: 100svh;
	z-index: 9;

	padding: calc(var(--unk-column-gap) * 2);
}

#unk_page > .container-full,
#unk_page article > .container-full {
	margin: auto;
}

.default-content {
	padding-top: 64px;
	row-gap: 48px;
}

/* Align */
.flex {
	display: flex;
}

.flex-end {
	justify-content: flex-end;
}

:where([class^='col-'], [class*=' col-']) > a {
	align-self: flex-start;
}

/* Text */
.section + .section {
	margin-top: var(--unk-space-xl);
}

h1 + .paragraphs,
h2 + .paragraphs,
h3 + .paragraphs,
h4 + .paragraphs,
h5 + .paragraphs,
h5 + .paragraphs,
.text-mg_t {
	margin-top: var(--unk-space-lg);
}

@media only screen and (max-width: 767.98px) {
	h1 + .paragraphs,
	h2 + .paragraphs,
	h3 + .paragraphs,
	h4 + .paragraphs,
	h5 + .paragraphs,
	h5 + .paragraphs,
	.text-mg_t {
		margin-top: var(--unk-space-md);
	}
}

.paragraphs p:not(:last-child) {
	margin-bottom: 1em;
}