/*
 * Theme Name:  Authentic Child
 * Theme URI:   https://codesupply.co/themes/authentic/
 * Description: Authentic Child Theme
 * Author:      Code Supply Co.
 * Author URI:  https://codesupply.co/
 * Template:    authentic
 * Version:     1.0.0
 */

/* Copy any classes from parent theme here. They will override the parent's version. */

/* Squarespace imported content uses white-space:pre-wrap which causes layout breaks in WP */
.sqs-html-content {
	white-space: normal;
}

/*
 * Squarespace image gallery → Owl Carousel
 *
 * Imported SS posts have <div class="image-gallery-wrapper"><img/>...</div>.
 * Our JS (ttd-image-gallery.js) adds .owl-carousel and inits Owl. The arrow
 * styling itself is set inline via JS — earlier attempts to style the arrows
 * via this stylesheet were beaten by the parent theme's specificity even with
 * !important. Only inline + !important from JS wins reliably.
 *
 * What's left here:
 *   - Hide the raw markup until Owl loads (avoids a flash of stacked images)
 *   - Cap image height for mixed-aspect-ratio galleries
 *   - Position context (.ttd-image-gallery is the relative container so the
 *     absolutely-positioned .owl-nav inside it positions correctly)
 *   - Breathing room above the dots
 */
.image-gallery-wrapper {
	visibility: hidden;
}
.image-gallery-wrapper.owl-loaded {
	visibility: visible;
}
.ttd-image-gallery {
	position: relative;
}
.ttd-image-gallery .ttd-gallery-slide img {
	max-height: 70vh;
	width: auto;
	margin: 0 auto;
	display: block;
}
.ttd-image-gallery .owl-dots {
	margin-top: 12px;
}

/*
 * Hide the theme's featured-image hero on single posts whose body ALREADY
 * starts with that same image — otherwise the post shows the featured image
 * at the top followed by an identical (or near-identical) image directly
 * below, which reads as a duplicate.
 *
 * Why we still set a featured image on these posts: WordPress widgets
 * (Featured Posts, Trending Posts, Recent Posts sidebar, category archives,
 * homepage hero, social/OG share image) all use _thumbnail_id. Without
 * a featured image, those locations render blank tiles. So the featured
 * image stays in the database — we just suppress its appearance on the
 * single-post view itself when the body's lead image makes it redundant.
 *
 * Two mechanisms, both hide section.post-media:
 *   1. .ttd-hero-suppressed — a body class added by functions.php for posts
 *      flagged by apply-hero-suppression.php (any post whose content starts
 *      with an image, single lead image OR gallery/carousel). This is the
 *      primary, reliable mechanism because PHP can actually parse where the
 *      content begins.
 *   2. :has( .image-gallery-wrapper ) — an automatic CSS-only fallback for
 *      carousel posts, so they're handled even before the script runs (e.g.
 *      a gallery post created later in the editor). Uses CSS :has(),
 *      supported in every modern browser since early 2024.
 */
.ttd-hero-suppressed section.post-media {
	display: none !important;
}
/*
 * Carousel fallback, kept in its OWN rule block. If a selector list mixes a
 * :has() selector with a plain one and the browser doesn't support :has(),
 * the whole list is invalidated and the plain selector is dropped too. Keeping
 * these separate guarantees the .ttd-hero-suppressed rule above always applies.
 */
.single-post article:has( .entry-content .image-gallery-wrapper ) > section.post-media,
.single-post article:has( .post-content .image-gallery-wrapper ) > section.post-media {
	display: none !important;
}

/*
 * Mobile header title sizing.
 *
 * Below ~480px the theme hides the big .header title and shows the navbar
 * brand (.navbar-brand.site-title) as the header title. The navbar is in
 * "center" mode and reserves equal side gutters to keep the brand centred, so
 * the brand's column is only ~173px wide — too narrow for "The Three Drinkers"
 * (~196px at the theme's 1.375rem), which wrapped to 2–3 lines.
 *
 * But search/social are disabled, so those side gutters are just empty space,
 * and overflow:visible runs all the way up the chain. So rather than shrink
 * the title to fit the narrow column (which left it looking lost in the
 * header), we let it grow and spill into the empty gutters on one line,
 * centred: a fluid size capped at 1.8rem, forced nowrap, centred. Scoped to
 * <=600px so the desktop sticky-nav brand keeps the theme's own size.
 *
 * !important beats the theme's inline-head navbar CSS, which loads after this
 * stylesheet and would otherwise win at equal specificity.
 */
