/* =========================================================
   thefun.com.tw － RWD 響應式補丁
   主題：Clean Radius Real Estate Blue（crreb，Twenty Ten 基底）
   放置位置：wp-content/themes/crreb/responsive.css
   載入順序：由 functions.php 在 style.css 與所有外掛 CSS 之後載入

   斷點：
     桌機  > 1024px    → 完全維持原樣（本檔不影響）
     平板  768–1024px  → 寬度改為流動，保留「左 Sidebar＋右內容」雙欄
     手機  ≤ 767px     → 單欄、漢堡選單、Sidebar 移到內容下方

   移除方式：刪掉 functions.php 裡的 RWD 區塊即可完全還原
   ========================================================= */


/* ---------------------------------------------------------
   0. 共用：手機用的按鈕在桌機一律隱藏
   --------------------------------------------------------- */
.rwd-menu-toggle,
.rwd-sub-toggle {
    display: none;
}


/* =========================================================
   平板 + 手機（≤ 1024px）
   ========================================================= */
@media screen and (max-width: 1024px) {

    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }

    /* 寬度計算包含 padding / border，避免流動寬度被撐破 */
    #wrapper,
    #wrapper *,
    #wrapper *::before,
    #wrapper *::after {
        box-sizing: border-box;
    }

    /* ---------- 1. 外框：固定 960px → 流動寬度 ---------- */
    #wrapper {
        width: auto;
        max-width: 100%;
        padding: 10px 10px 1px;
    }
    #branding,
    #main,
    #colophon,
    #nendebcopy,
    #access .menu-header,
    div.menu {
        width: auto;
        max-width: 100%;
    }
    #main {
        margin: 0;
        padding: 0 0 10px;
    }
    .one-column #content,
    .single-attachment #content {
        width: auto;
    }
    #boxw {
        width: auto;
        float: none;
    }

    /* ---------- 2. 雙欄：內容 700px → 扣掉 Sidebar 後的剩餘寬度 ---------- */
    /* 原本 #container 靠右浮動、#primary 固定 222px 在左，這裡只改寬度不改排法 */
    #container {
        width: calc(100% - 240px);
    }
    #primary,
    #secondary {
        width: 222px;
    }
    #main #primary .widget-container,
    #main #secondary .widget-container {
        width: auto;
    }

    /* ---------- 3. 圖片 / iframe 不超出容器 ---------- */
    #content img,
    #primary img,
    #footer img {
        max-width: 100%;
        height: auto;
    }
    #content iframe,
    #content embed,
    #content object,
    #content video {
        max-width: 100%;
    }
    .wp-caption {
        max-width: 100% !important;
    }

    /* ---------- 4. Header：縮小電話字級避免和 Logo 重疊 ---------- */
    #head img#logo {
        max-width: 45%;
        height: auto;
    }
    #head #info {
        right: 15px;
    }
    #head #info span {
        font-size: 15px;
    }
    #head #info strong {
        font-size: 22px;
    }

    /* ---------- 5. 主選單（平板維持橫向，只縮小間距） ---------- */
    #access {
        width: 100%;
    }
    #access_left {
        width: auto;
        height: auto;
        min-height: 52px;
    }
    #access_right {
        height: auto;
        min-height: 52px;
    }
    #access a {
        padding: 6px 10px;
    }

    /* ---------- 6. 首頁輪播（Nivo Slider，原本寫死 700×310） ---------- */
    .slider-wrapper {
        width: 100%;
    }
    .nivoSlider.headerSlider {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 700 / 310;
        background-size: 100% auto !important;
    }
    /* 切換動畫的切片寬度由 responsive.js 寫入 --rwd-slider-w */
    .nivoSlider.headerSlider .nivo-slice,
    .nivoSlider.headerSlider .nivo-box {
        background-size: var(--rwd-slider-w, 100%) auto !important;
    }

    /* ---------- 7. 首頁：原本整塊內容包在 <table> 裡，改成一般區塊 ---------- */
    #top_fbox #container #content table,
    #top_fbox #container #content table > tbody,
    #top_fbox #container #content table > tbody > tr,
    #top_fbox #container #content table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    /* 物件卡片：固定 130×240 → 彈性格線，平板 3 欄 */
    #top_fbox #content .grid-content {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 0 10px;
        padding: 0;
    }
    #top_fbox #content .grid-content::after {
        display: none; /* 原本的清除浮動在 flex 裡會變成一個空格子 */
    }
    #top_fbox #content .grid-content li {
        float: none;
        width: calc((100% - 20px) / 3);
        height: auto !important; /* 蓋掉 inline 的 height:280px 與 flatHeights 算出的高度 */
        margin: 0;
        padding: 12px;
    }
    #top_fbox #content .grid-content li img.box1image {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    /* 首頁三張區域 Banner */
    #topBanner ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    #topBanner li {
        float: none;
        margin: 0;
        width: calc((100% - 20px) / 3);
    }
    #topBanner img {
        width: 100%;
        height: auto;
    }

    /* 最新消息 */
    ul.toukou_top_post_excerpt {
        height: auto;
    }
    #content ul#toukou_top li ul li {
        height: auto;
    }

    /* ---------- 8. 物件列表頁（#list_simplepage） ---------- */
    #main #content .list_picsam {
        width: 34%;
    }
    #list_simplepage .list_details_button {
        width: 100%;
    }

    /* ---------- 9. 物件詳細頁（#list_simplepage2） ---------- */
    .list_detail_bottom_info {
        width: auto;
        float: none;
    }
    /* 物件照片：平板 3 張一排 */
    #list_simplepage2 .list_detail a[rel^="lightbox"] {
        float: left;
        width: 33.333%;
        padding: 3px;
    }
    #list_simplepage2 .list_detail a[rel^="lightbox"] img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* 聯絡表單 */
    #content #company table th {
        width: 28%;
        padding: 10px;
    }
    #content #company table td {
        padding: 10px;
    }
    #company input[type="text"],
    #company input[type="email"],
    #company input[type="tel"],
    #company textarea {
        width: 100%;
    }
    input.wpcf7-submit {
        display: block;
        width: 60%;
        max-width: 300px;
        margin: 10px auto;
    }

    /* ---------- 10. 自訂頁面表格 ---------- */
    #custom .content-table {
        padding: 10px;
    }
}


