/*
Theme Name: mediadesign7
Theme URI: https://mediadesign7.com/
Author: mediadesign7
Description: A fast block theme for a watch magazine with image-led sliders and editorial single article layouts.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
Version: 0.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mediadesign7
Tags: full-site-editing, block-patterns, featured-images, custom-menu, news, blog
*/

:root {
	--twr-navy: #02070d;
	--twr-navy-soft: #0b1a27;
	--twr-ink: #1d2c3f;
	--twr-muted: #6e8296;
	--twr-paper: #ffffff;
	--twr-ice: #d8eafe;
	--twr-ice-soft: #e6f2ff;
	--twr-line: rgba(7, 26, 44, 0.18);
	--twr-gold: #c9b27c;
}

* {
	box-sizing: border-box;
}

body {
	background: var(--twr-paper);
	color: var(--twr-ink);
	text-rendering: optimizeLegibility;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.14em;
}

img {
	max-width: 100%;
}

.wp-site-blocks {
	min-height: 100vh;
}

.twr-site-header {
	background: var(--twr-navy);
	color: #ffffff;
	margin-block-start: 0;
	padding-block: clamp(14px, 2vw, 22px);
	position: relative;
	z-index: 20;
}

.twr-header-inner {
	gap: clamp(22px, 4vw, 68px);
	min-height: 58px;
}

.twr-brand-lockup {
	margin: 0;
}

.twr-logo {
	font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(2.05rem, 3.9vw, 3.5rem);
	font-weight: 400;
	line-height: 0.86;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.twr-logo a {
	color: #ffffff;
	text-decoration: none;
}

.twr-tagline {
	color: rgba(255, 255, 255, 0.78);
	font-size: clamp(0.6rem, 1vw, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	margin-block-start: 0.48rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.twr-desktop-nav {
	flex: 1 1 auto;
}

.twr-desktop-nav .wp-block-navigation__container {
	gap: clamp(22px, 4.5vw, 72px);
}

.twr-desktop-nav .wp-block-navigation-item__content {
	color: #ffffff;
	font-size: clamp(0.66rem, 0.72vw, 0.78rem);
	font-weight: 800;
	letter-spacing: 0.24em;
	text-decoration: none;
	text-transform: uppercase;
}

.twr-desktop-nav .wp-block-navigation-item__content:hover {
	color: var(--twr-gold);
}

.twr-header-actions {
	flex: 0 0 auto;
	gap: 14px;
}

.twr-header-search {
	margin: 0;
}

.twr-header-search .wp-block-search__inside-wrapper {
	margin: 0;
}

.twr-header-search .wp-block-search__input {
	display: none;
}

.twr-header-search .wp-block-search__button {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(201, 178, 124, 0.82);
	border-radius: 0;
	color: #ffffff;
	display: inline-flex;
	height: 54px;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 54px;
}

.twr-header-search .wp-block-search__button:hover {
	border-color: #ffffff;
	color: var(--twr-gold);
}

.twr-header-search svg {
	height: 18px;
	width: 18px;
}

.twr-mobile-menu {
	flex-shrink: 0;
}

.twr-mobile-menu .wp-block-navigation__responsive-container-open,
.twr-mobile-menu .wp-block-navigation__responsive-container-close {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.72);
	color: #ffffff;
	display: inline-flex;
	height: 54px;
	justify-content: center;
	padding: 0;
	width: 68px;
}

.twr-mobile-menu .wp-block-navigation__responsive-container-open:hover,
.twr-mobile-menu .wp-block-navigation__responsive-container-close:hover {
	border-color: var(--twr-gold);
	color: var(--twr-gold);
}

.twr-mobile-menu .wp-block-navigation__responsive-container-open svg,
.twr-mobile-menu .wp-block-navigation__responsive-container-close svg {
	height: 32px;
	width: 32px;
}

.twr-mobile-menu .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--twr-navy);
	color: #ffffff;
	padding: clamp(28px, 7vw, 72px);
}

.twr-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: clamp(48px, 10vw, 96px);
}

.twr-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #ffffff;
	font-size: clamp(1.65rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	text-transform: uppercase;
}

