/*
Theme Name: Egg In Nest (child)
Theme URI: https://egginnest.net/
Template: twentytwentyfive
Description: Block-theme replication of the legacy Stunning-themed egginnest.net design. Replaces a PHP-7/jQuery-1.5 era theme with a maintained block-theme child built on Twenty Twenty-Five. Brand palette derived from the live site CSS.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: egginnest-child
Tags: block-theme, full-site-editing
*/

/* Per-menu-item tab colors.
   wp:navigation-link does not support backgroundColor as a block attribute,
   so the className attribute is used to assign a tab-color class on the <li>,
   and the CSS sets the background on the inner <a class="...__content">.
   The submenu variant (Galleries) inherits its color from backgroundColor on the
   parent submenu block itself; the matching class is still applied here for hover/focus. */
.wp-block-navigation .wp-block-navigation-item.nav-tab-pink   > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.nav-tab-pink   > .wp-block-navigation-submenu__toggle { background-color: var(--wp--preset--color--tab-pink);   color: #f0f0f0 !important; }
.wp-block-navigation .wp-block-navigation-item.nav-tab-teal   > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.nav-tab-teal   > .wp-block-navigation-submenu__toggle { background-color: var(--wp--preset--color--tab-teal);   color: #f0f0f0 !important; }
.wp-block-navigation .wp-block-navigation-item.nav-tab-orange > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.nav-tab-orange > .wp-block-navigation-submenu__toggle { background-color: var(--wp--preset--color--tab-orange); color: #f0f0f0 !important; }
.wp-block-navigation .wp-block-navigation-item.nav-tab-purple > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.nav-tab-purple > .wp-block-navigation-submenu__toggle { background-color: var(--wp--preset--color--tab-purple); color: #f0f0f0 !important; }

/* Common geometry for the colored nav tabs */
.wp-block-navigation .wp-block-navigation-item__content {
  padding: 0.75rem 1.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Header bar: dark base + the legacy stunning-theme tileable texture overlay.
   theme.json sets the base color via the `header-bg` palette token on the wrapping
   Group; this rule layers the texture image on top of that color. */
header.wp-block-group.has-header-bg-background-color {
  background-image: url("./assets/texture_bg.png");
  background-repeat: repeat;
  background-position: 0 0;
}

/* Category post-card: avatar on the left, title + meta + image + excerpt on the right. */
.egg-post-card {
	align-items: flex-start;
}
.egg-post-card .egg-post-avatar img {
	width: 50px;
	height: 50px;
	border-radius: 2px;
	flex-shrink: 0;
	margin-top: 4px;
}
.egg-post-card .egg-post-body {
	flex: 1 1 auto;
	min-width: 0;
}
.egg-post-card .egg-post-body .wp-block-post-title {
	margin: 0;
}
.egg-post-card .egg-post-body .wp-block-post-title a {
	color: #000000;
	text-decoration: none;
}
.egg-post-card .egg-post-body .wp-block-post-title a:hover { color: var(--wp--preset--color--tab-teal); }
.egg-post-card .egg-post-meta {
	gap: 6px;
	color: #888888;
}
.egg-post-card .egg-post-meta p { margin: 0; }
.egg-post-card .wp-block-post-excerpt { margin-top: 8px; }
.egg-post-card hr { margin: 24px 0; border: 0; border-top: 1px solid #e0e0e0; }

/* Sidebar widgets — legacy Stunning theme styling */
.egg-sidebar .egg-sidebar-widget { font-size: 13px; }
.egg-sidebar .wp-block-page-list { list-style: none; padding: 0; margin: 0; }
.egg-sidebar .wp-block-page-list li { padding: 4px 0; border-bottom: 1px dotted #d0d0d0; }
.egg-sidebar .wp-block-page-list a { color: var(--wp--preset--color--tab-teal); text-decoration: none; }
.egg-sidebar .wp-block-page-list a:hover { color: #000000; }
.egg-sidebar h3.wp-block-heading { margin-bottom: 10px; }
.egg-contactinfo .ci-author { font-weight: 600; color: #000000; }
.egg-contactinfo a { color: var(--wp--preset--color--tab-teal); text-decoration: none; }

/* [portfolio] shortcode grid (Stunning-theme replacement). */
.port-grid {
	display: grid;
	grid-template-columns: repeat(var(--port-columns, 3), minmax(0, 1fr));
	gap: 24px;
	margin: 24px 0;
}
.port-item {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 2px;
	overflow: hidden;
}
.port-thumb {
	display: block;
	background: #f4f4f4;
	height: var(--port-img-height, 240px);
	overflow: hidden;
}
.port-thumb img.port-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}
.port-thumb:hover img.port-image { transform: scale(1.04); }
.port-image-empty {
	display: block;
	width: 100%;
	height: 100%;
	background: #f4f4f4;
}
.port-title {
	margin: 14px 16px 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}
.port-title a { color: #000000; text-decoration: none; }
.port-title a:hover { color: var(--wp--preset--color--tab-teal); }
.port-desc { margin: 8px 16px 0; font-size: 13px; color: #616161; }
.port-more {
	margin: 12px 16px 16px;
	display: inline-block;
	color: var(--wp--preset--color--tab-teal);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}
.port-more:hover { color: #000000; }
.port-pagination {
	margin: 24px 0;
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
}
.port-pagination a,
.port-pagination span.current {
	padding: 6px 10px;
	border: 1px solid #d0d0d0;
	color: #616161;
	text-decoration: none;
	font-size: 13px;
}
.port-pagination span.current { background: var(--wp--preset--color--tab-teal); color: #ffffff; border-color: var(--wp--preset--color--tab-teal); }

/* Twenty Twenty-Five inserts a block-gap (≈19.2 px) between every direct child
   of .wp-site-blocks. The header → hero band → subheader → main sequence reads
   as one continuous masthead in the legacy design, so the seams are flattened. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .egg-hero-band,
.wp-site-blocks > .frontpage_teaser,
.wp-site-blocks > main.egg-pagemid {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* .frontpage_teaser — renders the legacy `atp_teaser_frontpage_text` content
   ("Sign up for Classes" CTA) above the main page body. Styles mirror the
   legacy Stunning theme's .frontpage_teaser rule: centered text, 30px 15px
   padding, separator.png pinned to bottom-center, no text decoration on the
   inline button shortcode replacement. */
.frontpage_teaser {
	background: url("./assets/separator.png") no-repeat 50% 100%;
	padding: 30px 15px;
	text-align: center;
	font-family: var(--wp--preset--font-family--open-sans);
}
.frontpage_teaser .inner {
	max-width: 980px;
	margin: 0 auto;
}
.frontpage_teaser h2 {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 400;
	color: #000;
}
.frontpage_teaser h2 strong { font-weight: 700; }
.frontpage_teaser h5 {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: #616161;
	line-height: 2;
}
/* Two-level button matching the legacy Stunning theme markup
   <a class="button small"><span>…</span></a>: the outer <a> carries the
   rounded green pill, the inner <span> carries the actual padding. */
.frontpage_teaser .button {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	padding: 0;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	line-height: 1;
}
.frontpage_teaser .button span {
	display: inline-block;
	padding: 6px 13px;
	font-size: 10px;
	color: #fff;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.frontpage_teaser .button:hover { filter: brightness(1.1); color: #fff; }

/* Page-mid wrapper that holds the body content. Mirrors the legacy `.pagemid`
   with white surface and a pattern_bottom.png horizontal stripe pinned to the
   bottom edge of the wrapper.
   --wp--style--block-gap is tightened (1.2rem → 0.5rem) inside the right
   content column so headings and paragraphs stack closer together, like the
   legacy theme; the horizontal column gap is restored separately so the
   sidebar and content column stay visually separated. */
/* Verbatim port of the legacy .pagemid rule from stunning/css/main.css:
   padding 30px 0 10px, white surface, pattern_bottom.png pinned to bottom-left,
   tiled horizontally. */
main.egg-pagemid {
	background: #ffffff url("./assets/pattern_bottom.png") bottom left repeat-x;
	padding-top: 30px;
	padding-bottom: 10px;
}
main.egg-pagemid .wp-block-columns {
	--wp--style--block-gap: 32px;
}
main.egg-pagemid .wp-block-column > * {
	--wp--style--block-gap: 0.5rem;
}

/* Hide the old in-place CTA Group now that the subheader band replaces it. */
.egg-cta-legacy-fallback { display: none !important; }

/* Footer surface — light-gray texture from the legacy theme. */
footer.egg-footer {
	background: #d6d6d6 url("./assets/footer.png");
	color: #616161;
}
footer.egg-footer h4.wp-block-heading { color: #000000; }
footer.egg-footer a { color: var(--wp--preset--color--tab-teal); }
footer.egg-footer .wp-block-page-list li { padding: 4px 0; border-bottom: 1px dotted #b8b8b8; }

/* Footer teaser ("Check out our Facebook page …") — mirrors legacy .footer_teaser:
   transparent surface with separator.png pinned to the bottom-center, centered
   text, slightly larger h5, the [button] shortcode rendered as the same
   two-level <a><span> pill used for the front-page CTA. */
footer.egg-footer .footer_teaser {
	margin: 0 0 20px 0;
	padding: 0 20px 20px 20px;
	overflow: hidden;
	background: url("./assets/separator.png") no-repeat bottom center;
	text-align: center;
}
footer.egg-footer .footer_teaser h5 {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: #2c2c2c;
	line-height: 22px;
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
footer.egg-footer .footer_teaser h5 strong {
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
footer.egg-footer .footer_teaser .button {
	display: inline-block;
	vertical-align: middle;
	margin: 0 8px;
	padding: 0;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	line-height: 1;
}
footer.egg-footer .footer_teaser .button span {
	display: inline-block;
	padding: 6px 13px;
	font-size: 10px;
	color: #fff;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
footer.egg-footer .footer_teaser .button:hover { filter: brightness(1.1); color: #fff; }

/* Hero band that frames the carousel — full-bleed horizontal-lines pattern
   carried over from the legacy theme (#featured_slider in the original markup).
   The band sits between header and main, taking the full container width
   (the document body is the container, so 100% = page width). */
.egg-hero-band {
	background: url("./assets/lines.png") repeat;
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Hero carousel: replaces the legacy jQuery 1.5 carousel.
   Fixed-aspect viewport; slides are absolutely positioned and cross-faded
   by toggling .is-active. Auto-advance and indicators are driven by
   assets/carousel.js. */
.egg-carousel {
	position: relative;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	aspect-ratio: 980 / 395;
	background: #1a1a1a;
	overflow: hidden;
}
.egg-carousel .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 600ms ease-in-out;
	pointer-events: none;
}
.egg-carousel .slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
.egg-carousel .slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.egg-carousel .slide .caption {
	position: absolute;
	right: 20px;
	bottom: 20px;
	color: #ffffff;
	text-align: right;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.egg-carousel .slide .caption h3 {
	margin: 0 0 4px;
	color: #ffffff;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
}
.egg-carousel .slide .caption .more {
	color: #ffffff;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	padding-bottom: 1px;
}
.egg-carousel .slide .caption .more:hover {
	border-bottom-color: #ffffff;
}
.egg-carousel .nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 60px;
	background: rgba(0, 0, 0, 0.32);
	color: #ffffff;
	border: none;
	font-size: 26px;
	line-height: 60px;
	text-align: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms;
}
.egg-carousel:hover .nav,
.egg-carousel:focus-within .nav { opacity: 1; }
.egg-carousel .nav.prev { left: 0; }
.egg-carousel .nav.next { right: 0; }
.egg-carousel .nav:hover { background: rgba(0, 0, 0, 0.55); }
.egg-carousel .dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	display: flex;
	gap: 6px;
	justify-content: center;
}
.egg-carousel .dots .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	padding: 0;
	cursor: pointer;
}
.egg-carousel .dots .dot.is-active {
	background: #ffffff;
}

/* Logo sits directly on the textured header surface, matching the legacy layout. */
.egg-logo {
  margin: 0;
  line-height: 0;
}
.egg-logo img {
  display: block;
  width: 190px;
  height: 80px;
}