/* ============================================================
 * glossary.css
 * ----------------------------------------------------------
 * Extracted from the legacy Laravel app on 2026-05-11 (originally at
 * legacy/frontend_v3_goodfirm/public/static/css/glossary.css).
 *
 * Styles for /technology-glossary (listing + A–Z category + detail).
 * Source of truth lives here now — edit this file directly.
 * ============================================================ */
@media (min-width:1025px) { main .container { max-width:1054px }}
main{background: var(--background); color: var(--primary);}
.listHeader,.glossaryHeader{padding:70px 0;position:relative;text-align: center;border-bottom: 1px solid var(--border-color);overflow: hidden;}
.listHeader p{color: var(--gray);font-size: 16px;font-weight:600}
h1{font-size:46px;margin-bottom:30px;line-height: normal;}
.glossaryHeader h1{margin-bottom:0 !important;}
.glossary-image-top-left {position: absolute;left: 0;top: -15px;display: flex;height: 204px;}
.glossary-image-bottom-right {position: absolute;right: 0;bottom: -10px;display: flex;height:211px;}
.glossary-image-center {position: absolute;left: 8%;bottom: 22%;}
#glossarySearch{margin: 15px 0 0px 0;border: 1px solid var(--border-color);height:55px;border-radius: var(--border-radius);display: flex;padding: 0 15px;position: relative;max-width:750px;width:100%;background: var(--white)}
#glossarySearch::before{content: "";display: block;height: 22px;position: relative;left:-6px;top:15px;margin: 0;width: 22px;background-color:var(--primary);-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 12 12"><path d="M11.87,11.25,9.09,8.46h0a5.15,5.15,0,1,0-.6.6v0l2.79,2.78a.5.5,0,0,0,.14.1.41.41,0,0,0,.16,0,.51.51,0,0,0,.17,0,.71.71,0,0,0,.14-.1.5.5,0,0,0,.1-.14.47.47,0,0,0,0-.17.55.55,0,0,0,0-.17A.45.45,0,0,0,11.87,11.25ZM5.14,9.41a4.32,4.32,0,0,1-2.38-.72A4.31,4.31,0,0,1,.94,4.29,4.32,4.32,0,0,1,2.12,2.1a4.29,4.29,0,0,1,4.66-.93A4.21,4.21,0,0,1,8.71,2.75a4.27,4.27,0,0,1,.72,2.38,4.26,4.26,0,0,1-2.65,4A4.18,4.18,0,0,1,5.14,9.41Z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 12 12"><path d="M11.87,11.25,9.09,8.46h0a5.15,5.15,0,1,0-.6.6v0l2.79,2.78a.5.5,0,0,0,.14.1.41.41,0,0,0,.16,0,.51.51,0,0,0,.17,0,.71.71,0,0,0,.14-.1.5.5,0,0,0,.1-.14.47.47,0,0,0,0-.17.55.55,0,0,0,0-.17A.45.45,0,0,0,11.87,11.25ZM5.14,9.41a4.32,4.32,0,0,1-2.38-.72A4.31,4.31,0,0,1,.94,4.29,4.32,4.32,0,0,1,2.12,2.1a4.29,4.29,0,0,1,4.66-.93A4.21,4.21,0,0,1,8.71,2.75a4.27,4.27,0,0,1,.72,2.38,4.26,4.26,0,0,1-2.65,4A4.18,4.18,0,0,1,5.14,9.41Z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.hunt {height: 53px;width: 100%;font-size: 16px;}
#searchSubmit{opacity: 0;height:0;width:0;font-size:0;color: transparent}
.glossary-search-box{justify-content: center;display: flex;}
.glossary-list-section{padding:50px 0;background: var(--white)}

