/*
==================================================================
DeleteInstagram Theme
Professional Documentation UI
Version 3.0
==================================================================
*/

/*==============================================================
RESET
==============================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;
    overflow-x:hidden;

}

body{

    min-width:320px;

    overflow-x:hidden;

    background:#f3f6f9;

    color:#334155;

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size:16px;

    line-height:1.75;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

video,
iframe{

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

section{

    position:relative;

}

::selection{

    background:#2563eb;

    color:#ffffff;

}

/*==============================================================
DESIGN SYSTEM
==============================================================*/

:root{

    --primary:#2563eb;

    --primary-hover:#1d4ed8;

    --success:#16a34a;

    --warning:#d97706;

    --danger:#dc2626;

    --background:#f3f6f9;

    --surface:#f8fafc;

    --card:#ffffff;

    --heading:#0f172a;

    --text:#334155;

    --muted:#64748b;

    --border:#d6dee8;

    --border-dark:#b8c4d3;

    --radius:8px;

    --radius-lg:10px;

    --shadow:

        0 2px 8px rgba(15,23,42,.05);

    --shadow-md:

        0 8px 24px rgba(15,23,42,.08);

    --shadow-lg:

        0 18px 45px rgba(15,23,42,.10);

}

/*==============================================================
CONTAINER
==============================================================*/

.di-container{

    width:100%;

    max-width:1280px;

    margin-inline:auto;

    padding-inline:20px;

}

@media(min-width:768px){

    .di-container{

        padding-inline:32px;

    }

}

/*==============================================================
TYPOGRAPHY
==============================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--heading);

    font-weight:800;

    line-height:1.2;

}

.di-title{

    font-size:clamp(2.5rem,5vw,4.5rem);

    letter-spacing:-1px;

}

.di-subtitle{

    font-size:clamp(2rem,4vw,3rem);

}

p{

    color:var(--text);

}

small{

    color:var(--muted);

}

/*==============================================================
SECTIONS
==============================================================*/

.di-section{

    padding:70px 0;

}

.di-section-sm{

    padding:50px 0;

}

.bg-alt{

    background:#ffffff;

}

.bg-soft{

    background:#f8fafc;

}

/*==============================================================
BUTTONS
==============================================================*/

.di-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    height:46px;

    padding:0 24px;

    border-radius:8px;

    font-size:.95rem;

    font-weight:700;

    transition:.25s;

    cursor:pointer;

    white-space:nowrap;

}

.di-btn:hover{

    transform:translateY(-2px);

}

.di-btn-primary{

    color:#fff;

    background:var(--primary);

    border:1px solid var(--primary);

    box-shadow:

        0 6px 16px rgba(37,99,235,.18);

}

.di-btn-primary:hover{

    background:var(--primary-hover);

    border-color:var(--primary-hover);

}

.di-btn-secondary{

    background:#fff;

    color:var(--heading);

    border:1px solid var(--border-dark);

}

.di-btn-secondary:hover{

    background:#eff6ff;

    border-color:var(--primary);

    color:var(--primary);

}

/*==============================================================
BADGES
==============================================================*/

.di-badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.45rem .9rem;

    border-radius:999px;

    border:1px solid #bfdbfe;

    background:#dbeafe;

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

}

/*==============================================================
CARDS
==============================================================*/

.di-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:10px;

    box-shadow:var(--shadow);

    transition:.25s;

}

.di-card:hover{

    border-color:#bfd4ff;

    box-shadow:var(--shadow-md);

}

.di-guide-card{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:10px;

    overflow:hidden;

    transition:.25s;

}

.di-guide-card:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}
/*==============================================================
HEADER
==============================================================*/

#site-header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    border-bottom:1px solid var(--border);

}

#navbar{

    height:74px;

}

.site-brand{

    display:flex;

    align-items:center;

}

.site-brand-title{

    font-size:1.45rem;

    font-weight:800;

    color:var(--heading);

    letter-spacing:-.5px;

}

.site-brand-tagline{

    margin-top:2px;

    font-size:.82rem;

    color:var(--muted);

}

/*==============================================================
NAVIGATION
==============================================================*/

.di-nav-menu{

    display:flex;

    align-items:center;

    gap:.35rem;

    list-style:none;

}

.di-nav-menu li{

    margin:0;

}

.di-nav-menu a{

    display:flex;

    align-items:center;

    gap:.6rem;

    height:42px;

    padding:0 16px;

    border-radius:8px;

    color:var(--text);

    font-size:.92rem;

    font-weight:700;

    transition:.2s;

}

.di-nav-menu a i{

    width:18px;

    color:#94a3b8;

    text-align:center;

    transition:.2s;

}

.di-nav-menu a:hover{

    color:var(--primary);

    background:#eff6ff;

}

.di-nav-menu a:hover i{

    color:var(--primary);

}

.current-menu-item>a,

.current_page_item>a{

    color:var(--primary);

    background:#dbeafe;

}

.current-menu-item>a i,

.current_page_item>a i{

    color:var(--primary);

}

/*==============================================================
SEARCH BUTTON
==============================================================*/

.search-btn,

.mobile-toggle{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:8px;

    color:var(--text);

    transition:.2s;

}

.search-btn:hover,

.mobile-toggle:hover{

    background:#eff6ff;

    color:var(--primary);

    border-color:#bfdbfe;

}

/*==============================================================
MOBILE MENU
==============================================================*/

