@charset "utf-8";
/* 說明類頁面的樣式：使用說明 howto.php 與 訂閱菜單 subscribe.php 共用。
 * （class 前綴沿用 howto_，兩頁的版面結構本來就一樣，不為了改名而多開一支檔。）
 *
 * 為什麼是一支新檔而不是寫進 style.css：#19 的規矩是既有六支樣式表只加不改
 * （test_mobile_layout.sh E 段拿 342ebb8 逐字比對守著）。這支走 incHead 既有的
 * $pageCss 機制載入，位置在 font-awesome 之後、mobile.css 之前，所以手機斷點
 * 仍然是最後一支、覆寫順序沒有被推掉。要回滾就是刪掉 howto.php 那一行。
 *
 * 寫法是手機優先：基底規則本來就在窄螢幕成立，桌機才用 min-width 加寬。
 * 這頁的讀者九成是早上八點在通勤路上、單手拿手機的熟客。
 */

.howto_lead {
	margin: 0 0 22px;
	padding: 14px 16px;
	background-color: #F3F7E8;
	border: 1px solid #98CF36;
	border-radius: 6px;
	font-family: "微軟正黑體", Arial;
	font-size: 16px;
	line-height: 1.8;
	color: #3F5A0C;
}
.howto_lead strong { font-size: 17px; }

.howto_step {
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 1px solid #DBDBDB;
	font-family: "微軟正黑體", Arial;
}
.howto_step:last-child { border-bottom: 0; }

.howto_step > h3 {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.5;
	color: #648E19;
	font-weight: bold;
}
/* 步驟編號：圓底白字，掃過去就知道現在第幾步 */
.howto_step > h3 .howto_num {
	display: inline-block;
	width: 28px;
	height: 28px;
	margin-right: 8px;
	background-color: #98CF36;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 15px;
	line-height: 28px;
	text-align: center;
	vertical-align: middle;
}

.howto_step p,
.howto_step li {
	font-size: 15px;
	line-height: 1.9;
	color: #333333;
}
.howto_step p { margin: 0 0 8px; }

.howto_step ol,
.howto_step ul {
	margin: 0 0 8px;
	padding-left: 22px;
}
.howto_step ol { list-style-type: decimal; }
.howto_step ul { list-style-type: disc; }
.howto_step li { margin-bottom: 4px; }

/* 重點：這一句沒讀到就會做錯的事 */
.howto_tip {
	margin: 10px 0;
	padding: 10px 12px;
	background-color: #FFF8E1;
	border-left: 4px solid #F5A623;
	font-size: 15px;
	line-height: 1.8;
	color: #6B4E00;
}
/* 送出後不可逆、會影響取餐的事 */
.howto_warn {
	margin: 10px 0;
	padding: 10px 12px;
	background-color: #FDECEC;
	border-left: 4px solid #D0021B;
	font-size: 15px;
	line-height: 1.8;
	color: #A3021B;
}
.howto_tip b, .howto_warn b { font-weight: bold; }

/* 頁尾的兩顆按鈕：沿用全站 .button_style2，這裡只排位置 */
.howto_actions {
	margin-top: 6px;
	text-align: center;
}
.howto_actions .button_style2 { margin: 5px; }

@media (min-width: 768px) {
	.howto_step > h3 { font-size: 20px; }
	.howto_step p, .howto_step li { font-size: 16px; }
}

/* 行內連結的點擊區。
 * #19 訂的標準是觸控目標不小於 44×44，但那是給按鈕與選單項的——夾在句子裡的
 * 連結要做到 44px，點擊區就會蓋到上下兩行，變成點哪一個都不確定，反而更糟。
 * 行高 1.9 加上這裡的上下內距，實測是 45px（負的上下 margin 讓行距不跟著長），
 * 剛好站上 44px 的線，而且點擊區不會蓋到相鄰的行。
 */
.howto_step a,
.howto_lead a {
	display: inline-block;
	padding: 8px 3px;
	margin: -8px 0;
	color: #648E19;
	text-decoration: underline;
	/* 訂閱頁的兩個群組信箱是不含空白的長字串（misshomegmail01+unsubscribe@…），
	   375px 下實測 381px、把整頁撐出 21px 橫向捲。連結允許在任意處斷行。 */
	overflow-wrap: anywhere;
}