/* Cloud EA — Botbuilt industrial system, Patolink colors only
   Navy #172A39 · Teal #62A49D · White #FFFFFF */
:root {
  --patolink-navy: #172A39;
  --patolink-teal: #62A49D;
  --patolink-bg: #FFFFFF;
  --nav-height: 6rem;
}

html {
  background-color: var(--patolink-bg);
  scroll-behavior: smooth;
}

html,
body {
  background-color: var(--patolink-bg);
  color: var(--patolink-navy);
  font-family: Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.font-display-lg, .font-display-hero, .font-headline-xl, .font-headline-lg, .font-headline-md {
  font-family: Montserrat, sans-serif;
}

h1, .font-display-lg, .font-display-hero {
  font-weight: 800;
}

h2, .font-headline-lg, .font-headline-xl {
  font-weight: 700;
}

h3, h4, .font-headline-md, .font-headline-sm {
  font-weight: 600;
}

::selection {
  background: var(--patolink-teal);
  color: var(--patolink-navy);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--patolink-navy);
}

::-webkit-scrollbar-track {
  background: var(--patolink-bg);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}

.main-nav-offset {
  padding-top: var(--nav-height, 6rem);
}

.home-hero {
  min-height: 100svh;
  padding-top: calc(var(--nav-height, 6rem) + 1.5rem);
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .home-hero {
    height: 100vh;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.caution-stripe {
  background: repeating-linear-gradient(
    45deg,
    var(--patolink-teal),
    var(--patolink-teal) 10px,
    var(--patolink-navy) 10px,
    var(--patolink-navy) 20px
  );
}

.glass-panel {
  background: rgba(23, 42, 57, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hard-shadow {
  box-shadow: 4px 4px 0 0 var(--patolink-navy);
}

.hard-shadow-teal {
  box-shadow: 4px 4px 0 0 var(--patolink-teal);
}

.steel-border {
  border: 1px solid var(--patolink-navy);
}

.blueprint-grid {
  background-image: radial-gradient(rgba(23, 42, 57, 0.18) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

.service-hover-glow:hover {
  box-shadow: 0 0 15px rgba(98, 164, 157, 0.4);
  border-color: var(--patolink-teal);
}

#mobile-menu {
  -webkit-overflow-scrolling: touch;
  max-height: calc(100dvh - var(--nav-height, 6rem));
}

.mega-panel {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-height, 6rem);
  z-index: 45;
  background: #ffffff;
  border-top: 4px solid var(--patolink-teal);
  box-shadow: 0 16px 40px rgba(23, 42, 57, 0.18);
  max-height: calc(100vh - var(--nav-height, 6rem));
  overflow-y: auto;
}

.mega-panel[hidden] {
  display: none;
}

@media (max-width: 1279px) {
  .mega-panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mobile-menu,
  #nav-backdrop {
    transition: none;
  }
}

a, button {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/*
 * Card hover — lift + offset shadow on leaf cards site-wide.
 * Skips forms, fields, tables, and wrappers that already contain cards.
 */
.steel-border:not(form):not(input):not(select):not(textarea):not(table):not(.overflow-x-auto):not(:has(.steel-border)),
.product-card,
.blog-card,
.tier-card,
.dc-card,
.os-btn,
.payment-card,
.card-hover {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.product-card img,
.blog-card img,
.tier-card img {
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .steel-border:not(form):not(input):not(select):not(textarea):not(table):not(.overflow-x-auto):not(:has(.steel-border)):hover,
  .product-card:hover,
  .blog-card:hover,
  .tier-card:hover,
  .dc-card:hover,
  .os-btn:hover,
  .payment-card:hover,
  .card-hover:hover {
    transform: translateY(-5px);
  }

  .steel-border.hard-shadow:not(form):not(:has(.steel-border)):hover,
  .product-card:hover,
  .tier-card:hover,
  .card-hover.hard-shadow:hover {
    box-shadow: 7px 11px 0 0 var(--patolink-navy);
  }

  .steel-border:not(.hard-shadow):not(form):not(input):not(select):not(textarea):not(table):not(.overflow-x-auto):not(:has(.steel-border)):hover,
  .dc-card:hover,
  .os-btn:hover,
  .payment-card:hover,
  .blog-card:hover {
    box-shadow: 4px 6px 0 0 var(--patolink-navy);
  }

  [class*="bg-foundation-navy"].steel-border:not(form):not(:has(.steel-border)):hover,
  [class*="bg-foundation-navy"].blog-card:hover,
  [class*="bg-foundation-navy"].tier-card:hover {
    box-shadow: 7px 11px 0 0 var(--patolink-teal);
  }

  .product-card:hover img,
  .blog-card:hover img,
  .tier-card:hover img {
    transform: scale(1.06);
  }

  a.steel-border:hover .material-symbols-outlined,
  .product-card:hover .material-symbols-outlined,
  .blog-card:hover .material-symbols-outlined,
  .card-hover:hover .material-symbols-outlined {
    transform: translateX(4px);
  }
}

a.steel-border .material-symbols-outlined,
.product-card .material-symbols-outlined,
.blog-card .material-symbols-outlined,
.card-hover .material-symbols-outlined {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .steel-border,
  .product-card,
  .blog-card,
  .tier-card,
  .dc-card,
  .os-btn,
  .payment-card,
  .card-hover,
  .product-card img,
  .blog-card img,
  .tier-card img,
  a.steel-border .material-symbols-outlined,
  .product-card .material-symbols-outlined,
  .blog-card .material-symbols-outlined,
  .card-hover .material-symbols-outlined {
    transition: none;
  }

  .steel-border:hover,
  .product-card:hover,
  .blog-card:hover,
  .tier-card:hover,
  .dc-card:hover,
  .os-btn:hover,
  .payment-card:hover,
  .card-hover:hover {
    transform: none;
  }

  .product-card:hover img,
  .blog-card:hover img,
  .tier-card:hover img {
    transform: none;
  }
}

/* Navy chrome: keep reversed type */
[class*="bg-primary-container"] .text-on-surface-variant,
[class*="bg-foundation-navy"] .text-on-surface-variant,
[class*="bg-primary-container"] .text-secondary,
footer .text-on-surface-variant {
  color: rgba(255, 255, 255, 0.72);
}

[class*="bg-foundation-navy"] .mega-panel .text-on-surface-variant {
  color: rgba(23, 42, 57, 0.72);
}

input, select, textarea {
  border-radius: 0 !important;
  border: 1px solid var(--patolink-navy) !important;
  background: var(--patolink-bg) !important;
  color: var(--patolink-navy) !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-width: 2px !important;
  border-color: var(--patolink-teal) !important;
  box-shadow: none;
}

aside nav a[aria-current="page"] {
  background: rgba(98, 164, 157, 0.18);
  box-shadow: inset 3px 0 0 var(--patolink-teal);
  color: #ffffff;
}

img {
  max-width: 100%;
}

table {
  border-collapse: collapse;
}

.featured-gradient {
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
}

.newsletter-pattern {
  background-image: radial-gradient(#ffffff22 1px, transparent 1px);
  background-size: 20px 20px;
}

.blog-filters-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.blog-filters-scroll::-webkit-scrollbar {
  display: none;
}

.blog-filter-btn {
  min-height: 44px;
}

.blog-card {
  transition: opacity 0.25s ease;
}