/*
Theme Name: Newsline PHP
Theme URI: https://example.com/newsline-php
Author: SkyLimit
Description: Lightweight classic PHP news and blog theme with complete Gutenberg styling.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: newsline
License: GNU General Public License v2 or later
*/

:root{
    --ink:#223044;
    --muted:#667085;
    --blue:#246bfd;
    --blue-dark:#1454d4;
    --paper:#fff;
    --wash:#f5f7fa;
    --line:#e7eaf0;
    --radius:4px;
    --shadow:0 8px 30px rgba(31,43,58,.07);
    --content:1180px;
    --reading:760px
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Georgia,"Times New Roman",serif;
    font-size:17px;
    line-height:1.58;
    -webkit-font-smoothing:antialiased
}

img{
    max-width:100%;
    height:auto;
    display:block
}

a{
    color:var(--blue);
    text-decoration:none
}
a:hover{
    color:var(--blue-dark)
}

button,input,textarea,select{
    font:inherit
}
button,.button,.wp-element-button,input[type=submit]{
    border:0;
    border-radius:var(--radius);
    background:var(--blue);
    color:#fff;
    padding:.72rem 1.15rem;
    cursor:pointer;
    transition:.2s ease
}
button:hover,.button:hover,.wp-element-button:hover,input[type=submit]:hover{
    background:var(--blue-dark);
    color:#fff;
    transform:translateY(-1px)
}

.screen-reader-text{
    position:absolute!important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.screen-reader-text:focus{
    position:fixed!important;
    z-index:9999;
    top:12px;
    left:12px;
    width:auto;
    height:auto;
    clip:auto;
    background:#fff;
    padding:10px 14px;
    color:var(--ink)
}

.wrap{
    width:min(calc(100% - 40px),var(--content));
    margin-inline:auto
}

.topbar{
    background:#202c39;
    color:#dbe2ea;
    font-size:14px
}
.topbar__inner{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.topbar a{
    color:#dbe2ea
}
.topbar ul{
    display:flex;
    gap:24px;
    list-style:none;
    margin:0;
    padding:0
}
.social-links{
    display:flex;
    gap:12px
}
.social-links a{
    font-family:system-ui,sans-serif;
    font-weight:700;
    font-size:12px;
    text-transform:uppercase
}

.site-header{
    background:#fff;
    border-bottom:1px solid var(--line)
}
.header__inner{
    min-height:110px;
    display:flex;
    align-items:center;
    gap:36px
}
.site-branding{
    margin-right:auto
}
.site-title{
    margin:0;
    font:800 24px/1.1 system-ui,sans-serif;
    letter-spacing:-.04em;
    text-transform:uppercase
}
.site-title a{
    color:var(--ink)
}
.site-title span{
    color:var(--blue)
}
.site-description{
    margin:6px 0 0;
    color:var(--muted);
    font-size:13px
}

.primary-menu,.primary-menu ul{
    display:flex;
    align-items:center;
    gap:30px;
    list-style:none;
    margin:0;
    padding:0
}
.primary-menu a{
    color:var(--ink)
}
.primary-menu a:hover,.primary-menu .current-menu-item>a{
    color:var(--blue)
}
.primary-menu .menu-item-has-children{
    position:relative
}
.primary-menu .sub-menu{
    display:none;
    position:absolute;
    z-index:20;
    top:100%;
    left:-18px;
    min-width:210px;
    padding:14px 18px;
    background:#fff;
    box-shadow:var(--shadow);
    border:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    gap:9px
}
.primary-menu li:hover>.sub-menu,.primary-menu li:focus-within>.sub-menu{
    display:flex
}
.header-search{
    display:flex
}
.header-search button{
    width:42px;
    height:42px;
    padding:0;
    background:transparent;
    color:var(--ink);
    font-size:20px
}
.menu-toggle{
    display:none;
    background:transparent;
    color:var(--ink);
    padding:.5rem
}

.hero-title{
    padding:54px 0;
    background:var(--wash);
    text-align:center
}
.hero-title h1{
    margin:0;
    font-size:clamp(32px,5vw,52px);
    line-height:1.12;
    letter-spacing:-.035em
}
.hero-title p{
    margin:12px auto 0;
    color:var(--muted);
    max-width:620px
}

.site-main{
    padding:64px 0 80px;
    background:var(--wash)
}
.content-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:56px
}
.post-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px
}
.post-card{
    background:#fff;
    box-shadow:var(--shadow);
    overflow:hidden;
    min-width:0
}
.post-card__image{
    display:block;
    aspect-ratio:16/10;
    overflow:hidden;
    background:#e9edf2
}
.post-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease
}
.post-card:hover .post-card__image img{
    transform:scale(1.025)
}
.post-card__body{
    padding:28px 30px 30px
}
.post-card__categories,.entry-categories{
    display:flex;
    gap:6px;
    flex-wrap:wrap
}
.post-card__categories a,.entry-categories a{
    display:inline-block;
    background:var(--blue);
    color:#fff;
    border-radius:3px;
    padding:3px 9px;
    font:600 12px/1.45 system-ui,sans-serif;
    text-transform:uppercase;
    letter-spacing:.04em
}
.post-card__title{
    font-size:25px;
    line-height:1.17;
    letter-spacing:-.025em;
    margin:17px 0 12px
}
.post-card__title a{
    color:var(--ink)
}
.post-card__excerpt{
    color:var(--muted);
    margin:0 0 20px
}
.entry-meta{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:14px
}
.entry-meta a{
    color:var(--ink)
}
.avatar{
    border-radius:50%
}

