/* =========================================================
   /map/_css/map.css
   Shared styles for all map pages.

   Per-map tweaks: override the variables below from map.php
   with $mapConfig['css_vars'] (no need to edit this file).
========================================================= */

:root {
    /* highlight on the map */
    --map-circle-stroke: 100px;           /* highlighted circle thickness */
    --map-circle-color: rgb(255, 120, 0); /* highlighted circle color (orange) */
    --map-label-color: rgb(210, 80, 0);   /* highlighted label color (deep orange) */
    --map-label-outline: 8px;             /* white outline around label */
    --map-label-scale-min: 1.7;           /* label pulse: smallest */
    --map-label-scale-max: 2;             /* label pulse: largest */

    /* list design (tags): match these to the map's colors */
    --map-list-accent: rgb(0, 106, 180);        /* road blue: tag text, reset button */
    --map-list-accent-hover: rgb(180, 0, 94);   /* dot rose: hover / selected fill */
    --map-list-bg: #f4f8fc;                     /* light blue-gray: tag background */
    --map-list-border: #d5e2ee;                 /* light blue-gray: tag border */
}

/* =========================================================
   HEADINGS (desktop)
========================================================= */

.content-main h1,
.content-main h2,
.content-main h3,
.sidebar h3 {
    margin: 0;
}

.content-main h1 {
    font-size: 32px;
}

.content-main h2 {
    font-size: 24px;
}

.content-main h3,
.sidebar h3 {
    font-size: 18px;
}

/* =========================================================
   MAP
========================================================= */

#map-container {
    width: 100%;
    margin-top: 20px;
}

#map-container svg {
    width: 100%;
    height: auto;
    display: block;
}


/* =========================================================
   MAP HIGHLIGHT

   Only the OUTER <g id="Spot-Name"> is relied on.
   Everything inside is found by its shape, so the nesting
   depth / ids of the inner elements can change freely:

     circle : a <path> whose style has stroke:rgb(180,0,94)
     label  : any <text> inside the group
     dotted : (not styled)
========================================================= */

/* Circle: thicker stroke (center position does not move) + blink */
#map-container svg .map-highlight path[style*="stroke:rgb(180,0,94)"],
#map-container svg .map-highlight path[style*="stroke: rgb(180, 0, 94)"],
#map-container svg .map-highlight g[id$="-2"] > path {
    stroke-width: var(--map-circle-stroke) !important;
    stroke: var(--map-circle-color) !important;

    filter:
        drop-shadow(0 0 5px var(--map-circle-color))
        drop-shadow(0 0 10px var(--map-circle-color))
        drop-shadow(0 0 18px var(--map-circle-color));

    animation: mapHighlight 1s ease-in-out infinite;
}


/* Label: deep orange, white outline, gentle pulse */
#map-container svg .map-highlight text {
    /* transform-origin is set per label by JavaScript (focusMap) */
    transform-box: view-box;

    fill: var(--map-label-color);

    stroke: #fff;
    stroke-width: var(--map-label-outline);
    paint-order: stroke;
    stroke-linejoin: round;

    animation: mapTextPulse 1.2s ease-in-out infinite;
}


@keyframes mapHighlight {

    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }

}


@keyframes mapTextPulse {

    0%, 100% {
        transform: scale(var(--map-label-scale-min));
    }

    50% {
        transform: scale(var(--map-label-scale-max));
    }

}


/* =========================================================
   MAP LOCATION LINKS (shared by desktop sidebar and mobile list)
   Design B: rounded tags, rose fill on hover / selected
========================================================= */

