@import 'bootstrap.min.css';
@import '_variables.css';
@import '_custom_bootstrap.css';
@import 'style_ec.css';
@import './admin/style_admin.css';
@import 'style_custom.css';
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css');

/** RWD */
@media print, screen and (min-width: 768px) {
}
@media print, screen and (min-width: 768px) and (max-width: 1439px) {
}
@media screen and (max-width: 767px) {
}

/* ----------------- Global Adjustments ----------------- */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', sans-serif !important;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5rem;
    color: var(--ce-colors-fg-primary);
    text-align: var(--bs-body-text-align);
    background-color: var(--ce-colors-fg-white);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html,
button {
    touch-action: manipulation;
}

section {
    position: relative;
}

picture {
    overflow: hidden;
}

img {
    border-style: none;
    vertical-align: top;
    line-height: 0;
    max-width: 100%;
}

a img {
    -moz-transition: all 0.16s ease-in;
    -ms-transition: all 0.16s ease-in;
    -o-transition: all 0.16s ease-in;
    -webkit-transition: all 0.16s ease-in;
    transition: all 0.16s ease-in;
}

p {
    margin-bottom: 1.5rem;
    line-height: 1.5rem;
}

hr {
    border-color: var(--ce-colors-border);
    opacity: var(--ce-opacity-md);
}

@media screen and (max-width: 767px) {
    body {
        line-height: var(--ce-line-height-md);
    }
}

@media (min-width: 768px) and (max-width: 1439px) {
    body {
        line-height: var(--ce-line-height-md);
    }
}

@media (min-width: 1440px) {
    body {
        line-height: var(--ce-line-height-lg);
    }
}

.h1,
h1 {
    font-size: var(--ce-h1-font-size);
}
.h2,
h2 {
    font-size: var(--ce-h2-font-size);
}
.h3,
h3 {
    font-size: var(--ce-h3-font-size);
}
.h4,
h4 {
    font-size: var(--ce-h4-font-size);
}
.h5,
h5 {
    font-size: var(--ce-h5-font-size);
}
.h6,
h6 {
    font-size: var(--ce-h6-font-size);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--ce-font-weight-xl) !important;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-bottom: 0;
    font-weight: var(--ce-font-weight-xl) !important;
}

.btn:focus,
.btn.focus,
.navbar-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
}

ol ul {
    list-style-type: disc;
}

*:focus-visible {
    outline: none;
}

/* material symbols */

.ico {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, /* Use 1 for filled, 0 for outline */ 'wght' 300, /* Weight of the icon */ 'GRAD' 0,
        /* Grade of the icon */ 'opsz' 48; /* Optical size */
    font-weight: var(--ce-font-weight-sm);
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;

    &.ico-fill {
        font-variation-settings: 'FILL' 1; /* Use 1 for filled, 0 for outline */
    }

    &.ico-sm {
        font-size: var(--ce-text-sm);
    }
    &.ico-lg {
        font-size: var(--ce-display-2xl);
    }
}

/* ------------------------ main ------------------------ */

.m__wrap {
    margin-left: auto;
    margin-right: auto;

    & main {
        min-height: calc(100vh - 60px);
    }
}
.m__contents {
    padding: 0 !important;
    display: inline-flex;
    flex-grow: 1;
    overflow: hidden;
    z-index: 103;
}

@media print, screen and (min-width: 768px) {
    .m__wrapper {
        width: 98.333vw;
    }
    .m__contents {
        padding-top: 80px;
    }
}

@media print, screen and (min-width: 768px) and (max-width: 1439px) {
    .m__contents {
        padding-top: 5.55556vw;
    }
}

@media screen and (max-width: 767px) {
    .m__wrapper {
        width: 96.333vw;
    }
    .m__contents {
        padding-top: 10.66667vw;
    }
}

/* ----------------------- header ----------------------- */
header {
    padding-right: 0;
    padding-left: 0;
}

/* ----------------------- footer ----------------------- */
.c__footer {
    position: relative;
}