/*
Theme Name: Nicole
Theme URI: https://pennylamont.com/themes/nicole/
Description: A warm, boho Divi 5 child theme for food bloggers and recipe creators. Soft greige and blush neutrals with a clay accent, Cormorant Garamond display over Belleza running text, arch-framed food photography, a recipe grid, browse-by-category arches, a Meet the Cook section and a newsletter band. Demo pages, a Theme Builder header, footer and single-recipe template, global colours, design variables and module presets included.
Author: PennyLamont
Author URI: https://pennylamont.com/
Template: Divi
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nicole-food
Tags: food, blog, two-columns, custom-menu, featured-images, translation-ready
*/

/* -------------------------------------------------------------------------
   Where the styling lives

   Almost everything in this theme is styled in Divi itself: global colours,
   design variables, global fonts and global module presets. That is what keeps
   the design editable in the Visual Builder for the buyer.

   Only rules Divi's module options genuinely cannot express belong in this
   file. Keep it short, keep it commented, and never move module styling here.
   ---------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
 * 1. Header call-to-action (nicole-menu-cta)
 *
 * The last item in the primary menu carries the class nicole-menu-cta, set in
 * Appearance > Menus, and renders as an outlined button rather than a plain
 * link. Divi's Menu module has no button slot.
 *
 * Every colour is one of Divi's global colour variables, so a palette change
 * under Divi > Theme Options carries through. The hex after each comma is only
 * a fallback for the moment before Divi's variables load.
 * -------------------------------------------------------------------------- */

.et_pb_menu .et-menu > li.nicole-menu-cta {
	margin-left: 16px;
	align-self: center;
	align-items: center;
}