.post-grid .post-card:nth-child(1),.post-grid .post-card:nth-child(2){
    grid-column:span 1
}
.post-grid .post-card:nth-child(n+3) .post-card__image{
    aspect-ratio:16/9
}

.sidebar{
    min-width:0
}
.widget{
    margin-bottom:42px
}
.widget-title{
    font-size:21px;
    margin:0 0 18px
}
.widget ul{
    list-style:none;
    margin:0;
    padding:0
}
.widget li{
    padding:7px 0;
    border-bottom:1px solid var(--line)
}
.widget li:last-child{
    border:0
}
.widget a{
    color:var(--ink)
}
.widget a:hover{
    color:var(--blue)
}
.search-form{
    display:flex
}
.search-field{
    min-width:0;
    width:100%;
    border:1px solid #dfe3e8;
    border-radius:var(--radius) 0 0 var(--radius);
    padding:10px 12px;
    background:#fff
}
.search-submit{
    border-radius:0 var(--radius) var(--radius) 0;
    padding-inline:14px
}
.recent-post{
    display:grid;
    grid-template-columns:76px 1fr;
    gap:13px;
    margin-bottom:16px
}
.recent-post img{
    width:76px;
    height:68px;
    object-fit:cover
}
.recent-post__title{
    font-size:15px;
    line-height:1.24;
    color:var(--ink);
    display:block
}
.recent-post time{
    font-size:12px;
    color:var(--muted)
}

.pagination{
    grid-column:1/-1;
    margin-top:16px
}
.pagination .nav-links{
    display:flex;
    gap:8px
}
.page-numbers{
    display:grid;
    place-items:center;
    min-width:42px;
    height:42px;
    padding:0 10px;
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line)
}
.page-numbers.current{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff
}

.single-shell{
    width:min(calc(100% - 40px),var(--content));
    margin:auto
}
.single-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:64px
}
.single-layout--center{
    display:block
}
.single-layout--center .article{
    max-width:var(--reading);
    margin:auto
}
.article{
    background:#fff;
    padding:clamp(26px,5vw,64px);
    box-shadow:var(--shadow);
    min-width:0
}
.article-header{
    text-align:center;
    margin-bottom:38px
}
.article-header .entry-categories{
    justify-content:center
}
.entry-title{
    font-size:clamp(34px,5vw,54px);
    line-height:1.08;
    letter-spacing:-.04em;
    margin:18px 0
}
.article-header .entry-meta{
    justify-content:center
}
.featured-image{
    margin:0 0 42px
}
.featured-image img{
    width:100%
}
.entry-content{
    color:#344054
}
.entry-content>*{
    max-width:100%;
    margin-top:0;
    margin-bottom:1.4em
}
.entry-content h2,.entry-content h3,.entry-content h4{
    color:var(--ink);
    line-height:1.18;
    letter-spacing:-.025em;
    margin-top:1.8em
}
.entry-content h2{
    font-size:36px
}
.entry-content h3{
    font-size:28px
}
.entry-content h4{
    font-size:22px
}
.entry-content p{
    margin-bottom:1.35em
}
.entry-content ul,.entry-content ol{
    padding-left:1.35em
}
.entry-content a{
    text-decoration:underline;
    text-underline-offset:3px
}
.entry-content .alignwide{
    width:min(100vw - 80px,1060px);
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%)
}
.entry-content .alignfull{
    width:100vw;
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%)
}

