/* ============================================================================
   BASE — containers, page surfaces, and site-wide odds and ends.
   ============================================================================ */


/* ============================================================
   THE ALIGNMENT SYSTEM

   The site has exactly two horizontal measures. Everything should use
   one of them; anything that invents a third is a bug.

     OUTER  (--evm-container-max, 1299px)
            The logo, the nav, page-wide sections, and every masthead
            title. This is the line the eye reads as "the edge of the
            site", so these must agree to the pixel.

     READING (1140px, Elementor's global Content Width)
            Body copy. Set in Elementor, not here: leave a section's
            Content Width blank and it inherits 1140. Do not override
            it per-section unless the content is genuinely full-width.

            1140 is Elementor's own default — Site Settings -> Layout ->
            Content Width is currently empty, so nothing sets it
            explicitly. Filling that field in changes the reading measure
            site-wide, which is the right place to tune it.

            (There is also a stale `elementor_container_width = 1100`
            row in the database from an older Elementor version. It is
            ignored. Don't be fooled by it.)

   The rule below is what makes OUTER actually line up. Three different
   containers hold content at the outer measure, and each arrived with
   its own padding — Bootstrap's ~12px on `.container`, a hand-set 20px
   on the post masthead, and zero on the header. That is why titles sat
   slightly right of the logo. Padding is now zeroed on all three so
   they share one left edge, and the gutter below 1340px is applied to
   all three together.

   If you add another outer-width container, add it to BOTH lists.
   ============================================================ */
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
	max-width: var(--evm-container-max) !important;
}

.header__container.header__controls.container,   /* logo + nav          */
.section-masthead__header.container,              /* page + portfolio titles */
.section-masthead .section-blog__container {      /* post titles         */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media screen and (max-width: 1340px) {
	.header__container.header__controls.container,
	.section-masthead__header.container,
	.section-masthead .section-blog__container {
		padding-left: 5% !important;
		padding-right: 5% !important;
	}
}


/* ============================================================
   PAGE MODES — dark vs light

   The site has two visual modes, currently selected by enumerating
   WordPress body classes. Every new page template has to be added to
   these lists by hand, which is why this feels brittle.

   PLANNED: replace all of this with a single `is-theme-dark` /
   `is-theme-light` body class set in functions.php, so new pages pick
   the right mode automatically. Until then, keep the lists in sync.
   ============================================================ */

/* Default: light content surface */
main.page-wrapper__content {
	background-color: var(--evm-surface-light) !important;
}

/* Home / landing page: dark */
body.home main.page-wrapper__content {
	background: var(--evm-surface-dark) !important;
}

/* Light pages: force the parent's dark sections light */
body.post-template-default.single.single-post .bg-dark-1,
body.post-template-default.single.single-post section.section.section-masthead,
body.post-template-default.single.single-post section.section.section-blog.section-content,
body.archive .bg-dark-1,
body.archive section.section.section-masthead,
body.archive section.section.section-blog.section-content,
.page-template-default.page section.section.section-masthead,
.page-template-default.page section.section.section-blog.section-content {
	background-color: var(--evm-surface-light) !important;
}

/* Post + archive inner panel */
.single-post .section-blog__inner.bg-white-1,
.archive .section-blog__inner.bg-white-1 {
	background: var(--evm-surface-light) !important;
}


/* ============================================================
   TYPOGRAPHY — site-wide
   ============================================================ */
.section-masthead__heading,
.section-content__content h2,
.section-content__content h3 {
	text-wrap: balance;
}

.widget-image-caption,
.wp-caption-text {
	font-size: 15px !important;
	color: var(--evm-ink-caption) !important;
	line-height: 1.5 !important;
}


/* ============================================================
   MAINTENANCE PLUGIN SCREEN
   'Vulf Sans' here comes from the arts-custom-fonts plugin — see 02-fonts.css.
   ============================================================ */
.maintenance h2.heading.font-center,
.maintenance .description,
.maintenance footer {
	font-family: 'Vulf Sans';
	font-style: normal;
}


/* ============================================================
   SCROLL-TO-TOP BUTTON
   Markup is echoed into wp_footer by functions.php; the fade in/out
   is handled by js/script.js.
   ============================================================ */
#topbutton {
	display: none;
	position: fixed;
	height: 40px;
	width: 40px;
	line-height: 40px;
	right: 30px;
	bottom: 30px;
	text-decoration: none;
	color: var(--evm-ink-inverse);
	text-align: center;
}

#topbutton .arrow {
	border: solid black;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
}

.home #topbutton .arrow {
	border: solid white;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
}

#topbutton .up {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}


/* ============================================================
   THIRD PARTY
   ============================================================ */

/* Keep the reCAPTCHA badge from floating over the content. */
.grecaptcha-badge {
	z-index: -1 !important;
}


/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media screen and (max-width: 1340px) {
	.elementor-section-boxed > .elementor-container {
		padding: 0 5% !important;
	}
}