/*
Theme Name:   Darkside Child
Theme URI:    https://madeinthedark.com/darkside
Description:  Child of the Darkside theme. Everything you change belongs in here - the parent is replaced on update, this is not.
Author:       Made In The Dark LLC
Template:     darkside-theme
Version:      1.8.0
License:      GPL-2.0-or-later
Text Domain:  darkside-child
*/

/* The parent stylesheet is loaded by functions.php, not by @import - an
   @import blocks rendering until it has downloaded, on every page. */

/* 1.4.1 - Turning a 3D model selected the words around it.
 *
 * A drag that starts on the model is still a drag as far as the document is
 * concerned, so the browser ran a text selection out from under the pointer and
 * across the heading and the address beside it. The block is grabbed and pulled
 * by design, so there is nothing in it to select.
 *
 * Both halves are needed. The rule on the block itself stops a selection ever
 * starting there; the body class, set for as long as a pointer is down on a
 * model, stops one that has already started from running on into the rest of
 * the page. A selection that is already in progress ignores a later
 * user-select on the element it began in. */
.ds-model3d,
.ds-model3d * {
	-webkit-user-select: none;
	user-select: none;
}

body.cc-turning,
body.cc-turning * {
	-webkit-user-select: none;
	user-select: none;
}

/* The gap under the footer is Theme Settings, Footer, Padding bottom. It was a
   margin written here, which is the wrong place: the theme owns that spacing
   and the setting was sitting at nought with a stylesheet quietly overriding
   it. */

/* The unit schedule on a property page. Without widths the headings sit over
   whichever column the longest cell happens to make, which is what put Tenant
   above the status and Status over nothing. */
.cc-unit-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.cc-unit-table th,
.cc-unit-table td {
	text-align: left;
	padding: 11px 16px 11px 0;
	border-bottom: 1px solid var(--ds-line, rgba(0, 0, 0, .14));
	vertical-align: baseline;
}

.cc-unit-table th { font-weight: 600; }

.cc-unit-table th:nth-child(1), .cc-unit-table td:nth-child(1) { width: 22%; }
.cc-unit-table th:nth-child(2), .cc-unit-table td:nth-child(2) { width: 18%; }
.cc-unit-table th:nth-child(3), .cc-unit-table td:nth-child(3) { width: 34%; }
.cc-unit-table th:nth-child(4), .cc-unit-table td:nth-child(4) { width: 26%; }

.cc-tbc { opacity: .45; }

/* The building facts, two columns, label and value. */
.cc-facts {
	width: 100%;
	border-collapse: collapse;
}

.cc-facts th,
.cc-facts td {
	text-align: left;
	padding: 9px 16px 9px 0;
	border-bottom: 1px solid var(--ds-line, rgba(0, 0, 0, .1));
	vertical-align: baseline;
}

.cc-facts th {
	width: 32%;
	font-weight: 600;
}

/* The bar's right hand end is only right hand if something pushes it there.
   With nothing in the left or middle slots it sat immediately after the logo,
   a third of the way across. */
.ds-footer-bar .ds-fbar-right {
	margin-left: auto;
}

/* The cropped drawing plates are full resolution on purpose - a floorplan is
   read, not glanced at - and at full size they run off the side of the column.
   They scale to it instead. */
.ds-el img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------ the hero -- */

/* One site at a time, full height, with the unit schedule over it.
 *
 * Colors are the theme's own variables throughout rather than a palette of its
 * own, so changing the site's colors changes this with it instead of leaving
 * one component behind. */
/* Height is set in script to the window less whatever sits above it, because
   the header is in the flow rather than over the top: at a flat 100svh the hero
   is a full screen that starts below the header, so its own bottom corner - the
   arrows - falls off the first screen. */
/* 1.6.1 - The scene is the row's background, and the row has columns.
 *
 * A Darkside row backs onto a color, a gradient, an image or a video, and there
 * is no setting for a 3D scene, so the stage is the first element in the left
 * column and is lifted out of the flow here to cover the whole row. Everything
 * else in the row is an ordinary builder column sitting on top of it, which is
 * what makes the hero editable as columns rather than as one block of markup.
 *
 * `:has()` rather than a class on the row: rows carry no custom class field -
 * `css_class` is an element setting - so the row is identified by what is in it.
 */
