/* ==========================================================================
   ROBOTCOVER - THEME SPECIALIZED STYLES
   All design tokens, core layout widths, typography, base button styles,
   and standard headings are managed natively by theme.json.
   This stylesheet contains ONLY specialized UI components, micro-interactions,
   floating elements, SVG icon masks, and responsive breakpoints.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base & Section Helpers
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
}

.rc-container {
  max-width: var(--wp--style--global--content-size, 1400px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}

.rc-section {
  padding: 85px 0;
  position: relative;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.rc-section-title,
.is-style-rc-section-title {
  border-left: 4px solid var(--wp--preset--color--primary);
  padding-left: 18px;
  line-height: 1.15;
  margin-bottom: 24px;
  box-sizing: border-box;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
}

.rc-section-lead {
  font-size: 16px;
  color: var(--wp--preset--color--text-muted);
  max-width: 760px;
  line-height: 1.6;
  margin-bottom: 45px;
}

.rc-section-light {
  background-color: var(--wp--preset--color--surface-light);
  color: var(--wp--preset--color--text-dark);
}

.rc-section-light .rc-section-title {
  color: var(--wp--preset--color--text-dark);
}

.rc-section-light .rc-section-lead {
  color: var(--wp--preset--color--text-dark-muted);
}

.rc-accent {
  color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   2. Button Specialized Hover Effects & Micro-interactions
   Base styling (colors, padding, border, border-radius, typography) is
   managed natively by theme.json and block style variations.
   -------------------------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  transform: translateY(-1px);
}

/* Default Fill Button Hover */
.wp-block-button:not(.is-style-outline):not(.is-style-rc-outline-orange) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-rc-outline-orange) .wp-element-button:hover {
  background-color: var(--wp--preset--color--primary-hover) !important;
}

/* Outline (Dark) Button Style */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
  padding: 13px 26px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
  color: #FFFFFF;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-element-button:hover {
  border-color: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--primary) !important;
  background-color: rgba(255, 77, 0, 0.1) !important;
}

/* Outline (Orange) Button Style for Light Backgrounds */
.wp-block-button.is-style-rc-outline-orange .wp-block-button__link,
.wp-block-button.is-style-rc-outline-orange .wp-element-button {
  padding: 13px 26px;
  border: 1.5px solid var(--wp--preset--color--primary);
  background-color: #FFFFFF;
  color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-rc-outline-orange .wp-block-button__link:hover,
.wp-block-button.is-style-rc-outline-orange .wp-element-button:hover {
  background-color: var(--wp--preset--color--primary) !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   3. Header
   The header itself is native blocks (background, border, layout). Two things
   have no workable native equivalent: sticky positioning and z-index (the
   block-level position/z-index attributes fail save() validation for static
   groups in WP 7.1) and the glassmorphism blur. The blur must live on a
   pseudo-element: a filter or backdrop-filter on .rc-header itself would make
   it the containing block for position:fixed and trap the mobile menu overlay.
   -------------------------------------------------------------------------- */
.rc-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.rc-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Below the navigation overlay breakpoint the bar keeps only logo + hamburger.
   Two classes are needed to out-rank WP's "body .is-layout-flex { display: flex }". */
@media (max-width: 781px) {
  .rc-header .rc-header-right {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   4. Hero Section
   -------------------------------------------------------------------------- */
/* Only the mixed-size second line inside the single H1 needs custom CSS. */
.is-style-rc-hero-heading .rc-hero-sub {
  display: block;
  font-size: var(--wp--preset--font-size--hero-subtitle);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   5. Benefits (4 Filary)
   -------------------------------------------------------------------------- */
/* Base section padding and borders are provided by styles/blocks/benefits-section.json.
   Item layout, typography, icon dimensions, and colors are handled natively by Gutenberg. */
.rc-benefit-icon {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   6. Zastosowania (Cards & Overlapping Center Badge)
   -------------------------------------------------------------------------- */
/* Base card appearance is provided by styles/blocks/application-card.json. */
.is-style-rc-application-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.is-style-rc-application-card:hover {
  border-color: var(--wp--preset--color--primary);
  transform: translateY(-3px);
  background-color: var(--wp--preset--color--surface-card);
}

.rc-app-badge {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  background: var(--wp--preset--color--bg-dark, #0F0F0F);
  border: 1.5px solid var(--wp--preset--color--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 8px;
}

.rc-app-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --------------------------------------------------------------------------
   7. Process (Dashed Timeline Track & Step Dots)
   -------------------------------------------------------------------------- */
.rc-timeline-wrapper {
  position: relative;
}

.rc-timeline-wrapper::before {
  content: '';
  position: absolute;
  top: 75px;
  left: 10%;
  right: 10%;
  height: 0;
  border-top: 2px dashed rgba(255, 77, 0, 0.45);
  transform: translateY(-50%);
  z-index: 1;
}

.is-style-rc-process-step {
  position: relative;
  z-index: 2;
}

.rc-timeline-dot {
  width: 18px;
  flex-shrink: 0;
  height: 18px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--primary);
  border: 3px solid var(--wp--preset--color--bg-dark, #0F0F0F);
  box-shadow: 0 0 0 2px rgba(255, 77, 0, 0.35);
  position: relative;
  z-index: 3;
  box-sizing: border-box;
}

.is-style-rc-process-divider {
  width: 32px;
  max-width: 32px;
}

/* --------------------------------------------------------------------------
   8. Stanowisko (Workstation Split & Callout Box)
   -------------------------------------------------------------------------- */
/* Two-column layout, criteria items typography, borders, paddings and button spacing
   are managed natively by Gutenberg block settings and theme.json. */
.rc-stanowisko-img-box {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
}

.rc-stanowisko-img {
  margin: 0;
}

.rc-stanowisko-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rc-stanowisko-callout {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: rgba(15, 15, 15, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--wp--preset--color--primary);
  border-radius: 4px;
  padding: 14px 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rc-stanowisko-callout p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. Warunki Pracy (Resistance Grid)
   Grid, card layout, spacing, icon sizes and card typography are native block
   attributes. Remaining CSS: the fixed-size orange divider, which core/separator
   cannot express (core's own :not() selectors out-rank a plain class here), and
   the shared responsive collapse below. The same divider geometry serves the
   Kontakt cards via .rc-card-divider.
   -------------------------------------------------------------------------- */
.rc-warunki-divider,
.rc-card-divider {
  width: 32px !important;
  max-width: 32px !important;
  height: 2px !important;
  border: none !important;
  margin: 0 0 16px 0 !important;
  margin-left: 0 !important;
}

/* --------------------------------------------------------------------------
   10. SafePend Section (Micro-interactions)
   Layout (50/50 columns split, 4-column brand shelf, 2-column features grid),
   colors, typography, and spacing are managed natively by Gutenberg blocks.
   -------------------------------------------------------------------------- */
.wp-block-column.is-vertically-aligned-stretch > .wp-block-cover {
  height: 100%;
  min-height: 100%;
}

.rc-safepend-card {
  transition: background-color 0.25s ease;
}

.rc-safepend-card:not(.is-style-rc-safepend-card):hover {
  background-color: #FBFBFB;
}

.rc-safepend-card:not(.is-style-rc-safepend-card):hover a {
  color: var(--wp--preset--color--primary) !important;
}

/* Wyrównanie pasków do wysokości wiersza: siatka rozciąga li.wp-block-post,
   pasek jako flex-dziecko wypełnia element listy (jak w sekcji 11). Układ
   wewnątrz paska (kolumna, rozkład space-between, centrowanie i wyrównanie
   brandu) jest natywny w atrybutach bloków. Żadnych kolorów ani breakpointów. */
.rc-safepend-shelf-grid > li.wp-block-post {
  display: flex;
  flex-direction: column;
}

.rc-safepend-shelf-grid .rc-safepend-card {
  flex: 1;
}

/* --------------------------------------------------------------------------
   11. Realizacje (Portfolio Cards & Hover Micro-interactions)
   Card layouts, image aspect ratios, typography, borders, and colors
   are managed natively by Gutenberg blocks and theme.json.
   -------------------------------------------------------------------------- */
.rc-realizacja-card {
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.rc-realizacja-card:hover {
  border-color: var(--wp--preset--color--primary) !important;
  transform: translateY(-3px);
}

.rc-realizacja-card .wp-block-image,
.rc-realizacja-card .wp-block-post-featured-image,
.rc-realizacja-img {
  margin: 0 !important;
  overflow: hidden;
}

.rc-realizacja-card .wp-block-image img,
.rc-realizacja-card .wp-block-post-featured-image img,
.rc-realizacja-img img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.4s ease;
}

.rc-realizacja-card:hover .wp-block-image img,
.rc-realizacja-card:hover .wp-block-post-featured-image img,
.rc-realizacja-card:hover .rc-realizacja-img img {
  transform: scale(1.05);
}

.rc-realizacja-info {
  flex: 1;
}

/* Wyrównanie kart do wysokości wiersza: siatka rozciąga li.wp-block-post,
   karta jako flex-dziecko wypełnia element listy. */
.rc-realizacje-grid > li.wp-block-post {
  display: flex;
  flex-direction: column;
}

.rc-realizacje-grid .rc-realizacja-card {
  flex: 1;
}

/* Zachowanie podziału wierszy zwykłego tekstu SCF (textarea bez new_lines). */
.rc-features-list {
  white-space: pre-line;
}

.rc-realizacja-application:empty,
.rc-features-list:empty {
  display: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. Footer Responsive Collapse
   The footer itself is native blocks. This only collapses its four columns
   to a 2x2 arrangement between the desktop and mobile breakpoints;
   !important is required to beat the inline flex-basis of core/columns.
   -------------------------------------------------------------------------- */
@media (min-width: 782px) and (max-width: 1080px) {
  .rc-footer-cols {
    flex-wrap: wrap;
  }

  .rc-footer-cols > .wp-block-column {
    flex-basis: calc(50% - 20px) !important;
  }
}

/* --------------------------------------------------------------------------
   13. Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .rc-benefits-grid,
  .rc-zastosowania-grid,
  .rc-warunki-grid,
  .rc-realizacje-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rc-timeline-grid,
  .rc-stanowisko-split {
    flex-direction: column;
  }

  .rc-timeline-wrapper::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .rc-benefits-grid,
  .rc-zastosowania-grid,
  .rc-warunki-grid,
  .rc-realizacje-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   14. Contact Form 7 (Podstrona Kontakt)
   Field layout follows the form template divs (.rc-form-grid/.rc-field);
   colors and fonts come from theme.json presets.
   -------------------------------------------------------------------------- */
.rc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.rc-form-grid p {
  margin: 0;
}

.rc-form-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.rc-field {
  margin: 0;
}

.rc-field-full {
  grid-column: 1 / -1;
}

.rc-field-label {
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: 8px;
}

.wpcf7-form-control-wrap {
  display: block;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--wp--preset--color--surface-card);
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 4px;
  color: var(--wp--preset--color--text-body);
  font-family: var(--wp--preset--font-family--body);
  font-size: 14px;
  padding: 12px 14px;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
  border-color: var(--wp--preset--color--primary);
  outline: none;
}

.wpcf7-acceptance {
  font-size: 12.5px;
  color: var(--wp--preset--color--text-muted);
}

.wpcf7-acceptance input {
  accent-color: var(--wp--preset--color--primary);
  margin-right: 10px;
}

.wpcf7 input[type="submit"] {
  background-color: var(--wp--preset--color--primary);
  color: #ffffff;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: 4px;
  padding: 13px 26px;
  cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
  background-color: var(--wp--preset--color--primary-hover);
}

@media (max-width: 781px) {
  .rc-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   15. Sekcja CTA Realizacje (Split Card)
   ========================================================================== */

.rc-cta-split-card {
  overflow: hidden;
}

.rc-cta-hotline p a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.rc-cta-hotline p a:hover {
  color: var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
  .rc-cta-split-card .rc-cta-content {
    border-right: none !important;
    border-bottom: 1px solid var(--wp--preset--color--border) !important;
    padding: 32px 20px !important;
  }

  .rc-cta-split-card .rc-cta-hotline {
    padding: 32px 20px !important;
  }
}

/* ==========================================================================
   16. Ikony Cech Ochronnych Realizacji
   ========================================================================== */

.rc-card-footer {
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  margin-top: auto !important;
}

.rc-card-icons img {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

.rc-card-icons img:last-child {
  margin-right: 0;
}

.rc-card-footer .wp-block-read-more {
  white-space: nowrap;
  margin-left: auto;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.rc-card-footer .wp-block-read-more:hover {
  color: var(--wp--preset--color--primary-hover) !important;
}

.rc-single-protection-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.rc-single-protection-icons img {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.rc-single-protection-icons img:last-child {
  margin-right: 0;
}

.rc-card-icons:empty,
.rc-single-protection-icons:empty {
  display: none !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   17. SafePend Catalog (badge dostępności, specyfikacja, galeria, film)
   Kolory, typografia i odstępy kart siedzą w presetach/atrybutach.
   -------------------------------------------------------------------------- */
.rc-sp-badge{display:inline-block;padding:4px 12px;border-radius:999px;font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--small);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.rc-sp-badge--available{background:var(--wp--preset--color--primary);color:var(--wp--preset--color--surface-light)}
.rc-sp-badge--unavailable{background:var(--wp--preset--color--surface-card);color:var(--wp--preset--color--text-heading);border:1px solid var(--wp--preset--color--border)}
.rc-sp-specs{margin:0}
.rc-sp-specs__row{display:grid;grid-template-columns:180px 1fr;gap:8px 16px;padding:8px 0;border-bottom:1px solid var(--wp--preset--color--border)}
.rc-sp-specs dt{font-weight:700}
.rc-sp-specs dd{margin:0}
.rc-sp-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rc-sp-gallery img{width:100%;height:auto;display:block;border-radius:6px}
.rc-sp-video iframe{width:100%;aspect-ratio:16/9;height:auto;display:block;border:0}
@media (max-width:781px){.rc-sp-gallery{grid-template-columns:1fr}.rc-sp-specs__row{grid-template-columns:1fr}}

/* Badge na zdjęciu karty archiwum + równe wysokości kart (jak sekcja 11):
   stopka siedzi w grupie treści (wcięta 20 px), a jej link jest jednowierszowy
   (margin-left:auto). overflow:hidden przycina zdjęcie do promienia karty,
   hover odwzorowuje karty realizacji. Zakres tylko siatka archiwum —
   pasek strony głównej (klasa bez wariantu) zachowuje hover z sekcji 10. */
.rc-sp-card-media{position:relative}
.rc-sp-card-media .wp-block-post-featured-image{margin:0}
.rc-sp-badge-float{position:absolute;top:12px;left:12px;z-index:2}

.rc-realizacje-grid .rc-safepend-card {
  flex: 1;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.rc-realizacje-grid .rc-safepend-card:hover {
  border-color: var(--wp--preset--color--primary) !important;
  transform: translateY(-3px);
}

.rc-realizacje-grid .rc-safepend-card .wp-block-post-featured-image img {
  transition: transform 0.4s ease;
}

.rc-realizacje-grid .rc-safepend-card:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
}