/*
Theme Name: Bluerizon Landing Site
Theme URI: https://bluerizon.io
Description: The bluerizon.io marketing site. A child of the Skincare theme: it inherits the Bluerizon builder and every future update, and carries only the demo pack for the sales pages. The Skincare theme must stay installed, active or not, because the builder lives in it. Not for distribution to customers.
Author: Bluerizon
Author URI: https://bluerizon.io
Template: skincare
Version: 6.8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bluerizon-landing-site
*/

/*
 * Deliberately almost empty.
 *
 * Everything the sales pages need is expressed as builder Style values inside
 * the imported documents, so it stays editable in the inspector instead of
 * living in a stylesheet nobody remembers to open. Add rules here only for
 * things the builder genuinely cannot express.
 */

/* ==========================================================================
   Front page only: the hero is a full-bleed image that belongs UNDER the
   header, not below it.

   theme.css reserves `--sk-header-h + --sk-content-offset` on .bz-content so a
   document that starts with a heading is not drawn through the logo. Right for
   a page that starts with text; wrong for one that starts with a full-width
   image, where the reserve leaves a band of flat sage above the photo.

   The `body` in the selector is not decoration. theme.css uses
   `body:not(.sk-snap-page) .sk-main > .bz-content` - three classes and an
   element. `.home .sk-main > .bz-content` is three classes and no element, so
   it LOSES on specificity and the padding came back. Matching the element
   count wins it, and being in the child stylesheet settles the tie.
   ========================================================================== */

body.home .sk-main > .bz-content,
body.home .bz-main > .bz-content {
	padding-top: 0;
}

/* The copy inside the hero still has to clear the fixed bar. */
body.home .sk-main > .bz-content > .bz-section:first-child > .bz-section-inner,
body.home .bz-main > .bz-content > .bz-section:first-child > .bz-section-inner {
	padding-top: var(--sk-header-h, 92px);
}

@media (max-width: 767px) {
	body.home .sk-main > .bz-content,
	body.home .bz-main > .bz-content {
		padding-top: 0 !important;   /* the theme rule is !important here */
	}
	body.home .sk-main > .bz-content > .bz-section:first-child > .bz-section-inner,
	body.home .bz-main > .bz-content > .bz-section:first-child > .bz-section-inner {
		padding-top: var(--sk-header-mobile-h, 60px);
	}
}

/* ==========================================================================
   Inner pages: one clearance under the header, not two.

   theme.css reserves `--sk-header-h + --sk-content-offset` on .bz-content.
   The content offset is meant for a product page that opens on a title with
   nothing above it; the sales pages already open on a section that carries its
   own 72px top padding, so the two stack and leave a dead band of roughly a
   hundred pixels between the bar and the eyebrow.

   Reserve exactly the header height here and let the section's own padding do
   the rest, so the spacing stays where it is editable - in the inspector.

   Specificity, same arithmetic as the home rule above: theme.css uses
   `body:not(.sk-snap-page) .sk-main > .bz-content`, which is one element and
   three classes (`:not()` counts its argument). `body:not(.home) …` matches
   that exactly, and the child stylesheet loads last, so it takes the tie.
   ========================================================================== */

body:not(.home) .sk-main > .bz-content,
body:not(.home) .bz-main > .bz-content {
	padding-top: var(--sk-header-h, 92px);
}

@media (max-width: 767px) {
	body:not(.home) .sk-main > .bz-content,
	body:not(.home) .bz-main > .bz-content {
		padding-top: var(--sk-header-mobile-h, 60px) !important;
	}
}

/* ==========================================================================
   The two phone captures are one exhibit, so they have to be one height.

   `height: 100%` on a figure whose parent has no height resolves to auto, and
   each capture then keeps its own aspect - 584x805 next to 588x826 is a
   visible step. The wrapper carries the ratio; the figures and their images
   fill it and crop rather than stretch.
   ========================================================================== */

.bz-image img {
	display: block;
}


/* ==========================================================================
   The header search is gone.

   Not hidden because it is ugly - hidden because it cannot answer. Builder
   documents live in bz_documents and leave post_content empty, so a core
   search matches titles only. Until the parent mirrors document text into
   post_content, a field that returns "Nothing here yet." for a word printed
   on the page is worse than no field.

   Selectors, not a single class, because this is the parent's markup and the
   toggle may be an icon button with no "search" in its class name. Both the
   class and the accessible label are covered, and everything is scoped inside
   the header, where nothing else legitimately carries that word.

   display:none, not visibility or opacity: it has to leave the tab order and
   the accessibility tree too, not just the picture.
   ========================================================================== */

header [class*="search" i],
header [id*="search" i],
header [aria-label*="search" i],
header [data-search],
header form[role="search"],
.sk-header [class*="search" i],
.sk-header [aria-label*="search" i],
.sk-site-header [class*="search" i],
.sk-site-header [aria-label*="search" i] {
	display: none !important;
}

/* ==========================================================================
   The mark in the footer brand column.

   Sized here as well as inline, and given its own bottom margin so it sits on
   the same rhythm as the column headings opposite it (20px, matching
   skincare_footer_heading_gap).
   ========================================================================== */

.bz-footer-mark {
	display: block;
	width: 44px;
	height: auto;
	margin: 0 0 20px;
}


/* ==========================================================================
   The newsletter field must not shout back.

   theme.css put `text-transform: uppercase` on the form FIELDS in order to get
   uppercase placeholders. text-transform does not distinguish the placeholder
   from the value, so it repaints whatever a visitor types: an email address
   typed in lower case appears in capitals, which reads as a broken field and
   makes people retype it.

   Fixed in the parent from 5.63.1, where the rule moved to ::placeholder.
   This override is here so the site is correct before that update lands, and
   is harmless afterwards - it states the same thing the parent now states.
   ========================================================================== */

.bz-form input[type="text"],
.bz-form input[type="email"],
.bz-form textarea {
	text-transform: none;
}

.bz-form ::placeholder {
	text-transform: uppercase;
}