/* ==========================================================================
   Pass The Sauce — Astra child theme
   Maps the look of the previous Julia theme onto Astra's markup.
   Tokens measured on passthesauce.net (September 2026):
     body      Roboto 300 17px / 1.5, colour #0a3256, background #fff
     headings  Oswald 300 uppercase, letter-spacing 0.06em, colour #0a3256
     nav       Oswald 500 16px uppercase, colour #07233b
     header    background #fdf9f5
     buttons   Oswald 500 17px uppercase, white on #07233b, square
   ========================================================================== */

:root {
	--pts-font-body: Roboto, "SF Pro Text", Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--pts-font-heading: Oswald, "SF Pro Text", Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--pts-color-text: #0a3256;
	--pts-color-heading: #0a3256;
	--pts-color-dark: #07233b;
	--pts-color-accent: #0f4c81;
	--pts-color-header-bg: #fdf9f5;
	--pts-color-border: #e5e5e5;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
	font-family: var(--pts-font-body);
}

body {
	font-weight: 300;
	color: var(--pts-color-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
	font-family: var(--pts-font-heading);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pts-color-heading);
}

h1, .h1 { font-weight: 700; }

a {
	color: var(--pts-color-dark);
}

a:hover,
a:focus {
	color: var(--pts-color-accent);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.ast-button,
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.wp-block-search__button {
	font-family: var(--pts-font-heading);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--pts-color-dark);
	border: 0;
	border-radius: 0;
}

.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	color: #fff;
	background-color: var(--pts-color-accent);
}

/* --------------------------------------------------------------------------
   Header (Astra header builder: above row = menu + search, primary = logo,
   below row = menu again, as on the previous theme)
   -------------------------------------------------------------------------- */
.ast-above-header-wrap,
.ast-primary-header-bar,
.ast-below-header-wrap,
.ast-mobile-header-wrap .ast-primary-header-bar {
	background-color: var(--pts-color-header-bg);
}

.ast-above-header-bar,
.ast-below-header-bar {
	border-bottom: 0;
}

.ast-builder-menu .main-header-menu > .menu-item > .menu-link,
.ast-builder-menu .main-header-menu .menu-item .menu-link,
.ast-header-break-point .ast-mobile-popup-content .menu-link {
	font-family: var(--pts-font-heading);
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--pts-color-dark);
}

.ast-builder-menu .main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu .main-header-menu > .current-menu-item > .menu-link {
	color: var(--pts-color-accent);
}

.ast-builder-menu .main-header-menu > .menu-item > .menu-link {
	padding: 13px 18px;
}

.ast-above-header .ast-builder-menu .main-header-menu > .menu-item > .menu-link {
	font-size: 13px;
}

.site-logo-img .custom-logo-link img {
	height: auto;
}

.ast-primary-header-bar .site-branding {
	justify-content: center;
}

/* Search icon in the header */
.ast-header-search .astra-search-icon {
	color: var(--pts-color-dark);
}

/* --------------------------------------------------------------------------
   Content area, sidebar
   -------------------------------------------------------------------------- */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
	background-color: transparent;
}

.entry-content {
	font-size: 17px;
	line-height: 1.5;
}

.single .entry-header .entry-title,
.page .entry-header .entry-title {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.single .entry-header {
	text-align: center;
}

.single .entry-meta,
.single .entry-meta a {
	font-family: var(--pts-font-heading);
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--pts-color-text);
}

/* Widget areas rendered with the Julia markup (section.widget / .widget__title) */
.widget-area.secondary .sidebar-main {
	padding: 0;
}

.widget-area.secondary .widget--side {
	margin-bottom: 0;
}

/* Archive header (category / tag pages) */
.ast-archive-description {
	text-align: center;
}

.ast-archive-description .ast-archive-title {
	font-weight: 700;
}

.ast-archive-description .ast-archive-title .ast-archive-title-prefix {
	display: block;
	font-size: 0.5em;
	font-weight: 500;
}

/* Blog card grid on archives */
#posts-container.c-gallery--blog {
	margin-bottom: 56px;
}

