/*
 * [tamplarie_configurator_pagina] — the page around the widget.
 *
 * Two rules govern everything here.
 *
 * 1. **Every declaration is scoped under `.tcp`.** This CSS loads on a live
 *    client site next to a theme, a page builder and forty plugins. One bare
 *    `h2 { }` here restyles their blog.
 * 2. **The colours are the widget's own custom properties, with fallbacks.**
 *    `var(--tc-ink, #14181a)`. A site that themes the widget themes the page
 *    with the same three lines, and a site that themes neither gets the
 *    defaults the widget was contrast-checked against.
 *
 * Nothing is animated on load and nothing moves under the cursor. The visitor
 * came to price a window.
 */

/* The theme's own page title, on a page that is nothing but this shortcode.
   The hero below already carries the heading, so the theme's `<h1>` is the
   same words twice in two different typefaces. Scoped to the body class
   `TConf_Page::body_class()` adds, so it can only ever apply to a page built
   from the shortcode — never to the blog.

   The header box is emptied as well as the title hidden: left in place it is
   a bordered strip of nothing between the site header and the hero. */
body.tconf-page .entry-header .entry-title,
body.tconf-page .page-header .page-title,
body.tconf-page .ast-archive-description .page-title {
  display: none;
}
body.tconf-page .entry-header:not(:has(> :not(.entry-title))),
body.tconf-page .page-header:not(:has(> :not(.page-title))) {
  margin: 0;
  padding: 0;
  border: 0;
}

