/*
Theme Name:   ROQUE
Theme URI:    https://www.roqueroque.com/
Description:  Hello Elementor child theme for ROQUE — Art + Design. Rebuilt from the Squarespace site by Graywell Design. Page content is built in Elementor; header, footer and the Artists / Press Kit archives are theme templates with Customizer controls.
Author:       Graywell Design LLC
Author URI:   https://graywelldesign.com/
Template:     hello-elementor
Version:      1.0.0
Requires PHP: 7.4
Text Domain:  roque
*/

/*
 * Only structural styles for theme-rendered parts (header, footer, archives,
 * contact form). Everything inside page/post content is styled through
 * Elementor Site Settings (global colors + fonts) and widget controls.
 */

:root {
	--roque-ink: #000000;
	--roque-paper: #ffffff;
	--roque-mist: #fafafa;
	--roque-line: #d9d9d9;
	--roque-font: "Playfair", Georgia, "Times New Roman", serif;
	--roque-track: 0.03em;
}

body {
	background: var(--roque-paper);
	color: var(--roque-ink);
	font-family: var(--roque-font);
	letter-spacing: var(--roque-track);
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- Header ---------- */
.roque-header {
	position: relative;
	z-index: 20;
	background: var(--roque-paper);
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.22);
	padding: 40px 4vw 28px;
	text-align: center;
}
.roque-header__logo { display: inline-block; line-height: 0; }
.roque-header__logo img,
.roque-header__logo .custom-logo {
	width: auto;
	max-width: min(324px, 70vw);
	max-height: 108px;
	height: auto;
}
.roque-header__title {
	font-size: 48px;
	letter-spacing: 0.08em;
	text-decoration: none;
}
.roque-nav { margin-top: 26px; }
.roque-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 29px;
}
.roque-nav a {
	font-size: 13.8px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.roque-nav a:hover,
.roque-nav .current-menu-item > a,
.roque-nav .current_page_item > a,
.roque-nav .current-menu-ancestor > a,
.roque-nav .current-page-ancestor > a { border-bottom-color: var(--roque-ink); }

.roque-nav-toggle {
	display: none;
	margin: 20px auto 0;
	background: none;
	border: 1px solid var(--roque-ink);
	color: var(--roque-ink);
	font-family: var(--roque-font);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 8px 18px;
	cursor: pointer;
}
@media (max-width: 767px) {
	.roque-header { padding: 28px 6vw 20px; }
	.roque-nav-toggle { display: inline-block; }
	.roque-nav { display: none; margin-top: 18px; }
	.roque-nav.is-open { display: block; }
	.roque-nav ul { flex-direction: column; gap: 14px; }
}

/* ---------- Footer ---------- */
.roque-footer {
	padding: 48px 4vw 40px;
	text-align: center;
	font-size: 10.5px;
	letter-spacing: 0.08em;
}
.roque-footer__logo img { width: 78px; height: auto; }
.roque-footer__line { margin: 14px 0 0; }
.roque-footer__email { text-transform: uppercase; text-decoration: none; }
.roque-footer__copy { margin-top: 38px; text-transform: uppercase; }

/* ---------- Archives (Artists / Press Kit) ---------- */
.roque-archive {
	max-width: 1340px;
	margin: 0 auto;
	padding: 72px 4vw 96px;
}
.roque-archive__row {
	display: grid;
	grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
	gap: 0 5.5%;
	align-items: center;
	padding: 0 0 72px;
}
.roque-archive__media { display: block; line-height: 0; }
.roque-archive__media img { width: 100%; height: auto; display: block; }
.roque-archive h2.roque-archive__title {
	margin: 0;
	font-family: var(--roque-font);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.roque-archive__title a { text-decoration: none; }
.roque-archive__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) {
	.roque-archive { padding-top: 40px; }
	.roque-archive__row { grid-template-columns: 1fr; gap: 18px; padding-bottom: 48px; }
}

/* ---------- Single artist / press item ---------- */
.roque-single {
	max-width: 1040px;
	margin: 0 auto;
	padding: 72px 4vw 96px;
}
.roque-single h1.roque-single__title {
	margin: 0 0 40px;
	font-family: var(--roque-font);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.roque-single__content > *:not(.elementor) { max-width: 100%; }
.roque-single__content img { height: auto; }
.roque-single__back {
	display: inline-block;
	margin-top: 56px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* ---------- Contact form shortcode ---------- */
.roque-form { max-width: 567px; margin: 0 auto; text-align: left; }
.roque-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.roque-form legend,
.roque-form .roque-form__label {
	display: block;
	font-size: 18px;
	letter-spacing: .06em;
	margin-bottom: 8px;
	padding: 0;
}
.roque-form small { font-size: 10px; color: #555; letter-spacing: .04em; margin-left: 6px; }
.roque-form__split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.roque-form__split label { font-size: 10px; display: block; margin-bottom: 4px; }
.roque-form input[type="text"],
.roque-form input[type="email"],
.roque-form textarea {
	width: 100%;
	border: 1px solid var(--roque-ink);
	border-radius: 0;
	background: var(--roque-paper);
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
}
.roque-form textarea { min-height: 100px; resize: vertical; }
.roque-form__hp { position: absolute !important; left: -9999px !important; }
.roque-form__submit { text-align: center; margin-top: 20px; }
.roque-form button {
	background: transparent;
	color: var(--roque-ink);
	border: 1px solid var(--roque-ink);
	border-radius: 0;
	padding: 16px 26px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.roque-form button:hover { background: var(--roque-ink); color: var(--roque-paper); }
.roque-form__notice { text-align: center; padding: 14px; border: 1px solid var(--roque-line); margin-bottom: 20px; }
.roque-form__notice--error { border-color: #b00020; color: #b00020; }
@media (max-width: 600px) { .roque-form__split { grid-template-columns: 1fr; } }