@media (min-width: 1101px) {
	.twr-mobile-menu {
		display: none;
	}
}

@media (max-width: 1100px) {
	.twr-desktop-nav,
	.twr-header-search {
		display: none;
	}
}

.twr-home,
.twr-single {
	margin-block-start: 0;
}

.twr-hero-slider {
	background: var(--twr-ice);
	margin-block-start: 0;
	overflow: hidden;
	padding-block-end: clamp(36px, 5vw, 76px);
	position: relative;
}

.twr-hero-query {
	margin: 0;
	max-width: none;
}

.twr-hero-query .wp-block-post-template {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.twr-hero-query .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

.twr-hero-query .wp-block-post-template > li {
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: start;
}

.twr-hero-slide {
	align-items: center;
	background: var(--twr-ice);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 0;
	min-height: clamp(520px, 58vw, 760px);
	padding: 0;
}

.twr-hero-image,
.twr-single-featured-image {
	height: min(60vw, 500px);
	margin: 0;
	max-width: none;
	width: 100%;
}

.twr-hero-image a,
.twr-hero-image img,
.twr-single-featured-image a,
.twr-single-featured-image img {
	display: block;
	height: 100%;
	width: 100%;
}

.twr-hero-image img,
.twr-single-featured-image img {
	object-fit: cover;
	object-position: center center;
}

.twr-hero-card,
.twr-single-title-card {
	background: var(--twr-paper);
	margin: clamp(-72px, -5vw, -44px) auto 0;
	max-width: min(920px, calc(100vw - 48px));
	padding: clamp(38px, 5vw, 66px) clamp(24px, 6vw, 78px);
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 2;
}

.twr-hero-title,
.twr-single-title {
	color: var(--twr-ink);
	font-size: clamp(2.25rem, 3.25vw, 3.08rem);
	font-weight: 800;
	line-height: 1.12;
	margin: 0 auto;
	max-width: 760px;
	text-wrap: balance;
}

.twr-hero-title a {
	color: inherit;
	text-decoration: none;
}

.twr-hero-title a:hover {
	color: var(--twr-navy-soft);
	text-decoration: underline;
}

.twr-slider-controls {
	align-items: center;
	display: flex;
	inset: 47% clamp(18px, 4vw, 64px) auto;
	justify-content: space-between;
	pointer-events: none;
	position: absolute;
	transform: translateY(-50%);
	z-index: 6;
}

.twr-slider-button {
	align-items: center;
	appearance: none;
	background: rgba(7, 26, 44, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 0;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-size: clamp(1.6rem, 3vw, 2.35rem);
	height: clamp(48px, 7vw, 68px);
	justify-content: center;
	line-height: 1;
	pointer-events: auto;
	width: clamp(48px, 7vw, 68px);
}

.twr-slider-button:hover {
	background: var(--twr-navy);
	border-color: var(--twr-gold);
	color: var(--twr-gold);
}

.twr-slider-button:disabled {
	cursor: default;
	opacity: 0.35;
}

.twr-section {
	padding-block: clamp(54px, 9vw, 108px);
}

.twr-section-heading {
	border-block-start: 1px solid var(--twr-line);
	font-size: clamp(1.55rem, 3vw, 2.4rem);
	font-weight: 800;
	margin-block-end: clamp(28px, 4vw, 48px);
	padding-block-start: 1.2rem;
	text-transform: uppercase;
}

.twr-story-grid .wp-block-post-template {
	display: grid;
	gap: clamp(28px, 4vw, 46px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.twr-story-card {
	border-block-start: 1px solid var(--twr-line);
	padding-block-start: 1rem;
}

.twr-story-card .wp-block-post-featured-image {
	aspect-ratio: 600 / 504;
	margin-block-end: 1rem;
	overflow: hidden;
}

.twr-story-card .wp-block-post-featured-image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.twr-story-card .wp-block-post-title {
	font-size: clamp(1.25rem, 2vw, 1.7rem);
	line-height: 1.2;
	margin: 0;
}

.twr-story-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.twr-story-card .wp-block-post-date {
	color: var(--twr-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-block-start: 0.85rem;
	text-transform: uppercase;
}

.twr-single-meta {
	align-items: center;
	color: var(--twr-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: clamp(0.76rem, 1vw, 0.86rem);
	font-weight: 700;
	gap: 0.85rem clamp(1.8rem, 4vw, 3rem);
	justify-content: center;
	letter-spacing: 0.18em;
	margin-block-start: clamp(1.35rem, 2.4vw, 2rem);
	text-transform: uppercase;
}

.twr-single-meta .wp-block-post-date,
.twr-single-meta .wp-block-post-author-name {
	margin: 0;
}

.twr-single-meta .wp-block-post-author-name::before {
	content: "Words by ";
}

.twr-single-hero {
	background: var(--twr-ice);
	margin-block-start: 0;
	overflow: hidden;
	padding: 0 0 clamp(44px, 6vw, 88px);
}

.twr-single-article {
	margin-block-start: 0;
}

.twr-single-content {
	font-size: clamp(1.2rem, 2.25vw, 1.45rem);
	line-height: 1.74;
	margin-block: clamp(68px, 8vw, 112px);
	max-width: 760px;
}

.twr-single-content > * + * {
	margin-block-start: 1.35em;
}

.twr-page-main,
.twr-archive-main {
	padding-block: clamp(52px, 8vw, 96px);
}

.twr-site-footer {
	background: var(--twr-navy);
	color: rgba(255, 255, 255, 0.78);
	margin-block-start: 0;
	padding-block: clamp(38px, 6vw, 72px);
}

.twr-site-footer a {
	color: #ffffff;
}

@media (max-width: 900px) {
	.twr-hero-slide {
		min-height: 590px;
		padding: 0;
	}

	.twr-hero-image,
	.twr-single-featured-image {
		height: min(66.65vw, 560px);
		width: 100vw;
	}

	.twr-single-hero {
		padding-top: 0;
	}

	.twr-hero-card,
	.twr-single-title-card {
		margin-top: -38px;
		max-width: min(650px, calc(100vw - 80px));
		padding: 38px clamp(28px, 7vw, 64px) 42px;
	}

	.twr-hero-title,
	.twr-single-title {
		font-size: clamp(2.25rem, 4.6vw, 2.95rem);
		max-width: 590px;
	}

	.twr-story-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 901px) and (max-width: 1440px) {
	.twr-hero-image,
	.twr-single-featured-image {
		height: min(52vw, 540px);
	}
}

@media (max-width: 600px) {
	.twr-site-header {
		padding-block: 16px;
	}

	.twr-header-inner {
		align-items: center;
		gap: 16px;
		min-height: 48px;
	}

	.twr-tagline {
		letter-spacing: 0.14em;
	}

	.twr-logo {
		font-size: clamp(1.85rem, 9vw, 2.65rem);
	}

	.twr-mobile-menu .wp-block-navigation__responsive-container-open,
	.twr-mobile-menu .wp-block-navigation__responsive-container-close {
		height: 48px;
		width: 62px;
	}

	.twr-hero-slide {
		min-height: 500px;
		padding: 0;
	}

	.twr-hero-image,
	.twr-single-featured-image {
		height: 66.65vw;
		max-width: none;
		width: 100%;
	}

	.twr-single-hero {
		padding-top: 0;
	}

	.twr-hero-card,
	.twr-single-title-card {
		margin-top: -36px;
		max-width: calc(100vw - 36px);
		padding: 34px 24px 42px;
	}

	.twr-hero-title,
	.twr-single-title {
		font-size: clamp(2.05rem, 7.4vw, 2.55rem);
		max-width: 320px;
	}

	.twr-single-meta {
		flex-direction: column;
		gap: 0.95rem;
		margin-block-start: 1.45rem;
	}

	.twr-single-content {
		font-size: clamp(1.08rem, 4.7vw, 1.25rem);
		line-height: 1.72;
		margin-block: 68px 82px;
		padding-inline: 22px;
	}

	.twr-slider-controls {
		inset: auto 22px 22px;
		transform: none;
	}

	.twr-story-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}