/******************************************************************************
    QuickTip Widget  (standalone section)
    Dieterle Programmierung — https://www.dieterle-programmierung.de

    Version : 0.1.0

    Extends article.css for the standalone /quicktips/ section:
        - standalone page frame (body background)
        - second meta row (Category + QuickTip No.)
        - "Copy. Paste. Done." footer box
        - overview / index grid + category filter

    Load AFTER article.css.
******************************************************************************/


/******************************************************************************
    Standalone Page Frame
******************************************************************************/

body.QuickTipPage {

    margin                 : 0;
    background             : #3c3f43;
    -webkit-font-smoothing : antialiased;
}


/******************************************************************************
    Meta Bar — keep row 1 tight, the divider moves down to row 2
******************************************************************************/

.QuickTip .ArticleMeta {

    border-bottom  : 0;
    margin         : 6px 0 10px;
    padding-bottom : 0;
}


/******************************************************************************
    Second Meta Row  (Category  +  QuickTip No.)
******************************************************************************/

.QuickTipMeta {

    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    gap            : 12px;
    margin         : 0 0 26px;
    padding-bottom : 18px;
    border-bottom  : 1px solid #565b61;
    font-size      : 14px;
}


.QuickTipMeta > * {

    display       : inline-flex;
    align-items   : center;
    gap           : 7px;
    border-radius : 8px;
    padding       : 5px 12px;
    font-weight   : 600;
}


.QuickTipCat {

    background      : rgba(255,196,57,.14);
    border          : 1px solid rgba(255,196,57,.45);
    color           : #FFC439 !important;
    text-decoration : none;
    transition      : .2s;
}


.QuickTipCat:hover {

    background   : rgba(255,196,57,.22);
    border-color : #FFC439;
    transform    : translateY(-2px);
}


.QuickTipNo {

    margin-left    : auto;                /* push the number to the right */
    background     : #474b50;
    border         : 1px solid #565b61;
    color          : #e6e8eb;
    letter-spacing : .3px;
}


/******************************************************************************
    "Copy. Paste. Done." Footer Box
******************************************************************************/

.QuickTipDone {

    position      : relative;
    margin        : 40px 0 10px;
    padding       : 18px 20px 18px 54px;
    border-radius : 10px;
    border-left   : 5px solid #FFC439;
    background    : rgba(255,196,57,.10);
    color         : #e6e8eb;
    line-height   : 1.55;
}


.QuickTipDone::before {

    content     : "📋";
    position    : absolute;
    left        : 16px;
    top         : 16px;
    font-size   : 22px;
    line-height : 1;
}


.QuickTipDone strong { color : #ffd98a; }


.QuickTipDone > :last-child { margin-bottom : 0; }


/******************************************************************************
    Back Link  (to the overview)
******************************************************************************/

.QuickTipBack {

    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    margin         : 34px 0 0;
    font-size      : 14px;
    color          : #aab0b7;
    text-decoration: none;
    border-bottom  : 0;
}


.QuickTipBack:hover { color : #FFC439; }


/******************************************************************************
    App Container  (single Zeta page hosts both views)
******************************************************************************/

.QuickTipApp [hidden] { display : none !important; }


.QuickTipLoading {

    color     : #aab0b7;
    font-family: "Segoe UI", Arial, sans-serif;
    padding   : 40px 18px;
    max-width : 880px;
    margin    : 0 auto;
}


.QuickTipLoading a { color : #FFC439; }


/******************************************************************************
    Overview / Index
******************************************************************************/

.QuickTipIndex {

    max-width   : 980px;
    margin      : 40px auto;
    padding     : 0 18px;
    color       : #e6e8eb;
    font-family : "Segoe UI", Arial, sans-serif;
    line-height : 1.6;
}


.QuickTipIndex h1 {

    font-size : 34px;
    color     : #fff;
    margin    : 0 0 4px;
}


.QuickTipSlogan {

    margin         : 0 0 20px;
    font-size      : 20px;
    font-weight    : 700;
    letter-spacing : .3px;
    color          : #FFC439;
}


.QuickTipIndexLead {

    color     : #aab0b7;
    font-size : 18px;
    margin    : 0 0 26px;
    max-width : 72ch;
}


.QuickTipFilter {

    display        : flex;
    flex-wrap      : wrap;
    gap            : 10px;
    margin         : 0 0 28px;
    padding-bottom : 22px;
    border-bottom  : 1px solid #565b61;
}


.QuickTipFilter button {

    cursor        : pointer;
    font          : inherit;
    font-size     : 14px;
    border        : 1px solid #565b61;
    background    : #474b50;
    color         : #e6e8eb;
    border-radius : 20px;
    padding       : 7px 15px;
    transition    : .2s;
}


.QuickTipFilter button:hover {

    border-color : #FFC439;
    color        : #FFC439;
}


.QuickTipFilter button.Active {

    background    : rgba(255,196,57,.16);
    border-color  : #FFC439;
    color         : #FFC439;
}


.QuickTipCount {

    margin      : 0 0 18px;
    color       : #aab0b7;
    font-size   : 14px;
    font-family : "Segoe UI", Arial, sans-serif;
}


.QuickTipCount b {

    color       : #FFC439;
    font-weight : 700;
}


.QuickTipGrid {

    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(280px, 1fr));
    gap                   : 18px;
}


.QuickTipCard {

    display         : block;
    text-decoration : none;
    background      : #474b50;
    border          : 1px solid #565b61;
    border-left     : 4px solid #FFC439;
    border-radius   : 12px;
    padding         : 18px 20px;
    color           : #e6e8eb;
    transition      : .2s;
}


.QuickTipCard:hover {

    transform    : translateY(-3px);
    border-color : #FFC439;
    box-shadow   : 0 8px 20px rgba(0,0,0,.30);
}


.QuickTipCard .No {

    font-size      : 13px;
    color          : #FFC439;
    font-weight    : 700;
    letter-spacing : .5px;
}


.QuickTipCard .Title {

    display     : block;
    font-size   : 19px;
    color       : #fff;
    font-weight : 600;
    margin      : 6px 0 10px;
}


.QuickTipCard .Cat {

    font-size : 12px;
    color     : #aab0b7;
}


.QuickTipComingSoon {

    margin    : 26px 0 0;
    color     : #aab0b7;
    font-size : 14px;
}


/******************************************************************************
    End of File
******************************************************************************/