.et_pb_menu .et-menu > li.nicole-menu-cta > a {
	/* Divi scopes its menu rules behind #et-boc in the Visual Builder, and an ID
	   outranks a class, so these three are forced to match the front end. */
	display: inline-block !important;
	padding: 12px 26px !important;
	line-height: 1.2 !important;
	border: 1px solid var(--gcid-heading-color, #3B3733);
	border-radius: 0;
	color: var(--gcid-heading-color, #3B3733);
	opacity: 1;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.et_pb_menu .et-menu > li.nicole-menu-cta > a::before,
.et_pb_menu .et-menu > li.nicole-menu-cta > a::after {
	display: none;
}

.et_pb_menu .et-menu > li.nicole-menu-cta > a:hover {
	background-color: var(--gcid-heading-color, #3B3733);
	color: var(--gcid-n-cream, #FFFDFA);
	opacity: 1;
}

.et_pb_menu .et-menu > li.nicole-menu-cta > a:focus-visible {
	outline: 1px solid var(--gcid-link-color, #9A6349);
	outline-offset: 3px;
}

.et_pb_menu .et_mobile_menu li.nicole-menu-cta > a {
	display: inline-block;
	margin: 12px 0 14px;
	padding: 12px 26px;
	border: 1px solid var(--gcid-heading-color, #3B3733);
}

.et_pb_menu .et_mobile_menu li.nicole-menu-cta {
	border-bottom: none;
}


/* -----------------------------------------------------------------------------
 * 2. Minimum readable type (nicole-minimum-type)
 *
 * Divi ships the Email Optin small print at 14px with no font control for it.
 * -------------------------------------------------------------------------- */

.et_pb_newsletter_footer,
.et_pb_newsletter_footer p {
	font-size: 16px;
	line-height: 1.6em;
}


/* -----------------------------------------------------------------------------
 * 3. Recipe grid cards (nicole-recipe-grid)
 *
 * The Blog module in grid mode draws each post as a bordered, padded card with
 * a fixed-ratio image. The design wants borderless cards with a tall 4:5 photo
 * and the text sitting flush under it. Divi exposes the border and colours but
 * not the image ratio or the card padding, so those two are set here.
 *
 * Scoped to Blog modules carrying the class nicole-recipe-grid (Advanced > CSS
 * Class), so an ordinary blog list elsewhere is untouched.
 * -------------------------------------------------------------------------- */

.nicole-recipe-grid .et_pb_post {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	margin-bottom: 44px;
}

.nicole-recipe-grid .et_pb_post .et_pb_image_container {
	margin: 0 0 18px !important;
}

.nicole-recipe-grid .et_pb_post .entry-featured-image-url {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin-bottom: 0;
}

.nicole-recipe-grid .et_pb_post .entry-featured-image-url img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.nicole-recipe-grid .et_pb_post:hover .entry-featured-image-url img {
	transform: scale(1.03);
}

/* The category line sits above the title, as on the mockup. Divi prints it in
   the post meta under the title; flex order moves it without new markup. */
.nicole-recipe-grid .et_pb_post {
	display: flex;
	flex-direction: column;
}

.nicole-recipe-grid .et_pb_post .et_pb_image_container { order: 0; }
.nicole-recipe-grid .et_pb_post .post-meta { order: 1; }
.nicole-recipe-grid .et_pb_post .entry-title { order: 2; }
.nicole-recipe-grid .et_pb_post .post-content { order: 3; }

.nicole-recipe-grid .et_pb_post .post-meta {
	margin-bottom: 8px;
}

.nicole-recipe-grid .et_pb_post .post-meta a {
	color: var(--gcid-link-color, #9A6349);
}

@media (prefers-reduced-motion: reduce) {
	.nicole-recipe-grid .et_pb_post .entry-featured-image-url img {
		transition: none;
	}
	.nicole-recipe-grid .et_pb_post:hover .entry-featured-image-url img {
		transform: none;
	}
}


/* -----------------------------------------------------------------------------
 * 4. Blog "Read More" link (nicole-read-more)
 *
 * The Blog module offers only an on/off switch for this link, so it is matched
 * to the Arrow Link button preset here: hairline underline, clay on hover.
 * -------------------------------------------------------------------------- */

.et_pb_post .more-link {
	display: inline-flex !important;
	align-items: center;
	line-height: 1.2;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--gcid-secondary-color, #C3B7A8);
	transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.et_pb_post .more-link:hover {
	border-bottom-color: var(--gcid-link-color, #9A6349);
}

.et_pb_post .more-link:focus-visible {
	outline: 1px solid var(--gcid-link-color, #9A6349);
	outline-offset: 3px;
}


/* -----------------------------------------------------------------------------
 * 5. Header dropdown panel (nicole-dropdown)
 *
 * Square corners, no shadow, stacked items and a hover bridge across the gap.
 * Scoped to the Theme Builder header.
 * -------------------------------------------------------------------------- */

@media (min-width: 981px) {

	.et-l--header .et_pb_menu .nav > li > ul.sub-menu {
		width: max-content;
		min-width: 150px;
		max-width: 260px;
		left: 0;
		margin-top: 0;
		padding: 0;
		background: var(--gcid-n-ivory, #FBF9F6);
		border: 1px solid var(--gcid-n-line, #DCD3C8);
		border-radius: 0;
		box-shadow: none;
	}

	.et-l--header .et_pb_menu .nav > li > ul.sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -7px;
		height: 7px;
	}

	.et-l--header .et_pb_menu .nav li ul.sub-menu li {
		display: block;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid var(--gcid-n-line, #DCD3C8);
	}

	.et-l--header .et_pb_menu .nav li ul.sub-menu li:last-child {
		border-bottom: 0;
	}

	.et-l--header .et_pb_menu .nav li ul.sub-menu li a {
		display: block;
		width: auto !important;
		white-space: nowrap;
		padding: 11px 20px;
		opacity: 1;
		transition: background-color 0.25s ease-in-out;
	}

	.et-l--header .et_pb_menu .nav li ul.sub-menu li a:hover {
		background: var(--gcid-n-sand, #F1EBE4);
		opacity: 1;
	}
}

@media (max-width: 980px) {
	.et-l--header .et_pb_menu .et_mobile_menu li ul.sub-menu li a {
		padding-left: 34px;
	}
}


/* -----------------------------------------------------------------------------
 * 6. Image crops (nicole-arch, nicole-round, nicole-tall, nicole-square)
 *
 * Divi's border radius can shape the frame, but it cannot fix an image's
 * aspect ratio, so a buyer's landscape photo would otherwise make a squat
 * arch. These classes (Advanced > CSS Class on an Image module) lock the crop.
 * -------------------------------------------------------------------------- */

.nicole-arch .et_pb_image_wrap,
.nicole-arch img,
.nicole-round .et_pb_image_wrap,
.nicole-round img,
.nicole-tall .et_pb_image_wrap,
.nicole-tall img,
.nicole-square .et_pb_image_wrap,
.nicole-square img {
	width: 100%;
}

.nicole-arch img,
.nicole-tall img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.nicole-round img,
.nicole-square img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}


/* -----------------------------------------------------------------------------
 * 7. Newsletter form (nicole-newsletter)
 *
 * With only the email field switched on, Divi's Email Optin sizes the field to
 * its content and the form shrinks to a narrow box. The design wants one wide
 * field above a full-width button, so the field row and button are stretched.
 * Colours, borders and fonts all stay in the module's own settings.
 * -------------------------------------------------------------------------- */

.et_pb_newsletter .et_pb_newsletter_form,
.et_pb_newsletter .et_pb_newsletter_form form,
.et_pb_newsletter .et_pb_newsletter_fields,
.et_pb_newsletter .et_pb_newsletter_field,
.et_pb_newsletter .et_pb_newsletter_button_wrap {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
}

.et_pb_newsletter .et_pb_newsletter_field input.input {
	width: 100%;
	padding: 16px 18px;
}

.et_pb_newsletter .et_pb_newsletter_button {
	width: 100%;
	justify-content: center;
}


/* -----------------------------------------------------------------------------
 * 8. Recipe hero photo (nicole-recipe-photo)
 *
 * The Post Title module prints the featured image at its own size and aligned
 * left, with no width or ratio control. On a recipe the photo should fill the
 * title row and keep a steady landscape crop, whatever shape the buyer's photo
 * is.
 * -------------------------------------------------------------------------- */

.et_pb_post_title .et_pb_title_featured_container {
	width: 100%;
	margin-top: 32px;
}

.et_pb_post_title .et_pb_title_featured_container .et_pb_title_featured_image,
.et_pb_post_title .et_pb_title_featured_container img {
	display: block;
	width: 100%;
}

.et_pb_post_title .et_pb_title_featured_container img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Recipe tip box: the quote block in a recipe reads as a soft blush note. */
.et_pb_post_content blockquote {
	margin: 32px 0;
	padding: 22px 28px;
	border-left: 2px solid var(--gcid-n-clay, #B07A60);
	background: var(--gcid-n-blush, #EFDED6);
}

.et_pb_post_content blockquote p:last-child {
	padding-bottom: 0;
}


/* -----------------------------------------------------------------------------
 * 9. Footer links stay as links on phones (nicole-footer-menu)
 *
 * Divi's Menu module swaps to a hamburger below 980px. In the footer that hides
 * five short links behind a button for no reason, so the row of links is kept
 * and allowed to wrap. Scoped to the Theme Builder footer only.
 * -------------------------------------------------------------------------- */

@media (max-width: 980px) {

	.et-l--footer .et_pb_menu .et_pb_menu__menu {
		display: flex !important;
		justify-content: center;
	}

	.et-l--footer .et_pb_menu .et_mobile_nav_menu {
		display: none !important;
	}

	.et-l--footer .et_pb_menu .et-menu {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 6px;
	}
}


/* -----------------------------------------------------------------------------
 * 10. Header menu alignment (nicole-header-menu)
 *
 * Divi gives top-level menu links 0px padding above and 8px below, and pushes
 * each item down from the top of the bar, so the text sits high while the
 * Subscribe button and search icon sit in the middle. Every item is centred in
 * the bar here, with even padding above and below, so the links, the button
 * and the search icon share one centre line. Scoped to the header on desktop.
 * -------------------------------------------------------------------------- */

@media (min-width: 981px) {

	.et-l--header .et_pb_menu .et_pb_menu__wrap,
	.et-l--header .et_pb_menu .et_pb_menu__menu,
	.et-l--header .et_pb_menu .et-menu {
		align-items: center;
	}

	.et-l--header .et_pb_menu .et-menu > li {
		display: flex;
		align-items: center;
		margin-top: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.et-l--header .et_pb_menu .et-menu > li:not(.nicole-menu-cta) > a {
		padding-top: 18px !important;
		padding-bottom: 18px !important;
		line-height: 1 !important;
	}

	/* The dropdown arrow is positioned for Divi's own padding; recentre it. */
	.et-l--header .et_pb_menu .et-menu > li.menu-item-has-children > a::after {
		top: 50%;
		transform: translateY(-50%);
		margin-top: 0;
	}

	.et-l--header .et_pb_menu .et-menu > li.nicole-menu-cta {
		margin-left: 14px;
	}

	.et-l--header .et_pb_menu .et-menu > li.nicole-menu-cta > a {
		padding: 11px 22px !important;
		line-height: 1 !important;
	}

	.et-l--header .et_pb_menu .et_pb_menu__search-button {
		display: flex;
		align-items: center;
		margin-left: 18px;
	}

	/* Every top-level item spans the full height of the menu, so the
	   sub-menu always starts from the same place. */
	.et-l--header .et_pb_menu .et-menu {
		align-items: stretch;
	}

	/* The sub-menu sits exactly on the bar's bottom line: the bar section has
	   6px of bottom padding below the menu, then its 1px border. Dropping the
	   panel by that 6px lays its own 1px top border over the bar's line. */
	.et-l--header .et_pb_menu .nav > li > ul.sub-menu {
		top: calc(100% + 6px);
	}
}


/* -----------------------------------------------------------------------------
 * 11. Hairline frame on every photo (nicole-photo-frame)
 *
 * Each photo sits inside a fine 1px line, with a 12px gap between the line and
 * the picture. It is drawn on the image itself (border + padding) rather than
 * on its container, so it follows the image's crop and never gets clipped by
 * an overflow: hidden wrapper. The line colour is the theme's Secondary Color,
 * so it follows a palette change in Divi.
 *
 * Covers Image modules, Blog module thumbnails (recipe grids) and the recipe
 * hero photo in the Post Title module.
 * -------------------------------------------------------------------------- */

.et_pb_image .et_pb_image_wrap img,
.et_pb_post .entry-featured-image-url img,
.et_pb_post_title .et_pb_title_featured_container img,
.et_pb_post_content .wp-block-image img {
	box-sizing: border-box;
	padding: 12px;
	border: 1px solid var(--gcid-secondary-color, #C3B7A8);
	background: transparent;
}

/* The frame needs room to show, so image containers must not clip it. */
.et_pb_image .et_pb_image_wrap,
.nicole-recipe-grid .et_pb_post .entry-featured-image-url {
	overflow: visible;
}

/* A zoom on hover would push the picture over its own frame, so the recipe
   grid fades slightly instead. */
.nicole-recipe-grid .et_pb_post:hover .entry-featured-image-url img {
	transform: none;
	opacity: 0.88;
}

.nicole-recipe-grid .et_pb_post .entry-featured-image-url img {
	transition: opacity 0.4s ease;
}

/* The Instagram feed (nicole-insta-feed on the row) skips the frame so the
   photos sit edge to edge like a real feed, with no gaps between columns. */
.nicole-insta-feed .et_pb_image .et_pb_image_wrap img {
	padding: 0;
	border: 0;
}

.nicole-insta-feed,
.nicole-insta-feed > .et_pb_column,
.nicole-insta-feed .et_pb_image {
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
}

.nicole-insta-feed .et_pb_image_wrap,
.nicole-insta-feed img {
	display: block;
}

/* Round and arched crops keep the frame round with them. */
.nicole-round .et_pb_image_wrap,
.nicole-round img {
	border-radius: 50% !important;
}


/* -----------------------------------------------------------------------------
 * 12. Photos inside a recipe post (nicole-post-photo)
 *
 * Photos in the post body get the same steady 3:2 landscape crop as the hero
 * photo above them, so a mix of square, tall and wide photos still reads as
 * one set. Covers Image modules carrying the class nicole-post-photo (Advanced
 * > CSS Class), as in the demo recipes, and Image blocks in posts written in
 * the block editor. The hairline frame comes from section 11.
 * -------------------------------------------------------------------------- */

.et_pb_post_content .wp-block-image,
.et_pb_post_content .et_pb_image.nicole-post-photo {
	margin: 40px 0;
}

.nicole-post-photo .et_pb_image_wrap {
	display: block;
	width: 100%;
}

.nicole-post-photo img,
.et_pb_post_content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}


/* -----------------------------------------------------------------------------
 * 13. Ad slots (nicole-ad, nicole-ad-content, nicole-ad-banner)
 *
 * Ad slots are Code modules saved as Global items in the Divi Library
 * ("Ad slot - In-content 300x250" and "Ad slot - Banner 728x90"). Paste the ad
 * code from AdSense, Mediavine, Raptive or any other network into the Library
 * item once and every placement updates.
 *
 * Each slot keeps a fixed minimum height so the page does not jump when the
 * ad loads (Google's Cumulative Layout Shift score), and carries a small
 * "Advertisement" label, which most ad networks ask for. The dashed
 * placeholder box only shows while the slot still holds the demo text.
 * -------------------------------------------------------------------------- */

.nicole-ad {
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}

.nicole-ad::before {
	content: "Advertisement";
	display: block;
	margin-bottom: 8px;
	font-family: var(--et_global_body_font, "Belleza"), sans-serif;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--gcid-n-muted, #6F665D);
}

.nicole-ad .et_pb_code_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.nicole-ad-content {
	max-width: 336px;
}

.nicole-ad-content .et_pb_code_inner {
	min-height: 280px;
}

.nicole-ad-banner {
	max-width: 728px;
}

.nicole-ad-banner .et_pb_code_inner {
	min-height: 90px;
}

@media (max-width: 767px) {
	.nicole-ad-banner {
		max-width: 336px;
	}

	.nicole-ad-banner .et_pb_code_inner {
		min-height: 100px;
	}
}

.nicole-ad-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: inherit;
	align-self: stretch;
	border: 1px dashed var(--gcid-n-line, #DCD3C8);
	background: var(--gcid-n-linen, #F7F4EF);
	font-family: var(--et_global_body_font, "Belleza"), sans-serif;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--gcid-n-muted, #6F665D);
}


/* -----------------------------------------------------------------------------
 * 14. "What you'll need" panel (nicole-kit)
 *
 * The equipment panel above each recipe card keeps its three products side by
 * side on phones. At that size the 12px photo frame from section 11 would eat
 * half of each small photo, so it is slimmed down inside the panel.
 * -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.nicole-kit .et_pb_image .et_pb_image_wrap img {
		padding: 5px;
	}
}