/* Carmel Garage Door Repair — custom styles */
/* Design: deep navy ink + warm ember orange. Urgent, safety-first, distinct fingerprint. */

html {
  scroll-behavior: smooth;
}

/* Skip link for keyboard users */
.jump-to-content {
  position: absolute;
  left: 0;
  top: -120%;
  z-index: 200;
  background: #ea8c1f;
  color: #0b1f38;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  border-radius: 0 0 0.5rem 0;
  transition: top 0.2s ease;
}
.jump-to-content:focus {
  top: 0;
}

/* Announcement strip gradient */
.alert-strip {
  background: linear-gradient(90deg, #0b1f38 0%, #14304f 55%, #1a3a5c 100%);
}

/* Hero backdrop — layered navy gradient plus faint blueprint grid */
.hero-ink {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(234, 140, 31, 0.18) 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(42, 84, 136, 0.35) 0%, transparent 60%),
    linear-gradient(160deg, #0b1f38 0%, #0e2743 45%, #14304f 100%);
}
.blueprint-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Panel/CTA bands share the same ink texture */
.band-ink {
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(234, 140, 31, 0.16) 0%, transparent 55%),
    linear-gradient(140deg, #0b1f38 0%, #14304f 100%);
}

/* Sticky masthead shadow once scrolled */
.masthead-pinned {
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 6px 24px rgba(11, 31, 56, 0.12);
}

/* Ember accent underline that grows on hover for nav links */
.rail-link {
  position: relative;
}
.rail-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: #ea8c1f;
  transition: width 0.25s ease;
}
.rail-link:hover::after,
.rail-link.rail-current::after {
  width: 100%;
}

/* Mobile drawer slides down from top */
.mobile-drawer {
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-drawer.is-open {
  transform: translateY(0);
}

/* Dropdown menus */
.menu-pop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.menu-parent:hover .menu-pop,
.menu-parent:focus-within .menu-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ember button with a soft lift */
.ember-btn {
  box-shadow: 0 8px 20px rgba(234, 140, 31, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.ember-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(234, 140, 31, 0.4);
}

/* Tile hover raise */
.raise {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.raise:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(11, 31, 56, 0.14);
}

/* Numbered process step marker */
.step-badge {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Accordion */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.34s ease;
}
.accordion-panel.is-active {
  max-height: 640px;
}
.accordion-trigger .accordion-sign {
  transition: transform 0.3s ease;
}
.accordion-trigger.is-active .accordion-sign {
  transform: rotate(45deg);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Left ember rule for editorial blocks */
.ember-rule {
  border-left: 3px solid #ea8c1f;
  padding-left: 1.1rem;
}

/* Form fields */
.field {
  width: 100%;
  padding: 0.75rem 0.95rem;
  border-radius: 0.6rem;
  border: 1px solid #d3dae4;
  color: #14304f;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field:focus {
  outline: none;
  border-color: #ea8c1f;
  box-shadow: 0 0 0 3px rgba(234, 140, 31, 0.18);
}

/* Inline form confirmation */
.form-note {
  display: none;
}

/* Diagonal warning stripe used on the emergency strip */
.hazard-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(234, 140, 31, 0.14),
    rgba(234, 140, 31, 0.14) 14px,
    transparent 14px,
    transparent 28px
  );
}

@media print {
  header, footer, .mobile-drawer, .ember-btn { display: none !important; }
  body { color: #000; font-size: 12pt; }
}