.ds-row:has(.cc-hero) {
	position: relative;
	min-height: var(--cc-hero-h, 100svh);
	/* The navy out of the logo, opening up towards the ground.
	 *
	 * The renderer is alpha and the scene has no background of its own, so this
	 * is what is actually behind the building and the gradient shows through it
	 * rather than being painted over by the canvas. Both ends are brand values:
	 * the logo navy at the top, the link hover blue at the horizon. */
	background: linear-gradient(180deg, #05325e 0%, #05325e 46%, #0a4f8f 100%);
	color: #fff;
	overflow: hidden;
}

/* 1.7.3 - the white band under the hero.
 *
 * The row after a hero carried its own top padding on top of the site's row
 * spacing, which put 167px of white between a full-bleed dark band and the
 * first line of content. Only the row that follows a hero loses it; the spacing
 * between every other row is the site's own. In the stylesheet rather than as
 * padding on the row itself, so it holds wherever a hero is used. */
.ds-row:has(.cc-hero) + .ds-row {
	padding-top: 0;
}

.cc-hero {
	position: absolute;
	inset: 0;
	z-index: 0;
	-webkit-user-select: none;
	user-select: none;
}

/* The columns ride above the scene. They do not take the pointer, or the drag
   that turns the building would die wherever a column covers it; the things
   inside them that are meant to be clicked take it back. */
.ds-row:has(.cc-hero) > .ds-row-in {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

/* Every element in the row stacks above the scene, and the one that IS the
   scene drops out of the running.
 *
 * Needed because the stage sits inside the same column as the heading: within
 * the stacking context the row makes, a positioned box paints over ordinary
 * flow content whatever its z-index, so the h1 was behind the buildings with
 * only the few letters that crossed the sky showing. */
.ds-row:has(.cc-hero) .ds-col > .ds-el {
	position: relative;
	z-index: 1;
}

.ds-row:has(.cc-hero) .ds-col > .ds-el:has(> .cc-hero) {
	position: static;
	z-index: auto;
}

.ds-row:has(.cc-hero) a,
.ds-row:has(.cc-hero) button,
.ds-row:has(.cc-hero) .cc-hero-panel {
	pointer-events: auto;
}

/* White, because the column is over the navy scene rather than on the page. */
.ds-row:has(.cc-hero) h1,
.ds-row:has(.cc-hero) p {
	color: #fff;
}

.cc-hero-stage {
	position: absolute;
	inset: 0;
	cursor: grab;
	touch-action: pan-y;
}

.cc-hero-stage.is-turning {
	cursor: grabbing;
}

/* A canvas is a replaced element with an intrinsic size, so inset alone leaves
   it 300x150 in the corner. It gets a real size. */
.cc-hero-stage canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* 1.5.4 - A card, not a column.
 *
 * This was pinned top to bottom and carried the unit schedule, so it read as a
 * full height sheet of small print beside the building. It holds a name and an
 * address, so it is only as tall as those, sitting clear of the header above it
 * and off the bottom of the frame. The schedules are in the body of the page. */
.cc-hero-panel {
	/* In the flow of its own column now, not pinned to the hero. */
	max-width: 480px;
	margin-left: auto;
	padding: clamp(22px, 2.2vw, 34px) clamp(22px, 2.2vw, 34px) clamp(24px, 2.4vw, 32px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	border-radius: 12px;
	background: color-mix(in srgb, #02203d 72%, transparent);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
}

/* The theme sets heading and link colors explicitly, so inheriting white from
   the panel is not enough - they have to be told. */
.cc-hero-panel h2,
.cc-hero-panel p,
.cc-hero-panel a,
.cc-hero-panel li {
	color: #fff;
}

/* The menu color over the hero is Theme Settings, Header, the transparent
   header's own link and hover colors. It was a rule here, which was the wrong
   place and lost to the theme's own menu color anyway. */

.cc-hero-count {
	margin: 0;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .6;
}

.cc-hero-name {
	margin: 0;
	font-family: var(--ds-font-heading);
	font-size: clamp(26px, 2.4vw, 44px);
	line-height: 1.04;
}

.cc-hero-addr {
	margin: 0;
	opacity: .72;
}

.cc-units {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

/* 1.5.3 - Flex, not a fixed grid.
 *
 * A row carries two, three or four parts depending on whether that unit has a
 * tenant and a known status. A four column grid template gave the missing ones
 * an empty cell each and pushed the parts that were there into columns too
 * narrow for them, so "1,729 sq ft" broke across two lines and the status went
 * onto a line of its own. Laid out in a row, each part takes the width it
 * needs and only the tenant name gives way. */
.cc-u {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
	font-size: 15px;
}

/* Ten units down one column runs off the bottom of the panel. Across two it
   fits, which is what lets the panel refuse a scrollbar. */
.cc-units.is-two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(14px, 1.8vw, 32px);
}

.cc-units.is-two .cc-u {
	padding: 7px 0;
	font-size: 13.5px;
	gap: 8px;
}

.cc-u-id {
	font-weight: 600;
	white-space: nowrap;
}

/* The area is the one part that must never break: "1,729 sq ft" across two
   lines is what doubled the height of every row. */
.cc-u-size {
	margin-left: auto;
	opacity: .72;
	white-space: nowrap;
}

/* The tenant is the only part that gives way, and it ellipses rather than
   wrapping. */
.cc-u-who {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: .92;
}

/* With a tenant present the area goes back to sitting next to it rather than
   being pushed to the far edge. */
.cc-u:has(.cc-u-who) .cc-u-size { margin-left: 0; }

.cc-u-state {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .55;
	white-space: nowrap;
}

/* Available is the one worth spotting, so it takes the accent. Leased is not a
   fault or a warning, so it stays quiet rather than going red. */
.cc-u-state.is-free {
	opacity: 1;
	color: #7fd4a8;
}

/* `body[class]` is weight, not decoration: the theme fills a button from
   `.ds-btn-solid .ds-btn:not(.ds-btn-secondary)`, three classes, and this is the
   one button on the site that is an outline on a dark card rather than a filled
   one. Written against the body's class rather than naming `ds-btn-solid`, so it
   still holds if the site's button style is changed in Theme Settings. */
body[class] .cc-hero-more.ds-btn {
	/* Straight after the schedule. Pushed to the bottom with margin-top:auto it
	   sat below the panel whenever the content was taller than the box, and the
	   panel does not scroll. */
	margin-top: 26px;
	align-self: flex-start;
	padding: 13px 22px;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
	/* 1.7.1 - it is a .ds-btn now, for the site's hover and its arrow. The base
	   class brings a background and a fill color of its own, which on the panel
	   is a navy button on a navy card; the outline is what this one is. */
	background: transparent;
	gap: .55em;
}

/* The site's fade hover paints `--fill-h`, and that variable is not set on a
   button sitting outside a palette - so the fade landed on black. Answered at a
   weight that beats `.ds-hover-fade .ds-btn:hover`, which is three classes: the
   same white the panel's own card uses, with the brand navy on it. */
.ds-hover-fade .cc-hero-more.ds-btn:hover,
.cc-hero-more.ds-btn:hover {
	background: #fff;
	color: #05325e;
	border-color: #fff;
}

.cc-hero-nav {
	position: absolute;
	left: clamp(16px, 3vw, 48px);
	/* 1.7.7 - the same distance off the foot as the card in the other column.
	   That card is held off the bottom by the row's own padding, which is the
	   site gutter, so the arrows take the gutter too and the two line up at any
	   width rather than at one. Moving them down also closes the gap to the line
	   of text above them. */
	bottom: var(--ds-gutter, 42px);
	display: flex;
	gap: 10px;
	z-index: 2;
}

/* 1.7.1 - and the text column kept out of their corner.
 *
 * The arrows are pinned to the foot of the hero and the column's content is
 * centered in it, so on a short window the intro paragraph grew down into them
 * and the two overlapped. The column is given the arrows' own room back as
 * padding, which lifts what is centered in it by half as much and leaves the
 * corner clear at every height. */
.ds-row:has(.cc-hero) > .ds-row-in > .ds-col:first-child {
	/* 1.7.6 - tightened. It was the arrows' own bottom offset plus 20, which
	   left a band of empty hero between the last line of text and the buttons. */
	padding-bottom: calc(56px + 18px);
}

.cc-hero-nav button {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	backdrop-filter: blur(10px);
	color: #fff;
	cursor: pointer;
	line-height: 1;
}

/* 1.5.2 - The arrows were off center in their circles.
 *
 * They were arrow characters, and a glyph is placed by the font's metrics: side
 * bearings left and right, and a baseline with room under it for descenders.
 * Centering the box the glyph sits in does not center the ink you can see, so
 * both arrows sat high and to one side. They are chevron paths now, drawn
 * symmetrically about the middle of a square viewBox.
 *
 * `display: block` is load bearing: an inline SVG sits on that same baseline
 * and brings the descender gap with it into the grid cell. */
.cc-hero-nav button svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cc-hero-nav button:hover {
	background: #fff;
	color: #05325e;
}

/* 1.5.9 - The "Drag to turn" caption is gone, and its rules with it. */

/* 1.7.3 - a spinner while the next property arrives, not a fade to blue.
 *
 * The stage used to drop to a quarter opacity for the length of the swap, which
 * on an alpha canvas means fading the building out into the row's gradient -
 * the picture emptied to blue and came back. The scene is left alone now and a
 * ring turns over the top of it instead, so the change reads as loading rather
 * than as the building leaving. */
.cc-hero-wait {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border: 2px solid rgba(255, 255, 255, .25);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
}

.cc-hero.is-changing .cc-hero-wait {
	opacity: 1;
	animation: cc-hero-turn .8s linear infinite;
}

@keyframes cc-hero-turn {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cc-hero.is-changing .cc-hero-wait { animation: none; }
}

/* Under a phone the panel cannot take a third of the screen and leave a
   building worth looking at, so it comes off the side and sits along the
   bottom. */
@media (max-width: 860px) {
	/* The two columns are stacked by the builder at this width, so the card is
	   simply full width under the heading rather than pinned anywhere. */
	.cc-hero-panel {
		max-width: none;
		margin-left: 0;
	}

	/* The row is still a screen tall and now holds both columns one above the
	   other, so it is given room to be as tall as they need. */
	.ds-row:has(.cc-hero) {
		min-height: var(--cc-hero-h, 100svh);
		height: auto;
	}

	.cc-hero-nav {
		bottom: clamp(14px, 3vh, 24px);
	}

	/* Stacked, so the card is the thing at the foot of the hero and the arrows
	   are pinned over it. The room goes to the card's own column, and the text
	   column above it gives back the room it was given on a wide window. */
	.ds-row:has(.cc-hero) > .ds-row-in > .ds-col:first-child {
		padding-bottom: 0;
	}

	.ds-row:has(.cc-hero) > .ds-row-in > .ds-col:last-child {
		padding-bottom: calc(56px + clamp(14px, 3vh, 24px) + 18px);
	}
}

/* 1.5.6 - The drawn logo in the preloader had no color of its own.
 *
 * The plugin strokes and then fills it with `var(--ds-pre-draw-ink,
 * currentColor)` and never sets that variable, so the mark inherited the body
 * text color - black - and drew itself in black on the navy overlay, which is
 * all but invisible. The overlay's own Color setting only reaches the spinner,
 * not the drawn mark, so the variable is answered here. */
#ds-preloader,
.ds-pre-draw {
	--ds-pre-draw-ink: #ffffff;
	--ds-pre-draw-w: 1.1;
}

/* The shapes the draw does not pick up.
 *
 * It marks the paths and polygons it can measure a length along and leaves
 * everything else alone, and the I of COMMERCIAL in this logo is a <rect> - the
 * one letter in the mark that is a plain box. Unmarked, it took no part in the
 * animation and arrived with no fill, so the preloader read COMMERC AL. Given
 * the same ink it simply sits there while the rest draws itself around it. */
.ds-pre-draw rect:not(.is-drawn),
.ds-pre-draw circle:not(.is-drawn),
.ds-pre-draw ellipse:not(.is-drawn) {
	fill: var(--ds-pre-draw-ink, #ffffff);
}

/* 1.7.4 - the overrides that propped up `assets/ink.js` are gone with it.
 *
 * They forced the menu's own colors on whenever the bar was transparent and not
 * in the alt state, which is exactly what stops Blend mode working: a color set
 * here is a color the blend has to invert, so the setting under Header, Blend
 * mode could never show through. The bar takes the theme's colors and the blend
 * does the rest. */

/* 1.6.5 - The phone glyph beside every telephone number.
 *
 * Drawn as a mask on a pseudo element rather than written into the page. A Text
 * element's content is cleaned with wp_kses_post on the way into the layout, and
 * that does not allow <svg>, so an inline icon was stripped before it was ever
 * stored and every number came out bare however many times it was added.
 *
 * A mask takes currentColor, so the glyph is the same ink as the number beside
 * it wherever it is used, and it scales with the type because it is sized in em.
 */
.cc-call a,
a.cc-tel {
	display: inline-flex;
	align-items: baseline;
	gap: .45em;
}

.cc-call a::before,
a.cc-tel::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	align-self: center;
	background: currentColor;
	-webkit-mask: var(--cc-phone) center / contain no-repeat;
	mask: var(--cc-phone) center / contain no-repeat;
}

:root {
	--cc-phone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1z"/></svg>');
}

/* 1.6.7 - The property page model sits on the brand blue.
 *
 * The shared stage canvas the viewer draws into is alpha, so whatever is behind
 * the model box shows through it. The same gradient the hero uses, so a building
 * looks the same here as it does on the home page. */
.ds-el.ds-model3d {
	background: linear-gradient(180deg, #05325e 0%, #05325e 46%, #0a4f8f 100%);
	border-radius: 10px;
	overflow: hidden;
}

/* A drawing and its caption read as one thing.
 *
 * The plates were evenly spaced, so each caption sat as far from the drawing it
 * describes as from the next one down and attached itself to the wrong image.
 * The caption is pulled up under its own plate and the gap goes between pairs. */
.cc-caption {
	margin-top: 10px;
	margin-bottom: 50px;
}

.cc-caption:last-child {
	margin-bottom: 0;
}

.ds-el:has(> .cc-caption) {
	margin-bottom: 0;
}

/* 1.6.8 - The hero's columns sit on the page measure.
 *
 * The row is bleed so the scene reaches both edges of the window, and bleed also
 * takes the shell off the content inside it, so the heading started hard against
 * the glass and the card was flush to the other edge. The inner rail is given
 * back the page's own measure and gutter - the same two variables .ds-shell
 * uses - so the hero's text lines up with every other row on the site while the
 * 3D stays edge to edge behind it. */
.ds-row:has(.cc-hero) > .ds-row-in {
	max-width: var(--ds-max);
	margin-inline: auto;
	padding-inline: var(--ds-gutter);
}

/* 1.6.9 - The hero on a phone.
 *
 * Stacked, the heading was set at the desktop size and ran into the buildings,
 * and the opening line lay across them unreadable. On a narrow screen the row
 * is given room to breathe, the heading is sized for the width it actually has,
 * and the scene carries a scrim so white text is legible over whatever part of
 * the model it happens to cross. */
.cc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(2, 32, 61, .55) 0%, rgba(2, 32, 61, .15) 38%, rgba(2, 32, 61, 0) 60%);
}

@media (max-width: 860px) {
	.ds-row:has(.cc-hero) {
		min-height: 100svh;
		height: auto;
		padding-block: clamp(96px, 16vh, 150px) clamp(28px, 6vh, 56px);
	}

	.ds-row:has(.cc-hero) h1 {
		font-size: clamp(30px, 8.2vw, 46px);
		line-height: 1.05;
	}

	.ds-row:has(.cc-hero) > .ds-row-in p {
		font-size: 15px;
	}

	/* Over the whole stacked column on a phone, not just the top of it. */
	.cc-hero::after {
		background: linear-gradient(180deg, rgba(2, 32, 61, .62) 0%, rgba(2, 32, 61, .42) 55%, rgba(2, 32, 61, .2) 100%);
	}
}

/* 1.8.0 - the header blend is the theme's, and this file leaves it alone.
 *
 * 1.7.5 moved the blend off `.ds-header` and onto the brand and the top level
 * links, to keep the dropdown out of it. That could not work and did not: the
 * header is `position:sticky` with a z-index, so it is a stacking context, and
 * `mix-blend-mode` on a descendant blends against the nearest ancestor
 * stacking context's backdrop - here the header's own, which is empty and
 * transparent. The ink blended against nothing, so it stayed the color it was
 * set to: white, over a white page, unreadable on every inner page.
 *
 * What it was trying to fix is already fixed upstream, properly. The theme
 * blends `.ds-header` as one group and the Darkside plugin's subportal.js
 * lifts the first level dropdown out of the header into a container on the
 * body, so the panel is outside the blended group and renders as itself. The
 * panel cannot opt out of the group, so it leaves the group.
 *
 * Nothing replaces the rules that were here. `.ds-headblend-difference` on the
 * body is the setting, the parent stylesheet is the implementation, and this
 * file has no business overriding either.
 */

/* 1.7.8 - the gap before the credit's link.
 *
 * "Website design by Made In The Dark" is a text microwidget, and the theme
 * lays a microwidget out as a flex row with a gap - right for a row of social
 * icons, wrong for a sentence with a link in it. The words and the link were
 * two flex items 8px apart, so the space after "by" was never what separated
 * them. Setting the link to inline cannot fix it either: a flex container
 * blockifies its children, which is why display stayed `block` whatever the
 * rule said. The container is the thing to change - as an inline box it is a
 * line of text again and the ordinary word space does the spacing.
 *
 * Only the text kind. The icon and button microwidgets want their flex row. */
.ds-microwidget-is-text .ds-microwidget-text {
	display: inline;
	gap: 0;
}