/* Widgetised page templates (Front Page, Recipe Index) */
.pts-widgetised-page .o-layout {
	margin-top: 0;
}

.ast-page-builder-template .pts-widgetised-page .u-container-sides-spacing {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Footer (menu row above the copyright line, both centred)
   -------------------------------------------------------------------------- */
.site-footer {
	background-color: #fff;
}

.site-footer .site-above-footer-wrap,
.site-footer .site-primary-footer-wrap {
	padding-top: 24px;
	padding-bottom: 24px;
}

.site-footer .site-above-footer-wrap {
	padding-top: 80px;
}

.site-footer .site-primary-footer-wrap {
	padding-bottom: 80px;
}

.astra-footer-menu-container .menu-item .menu-link,
.footer-nav-wrap .menu-link {
	font-family: var(--pts-font-heading);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--pts-color-dark);
}

.ast-footer-copyright {
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Content styles carried over from the site's "Additional CSS"
   -------------------------------------------------------------------------- */
img.alignleft {
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}

/* Plum variety table: card layout on small screens */
@media (max-width: 450px) {
	.plum-variety-table table {
		width: 100%;
		border-collapse: collapse;
	}
	.plum-variety-table th,
	.plum-variety-table td {
		border: 1px solid #ddd;
		padding: 0.65em 0.8em;
		text-align: left;
	}
	.plum-variety-table th {
		background: #f7f7f7;
		font-weight: 700;
	}
	.plum-variety-table thead {
		display: none !important;
	}
	.plum-variety-table tbody tr {
		display: block;
		margin: 1em 0;
		border: 1px solid #ccd6dd;
		border-radius: 8px;
		background: #fff;
		overflow: hidden;
	}
	.plum-variety-table td {
		display: grid !important;
		grid-template-columns: 46% 54%;
		align-items: start;
		gap: .25em .6em;
		padding: .65em .75em;
		border: 0 !important;
		box-sizing: border-box;
		width: 100%;
	}
	.plum-variety-table td::before {
		content: attr(data-label);
		font-weight: 700;
		line-height: 1.25;
		word-break: break-word;
	}
	.plum-variety-table td + td {
		border-top: 1px solid #f0f3f5 !important;
	}
	.plum-variety-table td:first-child {
		font-weight: 700;
	}
	.plum-variety-table tbody tr td:first-child {
		border-left: .85em solid transparent !important;
		padding-top: .85em !important;
	}
	.plum-variety-table tbody tr td:first-child::before {
		font-weight: 700;
	}
}

@media (max-width: 360px) {
	.plum-variety-table td {
		grid-template-columns: 48% 52%;
	}
}

/* --------------------------------------------------------------------------
   Fixes for markup that relied on Julia's JavaScript
   -------------------------------------------------------------------------- */
/* Julia hid card images until its script added .is-loaded; that script is gone. */
.c-card__frame img:not(.is-loaded),
.widget_categories_image_grid img:not(.is-loaded) {
	opacity: 1;
}

/* Julia's cropped galleries sized the image with JavaScript; use object-fit instead. */
.c-gallery--cropped .c-card__frame picture,
.c-gallery--cropped .c-card__frame img,
.c-card__thumbnail-background .c-card__frame picture,
.c-card__thumbnail-background .c-card__frame img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	min-width: 0;
	min-height: 0;
	margin: 0;
	transform: none;
	object-fit: cover;
	display: block;
}

.widget .widget__title {
	margin: 0 0 21px;
}

/* Search form inside content widget areas: field + dark button side by side (Astra styles it as an icon overlay). */
.widget--content .search-form,
.widget--full .search-form {
	display: flex;
	align-items: stretch;
}
.widget--content .search-form .search-field,
.widget--full .search-form .search-field {
	flex: 1 1 auto;
	padding: 12px 15px;
}
.widget--content .search-form .search-submit,
.widget--full .search-form .search-submit {
	position: static;
	width: auto;
	height: auto;
	margin-left: 16px;
	padding: 12px 30px;
	background-color: var(--pts-color-dark);
	color: #fff;
	font-family: var(--pts-font-heading);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
}

