/*
	Albert Site customizations on top of Hyperspace.
	Phone mockup ported from HTML5UP Fractal (CCA 3.0), recolored for dark background.

	SOURCE FILE — edit this, not assets/css/albert.css (which is generated).
	Build:  npm run build      (one-off compile of all theme styles + source maps)
	Watch:  npm run watch      (recompile on save)
	Hyperspace variables/mixins are available via e.g. `@import 'libs/vars';`.
*/
/* Hero split: text + phone mockup (Fractal concept inside Hyperspace) */
.albert-hero .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4em;
  width: 100%;
  max-width: 68em;
}

.albert-hero .albert-hero-content {
  flex: 1;
}

.albert-hero .albert-hero-visual {
  flex-shrink: 0;
}

@media screen and (max-width: 980px) {
  .albert-hero .inner {
    flex-direction: column;
    gap: 3em;
    text-align: center;
  }
  .albert-hero .albert-hero-content .actions {
    justify-content: center;
  }
  .albert-hero.wrapper.fullscreen {
    height: auto;
    min-height: 0;
    padding: 6em 0 4.5em 0;
  }
}
/* Phone mockup (from Fractal) */
.image.phone {
  box-shadow: none;
  border-radius: 0;
  margin: 1.375em 0 2.75em 0;
  width: 13em;
}

/* height:auto is load-bearing, not tidying. wp_get_attachment_image() emits the
   intrinsic width/height attributes, and with only `width: 100%` declared the
   height attribute stays in force as a fixed pixel height — a 569x643 screenshot
   rendered 222px wide came out 643px tall. The distortion looks like a cropping
   problem and is really a missing line of CSS. */
.image.phone img {
  border-radius: 0;
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}

.image.phone .inner,
.image.phone:before,
.image.phone:after {
  display: block;
  border: solid 2px rgba(255, 255, 255, 0.25);
}

.image.phone .inner {
  position: relative;
}

.image.phone .inner:before,
.image.phone .inner:after {
  content: "";
  position: absolute;
  left: 50%;
}

.image.phone .inner:before {
  top: -1.375em;
  margin-left: -1em;
  width: 2em;
  height: 0.25em;
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.25);
}

.image.phone .inner:after {
  bottom: -2.75em;
  margin-left: -1em;
  width: 2em;
  height: 2em;
  border-radius: 100%;
  border: solid 2px rgba(255, 255, 255, 0.25);
}

.image.phone:before,
.image.phone:after {
  content: "";
}

.image.phone:before {
  height: 2.5em;
  border-radius: 1em 1em 0 0;
  border-bottom: 0;
}

.image.phone:after {
  height: 3.5em;
  border-radius: 0 0 1em 1em;
  border-top: 0;
}

/* Chat conversation rendered inside the phone (alternative to a screenshot) */
.albert-chat {
  background: rgba(0, 0, 0, 0.35);
  border-left: solid 2px rgba(255, 255, 255, 0.25);
  border-right: solid 2px rgba(255, 255, 255, 0.25);
  padding: 1em 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  width: 100%;
  min-height: 22em;
  justify-content: flex-end;
}

.albert-chat .albert-msg {
  max-width: 85%;
  padding: 0.55em 0.8em;
  border-radius: 0.85em;
  font-size: 0.72em;
  line-height: 1.45;
  color: #ffffff;
}

.albert-chat .albert-msg.is-bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.12);
  border-bottom-left-radius: 0.25em;
}

.albert-chat .albert-msg.is-user {
  align-self: flex-end;
  background: rgba(93, 97, 168, 0.75);
  border-bottom-right-radius: 0.25em;
}

/* Pricing cards */
.albert-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5em;
  margin: 0 0 2em 0;
}

