/*
Theme Name: Twentig One
Theme URI: https://twentig.com/theme/twentig-one/
Update URI: https://twentig.com/theme/twentig-one/
Author: Twentig
Description:
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 7.4
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Domain Path: /languages
Text Domain: twentig-one
Tags: blog, news, portfolio, photography, food-and-drink, entertainment, education, grid-layout, one-column, two-columns, three-columns, four-columns, accessibility-ready, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, translation-ready, wide-blocks, threaded-comments

Twentig One, (C) 2025 twentig.com
Twentig One is distributed under the terms of the GNU GPL.
*/

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	word-break: break-word;	
}

html:has(.wp-block-navigation.scroll-smooth) {
	scroll-behavior: smooth;
	scroll-padding-top: var(--tw-header-height, 0px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

@supports not (color: oklch(from red l c h)) {
	:root { 
		--wp--preset--gradient--accent: var(--wp--preset--color--accent);
		--wp--preset--gradient--accent-diagonal: var(--wp--preset--color--accent);
		--wp--preset--gradient--accent-analogous: var(--wp--preset--color--accent);
	}
}

@supports (color: oklch(from red l c calc(h + 45deg))) {
	:root {
		--wp--custom--gradient-hue: 45deg;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--wp--style--columns-gap-default: var(--wp--preset--spacing--30);
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	--wp--preset--spacing--site-padding: var(--wp--style--root--padding-left);
	font-feature-settings: "liga","lnum";
}

.wp-site-blocks a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

ul,
ol {
	padding-inline-start: 1.175em;
}

input,
textarea {
	border: 1px solid var(--wp--preset--color--secondary);
	background-color: transparent;
	padding: 0.75rem;
	color: currentcolor;
	font: inherit;
}

input[type=button],
input[type=submit],
input[type=reset] {
	-webkit-appearance: none;
}

::placeholder {
	color: currentcolor;
}

:placeholder-shown {
	opacity: 0.65;
}

cite {
	display: block;
}

sub,
sup {
	position: relative;
	font-size: 0.75em;
	line-height: 0;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

.wp-element-button {
	transition: opacity 0.1s;
}

.wp-element-button:hover {
	opacity: 0.85;
}

.has-secondary-color a:where(:not(.wp-element-button)) {
	--wp--preset--color--secondary: currentColor;
}

.has-background:is(p,.wp-block-heading) {
	padding: var(--wp--preset--spacing--20);
}

figcaption.wp-element-caption {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.is-content-justification-left .wp-element-caption {
	margin-inline-start: 0;
}

.wp-block-gallery .wp-block-image .wp-element-caption {
	max-width: none;
}

.alignfull > .wp-element-caption {
	width: calc(100% - 2 * var(--wp--style--root--padding-left));
}

.wp-block-group.is-layout-flex .wp-block-image img {
	display: block;
}

*:not(.wp-block-code) > :where(code,kbd) {
	background-color: color-mix(in srgb, currentColor 7%, transparent);
	font-family: var(--wp--custom--font-mono);
	padding: 2px 4px;
	font-size: var(--wp--preset--font-size--small);
	border-radius: 6px;
}

.post-password-form input[type="password"] {
	margin-block: 6px 12px;
	margin-inline-end: 8px;
}

.wp-block-embed iframe {
	width: 100%;
	vertical-align: bottom;
}

/* Navigation */

header.wp-block-template-part {
	position: relative;
	z-index: 10;
}

header.wp-block-template-part:has(>.is-position-sticky) {
	position: sticky;
	top: calc(0px + var(--wp-admin--admin-bar--height, 0px));
	z-index: 10;
}

.skip-link.screen-reader-text:focus {
	z-index: 100002;
}

.wp-block-navigation:where(:not([class*=has-text-decoration])) a:not(.wp-element-button):hover,
.wp-block-navigation .current-menu-item > a {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-underline-offset: 0.25em;
}

.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:hover {
	text-decoration-style: dotted;
}

.wp-block-navigation.items-justified-center .wp-block-navigation-item__content {
	text-align: center;
	justify-content: center;
}

button.wp-block-navigation-item__content {
	padding-inline-start: 0;
}

header .wp-block-navigation:not(.is-vertical) .wp-block-navigation__container > li > :where(.wp-block-navigation-item__content) {
	padding: 4px 0;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: min(130px, var(--tw-top, 80px)) 0 0;
	overflow: hidden;
}

.wp-block-navigation__responsive-container-close {
	position: fixed;
}

.is-layout-constrained .alignwide .wp-block-navigation__responsive-dialog {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
}

.has-modal-open .wp-block-navigation__responsive-close {
	max-width: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	padding: 0 var(--wp--style--root--padding-left) var(--wp--preset--spacing--60);
	overflow: auto;
	overscroll-behavior: contain;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	margin-top: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0;
}

.overlay-center .wp-block-navigation__responsive-container.is-menu-open {
	justify-content: center;
}

:is(.tw-nav-hover-box,.tw-nav-active-box) .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 10px;
}

.wp-block-navigation__responsive-container.is-menu-open :where(.wp-block-social-links,.wp-block-search,.wp-block-buttons) {
	margin-top: 10px;
}

.wp-block-navigation.has-secondary-color > .wp-block-navigation__container {
	color: unset !important;
}

@media (min-width: 768px) {
    header.wp-block-template-part .wp-block-group-is-layout-flex:has(>.wp-block-site-title):has(.wp-block-navigation__responsive-container-open:not(.always-shown) ) {
       align-items: baseline;
    }
}

/*
.wp-block-navigation .wp-block-navigation-item__description {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	width: 100%;
	opacity: 0.7;
	text-transform: none;
	margin-top: 4px;
}

.wp-block-navigation-item__content:has(.wp-block-navigation-item__description) {
	display: block !important;
}

.wp-block-navigation .wp-block-navigation-item__content:has(img),
.wp-block-navigation .wp-block-navigation-item__label:has(img) {
	display: flex;
	align-items: center;
	gap: 4px 8px;
}

.wp-block-navigation-item.image-stack :is(.wp-block-navigation-item__content,.wp-block-navigation-item__label) {
	flex-direction: column;
	align-items: var(--navigation-layout-justify);
}*/

footer.wp-block-template-part a[href="https://twentig.com"]:not(:hover,:focus) {
	text-decoration: none;
	color: inherit;
}

/* Site spacing */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.wp-site-blocks > footer {
	margin-top: auto;
}

.wp-site-blocks > * {
	margin-top: 0;
}

.wp-site-blocks > .wp-block-template-part > .wp-block-group {
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.alignfull + .alignfull {
	margin-top: 0;
}

.wp-block-post-content > figure {
	margin-block: var(--wp--custom--spacing--media);
}

.wp-block-post-content > :where(h1,h2,h3) {
	margin-top: var(--wp--custom--spacing--heading-margin);
}

.wp-block-media-text__content :where(h3,h4,h5,h6,p,.wp-block-list) + :where(p,.wp-block-list),
.wp-block-column :where(h3,h4,h5,h6,p,.wp-block-list) + :where(p,.wp-block-list) {
	margin-top: calc(0.6666667 * var(--wp--style--block-gap));
}

:where(.wp-block-heading) {
	text-wrap: pretty;
}

:where(h1,h2.wp-block-heading) {
	text-wrap: balance;
}

/* Left & right align */

.is-layout-constrained > :is(.alignright,.alignleft) {
	margin-bottom: var(--wp--style--block-gap);
	margin-inline-end: var(--wp--preset--spacing--30);
	max-width: min(calc(0.5 * var(--wp--style--global--content-size)), 340px);
}

.is-layout-constrained > * + :is(.alignright,.alignleft) {
	margin-top: var(--wp--preset--spacing--40);
}

.is-layout-constrained > .alignright {
	margin-inline: var(--wp--preset--spacing--30) 0;
}

.is-layout-constrained:where(.wp-block-post-content,.wp-block-group.alignfull) > .alignleft {
	margin-inline-start: max(0px, calc(0.5 * (var(--wp--custom--main-width) - var(--wp--style--global--content-size)) - var(--wp--style--root--padding-left)));
}

.is-layout-constrained:where(.wp-block-post-content,.wp-block-group.alignfull) > .alignright {
	margin-inline-end: max(0px, calc(0.5 * (var(--wp--custom--main-width) - var(--wp--style--global--content-size)) - var(--wp--style--root--padding-left)));
}

@media (max-width: 767px) {

	.is-layout-constrained > :is(.alignright,.alignleft) {
		float: none;
		max-width: 100%;
		display: block;
		margin-inline: auto;
		margin-bottom: var(--wp--preset--spacing--40);
	}
}

/* Reset */
.wp-block-spacer,
.wp-block-spacer.wp-block-spacer + *,
.wp-block-post-content > *:first-child {
	margin-top: 0;
}

.wp-block-post-content > *:last-child {
	margin-bottom: 0;
}

/* Block padding */

.wp-block-group.alignfull.is-layout-flow {
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
}

.wp-block-cover {
	padding: var(--wp--preset--spacing--35);
}

.wp-block-cover.alignwide {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--35);
}

.wp-block-cover.alignfull {
	padding: var(--wp--preset--spacing--60) var(--wp--style--root--padding-left);
}

.single .wp-block-cover:not(:has(img)) .wp-block-cover__background {
	opacity: 1;
}

.related-section:not(:has(.wp-block-post-template)) {
	display: none;
}


.wp-block-navigation__responsive-container:not(.is-menu-open) .tw-overlay-menu,
.wp-block-navigation__responsive-container.is-menu-open:has(.tw-overlay-menu) .wp-block-navigation__responsive-container-content:not(.tw-overlay-menu) {
	display: none;
}


.wp-block-navigation__responsive-container.is-menu-open .tw-overlay-menu {
	display: block;
}