/*
Theme Name: Kiara Photography
Theme URI: https://photography.pennylamont.com/
Description: Child theme of Divi for Kiara Photography, a fine-art wedding photography site. Holds the site-specific styles that need to survive Divi updates.
Author: Penny Lamont
Author URI: https://photography.pennylamont.com/
Template: Divi
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kiara-photography
*/

/* -----------------------------------------------------------------
   NOTE ON LOADING
   Divi's parent theme enqueues this file automatically (handle:
   divi-style-child), after the parent stylesheet. No @import and no
   enqueue in functions.php are needed, and adding either would load
   the CSS twice.

   Nearly all of this site's design lives in Divi itself: global
   colours, design variables, global presets and the Theme Builder
   templates. Add CSS here only for things the builder genuinely
   cannot express, and say why.

   Palette reference (set as Divi global colours):
   cream #F7F4EF - ivory #FBF9F6 - taupe #A2988C - hairline #C3B7A8
   ink #3B3733 - body #5A544C - line #DCD3C8 - on-dark #FFFDFA
   ----------------------------------------------------------------- */


/* =================================================================
   LIGHTBOX
   ================================================================= */

/* When a gallery image is clicked, Divi's lightbox prints the image's
   WordPress title and a "1 of n" counter beneath the enlarged photo.

   Neither can be switched off in the builder: the title comes from the
   attachment's post_title via the link's title attribute (the module's
   "Show Title and Caption" toggle only governs captions in the grid),
   and the counter is generated by the Magnific Popup script with no
   Divi setting at all.

   Deleting this rule brings both back. */

.mfp-title,
.mfp-counter {
	display: none !important;
}


/* =================================================================
   GALLERY - TRUE MASONRY
   Opt in per gallery with the CSS class: kiara-masonry
   ================================================================= */

/* Divi lays gallery items out on a fixed grid, so every tile is forced
   to the same height and a "masonry" gallery ends up as a uniform one.

   Adding kiara-masonry to a gallery module switches that container to
   CSS multi-column, letting each photo keep its own proportions and the
   columns stagger naturally. The other half of the effect lives in
   functions.php, which stops Divi hard-cropping the thumbnails for this
   gallery only. Both halves are needed; removing either returns the
   gallery to Divi's standard grid. */

.kiara-masonry .et_pb_gallery_items {
	display: block !important;
	column-count: 3;
	column-gap: 24px;
}

.kiara-masonry .et_pb_gallery_item {
	display: block;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 24px !important;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.kiara-masonry .et_pb_gallery_image,
.kiara-masonry .et_pb_gallery_image > a {
	display: block;
	width: 100%;
}

.kiara-masonry .et_pb_gallery_image img {
	display: block;
	width: 100%;
	height: auto;
}

@media ( max-width: 980px ) {
	.kiara-masonry .et_pb_gallery_items {
		column-count: 2;
	}
}

@media ( max-width: 600px ) {
	.kiara-masonry .et_pb_gallery_items {
		column-count: 1;
	}
}


/* =================================================================
   GALLERY - LOAD MORE
   Opt in with: kiara-load-more (+ optional kiara-batch-<n>)
   on the gallery, and kiara-load-more-btn on the button.
   ================================================================= */

/* Applied and removed by assets/js/gallery-load-more.js. With
   JavaScript off nothing is hidden, so every photo is still reachable. */

.kiara-hidden {
	display: none !important;
}


/* =================================================================
   CAROUSEL - ARROW TILES
   Opt in with the CSS class: kiara-carousel
   ================================================================= */

/* Divi's Group Carousel exposes the arrow's icon, colour, size and
   position, but not a background behind it - the arrows are bare
   chevrons sitting directly on the photograph.

   These rules put each chevron in a flat white tile, as in the
   reference design. Flat, square and shadowless, to stay with the rest
   of the site. The chevron's colour is still set in the builder, not
   here; if you change it there, change nothing in this file.

   The 12px horizontal offset matches the slides' 12px side margins, so
   the tile sits flush against the edge of the photo rather than
   floating in the gap beside it. */

.kiara-carousel .et_pb_group_carousel_arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 56px;
	background-color: #FFFDFA; /* on-dark */
	transition: background-color 200ms ease;
}

