/*
Theme Name: Roberto Araujo
Theme URI: https://bobbyaraujo.com
Author: Roberto Araujo
Description: A theatrical black and burnt orange block theme for the performer website of Roberto Araujo. Includes ready-made page layouts for Home, Cabaret & Stage, Watch & Listen, and About & Press.
Version: 1.0.3
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roberto-araujo
*/

/* ---------- Type helpers ---------- */
.ra-eyebrow {
	font-size: 0.8125rem !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ember);
	font-weight: 500;
	margin-bottom: 0.25rem;
}
.ra-display { font-size: clamp(3.5rem, 9vw, 8.25rem) !important; line-height: 0.92 !important; letter-spacing: -0.01em; }
.ra-display em, .ra-accent em, h1 em, h2 em { color: var(--wp--preset--color--burnt-orange); }
.ra-lead { font-size: clamp(1.15rem, 1.6vw, 1.35rem) !important; color: #D8CFC4; max-width: 34rem; }
.ra-muted { color: var(--wp--preset--color--muted); }
.ra-small { font-size: 0.9375rem !important; }

/* ---------- Header / footer ---------- */
.ra-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.ra-header .wp-block-navigation a { text-decoration: none; }
.ra-header .wp-block-navigation .ra-nav-booking a {
	background: var(--wp--preset--color--burnt-orange);
	color: var(--wp--preset--color--ink) !important;
	padding: 0.85rem 1.35rem;
	font-weight: 500;
}
.ra-header .wp-block-navigation .ra-nav-booking a:hover { background: var(--wp--preset--color--bone); }
.ra-footer { border-top: 1px solid var(--wp--preset--color--line); }
.ra-footer-cta { font-family: var(--wp--preset--font-family--display); font-size: clamp(2rem, 4vw, 3.5rem) !important; line-height: 1.08; font-weight: 400; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--bone) !important; }

/* ---------- Sections ---------- */
.ra-section { padding-top: clamp(64px, 8vw, 104px) !important; padding-bottom: clamp(64px, 8vw, 104px) !important; }
.ra-band { background: var(--wp--preset--color--charcoal); border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.ra-section-head { border-bottom: 1px solid var(--wp--preset--color--line); padding-bottom: 1rem; margin-bottom: 2rem !important; }

/* ---------- Hero ---------- */
.ra-hero { min-height: min(86vh, 860px); }
.ra-hero > .wp-block-columns { min-height: inherit; margin-bottom: 0; }
.ra-hero .ra-hero-text { align-self: flex-end; padding-bottom: clamp(40px, 6vw, 96px); }
.ra-hero .wp-block-image, .ra-photo { margin: 0; height: 100%; min-height: 420px; position: relative;
	background: radial-gradient(ellipse 60% 55% at 50% 22%, rgba(217,102,42,0.38), rgba(217,102,42,0) 70%), #171311; }
.ra-hero .wp-block-image img, .ra-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ra-hero .wp-block-image::after { content: ""; position: absolute; left: 0; bottom: 0; width: 6px; height: 240px; background: var(--wp--preset--color--burnt-orange); }

/* ---------- Featured show banner ---------- */
.ra-show .ra-show-date { font-family: var(--wp--preset--font-family--display); font-size: clamp(3.5rem, 6vw, 5.5rem) !important; line-height: 1; margin: 0; font-weight: 400; }
.ra-show .ra-show-title { border-left: 1px solid #3A332D; padding-left: clamp(0px, 3vw, 48px); }

/* ---------- Video cards ---------- */
.wp-block-embed.is-provider-youtube { margin-bottom: 0.75rem; border: 1px solid var(--wp--preset--color--line); background: #171311; }
.ra-card-title { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.35rem, 2vw, 1.75rem) !important; line-height: 1.15; margin-top: 0.35rem !important; font-weight: 400; }
.ra-card .ra-eyebrow { font-size: 0.75rem !important; letter-spacing: 0.24em; margin-top: 0.5rem; }
.ra-feature { border: 1px solid var(--wp--preset--color--burnt-orange); padding: clamp(20px, 3vw, 40px); }

/* ---------- Press ---------- */
.wp-block-quote.ra-quote { border: 0; border-top: 2px solid var(--wp--preset--color--burnt-orange); padding: 1.75rem 0 0; margin: 0; }
.wp-block-quote.ra-quote p { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.4; font-weight: 400; }
.wp-block-quote.ra-quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.ra-bigquote { text-align: center; }
.ra-bigquote p.ra-bigquote-text { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.5rem) !important; line-height: 1.35; max-width: 62rem; margin-left: auto !important; margin-right: auto !important; font-weight: 400; }

/* ---------- As seen on ---------- */
.ra-seen .ra-seen-name { text-align: center; font-size: 1.35rem !important; letter-spacing: 0.08em; font-weight: 500; margin: 0; }
.ra-seen .ra-seen-name em { font-family: var(--wp--preset--font-family--display); letter-spacing: 0; font-size: 1.6rem; color: var(--wp--preset--color--bone); }

/* ---------- Credits ---------- */
.ra-credit { line-height: 1.5; margin-bottom: 1rem !important; }
.ra-credit br + span, .ra-credit .ra-muted { color: var(--wp--preset--color--muted); }

/* ---------- Door cards ---------- */
.ra-door { border: 1px solid var(--wp--preset--color--line); padding: 40px; min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; }
.ra-door.ra-door-accent { background: var(--wp--preset--color--burnt-orange); border-color: var(--wp--preset--color--burnt-orange); color: var(--wp--preset--color--ink); }
.ra-door.ra-door-accent a, .ra-door.ra-door-accent .ra-eyebrow { color: var(--wp--preset--color--ink); }
.ra-door h3 a { text-decoration: none; color: inherit; }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--bone); border: 1px solid var(--wp--preset--color--bone); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--bone); color: var(--wp--preset--color--ink); }

