/*
Theme Name: JBV
Description: Flatsome child theme — Bleverde.com instance. Luxury villa estate, Gavalochori, Chania, Crete. Bespoke styling is split between this file and the Simple Custom CSS & JS plugin.
Author: J. Mihai
Template: flatsome
Version: 1.0.0
Text Domain: jbv
*/

/* -------------------------------------------------------------------
 * Bleverde — theme-level CSS only.
 *
 * WHAT BELONGS HERE
 *   - Brand-wide rules that must ship with the theme.
 *   - Hooks onto the jm-* section classes (see CLAUDE.md §4.4).
 *
 * WHAT DOES NOT BELONG HERE
 *   - Anything Flatsome already exposes as an element option
 *     (bg_color, padding, margin, height, ...). Set those in UX Builder
 *     so the scoped CSS is generated against the element _id.
 *   - Experimental / bespoke tweaks. Those go in the
 *     Simple Custom CSS & JS plugin so they stay editable from the admin.
 * ------------------------------------------------------------------- */


/* -------------------------------------------------------------------
 * Heading scale — parity with the original Divi site
 * -------------------------------------------------------------------
 * Font family, colours, base size and text-transform are all set through
 * Flatsome's Customizer (see _migration/_set-theme-styles.php) and belong
 * there, not here.
 *
 * These sizes are here only because Flatsome exposes a single percentage
 * scale (type_size) and has no per-heading size control, so there is no
 * Customizer route to the exact values the live site used:
 *
 *   h1 35px  h2 30px  h3 25px  h5 18px  h6 16px   (desktop)
 *   headings line-height 1.2em, body line-height 1.7em
 *
 * Divi's own responsive steps were h1 30/26, h2 26/23, h3 22/20 for
 * tablet/phone; mirrored below.
 * ------------------------------------------------------------------- */

/*
 * Fallback stack. Flatsome hardcodes ", sans-serif" after the chosen family, but
 * Anonymous Pro is a MONOSPACE face — the original site declared
 * `'Anonymous Pro', monospace`. If the webfont fails to load, sans-serif changes the
 * character of the whole site, so the fallback is corrected here.
 */
body,
input,
textarea,
select,
button,
h1, h2, h3, h4, h5, h6,
.header-nav,
.nav > li > a {
	font-family: "Anonymous Pro", "Courier New", monospace;
}

h1 { font-size: 35px; }
h2 { font-size: 30px; }
h3 { font-size: 25px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

h1, h2, h3, h4, h5, h6 {
	line-height: 1.2em;
}

body {
	line-height: 1.7em;
}

@media (max-width: 849px) {
	h1 { font-size: 30px; }
	h2 { font-size: 26px; }
	h3 { font-size: 22px; }
}

@media (max-width: 549px) {
	h1 { font-size: 26px; }
	h2 { font-size: 23px; }
	h3 { font-size: 20px; }
}

/* The live site tracked out its navigation by 1px. No Customizer control for it. */
.header-nav .menu-item > a {
	letter-spacing: 1px;
}


/* -------------------------------------------------------------------
 * Fact tables inside [col] blocks
 * -------------------------------------------------------------------
 * Flatsome has no built-in table element, so comparison and distance
 * tables are raw HTML in a column (the preferred escalation over
 * inventing a shortcode). These rules are the structural styling that
 * has to ship with the theme.
 * ------------------------------------------------------------------- */

.jm-compare-table,
.jm-distance-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
	font-size: 0.95em;
}

.jm-compare-table th,
.jm-compare-table td,
.jm-distance-table th,
.jm-distance-table td {
	padding: 0.7em 0.9em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	text-align: left;
	vertical-align: top;
}

.jm-compare-table thead th {
	border-bottom-width: 2px;
	font-weight: 600;
}

/* Row-label column: de-emphasised, so the values read as the content. */
.jm-compare-table tbody th,
.jm-distance-table th {
	font-weight: 600;
	white-space: normal;
}

.jm-distance-table td {
	text-align: right;
	white-space: nowrap;
}