@media screen and (max-width: 1280px) {
  .albert-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 736px) {
  .albert-pricing-grid {
    grid-template-columns: 1fr;
  }
}
.albert-plan {
  border: solid 1px rgba(255, 255, 255, 0.25);
  border-radius: 0.5em;
  padding: 1.75em 1.5em;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.albert-plan.is-featured {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.albert-plan h3 {
  margin-bottom: 0.35em;
}

.albert-plan .albert-plan-price {
  font-size: 2em;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 0.25em;
}

.albert-plan .albert-plan-period {
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25em;
}

.albert-plan .albert-plan-desc {
  font-size: 0.9em;
  flex-grow: 1;
  margin-bottom: 1.5em;
}

.albert-plan .albert-plan-badge {
  display: inline-block;
  align-self: center;
  font-size: 0.65em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: solid 1px #ffffff;
  border-radius: 1em;
  padding: 0.25em 1em;
  margin-bottom: 1em;
  color: #ffffff;
}

/* Disclaimer emphasis */
.albert-disclaimer {
  border-left: solid 4px rgba(255, 255, 255, 0.35);
  padding-left: 1.5em;
  font-size: 0.95em;
}

/* Avatar in spotlights */
.albert-avatar-round img {
  border-radius: 100%;
}

/* WP alignment helpers inside Hyperspace typography */
.wrapper .inner img.alignleft {
  float: left;
  margin: 0 1.5em 1em 0;
}

.wrapper .inner img.alignright {
  float: right;
  margin: 0 0 1em 1.5em;
}

/* Contact Us feedback form — submit button: lighter, a bit wider, bottom-right */
.wpcf7 form.wpcf7-form p:has(> .wpcf7-submit) {
  text-align: right;
  margin-top: 0.75em;
}
.wpcf7 form.wpcf7-form p:has(> .wpcf7-submit) .wpcf7-submit {
  min-width: 18em;
  max-width: 100%;
  background-color: #ffffff;
  color: #1b1f22 !important;
  border: 0;
  box-shadow: none;
}
.wpcf7 form.wpcf7-form p:has(> .wpcf7-submit) .wpcf7-submit:hover,
.wpcf7 form.wpcf7-form p:has(> .wpcf7-submit) .wpcf7-submit:focus,
.wpcf7 form.wpcf7-form p:has(> .wpcf7-submit) .wpcf7-submit:active {
  background-color: #e8e8e8;
  color: #1b1f22;
}
.wpcf7 form.wpcf7-form p:has(> .wpcf7-submit) .wpcf7-spinner {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

/* Testimonials — horizontal card slider.
 *
 * Hyperspace's own sections are full-width bands of flowing text, so cards are the
 * one place the design language has no ready answer for. These borrow its existing
 * vocabulary rather than inventing a second one: the same hairline rgba borders as
 * .albert-plan, the same uppercase letter-spaced micro-labels as its headings, and
 * the same 0.5s ease transitions used across the theme.
 *
 * The track scrolls with scroll-snap instead of a carousel library — native touch
 * and wheel behaviour, no dependency, and it degrades to a scrollable row if the
 * arrow script is missing. */
.albert-testimonials .albert-tm-summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 2rem 0;
}
.albert-testimonials .albert-tm-summary-score {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
}
.albert-testimonials .albert-tm-summary-count {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}
.albert-testimonials .albert-tm-stars {
  color: #f0b849;
  letter-spacing: 0.1em;
}
.albert-testimonials .albert-tm-slider {
  position: relative;
}
.albert-testimonials .albert-tm-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 20rem);
  column-gap: 1.5rem;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 1.5rem 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  /* Room for the focus ring, which a clipped overflow would otherwise cut off. */
  outline-offset: 4px;
}
.albert-testimonials {
  /* Selector deliberately includes the track: Hyperspace styles `ul li` with
   * padding-left, and a bare .albert-tm-card (specificity 0,1,0) loses to it.
   * The earlier fix — resetting `> li { padding-left: 0 }` — was worse than the
   * problem: it out-specified the card's own padding shorthand and flattened the
   * left inset to nothing while the other three sides stayed. */
}
.albert-testimonials .albert-tm-track > .albert-tm-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  scroll-snap-align: start;
  padding: 1.75rem;
  border: solid 1px rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.025);
  transition: border-color 0.5s ease, background-color 0.5s ease;
}
.albert-testimonials .albert-tm-track > .albert-tm-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.05);
}
.albert-testimonials .albert-tm-rating {
  font-size: 1.1rem;
  line-height: 1;
}
.albert-testimonials .albert-tm-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.9rem;
}
.albert-testimonials .albert-tm-part p {
  margin: 0.2rem 0 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
.albert-testimonials .albert-tm-part-label {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
}
.albert-testimonials {
  /* A single hue would flatten the three parts into one wall of text; these keep
   * the praise, the gap and the suggestion tellable apart at a glance. */
}
.albert-testimonials .albert-tm-liked .albert-tm-part-label {
  color: rgba(140, 200, 160, 0.85);
}
.albert-testimonials .albert-tm-disliked .albert-tm-part-label {
  color: rgba(215, 165, 145, 0.85);
}
.albert-testimonials .albert-tm-improve .albert-tm-part-label {
  color: rgba(160, 185, 220, 0.85);
}
.albert-testimonials .albert-tm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: solid 1px rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
}
.albert-testimonials .albert-tm-name {
  font-weight: 600;
}
.albert-testimonials .albert-tm-date,
.albert-testimonials .albert-tm-translated {
  color: rgba(255, 255, 255, 0.45);
}
.albert-testimonials .albert-tm-translated {
  font-style: italic;
}
.albert-testimonials .albert-tm-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  /* Hyperspace gives buttons display: inline-block, and an author rule beats the
   * browser's own [hidden] { display: none } — so the arrows stayed visible while
   * the script believed it had hidden them. Caught by rendering it, not by reading. */
}
.albert-testimonials .albert-tm-controls[hidden] {
  display: none;
}
.albert-testimonials .albert-tm-nav[hidden] {
  display: none;
}
.albert-testimonials .albert-tm-nav {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: solid 1px rgba(255, 255, 255, 0.25);
  border-radius: 100%;
  background-color: rgba(28, 32, 36, 0.9);
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.5s ease, border-color 0.5s ease, opacity 0.5s ease;
}
.albert-testimonials .albert-tm-nav:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(45, 50, 56, 0.95);
}
.albert-testimonials .albert-tm-nav:disabled {
  opacity: 0.25;
  cursor: default;
}
.albert-testimonials {
  /* Arrows would sit on top of the cards at narrow widths; the track scrolls by
   * touch there anyway, so they go away rather than overlap. */
}
@media screen and (max-width: 736px) {
  .albert-testimonials .albert-tm-controls {
    display: none;
  }
  .albert-testimonials .albert-tm-track {
    grid-auto-columns: minmax(15rem, 85%);
    column-gap: 1rem;
  }
}