/* Archive titles as on the previous theme: bold */
.ast-archive-title,
.ast-archive-description .ast-archive-title {
	font-weight: 700;
}

/* Five-card widget on small screens: a swipeable strip (Julia built a slider with JavaScript). */
@media (max-width: 799px) {
	.widget--full .featured-posts-5cards {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 20px;
		margin: 0;
		padding: 0 8% 8px;
	}
	.widget--full .featured-posts-5cards::-webkit-scrollbar {
		display: none;
	}
	.widget--full .featured-posts-5cards [class*="posts-wrapper"] {
		display: contents;
	}
	.widget--full .featured-posts-5cards article {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		scroll-snap-align: center;
		text-align: center;
	}
	.widget--full .featured-posts-5cards .c-card__excerpt,
	.widget--full .featured-posts-5cards .c-card__footer {
		display: none !important;
	}
	.widget--full .featured-posts-5cards .c-card__meta {
		justify-content: center;
	}
	.widget--full .featured-posts-5cards .c-card__title {
		margin-bottom: 0;
	}
}

/* Featured image on single posts: keep the image's own proportions (Astra forces 16:9). */
.single .ast-article-single > .post-thumb img,
.single .ast-single-post-featured-section img {
	aspect-ratio: auto !important;
	height: auto !important;
	object-fit: unset !important;
}
/* Related posts keep Astra's uniform 16:9 crop. */
.ast-related-post-featured-section img {
	aspect-ratio: 16 / 9 !important;
	height: auto !important;
	object-fit: cover !important;
}

/* Card hover letter: Julia sized it with a script; size it from the frame width instead. */
.c-card__frame {
	container-type: inline-size;
}
.c-card__frame .c-card__letter {
	top: 50%;
	left: 50%;
	width: auto;
	transform: translate(-50%, -50%);
	font-size: 40cqw;
	line-height: 1;
	letter-spacing: 0;
}

/* Room for the arrow in the search button */
.widget--content .search-form .search-submit,
.widget--full .search-form .search-submit {
	padding-right: 100px;
}

/* --------------------------------------------------------------------------
   Category tiles widget (Recipe Index): latest recipe image with the
   category name as a button underneath, styled like "Read More".
   -------------------------------------------------------------------------- */
.pts-tiles {
	display: flex;
	flex-wrap: wrap;
	margin-left: -42px;
}
.pts-tile {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	padding-left: 42px;
	margin-top: 42px;
	box-sizing: border-box;
}
.pts-tiles--2col .pts-tile { flex-basis: 50%; max-width: 50%; }
.pts-tiles--4col .pts-tile { flex-basis: 25%; max-width: 25%; }
.pts-tile__image {
	display: block;
	position: relative;
	padding-top: 75%;
	overflow: hidden;
	background-color: #07233b;
}
.pts-tile__image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.pts-tile:hover .pts-tile__image img {
	transform: scale(1.04);
}
.pts-tile__image .pts-tile__letter {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-family: var(--pts-font-heading);
	font-weight: 300;
	font-size: 96px;
	line-height: 1;
	text-transform: uppercase;
}
.pts-tile__button {
	display: block;
	position: relative;
	width: 100%;
	padding: 16px 60px 16px 24px;
	box-sizing: border-box;
	background-color: var(--pts-color-dark);
	color: #fff !important;
	font-family: var(--pts-font-heading);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: left;
}
.pts-tile__button::after {
	content: "\2192";
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--pts-font-body);
	font-weight: 300;
	font-size: 22px;
	line-height: 1;
}
.pts-tile__button:hover {
	background-color: var(--pts-color-accent);
}
.pts-tile__count {
	font-weight: 300;
	opacity: .75;
	margin-left: 6px;
}
@media (max-width: 799px) {
	.pts-tiles { margin-left: -20px; }
	.pts-tile, .pts-tiles--4col .pts-tile { flex-basis: 50%; max-width: 50%; padding-left: 20px; margin-top: 20px; }
}
@media (max-width: 479px) {
	.pts-tile, .pts-tiles--2col .pts-tile, .pts-tiles--4col .pts-tile { flex-basis: 100%; max-width: 100%; }
}