/* Wide tables must scroll inside their own column, never widen the page. */
.jm-compare-table,
.jm-distance-table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 549px) {
	.jm-compare-table,
	.jm-distance-table {
		font-size: 0.88em;
	}

	/* Stacked distance rows read better than a squeezed two-column table. */
	.jm-distance-table th,
	.jm-distance-table td {
		display: block;
		width: 100%;
	}

	.jm-distance-table th {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.jm-distance-table td {
		text-align: left;
		padding-top: 0.2em;
		opacity: 0.75;
	}
}

/* The /rates/ table is styled by the JBV Villa Dates plugin (.jbv-rates), not here. */

/* Keep the map embed from inheriting the theme's iframe margins. */
.jm-map-embed iframe {
	display: block;
}

/* Until marketing consent, WPConsent swaps the map for a placeholder. The wrapper gets its
 * height from padding, so the placeholder must fill it the way the iframe does. */
.jm-map-embed > .wpconsent-iframe-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Its button follows the site's pill rule (CLAUDE.md §4.2b). */
.wpconsent-iframe-accept-button {
	border-radius: 40px;
}


/* -------------------------------------------------------------------
 * Homepage photograph grid — .jm-home-grid
 * -------------------------------------------------------------------
 * The grid reproduces the live site's Modula custom-grid: each cell's
 * aspect ratio is set per image with [ux_image height="…%"], which
 * Flatsome renders as padding-top on the inner wrapper.
 *
 * That works on desktop and tablet, where the cell keeps its column
 * span. It breaks on mobile: every column becomes full width, so a
 * cell authored as span-8 × 2-high (25%) would render as a ~98px
 * sliver across the screen.
 *
 * [ux_image] has no height__sm — the shortcode accepts a single
 * `height` (see flatsome/inc/shortcodes/ux_image.php) — so there is no
 * Customizer or builder route to a responsive value, and this is the
 * one place the ratio has to be overridden in CSS.
 *
 * !important is required because Flatsome writes the per-image height
 * into an inline style attribute on .img-inner, which no selector can
 * outrank. Kept as narrow as possible: one property, inside a mobile
 * media query, scoped to this section.
 * ------------------------------------------------------------------- */

@media (max-width: 549px) {
	.jm-home-grid .img .img-inner {
		padding-top: 66% !important; /* a consistent 3:2 down the single column */
	}
}

/*
 * Gutter. Flatsome's row-small gives each column 9.8px of side padding and
 * 19.6px below, so the gaps land at ~19.6px. The original Modula grid used
 * 10px, so halve the padding.
 *
 * DO NOT add negative margins to the row here. Flatsome centres a [row] that
 * sits directly inside a [section] — which these do — with
 * `.row { margin-left: auto; margin-right: auto }`. Its own negative-margin
 * rule for row-small is scoped to `.container .row-small` and `.row .row-small`,
 * so it does not apply to a top-level row. An unscoped margin override here
 * replaces the auto margins and pins the whole grid to the left edge instead
 * of centring it. That was a real bug, fixed on 24 Aug 2026.
 */
.jm-home-grid .row-small > .col {
	padding: 0 5px 10px;
}


/* -------------------------------------------------------------------
 * Villa photo mosaics — .jm-villa-grid
 * -------------------------------------------------------------------
 * /elia/ and /levanda/ on the live site use a Modula "custom-grid":
 * 12 columns, 10px gutter, and every image given a width in columns and
 * a height in square cells. Unlike the homepage grid it is a true 2D
 * mosaic — rows do not wrap left to right, because a tall image lets
 * later images fill in beside it.
 *
 * Verified against Modula's own frontend script (createCustomGallery in
 * jquery-modula.min.js) rather than inferred:
 *
 *     e = (containerWidth - gutter * (columns - 1)) / columns
 *     item.width  = e * dataWidth  + gutter * (dataWidth  - 1)
 *     item.height = e * dataHeight + gutter * (dataHeight - 1)
 *
 * The same `e` sizes both axes, so the cells are SQUARE, and placement is
 * `layoutMode: "packery"` — bin packing that backfills gaps. CSS Grid's
 * `grid-auto-flow: dense` is the same first-fit-with-backfill rule, so the
 * markup only needs a span per image, not coordinates. Simulating it tiles
 * both grids to 100% coverage with no overlaps (12 x 48 for Elia, 12 x 61
 * for Levanda), which is what confirms the reconstruction.
 *
 * (The galleries also carry a `height: 800` option. It is read only by
 * createGrid(), used for the "creative-gallery" type, and has no effect on
 * a custom grid — do not try to honour it.)
 *
 * Each photo stays a real [ux_image] in its own [col], so the mosaic is
 * still editable in UX Builder and keeps srcset, alt text, lazy loading
 * and the grouped lightbox.
 *
 * NOTE: no margins are set on the row. Flatsome centres a top-level row
 * with `.row { margin-left: auto; margin-right: auto }` — overriding that
 * is what broke the homepage grid's centring. Spacing comes from `gap`.
 * ------------------------------------------------------------------- */

@supports (display: grid) {

	.jm-villa-grid .row.jm-photo-grid {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-auto-flow: dense;
		gap: 10px;
		width: 100%;
		/*
		 * Fill the full content width. Measured at a 1440 viewport: the section is
		 * 1,260px and .section-content inside it is 1,200px, so 1,200 is the widest
		 * the mosaic can be without breaking out with negative margins — which is
		 * exactly what broke the homepage grid's centring. The live page runs its
		 * grid at 1,324px because that theme's content column is wider; matching it
		 * here would mean fighting the site's own layout, so it is left alone.
		 *
		 * The selector carries `.row` on purpose. Flatsome prints the Customizer
		 * site width as INLINE CSS in the head — `.row.row-collapse{max-width:1260px}`
		 * — which is specificity (0,2,0) and lands after the child stylesheet, so a
		 * plain `.jm-villa-grid .jm-photo-grid` ties and loses on source order.
		 */
		max-width: 100%;
		/*
		 * The mosaic is a [row_inner], and Flatsome pulls inner rows out by the
		 * column gutter (`.row .row-small { margin: 0 -10px }`). With width:100%
		 * that shifted the grid 10px left, leaving 0 on the left and 20 on the right.
		 * Safe to zero here because this is the INNER row. The top-level row's auto
		 * margins, which caused the homepage centring bug, are not touched.
		 */
		margin-left: 0;
		margin-right: 0;
	}

	/*
	 * Flatsome's clearfix — `.clear:after, .clearfix:after, .container:after,
	 * .row:after { content: ""; display: table }` — is harmless in a flex row,
	 * but in a grid container a pseudo-element with `content` becomes a REAL
	 * GRID ITEM. Because this mosaic tiles to 100% with no holes, it lands in an
	 * implicit 49th row and drags the whole grid out of shape.
	 */
	.jm-villa-grid .jm-photo-grid::before,
	.jm-villa-grid .jm-photo-grid::after {
		content: none;
	}

	/*
	 * The span="" attribute makes Flatsome emit large-8 / medium-6 / small-12,
	 * which carry `flex-basis` and `max-width` percentages. On a flex row those
	 * ARE the column width. On a grid item the percentage resolves against the
	 * item's own grid area instead, so a large-8 image was being squeezed into
	 * 66.67% of its cell with the rest left empty. Every non-full-width image
	 * was affected. The spans are kept only as the no-grid fallback, so they are
	 * neutralised here rather than removed from the markup.
	 */
	.jm-villa-grid .jm-photo-grid > .jm-g {
		max-width: none;
		flex-basis: auto;
		width: auto;
		padding: 0;
		min-width: 0;
		min-height: 0;
	}

	/*
	 * aspect-ratio gives the grid its height, so the cells stay square and the
	 * whole mosaic scales fluidly instead of being pinned to Modula's fixed px.
	 * The row count is the packed height of each grid.
	 *
	 * This is within about 0.75% of exact: the true height is
	 * e * rows + gutter * (rows - 1), and a plain ratio cannot carry the
	 * constant gutter term. The cells end up a fraction under square, which is
	 * roughly 30px across a 4,200px mosaic. Not worth a calc() that would only
	 * be exact at one viewport width.
	 */
	.jm-elia-grid .jm-photo-grid {
		grid-template-rows: repeat(48, 1fr);
		aspect-ratio: 12 / 48;
	}

	.jm-levanda-grid .jm-photo-grid {
		grid-template-rows: repeat(61, 1fr);
		aspect-ratio: 12 / 61;
	}

	/* Let each column fill its grid cell and crop the photo to it. */
	.jm-villa-grid .jm-g .col-inner,
	.jm-villa-grid .jm-g .img,
	.jm-villa-grid .jm-g .img > a,
	.jm-villa-grid .jm-g .img-inner {
		height: 100%;
	}

	.jm-villa-grid .jm-g .img-inner {
		overflow: hidden;
	}

	.jm-villa-grid .jm-g img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.jm-w1 { grid-column: span 1; }
	.jm-w2 { grid-column: span 2; }
	.jm-w3 { grid-column: span 3; }
	.jm-w4 { grid-column: span 4; }
	.jm-w5 { grid-column: span 5; }
	.jm-w6 { grid-column: span 6; }
	.jm-w7 { grid-column: span 7; }
	.jm-w8 { grid-column: span 8; }
	.jm-w9 { grid-column: span 9; }
	.jm-w10 { grid-column: span 10; }
	.jm-w11 { grid-column: span 11; }
	.jm-w12 { grid-column: span 12; }

	.jm-h1 { grid-row: span 1; }
	.jm-h2 { grid-row: span 2; }
	.jm-h3 { grid-row: span 3; }
	.jm-h4 { grid-row: span 4; }
	.jm-h5 { grid-row: span 5; }
	.jm-h6 { grid-row: span 6; }
	.jm-h7 { grid-row: span 7; }
	.jm-h8 { grid-row: span 8; }
	.jm-h9 { grid-row: span 9; }

	/*
	 * No mobile or tablet override, on purpose. The live grids set Modula's
	 * `enableResponsive: 0`, so on a phone the original keeps the full
	 * 12-column mosaic and scales it down (verified on bleverde.com/elia/ at
	 * 390px: 359px wide, 10px gutter, first photo 113x114). The rules above are
	 * already fluid — square cells from aspect-ratio, fixed 10px gap — so they
	 * reproduce that at every width with no media query.
	 *
	 * (A 2-up square layout used to live here. It stopped applying once the
	 * grid selector above gained `.row` for specificity, and collapsed the
	 * mosaic into a strip of 44px thumbnails on phones. Removed 28 Sep 2026.)
	 */
}

/* ---------------------------------------------------------------------------
 * Crete guides — table of contents (.jm-guide-toc)
 * Links jump to [scroll_to] anchors placed before each section's H2.
 * On phones the two link columns stack; close the column gap so they read
 * as one list.
 * ------------------------------------------------------------------------- */
.jm-guide-toc .jm-toc-list {
	margin-bottom: 0.4em;
}

@media (max-width: 549px) {
	.jm-guide-toc .row .row .col {
		padding-bottom: 0;
	}
}

/* /retreats/ — the original Divi headline was bold and a size down from a
 * default H1; keep that look for the migrated intro. */
.jm-retreats-original h1 {
	font-size: 1.9em;
	font-weight: 700;
	margin-bottom: 0.9em;
}

@media (max-width: 549px) {
	.jm-retreats-original h1 {
		font-size: 1.5em;
	}
}

/* Polylang language switcher in the main nav: lowercase, like every other nav label. */
.header-nav .lang-item > a,
.nav-sidebar .lang-item > a {
	text-transform: lowercase;
}

/*
 * Header language switcher (Flatsome "Languages" element, top bar right): flag and name
 * centred on one line, flag first as in the drop-down, and a little smaller than the nav.
 */
.header-language-dropdown__link,
.header-language-dropdown .nav-dropdown a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.85em;
	/* Lowercase like every other label on the site; the top bar's .nav-uppercase would otherwise capitalise it. */
	text-transform: lowercase;
}
.header-language-dropdown .nav-dropdown a {
	display: flex;
}
.header-language-dropdown__link .image-icon {
	order: -1;
}
/* Flatsome sizes top-bar links at .8em (`.nav > li > a`); the switcher sits a little below that. */
.nav > li.header-language-dropdown > a.header-language-dropdown__link {
	font-size: 0.72em;
	text-transform: lowercase;
}
.header-language-dropdown .image-icon,
.header-language-dropdown .icon-image {
	display: inline-flex;
	margin: 0;
}
.header-language-dropdown .image-icon img,
.header-language-dropdown .icon-image img {
	display: block;
	width: 16px;
	height: auto;
}
.header-language-dropdown__link .icon-angle-down {
	margin: 0;
}