/* Mister Pink — rebuilt from the original opening-hours plugin CSS.
   Design tokens carried over verbatim: header #D20053, status colours,
   #f1f1f1 boxes with #d9d9d9 borders, uppercase + tight tracking. */

@font-face {
  font-family: 'Proxima Nova';
  src: url('/fonts/ProximaNova-Reg-webfont.woff?v=6') format('woff');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/fonts/ProximaNova-Bold-webfont.woff?v=6') format('woff');
  font-weight: 700; font-style: normal; font-display: block;
}

/* The original scales the whole design from a 30px root with these steps, and
   every size below is a rem against it. Building at 16px made the page render
   at roughly half scale on desktop. */
html { font-size: 30px; }
@media (max-width: 1024px) { html { font-size: 24px; } }
@media (max-width: 599px)  { html { font-size: 15px; } }
@media (max-width: 414px)  { html { font-size: 14.9px; } }
@media (max-width: 320px)  { html { font-size: 12.5px; } }

:root {
  --pink:         #D20053;
  --open-now:     #3fa460;
  --soon:         #f58300;
  --closed:       #cc4125;
  --open-today:   #999999;
  --box-bg:       #f1f1f1;
  --box-border:   #d9d9d9;
  --ink:          #232323;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: 'Proxima Nova', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.15;
}

#oh {
  font-synthesis: none;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.75px;
}

/* The pink header, the black hours bar and the dark slide band run the full
   width of the window, as they do on the original; only their contents are
   capped. Boxing the bands themselves left white gutters either side and made
   the page read as a narrow column floating on white. */
.wrap { max-width: 1240px; margin: 0 auto; }

.header {
  background: var(--pink);
  padding: 0.5151rem 0;
  text-align: center;
}
.header .logo_img { max-width: 70%; height: auto; vertical-align: middle; }

/* Seasonal banner — replaces the old wp-notification-bars plugin */
.banner {
  background: #000; color: #fff; text-align: center;
  padding: 0.8499rem 0.9999rem; font-weight: 700; font-size: 0.9501rem;
  border-bottom: 0.1725rem solid #fff;
}

