/*
Theme Name: Make
Description: Child theme for Blocksy
Author: Tanja Kuppel
Template: blocksy
Version: 1.0
*/

/* ---------------------------------------------------
   FONTS
--------------------------------------------------- */
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-300.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Vanitas-Bold';
	src: url('../fonts/Vanitas-Bold-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Work Sans";
	src: url("../fonts/WorkSans-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Work Sans";
	src: url("../fonts/WorkSans-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Work Sans";
	src: url("../fonts/WorkSans-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Work Sans";
	src: url("../fonts/WorkSans-ExtraBold.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* inspiration-regular - latin */
@font-face {
	font-family: "Allura";
	src: url("../fonts/allura-regular.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

/* ---------------------------------------------------
   BASE TYPOGRAPHY
--------------------------------------------------- */

body,
input,
textarea,
select,
.ct-widget,
.ct-widget * {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
}

h1,
h2 {
	font-family: var(--font-heading);
	font-weight: 500;
	hyphens: auto;
	overflow-wrap: break-word;
    word-break: break-word;
	text-wrap: balance;
}

h3,
h4,
h5,
h6 {
	font-family: var(--font-body);
	font-weight: 300;
}

p a {
	color: var(--theme-text-color);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: solid 1px;
}

b, strong {
	font-weight: 500;
}

a:hover {
	transform: scale(1.01);
    color: #564c56;
}

/* Utility typography classes */

.make-accent {
	margin-bottom: 0;
	padding-left: var(--space-xs);
	font-family: var(--font-accent);
	font-size: var(--font-size-accent);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--letter-spacing-accent);
	text-transform: uppercase;
	color: var(--color-muted);
	opacity: 0.6;
}

.make-script {
	font-size: var(--font-size-script);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--font-color-script);
	transform: rotate(356deg);
	margin-top: var(--space-xl);
}

.make-script {
	font-family: var(--font-script-fallback);
}

.cmplz-marketing .make-script {
	font-family: var(--font-script-consented);
}

.make-allcaps {
	font-family: var(--font-allcaps);
	letter-spacing: var(--letter-spacing-allcaps);
	text-transform: uppercase;
}

.make-emphasis {
	font-size: var(--font-size-emphasis);
}

/* ---------------------------------------------------
   GLOBAL LAYOUT
--------------------------------------------------- */

#main-container {
	max-width: var(--size-site-max);
	margin-inline: auto;
}

:is(.is-layout-flow, .is-layout-constrained) > *:where(:not(h1, h2, h3, h4, h5, h6, p, ul, .wp-block-spacer)) {
	margin-block-end: 2rem;
}

.entry-content > :where(
	p,
	ul,
	ol,
	blockquote,
	.wp-block-heading:not(.alignwide):not(.alignfull)
) {
	max-width: var(--size-text-max);
}

/* Full-width content handling */

.site-main .ct-container-full {
	padding-bottom: 0;
}

.site-main .ct-container-full .entry-content > *:last-child {
	margin-bottom: var(--theme-content-vertical-spacing);
}

.alignfull {
	max-width: var(--size-site-max);
}

/* ---------------------------------------------------
   HEADER
--------------------------------------------------- */

#header .ct-container,
#header .ct-container-fluid {
	position: relative;
	width: var(--size-site-inner);
}

/* ---------------------------------------------------
   NAVIGATION
--------------------------------------------------- */

[class*="animated-submenu"][data-submenu] {
	position: unset;
}

#menu-main.menu {
	position: relative;
	flex-wrap: wrap;
}

.menu > .menu-item > a.ct-menu-link {
	font-family: var(--font-allcaps);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-allcaps);
	text-transform: uppercase;
	font-size: clamp(0.9rem, 1vw, 1.25rem);
}

.mobile-menu .menu-item a.ct-menu-link {
	font-family: var(--font-allcaps);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-allcaps);
	text-transform: uppercase;
}

#menu-main > .menu-item > .sub-menu {
	position: absolute;
	display: grid;
	width: 100%;
	max-width: var(--size-menu-panel-max);
	padding: var(--menu-panel-padding);
	gap: var(--menu-panel-gap-row) var(--menu-panel-gap-column);
	grid-auto-flow: column;
	grid-auto-columns: minmax(var(--menu-panel-column-min), 1fr);
	grid-template-rows: repeat(4, auto);
	border-radius: var(--radius-sm);
}

#menu-main > .menu-item > .sub-menu .ct-toggle-dropdown-desktop {
	visibility: hidden;
}

#menu-main > li.menu-item > .sub-menu > li.menu-item > a.ct-menu-link {
	font-family: var(--font-allcaps);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: var(--letter-spacing-allcaps);
	text-transform: uppercase;
}

#menu-main .sub-menu li.menu-item-has-children {
	align-items: start;
}

#menu-main .sub-menu li.menu-item-has-children a.ct-menu-link {
	width: auto;
}

#menu-main > .menu-item > .sub-menu > .menu-item > .sub-menu {
	position: unset;
	visibility: visible;
	width: 100%;
	opacity: 1;
	transform: none;
	box-shadow: none;
}

#menu-main > .menu-item > .sub-menu > .menu-item > .sub-menu a.ct-menu-link {
	padding-bottom: 0;
}

/* ---------------------------------------------------
   HERO
--------------------------------------------------- */

.hero-section[data-type="type-2"] > figure > .ct-media-container::after {
	background: var(--overlay-hero-strong);
}

.hero-section[data-type="type-2"] > [class*="ct-container"] {
	width: var(--size-site-inner);
	max-width: 100%;
}

