/* Mister Pink — ported from the original opening-hours plugin CSS.
 *
 * The original scales the whole design from html{font-size:30px} with
 * responsive steps, and every size is expressed in rem against that. The rem
 * values below are the originals, verified against computed styles on the live
 * site (xl_txt 75.99px, l_txt 33px, footer 24px at the 30px step).
 */

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

/* The responsive scale the entire layout depends on. */
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;
  --wrap:       800px;
}

* { box-sizing: border-box; }

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

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

/* Colour bars run full-bleed; their contents are capped, as in the original. */
.wrap { max-width: var(--wrap); margin: 0 auto; }

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

/* ---- seasonal banner (replaces wp-notification-bars) ---- */
.banner {
  background: #000; color: #fff; text-align: center; font-weight: 700;
  padding: .5rem .667rem; font-size: .8667rem;
  border-bottom: .1725rem solid #fff;
}

/* ---- live status bar ---- */
#quick_info {
  background: #000; color: #fff;
  border-top: .1725rem solid #fff;
  border-bottom: .1725rem solid #fff;
  padding: .7rem .667rem;
}
.quick_inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .667rem; flex-wrap: wrap;
}
.status_line { display: flex; align-items: center; gap: .1em; font-weight: 700; }
.status_line .clock { width: .967rem; height: .967rem; margin-right: .1em; }
.status_line .label { margin-right: .3em; }
.status_range { font-weight: 400; }

.goto {
  color: #fff; font-weight: 700; font-size: .933rem;
  text-transform: none; text-decoration: none;
  position: relative; white-space: nowrap;
}
.goto::after {
  content: ''; position: absolute; left: 0; bottom: -.15em;
  height: 1px; width: 100%; background: #aaa;
}

/* 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 { max-width: var(--wrap); margin: 0 auto; position: relative; line-height: 0; }
.slide_img_wrp > img { width: 100%; height: auto; display: block; }

.slide_overlay {
  position: absolute; left: 0; bottom: 0; width: 100%;
  background: rgba(0, 0, 0, .5); color: #fff;
  overflow: hidden; line-height: .8;
  padding: 1.2rem 0 .85rem;
  text-align: center;
}
.left_inner, .right_inner { display: inline-block; vertical-align: middle; }
.left_inner { margin-right: 1.85rem; text-align: left; }

.xl_txt { font-size: 2.533rem; font-weight: 700; }
.l_txt  { font-size: 1.1rem; font-weight: 700; }
/* "Dam- & herrklippning" is NOT uppercased in the original. */
.lc_txt { text-transform: none; }
.left_inner .l_txt { padding-top: .25em; text-indent: .08em; }

@media (max-width: 768px) { .l_txt { font-size: 1.0667rem; } }

/* ---- panels ---- */
.panels {
  display: flex; gap: .667rem; flex-wrap: wrap;
  padding: 1rem .667rem 0;
}
.col {
  flex: 1 1 calc(50% - .334rem);   /* two columns, as the original's .half.panel */
  min-width: 0; display: flex; flex-direction: column; gap: .667rem;
}
@media (max-width: 599px) { .col { flex: 1 1 100%; } }

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

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

.days { display: flex; flex-direction: column; line-height: .8; }
.day_wrp {
  display: flex; justify-content: space-between; gap: .667rem;
  padding: .38rem 0; border-bottom: 1px solid var(--box-border);
}
.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; }

.phone { font-size: 1.2rem; }
.phone, .toggle_btn {
  display: flex; align-items: center; gap: .4em;
  color: inherit; text-decoration: none; font-weight: 700;
}
.toggle_btn {
  width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left;
}
.phone img, .toggle_btn img { width: 1.1em; height: 1.1em; flex: none; }

.the_map { margin-top: .6rem; }
.the_map iframe { display: block; width: 100%; border: 0; }

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

/* ---- gallery ---- */
.gallery_wrp { padding: .667rem; }
.gallery_title { display: block; font-weight: 700; margin-bottom: .6rem; font-size: .8667rem; }
.gallery { position: relative; }

.slides {
  position: relative; aspect-ratio: 3 / 2; background: #000;
  overflow: hidden;
  touch-action: pan-y;                 /* let the swipe handler own horizontal drags */
}
.slides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s ease;
  user-select: none; -webkit-user-drag: none;
}
.slides img.active { opacity: 1; }

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

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

/* Touch devices: the arrows are redundant once swiping works. */
@media (hover: none) and (pointer: coarse) {
  .nav { display: none; }
}

/* ---- footer ---- */
.footer {
  background: #232323; color: #ddd;
  padding: 2rem .5rem; text-align: center;
  font-size: .8rem; text-transform: none; line-height: 1.4;
}

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