/* =========================================================
   手機（≤ 767px）
   ========================================================= */
@media screen and (max-width: 767px) {

    /* ---------- 1. 外框 ---------- */
    #wrapper {
        padding: 0 0 1px;
    }
    #header {
        margin: 0;
    }
    #main {
        padding: 0 10px 10px;
    }

    /* ---------- 2. 單欄：Sidebar 移到內容下方 ---------- */
    #container,
    #top_fbox #container {
        float: none;
        width: auto;
        margin: 0;
    }
    #primary,
    #secondary {
        float: none;
        width: auto;
        margin-top: 20px;
    }
    #main #primary .widget-container,
    #main #secondary .widget-container {
        margin: 0 0 12px;
    }
    /* 圖片型 widget 置中 */
    #primary .widget_text .textwidget > a {
        display: block;
        text-align: center;
    }
    /* 物件區域：子區域改兩欄，縮短長度 */
    #primary .widget_fudo_b_c ul.children {
        display: flex;
        flex-wrap: wrap;
    }
    #primary .widget_fudo_b_c ul.children > li {
        width: 50%;
        margin: 0 0 6px;
    }

    /* ---------- 3. 字級：手機上 12px 太小 ---------- */
    #content,
    #content p,
    .entry-content {
        font-size: 14px;
        line-height: 1.7;
    }
    /* 輸入框 16px 以上，iPhone 點擊時才不會自動放大畫面 */
    #content input,
    #content select,
    #content textarea,
    #primary input,
    #primary select {
        font-size: 16px;
    }
    #content pre {
        white-space: pre-wrap;
    }

    /* ---------- 4. Header：取消絕對定位，改成置中堆疊 ---------- */
    #head {
        height: auto;
        padding: 12px 10px 8px;
        text-align: center;
    }
    #head img#logo,
    #head #info,
    #head #h_list {
        position: static;
    }
    #head img#logo {
        display: block;
        margin: 0 auto 8px;
        max-width: 80%;
    }
    #head #info {
        font-size: 12px;
        line-height: 1.6;
        text-align: center;
    }
    #head #info span {
        font-size: 13px;
    }
    #head #info strong {
        font-size: 20px;
    }
    #head #info a.rwd-tel {
        color: inherit;
        text-decoration: none;
    }
    #head #h_list {
        margin: 6px 0 0;
        padding: 0;
    }
    #head #h_list li {
        font-size: 12px;
    }

    /* ---------- 5. 漢堡選單 ---------- */
    #access {
        float: none;
        width: 100%;
        margin-bottom: 10px;
        background: none;
    }
    #access_left,
    #access_right {
        width: auto;
        height: auto;
        min-height: 0;
        margin: 0;
        background: none;
    }

    .rwd-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 12px 15px;
        border: 0;
        border-radius: 0;
        background: #0085B0;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .rwd-menu-icon,
    .rwd-menu-icon::before,
    .rwd-menu-icon::after {
        display: block;
        width: 20px;
        height: 2px;
        background: #fff;
        border-radius: 1px;
        transition: transform .2s, background-color .2s;
    }
    .rwd-menu-icon {
        position: relative;
    }
    .rwd-menu-icon::before,
    .rwd-menu-icon::after {
        content: "";
        position: absolute;
        left: 0;
    }
    .rwd-menu-icon::before { top: -6px; }
    .rwd-menu-icon::after  { top: 6px; }
    /* 展開時變成 X */
    #access.is-open .rwd-menu-icon { background: transparent; }
    #access.is-open .rwd-menu-icon::before { top: 0; transform: rotate(45deg); }
    #access.is-open .rwd-menu-icon::after  { top: 0; transform: rotate(-45deg); }

    #access .menu-header {
        display: none;
        width: auto;
        font-size: 15px;
        background: #fff;
        border: 1px solid #e3e3e3;
        border-top: 0;
    }
    #access.is-open .menu-header {
        display: block;
    }
    #access .menu-header li {
        float: none;
    }
    #access a {
        text-align: left;
        border-right: 0;
        border-bottom: 1px solid #eee;
        padding: 13px 15px;
        line-height: 22px;
        color: #333;
    }
    /* 取消桌機的 hover 背景圖 */
    #access li:hover > a,
    #access ul ul :hover > a {
        background: none;
        color: #0085B0;
        font-weight: normal;
    }
    /* 目前頁面：原本是白字配背景圖，手機改成藍字淺底 */
    #access ul li.current_page_item > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a {
        color: #0085B0;
        font-weight: bold;
    }
    #access_right li.current_page_item,
    #access_right li.current-menu-item,
    #access_right li.current-menu-parent {
        background: #eaf4f8;
    }

    /* 子選單：hover 下拉 → 點擊展開 */
    #access ul ul {
        position: static;
        display: none;
        float: none;
        width: auto;
        box-shadow: none;
        background: #f5f9fb;
    }
    #access ul li:hover > ul {
        display: none;
    }
    #access ul li.is-sub-open > ul {
        display: block;
    }
    #access ul ul li {
        min-width: 0;
    }
    #access ul ul a {
        background: none;
        color: #555;
        padding: 12px 15px 12px 30px;
        line-height: 22px;
    }

    /* 子選單展開按鈕（＋ / －） */
    #access li.menu-item-has-children {
        position: relative;
    }
    #access li.menu-item-has-children > a {
        padding-right: 56px;
    }
    .rwd-sub-toggle {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        border-left: 1px solid #eee;
        background: transparent;
        cursor: pointer;
    }
    .rwd-sub-toggle::before,
    .rwd-sub-toggle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 2px;
        margin: -1px 0 0 -7px;
        background: #0085B0;
        transition: transform .2s;
    }
    .rwd-sub-toggle::after {
        transform: rotate(90deg);
    }
    #access li.is-sub-open > .rwd-sub-toggle::after {
        transform: rotate(0deg);
    }

    /* ---------- 6. 首頁：卡片 2 欄、Banner 1 欄 ---------- */
    #top_fbox #content .grid-content li {
        width: calc((100% - 10px) / 2);
        padding: 10px;
    }
    #topBanner li {
        width: 100%;
    }

    /* ---------- 7. 物件列表頁：照片和資訊上下排 ---------- */
    #main #content .list_picsam,
    #list_simplepage .list_detail {
        float: none;
        width: auto;
    }
    #main #content .list_picsam {
        margin-bottom: 8px;
    }

    /* ---------- 8. 物件詳細頁 ---------- */
    /* Google 地圖 / 街景：600×450 → 滿寬 4:3 */
    #content .entry-content iframe[src*="google.com/maps"] {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    /* 4 欄規格表 → 每列「標題 35% ＋ 內容 65%」 */
    #main #content #list_simplepage2 .list_simple_box .list_detail #list_other,
    #main #content #list_simplepage2 .list_simple_box .list_detail #list_other > tbody {
        display: block;
        width: 100%;
    }
    #main #content #list_simplepage2 .list_simple_box .list_detail #list_other tr {
        display: flex;
        flex-wrap: wrap;
    }
    #main #content #list_simplepage2 .list_simple_box .list_detail #list_other th,
    #main #content #list_simplepage2 .list_simple_box .list_detail #list_other td {
        display: block;
        line-height: 1.5;
    }
    #main #content #list_simplepage2 .list_simple_box .list_detail #list_other th {
        width: 35%;
    }
    #main #content #list_simplepage2 .list_simple_box .list_detail #list_other td {
        width: 65%;
        overflow-wrap: anywhere;
    }
    /* 空白欄位（例如「戶數」那列右半邊）直接隱藏 */
    #main #content #list_simplepage2 .list_simple_box .list_detail #list_other th:empty,
    #main #content #list_simplepage2 .list_simple_box .list_detail #list_other td:empty {
        display: none;
    }

    /* 物件照片：2 張一排 */
    #list_simplepage2 .list_detail a[rel^="lightbox"] {
        width: 50%;
    }

    /* 聯絡資訊：inline 18pt 在手機太大 */
    #toiawasesaki address span {
        font-size: 16px !important;
    }
    #toiawasesaki address {
        overflow-wrap: anywhere;
    }

    /* 聯絡表單：標題和輸入框上下排 */
    #content #company table,
    #content #company table > tbody,
    #content #company table tr,
    #content #company table th,
    #content #company table td {
        display: block;
        width: 100%;
    }
    #content #company table th {
        text-align: left;
        border-right: 0;
        padding: 10px 10px 6px;
    }
    #content #company table td {
        border-top: 0;
        border-right: 0;
        padding: 0 10px 12px;
    }
    input.wpcf7-submit {
        width: 100%;
        max-width: none;
        height: 44px;
    }

    /* ---------- 9. 物件搜尋頁 ---------- */
    table.form_jsearch,
    table.form_jsearch > tbody,
    table.form_jsearch tr,
    table.form_jsearch th,
    table.form_jsearch td {
        display: block;
        width: auto;
    }
    table.form_jsearch td {
        border-left: 0;
    }
    #container .jsearch .submit input {
        width: 100%;
    }

    /* ---------- 10. 一般文章 / 頁面 ---------- */
    /* 寬表格可左右滑動，不撐破畫面 */
    #content .entry-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #content tr th,
    #content thead th {
        padding: 8px 10px;
    }
    #content .alignleft,
    #content .alignright,
    #content img.alignleft,
    #content img.alignright {
        float: none;
        display: block;
        margin: 0 auto 12px;
    }

    /* ---------- 11. Footer ---------- */
    #footer #site-info,
    #footer #site-generator {
        float: none;
        width: auto;
        text-align: center;
        padding: 10px 10px 0;
    }
    #footer #site-info a {
        font-size: 14px;
    }
    #nendebcopy {
        text-align: center;
    }

    /* ---------- 12. 會員註冊 / 忘記密碼彈窗（Thickbox，原本固定 400px） ---------- */
    #TB_window {
        left: 50% !important;
        top: 10px !important;
        width: 94vw !important;
        margin-left: -47vw !important;
        margin-top: 0 !important;
    }
    #TB_window #TB_iframeContent {
        width: 100% !important;
        height: calc(100vh - 60px) !important;
    }
}