/* ==========================================================================
   Camerata Notturna -- ticket host skin

   Re-implements the 2026 site's chrome (2026.camerata-notturna.org/about/)
   as one stand-alone stylesheet. That site reaches this look through ~40
   stylesheets -- Sonaar's 312KB main.min.css, Elementor, WooCommerce,
   Revslider, Essential Grid -- none of which exist here, so every value below
   is transcribed from what that stack computes, not imported from it.

   Transcribed from:
     - Sonaar theme options  https://2026.camerata-notturna.org/?load=custom-style.css
     - Elementor kit 5639    uploads/elementor/css/post-5639.css
     - Header block 6004 / footer block 3629
   Re-read those if the 2026 palette or typography moves.

   Deliberately self-contained. The legacy notturna.css opened with
   @import url(CMApp.css) and @import url(base.css); this does not, so the
   handful of utility classes the ticket templates use are redefined below.
   ========================================================================== */

:root {
	/* Ground */
	--cn-bg:       #000000;   /* body -- the live site is pure black, not #131516 */
	--cn-surface:  #171D23;   /* raised panels */
	--cn-line:     #484D55;   /* borders, rules */

	/* Type */
	--cn-text:     #bcc1c7;   /* body copy */
	--cn-heading:  #81878d;   /* h1, h2, colophon */
	--cn-muted:    #A6A6A7;   /* wordmark, button labels */
	--cn-bright:   #ffffff;

	/* Accent */
	--cn-gold:     #8C7956;   /* links, buttons, rules */
	--cn-error:    #E06C5A;

	/* Two families, matching the live site: Lato for everything but the
	   wordmark, which is Cinzel. Nunito drives only h3/h4 there and no
	   ticket template uses one, so it is not loaded. */
	--cn-body:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
	              Helvetica, Arial, sans-serif;
	--cn-wordmark: "Cinzel", Georgia, "Times New Roman", serif;

	/* Layout. --cn-measure is the same 41em the 2026 child theme clamps
	   running text to (sonaar-child/style.css); keep the two in step. */
	--cn-measure:   41em;
	--cn-container: 1144px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--cn-bg);
	color: var(--cn-text);
	font: 400 18px/34px var(--cn-body);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border: 0; }

a, a:visited { color: var(--cn-gold); text-decoration: none; }
a:hover      { color: var(--cn-bright); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--cn-gold); outline-offset: 2px; }

.cn-container {
	max-width: var(--cn-container);
	margin: 0 auto;
	padding: 0 15px;
}

/* --------------------------------------------------------------------------
   Header

   The 2026 header is transparent over the black body, 30px of padding, an
   80px logo, and the wordmark in Cinzel. Its nav and social icons are
   dropped here; what is left keeps the same measurements so the two hosts
   line up when they sit side by side.
   -------------------------------------------------------------------------- */

.cn-header { padding: 30px 0; }

.cn-header__inner { display: flex; }

.cn-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	text-decoration: none;
}

.cn-header__brand:hover { text-decoration: none; }

.cn-header__logo { display: block; flex: none; width: 80px; height: 80px; }

.cn-header__wordmark {
	font-family: var(--cn-wordmark);
	font-weight: 600;
	font-size: 32px;
	/* em, not px: the 2026 wordmark is set in em and never changes size,
	   where this one drops to 22px on a narrow screen. */
	letter-spacing: 0.04em;
	line-height: 1.1;
	color: var(--cn-muted);
	transition: color 0.2s;
}

.cn-header__brand:hover .cn-header__wordmark { color: var(--cn-bright); }

/* --------------------------------------------------------------------------
   Page body

   .boxed sits 70px below the header on the 2026 site. Every legacy content
   template opens with its own <h1>{$pv.page_title}</h1>, so the wrapper does
   not emit one -- h1 IS the page title and is styled as such.
   -------------------------------------------------------------------------- */

.cn-main { padding-bottom: 20px; }

.cn-entry {
	max-width: var(--cn-measure);
	margin-inline: auto;
}

/* Breadcrumb back to the concert on the main site.

   Styled after the "All Concerts" button on the 2026 homepage -- Elementor
   widget 5f33969 on page 5427: transparent, #8c7956, 16px/700 uppercase on
   3px tracking, a long arrow beside the label, hover to #a6a6a7 with
   elementor-animation-bob. Two deliberate departures: the arrow leads and
   points back rather than trailing and pointing on, and the button's
   20px/40px size-lg padding is dropped -- that belongs to a centred CTA, not
   to a breadcrumb sitting above the page title. */
.cn-backlink { margin: 0 0 24px; }

.cn-backlink a,
.cn-backlink a:visited {
	display: inline-flex;
	align-items: center;
	/* 8px, not the button's 5px: there the 3px of trailing letter-spacing
	   after the last letter falls into the gap, and the arrow leads here. */
	gap: 8px;
	padding: 8px 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--cn-gold);
	text-decoration: none;
}