.glossary-list-wrapper{display: flex;padding-top: 50px;gap: 24px;flex-wrap: wrap;}
.glossary-box{width:calc(50% - 12px);border:1px solid var(--border-color);border-radius: var(--border-radius);padding:20px 35px 25px 25px}
.glossary-name a{font-size:18px;font-weight:600}
.glossary-name a:hover{color: var(--secondary)}
.glossary-content{color: var(--gray);margin-top:10px}
.alphabet-list ul{display: flex;justify-content: center;text-transform: uppercase;gap: 5px;}
.alphabet-list ul li a{height:30px;width:30px;display: flex;align-items: center;justify-content: center;border: 1px solid var(--border-color);color: var(--secondary);border-radius: var(--border-radius)}
.alphabet-list ul li a:hover{background:#FDF6E9;border-color:var(--secondary)}
.alphabet-list ul li a.active{background: var(--secondary);color: var(--white);border-color: var(--secondary)}
.alphabet-list ul li a.disable{opacity: 0.5;pointer-events: none;color: var(--gray)}
.search-by-alpha{display:none}
.glossaryDetailWrapper{background: var(--white);padding:20px 0 40px 0}
.no-search-result-text-detail{padding:70px 0;text-align: center;background: var(--white)}
.no-search-result-text-detail h1{font-size:28px;max-width:390px;padding: 50px 0 20px 0;margin:0 auto}
.no-search-result-text-detail p{color: var(--gray)}
@media (max-width:1080px) {
    .glossary-image-center {
        left: 4%
    }
    .no-search-result-text-detail h1{font-size:24px;}
}
.glossaryDetailWrapper .container { max-width:730px }
.glossary-article h2{font-size:28px;margin:0}
.glossary-article h3{font-size:24px;margin-bottom:15px;}
.glossary-article{line-height:30px;font-size:16px}
.glossary-answer{padding:20px 0 30px 0}
.glossary-image img{width:inherit;height:auto}
.glossary-detail p{margin-bottom:30px}
.glossary-detail{padding-top:20px}
.glossary-detail ol,.glossary-detail ul{margin-top: 0;margin-bottom: 22px;}
.glossary-detail ol li,.glossary-detail ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

.glossary-detail ul li::before {
    content: "";
    display: inline-block;
    position: relative;
    background-color: var(--secondary);
    -webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="10"><path d="M.091 9.172l6.586-4.586L.091 0l2.404 4.586z"/></svg>');
    mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="10"><path d="M.091 9.172l6.586-4.586L.091 0l2.404 4.586z"/></svg>');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 7px;
    height: 10px;
    margin-left: -33px;
    padding-right: 26px;
}

@media (max-width:1024px) {
    main .container{padding:0 35px}
    .glossary-static-image{display: none}
    h1 {font-size: 28px;margin-bottom:20px}
    .listHeader,.glossaryHeader{padding:50px 0}
    .search-by-alpha{height:44px;width:100%;border: 1px solid var(--border-color);border-radius: var(--border-radius);padding: 0px 10px 0px 12px;display: flex;justify-content: space-between;align-items: center;cursor: pointer;font-size: 14px;}
    .alphabet-list{width: 100%;max-width: 700px;margin: 0 auto;position: relative;}
    .alphabet-list ul{width:100%;padding: 15px 12px;border: 1px solid var(--border-color);border-radius: var(--border-radius);box-shadow: var(--box-shadow);position: absolute;background: var(--white);display: none;z-index: 3;}
    .alphabet-list.open ul {display: flex ;gap: 15px;flex-wrap: wrap;justify-content: flex-start;}
    .alphabet-list ul a{font-size: 15px}
    .alphabet-list ul li{width:auto}
    .glossary-box{width:100%}
    #glossarySearch{height:46px;}
    .hunt{height:44px}
    #glossarySearch::before{top:10px}
    .breadcrumb ul li{width:auto}
    .glossary-answer{padding:15px 0 20px 0}
}
@media (max-width:767px) {
    main .container {padding: 0 20px;}
    h1 {font-size: 24px;margin-bottom: 5px}
    .listHeader,.glossaryHeader{padding: 30px 0}
    .glossary-list-section{padding:20px 0}
    .alphabet-list{max-width: none;}
    .search-by-alpha{height:32px}
    .search-by-alpha{font-size:12px}
    .glossary-list-wrapper{padding-top:20px;gap:20px}
    .glossary-box{padding:20px}
    .glossary-name a{font-size:16px}
    .glossary-content{margin-top:8px}
    .breadcrumb{display:none}
    .glossary-article h2{font-size:24px}
    .glossary-article h3{font-size:20px}
    .glossary-article{font-size:14px;line-height:26px}
    .glossary-detail p{margin-bottom:20px}
    .no-search-result-text-detail{padding:50px 0}
    .no-search-result-text-detail h1{font-size:20px;padding:30px 10px 10px 10px}
}

@media (max-width:480px) {
    .alphabet-list.open ul{gap: 14px;}
}