/* ============================================================
   Hybrid Renovations — Website UI kit base
   Built on top of ../../colors_and_type.css
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--hr-bg);
  color: var(--hr-text);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section { padding: var(--section-y) 0; }
.section-tight { padding: 48px 0; }
.bg-bg { background: var(--hr-bg); }
.bg-surface { background: var(--hr-surface); }
.bg-blue-50 { background: var(--hr-blue-50); }
.bg-green-50 { background: var(--hr-green-50); }
.bg-navy { background: var(--hr-navy); color: #fff; }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy p { color: rgba(255,255,255,0.8); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hr-blue);
  margin: 0 0 12px;
}
.bg-navy .eyebrow { color: var(--hr-green); }
h1 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; color: var(--hr-text-strong); margin: 0 0 18px; }
h2 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--hr-text-strong); margin: 0 0 14px; }
h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--hr-text-strong); margin: 0 0 10px; line-height: 1.2; }
h4 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--hr-text-strong); margin: 0 0 6px; }
p  { margin: 0 0 14px; color: var(--hr-body); line-height: 1.65; }
.lead { font-size: 18px; line-height: 1.65; color: var(--hr-body); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14.5px;
  padding: 13px 22px; border-radius: 10px; border: 0; cursor: pointer;
  min-height: 46px; transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  text-decoration: none;
}
.btn .lucide { width: 18px; height: 18px; stroke-width: 1.75; }
.btn-primary { background: var(--hr-blue); color: #fff; }
.btn-primary:hover { background: var(--hr-blue-700); }
.btn-secondary { background: var(--hr-green); color: var(--hr-navy); }
.btn-secondary:hover { background: var(--hr-green-600); }
.btn-outline { background: transparent; color: var(--hr-navy); border: 1.5px solid var(--hr-navy); }
.bg-navy .btn-outline { color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-outline:hover { background: var(--hr-blue-50); color: var(--hr-blue-700); border-color: var(--hr-blue-700); }
.btn-ghost { background: transparent; color: var(--hr-blue); padding: 8px 0; min-height: 0; }
.btn-ghost:hover { color: var(--hr-blue-700); }
.btn-pill { border-radius: 999px; padding-left: 26px; padding-right: 26px; }
.btn-lg { padding: 16px 28px; font-size: 15px; min-height: 52px; }

/* ---------- Pill / chip ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--hr-blue-50); color: var(--hr-blue-700);
}
.pill-warm { background: var(--hr-warning-bg); color: var(--hr-warm-600); }
.pill-green { background: var(--hr-green-50); color: var(--hr-green-700); }
.pill-navy { background: rgba(255,255,255,0.1); color: #fff; }

/* ---------- Card ---------- */
.card {
  background: var(--hr-surface);
  border: 1px solid var(--hr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ---------- Service category stripe ---------- */
.stripe-blue { border-top: 4px solid var(--hr-blue); }
.stripe-green { border-top: 4px solid var(--hr-green); }
.stripe-warm { border-top: 4px solid var(--hr-warm); }
.stripe-navy { border-top: 4px solid var(--hr-navy); }

/* ---------- Photo placeholder (no real photos available) ---------- */
.photo {
  position: relative;
  background: linear-gradient(135deg, #1C75BC 0%, #14528A 60%, #0F2537 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  overflow: hidden;
}
.photo::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 12px, transparent 12px 24px);
  pointer-events: none;
}
.photo-green { background: linear-gradient(135deg, #8CC63F 0%, #5C8A22 100%); }
.photo-navy  { background: linear-gradient(135deg, #19324A, #0F2537); }
.photo-mixed { background: linear-gradient(135deg, #1C75BC 0%, #5C8A22 100%); }
.photo-warm  { background: linear-gradient(135deg, #F59E0B 0%, #D9890A 100%); color: #0F2537; }

/* ---------- Hairline divider ---------- */
.hr { height: 1px; background: var(--hr-divider); border: 0; margin: 0;}

/* ---------- Form select with custom chevron ---------- */
/* Native browser select chevrons render right at the edge of the box —
   the design wants space between the chevron and the right border. We
   strip the native chevron with `appearance: none`, draw our own SVG
   chevron at right 14px, and pad the right side enough so the option
   text never overlaps it. */
.input-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2314528A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ---------- Top nav: services dropdown grid ---------- */
/* `auto-fit` + `minmax` makes the grid adaptive without media-query
   guesswork: as many ~170px columns as the dropdown is wide enough to
   hold. Wide desktop dropdown (~760px) → 3 columns; narrower window or
   tablet → 2 columns; phone-width → 1 column. Row gap is generous so
   the second-row categories never blend into the first row's items. */
.nav-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  column-gap: 36px;
  row-gap: 32px;
}

/* ---------- Phone link (tap-to-call) ---------- */
/* Used on the top nav, footer, and contact page so the number always lights
   up blue on hover and is keyboard/screen-reader friendly. `tel:` links
   trigger the OS phone dialer on mobile and the default phone app on desktop. */
.tel-link            { color: var(--hr-navy); text-decoration: none; transition: color 180ms ease; }
.tel-link:hover      { color: var(--hr-blue); text-decoration: underline; }
.tel-link:focus-visible { outline: 2px solid var(--hr-blue); outline-offset: 3px; border-radius: 4px; }
/* Same on dark surfaces (footer / hero CTA), where navy isn't readable. */
.bg-navy .tel-link,
.tel-link.on-dark    { color: rgba(255,255,255,0.9); }
.bg-navy .tel-link:hover,
.tel-link.on-dark:hover { color: var(--hr-green); }

/* ---------- "Read all reviews on Google →" link ---------- */
/* The arrow slides 4px to the right on hover — gives the link a small
   motion cue that says "this goes somewhere" without being distracting.
   The text underline + colour shift on hover matches the rest of the
   site's link convention. The transition lives on the arrow element so
   it eases smoothly, matching the same 200 ms cubic-bezier curve used
   for the "Learn more" arrow on the services cards and the "View full
   project" arrow on the recent-projects featured card. */
.reviews-google-link-arrow {
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reviews-google-link:hover { text-decoration: underline; color: var(--hr-blue-700); }
.reviews-google-link:hover .reviews-google-link-arrow { transform: translateX(4px); }

/* ---------- Animation primitives ---------- */
@keyframes hr-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: hr-fade-up 0.5s var(--ease-out) both; }

/* ---------- Layout helpers ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }

.muted { color: var(--hr-text-muted); }
.strong { color: var(--hr-text-strong); font-weight: 700; }

.maxw-720 { max-width: 720px; }
.maxw-560 { max-width: 560px; }