#mobile-menu{

    background:#ffffff;

    border-top:1px solid var(--border);

}

#mobile-menu ul{

    list-style:none;

}

#mobile-menu li{

    margin-bottom:6px;

}

#mobile-menu a{

    display:flex;

    align-items:center;

    gap:.75rem;

    padding:14px 16px;

    border-radius:8px;

    font-weight:600;

}

#mobile-menu a:hover{

    background:#eff6ff;

}

/*==============================================================
HERO
==============================================================*/

.hero{

    padding:70px 0;

}

.hero-description{

    max-width:760px;

    margin:24px auto;

    font-size:1.1rem;

}

.hero-search{

    margin:40px auto;

    max-width:860px;

}

.hero-search form{

    display:flex;

    gap:12px;

}

.hero-search input{

    flex:1;

}

/*==============================================================
INPUTS
==============================================================*/

.di-input{

    width:100%;

    height:48px;

    padding:0 18px;

    border:1px solid var(--border-dark);

    border-radius:8px;

    background:#ffffff;

    color:var(--heading);

    outline:none;

    transition:.2s;

}

.di-input::placeholder{

    color:#94a3b8;

}

.di-input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(37,99,235,.10);

}

textarea.di-input{

    height:auto;

    min-height:140px;

    padding:16px 18px;

}

/*==============================================================
LISTS
==============================================================*/

ul.clean{

    list-style:none;

    margin:0;

    padding:0;

}

ul.clean li{

    margin-bottom:10px;

}

/*==============================================================
TABLES
==============================================================*/

table{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:8px;

    overflow:hidden;

}

th{

    background:#f8fafc;

    color:var(--heading);

    font-weight:700;

}

th,
td{

    padding:14px 18px;

    border:1px solid var(--border);

    text-align:left;

}
/*==============================================================
CONTENT
==============================================================*/

.di-content{

    color:var(--text);

    font-size:1.05rem;

    line-height:1.9;

}

.di-content>*{

    margin-bottom:1.5rem;

}

.di-content h2{

    margin-top:3rem;

    margin-bottom:1rem;

    font-size:2rem;

}

.di-content h3{

    margin-top:2.5rem;

    margin-bottom:1rem;

    font-size:1.55rem;

}

.di-content h4{

    margin-top:2rem;

    margin-bottom:1rem;

}

.di-content p{

    color:var(--text);

}

.di-content ul,
.di-content ol{

    margin:1.5rem 0 1.5rem 1.5rem;

}

.di-content li{

    margin-bottom:.75rem;

}

.di-content a{

    color:var(--primary);

    font-weight:600;

}

.di-content a:hover{

    text-decoration:underline;

}

.di-content strong{

    color:var(--heading);

}

.di-content img{

    margin:2rem auto;

    border:1px solid var(--border);

    border-radius:8px;

}

.di-content blockquote{

    margin:2rem 0;

    padding:1.25rem 1.5rem;

    background:#eef5ff;

    border-left:4px solid var(--primary);

    border-radius:8px;

}

.di-content code{

    padding:.2rem .45rem;

    border-radius:6px;

    background:#e2e8f0;

    font-size:.92rem;

}

.di-content pre{

    overflow:auto;

    padding:1.25rem;

    border-radius:8px;

    background:#0f172a;

    color:#ffffff;

}

/*==============================================================
SIDEBAR / WIDGETS
==============================================================*/

.widget{

    margin-bottom:24px;

    padding:24px;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:10px;

    box-shadow:var(--shadow);

}

.widget-title{

    margin-bottom:18px;

    font-size:1.2rem;

}

.widget ul{

    list-style:none;

}

.widget li{

    margin-bottom:12px;

}

.widget a:hover{

    color:var(--primary);

}

/*==============================================================
FOOTER
==============================================================*/

footer{

    margin-top:80px;

    background:#ffffff;

    border-top:1px solid var(--border);

}

footer a{

    color:var(--muted);

    transition:.2s;

}

footer a:hover{

    color:var(--primary);

}

/*==============================================================
HELPERS
==============================================================*/

.text-center{

    text-align:center;

}

.text-muted{

    color:var(--muted);

}

.rounded{

    border-radius:8px;

}

.shadow{

    box-shadow:var(--shadow);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}

/*==============================================================
SCROLLBAR
==============================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef2f7;

}

::-webkit-scrollbar-thumb{

    background:#b8c4d3;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media (max-width:1024px){

    .di-nav-menu{

        display:none;

    }

}

@media (max-width:768px){

    .di-section{

        padding:50px 0;

    }

    .hero{

        padding:50px 0;

    }

    .hero-search form{

        flex-direction:column;

    }

    .di-btn{

        width:100%;

    }

    table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

}

@media (max-width:640px){

    .di-title{

        font-size:2.2rem;

    }

    .di-subtitle{

        font-size:1.7rem;

    }

    .di-container{

        padding-inline:16px;

    }

}

/*==============================================================
WORDPRESS
==============================================================*/

.alignleft{

    float:left;

    margin:0 24px 20px 0;

}

.alignright{

    float:right;

    margin:0 0 20px 24px;

}

.aligncenter{

    display:block;

    margin-inline:auto;

}

.wp-caption{

    max-width:100%;

}

.gallery{

    display:grid;

    gap:16px;

}

.screen-reader-text{

    position:absolute;

    left:-9999px;

}