/*
Theme Name: Dopamine Bricks Child
Description: Child theme for the Dopamine website. Built on Bricks.
Author: AIO Media
Template: bricks
Version: 0.3.0
Text Domain: dopamine-bricks-child
*/

/*
 * Bricks layout elements default to flex columns. The Dopamine brand CSS (assets/site.css)
 * was written for plain HTML: block flow by default, and flex rows where it sets display:flex.
 * Restore those defaults here. site.css loads later at equal specificity, so its own
 * display and flex-direction rules still win where they are written.
 */
.brxe-container,
.brxe-block {
	display: block;
	flex-direction: row;
	width: auto;
	margin-inline: 0;
}

/*
 * Grid tracks: site.css uses 1fr tracks, which Chromium sizes from the images' natural
 * widths (1024px art) under Bricks. minmax(0, ...) keeps the same proportions and the
 * same breakpoints as the theme (single column at <=800px; world cards at 3 columns above 520px).
 */
@media (min-width: 801px) {
	.story .story-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr); }
	section.feeling { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 521px) {
	.world .world-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Its children are all absolutely positioned, so auto width collapses to 0 in the grid. */
.feeling-art { width: 100%; }

/* The brand book's Ink Black. site.css loads later, so this needs the higher specificity. */
html:root { --ink: #000; }

/* Inner pages. */
.standard-page .page-intro { max-width: 620px; font-size: 16px; }
.standard-page .display { margin-top: 18px; }
.standard-page .pill { margin-top: 12px; }
.entry-content { font-size: 15px; }
.entry-content h2 { font-size: 22px; font-weight: 900; letter-spacing: -0.04em; }
.footer-bottom .brxe-text-link { text-decoration: underline; }

/* Contact form. */
.dopamine-form { max-width: 760px; margin-top: 36px; }
.dopamine-form label { font-size: 12px; font-weight: 700; }
.dopamine-form input,
.dopamine-form textarea {
	width: 100%;
	padding: 15px 16px;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--ink);
	border-radius: 2px;
}
.dopamine-form textarea { min-height: 170px; }
.dopamine-form .form-group:first-child { padding-right: 12px; }
.dopamine-form .bricks-button {
	min-height: 56px;
	padding: 18px 26px;
	font-size: 12px;
	font-weight: 700;
	color: var(--cream);
	background: var(--ink);
	border: 0;
	border-radius: 32px;
}
.dopamine-form .bricks-button:hover { background: #37352a; }

/* Published catalog on /products/ (rendered by inc/catalog.php). */
.standard-page .brxe-shortcode { margin-top: 44px; }

/* 21+ gate: the same markup ships to everyone, so hiding it is purely a CSS state. */
.dopamine-gate {
	position: fixed;
	z-index: 1000;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
	overflow-y: auto;
	background: radial-gradient(ellipse at 85% 60%, var(--yellow) 0%, rgba(245, 232, 100, 0) 58%), var(--cream);
}
[data-dopamine-age="ok"] .dopamine-gate { display: none; }
.dopamine-gate-lock { overflow: hidden; }
.dopamine-gate__card { width: min(100%, 560px); text-align: center; }
.dopamine-gate__logo { width: 230px; margin: 0 auto 38px; }
.dopamine-gate h2 { font-size: clamp(38px, 8vw, 62px); }
.dopamine-gate p { margin-top: 18px; font-size: 14px; }
.dopamine-gate__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.dopamine-gate__actions .pill { justify-content: center; min-width: 170px; }
.dopamine-gate__no { color: var(--ink); border: 1px solid var(--ink); }
.dopamine-gate__fine { font-size: 12px; }
.dopamine-gate__fine a { text-decoration: underline; }