/* Only header-logo sizing and decorative background watermark. */
#navbar .nav-logo img {
  height: 64px;
  width: auto;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
}
#navbar .nav-logo { min-width: 0; }
.tovar-watermark-surface { isolation: isolate; }
.tovar-watermark-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  background-color: #16382a;
  opacity: 0.09;
  -webkit-mask-image: url('/tovar-branding/watermark-desktop.svg');
  mask-image: url('/tovar-branding/watermark-desktop.svg');
  -webkit-mask-size: 560px 560px;
  mask-size: 560px 560px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: var(--tovar-pattern-x, 0px) var(--tovar-pattern-y, 0px);
  mask-position: var(--tovar-pattern-x, 0px) var(--tovar-pattern-y, 0px);
  mask-mode: alpha;
}
.tovar-watermark-light::before { background-color: #f7f5ec; }
/* The hero's existing photographic overlays are background layers 0 and 1;
   its content is already layer 3. Place the decoration between them. */
#hero.tovar-watermark-surface::before { z-index: 2; }
@media (max-width: 768px) {
  #navbar .nav-logo img { height: 48px; }
  /* Let only the header brand name wrap when needed; action controls stay at right. */
  #navbar .nav-logo-text { min-width: 0; }
  #navbar .nav-logo-text strong { white-space: normal; }
  #navbar .nav-actions { flex-shrink: 0; }
}
.tovar-pattern-mobile .tovar-watermark-surface::before {
  -webkit-mask-image: url('/tovar-branding/watermark-mobile.svg');
  mask-image: url('/tovar-branding/watermark-mobile.svg');
  -webkit-mask-size: 460px 460px;
  mask-size: 460px 460px;
}

/* Mobile header cleanup (2026-10-04): on phones the header row was overcrowded —
   logo + wordmark + phone pill + hamburger, with the pill overlapping "Care".
   The number already lives in the topbar and the sticky bottom bar, so the
   header pill is redundant on mobile. */
@media (max-width: 680px) {
  /* Hide the redundant phone pill in the header on phones only (tablets keep it). */
  #navbar .nav-phone { display: none; }
  /* Compact the brand lockup so it fits one tidy row with the hamburger. */
  #navbar .nav-logo img { height: 40px; }
  #navbar .nav-logo { gap: 0.55rem; }
  /* Keep "Tovar Lawn Care" on one line instead of wrapping into a stack. */
  #navbar .nav-logo-text strong { white-space: nowrap; font-size: 0.95rem; }
  #navbar .nav-logo-text span { letter-spacing: 0.2em; }
  /* Tighten the header row now that only the hamburger sits on the right. */
  #navbar .nav-actions { gap: 0; }
  .nav-inner { gap: 0.5rem; }
}

/* ===== 2026-10-04 refresh (Carlos approved): See-My-Price-first ===== */

/* 2. Desktop header: the wordmark keeps its natural width so
   "& LANDSCAPING LLC" can never slide under the Services link (1024px+). */
@media (min-width: 1024px) {
  #navbar .nav-logo, #navbar .nav-logo-text { flex-shrink: 0; }
  #navbar .nav-logo-text span { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #navbar .nav-text { display: none; }
  #navbar .nav-links { gap: 1.15rem; }
}

/* 5. Header: "Get a free quote" is a plain outlined button.
   "See My Price" keeps the gold .nav-quote treatment. */
.nav-outline { background: transparent; color: var(--forest) !important; font-weight: 700; padding: 0.55rem 1.2rem; border-radius: 100px; white-space: nowrap; border: 1.5px solid var(--line-gold); font-size: 0.86rem; transition: all 0.3s var(--ease); }
.nav-outline:hover { border-color: var(--gold); color: var(--gold-lo) !important; transform: translateY(-2px); }
@media (max-width: 1100px) { .nav-outline { display: none; } }

/* 4. Footer logo: light version, ~140px wide on the dark footer. */
.footer-brand img { width: 140px; height: auto; }

/* 8. "Read our reviews on Google" (light section): outlined forest button. */
.btn-outline-dark { background: transparent; color: var(--forest) !important; border: 1.5px solid var(--forest); font-weight: 700; }
.btn-outline-dark:hover { background: var(--forest); color: #fff !important; }