/* -*- coding: utf-8 -*-

     Copyright (C) 2026 Ken'ichi Fukamachi
     All rights reserved. This program is free software; you can
     redistribute it and/or modify it under 2-Clause BSD License.
     https://opensource.org/licenses/BSD-2-Clause

     mailto: fukachan@fml.org
        web: https://www.fml.org/

  $FML: style.css,v 1.14 2026/08/02 08:07:47 fukachan Exp $
  $Revision: 1.14 $
         NAME: docs/style.css
  DESCRIPTION: stylesheet
  CODINGSTYLE: standard
*/

body {
	margin:  0;
	padding: 0;
}
#map {
	height: 100vh;
	width:   100%;
}


/*
   ************************************************************
   MAP
   ************************************************************
*/

.search-container {
    position: absolute;
    top: 60px;
    left: 50px;
    z-index: 1000;
    background: white;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.search-input {
    width: 200px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.map-title-container {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    font-size: 16px;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/*
    prevent popup from becoming too wide
    横幅が広がりすぎないようにロック
*/
.map-popup {
    font-family: sans-serif;
    line-height: 1.5;
    max-width: 280px;
}

/* title for each spot / スポット名のタイトル */
.map-popup h3 {
    margin: 4px 0 8px 0;
    font-size: 16px;
    color: #333;
}

.category-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 6px;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    font-weight: bold;
}



/*
   ************************************************************
   POP-UP
   ************************************************************
*/

/* delimiter / 区切り線 */
.popup-divider {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 8px 0;
}

/*
   Tag list in the pop-up
   ポップアップ内のタグリスト
*/
.popup-tags-container {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
}

.popup-tag {
    display: inline-block;
    background: #eee;
    padding: 2px 6px;
    margin: 0 4px 4px 0;
    border-radius: 3px;
    font-size: 11px;
    color: #333;
}

/*
   Description timeline in the pop-up
   ポップアップ内の説明文タイムライン
*/
.popup-desc-container {
    max-height: 150px;
    overflow-y: auto;
    padding-right: 5px;
}

.popup-desc-item {
    margin: 0 0 8px 0;
    font-size: 13px;
    line-height: 1.4;
}

/*
   link to the Google maps
   Googleマップへの外部リンク
*/
.popup-map-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: #007bff;
    text-decoration: none;
}
.popup-map-link:hover {
    text-decoration: underline;
}

/*
    frame to wrap photo(s) to avoid layout shift for data loading delay
    写真を包む枠（Googleドライブ画像の読み込み遅延によるサイズ崩れを防ぐ）
*/
.popup-photo-wrapper {
    width: 100%;
    margin: 8px 0;
    /* grey before loaded / 画像が読み込まれるまでのグレーのプレースホルダー */
    background-color: #eee;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    /*
       fix the aspect ratio as 16:9 to avoid popup layout shift
       アスペクト比を16:9に固定（これがあると画像読み込み時にポップアップがガタつかない）
    */
    aspect-ratio: 16 / 9;
}

/*
   style for photo itself
   写真本体のスタイル
*/
.popup-photo-wrapper img {
    width: 100%;
    height: 100%;
    /*
       trimmed to fit the frame
       枠に合わせて綺麗にトリミング（はみ出し・歪み防止）
    */
    object-fit: cover;
    display: block;
}

/*
   .popup-more-photos-XXX
    for plural photo(s)
    複数写真ギャラリー用
*/
.popup-more-photos-container {
    margin: 8px 0;
    text-align: center;
}

.popup-more-photos-link {
    font-size: 12px;
    color: #007bff;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    list-style: none; /* remove Triangle / 三角矢印を消す */
}

/*
   remove Triangle in the case of Safari
   Safari用の三角矢印消し
*/
.popup-more-photos-link::-webkit-details-marker {
    display: none;
}

.popup-more-photos-link:hover {
    text-decoration: underline;
}

/*
   icon when closed (prompts a click)
   閉じている時のアイコン（クリックを促す）
*/
.popup-more-photos-link::before {
    content: "▼ ";
}

/*
    style and icon switching when opened
    開いている（open状態の）時のスタイルとアイコン切り替え
*/
.popup-more-photos-container[open] .popup-more-photos-link {
    margin-bottom: 8px;
    color: #666; /* 開いた後は少し落ち着いた色に */
}

/*
    When opened, point the icon upwards to convey a toggle effect.
    開いている時はアイコンを「上向き」にしてトグル感を出す
*/
.popup-more-photos-container[open] .popup-more-photos-link::before {
    content: "▲ ";
}

.popup-about-container {
    padding: 10px;
    max-width: 250px;
    font-size: 13px;
    line-height: 1.5;
}


/* 
   ************************************************************
   CUSTOM EMOJI MARKER STYLE
   ************************************************************
*/
/* Leaflet標準のアイコン枠や背景を完全に消し去るガード */
.map-icon-emoji-custom-pin {
    background: none !important;
    border:     none !important;
}

/* 絵文字自体の大きさと、少しの立体影をつけて地図上で見やすくする */
.map-icon-emoji-marker {
    font-family:  "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size:               24px;
    position:            relative;
    background:             white;
    border:        2px solid #333;
    border-radius:            50%;
    width:                   28px;
    height:                  28px;
    display:                 flex;
    align-items:           center;
    justify-content:       center;
}

.map-icon-emoji-marker::after {
    content:                 "";
    position:          absolute;
    bottom:                -8px;
    left:                   50%;
    transform: translateX(-50%);
    border-width:     8px 6px 0;
    border-style:         solid;
    border-color: #333 transparent transparent;
}


/*
   ************************************************************
   responsive design for mobile devices e.g. smartphones.
   スマホ用レスポンシブ対応
   ************************************************************
*/
@media (max-width: 600px) {
    .search-input { width: 150px; }
    .search-container { top: 70px; left: 10px; }
    .map-title-container {
        font-size: 13px;
        padding: 6px 12px;
        width: 80%;
        text-align: center;
        white-space: normal;
    }
    .search-input {
        padding: 12px 6px;          /* 上下の余白を増やして縦幅を確保 */
        font-size: 16px;            /* スマホでの自動ズームインを防ぐため16px以上推奨 */
    }
    #btn-toggle-all-categories {    /* app.jsで生成しているボタンの上書き */
        padding: 12px !important;
        font-size: 14px !important;
    }
}