@media ( max-width: 600px ) {
	.navbar-brand.site-title {
		font-size: clamp( 1.2rem, 7vw, 1.8rem ) !important;
		white-space: nowrap !important;
		text-align: center !important;
	}
}

/*
 * Homepage hero carousel title.
 *
 * The theme renders the hero/overlay post title at the H1 heading size (3rem),
 * which is fine on desktop but far too large on a phone — it swallows the hero
 * image and wraps to many lines. Scale it fluidly with the viewport, capped at
 * the theme's own 3rem so wide screens are unchanged (desktop = exactly what
 * the Customizer's Heading 1 sets). At ~412px this resolves to ~1.8rem.
 *
 * Scoped to .home .owl-carousel .overlay-inner so it affects ONLY the homepage
 * hero carousel — not single-post H1s, archives, or other overlay blocks.
 */
.home .owl-carousel .overlay-inner .entry-title,
.home .owl-carousel .overlay-inner .entry-title a {
	font-size: clamp( 1.6rem, 7vw, 3rem ) !important;
}

/*
 * Mobile only: remove the gap between the header and the homepage hero
 * carousel. The hero block carries a 40px padding-top (which pushes the
 * carousel down from the navbar); on phones we want the carousel to sit
 * directly under the header bar. Desktop keeps the spacing.
 */
@media ( max-width: 767px ) {
	.home [class*="cnvs-block-featured-posts"] {
		padding-top: 0 !important;
	}
}

/*
 * Homepage hero carousel — uniform slide height.
 *
 * The theme uses Owl's autoHeight, so each slide sizes to its own content and
 * the carousel jumps height as it rotates (measured slides ranged 227–425px).
 * Lock every slide (and the stage) to one fixed height; the parallax overlay
 * image already covers the box, and the title stays vertically centred via the
 * theme's existing flex on .overlay-outer.
 *
 * Heights: desktop 560px, mobile 440px (a fixed 440 would look letterboxed on
 * wide screens, so desktop gets a taller band — both consistent across slides).
 */
.cs-block-section-slider .owl-stage-outer,
.cs-block-section-slider .owl-item,
.cs-block-section-slider .post-outer.overlay,
.cs-block-section-slider .overlay-outer {
	height: 560px !important;
	min-height: 560px !important;
}
@media ( max-width: 767px ) {
	.cs-block-section-slider .owl-stage-outer,
	.cs-block-section-slider .owl-item,
	.cs-block-section-slider .post-outer.overlay,
	.cs-block-section-slider .overlay-outer {
		height: 440px !important;
		min-height: 440px !important;
	}
}

/*
 * Off-canvas (slide-out) menu: hide the site title at the top so only the menu
 * items show, and flush the close (X) button to the left.
 *
 * The off-canvas header is a flex row: [brand "The Three Drinkers" | X]. Hiding
 * the brand and forcing justify-content:flex-start on the nav drops the X to
 * the left edge. Scoped to .navbar-offcanvas so only the slide-out menu's brand
 * is hidden — the main header title is untouched.
 */
.navbar-offcanvas .navbar-brand {
	display: none !important;
}
.navbar-offcanvas {
	justify-content: flex-start !important;
}

/*
 * Hide the off-canvas hamburger toggle on desktop, where the inline primary
 * menu is already shown (it's redundant there). Kept on mobile (<970px) where
 * it's the only way to reach the menu. 970px matches the theme's desktop
 * breakpoint, so the hamburger disappears exactly as the inline menu appears —
 * no width with neither. Scoped to .navbar-primary so the off-canvas CLOSE
 * button (same classes, but inside .offcanvas) is unaffected.
 */
@media ( min-width: 970px ) {
	.navbar-primary .offcanvas-toggle {
		display: none !important;
	}
}

/*
 * Grid post cards — bordered "card" style (Uncrate-like).
 *
 * Card markup: article.post-grid (20px horizontal column gutter) > .post-outer
 * > [.post-inner = image, .post-inner = text]. The border goes on .post-outer
 * (inside the gutter) so cards are separate and spaced. The image stays flush
 * to the top/sides; the text .post-inner is inset with padding.
 *
 * height:100% makes the bordered box fill the grid row's height so both cards
 * in a row match. The Grid layout already stretches the article items to equal
 * height per row, so a shorter card simply gets white space below its text
 * inside the border instead of a stunted box.
 */
.post-grid .post-outer {
	border: 1px solid #e5e5e5 !important;
	height: 100% !important;
}
.post-grid .post-inner:has( .entry-title ) {
	margin-top: 0 !important;
	padding: 24px !important;
}