.cn-backlink__arrow {
	flex: none;
	width: 1em;
	height: auto;
	fill: currentColor;
}

.cn-backlink a:hover,
.cn-backlink a:focus {
	color: var(--cn-muted);
	text-decoration: none;
	animation-name: cn-bob-float, cn-bob;
	animation-duration: 0.3s, 1.5s;
	animation-delay: 0s, 0.3s;
	animation-timing-function: ease-out, ease-in-out;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards;
	animation-direction: normal, alternate;
}

@keyframes cn-bob-float { 100% { transform: translateY(-8px); } }

@keyframes cn-bob {
	0%   { transform: translateY(-8px); }
	50%  { transform: translateY(-4px); }
	100% { transform: translateY(-8px); }
}

/* The homepage button bobs regardless; no reason to carry that over. */
@media (prefers-reduced-motion: reduce) {
	.cn-backlink a:hover,
	.cn-backlink a:focus { animation: none; }
}

h1 {
	margin: 0 0 40px;
	font-family: var(--cn-body);
	font-weight: 400;
	font-size: 36px;
	line-height: 36px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cn-heading);
}

h2 {
	margin: 1.8em 0 1.2em;
	font-family: var(--cn-body);
	font-weight: 400;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 1px;
	/*font-variant: small-caps;*/
	text-transform: uppercase;
	color: var(--cn-heading);
}

h3 {
	margin: 1.6em 0 0.5em;
	font-family: var(--cn-body);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	color: var(--cn-heading);
}

p  { margin: 0 0 1.4em; }
ul { margin: 0 0 1.4em; padding-left: 1.4em; }

/* --------------------------------------------------------------------------
   The concert being purchased

   Was an inline-styled <blockquote>; the inline font sizes were in points and
   came out smaller than body copy, so they are gone and this carries it.
   -------------------------------------------------------------------------- */

.cn-concert {
	margin: 0 0 2em;
	/*
	padding: 20px 24px;
	background: var(--cn-surface);
	border-left: 3px solid var(--cn-gold);
	*/
}

.cn-concert__title {
	font-family: var(--cn-body);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.3;
	color: var(--cn-bright);
}

.cn-concert__when {
	margin-top: 6px;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cn-muted);
}

.cn-concert__sub, .cn-concert__where { color: var(--cn-text); }

/* --------------------------------------------------------------------------
   Notices

   .err-msg was a pink box on white (#FFF7F7 on #CC3366), which on a black
   page reads as a rendering fault. Same job, dark treatment.
   -------------------------------------------------------------------------- */

.cn-notice, .err-msg {
	color: var(--cn-text);
	font-size: 16px;
	line-height: 1.6;
} 

div.cn-notice,
.err-msg {
	margin: 0 0 1em;
	padding: 14px 20px;
	background: var(--cn-surface);
	border: 0;
	border-left: 3px solid;
}

.err-msg {
	border-color: var(--cn-error);
}

div.cn-notice {
	border-color: var(--cn-gold);
}

.cn-notice b, .err-msg {
	color: var(--cn-error);
}

.cn-notice p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Forms

   Only presentation changes. Every field name, index and hidden input in the
   templates is untouched.
   -------------------------------------------------------------------------- */

form { margin: 0; }

select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
	font-family: var(--cn-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--cn-text);
	background: var(--cn-surface);
	border: 1px solid var(--cn-line);
	border-radius: 2px;
	padding: 9px 10px;
	max-width: 100%;
}

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
	border-color: var(--cn-gold);
	outline: none;
}

/* Two ranks, read off the element rather than off a class the templates would
   have to carry -- the markup already separates them. Every <input
   type="submit"> and every <a class="button"> is the thing the page is asking
   you to do; every <input type="button"> is the way back out of it ("Go Back"
   on the confirm step, "Cancel" in the newsletter form).

   Primary takes the 2026 site's own button, measured off the Send button on
   /contact/: gold plate, white label, inverting to a white plate with a black
   label on hover. Theme options paint the plate (.wpcf7-submit is in the
   background-color: rgb(140,121,86) group of ?load=custom-style.css); the
   inversion is Elementor widget 21938d0 on page 29.

   That button's pill is deliberately NOT copied. border-radius:100px is set on
   that one widget and nowhere in the theme, so it is a local flourish rather
   than the site's button shape -- as is its width:27%.

   Secondary has no counterpart on the 2026 site. It keeps the outline the
   whole ticket host used to wear and follows the same rule primary does:
   hover brings white forward. */

/* The padding and line-height are the 2026 .cn-button's, which puts every
   button on both hosts at the same 46px. Without an explicit line-height the
   two ranks here do not even agree with each other: an <input> keeps the UA's
   `normal` and lands near 47px, while an <a class="button"> inherits the
   34px body line-height and stands 64px tall. */
