/* ==========================================================================
   HONCW – layout tokens and page shell
   Container standard (Sally, 2026-10-29): 1200px content width, the Wedding Guide pages are the reference.
   ========================================================================== */

:root {
	--honcw-container: 1200px;   /* content width */
	--honcw-gutter: 20px;        /* side padding at every width (16px+ on phones) */
	--honcw-shell: calc(var(--honcw-container) + 2 * var(--honcw-gutter)); /* 1240px, same as Astra's container */
	--honcw-header-breakpoint: 1170px; /* mobile menu switch; set in the Elementor kit as "Tablet Extra" */
}

/* Base typography (2.0.7). Hello Elementor's default is the system font stack (Helvetica on a Mac); Astra's was Mulish.
   Anything without its own font setting now uses the brand tokens from the Elementor kit: Nunito for text,
   Josefin Sans for headings. Elementor classes and widgets still set their own fonts on top of this. */
body {
	font-family: var(--honcw-font-body, "Nunito"), sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--honcw-font-heading, "Josefin Sans"), sans-serif;
}
button, input, select, textarea {
	font-family: inherit;
}

/* Utility for Elementor containers and custom markup: centered, 1200px, with gutters. */
.honcw-container {
	width: 100%;
	max-width: var(--honcw-shell);
	margin-inline: auto;
	padding-inline: var(--honcw-gutter);
	box-sizing: border-box;
}

/* A 1200px block inset by the gutters. Same values as the Elementor global class "honcw-band" (kit 57143).
   Defined here too because Elementor does not load global-class CSS when a template is embedded by
   shortcode (the Directorist listing pages embed templates 134917/134933 that way). */
/* The second selector outranks Elementor's own container rule ([data-elementor-id] > .e-con) on embedded templates. */
.honcw-band,
.elementor .e-con.honcw-band {
	width: calc(100% - 2 * var(--honcw-gutter));
	max-width: var(--honcw-container);
	margin-inline: auto;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	.honcw-band,
	.elementor .e-con.honcw-band {
		width: calc(100% - 32px);
	}
}

/* --------------------------------------------------------------------------
   Astra compatibility shell (temporary, phase A)
   Under Astra every template sat inside .ast-container (max 1240px, 20px padding), which is where
   the guide pages' 1200px width came from. Hello Elementor has no wrapper, so these rules recreate it
   for the same templates. Remove each rule once that template uses .honcw-container (phase C).
   Full width under Astra, so left full width here:
   - the homepage and page 134638 (the old home snippet released .ast-container on both)
   - listing pages using templates 134917/134933 (listing-template-styles.php released it there)
   -------------------------------------------------------------------------- */
/* Only the outermost Elementor document gets the shell: templates embedded inside another
   Elementor document or inside The Events Calendar's page template keep their own widths.
   A document whose top-level elements use the Elementor global classes honcw-band (a 1200px block inset
   by the gutters) or honcw-container (full-width wrapper with 1200px content) is already converted, so the
   shell turns itself off for it. Converted so far: guide 134598, post 134800, blog archive 135367, search 135371, event 134986, listings 134917/134933. */
.elementor-location-single:not(:has(.elementor-134917, .elementor-134933)):not(.elementor *):not(#tribe-events-pg-template *):not(:has(> .honcw-band, > .honcw-container)),
.elementor-location-archive:not(.elementor *):not(#tribe-events-pg-template *):not(:has(> .honcw-band, > .honcw-container)),
body:not(.home):not(.page-id-134638) .elementor[data-elementor-type="wp-page"]:not(:has(.elementor-134917, .elementor-134933)):not(.elementor *):not(#tribe-events-pg-template *):not(:has(> .honcw-band, > .honcw-container)),
body:not(.home):not(.page-id-134638) .elementor[data-elementor-type="wp-post"]:not(.elementor *):not(#tribe-events-pg-template *):not(:has(> .honcw-band, > .honcw-container)) {
	max-width: var(--honcw-shell);
	margin-inline: auto;
	padding-inline: var(--honcw-gutter);
	box-sizing: border-box;
}

/* Guide pages: Astra added 60px above the hero; the site standard is now 24px (approved 2026-10-29). */
.single-wedding_guide .elementor-location-single {
	padding-top: 24px;
}

/* Single events: The Events Calendar wraps the page in #tribe-events-pg-template (max 1048px, 40/20px padding),
   which held the Elementor event template to 960px. When an Elementor template is inside, let it set the width
   (its sections use honcw-band, 1200px) and the spacing, like every other template. */
#tribe-events-pg-template:has(> .elementor) {
	max-width: none;
	padding: 0;
}

/* Homepage (2.0.9, Sally 2026-10-30): a little wider than the 1200 standard, so the hero headline lines up with the
   logo in the header. The hero text sits 80px inside its section (24px section padding + 56px card padding), so the
   page wrapper is 80px wider on each side: 1400px. Aligned at every screen 1400px and up; narrower screens unchanged. */
:root {
	--honcw-home-inset: 80px;
}
body.home .site-main,
body.page-id-134638 .site-main {
	max-width: calc(var(--honcw-shell) + 2 * var(--honcw-home-inset));
}

/* Hello's default page wrapper for anything not built with Elementor (plugin pages, events, 404). */
.site-main:not(.elementor) {
	max-width: var(--honcw-shell);
	margin-inline: auto;
	padding-inline: var(--honcw-gutter);
	box-sizing: border-box;
}

/* No horizontal scroll from anything that overflows its column. */
html,
body {
	overflow-x: clip;
}

img,
video,
iframe {
	max-width: 100%;
}