/* Miami Ink Tattoo Designs - 2026 global header */

/* Registered custom properties so the hover colour can be TRANSITIONED.
   A plain --var inside a gradient is not animatable; @property makes it so.
   Browsers without @property simply snap instead of easing - the colour is
   still correct, only the transition is lost. */
@property --mi-wm-base {
  syntax: '<color>'; inherits: false; initial-value: #f0eee9;
}
@property --mi-dot-base {
  syntax: '<color>'; inherits: false; initial-value: #cf2027;
}

.mi-hdr, .mi-hdr * { box-sizing: border-box; }

/* ---- bar ------------------------------------------------------------ */
/* 15px of breathing room top and bottom, on the ROW. Deliberately not on
   the button - see the LOGIN block below, which is pinned so the red never
   grows with the bar. */
.mi-hdr .et_pb_row {
  display: flex !important; align-items: center !important; flex-wrap: nowrap;
  max-width: 1320px !important; width: 100% !important;
  margin-left: auto !important; margin-right: auto !important;
  padding: 56px 30px !important;
}
.mi-hdr .et_pb_column {
  display: flex !important; align-items: center !important;
  align-self: center !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  width: auto !important; float: none !important;
}
.mi-hdr .mi-hdr-c1 { flex: 1 1 auto; min-width: 0; }
/* nav and LOGIN are siblings here - one centred flex line, so they cannot
   drift out of alignment with each other. */
.mi-hdr .mi-hdr-c2 {
  flex: 0 0 auto; justify-content: flex-end; gap: 34px;
}
.mi-hdr .et_pb_module { margin-bottom: 0 !important; align-self: center !important; }

/* ---- brand lockup --------------------------------------------------- */
.mi-hdr .mi-hdr-brand .et_pb_text_inner {
  display: flex; align-items: center; gap: 26px;
  white-space: nowrap; line-height: 1;
}
.mi-hdr .mi-brand { position: relative; display: inline-flex; align-items: center; }

/* THE SWEEP - clipped to the letterforms via background-clip:text, so the
   flash appears only inside the strokes of "MIAMI INK." and nowhere else. */