/* Live status bar */
#quick_info {
  background: #000;
  border-top: 0.1725rem solid #fff;
  border-bottom: 0.1725rem solid #fff;
  padding: 1.6em 0.9999rem;
  color: #fff;
}
.quick_inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.9999rem; flex-wrap: wrap;
}
.status_line { display: flex; align-items: center; gap: 0.3501rem; font-weight: 700; font-size: 0.9rem; }
.status_line .clock { width: 0.9669rem; height: 0.9669rem; }
.status_range { font-weight: 400; }
.goto {
  text-transform: none;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px;
}
.goto:hover { border-bottom-color: #fff; }

/* Status colours — from the plugin's `styling` settings */
.status.open_now      { color: var(--open-now); }
.status.opening_soon,
.status.closing_soon  { color: var(--soon); }
.status.closed,
.status.for_weekend,
.status.vacation      { color: var(--closed); }
.status.open_today    { color: var(--open-today); }

/* Hero slide */
.slide { background: #333; }
.slide_img_wrp { position: relative; max-width: 800px; margin: 0 auto; line-height: 0; }
.slide_img_wrp > img { width: 100%; height: auto; display: block; }

/* Measured on the live original (800px slide): the two blocks are centred as a
   group with a 63px gap, and the type is a fixed ratio of the slide width —
   75.99px = 9.499% and 33px = 4.125%. min(<pct>vw, <pct of 750px>) reproduces the
   original's proportions at any width. px values are the fallback. */
/* Every value below is measured off the live original at its 800px slide and
   expressed as a ratio of the slide width, so the block is proportionally
   identical at any size:
     padding-top 36px = 4.500%   padding-bottom 25.5px = 3.188%
     gap 62.6px = 7.821%         DROP-IN 75.99px = 9.499%
     subtitle 33px = 4.125%      line-height 0.8, subtitle indent .08em
   The two blocks are vertically centred against each other (the original uses
   inline-block + vertical-align:middle; align-items:center is equivalent). */
.slide_overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  gap: min(7.821vw, 58.66px);
  padding: min(4.5vw, 33.75px) 0 min(3.188vw, 23.91px);
  background: rgba(0, 0, 0, .5); color: #fff; line-height: .8;
}
.left_inner { text-align: left; }
.xl_txt { font-size: min(9.499vw, 71.24px); font-weight: 700; }
.l_txt  { font-size: min(4.125vw, 30.94px); font-weight: 700;
          text-transform: none;
          padding-top: .25em; text-indent: .08em; }   /* not uppercased in the original */

/* Panels */
.panels { display: flex; gap: 0.4rem; padding: 1.5rem 0 0; flex-wrap: wrap; }
.col { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 0.9999rem; }

.box {
  background: var(--box-bg);
  border: 0.0668rem solid var(--box-border);
  padding: 1.0667rem 0.9999rem;
}

/* Matching the original's own fixed min-heights (4.233rem / 16.93rem) rather
   than a flex/grid stretch: phone and map are one-liners so their box would
   otherwise be much shorter than hours/owner, and the day list and owner
   photo need to line up as a matched pair underneath them. */
.phone, .map_box { min-height: 4.233rem; }
#hours_list, .owner { min-height: 16.93rem; }

.status_big { font-weight: 700; margin-bottom: 0.75rem; }

.days { display: flex; flex-direction: column; }
.day_wrp {
  display: flex; justify-content: space-between; gap: 0.9999rem;
  padding: 0.3667rem 0; border-bottom: 1px solid var(--box-border);
  font-size: 0.9501rem;
}
.day_wrp:last-child { border-bottom: 0; }
.day_wrp.today { font-weight: 700; color: #000; }
.day_wrp.closed .hours { color: var(--closed); }
.day_wrp.special .hours { color: var(--closed); font-weight: 700; }
.day_wrp .hours { text-align: right; }

/* Sizes measured on the original: phone 36px (1.2rem), address and Boris
   26px (.8667rem), day rows and gallery title 30px (1rem). The address was
   wrapping to two lines purely because it inherited 30px. */
.phone { font-size: 1.2rem; }
.map_box, .owner { font-size: 0.8667rem; }

.phone, .toggle_btn {
  display: flex; align-items: center; gap: 0.5001rem;
  color: inherit; text-decoration: none; font-weight: 700;
}
/* These two icons are inline <img>, so without this they render at their
   width attribute (16px) while the clock, barber and gallery icons — set as
   ::before — sit at 1.667rem. Same box for all five. */
.phone img, .toggle_btn img {
  width: 1.667rem; height: 1.667rem; flex: none;
}
.toggle_btn {
  width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
  /* NOT `font: inherit` — that shorthand resets every font sub-property,
     including the font-weight:700 set two rules up, back to inherited. That
     silently un-bolded the address text. */
  font-family: inherit; font-size: inherit; line-height: inherit;
  text-transform: inherit; letter-spacing: inherit; text-align: left;
}
/* The original's chevron is a CSS border triangle, not a glyph, and it swaps
   border geometry rather than rotating: 9px/16.5px at a 26px font = .346em
   and .635em. */
.toggle_btn::after {
  content: '';
  display: inline-block; vertical-align: middle;
  margin-left: .23em; margin-top: -.1em;
  width: 0; height: 0;
  border-style: solid;
  border-width: .346em 0 .346em .635em;
  border-color: transparent transparent transparent currentColor;
}
.toggle_btn[aria-expanded="true"]::after {
  border-width: .635em .346em 0;
  border-color: currentColor transparent transparent;
}
.the_map { margin-top: 0.8499rem; }
.the_map iframe { display: block; width: 100%; }

.owner { font-size: 0.8666rem; }
.owner_txt { display: block; font-weight: 700; margin-bottom: 0.75rem; }
.owner img { width: 100%; height: auto; display: block; }

/* Gallery */
/* margin-top matches .panels's own top padding (1.5rem), so the gap above
   the gallery box reads the same as the gap above the phone/map row. */
.gallery_wrp { padding: 0.9999rem; margin-top: 1.5rem; }
.gallery_title { display: block; font-weight: 700; margin-bottom: 0.75rem; }
.gallery { position: relative; }
.slides {
  position: relative; aspect-ratio: 3 / 2; background: #000;
  touch-action: pan-y;   /* vertical scrolling stays with the page */
}
.slides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s ease;
}
.slides img.active { opacity: 1; }

.nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45); color: #fff; border: 0;
  width: 44px; height: 44px; font-size: 28px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.nav:hover { background: rgba(0,0,0,.7); }