.desktop-map-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.map-location-link {
    display: inline-block;
    margin: 0;
    padding: 6px 14px;

    color: var(--map-list-accent);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;

    background: var(--map-list-bg);
    border: 1px solid var(--map-list-border);
    border-radius: 999px;

    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.map-location-link:hover,
.map-location-link.active {
    background: var(--map-list-accent-hover);
    border-color: var(--map-list-accent-hover);
    color: #fff;
}

/* "active" is added by map.js (not wired up yet) */
.map-location-link.active {
    font-weight: bold;
}


/* =========================================================
   MAP RESET BUTTON
========================================================= */

.map-reset {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 14px;
    padding: 8px 16px;
    cursor: pointer;

    color: var(--map-list-accent);
    background: #fff;
    border: 1px solid var(--map-list-accent);
    border-radius: 999px;

    font-size: 13px;
    text-align: center;
    white-space: nowrap;

    transition: background-color 0.2s, color 0.2s;
}

.map-reset:hover {
    background: var(--map-list-accent);
    color: #fff;
}


/* =========================================================
   MOBILE MAP LOCATIONS
========================================================= */

.mobile-map-locations {
    display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    /*
     * The normal desktop sidebar is hidden on mobile
     * by the site's layout. Keep it hidden here as well.
     */

    .content-main h1 {
        font-size: 26px;
    }

    .content-main h2 {
        font-size: 20px;
    }

    .content-main h3 {
        font-size: 16px;
    }
    .sidebar {
        display: none;
    }


    /*
     * Mobile Map Locations button
     */

    .mobile-map-locations {
        display: block;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 15px;
    }


    .map-locations-toggle {
        width: 100%;

        display: flex;
        justify-content: space-between;
        align-items: center;

        box-sizing: border-box;

        padding: 12px 15px;

        color: var(--map-list-accent);
        border: 1px solid var(--map-list-accent);
        border-radius: 6px;
        background: var(--map-list-bg);

        font-size: 16px;
        font-weight: bold;

        cursor: pointer;

        text-align: left;
    }


    /*
     * Mobile location list (tags wrap onto several lines)
     */

    .map-links-panel {
        display: none;

        box-sizing: border-box;

        width: 100%;

        border: 1px solid var(--map-list-accent);
        border-top: none;
        border-radius: 0 0 6px 6px;

        padding: 12px;

        background: #fff;
    }


    .map-links-panel.open {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }


    /* Slightly larger tap area on touch screens */
    .map-links-panel .map-location-link {
        padding: 8px 16px;
        font-size: 14px;
    }


    /* Reset button: first row, full width, one line */
    .map-links-panel .map-reset {
        order: -1;
        flex: 0 0 100%;
        margin: 0 0 4px;
    }

}


/*
 * Desktop only
 */

@media (min-width: 769px) {

    .desktop-map-links {
        display: flex;
    }

}


/* =========================================================
   Street Map label
   左上: ピン留め / 右下: めくれ / 少し右上がりに傾き
   ========================================================= */
.map-type {
  --curl: 16px;               /* めくれの大きさ */
  --paper: #fffbe6;           /* 紙の色 */
  --paper-back: #e6dcb4;      /* めくれた裏面の色 */

  position: relative;
  display: inline-block;
  margin: 14px 0 12px 6px;    /* ピンと傾きの分の余白 */
  padding: 8px 26px 8px 22px;

  font-size: clamp(0.9rem, 3.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: #3a3a3a;

  /* 紙 + 右下の角を斜めに切り欠く */
  background:
    linear-gradient(
      315deg,
      transparent 0,
      transparent calc(var(--curl) * 0.7071),
      var(--paper) calc(var(--curl) * 0.7071)
    );

  /* 右上がり(反時計回りに少し回転) */
  transform: rotate(-2.5deg);
  transform-origin: left top;

  /* 切り欠き部分も含めて影が付く */
  filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.28));
}

/* 左上のピン(ヘッド + 針をひとつの要素で描く) */
.map-type::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 6px;
  width: 22px;
  height: 30px;

  background:
    /* ヘッドのハイライト(小さな白い光) */
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 0.85) 0,
      rgba(255, 255, 255, 0) 2.5px
    ) 50% 0 / 14px 14px no-repeat,
    /* ヘッド本体: 枠の中心に置いた円 */
    radial-gradient(
      circle at 50% 50%,
      #e84040 0,
      #d02424 3.5px,
      #8f1111 6.2px,
      transparent 7px
    ) 50% 0 / 14px 14px no-repeat,
    /* 針 */
    linear-gradient(
      90deg,
      #8a8a8a 0%,
      #f2f2f2 45%,
      #6f6f6f 100%
    ) 50% 12px / 3px 15px no-repeat;

  transform: rotate(-12deg);
  transform-origin: 50% 90%;

  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.35));
}