.hero-section[data-type="type-2"] .page-title {
	font-family: var(--font-allcaps);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-allcaps);
	text-transform: uppercase;
	text-shadow: var(--shadow-text-hero);
}

/* ---------------------------------------------------
   CONTENT SECTIONS
--------------------------------------------------- */

.wp-block-group.make-title__container {
	position: relative;
}

.entry-content .wp-block-group.make-title__container:not(:first-child) {
	margin-top: calc(var(--space-section) * 1.5);
}

.make-title__container {
	margin-block-end: 1.5rem !important;
}

.make-title__container .make-accent {
	position: absolute;
	top: 0;
	z-index: -2;
	transform: translateY(var(--title-accent-offset-mobile));
}

.make-title__container h2 {
	max-width: var(--size-text-max);
	margin-left: 0 !important;
}

.make-text {
	max-width: var(--size-text-max);
}

.make-section--small {
	max-width: var(--size-text-max);
}

.make-teaser {
	text-shadow: var(--shadow-text-teaser);
}

/* ---------------------------------------------------
   FOOTER
--------------------------------------------------- */

#footer .footer__title {
	font-size: clamp(2.937rem, 2.937rem + ((1vw - 0.2rem) * 3.516), 3.75rem);
	margin-bottom: 0;
	font-weight: 600;
}

#footer .footer__subtitle {
	margin-top: 0;
	font-family: var(--font-allcaps);
	letter-spacing: var(--letter-spacing-allcaps);
	text-transform: uppercase;
}

#footer .footer__bottom-meta div {
	flex-basis: auto;
}

#footer #footer-menu a {
	font-family: var(--font-allcaps);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-allcaps);
	text-transform: uppercase;
}

.make-footer__shop {
	position: relative;
	justify-content: flex-end;
}

.make-footer__shop a {
	width: var(--make-button-round-size) !important;
	height: var(--make-button-round-size) !important;
	border-radius: 50%;
	display: flex;
	align-items: center !important;
	justify-content: center;
	
	background: #e5af1d;
	
	font-family: var(--font-allcaps);
    font-weight: 500 !important;
    letter-spacing: var(--letter-spacing-allcaps);
    text-transform: uppercase;
    box-shadow: var(--shadow-button);
	font-size: var(--theme-button-font-size) !important;
	color: var(--theme-button-text-initial-color) !important;
	justify-content: center !important;
	margin: var(--menu-item-padding, 0px);
}

.ct-footer-copyright a {
	font-size: inherit;
	border-bottom: none;
}

/* ---------------------------------------------------
   ELEMENTS
--------------------------------------------------- */

img {
	user-select: none;
	pointer-events: none;
}

ul.wp-block-list li {
	padding-bottom: 1rem;
}

.wp-element-button {
	font-family: var(--font-allcaps);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-allcaps);
	text-transform: uppercase;
	box-shadow: var(--shadow-button);
}

.fullwidth-gallery {
	max-width: var(--size-site-max);
	margin-inline: auto;
}

.gallery-item_large {
	width: 100% !important;
	aspect-ratio: 16 / 9;
}

.entry-content figcaption,
.entry-content figcaption a {
	text-align: right;
	margin-block: .5em 0;
	text-transform: uppercase;
	color: #0078a9 !important;
	font-family: var(--font-allcaps);
}

.make-button--round {
	width: var(--make-button-round-size) !important;
	height: var(--make-button-round-size) !important;
	border-radius: 50%;
	display: flex;
	align-items: center !important;
	justify-content: center;
	
	background: var(--theme-palette-color-1);
}

.make-button--round a {
	font-family: var(--font-allcaps);
    font-weight: 500 !important;
    letter-spacing: var(--letter-spacing-allcaps);
    text-transform: uppercase;
	hyphens: auto;
	overflow-wrap: break-word;
    word-break: break-word;
	
    box-shadow: var(--shadow-button);
	font-size: var(--theme-button-font-size) !important;
	justify-content: center !important;
}

/* ---------------------------------------------------
   UTILITIES
--------------------------------------------------- */

.no-bottom-space {
	margin-bottom: 0 !important;
}

.space-section {
	margin-top: var(--space-section);
}

.content-max {
	max-width: var(--size-content-max);
}

.is-h2 {
	font-size: var(--text-h2);
}

.is-h3 {
	font-size: var(--text-h3);
}

/* ---------------------------------------------------
   PLUGIN OVERRIDES
--------------------------------------------------- */

.foogallery.foogallery-container {
	max-width: var(--size-site-max);
}

.fg-media.fg-loaded .fg-media-content {
	max-width: var(--size-lightbox-max-width);
	max-height: var(--size-lightbox-max-height);
}

/* ---------------------------------------------------
   MEDIA QUERIES
--------------------------------------------------- */

@media (min-width: 690px) {
	.hero-section[data-type="type-2"] {
	height: 100svh;
}
	
	.make-title__container .make-accent {
		transform: translateY(var(--title-accent-offset-tablet));
	}
}

@media (min-width: 1000px) {
	h1,
	h2 {
		hyphens: unset;
		text-wrap: unset;
	}
	
	:is(.is-layout-flow, .is-layout-constrained) > *:where(:not(h1, h2, h3, h4, h5, h6, p, ul, .wp-block-spacer)) {
		margin-block-end: 5rem;
	}

	.make-title__container {
		margin-block-end: 3rem !important;
	}

	.make-accent {
		padding-left: var(--space-2xl);
	}
}