.prev { left: 8px; } .next { right: 8px; }

.dots { display: flex; justify-content: center; gap: 8px; margin-top: 0.75rem; }
.dots button {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0;
  background: var(--box-border); cursor: pointer;
}
.dots button[aria-current="true"] { background: var(--pink); }

/* Original's desktop gallery (`.fp_gallery_wrp .img_wrp{padding:0}`) bleeds
   the slideshow to the card edges; only the title and dots keep an inset.
   Its separate mobile markup keeps the box padded all round, so this is
   desktop-only. */
@media (min-width: 641px) {
  .gallery_wrp { padding-left: 0; padding-right: 0; }
  .gallery_wrp .gallery_title { padding-left: 3.4499rem; padding-right: 0.9999rem; }
  .dots { padding: 0 0.9999rem; }
}

.footer {
  padding: 2.0001rem 0.9999rem; text-align: center;
  font-size: 0.8001rem; line-height: 1.4;
  background: #232323; color: #ddd;
  text-transform: none;
}

@media (max-width: 640px) {
  /* Below this width .wrap's 1240px cap no longer constrains anything, so
     there is no centering margin left to keep content off the screen edge.
     The original never goes edge-to-edge even on a phone — measured at 10px
     of breathing room on a 390px viewport — because Semantic UI's grid
     columns carry their own horizontal padding regardless of screen width. */
  .wrap { padding-left: 0.667rem; padding-right: 0.667rem; }
  /* Measured directly on the original at an iPhone 13 width: day rows,
     status headings, address and Boris's text are all the SAME 14.9px
     (1rem) — the desktop's varied per-box sizes (.8667rem address/owner,
     .9501rem day rows) don't survive to mobile on the original, they get
     reset back to the base. Phone number stays the odd one out at 1.2rem,
     unchanged from desktop, which is why it should look larger than the
     rest even here. */
  #oh, .day_wrp, .map_box, .owner { font-size: 1rem; }
  .quick_inner { flex-direction: column; align-items: flex-start; }
  .nav { width: 38px; height: 38px; font-size: 22px; }
  /* The 16.93rem min-height on hours/owner exists to line up two boxes that
     sit SIDE BY SIDE on desktop. Below this width .panels wraps them into a
     single stacked column, so the tall min-height just adds empty space under
     short content. The original's own mobile CSS drops both to the same
     4.233rem as phone/map at this point — confirmed in the 2026-08-22 backup,
     not guessed. */
  #hours_list, .owner { min-height: 4.233rem; }
}

@media (prefers-reduced-motion: reduce) {
  .slides img { transition: none; }
}

/* The original marks three headings with an icon: a clock on the opening-hours
   status, the barber figure on Boris, and a picture icon on the gallery. The
   phone and pin are inline <img> in the markup; these three are decorative so
   they belong in CSS, where a screen reader skips them. */
.status_big, .owner_txt, .gallery_title { position: relative; padding-left: 2.45rem; }
.status_big::before, .owner_txt::before, .gallery_title::before {
  content: ''; position: absolute; left: 0; top: -0.35rem;
  width: 1.667rem; height: 1.667rem;
  background-size: cover; background-repeat: no-repeat;
}
.status_big::before   { background-image: url('/img/icon/clock-black.png'); }
.owner_txt::before    { background-image: url('/img/icon/barber-man.png'); }
.gallery_title::before{ background-image: url('/img/icon/image-icon.svg'); }