/* ---------- Bio ---------- */
.ra-bio p { color: #D8CFC4; }
.ra-bio p.ra-lead { color: var(--wp--preset--color--bone); max-width: none; }
.ra-bio .ra-offstage { color: var(--wp--preset--color--muted); font-size: 1.0625rem; }

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.ra-hero { min-height: 0; }
	.ra-hero .wp-block-image { min-height: 360px; }
	.ra-show .ra-show-title { border-left: 0; padding-left: 0; }
	.ra-door { min-height: 200px; }
}

.ra-h1-medium { font-size: clamp(2.75rem, 5vw, 4.5rem) !important; line-height: 1 !important; }
.wp-block-button__link { border-radius: 0 !important; }
.ra-door h3 { font-size: clamp(1.75rem, 2.5vw, 2.5rem) !important; }

/* ---------- 1.0.1: side gutters for full-width sections that don't use constrained layout ---------- */
.ra-header,
.ra-hero,
.ra-footer,
.alignfull.wp-block-group:not(.has-global-padding) {
	padding-left: var(--wp--style--root--padding-left, clamp(20px, 4.5vw, 64px)) !important;
	padding-right: var(--wp--style--root--padding-right, clamp(20px, 4.5vw, 64px)) !important;
	box-sizing: border-box;
}
/* Hero photo column shows a spotlight panel until a photo is added */
.ra-hero > .wp-block-columns > .wp-block-column:last-child {
	min-height: 420px;
	position: relative;
	background: radial-gradient(ellipse 60% 55% at 50% 22%, rgba(217,102,42,0.38), rgba(217,102,42,0) 70%), #171311;
}
.ra-hero > .wp-block-columns > .wp-block-column:last-child::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 6px; height: 240px; background: var(--wp--preset--color--burnt-orange);
}
.ra-hero .wp-block-image::after { display: none; }

/* 1.0.2: keep faces in frame when a portrait photo fills the hero */
.ra-hero .wp-block-image img, .ra-photo img { object-position: center 20%; }
.ra-hero .wp-block-image { height: 100%; }

/* 1.0.3: show posters in full (no cropping) inside the featured show box */
.ra-feature .wp-block-image.ra-photo { height: auto; min-height: 0; background: none; }
.ra-feature .wp-block-image.ra-photo img { height: auto; object-fit: contain; }