.tcp {
  --tcp-ink:     var(--tc-ink, #14181a);
  --tcp-ink-2:   var(--tc-ink-2, #4d5559);
  --tcp-line:    var(--tc-line, #dfe4e6);
  --tcp-line-2:  var(--tc-line-2, #eceff0);
  --tcp-surface: var(--tc-surface, #ffffff);
  --tcp-soft:    var(--tc-surface-2, #f6f8f8);
  --tcp-accent:  var(--tc-accent, #2a9d8f);
  --tcp-deep:    var(--tc-accent-ink, #0a5f55);
  --tcp-tint:    var(--tc-accent-soft, #eff9f7);
  --tcp-radius:  var(--tc-radius, 14px);
  --tcp-gap: clamp(28px, 5vw, 56px);

  /* Every size below is a multiple of THIS, not of the theme's root.
     The SMI test install sets html{font-size:14px}, which quietly turned .92rem
     body copy into 12.9 px — legible on a 1440 px monitor and not on a phone.
     The floor keeps the page readable under a small root; the ceiling stops it
     ballooning under a large one. */
  --tcp-base: clamp(15px, 1rem, 19px);
  font-size: var(--tcp-base);

  color: var(--tcp-ink);
  /* Inherit the theme's typeface deliberately: the page belongs to the site,
     not to us. Only the widget insists on its own, inside its shadow root. */
  font-family: inherit;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: var(--tcp-gap);

  /* Width is a share of the WINDOW, not of the theme's content column.
     A flat 1180px cap meant the widget was exactly as wide on a 1920 monitor
     as on a 1366 laptop — 740 px of a 1080p screen, 38% of it, held empty for
     nothing. The configurator is the one block on this page that gets better
     with room: three columns instead of two, and a drawing big enough to
     read a mullion in.

     `vw`, not `%`. Astra caps `.ast-container` at 1640px, so on a 1920 screen
     the parent hands us 1600 and a `90%` gutter came out 240px a side —
     12.5%, not the 5% this is meant to leave. The margin pair below hangs the
     block symmetrically outside that column: 50% is half the parent, and the
     parent shares the window's centre line, so the two gutters stay equal
     without a transform (a transform here would become the containing block
     for the phone drawers). Keep the two `min()` halves in step — the margin
     is half the width, negated. */
  --tcp-w: 90vw;
  --tcp-cap: 1730px;
  width: min(var(--tcp-w), var(--tcp-cap));
  margin-inline: calc(50% - min(var(--tcp-w), var(--tcp-cap)) / 2);
  max-width: none;
}

/* Below the tablet breakpoint the gutter shrinks to almost nothing — on a
   phone every percent of width is a chip that does not wrap. Only the variable
   changes; the width and margin above stay in step by themselves. */
@media (max-width: 900px) {
  .tcp { --tcp-w: 96vw; }
}
/* On a phone the widget, and only the widget, goes edge to edge. Operator,
   round 4, 24.09.2026: "a few pixels of border on the sides … we might as
   well claim those". Then, the same day: "the side spacing removal is supposed
   to be only for the configurator itself. the page content under it is fine
   to leave". So `.tcp` keeps its 96vw, and the element hangs out of it by
   the same centre-line margin trick as `.tcp` above. The widget's side borders
   and rounded corners go through its own two variables, not --tc-radius,
   which the theme deriver writes. */
@media (max-width: 600px) {
  .tcp tamplarie-configurator {
    display: block;
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    --tc-edge: 0px;
    --tc-edge-r: 0px;
  }
}

/* The theme's white box, which the block above no longer lives inside.

   EdT runs Astra's boxed layout: `.ast-article-single` is a white 1200px
   card with 85px of padding on top. `.tcp` hangs out of it at 90vw, so on a
   1897px desktop the hero, the heading and the fact cards spill 250px past
   both edges of a white panel that starts 85px above the heading and frames
   none of them (operator, image #17). TO runs a full-width container, so
   there it was already transparent and padless — this only makes EdT match.

   Every width, not only the phone: the box is at its widest on a desktop.
   The page's own surfaces (fact cards, the widget, the contact panel) carry
   their own white, so nothing loses its background. */
body.tconf-page .ast-article-single {
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 0 !important;
}

.tcp p { margin: 0 0 .8em; }
.tcp p:last-child { margin-bottom: 0; }
.tcp ul, .tcp ol { margin: 0; padding: 0; list-style: none; }
.tcp a { color: var(--tcp-deep); }

.tcp .tcp-h {
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.25;
  margin: 0 0 .7em;
  color: var(--tcp-ink);
}

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

/* No eyebrow rule. The theme prints the page title directly above this block,
   so a second uppercase line saying the same thing was two headings in two
   sizes for one page. */

.tcp .tcp-title {
  font-size: clamp(28px, 4.2vw, 44px);
  /* 1.2, not 1.14: Romanian display type carries ă â î ș ț, and the
     accents above the cap height are what a tight leading eats first. */
  line-height: 1.2;
  margin: 0 0 .45em;
  letter-spacing: -.015em;
  color: var(--tcp-ink);
}

.tcp-lede {
  font-size: calc(var(--tcp-base) * 1.08);
  color: var(--tcp-ink-2);
  max-width: 66ch;
}

.tcp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px;
  margin-top: 1.6em;
  background: var(--tcp-line);
  border: 1px solid var(--tcp-line);
  border-radius: var(--tcp-radius);
  overflow: hidden;
}
.tcp-facts li {
  background: var(--tcp-surface);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tcp-facts strong { font-size: calc(var(--tcp-base) * 1); line-height: 1.3; }
.tcp-facts span { font-size: calc(var(--tcp-base) * .92); color: var(--tcp-ink-2); line-height: 1.45; }

/* --- the way down to the widget, and back up -----------------------------
   Operator, 29.09.2026: fitting the widget to the window by hand took fine
   scrolling every time. A fifth cell in the facts strip (image #79) and a row
   under the widget (image #80); `assets/page.js` lands both with the widget's
   top just under the site header. Plain `#configurator` links underneath, so
   they still go roughly there with the script blocked. */

/* Four facts and a narrow arrow column on a desktop; the arrow takes a row of
   its own once the facts wrap. Behind :has() so a browser without it keeps the
   auto-fit grid above, with the arrow as one more cell. */
.tcp-facts:has(> .tcp-jump-cell) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(118px, auto);
}
@media (max-width: 1099px) {
  .tcp-facts:has(> .tcp-jump-cell) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcp-facts .tcp-jump-cell { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .tcp-facts:has(> .tcp-jump-cell) { grid-template-columns: minmax(0, 1fr); }
}

.tcp-facts .tcp-jump-cell { padding: 0; background: var(--tcp-tint); }
/* Two classes: `.tcp a` above would otherwise win the colour (fix 129). */
.tcp .tcp-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--tcp-deep);
  font-weight: 600;
  font-size: calc(var(--tcp-base) * .92);
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
}
.tcp .tcp-jump svg {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--tcp-accent);
  color: #fff;
}
.tcp .tcp-jump span { color: inherit; font-size: inherit; }
.tcp .tcp-jump:hover span,
.tcp .tcp-jump:focus-visible span { text-decoration: underline; }
.tcp .tcp-jump:focus-visible { outline: 3px solid var(--tcp-deep); outline-offset: -3px; }

.tcp-facts .tcp-jump { flex-direction: column; height: 100%; padding: 14px 12px; }
@media (max-width: 1099px) {
  .tcp-facts .tcp-jump { flex-direction: row; padding: 12px 18px; }
}

.tcp .tcp-jump-row { display: flex; justify-content: center; margin: 14px 0 0; }
.tcp-jump-row .tcp-jump {
  padding: 6px 18px 6px 6px;
  border: 1px solid var(--tcp-line);
  border-radius: 999px;
  background: var(--tcp-surface);
}
.tcp-jump-row .tcp-jump:focus-visible { outline-offset: 2px; }

/* --- the widget ---------------------------------------------------------- */

/* No frame, no padding, no background. The widget draws its own card and a box
   around a box reads as a broken embed. */
.tcp-tool { scroll-margin-top: 90px; }
/* The fallback until `assets/page.js` measures the real header and writes it
   inline — the widget's own "Sari la configurator" scrolls to the element. */
.tcp tamplarie-configurator { scroll-margin-top: 90px; }

/* --- contact -------------------------------------------------------------
   The contact page's own block, so a visitor who scrolls past the price has
   the same form and the same numbers they would have found under /contact. */

.tcp-contact {
  background: var(--tcp-soft);
  border: 1px solid var(--tcp-line);
  border-radius: var(--tcp-radius);
  padding: clamp(20px, 3vw, 30px);
}
.tcp-contact .tcp-h { margin-bottom: .8em; }

/* The form takes the room it needs and the details column stays readable
   beside it. `minmax(0, …)` on the form track because MetForm's own grid has
   fixed-width rows in it and a bare `1fr` lets them set the column. */
.tcp-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 860px) {
  .tcp-contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* MetForm carries its own styling from the theme. Nothing here restyles it —
   one plugin reaching into another's form markup is how a field goes
   invisible after an unrelated update. Only the width is ours. */
.tcp-contact-form { min-width: 0; }

/* One wrapping row: the two numbers and the address sit side by side as far
   as the card allows. Stacked, each button took its own row and left the
   card's right half empty (operator, 24.09.2026: "weirdly layed out"). The
   text lines take a full row each. */
.tcp-reach {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tcp-room, .tcp-legal { flex: 0 0 100%; }
/* `.tcp .tcp-phone`, not `.tcp-phone`: the generic `.tcp a` rule above is
   (0,1,1) and would otherwise win on specificity, painting the label the same
   dark teal as the button behind it — 1.35:1, which is a button nobody can
   read. Every colour on an anchor here needs two classes. */
.tcp .tcp-phone, .tcp .tcp-email {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: calc(var(--tcp-base) * 1.02);
  /* 44 px of tap target on a phone, which is where most of this traffic is. */
  min-height: 44px;
  line-height: 22px;
}
.tcp .tcp-phone {
  background: var(--tc-cta, #0d7568);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tcp .tcp-phone:hover, .tcp .tcp-phone:focus { background: var(--tcp-deep); color: #fff; }
.tcp .tcp-email {
  border: 1px solid var(--tcp-line);
  background: var(--tcp-surface);
  color: var(--tcp-deep);
  word-break: break-word;
}
.tcp .tcp-email:hover, .tcp .tcp-email:focus { border-color: var(--tcp-deep); }

.tcp-room {
  margin-top: 6px;
  font-size: calc(var(--tcp-base) * .95);
  color: var(--tcp-ink-2);
}
/* The registration details. Present because a Romanian trader has to publish
   them, small because nobody came for them. */
.tcp-legal {
  font-size: calc(var(--tcp-base) * .85);
  color: var(--tcp-ink-2);
  line-height: 1.4;
}
.tcp-legal + .tcp-legal { margin-top: -6px; }

/* --- the phone ------------------------------------------------------------
   Two complaints, relayed verbatim by the client:

     "site header taking up space that is useless to someone using the
      configurator"
     "the configurator page itself requiring users to scroll down until the
      configurator is manually fitted to their screen"

   They are different faults and they are fixed differently. Scrolling past a
   hero costs one flick, once. A header that stays PINNED costs the same strip
   of screen forever: below its own breakpoint the widget lays itself out at
   `100svh`, so a pinned bar does not push it down — it sits on top of it, and
   the row it covers never comes back no matter how far you scroll.

   700px, not the widget's 680: the widget's breakpoint is measured on its
   CONTAINER, and `.tcp` hands it 96vw down here. 700 × .96 = 672, comfortably
   inside the widget's phone layout, so the page and the widget never disagree
   about which one is on screen. */

@media (max-width: 700px) {
  /* 1. The configurator first, so the page opens on it.

     `order`, not a different section order from PHP: the DOM keeps hero →
     tool → contact, which is the order a screen reader and the tab ring
     follow, and which is what search engines read. Only the painting moves.
     Nothing in the hero is focusable, so the focus ring still walks the page
     top to bottom — the divergence is text, not tab stops. */
  .tcp-tool { order: -1; }
  /* The hero now paints BELOW the widget, so its "down to the configurator"
     arrow would point up the page. The row under the widget stays. */
  .tcp-facts .tcp-jump-cell { display: none; }

  /* The gap is the hero's breathing room on a desktop. Under the widget, on a
     phone, it is a band of nothing between the price and the next heading. */
  .tcp { --tcp-gap: 26px; }

  /* 2. Un-pin whatever the theme pins at the top, on THIS page only.

     Targeted by mechanism (`.elementor-sticky--active`, inside the header
     location) rather than by the element id Elementor generates: the id is
     per-site and per-edit, and a selector carrying one is a rule that stops
     working the first time somebody rebuilds the header. TO pins a 53px
     mobile bar this way; EdT pins nothing and the rule simply matches
     nothing there.

     The header is not hidden — it scrolls away and scrolls back like every
     other page's. Only the pinning goes, and only where the visitor came to
     price a window. */
  body.tconf-page .elementor-location-header .elementor-sticky--active {
    position: static !important;
    /* Elementor writes both of these inline while a section is pinned, and
       leaves them behind the `position` it also writes. */
    top: auto !important;
    width: auto !important;
  }
  /* The spacer Elementor inserts to reserve the pinned bar's height. With
     nothing pinned it is a blank strip the height of the header. */
  body.tconf-page .elementor-location-header .elementor-sticky__spacer {
    display: none !important;
  }

  /* 3. The theme's boxed-container padding above the tool.

     Measured on a phone, same page on both sites: EdT puts the widget at
     291px, TO at 53px. 211 of EdT's is its header (logo row + a CTA row);
     the other 80 are `.content-area` 58.4px + `.ast-article-single` 21.9px
     of padding-top, both 0 on TO, which runs a full-width container. So the
     second half of "the EdT page doesn't map to TO's design" is 80px of
     padding holding nothing — on a screen where the widget wants all 844.

     Only padding-TOP, and only under 700px: the bottom padding still
     separates the tool from the hero and contact sections below it, and on
     a desktop EdT's boxed container is the site's own framing, not a bug. */
  body.tconf-page .content-area,
  body.tconf-page .ast-article-single {
    padding-top: 0 !important;
  }

  /* 4. The header's CTA row, on this page only.

     EdT's header carries a second row holding one thing: a "Cere ofertă"
     button, 46px in a 76px section. On every other page it earns its place.
     On THIS one it points at a quote form from the top of a quote tool —
     it competes with the thing the visitor already opened, and costs 76px
     of an 844px screen to do it.

     The replacement is not "nothing": the widget's own price row carries
     `Cere ofertă` (48px, class `cta`), one of the four rows the phone
     layout keeps on screen at all times. That button is strictly the better
     one — it submits the window the visitor just configured, where the
     header's sent them to an empty form. The owner confirmed the two
     destinations are the same page under two names.

     Matched by SHAPE, never by `elementor-element-<id>`: a header row whose
     widgets are only buttons. The :not() guard is the safety — if somebody
     rebuilds the header and moves the button in beside the logo or the
     menu, this rule stops matching instead of hiding the navigation. On a
     browser without :has() it also simply stops matching, which is today's
     behaviour. */
  body.tconf-page .elementor-location-header
    .elementor-top-section:has(.elementor-widget-button):not(:has(
      .elementor-widget-theme-site-logo, .elementor-widget-image,
      .elementor-widget-nav-menu, .elementor-widget-ekit-nav-menu,
      .elementor-widget-theme-site-title, nav)) {
    display: none !important;
  }
}

/* --- narrow -------------------------------------------------------------- */

@media (max-width: 560px) {
  .tcp-facts { grid-template-columns: 1fr; }
}

/* --- the catalogue photographs, one per colour ---------------------------- */

/* `[tamplarie_poze_produs]`, on a WooCommerce product page. The row exists
   because the stage above it shows one representation at a time: a visitor who
   never touches the colour pills never learns the other four finishes exist.

   `auto-fit` and not a column count: the row is five wide where five fit, and
   folds to three and two on its own as the page narrows. There is no
   breakpoint to keep in step with the widget's, and none to get wrong. */
/* The three variables this block uses, redeclared rather than inherited from
   `.tcp`. That rule also carries the page shortcode's flex layout and its
   viewport-width breakout, and neither belongs on a WooCommerce product page
   that has its own container. Same `var(--tc-*)` sources, so a themed site
   still themes this row with the same three lines. */
.tcp-poze {
  --tcp-ink-2: var(--tc-ink-2, #4d5559);
  --tcp-base: clamp(15px, 1rem, 19px);
  margin: 0;
}
.tcp-poze-rand {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5%;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tcp-poza { margin: 0; }
/* The studio renders are square with the product on ~80% of the file, so a
   square box crops nothing and every photo lines up with the next. */
.tcp-poza img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--tc-line, #e2e6e8);
  border-radius: 10px;
}
.tcp-poza span {
  display: block;
  margin-top: 6px;
  text-align: center;
  font-size: calc(var(--tcp-base) * .9);
  color: var(--tcp-ink-2);
}