/* TLV Towers — base.css
   Converted from React src/index.css
   Tailwind directives are handled by the CDN build */

h3 { font-weight: 600; }

/* Mobile */
@media (max-width: 768px) {
  h1 { font-size: 2.5rem !important; line-height: 1.1 !important; }
  h2 { font-size: 2rem !important; }
  h3 { font-size: 1.5rem !important; }
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .grid { gap: 1.5rem !important; }
  button, .btn { padding: 0.75rem 1.5rem !important; font-size: 0.75rem !important; }
  .h-96 { height: 16rem !important; }
  .h-80 { height: 14rem !important; }
  footer .grid { gap: 2rem !important; }
  footer h5 { font-size: 1rem !important; margin-bottom: 1rem !important; }
  footer p, footer li, footer span { font-size: 0.875rem !important; }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  h1 { font-size: 3rem !important; }
  h2 { font-size: 2.5rem !important; }
  section { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

.font-black { font-weight: 500; }

/* Transitions */
.tlv-slide { transition: opacity 1s ease; }

/* Off-canvas overlay */
.tlv-offcanvas-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px); z-index: 50;
}
.tlv-offcanvas {
  position: fixed; top: 0; right: 0; height: 100%; width: 100%;
  max-width: 420px; background: white; z-index: 51;
  overflow-y: auto; transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.tlv-offcanvas.open { transform: translateX(0); }

/* Mobile drawer */
.tlv-drawer {
  position: fixed; top: 0; left: 0; height: 100%;
  width: 85vw; max-width: 320px; background: #111827;
  z-index: 70; overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.tlv-drawer.open { transform: translateX(0); }

/* Sticky header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: background .3s, box-shadow .3s; }
.site-header.scrolled { background: white; box-shadow: 0 1px 8px rgba(0,0,0,.08); }

/* Dropdown */
.tlv-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: white; min-width: 200px; box-shadow: 0 10px 40px rgba(0,0,0,.12);
  padding: 0.5rem 0; opacity: 0; pointer-events: none;
  transition: opacity .2s; z-index: 60;
}
.tlv-dropdown.active { opacity: 1; pointer-events: auto; }