/*
Theme Name: Yesterdays (Hello child)
Template: hello-elementor
Description: Yesterdays Photo child theme for Hello Elementor. Replaces what JupiterX used to provide.
Author: Pixel Group
Version: 1.0.0
Text Domain: yesterdays-hello-child
*/

/*
 * Base spacing as JupiterX (Bootstrap reboot) had it, measured on the live site: headings 0 / .5rem,
 * paragraphs 0 / 1rem. Hello's reset uses .5rem / 1rem for headings and .9rem for paragraphs.
 */
h1, h2, h3, h4, h5, h6 {
	margin-block-start: 0;
	margin-block-end: .5rem;
}

p {
	margin-block-end: 1rem;
}

/*
 * JupiterX's default page/post template wrapped content in .container > .row > .jupiterx-primary, a net 20px inset
 * each side at every width, with 24px below. Hello gives Elementor pages none. Full-width templates had no inset.
 */
.page-template-default .site-main > .page-content,
.post-template-default .site-main > .page-content {
	padding-inline: 20px;
}

.page-template-default .site-main,
.post-template-default .site-main {
	padding-bottom: 24px;
}

/*
 * Stretched sections: Elementor's script widens them to the full window after load, which moved them sideways out of
 * the 20px inset above (CLS on Photography and Slide Scanning). Full width from the first paint instead; the script's
 * inline width and left are overridden, so it has nothing left to move.
 */
.page-template-default .site-main > .page-content .elementor-section.elementor-section-stretched,
.post-template-default .site-main > .page-content .elementor-section.elementor-section-stretched {
	width: auto !important;
	left: 0 !important;
	margin-inline: -20px;
}

/*
 * Tables in post content: Hello's reset sets .9em text, zebra rows, a hover tint and top-aligned headers.
 * Live (JupiterX) measured 16px/24px, no row backgrounds, headers vertically centred.
 */
table {
	font-size: inherit;
}

table td, table th {
	line-height: inherit;
}

table th {
	vertical-align: middle;
}

table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th,
table tbody tr:hover > td, table tbody tr:hover > th {
	background-color: transparent;
}

/*
 * WordPress Categories and Tag Cloud widgets in the single post template. JupiterX hid their widget titles
 * (the template has its own headings), listed categories without bullets and drew tags as Bootstrap light buttons.
 * Values measured on live.
 */
.elementor-widget-wp-widget-categories h5,
.elementor-widget-wp-widget-tag_cloud h5 {
	display: none;
}

.elementor-widget-wp-widget-categories ul {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	font-size: 14px;
}

.elementor-widget-wp-widget-categories li {
	margin-bottom: .6em;
}

.elementor-widget-wp-widget-tag_cloud .tagcloud {
	font-size: 14px;
	margin-bottom: 24px;
}

