/**
 * 理律法律事務所 Header 元件樣式
 * 用於顯示企業 Logo、標題和標語的樣式定義
 */

/* ============================================
   Header 主容器樣式
   ============================================ */
.header-logo {
    background: linear-gradient(90deg, rgba(139, 39, 34, 0.98) 0%, rgba(179, 60, 40, 1) 80%, #6a1e28 100%), repeat-x center top;
    border-bottom: 8px solid #dbb883;
    min-height: 108px;
    min-width: 370px;
}

/* Header 容器 */
.header-logo .container {
    z-index: 10;
    min-width: 350px;
}

/* Header 行 */
.header-logo .row {
    min-width: 340px;
}

/* Logo 欄位 */
.header-logo .col-auto {
    z-index: 2;
}

/* Logo 連結 - logo半融入企業色底，帶淺色底陰影 */
.header-logo-link {
    display: inline-block;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    padding: 6px 16px;
    box-shadow: 0 2px 7px #dbb88355;
}

/* Logo 圖片 */
.header-logo-img {
    max-height: 62px;
    filter: drop-shadow(0 1px 4px #dbb88355);
    background: transparent;
    border-radius: 3px;
}

/* ============================================
   標題樣式
   ============================================ */
.header-title-responsive {
    font-family: 'Noto Serif TC', serif;
    color: #dbb883;
    letter-spacing: 2px;
    font-weight: 800;
    font-size: clamp(1.48rem, 4vw, 2.35rem);
    text-shadow: 0 2px 10px #4a1a12aa, 1px 1px 0 #fff3;
    border-bottom: 4px double #dbb883;
    border-radius: 2px;
}

/* ============================================
   副標題樣式
   ============================================ */
.header-subtitle-responsive {
    margin-top: 0.18rem;
    color: #dbb883;
    font-size: 1.1rem;
    letter-spacing: 1.4px;
    line-height: 1.45;
    text-align: left;
    padding: 0.26rem 1rem 0.17rem 1.1rem;
    border-radius: 0 0 18px 4px;
    min-width: 322px;
}

/* 副標題內層容器 */
.header-subtitle-row {
    flex-wrap: nowrap;
}

.header-subtitle-row-english {
    flex-wrap: nowrap;
    margin-top: 0.32rem;
}

/* 中文標語文字 */
.header-motto-chinese {
    font-family: 'Noto Serif SC', serif;
    white-space: nowrap;
}

/* 英文標語文字 */
.header-motto-english {
    font-size: 1.09rem;
    color: #fff8ec;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ============================================
   圓點置中樣式
   ============================================ */
.middle-dot {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    position: relative;
}

.middle-dot::before {
    content: '\2022';
    color: #dbb883;
    font-size: 1.18em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

/* 英文圓點顏色、略小、垂直中線微調（新版）*/
.middle-dot-en::before {
    color: #fff8ec;
    font-size: 1.01em;
}

/* 讓英文標語圓點與文字真正垂直置中 */
.align-middle-dot {
    position: relative;
    top: 0.06em;
}

/* 響應式文字大小微調 for header */
@media (max-width: 768px) {
    .header-title-responsive {
        font-size: clamp(1.08rem, 6vw, 1.66rem) !important;
        padding-right: 0.5rem;
    }

    .header-subtitle-responsive {
        font-size: clamp(0.92rem, 2.8vw, 1.01rem) !important;
        padding: .18rem .6rem .09rem 0.65rem !important;
        min-width: unset !important;
    }

    /* 小尺寸頁面：增加 logo 和文字之間的垂直間距 */
    .header-logo .row {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-logo .col-auto {
        margin-bottom: 1rem !important;
        padding-right: 0 !important;
    }

    .header-logo .col.pl-4 {
        padding-left: 12% !important; 
        width: 100%;
    }
}

@media (max-width: 470px) {
    .header-title-responsive {
        font-size: 1rem !important;
        padding-right: 0.25rem;
    }

    .header-subtitle-responsive {
        font-size: 0.87rem !important;
        padding: .09rem .30rem .08rem 0.4rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        min-width: unset !important;
    }

    .header-subtitle-responsive span {
        margin-bottom: 1px;
    }

    /* 超小尺寸頁面：進一步增加 logo 和文字之間的垂直間距 */
    .header-logo .col-auto {
        margin-bottom: 1.25rem !important;
    }
}