.kiara-carousel .et_pb_group_carousel_arrow:hover {
	background-color: #F7F4EF; /* cream */
}

.kiara-carousel .et_pb_group_carousel_arrow .et-pb-icon {
	font-size: 26px;
	line-height: 1;
}

.kiara-carousel .et_pb_group_carousel_arrow_prev {
	left: 12px;
}

.kiara-carousel .et_pb_group_carousel_arrow_next {
	right: 12px;
}

@media ( max-width: 767px ) {
	.kiara-carousel .et_pb_group_carousel_arrow {
		width: 40px;
		height: 44px;
	}

	.kiara-carousel .et_pb_group_carousel_arrow .et-pb-icon {
		font-size: 20px;
	}
}


/* =================================================================
   SINGLE POST HERO
   Opt in with the CSS class: kiara-post-hero
   ================================================================= */

/* Divi's Post Title module always prints the title first and the
   date/category meta after it. The journal design wants the meta line
   above the title, and the module has no setting for the order, so the
   stack is reversed here.

   The max-width keeps a long title wrapping to two or three lines in
   the middle of the frame instead of running the full width of the
   screen. The background photo stays full-bleed - only the text is
   constrained. */

.kiara-post-hero .et_pb_title_container {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: center;
}

.kiara-post-hero .entry-title,
.kiara-post-hero .et_pb_title_meta_container {
	width: 100%;
	max-width: 820px;
}

.kiara-post-hero .et_pb_title_meta_container {
	margin-bottom: 14px;
}


/* =================================================================
   JOURNAL SEARCH FIELD
   Opt in with the CSS class: kiara-search
   ================================================================= */

/* Divi's Search module renders its submit control as an <input> reading
   "Search", and exposes no styling options for it at all - not colour,
   not typography, not an icon. The reference design uses a small
   magnifying glass inside the right-hand end of the field.

   An <input> is a replaced element and cannot carry ::before/::after,
   so the glyph is drawn on the FORM instead and the input is made
   transparent and laid over it. pointer-events:none on the glyph keeps
   the click landing on the real submit control underneath.

   The field itself is styled in the builder, not in this file. */

.kiara-search .et_pb_searchform {
	position: relative;
}

.kiara-search .et_pb_s {
	padding-right: 54px;
}

.kiara-search .et_pb_searchsubmit {
	position: absolute;
	right: 0;
	top: 0;
	width: 54px;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent !important;
	color: transparent !important;
	font-size: 0 !important;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
}

.kiara-search .et_pb_searchform::after {
	content: "\55";        /* magnifying glass in the ETmodules icon font */
	font-family: ETmodules;
	font-size: 21px;
	line-height: 1;
	color: #5A544C;        /* body */
	position: absolute;
	right: 17px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	transition: color 200ms ease;
}

.kiara-search .et_pb_searchform:hover::after {
	color: #A2988C;        /* taupe */
}


/* =================================================================
   JOURNAL CATEGORY CARD
   Opt in with the CSS class: kiara-category-card
   ================================================================= */

/* The card is a white panel with a hairline rule set INSIDE its edge,
   so white shows all the way round the line. Divi gives a module one
   border and draws it on the edge, and groups cannot be nested to make
   an inner frame, so the rule is drawn with an outline pulled inwards
   instead. outline-offset is the only property that positions a line
   inside an element without adding a wrapper.

   The card's white background, padding and its lift over the hero are
   all set in the builder, not here. */

.kiara-category-card {
	outline: 1px solid #DCD3C8;  /* line */
	outline-offset: -22px;
}

@media ( max-width: 767px ) {
	.kiara-category-card {
		outline-offset: -16px;
	}
}