.post-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:38px;
    padding-top:24px;
    border-top:1px solid var(--line)
}
.post-tags a{
    padding:5px 10px;
    background:var(--wash);
    color:var(--ink);
    font-size:13px
}
.post-navigation{
    margin-top:34px
}
.post-navigation .nav-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.post-navigation a{
    display:block;
    background:#fff;
    padding:20px;
    color:var(--ink);
    box-shadow:var(--shadow)
}

.comments-area{
    max-width:var(--reading);
    margin:50px auto 0
}
.comment-list{
    list-style:none;
    padding:0
}
.comment-body{
    background:#fff;
    padding:24px;
    margin-bottom:16px
}
.comment-meta{
    font-size:14px
}
.comment-content{
    margin-left:48px
}
.comment-form input:not([type=submit]),.comment-form textarea{
    width:100%;
    border:1px solid var(--line);
    padding:11px 12px;
    background:#fff
}

.site-footer{
    background:#202c39;
    color:#bac4cf;
    padding:62px 0 24px
}
.footer-grid{
    display:grid;
    grid-template-columns:1.35fr repeat(3,1fr);
    gap:45px
}
.site-footer h2,.site-footer h3{
    color:#fff
}
.site-footer a{
    color:#dce4ec
}
.site-footer ul{
    list-style:none;
    margin:0;
    padding:0
}
.site-footer li{
    margin:8px 0
}
.footer-bottom{
    border-top:1px solid #344250;
    margin-top:44px;
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    font-size:14px
}

.no-results{
    background:#fff;
    padding:50px;
    text-align:center
}
.archive-description{
    max-width:650px;
    margin:12px auto 0
}
.archive-description p{
    margin:0
}
.page-template-default .article-header{
    text-align:left
}
.page-template-default .article-header .entry-meta,.page-template-default .article-header .entry-categories{
    justify-content:flex-start
}

@media(max-width:900px){
    .header__inner{
        min-height:82px
    }
    .menu-toggle{
        display:block
    }
    .main-navigation{
        display:none;
        position:absolute;
        z-index:30;
        top:124px;
        left:20px;
        right:20px;
        padding:22px;
        background:#fff;
        box-shadow:var(--shadow)
    }
    .main-navigation.is-open{
        display:block
    }
    .primary-menu,.primary-menu ul{
        align-items:flex-start;
        flex-direction:column;
        gap:14px
    }
    .primary-menu .sub-menu{
        display:flex;
        position:static;
        border:0;
        box-shadow:none;
        padding:8px 0 0 18px
    }
    .content-grid,.single-layout{
        grid-template-columns:1fr
    }
    .sidebar{
        border-top:1px solid var(--line);
        padding-top:45px
    }
    .footer-grid{
        grid-template-columns:1fr 1fr
    }
    .topbar{
        display:none
    }

}

@media(max-width:620px){
    .wrap,.single-shell{
        width:min(calc(100% - 28px),var(--content))
    }
    .site-main{
        padding:36px 0 54px
    }
    .post-grid{
        grid-template-columns:1fr
    }
    .post-card__body{
        padding:24px
    }
    .article{
        padding:26px 20px
    }
    .entry-title{
        font-size:36px
    }
    .entry-content h2{
        font-size:29px
    }
    .footer-grid{
        grid-template-columns:1fr
    }
    .footer-bottom{
        display:block
    }
    .post-navigation .nav-links{
        grid-template-columns:1fr
    }
    .header-search{
        display:none
    }

}