.elementor-widget-wp-widget-tag_cloud .tag-cloud-link {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: .3em;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	text-decoration: none;
	color: #121217;
	background-color: #f8f9fa;
	border: 1px solid #f8f9fa;
	border-radius: 4px;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.elementor-widget-wp-widget-tag_cloud .tag-cloud-link:hover {
	color: #121217;
	background-color: #e2e6ea;
	border-color: #dae0e5;
}

/* Hello paints buttons #c36 on hover/focus; JupiterX did not. Leave colours to the widgets. */
[type=button]:focus, [type=button]:hover,
[type=submit]:focus, [type=submit]:hover,
button:focus, button:hover {
	background-color: transparent;
	color: inherit;
}

/* Sticky header on every page (was JupiterX "jupiterx_header_behavior = sticky"). */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

/*
 * Header overlap (was JupiterX "header overlap" on 12 pages): the hero starts at the top of the page
 * behind the header. A negative bottom margin equal to the header height pulls the content up while
 * the header stays sticky. Heights measured on the live site: 199px desktop, 157px tablet/laptop, 113px mobile.
 */
.yesterdays-header-overlap .elementor-location-header {
	margin-bottom: -199px;
}

@media (max-width: 1024px) {
	.yesterdays-header-overlap .elementor-location-header {
		margin-bottom: -157px;
	}
}

@media (max-width: 767px) {
	.yesterdays-header-overlap .elementor-location-header {
		margin-bottom: -113px;
	}
}

/*
 * Before/after comparison (.yp-compare), used wherever a JetElements comparison stood (that plugin is not
 * installed). A range input drives a clip; works with mouse, touch and arrow keys. Behaviour in yp-compare.js.
 */
.yp-compare { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #EBE5DD; --pos: 50%; }
.yp-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.yp-compare .yp-compare__after { clip-path: inset(0 0 0 var(--pos)); }
.yp-compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #FCFAF6; pointer-events: none; }
.yp-compare__handle { position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #FCFAF6; box-shadow: 0 2px 6px rgba(26, 21, 18, .25); display: grid; place-items: center; color: #1A1512; pointer-events: none; }
.yp-compare__tag { position: absolute; top: 16px; padding: 4px 8px; font-size: 13px; font-weight: 500; line-height: 1.4; background: rgba(26, 21, 18, .78); color: #FCFAF6; border-radius: 2px; pointer-events: none; }
.yp-compare__tag--before { left: 16px; }
.yp-compare__tag--after { right: 16px; }
.yp-compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.yp-compare:has(input:focus-visible) .yp-compare__handle { outline: 2px solid #1A1512; outline-offset: 3px; }


/*
 * Archive table components, shared by every rebuilt page (built by phase5/phase5-lib.php).
 * Tokens: ink #1A1512, paper #FCFAF6, sunken #F5F2EB, border #D9D3CB, tertiary #69625D, accent ink #875814.
 */
.yp-print { background: #FCFAF6; padding: 16px; box-shadow: 0 1px 2px rgba(41,33,26,.10), 0 10px 28px -6px rgba(41,33,26,.18); }
.yp-print img { width: 100%; display: block; }
.yp-print--crop img { aspect-ratio: 4 / 3; object-fit: cover; }
.yp-facts { border-top: 1px solid rgba(252,250,246,.25); }
.yp-facts strong { display: block; font-size: 20px; font-weight: 500; color: #FCFAF6; }
.yp-step { border-top: 2px solid #1A1512; padding-top: 24px; }
.yp-price { background: #FCFAF6; border: 1px solid #D9D3CB; border-radius: 6px; padding: 32px; }
.yp-ticks--2 .elementor-icon-list-items { columns: 2; column-gap: 32px; }
.yp-ticks--2 .elementor-icon-list-item { break-inside: avoid; }
.yp-ticks a { min-height: 32px; }
.yp-link .elementor-button { padding-left: 0; padding-right: 0; min-height: 44px; }
.yp-link .elementor-button:hover .elementor-button-text { text-decoration: underline; text-underline-offset: .2em; }
.yp-medal { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #1A1512; border: 1px solid #1A1512; box-shadow: inset 0 0 0 4px #FCFAF6, inset 0 0 0 5px #875814; background: #FCFAF6; }
.yp-medal svg { width: 40px; height: 40px; }
.yp-medal .yp-g, .yp-icon-sm .yp-g { stroke: #875814; }
.yp-numero .elementor-heading-title { font-style: italic; }
.yp-contact p { display: flex; gap: 16px; align-items: flex-start; }
.yp-contact p + p { margin-top: 16px; }
.yp-contact p > span:not(.yp-icon-sm) { display: block; }
.yp-icon-sm { flex: none; width: 32px; height: 32px; color: #1A1512; }
.yp-icon-sm svg { width: 32px; height: 32px; }
.yp-contact strong { display: block; font-size: 13px; font-weight: 500; color: #69625D; }
.yp-contact a { color: #1A1512; }
.yp-stamp { margin-top: 16px; }
.yp-measure { max-width: 65ch; }
.yp-journal .elementor-posts-container { border-top: 1px solid #D9D3CB; }
.yp-journal .elementor-post { border-bottom: 1px solid #D9D3CB; }
.yp-journal .elementor-post__text { display: grid; grid-template-columns: 9rem 1fr auto; gap: 24px; align-items: baseline; padding: 24px 0; }
.yp-journal .elementor-post__meta-data { order: -1; margin: 0; }
.yp-journal .elementor-post__title { margin: 0; }
.yp-journal .elementor-post__read-more { margin: 0; }
.yp-journal .elementor-post__title a:hover { text-decoration: underline; text-underline-offset: .2em; }
.elementor-button:focus-visible, a:focus-visible { outline: 2px solid #1A1512; outline-offset: 3px; }
.yp-hero a:focus-visible, .yp-hero .elementor-button:focus-visible { outline-color: #F3C672; }
@media (max-width: 1024px) {
	.yp-ticks--2 .elementor-icon-list-items { columns: 1; }
}
@media (max-width: 767px) {
	.yp-journal .elementor-post__text { grid-template-columns: 1fr; gap: 4px; }
	.yp-journal .elementor-post__read-more { display: none; }
	.yp-price { padding: 24px; }
}
.yp-card .elementor-heading-title a { color: inherit; }
.yp-card .elementor-heading-title a:hover { text-decoration: underline; text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) {
	.yp-link .elementor-button, .yp-card * { transition-duration: 0ms !important; }
}
/* Readable measure for text runs on converted pages (phase5-auto.php). */
.e-con.yp-narrow { max-width: 760px; width: 100%; margin-inline: auto; }

/*
 * Type scale (phase5-typescale.php): six steps, Playfair Display 500 for display/title, Sofia Pro 400/500 for the rest.
 * display 61/49/39  title 39/39/31  heading 25/22/20  lead 20/20/18  body 16  small 13.
 * Rules below cover what widget settings cannot: links inside headings, card titles of any heading level, emphasis.
 */
body .elementor-heading-title a, body .elementor-image-box-title a, body .elementor-icon-box-title a, body .elementor-widget-posts .elementor-post__title a { font: inherit; }
body .yp-card .elementor-heading-title { font-family: sofia-pro, sans-serif; font-size: 25px; font-weight: 500; line-height: 1.3; }
body .yp-numero .elementor-heading-title { font-family: "Playfair Display", serif; } /* The one serif exception: italic numerals. */
strong, b { font-weight: 500; }
body .elementor-nav-menu .elementor-item { text-transform: capitalize; } /* Menu labels are content; keep their case consistent. */

/* Elementor widget defaults (not stored per widget) brought onto the scale. */
body .elementor-widget-posts .elementor-post__title, body .elementor-widget-posts .elementor-post__title a { font-family: sofia-pro, sans-serif !important; font-size: 25px !important; font-weight: 500 !important; line-height: 1.3 !important; } /* Posts skin sets its own title size. */
body .elementor-widget-posts .elementor-post__excerpt p, body .elementor-widget-posts .elementor-post__meta-data { font-size: 16px; font-weight: 400; line-height: 1.6; }
body .elementor-widget-posts .elementor-post__badge, body .elementor-widget-posts .elementor-post__read-more { font-size: 13px; font-weight: 500; }
body .elementor-widget-divider .elementor-divider__text { font-size: 13px; font-weight: 500; }
body .elementor-widget-theme-post-excerpt .elementor-widget-container { font-size: 20px; font-weight: 400; line-height: 1.5; }
body .elementor-widget-icon-box .elementor-icon-box-description, body .elementor-widget-image-box .elementor-image-box-description { font-size: 16px; font-weight: 400; line-height: 1.6; }
body .elementor-price-table .elementor-price-table__heading { font-size: 25px; font-weight: 500; line-height: 1.3; }
body .elementor-price-table .elementor-price-table__period { font-family: sofia-pro, sans-serif; }
body .elementor-price-table .elementor-price-table__subheading, body .elementor-price-table .elementor-price-table__period, body .elementor-price-table .elementor-price-table__additional_info { font-size: 13px; font-weight: 400; line-height: 1.4; }
body .elementor-price-table .elementor-price-table__price { font-family: "Playfair Display", serif; font-weight: 500; }
body .elementor-price-table .elementor-price-table__integer-part { font-size: 39px; font-weight: 500; line-height: 1.2; }
/* Currency and original price carry Elementor's own em sizing and an excluded-typography class; pinned here. */
body .elementor-price-table .elementor-price-table__currency, body .elementor-price-table .elementor-price-table__fractional-part { font-size: 20px !important; font-weight: 500; }
body .elementor-price-table .elementor-price-table__original-price { font-family: sofia-pro, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; }
body .elementor-price-table .elementor-price-table__features-list { font-size: 16px; font-weight: 400; line-height: 1.6; }
body .elementor-price-table .elementor-ribbon-inner { font-size: 13px; font-weight: 500; }
body .elementor-price-table .elementor-price-table__button { font-size: 16px; font-weight: 500; }
@media (max-width: 1024px) { body .yp-card .elementor-heading-title, body .elementor-price-table .elementor-price-table__heading { font-size: 22px; } body .elementor-widget-posts .elementor-post__title, body .elementor-widget-posts .elementor-post__title a { font-size: 22px !important; } }
@media (max-width: 767px) {
	body .yp-card .elementor-heading-title, body .elementor-price-table .elementor-price-table__heading { font-size: 20px; }
	body .elementor-widget-posts .elementor-post__title, body .elementor-widget-posts .elementor-post__title a { font-size: 20px !important; }
	body .elementor-price-table .elementor-price-table__integer-part { font-size: 31px; }
	body .elementor-widget-theme-post-excerpt .elementor-widget-container { font-size: 18px; }
}

/*
 * Mobile layout fixes, 2 Nov 2026. Elementor 4.3 sets every container to flex-wrap: wrap below 768px
 * (.e-con { --flex-wrap-mobile: wrap }). In a column container that collapses widgets to zero height, so images
 * spill out of .yp-print cards and captions sit on top of them. No row on the site wraps on mobile (all pages
 * checked), so wrapping is off; add .yp-wrap to a container to opt back in.
 * The Imprint trade mark list carries pasted fixed widths, and the Complianz cookie table grid overflows; both
 * scrolled sideways on phones.
 */
@media (max-width: 767px) {
	.e-con.e-flex:not(.yp-wrap), .e-con.e-flex:not(.yp-wrap) > .e-con-inner { flex-wrap: nowrap !important; }
	dl > dt[style*="width"], dl > dd[style*="width"] { display: block !important; width: auto !important; }
	.cmplz-document details > div { grid-template-columns: minmax(0, 1fr) !important; }
	.cmplz-document details > div > * { min-width: 0; overflow-wrap: anywhere; }
}
/* The post template fixes the featured image height; crop instead of squashing. */
.elementor-widget-theme-post-featured-image img { object-fit: cover; }

/*
 * Body links, 3 Nov 2026. Links in text widgets and atomic paragraphs showed in body colour with no underline,
 * so readers could not tell them from plain text. Header and footer templates keep their own link styles.
 */
.elementor:not(.elementor-location-header):not(.elementor-location-footer) :is(.elementor-widget-text-editor, .e-paragraph-base) a:not(.elementor-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.elementor:not(.elementor-location-header):not(.elementor-location-footer) :is(.elementor-widget-text-editor, .e-paragraph-base) a:not(.elementor-button):hover {
	text-decoration-thickness: 2px;
}