/* ===== bottom.css / deferred, loaded before </html> — generated from the WordPress build, in original cascade order. Edit freely; this is now the source of truth. ===== */

/* --- bottom.css --- */
/*
 * bottom.css — everything NOT needed for the first paint. Enqueued in the
 * footer (prints just before </html>), so it never blocks rendering.
 *
 * RULE: cards, footer, below-the-fold sections, hover-only and print styles
 * go here. If a rule affects what is visible before scrolling, move it to
 * top.css instead. See ASSETS.md in the theme root.
 */

/* ---- Product / use-case cards -------------------------------------------- */
.cb-card {
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 1.5em;
  background: #fafbfc;
  height: 100%;
}
.cb-card h3 { margin-top: 0; }

/* ---- Language switcher inside the nav menu ------------------------------- */
.menu-item .lang-item, .pll-switcher { font-weight: 600; }

/* ---- Footer -------------------------------------------------------------- *
 * Three columns (brand blurb / link list / contact block) over a darker legal
 * bar. Structure adapted from limonet.si; colours are ContBlox's own.
 * Markup comes from functions.php on generate_before_footer_content and the
 * generate_copyright filter.
 *
 * Colour choices are scoped to .site-footer instead of being added to :root in
 * top.css — none of this is above the fold. Contrast on --cb-slate (#1f2933):
 *   #ffffff 14.76:1   #c7cfd6 9.36:1   #fb923c (hover) 6.52:1
 * Legal bar #161d24: #b9c4cd 9.58:1, #ffffff 17.0:1. AA needs 4.5:1.
 * --cb-accent (#e8590c) is only 4.12:1 on the slate and is deliberately NOT
 * used for text; the CTA button is --cb-accent-dark + white (4.73:1), and its
 * hover shade #a93c08 + white is 6.29:1.
 * -------------------------------------------------------------------------- */
.site-footer, .footer-widgets {
  --cb-footer-hover: #fb923c;
  --cb-footer-bar: #161d24;
  --cb-footer-cta-hover: #a93c08;
  background-color: var(--cb-slate);
  color: #c7cfd6;
}
.site-footer li, .footer-widgets li { list-style: none; }
.site-footer a, .footer-widgets a { color: #fff; text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus,
.footer-widgets a:hover {
  color: var(--cb-footer-hover);
  text-decoration: underline;
}

.cb-footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  /* border-box so the 40px padding sits inside the 1100px container and the
     columns line up with the page content above, which uses the same width. */
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
  padding: 54px 40px 34px;
}
.cb-footer-col p { margin: .35rem 0; font-size: .95rem; line-height: 1.6; }
.cb-footer-col p.cb-footer-name {
  margin: 0 0 .5rem;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.cb-footer-brand p { max-width: 34em; }
.cb-footer-h {
  margin: 0 0 .5rem;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.cb-footer-nav ul { margin: 0; padding: 0; }
/* line-height:0 on the li removes the inherited leading around the
   inline-block anchor, so each row is exactly the 44px tap target and the
   list does not sprawl. The anchor sets its own line-height back. */
.cb-footer-nav li { margin: 0; line-height: 0; }
.cb-footer-address {
  margin: .35rem 0 .2rem;
  font-style: normal;
  font-size: .95rem;
  line-height: 1.6;
}

/* Tap targets: footer links were flagged as under-sized on mobile. 44px is the
   WCAG/Lighthouse minimum; border-box keeps the row exactly 44px rather than
   44 + padding, so the link list stays compact. */
.cb-footer-nav a,
.cb-footer-phone a,
.site-info a {
  display: inline-block;
  box-sizing: border-box;
  padding: 10px 0;
  min-height: 44px;
  line-height: 24px;
}
.site-info a { padding: 10px 4px; }

.cb-footer-cta-wrap { margin: .8rem 0 0; }
/* inline-FLEX, not inline-block: on an inline-block the 44px min-height applies
   to the content box, so it stacked on top of the 11px padding (66px tall) and
   the line box sat at the top of it — a too-tall button with the label riding
   high. Centring via flex keeps the 44px tap target without either bug.
   Same pattern as .cb-mobile-cta a in top.css. */
.cb-footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  min-height: 44px;
  border-radius: 6px;
  background-color: var(--cb-accent-dark);
  font-weight: 600;
}
.site-footer .cb-footer-cta:hover,
.site-footer .cb-footer-cta:focus {
  background-color: var(--cb-footer-cta-hover);
  color: #fff;
  text-decoration: none;
}

/* Legal bar */
.site-info {
  background-color: #161d24;
  color: #b9c4cd;
  padding: .7em 20px;
  font-size: .88rem;
  text-align: center;
}
.cb-footer-legal { margin: 0; line-height: 1.7; }
.cb-footer-legal .cb-legal-part { white-space: nowrap; }
.cb-footer-legal span[aria-hidden] { margin: 0 .25em; opacity: .6; }

@media (max-width: 900px) {
  .cb-footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cb-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .cb-footer-cols {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 36px 20px 24px;
  }
}

/* ---- Contact form: partner / reseller conditional fields ----------------- *
 * "Model" only makes sense for a product inquiry and "Country" only for a
 * partner/reseller one, so exactly one of the two is shown at a time.
 *
 * The switch is the .cb-inquiry-partner class on the <form>:
 *   - functions.php sets it server-side when the page is opened from the
 *     Partnerji/Partners button, so the wrong field never flashes before the
 *     deferred bottom.js runs;
 *   - bottom.js keeps it in sync when the visitor changes the dropdown.
 *
 * Both fields sit below the fold on the contact page, hence bottom.css.
 * -------------------------------------------------------------------------- */
.cb-form .cb-f-country { display: none; }
.cb-form.cb-inquiry-partner .cb-f-country { display: block; }
.cb-form.cb-inquiry-partner .cb-f-model { display: none; }

/* ---- Cookie notice ------------------------------------------------------- *
 * The plugin sets its button colour inline (#e8590c on white text), which
 * fails WCAG AA at 3.1:1. Darkening to #b8430a clears 4.5:1.
 * -------------------------------------------------------------------------- */
.cookie-notice-container #cn-accept-cookie.cn-button[style],
.cookie-notice-container #cn-refuse-cookie.cn-button[style],
.cookie-notice-container #cn-more-info.cn-button[style],
.cookie-revoke-container #cn-revoke-cookie.cn-button[style] {
  background-color: #b8430a !important;
}

/* Decline must be as visually available as Accept — a greyed-out or de-emphasised
   refusal is not valid consent under GDPR. Same size, same weight, same colour. */
.cookie-notice-container #cn-refuse-cookie.cn-button {
  opacity: 1;
}

/* The plugin's buttons are ~30px tall. That was survivable with one button; with
   Accept and Decline side by side it is a tap-target failure waiting to happen,
   so give them a real 44px target on touch widths. */
@media (max-width: 768px) {
  .cookie-notice-container .cn-button,
  .cookie-revoke-container .cn-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    margin: 4px 3px;
  }
}