/* 右下のめくれた部分(紙の裏側) */
.map-type::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--curl);
  height: var(--curl);
  background: linear-gradient(
    315deg,
    transparent 50%,
    var(--paper-back) 50%,
    var(--paper) 100%
  );
  box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.12);
}

/* スマホ */
@media (max-width: 600px) {
  .map-type {
    --curl: 13px;
    margin: 12px 0 10px 4px;
    padding: 6px 22px 6px 18px;
    letter-spacing: 0.05em;
    transform: rotate(-2deg);
  }

  .map-type::before {
    top: -8px;
    left: 4px;
    width: 18px;
    height: 26px;
    background:
      radial-gradient(
        circle at 35% 30%,
        rgba(255, 255, 255, 0.85) 0,
        rgba(255, 255, 255, 0) 2px
      ) 50% 0 / 12px 12px no-repeat,
      radial-gradient(
        circle at 50% 50%,
        #e84040 0,
        #d02424 3px,
        #8f1111 5.3px,
        transparent 6px
      ) 50% 0 / 12px 12px no-repeat,
      linear-gradient(
        90deg,
        #8a8a8a 0%,
        #f2f2f2 45%,
        #6f6f6f 100%
      ) 50% 10px / 3px 13px no-repeat;
  }
}

/* =========================================================
   Location with a detail page
   店名ピルと Details をひとつの塊に見せる
   ========================================================= */
.map-location-item {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border-radius: 999px;
  overflow: hidden;                 /* 角丸からはみ出さない */
  border: 1px solid #0b6fb5;        /* 外枠は共通 */
  background: #f3f7fc;
}

/* 左半分: 既存のピルの縁・背景を消して外枠に任せる */
.map-location-item .map-location-link {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ホバー / 選択中: 通常のタグと同じ赤い背景に */
.map-location-item .map-location-link:hover,
.map-location-item .map-location-link.active {
  background: var(--map-list-accent-hover);
  color: #fff;
}

/* 右半分: Details(仕切り線つき) */
.map-detail-link {
  display: inline-flex;
  align-items: center;
  padding: 0 12px 0 10px;
  border-left: 1px solid #0b6fb5;   /* 仕切り */
  background: #0b6fb5;
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.map-detail-link:hover,
.map-detail-link:focus {
  background: #fff;
  color: #0b6fb5;
}

/* スマホ: タップしやすく */
@media (max-width: 600px) {
  .map-detail-link {
    min-height: 40px;
    padding: 0 14px 0 12px;
  }
}

.map-intro {
  display: flex;
  flex-direction: column;
}

/* =========================================================
   Location photo (above the map)
   PC: 幅60%・中央揃え / スマホ: 幅100%
   縦の最大値なし(画像全体を表示)
   ========================================================= */
.map-photo {
  box-sizing: border-box;
  width: 60%;                 /* PC */
  margin: 0 auto 14px;        /* 中央揃え */
}

.map-photo[hidden] {
  display: none;
}

.map-photo img {
  display: block;
  width: 100%;
  height: auto;               /* 縦横比を保って全体を表示 */
  border-radius: 10px;
  border: 1px solid #d6e3f0;
  background: #f3f7fc;
}

.map-photo figcaption {
  margin-top: 4px;
  font-size: 0.9em;
  color: #555;
}

/* 写真の下: 名前 + Details ボタン(画像と同じ幅) */
.map-photo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.map-photo-bar #map-photo-caption {
  min-width: 0;
}

.map-photo-detail {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #0b6fb5;
}

.map-photo-detail[hidden] {
  display: none;
}

/* スマホ: 幅100% */
@media (max-width: 768px) {
  .map-photo {
    width: 100%;
  }
}