/* ==========================================================================
   Link-in-bio page (/links only, see src/app/pages/links). PageHead turns
   this file on for that page alone, so the global rules below (hiding the
   floating buttons) never reach other pages.
   Dark theme is the default; [data-theme=light] overrides the tokens.
   All classes use the lk- prefix.
   ========================================================================== */
:root {
   --lk-bg: #02050a;
   --lk-surface: #0b0f14;
   --lk-surface-hover: #11151c;
   --lk-border: rgba(255, 255, 255, .08);
   --lk-border-hover: rgba(34, 197, 94, .5);
   --lk-heading: #ffffff;
   --lk-text: #b0b2b7;
   --lk-muted: #8b9097;
   --lk-icon: #22c55e;
   --lk-icon-bg: rgba(22, 163, 74, .12);
   /* #15803d, not the brand #16a34a: white text on it passes WCAG AA */
   --lk-cta: #15803d;
   --lk-cta-hover: #166534;
   --lk-focus: #22c55e;
   /* the services page's card panel: brand green multiplied at 30% */
   --lk-thumb: #06361c;
   --lk-btn-border: rgba(255, 255, 255, .18);
}

[data-theme=light] {
   --lk-bg: #f4f5f6;
   --lk-surface: #ffffff;
   --lk-surface-hover: #ffffff;
   --lk-border: #e3e5e8;
   --lk-border-hover: rgba(22, 163, 74, .55);
   --lk-heading: #11151c;
   --lk-text: #4b5058;
   --lk-muted: #5f6368;
   --lk-icon: #15803d;
   --lk-icon-bg: rgba(22, 163, 74, .1);
   --lk-focus: #15803d;
   --lk-thumb: #b9e3c8;
   --lk-btn-border: #c9cdd2;
}

/* A focused page: no floating WhatsApp / AI chat / back-to-top buttons. */
.xe-wa-fab,
#xtro-ai-chat-widget,
#scroll-top,
#scroll-percentage {
   display: none !important
}

body,
html[data-theme] body {
   background: var(--lk-bg)
}

/* No fixed site header here, so no room to leave for it (custom.css). */
#smooth-content {
   padding-top: 0
}

.lk {
   display: flex;
   justify-content: center;
   min-height: 100vh;
   min-height: 100svh;
   padding: 56px 20px 32px;
   background: var(--lk-bg);
   color: var(--lk-text);
   font-family: var(--rr-ff-body)
}

.lk-col {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 480px
}

/* ---- Intro ---------------------------------------------------------------- */
.lk-head {
   text-align: center
}

.lk-logo {
   display: inline-block;
   margin-bottom: 32px
}

.lk-logo img {
   width: auto;
   height: 40px
}

.lk .lk-title {
   margin: 0 0 12px;
   color: var(--lk-heading);
   font-size: 26px;
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -.02em;
   text-wrap: balance
}

.lk .lk-intro {
   max-width: 400px;
   margin: 0 auto;
   color: var(--lk-text);
   font-size: 15px;
   line-height: 1.6
}

.lk .lk-hours {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin: 16px 0 0;
   padding: 6px 12px;
   border: 1px solid var(--lk-border);
   border-radius: 999px;
   background: var(--lk-surface);
   color: var(--lk-text);
   font-size: 13px;
   font-weight: 500;
   line-height: 1.4
}

.lk-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #22c55e;
   box-shadow: 0 0 0 3px rgba(34, 197, 94, .2)
}

/* ---- Links ----------------------------------------------------------------
   Same sharp-cornered language as the rest of the site (buttons and service
   cards there are square); 4px only softens it for thumbs. */
.lk-nav {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 32px
}

.lk-cta,
.lk-btn,
.lk-card {
   border-radius: 4px;
   text-decoration: none;
   transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out
}

.lk-cta {
   display: flex;
   align-items: center;
   gap: 16px
}

.lk-text {
   display: flex;
   flex-direction: column;
   gap: 2px;
   flex: 1;
   min-width: 0
}

.lk-label {
   font-size: 16px;
   font-weight: 700;
   line-height: 1.3
}

.lk-sub {
   font-size: 13px;
   line-height: 1.45
}

.lk-end {
   flex: none;
   transition: transform .18s ease-out
}

/* Primary: WhatsApp */
.lk .lk-cta {
   min-height: 76px;
   padding: 16px 20px;
   background: var(--lk-cta);
   color: #fff;
   box-shadow: 0 12px 28px -14px rgba(22, 163, 74, .7)
}

.lk .lk-cta:hover {
   background: var(--lk-cta-hover);
   color: #fff;
   transform: translateY(-1px)
}

.lk-cta-icon {
   flex: none
}

.lk-cta .lk-sub {
   color: rgba(255, 255, 255, .86)
}

/* Secondary: free quote */
.lk .lk-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 52px;
   padding: 12px 20px;
   border: 1px solid var(--lk-btn-border);
   background: transparent;
   color: var(--lk-heading);
   font-size: 15px;
   font-weight: 700
}

.lk .lk-btn:hover {
   border-color: var(--lk-icon);
   background: var(--lk-icon-bg);
   color: var(--lk-heading)
}

.lk-cta:hover .lk-end,
.lk-btn:hover .lk-end {
   transform: translateX(3px)
}

/* Section label, like the site's green uppercase .sub-heading */
.lk .lk-eyebrow {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 24px 0 4px;
   color: var(--lk-icon);
   font-size: 13px;
   font-weight: 700;
   line-height: 1.4;
   letter-spacing: .08em;
   text-transform: uppercase
}