.albert-tm-editor-note {
  color: #666;
  font-size: 0.85em;
  font-style: italic;
}

/* WordPress expects the theme to provide this; Hyperspace does not, so the
 * screen-reader labels next to the star ratings were rendering as visible text. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}
.screen-reader-text:focus {
  display: block;
  top: 5px;
  left: 5px;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  border-radius: 3px;
  background-color: #1b1f22;
  color: #ffffff;
  clip: auto !important;
  clip-path: none;
  font-size: 0.875rem;
  line-height: normal;
  text-decoration: none;
}

/* Language switcher
 *
 * Three placements, one component. The sidebar copy is the one a desktop reader
 * sees on the landing page, the header copy serves the inner pages — and the
 * footer copy exists because Hyperspace hides #sidebar entirely below 736px, so
 * without it a phone visitor on the landing page would have no way to switch at
 * all.
 *
 * Colours are taken from the Hyperspace palette (fg-light / fg / fg-bold on the
 * purple background) rather than imported, matching how the rest of this file
 * works. */
.albert-lang {
  display: flex;
  gap: 0.75em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.albert-lang li {
  margin: 0;
  padding: 0;
}
.albert-lang a {
  display: inline-block;
  border: 0;
  padding: 0.35em 0.6em;
  border-radius: 0.25em;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.6em;
  font-weight: bold;
  letter-spacing: 0.25em;
  line-height: 1.75;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease, background-color 0.2s ease;
  /* The trailing letter-spacing of the last character pushes the label off
   * centre; a matching indent puts it back. */
  text-indent: 0.25em;
}
.albert-lang a:hover {
  color: rgba(255, 255, 255, 0.55);
  background-color: rgba(255, 255, 255, 0.05);
}
.albert-lang .is-current a {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

.albert-lang--sidebar {
  justify-content: flex-end;
  margin-top: 2em;
}

.albert-lang--header {
  align-items: center;
  margin-left: 1.75em;
}

.albert-lang--footer {
  justify-content: center;
  margin-top: 1em;
}

/* Below 1280px the sidebar becomes a horizontal bar and everything inside it
 * sits on one line. */
@media screen and (max-width: 1280px) {
  .albert-lang--sidebar {
    align-items: center;
    height: inherit;
    margin: 0 0 0 2em;
  }
}
@media screen and (max-width: 736px) {
  .albert-lang--header {
    margin: 0 0 1em 0;
  }
}
/* Spotlights images — a safety net, not the normal path.
 *
 * Normally main.js copies each image into the container's background-image and
 * hides the <img>, so nothing here applies. It matters only when that script does
 * not run: Hyperspace gives the inner <img> no dimensions at all, so a 1024×1024
 * upload rendered at full size and dragged its row along — the about section came
 * out 2624px tall instead of the intended 22.5em. Sizing the image to its own
 * column keeps a scriptless page merely plain instead of broken. */
.spotlights > section > .image {
  overflow: hidden;
}
.spotlights > section > .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cookie consent banner (CookieAdmin)
 *
 * The banner paints itself: white panel, dark text, its own button colours set
 * inline from the plugin's settings. Hyperspace is a dark theme and styles bare
 * tags globally — `strong, b` white, buttons uppercase pills 4.75em tall — so the
 * banner ended up with invisible bold words and buttons whose text matched their
 * background. Removing the !important from _button.scss lets the plugin's inline
 * colours win again; these rules hand back the rest.
 *
 * Scoped to the plugin's own containers, and limited to what the theme imposed —
 * no colours are invented here, so the banner keeps following its settings. */
.cookieadmin_law_container,
.cookieadmin_cookie_modal,
.cookieadmin_box {
  /* Hyperspace colours bare tags for a dark background — links, bold text, labels,
   * headings, form controls — and inside a white panel each of them turned
   * invisible. Listing the tags rather than using `*` is what keeps the plugin in
   * charge of its own accents: one container class plus a tag (0,1,1) outranks the
   * theme's bare tag (0,0,1), but loses to the plugin's own two-class rules such as
   * the blue "Always Active" label — which is exactly the desired order. */
  /* The modal paints a white panel but never sets a text colour, counting on the
   * browser default — which the theme replaced on <body>. `initial` restores what
   * the plugin assumed, so everything below can simply inherit. */
  color: initial;
}
.cookieadmin_law_container a,
.cookieadmin_law_container b,
.cookieadmin_law_container strong,
.cookieadmin_law_container em,
.cookieadmin_law_container label:not(.cookieadmin_act),
.cookieadmin_law_container li,
.cookieadmin_law_container h1,
.cookieadmin_law_container h2,
.cookieadmin_law_container h3,
.cookieadmin_law_container h4,
.cookieadmin_law_container h5,
.cookieadmin_law_container h6,
.cookieadmin_law_container input,
.cookieadmin_law_container select,
.cookieadmin_law_container textarea,
.cookieadmin_cookie_modal a,
.cookieadmin_cookie_modal b,
.cookieadmin_cookie_modal strong,
.cookieadmin_cookie_modal em,
.cookieadmin_cookie_modal label:not(.cookieadmin_act),
.cookieadmin_cookie_modal li,
.cookieadmin_cookie_modal h1,
.cookieadmin_cookie_modal h2,
.cookieadmin_cookie_modal h3,
.cookieadmin_cookie_modal h4,
.cookieadmin_cookie_modal h5,
.cookieadmin_cookie_modal h6,
.cookieadmin_cookie_modal input,
.cookieadmin_cookie_modal select,
.cookieadmin_cookie_modal textarea,
.cookieadmin_box a,
.cookieadmin_box b,
.cookieadmin_box strong,
.cookieadmin_box em,
.cookieadmin_box label:not(.cookieadmin_act),
.cookieadmin_box li,
.cookieadmin_box h1,
.cookieadmin_box h2,
.cookieadmin_box h3,
.cookieadmin_box h4,
.cookieadmin_box h5,
.cookieadmin_box h6,
.cookieadmin_box input,
.cookieadmin_box select,
.cookieadmin_box textarea {
  color: inherit;
}
.cookieadmin_law_container,
.cookieadmin_cookie_modal,
.cookieadmin_box {
  /* Links inside the panel now inherit the body colour, so an underline is what
   * still marks them as links. The plugin's own credit line is not that kind of
   * link and keeps its plain look. */
}
.cookieadmin_law_container a:not(.cookieadmin-poweredby a),
.cookieadmin_cookie_modal a:not(.cookieadmin-poweredby a),
.cookieadmin_box a:not(.cookieadmin-poweredby a) {
  text-decoration: underline;
}
.cookieadmin_law_container button,
.cookieadmin_cookie_modal button,
.cookieadmin_box button {
  font-size: inherit;
  font-weight: normal;
  height: auto;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}

/*# sourceMappingURL=albert.css.map */