/* 宜蘭住宿網共用頁首：Bootsnav 導覽列補充樣式，版式比照宜蘭民宿網（house.ilantravel.com.tw）
   載入順序在 portal.css / bootsnav.css / style.css 之後 */

/* 跳至主要內容 */
.portal-skip{position:fixed;top:-90px;left:16px;z-index:1300;background:#555CB3;color:#fff!important;padding:12px 20px;font:16px/1.8 Arial,"微軟正黑體","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;text-decoration:none}
.portal-skip:focus{top:12px;outline:3px solid #9EA8DB;outline-offset:3px}

/* 導覽列本體 */
nav.navbar.bootsnav{box-shadow:0 0 10px rgba(0,0,0,.3);border-bottom:0;z-index:1100}
/* 導覽列容器寬度：與首頁（home-preserved.css）相同 */
nav.navbar.bootsnav>.container{width:min(1360px,calc(100% - 48px));margin-left:auto;margin-right:auto;padding:0}
@media(max-width:1100px){nav.navbar.bootsnav>.container{width:min(1240px,calc(100% - 64px))}}
@media(max-width:800px){nav.navbar.bootsnav>.container{width:calc(100% - 40px)}}
@media(max-width:520px){nav.navbar.bootsnav>.container{width:calc(100% - 32px)}}

/* Logo 區：站名在左、101 logo 在右（同宜蘭民宿網） */
nav.navbar.bootsnav .navbar-brand{display:inline-flex!important;align-items:center;height:auto;padding:14px 15px 12px;margin:0}
nav.navbar.bootsnav .navbar-brand img.logo{display:inline-block!important;width:125px;height:auto;vertical-align:middle;padding:0 0 0 1rem}
.logotitle{display:inline-block;position:relative;padding:0 10px;vertical-align:middle;line-height:1.2}
.logotitle:before,.logotitle:after{content:'';background:#000;width:1px;height:100%;position:absolute;top:0}
.logotitle:before{left:0}
.logotitle:after{right:0}
.logotitle p{font-size:22px;color:#303030;letter-spacing:3px;font-weight:600;margin:0;line-height:1.3;position:relative;bottom:0}
.logotitle span{font-size:13px;color:#ffa518;letter-spacing:2px;margin-top:6px;display:block;line-height:1.3}

/* 主選單項目：圖示在上、文字在下、固定 150px、左側細線分隔 */
nav.navbar.bootsnav ul.nav > li{border-left:1px solid #a2a2a2}
nav.navbar.bootsnav ul.nav > li:first-child{border-left:0}
nav.navbar.bootsnav ul.nav > li > a{font-family:Arial,"微軟正黑體","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;font-size:15px;font-weight:600;color:#6f6f6f;text-align:center;width:140px;padding:16px 12px 12px;line-height:20px;white-space:nowrap}
nav.navbar.bootsnav ul.nav > li > a .nh1{display:block;color:#777;font-size:15px;margin:0;transition:.3s ease all}
nav.navbar.bootsnav ul.nav > li > a > i.fa{display:inline-block;font-size:15px;color:#6f6f6f;margin:0}
nav.navbar.bootsnav ul.nav > li > a > i.fa-sort-down{display:block;margin:0 auto;font-size:14px;line-height:12px;color:#9a9a9a}
nav.navbar.bootsnav ul.nav > li > a > i.fa-chevron-right{display:none}
nav.navbar.bootsnav ul.nav > li > a:hover .nh1,nav.navbar.bootsnav ul.nav > li.active > a .nh1,nav.navbar.bootsnav ul.nav > li.on > a .nh1{color:#555CB3}
nav.navbar.bootsnav ul.nav > li > a:hover > i.fa{color:#555CB3}

/* 下拉選單 */
nav.navbar.bootsnav ul.nav ul.dropdown-menu{border-top:3px solid #555CB3;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:230px;padding:6px 0}
nav.navbar.bootsnav ul.nav ul.dropdown-menu > li > a{font-family:Arial,"微軟正黑體","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;font-size:14px;color:#555;padding:9px 18px;line-height:1.6;white-space:nowrap}
nav.navbar.bootsnav ul.nav ul.dropdown-menu > li > a b{color:#333;font-weight:700}
nav.navbar.bootsnav ul.nav ul.dropdown-menu > li > a:hover{color:#555CB3;background:#f3f4fa}
nav.navbar.bootsnav ul.nav ul.dropdown-menu > li.dropdown > a{font-weight:700;color:#333}
nav.navbar.bootsnav ul.nav ul.dropdown-menu > li.dropdown > a i.fa{margin-right:6px;color:#9a9a9a;font-size:12px}
nav.navbar.bootsnav ul.nav ul.dropdown-menu ul.dropdown-menu{max-height:70vh;overflow-y:auto}

/* 固定導覽列 → 內頁內容預留高度（首頁由 index.php 自行處理） */
nav.navbar.bootsnav ~ main#main-content{padding-top:104px}
main#main-content .bnbinner{padding-top:8px}

/* 窄桌機：縮小項目與 Logo，維持單列不換行 */
@media(min-width:1025px) and (max-width:1200px){
	nav.navbar.bootsnav ul.nav > li > a{width:98px;padding:14px 3px 10px;font-size:13px}
	nav.navbar.bootsnav ul.nav > li > a .nh1{font-size:13px}
	nav.navbar.bootsnav .navbar-brand img.logo{width:90px;padding-left:.25rem}
	nav.navbar.bootsnav .navbar-brand{padding:14px 8px 12px}
	.logotitle{padding:0 8px}
	.logotitle p{font-size:17px;letter-spacing:1px}
	.logotitle span{font-size:10px;letter-spacing:1px}
}
@media(min-width:1201px) and (max-width:1300px){
	nav.navbar.bootsnav ul.nav > li > a{width:108px;padding:14px 6px 10px;font-size:13.5px}
	nav.navbar.bootsnav ul.nav > li > a .nh1{font-size:13.5px}
	nav.navbar.bootsnav .navbar-brand img.logo{width:100px;padding-left:.5rem}
	.logotitle p{font-size:19px;letter-spacing:2px}
	.logotitle span{font-size:11px;letter-spacing:1.5px}
	nav.navbar.bootsnav ~ main#main-content{padding-top:96px}
}
/* 手機／平板：Bootsnav 摺疊選單（品牌列 + 全高白色面板 + 三層手風琴） */
@media(max-width:1024px){
	/* 品牌列：站名在左、漢堡鈕在右，固定 64px 高 */
	nav.navbar.bootsnav .navbar-header{display:flex;align-items:center;justify-content:space-between;float:none;min-height:64px;padding:0;text-align:left}
	nav.navbar.bootsnav .navbar-brand{order:1;float:none!important;flex:0 1 auto;min-width:0;padding:8px 0;margin:0!important}
	nav.navbar.bootsnav .navbar-brand img.logo{width:100px;padding-left:.5rem}
	.logotitle p{font-size:20px;letter-spacing:2px}
	.logotitle span{font-size:12px;letter-spacing:1.5px}

	/* 漢堡鈕：品牌色膠囊按鈕，三線 + 「選單」文字，展開時變 X + 「關閉」 */
	nav.navbar.bootsnav .navbar-toggle{order:2;display:flex!important;align-items:center;justify-content:center;gap:9px;float:none;flex:0 0 auto;height:42px;margin:0 0 0 8px;padding:0 15px 0 13px;border:0;border-radius:999px;background:linear-gradient(135deg,#6a72d8 0%,#555CB3 100%);box-shadow:0 4px 12px rgba(85,92,179,.35);color:#fff;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}
	nav.navbar.bootsnav .navbar-toggle:after{content:"選單";font:700 14px/1 Arial,"微軟正黑體","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;letter-spacing:1px;color:#fff}
	nav.navbar.bootsnav .navbar-toggle:active{transform:scale(.96)}
	nav.navbar.bootsnav .navbar-toggle[aria-expanded="true"]{background-image:linear-gradient(135deg,#474d9c 0%,#3a408a 100%);box-shadow:0 2px 6px rgba(63,69,144,.3)}
	nav.navbar.bootsnav .navbar-toggle[aria-expanded="true"]:after{content:"關閉"}
	nav.navbar.bootsnav .navbar-toggle:focus-visible{outline:3px solid #9EA8DB;outline-offset:2px}
	nav.navbar.bootsnav .navbar-toggle .mibutton{display:block;position:relative!important;top:auto!important;right:auto!important;width:20px;height:16px;padding:0;margin:0;z-index:auto;border-radius:0}
	nav.navbar.bootsnav .navbar-toggle .mibutton span{left:0;width:20px;height:2.5px;border-radius:2px;background:#fff;-webkit-filter:none;filter:none;transition:transform .25s ease,opacity .2s ease,top .25s ease}
	nav.navbar.bootsnav .navbar-toggle .mibutton span:nth-child(1){top:0}
	nav.navbar.bootsnav .navbar-toggle .mibutton span:nth-child(2){top:7px}
	nav.navbar.bootsnav .navbar-toggle .mibutton span:nth-child(3){top:14px}
	nav.navbar.bootsnav .navbar-toggle[aria-expanded="true"] .mibutton span:nth-child(1){top:7px;transform:rotate(45deg)}
	nav.navbar.bootsnav .navbar-toggle[aria-expanded="true"] .mibutton span:nth-child(2){opacity:0;transform:scaleX(.2)}
	nav.navbar.bootsnav .navbar-toggle[aria-expanded="true"] .mibutton span:nth-child(3){top:7px;transform:rotate(-45deg)}

	/* 展開面板：白底、可捲到視窗底、不再限高 350px */
	nav.navbar.bootsnav .navbar-collapse{margin:0;padding:4px 0 28px;background:#fff;border-top:1px solid #e9ebf3}
	nav.navbar.bootsnav.no-full .navbar-collapse{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
	nav.navbar.bootsnav .navbar-nav{float:none!important;margin:0!important;padding:0!important}
	nav.navbar.bootsnav .navbar-nav > li{float:none}

	/* 第一層：圖示圓角方塊 + 粗體標題 + 右側箭頭，54px 高 */
	nav.navbar.bootsnav ul.nav > li{border:0;margin:0}
	nav.navbar.bootsnav ul.nav > li > a{display:flex!important;align-items:center;gap:12px;position:relative;width:100%;min-height:50px;margin:0;padding:6px 44px 6px 4px;border:0!important;border-bottom:1px solid #eef0f5!important;border-radius:0;background:transparent;text-align:left;white-space:normal;font-size:16px;font-weight:700;line-height:1.4;color:#333;transition:background-color .15s ease}
	nav.navbar.bootsnav ul.nav > li:last-child > a{border-bottom:0!important}
	nav.navbar.bootsnav ul.nav > li > a .nh1{display:inline;margin:0;font-size:16px;color:#333}
	nav.navbar.bootsnav ul.nav > li > a > i.fa{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;margin:0;border-radius:10px;background:#f3f4fa;color:#555CB3;font-size:14px;transition:background-color .2s ease,color .2s ease}
	nav.navbar.bootsnav ul.nav > li > a > i.fa-sort-down,nav.navbar.bootsnav ul.nav > li > a > i.fa-chevron-right{display:none!important}
	nav.navbar.bootsnav ul.nav > li > a:after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid #9a9fc4;border-bottom:2px solid #9a9fc4;transform:rotate(45deg);transition:transform .2s ease,border-color .2s ease}
	nav.navbar.bootsnav ul.nav > li > a:active{background:#f3f4fa}
	nav.navbar.bootsnav ul.nav > li.on > a{background:#f6f7fc!important}
	nav.navbar.bootsnav ul.nav > li.on > a .nh1{color:#555CB3}
	nav.navbar.bootsnav ul.nav > li.on > a > i.fa{background:#555CB3;color:#fff}
	nav.navbar.bootsnav ul.nav > li.on > a:after{transform:rotate(-135deg);margin-top:-3px;border-color:#555CB3}

	/* 第二層：膠囊按鈕換行排列（展開時用 !important 蓋掉 jQuery 的 display:block） */
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu{position:static!important;float:none;display:none;flex-wrap:wrap;align-items:flex-start;width:100%;min-width:0;margin:0!important;padding:10px 2px 4px 10px!important;background:#f6f7fc;border:0;border-left:3px solid #555CB3;border-radius:0;box-shadow:none}
	nav.navbar.bootsnav ul.nav li.dropdown.on > ul.dropdown-menu{display:flex!important}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li{float:none;display:block;width:auto;max-width:100%;margin:0 6px 7px 0;padding:0}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li > a{display:inline-flex;align-items:center;position:relative;min-height:36px;margin:0;padding:6px 10px;border:1px solid #d7daee;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(31,35,90,.05);white-space:nowrap;font-size:14px;font-weight:400;line-height:1.3;color:#3d3f5c;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,border-color .15s ease}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li > a:active{background:#e9ebf8;border-color:#b9bfe6}
	/* 「全部／首選」主項：實心膠囊（不支援 :has 的舊瀏覽器退回粗體外框膠囊） */
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li > a b{color:inherit;font-weight:700}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li > a:has(> b){background:#555CB3;border-color:#555CB3;color:#fff!important;box-shadow:0 2px 6px rgba(85,92,179,.3)}
	/* 可再展開的鄉鎮膠囊：右側箭頭；展開後獨占一列，類型子膠囊接在下方 */
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li.dropdown{display:flex;flex-wrap:wrap;align-items:flex-start}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li.dropdown.on{flex:1 0 100%;margin-right:0}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li.dropdown > a{width:auto;flex:0 0 auto;font-weight:700;color:#333;padding-right:26px}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li.dropdown > a i.fa{display:none}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li.dropdown > a:after{content:"";position:absolute;right:11px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:2px solid #9a9fc4;border-bottom:2px solid #9a9fc4;transform:rotate(45deg);transition:transform .2s ease,border-color .2s ease}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li.dropdown.on > a{color:#fff!important;background:#555CB3;border-color:#555CB3}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li.dropdown.on > a:after{transform:rotate(-135deg);margin-top:-2px;border-color:#fff}

	/* 第三層：該鄉鎮的類型膠囊，虛線框一整列 */
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu ul.dropdown-menu{flex:1 0 100%;max-height:none;overflow:visible;margin:8px 8px 4px 0!important;padding:8px 2px 2px 10px!important;background:#fff;border:1px dashed #c9cde8;border-radius:14px}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu ul.dropdown-menu > li{margin:0 6px 6px 0}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu ul.dropdown-menu > li > a{min-height:32px;padding:4px 12px;font-size:13px;font-weight:400;color:#444;background:#f3f4fa;border-color:#e1e3f2;box-shadow:none}
	nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu ul.dropdown-menu > li > a:has(> b){background:#555CB3;border-color:#555CB3;color:#fff!important}
	/* 固定導覽列 → 內容預留高度（與 64px 品牌列一致） */
	nav.navbar.bootsnav ~ main#main-content{padding-top:64px}
}
@media(max-width:480px){
	nav.navbar.bootsnav .navbar-brand img.logo{width:92px;padding-left:.4rem}
	.logotitle{padding:0 8px}
	.logotitle p{font-size:18px;letter-spacing:1.5px}
	.logotitle span{font-size:11px;letter-spacing:1px}
}
@media(max-width:360px){
	nav.navbar.bootsnav .navbar-brand img.logo{width:80px}
	.logotitle p{font-size:17px;letter-spacing:1px}
	.logotitle span{font-size:10px}
}
/* 內頁正文字體與首頁同一字型堆疊 */
main#main-content,main#main-content .gd,main#main-content .bnbinner,.portal-footer{font-family:Arial,"微軟正黑體","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif}