/**
 * Theme Name:      Rustic Bling Child Theme
 * Theme URI:       https://www.elegantthemes.com/gallery/divi/
 * Description:     A child theme for Divi created by Divi Assistant.
 * Author:          Rustic Bling
 * Author URI:      https://www.rusticbling.com/
 * Template:         Divi
 * Version:         1.0.0
 * Text Domain:     rustic-bling-child-theme
 * License:         GPL2
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 */
  
 
/* ---------------------- Theme customization starts here ---------------------- */

/* Brand palette — keep in sync with the Divi global colors.
   RB Maroon #6b1f24  RB Gold #c9a24a  RB Ink #1a1715
   RB Body #3d3833    RB Rule #d9d1c4  RB Cream #f7f2ea        */
:root {
	--rb-maroon: #6b1f24;
	--rb-gold:   #c9a24a;
	--rb-ink:    #1a1715;
	--rb-body:   #3d3833;
	--rb-rule:   #d9d1c4;
	--rb-cream:  #f7f2ea;
}

/* Divi ships #2ea3f2 hardcoded in its own stylesheet. The five designed
   pages override it per-module, so it only surfaces on non-builder
   surfaces: blog posts, archives, search results, 404, comments.
   These rules bring those surfaces onto the brand. */

a {
	color: var(--rb-maroon);
}

a:hover,
a:focus {
	color: var(--rb-gold);
}

.nav-single a,
.posted_in a,
.entry-title a:hover,
.comment-reply-link,
.et_pb_bg_layout_light .et_pb_more_button {
	color: var(--rb-maroon);
}

.nav-single a:hover,
.posted_in a:hover,
.comment-reply-link:hover,
.et_pb_bg_layout_light .et_pb_more_button:hover {
	color: var(--rb-gold);
}

.et-search-form,
blockquote {
	border-color: var(--rb-rule);
}

blockquote {
	border-left-color: var(--rb-gold);
}

/* Keyboard focus — visible on cream without relying on the UA default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--rb-maroon);
	outline-offset: 2px;
}

/* Text selection */
::selection {
	background: var(--rb-gold);
	color: var(--rb-ink);
}

/* ---------------------------------------------------------------
   Global photo polish
   .rb-photo-polish is already applied to every photo tile sitewide
   (71 elements). The reduced-motion and hover:none guards live in
   the Divi header code module and use !important, so they override
   the rules below on touch devices and for users who ask for less
   motion. Nothing here uses !important, deliberately.

   Values come from the site's ADOPTED design system:
     radius sm      6px
     elevation rest    0 8px 18px -4px rgba(107,31,36,.20)
     elevation raised  0 12px 32px -6px rgba(107,31,36,.16)
   The shadow is maroon-tinted rather than grey — that is intentional.
   Change them in wp-admin under Design system, then update here.   */

.rb-photo-polish {
	border-radius: 6px;
	box-shadow: 0 8px 18px -4px rgba(107, 31, 36, .20);
	transition: transform .35s cubic-bezier(.2, .7, .3, 1),
	            box-shadow .35s cubic-bezier(.2, .7, .3, 1);
}

/* focus-within keeps the lift reachable by keyboard, not just mouse */
.rb-photo-polish:hover,
.rb-photo-polish:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px -6px rgba(107, 31, 36, .16);
}

/* Divi image modules carry radius + rest shadow from the RB Photo
   preset natively; this only adds the matching motion. */
.et_pb_image:not(.preset--module--divi-image--rb-logo) .et_pb_image_wrap {
	transition: transform .35s cubic-bezier(.2, .7, .3, 1),
	            box-shadow .35s cubic-bezier(.2, .7, .3, 1);
}

.et_pb_image:not(.preset--module--divi-image--rb-logo):hover .et_pb_image_wrap {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px -6px rgba(107, 31, 36, .16);
}

@media (prefers-reduced-motion: reduce) {
	.et_pb_image .et_pb_image_wrap,
	.et_pb_image:hover .et_pb_image_wrap {
		transform: none !important;
		transition: none !important;
	}
}

@media (hover: none) {
	.et_pb_image:hover .et_pb_image_wrap {
		transform: none !important;
	}
}

/* The RB Logo preset sets radius 0 / shadow none, but Divi omits
   default values from its output, so the global RB Photo default
   preset rule still reaches the wordmark. Reset it explicitly. */
.et_pb_image.preset--module--divi-image--rb-logo .et_pb_image_wrap,
.et_pb_image.preset--module--divi-image--rb-logo:hover .et_pb_image_wrap {
	border-radius: 0;
	box-shadow: none;
	transform: none;
	overflow: visible;
}

/* Lazy-load deadlock fix for rb-photo-polish divi/image modules.
   These sit inside nested flex/grid columns (display:flex,
   flexDirection:column, alignItems:stretch) where only the <img>
   itself carries width:100%/aspect-ratio. Before the image has
   loaded it has no intrinsic size, and in that stretch context the
   flex item can collapse to a 0x0 box - which means the element
   never registers as "near the viewport" for native loading=lazy,
   so the browser never requests it and it never paints. (Confirmed
   live on the About and Home pages: IMG_4240 and rb-katie.jpg both
   sat at 0x0/unrequested on a fresh load until forced.)
   Giving the wrap span its own definite width + aspect-ratio breaks
   the circular dependency without changing how anything looks. */
.et_pb_image.rb-photo-polish .et_pb_image_wrap {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
}