input[type="submit"],
input[type="button"],
.button {
	font-family: var(--cn-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	border: 1px solid var(--cn-gold);
	border-radius: 2px;
	padding: 12px 28px;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* a:visited is (0,1,1) and outranks a bare .button (0,1,0), so a Show/Print
   link the buyer had already followed came back painted in link-gold. Every
   rule below that colours an anchor button carries :visited with it. */
a.button,
a.button:visited {
	display: inline-block;
	margin: 10px 0;
	text-decoration: none;
}

/* Primary */
input[type="submit"],
a.button,
a.button:visited {
	background: var(--cn-gold);
	border-color: var(--cn-gold);
	color: var(--cn-bright);
}

/* Secondary */
input[type="button"] {
	background: var(--cn-bg);
	color: var(--cn-muted);
}

/* Hover. Primary inverts outright, as /contact/ does. Secondary brightens its
   outline and label instead of filling, so that a hovered "Go Back" never
   looks like the resting "Continue to Payment" sitting beside it.

   The page's own focus ring is left alone: :focus-visible draws it at
   outline-offset 2px, which puts gold on the black page rather than on either
   plate, so it survives the inversion. */
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
a.button:hover,
a.button:focus-visible {
	background: var(--cn-bright);
	border-color: var(--cn-bright);
	color: var(--cn-bg);
	text-decoration: none;
}

input[type="button"]:hover,
input[type="button"]:focus-visible {
	border-color: var(--cn-bright);
	color: var(--cn-bright);
}

.cn-field { margin: 24px 0; }
.cn-field label { display: block; margin-bottom: 6px; color: var(--cn-muted); }
.cn-hint { font-size: 15px; color: var(--cn-heading); }

/* Was an 8x10 red asterisk GIF. */
.cn-req { color: var(--cn-error); font-weight: 700; }

.cn-form-actions { margin-top: 28px; text-align: left; }

/* The ticket picker. Legacy <table> layout, restyled as rows. */
.cn-tickets {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 8px;
	padding: 20px 24px;
	background: var(--cn-surface);
	border-left: 3px solid var(--cn-gold);
}

.cn-tickets td {
	padding: 14px 8px;
	border-bottom: 1px solid var(--cn-line);
	vertical-align: middle;
}

.cn-tickets td:first-child { padding-left: 24px; }

.cn-tickets tr:last-child td { border-bottom: 0; }

.cn-tickets__qty   { width: 200px; font-weight: 700; }
.cn-tickets__price { width: 120px; text-align: left; white-space: nowrap; }

/* The order summary on the confirm step. */
table.table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	color: var(--cn-text);
	text-align: left;
	margin: 0 0 2em;
}

table.table th {
	padding: 10px;
	background: var(--cn-surface);
	color: var(--cn-muted);
	font-family: var(--cn-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
}

table.table td {
	padding: 10px;
	font-size: 16px;
	border-bottom: 1px solid var(--cn-line);
}

/* Legacy painted a grey band on every row and another on hover. */
table.table tr,
table.table tr:hover { background: transparent; }

/* --------------------------------------------------------------------------
   Legacy utility classes

   Previously supplied by base.css / CMApp.css, which are no longer imported.
   Same meanings, 2026 palette.
   -------------------------------------------------------------------------- */

.lg { font-size: 1.125em; }
.sm { font-size: 0.875em; }
.b, .bold { font-weight: 700; }
.red { color: var(--cn-error); }
.grn { color: #8BA84F; }
.smallcaps { font-variant: small-caps; }
.clear { clear: both; }

/* Was a fixed 650px, which overflows inside the 41em measure. */
p.content { width: auto; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.cn-footer { padding: 100px 0 50px; }

.cn-colophon {
	margin: 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--cn-heading);
}

/* --------------------------------------------------------------------------
   Narrow screens

   The wrapper previously shipped viewport initial-scale=0.5, so none of this
   applied; it now declares width=device-width.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	body { font-size: 17px; line-height: 30px; }

	.cn-header { padding: 20px 0; }
	.cn-header__brand { gap: 14px; }
	.cn-header__logo { width: 56px; height: 56px; }
	.cn-header__wordmark { font-size: 22px; }

	.cn-main { margin-top: 18px; }

	h1 { font-size: 26px; line-height: 30px; margin-bottom: 28px; }
	h2 { font-size: 22px; line-height: 26px; }

	.cn-concert { padding: 16px 18px; }
	.cn-concert__title { font-size: 20px; }

	.cn-tickets td { padding: 12px 4px; }
	.cn-tickets__qty { width: 80px; }
	.cn-tickets__price { width: 80px; }

	input[type="submit"],
	input[type="button"],
	.button { width: 100%; padding: 16px 20px; text-align: center; }

	.cn-form-actions { text-align: left; }

	.cn-footer { padding: 60px 0 36px; }
	.cn-colophon { font-size: 12px; letter-spacing: 3px; }

	/* The sibling templates hard-code widths inline (width:500px, width:585px,
	   table width="600"), which would otherwise scroll the page sideways. */
	.cn-entry [style*="width"] { width: auto !important; max-width: 100% !important; }
	.cn-entry table[width]     { width: auto; max-width: 100%; }
}