/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/*--------------------------------------------------------------
# Theme overrides
--------------------------------------------------------------*/
body.wp-child-theme-ohlala {

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    .content-area {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .entry-content-wrap {
        padding-top: 0px;
    }

    .kt-btn-inner-text {
        font-weight: 600;
    }

}


/*--------------------------------------------------------------
# CSS classes
--------------------------------------------------------------*/
.oll_flex_clm {
    flex-direction: column;
}

.oll_100w {
    width: 100%;
}

.kb-post-list-item .entry-meta-divider-dot,
.ohlala-selected-posts__meta {
    display: none !important;
}

@media only screen and (max-width: 767px) {
    .oll_hide_later{
        display: none !important;
    }
    .oll_later_padded {
        padding-left: 24px;
        padding-right: 24px;
    }
}

.oll_zindex_999 {
    z-index: 999;
}


/*--------------------------------------------------------------
# Articles: center any image whose paragraph is center-aligned.
# Older/imported content sometimes has a centered <p> with a plain
# <img> inside that never got WordPress's own "aligncenter" class —
# since the browser treats that img as a block-level box, the
# paragraph's text-align:center has no effect on it and it sits
# flush left instead.
--------------------------------------------------------------*/
.entry-content p[style*="text-align:center"] img,
.entry-content p[style*="text-align: center"] img,
.entry-content p.has-text-align-center img {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
header {

    .wp-block-kadence-advancedbtn .kb-btn24747_11c9aa-ad.kb-button {
        padding: 0px 8px !important;
    }

}


/*--------------------------------------------------------------
# Archive pages & default page hero
--------------------------------------------------------------*/
body.archive,
body.page {

    .entry-hero-container-inner {
        background-color: #1e1b16;
    }

    .entry-hero-container-inner h1 {
        color: var(--wp--preset--color--ohlala-footer-text-color) !important;
    }

}


/*--------------------------------------------------------------
# Google Translate button
--------------------------------------------------------------*/
.ohlala-translate-button {
	text-transform: uppercase;
	cursor: pointer;
}


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.oll_bk_top {
	cursor: pointer;
}


/*--------------------------------------------------------------
# Posts block - Load More button
--------------------------------------------------------------*/
.ohlala-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 2em;
}

.ohlala-load-more-btn {
	display: inline-block;
	cursor: pointer;
	padding: 12px 32px;
	border: none;
	border-radius: 3px;
	background-color: var(--global-palette2);
	color: var(--global-palette9);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

.ohlala-load-more-btn:hover,
.ohlala-load-more-btn:focus {
	background-color: var(--global-palette10);
	color: var(--global-palette9);
}

.ohlala-load-more-btn:disabled {
	cursor: default;
	opacity: 0.6;
}


/*--------------------------------------------------------------
# Footer - per-page/category text override
--------------------------------------------------------------*/
.oll_custom_footer,
.oll_custom_footer p {
	color: var(--wp--preset--color--ohlala-footer-text-color);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* Page 19219 (Magazine): hide the "Notre Approche Éditoriale" footer section. */
body.page-id-19219 .oll_footer_editorial_section {
	display: none;
}


/*--------------------------------------------------------------
# Stat columns with a vertical divider between them
--------------------------------------------------------------*/
.oll_stat_divider {
	border-left: 1px solid var(--wp--preset--color--ohlala-lines-color);
}


/*--------------------------------------------------------------
# Footer - center the bottom bar (copyright / À propos) on mobile,
# where the two columns stack instead of sitting side by side.
--------------------------------------------------------------*/
@media (max-width: 782px) {
	.oll_footer_bottom_row p.wp-elements-14 {
        margin-bottom: -2px !important;
    }

	.oll_footer_bottom_row p {
		text-align: center !important;
	}

	/* Tighter gap between the copyright line and À propos once they stack. */
	.oll_footer_bottom_row {
		gap: 0px !important;
	}

	/* Less empty space below the social icons row. */
	.oll_footer_social_spacer {
		height: 0px !important;
        margin-bottom: -14px;
	}

    header .wp-elements-3 {
        margin-bottom: 0px !important;
    }

    body.page-id-19219 #inner-wrap #primary,
    body.home #inner-wrap {
        padding-left:24px;
        padding-right: 24px;
    }

    body .ohlala-category-tree-children {
        grid-template-columns: repeat(1, 1fr);
    }
}


/*--------------------------------------------------------------
# Search results page
--------------------------------------------------------------*/
.ohlala-search-no-results {
	max-width: 640px;
	margin: 0 auto;
	padding: 80px 24px;
	text-align: center;
}

.ohlala-search-no-results .search-form {
	margin-top: 24px;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

.ohlala-search-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 40px 0 80px;
}

/* Results grid: 80px bottom margin so there's still decent space above
   the footer when a search only has one page of results (no pagination
   block, which is what normally provides that space, gets rendered).
   Kadence's own "ul.kadence-posts-list { margin: 0 }" rule has higher
   specificity (element + class) than a plain single-class selector, so
   this needs to match that shape (plus !important) to win. */
ul.kb-posts-id-search_results-01 {
	margin-bottom: 80px !important;
}

.ohlala-search-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	height: 2.2em;
	padding: 0 0.5em;
	text-decoration: none;
	color: var(--global-palette4);
}

.ohlala-search-pagination .page-numbers.current {
	background-color: var(--global-palette2);
	color: var(--global-palette9);
	border-radius: 3px;
}

@media (max-width: 782px) {
	.oll_search_results_spacer {
		height: 24px !important;
	}
}

@media (max-width: 782px) {
	.oll_hero_cover {
		padding: 24px !important;
	}

	.oll_hero_cover .wp-block-cover__inner-container {
		padding: 0 !important;
	}

	/* Text column next to a full-bleed image (Le Luxe Se Vit, Gisèle Bio):
	   keep the image edge-to-edge, just shrink the text side padding. */
	.oll_bio_text_col {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	/* Full-width-background sections whose content has no side padding of
	   its own (L'Univers OhlalaLuxe, Ohlala Luxe à travers ses éditions). */
	.oll_contained_section > .wp-block-group__inner-container {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

.category-1174 {
    .ohlala-category-tree-group h3 {
        color:#FFFFFF;
        position: relative;
        z-index: 999;
        margin-top: -44px;
        margin-left: 16px;
        margin-bottom: 8px;
    }
}

/* Page 10 (À propos) only: same full-width-background/contained-content
   sections as above (.oll_contained_section), but for the tablet/small-
   desktop range the mobile rule above doesn't cover. Their content is
   capped at contentSize (1290px) with no padding of its own, so once the
   viewport drops under ~1380px the content sits flush against the edges
   with zero breathing room. Scoped to min-width:783px so it never
   overlaps the ≤782px mobile rule above (which intentionally uses a
   different, smaller 24px inset). */
@media (min-width: 783px) and (max-width: 1380px) {
	.oll_contained_section > .wp-block-group__inner-container {
		padding-left: 48px !important;
		padding-right: 48px !important;
	}
}

/*--------------------------------------------------------------
# Kadence's parent-theme default (.wp-block-group.has-background
# { padding: 20px 30px }) beats its own .alignfull reset on
# specificity, so any full-width background section silently gets
# an extra 30px of side padding stacked on top of ours. Zero it out
# — desktop and mobile — for our own full-bleed sections specifically
# (not every background group site-wide, to avoid changing anything
# we haven't reviewed).
--------------------------------------------------------------*/
.oll_hero_cover.has-background,
.oll_contained_section.has-background,
.oll_bio_section.has-background {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* A zero-padding section's own top/bottom margin collapses straight
   through to its first/last child (e.g. a heading's own margin-top) —
   so a child's margin meant as internal breathing room ends up
   escaping outside the section's background instead. flow-root
   contains child margins without otherwise changing how the section
   is sized or positioned. */
.oll_contained_section {
	display: flow-root;
}

/*--------------------------------------------------------------
# Page 10 (À propos) only: bring every "boxed" section's mobile side
# inset to a consistent 24px. The article wrapper on this theme has a
# -16px margin (Kadence's "boxed" style), and .alignwide sections get
# an extra -24px on top of that from Kadence's own alignwide rule —
# so plain sections sit at an 8px net inset and alignwide ones go
# negative (text clipped off-screen). Neutralize the alignwide margin,
# then add 16px to every section here so all four land on 24px net.
--------------------------------------------------------------*/
@media (max-width: 782px) {
	.oll_mobile_pad24.alignwide {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.oll_mobile_pad24 {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/*--------------------------------------------------------------
# Page 10 (À propos) only, mobile: standardize the vertical gap
# above 5 section titles/blocks to exactly 60px. Relies on normal
# block-flow margin collapsing (the browser takes the larger of a
# margin-top and its previous sibling's margin-bottom, it does not
# add them) — so forcing margin-top:60px on the target always wins
# over whatever smaller margin the previous sibling already has.
# Where the target also has its own top padding (which stacks
# ADDITIVELY on top of the collapsed margin, unlike margins), that
# padding is zeroed out too so the 60px collapsed margin is the
# only space left.
--------------------------------------------------------------*/
@media (max-width: 782px) {
	.oll_gap60_before {
		margin-top: 60px !important;
	}

	/* Notre Approche Éditoriale's title specifically wants a 40px top
	   margin on mobile (inside the section, see flow-root above), not
	   the shared 60px used elsewhere. */
	.oll_gap40_before {
		margin-top: 40px !important;
	}

	.oll_gap60_nopad {
		padding-top: 0 !important;
	}

	/* Gisèle Bio: the text column is flex vertically-centered against
	   the image column, so its own 48px top padding + centering offset
	   would otherwise stack on top of the 60px above. Top-align it and
	   remove its own top padding, replacing it with a fixed 60px so the
	   gap from the (now visible, see below) portrait image to the
	   "Gisèle" heading is exactly 60px. */
	.oll_gisele_col_top {
		align-self: flex-start !important;
		padding-top: 60px !important;
		margin-top: 0 !important;
	}

	/* Le Luxe Se Vit: same vertical-centering issue as Gisèle Bio above,
	   but here the 60px gap needs to land between the portrait image and
	   the horizontal divider line, not the heading — so this column's
	   own top padding is removed entirely (0) and the 60px instead comes
	   from the small filler spacer just below, via .oll_luxe_gap_spacer. */
	.oll_luxe_col_top {
		align-self: flex-start !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	.oll_luxe_gap_spacer {
		height: 60px !important;
	}

	/* Both bio sections: the block's own blockGap.top:0px setting isn't
	   emitted into CSS by WordPress's gap generator here, so force it
	   directly — this is the row-gap between the image column and text
	   column once they wrap onto separate lines on mobile. */
	.oll_gisele_row,
	.oll_luxe_row {
		gap: 0 !important;
	}

	/* Both bio sections: on mobile the columns wrap, so the portrait
	   image's column has no defined height for its Cover block's
	   min-height:100% to resolve against — it was rendering at 0px and
	   the image was invisible. Give it a real height so it's visible. */
	.oll_bio_section .wp-block-column:first-child .wp-block-cover {
		min-height: 300px !important;
	}
}


/*--------------------------------------------------------------
# Classic gallery shortcode ([gallery]): Kadence's own ".gallery"
# rule sets "grid-template-columns: repeat(auto-fill, minmax(150px,
# 1fr))", which packs in as many ~150px columns as fit the row and
# completely ignores the shortcode's own column-count setting (the
# ".gallery-columns-N" class WordPress already adds) — a 1-column
# gallery in a normal-width content area was rendering as 5 columns.
--------------------------------------------------------------*/
.gallery.gallery-columns-1 { grid-template-columns: repeat(1, 1fr); }
.gallery.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }


/*--------------------------------------------------------------
# Page 10 (À propos) logos grid ("Des Maisons d'Exception"): this
# group used to be a CSS Grid layout (5 equal-fraction columns), which
# had two problems — each fixed-width logo hugged the left edge of its
# (wider) column instead of sitting centered in it, and WordPress's
# Grid layout type replaces the Image block's own width-resize handles
# with grid-span handles, so individual logos couldn't be resized in
# the editor at all (only a fixed "Resolution" dropdown was left).
#
# Switching the group to a flex-wrap layout fixed the grid-span issue,
# but surfaced a second, similar one: an Image block that is a DIRECT
# child of a flex-type Group gets the "Fit / Grow / Fixed" flex-child
# sizing controls in its sidebar instead of its own normal resize
# handles and width field — and that control turned out not to even
# render any usable CSS on the frontend, so it was a dead end either
# way. Each logo is now wrapped in its own plain wp:group
# ("oll_logo_item") between the row and the image — that wrapper is
# the actual flex item now (sized below via flex-basis, the same
# approach as the old grid's columns, just expressed as a flex width
# instead of a grid track), while the Image block one level in is back
# to being a normal nested block with its normal resize handles.
#
# calc(N-basis) accounts for the 32px row/column gap so N columns
# always sum to exactly 100% instead of overflowing by (N-1)×32px.
--------------------------------------------------------------*/
.oll_logos_grid img {
	max-width: 100%;
	height: auto;
}

.oll_logos_grid .oll_logo_item {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 calc((100% - 4 * 32px) / 5); /* 5 columns */
}

@media (max-width: 1024px) {
	.oll_logos_grid .oll_logo_item {
		flex-basis: calc((100% - 3 * 32px) / 4); /* 4 columns */
	}
}

@media (max-width: 782px) {
	.oll_logos_grid .oll_logo_item {
		flex-basis: calc((100% - 2 * 32px) / 3); /* 3 columns */
	}
}

@media (max-width: 560px) {
	.oll_logos_grid .oll_logo_item {
		flex-basis: calc((100% - 1 * 32px) / 2); /* 2 columns */
	}
}

/*--------------------------------------------------------------
# Page 10 (À propos), "L'Univers Ohlala Luxe" 4-column row (Hôtels &
# Resorts, etc.): each image's own file is only 300px wide, narrower
# than its column once the columns stack to full-width on smaller
# screens, so it was sitting flush left in the extra space instead of
# centered.
--------------------------------------------------------------*/
@media (max-width: 782px) {
	.oll_univers_cols img {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}