/**
 * Mike Tetrault Music — brand stylesheet.
 * Loaded on the front end and inside the block editor so previews match.
 * Values mirror the design system's tokens/ files. Do not invent new ones here.
 */

:root{
	--mtm-deep-ocean:#1B3F63;
	--mtm-ocean-deep:#0D2136;
	--mtm-ocean-600:#27547F;
	--mtm-ocean-800:#132F4B;
	--mtm-ocean-300:#8AA8C4;
	--mtm-aqua:#2A9D8F;
	--mtm-aqua-dark:#22857A;
	--mtm-aqua-800:#1B6D63;
	--mtm-aqua-tint:#DFF1EE;
	--mtm-slate:#778899;
	--mtm-slate-600:#5C6B7A;
	--mtm-cool-sand:#EFEADE;
	--mtm-sand-light:#F5F2EA;
	--mtm-sand-300:#E1DACA;
	--mtm-border:#CCC3AF;
	--mtm-radius-control:4px;
	--mtm-radius-card:8px;
	--mtm-shadow-card:0 1px 3px rgba(13,33,54,.08),0 1px 2px rgba(13,33,54,.04);
	--mtm-shadow-card-hover:0 4px 12px rgba(13,33,54,.10);
	--mtm-ease:cubic-bezier(.2,.6,.25,1)
}

/* Block style: MT Eyebrow — the brand's signature section opener. */
.wp-block-heading.is-style-mtm-eyebrow{
	display:inline-block;
	margin-bottom:16px;
	padding-bottom:8px;
	border-bottom:2px solid var(--mtm-aqua);
	color:var(--mtm-aqua-dark);
	font-family:Montserrat,"Proxima Nova","Helvetica Neue",Arial,sans-serif;
	font-size:12px;
	font-weight:600;
	letter-spacing:.22em;
	line-height:1.4;
	text-transform:uppercase
}
.has-deep-ocean-background-color .wp-block-heading.is-style-mtm-eyebrow,
.has-ocean-deep-background-color .wp-block-heading.is-style-mtm-eyebrow,
.is-style-mtm-band-ocean .wp-block-heading.is-style-mtm-eyebrow{color:#F5F2EA}

/* Block style: MT Card — white surface, hairline, ocean-tinted soft shadow. Never a coloured left border. */
.wp-block-group.is-style-mtm-card{
	background:#fff;
	border:1px solid var(--mtm-sand-300);
	border-radius:var(--mtm-radius-card);
	box-shadow:var(--mtm-shadow-card);
	padding:32px
}
.wp-block-group.is-style-mtm-card:hover{box-shadow:var(--mtm-shadow-card-hover)}

/* Block style: MT Deep Ocean Band. */
.wp-block-group.is-style-mtm-band-ocean{
	background:var(--mtm-deep-ocean);
	color:var(--mtm-cool-sand)
}
.wp-block-group.is-style-mtm-band-ocean h1,
.wp-block-group.is-style-mtm-band-ocean h2,
.wp-block-group.is-style-mtm-band-ocean h3,
.wp-block-group.is-style-mtm-band-ocean h4{color:#fff}

/* Venmo tip buttons — [mtm_venmo_tip]. Minimum 62px tall: used one-handed, in the dark. */
.mtm-tip{
	display:flex;
	align-items:center;
	gap:16px;
	box-sizing:border-box;
	width:100%;
	min-height:62px;
	margin-bottom:12px;
	padding:0 20px;
	border:1px solid transparent;
	border-radius:var(--mtm-radius-control);
	font-family:Montserrat,"Proxima Nova","Helvetica Neue",Arial,sans-serif;
	text-decoration:none;
	transition:background-color 120ms var(--mtm-ease),border-color 120ms var(--mtm-ease)
}
.mtm-tip__label{
	flex:1;
	font-size:15px;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase
}
.mtm-tip__amount{font-size:17px;font-weight:700}
.mtm-tip--primary{background:var(--mtm-deep-ocean);color:#fff}
.mtm-tip--primary:hover{background:var(--mtm-ocean-800);color:#fff}
.mtm-tip--accent{background:var(--mtm-aqua);color:#fff}
.mtm-tip--accent:hover{background:var(--mtm-aqua-dark);color:#fff}
.mtm-tip--outline{background:transparent;border-color:var(--mtm-deep-ocean);color:var(--mtm-deep-ocean)}
.mtm-tip--outline:hover{background:#D5E1EC;color:var(--mtm-deep-ocean)}

/* Links. Aqua is an accent only — never a large fill. */
.mtm-brand a:not(.wp-element-button):not(.mtm-tip){color:var(--mtm-aqua-dark)}
.mtm-brand a:not(.wp-element-button):not(.mtm-tip):hover{color:var(--mtm-aqua-800)}

/* Show and track rows — 1px sand hairlines, not cards. */
.mtm-row{
	display:grid;
	grid-template-columns:130px 1fr auto;
	gap:24px;
	align-items:center;
	padding:16px 12px;
	border-bottom:1px solid var(--mtm-sand-300);
	transition:background-color 120ms var(--mtm-ease)
}
.mtm-row:hover{background:var(--mtm-sand-light)}
.mtm-row__date{
	font-family:Montserrat,"Proxima Nova","Helvetica Neue",Arial,sans-serif;
	font-size:13px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--mtm-ocean-deep)
}

@media (max-width:781px){
	.mtm-row{grid-template-columns:1fr;gap:8px}
}