.mi-hdr .mi-wm {
  --mi-wm-base: #f0eee9;
  display: inline-block;
  font-family: 'Archivo Black', Impact, Haettenschweiler, sans-serif;
  font-weight: 700; font-size: clamp(28px, 2.5vw, 42px);
  letter-spacing: -.025em; line-height: 1;
  text-decoration: none;
  color: var(--mi-wm-base);            /* fallback if background-clip:text fails */
  background-repeat: no-repeat, no-repeat;
  background-size: 240% 100%, 100% 100%;
  background-position: 190% 0, 0 0;
  background-image:
    linear-gradient(100deg,
      rgba(207,32,39,0)   34%,
      rgba(207,32,39,.85) 42%,
      rgba(240,60,68,1)   47%,
      rgba(255,236,236,1) 50%,
      rgba(240,60,68,1)   53%,
      rgba(207,32,39,.85) 58%,
      rgba(207,32,39,0)   66%),
    linear-gradient(var(--mi-wm-base), var(--mi-wm-base));
  -webkit-background-clip: text; background-clip: text;
  animation: mi-wm-sweep 1.45s cubic-bezier(.42,0,.22,1) 2s 1 both;
  transition: --mi-wm-base .34s ease-in-out;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mi-hdr .mi-wm { -webkit-text-fill-color: transparent; }
}
/* hover: wordmark eases bone -> red */
.mi-hdr .mi-wm:hover { --mi-wm-base: #cf2027; }

@keyframes mi-wm-sweep {
  from { background-position: 190% 0, 0 0; }
  to   { background-position: -90% 0, 0 0; }
}

/* the full stop: red glyph, white highlight sweeping through it */
.mi-hdr .mi-wm-dot {
  --mi-dot-base: #cf2027;
  color: var(--mi-dot-base);
  background-repeat: no-repeat, no-repeat;
  background-size: 300% 100%, 100% 100%;
  background-position: 200% 0, 0 0;
  background-image:
    linear-gradient(100deg,
      rgba(255,255,255,0) 36%,
      rgba(255,255,255,.9) 45%,
      rgba(255,255,255,1) 50%,
      rgba(255,255,255,.9) 55%,
      rgba(255,255,255,0) 64%),
    linear-gradient(var(--mi-dot-base), var(--mi-dot-base));
  -webkit-background-clip: text; background-clip: text;
  animation: mi-dot-flash 1.45s cubic-bezier(.42,0,.22,1) 2.06s 1 both;
  transition: --mi-dot-base .34s ease-in-out;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mi-hdr .mi-wm-dot { -webkit-text-fill-color: transparent; }
}
/* hover: the dot eases red -> white, in step with the wordmark */
.mi-hdr .mi-wm:hover .mi-wm-dot { --mi-dot-base: #ffffff; }

@keyframes mi-dot-flash {
  from { background-position: 200% 0, 0 0; }
  to   { background-position: -120% 0, 0 0; }
}

.mi-hdr .mi-tag {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; font-size: clamp(10px, .85vw, 12px); letter-spacing: .24em;
  text-transform: uppercase; color: rgba(240,238,233,.72); line-height: 1;
}

/* ---- nav ------------------------------------------------------------ */
.mi-hdr .mi-hdr-nav,
.mi-hdr .mi-hdr-nav .et_pb_menu_inner_container,
.mi-hdr .mi-hdr-nav .et_pb_menu__wrap,
.mi-hdr .mi-hdr-nav .et_pb_menu__menu,
.mi-hdr .mi-hdr-nav nav {
  display: flex !important; align-items: center !important;
  margin: 0 !important; padding: 0 !important;
  min-height: 0 !important; line-height: 1 !important;
  height: auto !important;
}
.mi-hdr .mi-hdr-nav .et_pb_menu__logo-wrap,
.mi-hdr .mi-hdr-nav .et_pb_menu__search-button,
.mi-hdr .mi-hdr-nav .et_mobile_nav_menu { display: none !important; }
.mi-hdr .mi-hdr-nav ul.et-menu {
  display: flex !important; align-items: center !important;
  gap: 32px; margin: 0 !important; padding: 0 !important; list-style: none;
}
.mi-hdr .mi-hdr-nav ul.et-menu > li {
  margin: 0 !important; padding: 0 !important; float: none !important;
  display: flex; align-items: center; line-height: 1;
}
.mi-hdr .mi-hdr-nav ul.et-menu > li > a {
  font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .01em;
  color: rgba(240,238,233,.85); text-decoration: none;
  transition: color .34s ease-in-out; line-height: 1;
  padding: 0 !important; margin: 0 !important; display: block;
}
.mi-hdr .mi-hdr-nav ul.et-menu > li > a:hover {
  color: #cf2027; opacity: 1; text-decoration: none;
}

/* ---- LOGIN button --------------------------------------------------- */
/* Pinned so the red block keeps its own size no matter how tall the bar
   gets: never stretch, never inherit the row's height. */
.mi-hdr .mi-hdr-cta,
.mi-hdr .mi-hdr-cta .et_pb_button_module_wrapper {
  display: flex !important; align-items: center !important;
  align-self: center !important; flex: 0 0 auto !important;
  height: auto !important; align-content: center !important;
  margin: 0 !important; padding: 0 !important; line-height: 1 !important;
}
.mi-hdr .mi-hdr-cta .et_pb_button,
.mi-hdr .mi-hdr-cta a.et_pb_button {
  font-family: 'Instrument Sans', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important; font-size: 14px !important; letter-spacing: .04em;
  line-height: 1 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 15px 26px !important; display: inline-block;
  height: auto !important; align-self: center !important; flex: 0 0 auto !important;
  transition: background-color .34s ease-in-out, color .34s ease-in-out;
}
.mi-hdr .mi-hdr-cta .et_pb_button:hover {
  background-color: #f0eee9 !important; color: #0c0d10 !important;
}
.mi-hdr .mi-hdr-cta .et_pb_button:after { display: none !important; }

/* ---- responsive ----------------------------------------------------- */
@media (max-width: 1100px) {
  .mi-hdr .mi-hdr-nav ul.et-menu { gap: 22px; }
  .mi-hdr .mi-hdr-c2 { gap: 24px; }
}
@media (max-width: 980px) {
  .mi-hdr .et_pb_row { flex-wrap: wrap; padding: 38px 20px !important; }
  .mi-hdr .mi-hdr-c1 { flex: 1 1 auto; }
  .mi-hdr .mi-hdr-c2 { flex: 0 0 auto; gap: 18px; }
  .mi-hdr .mi-tag { display: none; }
}
@media (max-width: 600px) {
  .mi-hdr .mi-wm { font-size: 24px; }
  .mi-hdr .mi-hdr-cta .et_pb_button { font-size: 12px !important; padding: 11px 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-hdr *, .mi-hdr *::before, .mi-hdr *::after {
    animation: none !important; transition: none !important;
  }
}