.lk-eyebrow::after {
   content: "";
   flex: 1;
   height: 1px;
   background: var(--lk-border)
}

/* Image cards */
.lk-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
   margin: 0;
   padding: 0;
   list-style: none
}

.lk-grid li {
   display: flex
}

.lk .lk-card {
   display: flex;
   flex-direction: column;
   width: 100%;
   overflow: hidden;
   border: 1px solid var(--lk-border);
   background: var(--lk-surface);
   color: var(--lk-heading)
}

.lk .lk-card:hover {
   border-color: var(--lk-border-hover);
   color: var(--lk-heading);
   transform: translateY(-2px)
}

[data-theme=light] .lk .lk-card:hover {
   box-shadow: 0 12px 24px -16px rgba(17, 21, 28, .35)
}

/* Fixed 4:3 panel; the image is absolutely placed so its own size can't
   stretch the panel (every card in a row lines up). */
.lk-thumb {
   --lk-pad: 14px;
   position: relative;
   display: block;
   aspect-ratio: 4 / 3;
   background: var(--lk-thumb)
}

.lk-thumb img {
   position: absolute;
   inset: var(--lk-pad);
   width: calc(100% - var(--lk-pad) * 2);
   height: calc(100% - var(--lk-pad) * 2);
   object-fit: contain;
   transition: scale .6s cubic-bezier(.22, 1, .36, 1)
}

.lk-card:hover .lk-thumb img {
   scale: 1.07
}

.lk-body {
   display: flex;
   flex-direction: column;
   gap: 4px;
   flex: 1;
   padding: 12px 14px 14px
}

.lk-card .lk-label {
   font-size: 15px;
   transition: color .18s ease-out
}

.lk-card:hover .lk-label {
   color: var(--lk-icon)
}

.lk-ext {
   display: inline-block;
   vertical-align: -1px;
   margin-left: 2px
}

.lk-card .lk-sub {
   color: var(--lk-muted);
   font-size: 12.5px
}

.lk-badge {
   position: absolute;
   top: 8px;
   left: 8px;
   z-index: 1;
   padding: 2px 8px;
   border-radius: 2px;
   background: var(--rr-color-theme-secondary, #ffc226);
   color: #11151c;
   font-size: 11px;
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: .02em;
   white-space: nowrap
}

.lk a:focus-visible {
   outline: 2px solid var(--lk-focus);
   outline-offset: 3px
}

/* ---- Footer --------------------------------------------------------------- */
.lk-foot {
   margin-top: auto;
   padding-top: 48px;
   text-align: center
}

.lk-social {
   display: flex;
   justify-content: center;
   gap: 12px;
   margin: 0;
   padding: 0;
   list-style: none
}

.lk-social a {
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   border: 1px solid var(--lk-border);
   border-radius: 50%;
   background: var(--lk-surface);
   color: var(--lk-text);
   font-size: 17px;
   transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out
}

.lk .lk-social a:hover {
   border-color: var(--lk-cta);
   background: var(--lk-cta);
   color: #fff
}

.lk .lk-legal {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin: 24px 0 0;
   color: var(--lk-muted);
   font-size: 13px;
   line-height: 1.5
}

.lk .lk-legal a {
   color: var(--lk-text);
   text-decoration: underline;
   text-decoration-color: var(--lk-border);
   text-underline-offset: 3px
}

.lk .lk-legal a:hover {
   color: var(--lk-heading);
   text-decoration-color: currentColor
}

/* ---- Entrance: a short top-to-bottom fade-up ------------------------------ */
@keyframes lk-in {
   from {
      opacity: 0;
      transform: translateY(8px)
   }
}

.lk-head,
.lk-cta,
.lk-btn,
.lk-grid li,
.lk-foot {
   animation: lk-in .32s ease-out both
}

.lk-cta { animation-delay: 60ms }
.lk-btn { animation-delay: 100ms }
.lk-grid li:nth-child(1) { animation-delay: 140ms }
.lk-grid li:nth-child(2) { animation-delay: 180ms }
.lk-grid li:nth-child(3) { animation-delay: 220ms }
.lk-grid li:nth-child(4) { animation-delay: 260ms }
.lk-foot { animation-delay: 300ms }

@media (prefers-reduced-motion: reduce) {

   .lk-head,
   .lk-cta,
   .lk-btn,
   .lk-grid li,
   .lk-foot {
      animation: none
   }

   .lk-cta,
   .lk-btn,
   .lk-card,
   .lk-end,
   .lk-thumb img {
      transition: none
   }

   .lk .lk-cta:hover,
   .lk .lk-card:hover,
   .lk-cta:hover .lk-end,
   .lk-btn:hover .lk-end {
      transform: none
   }

   .lk-card:hover .lk-thumb img {
      scale: none
   }
}

/* ---- Small phones --------------------------------------------------------- */
@media only screen and (max-width: 400px) {
   .lk {
      padding: 40px 16px 24px
   }

   .lk .lk-title {
      font-size: 23px
   }

   .lk-cta {
      gap: 12px
   }

   .lk .lk-cta {
      padding: 14px 16px
   }

   .lk-grid {
      gap: 10px
   }

   .lk-thumb {
      --lk-pad: 10px
   }

   .lk-body {
      padding: 10px 12px 12px
   }

   .lk-card .lk-label {
      font-size: 14px
   }
}