/*
Theme Name: HypePress
Theme URI: https://gig.web.id
Author: Rifan Muazin
Author URI: https://gig.web.id
Author Email: muazin.asro@gmail.com
Description: HypePress is a modern, high-engagement digital media and viral magazine WordPress theme. Features dynamic homepage blocks, secondary category carousel, sticky header, full author profiles with avatar initials, Indonesian locale dates, and complete Theme Customizer controls.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hypepress
Tags: news, magazine, blog, entertainment, lifestyle, gen-z, grid-layout, custom-menu, featured-images, theme-options
*/

/* Core Theme Enhancements & Fixes */
:root {
    --brand-primary: #f69220;
    --brand-primary-hover: #e07f12;
    --brand-dark: #1b1f23;
    --brand-gray: #8e9195;
    --brand-light: #f8f9fa;
    --brand-border: #e8e8e8;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #333333;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: var(--brand-primary);
}

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

/* Layout & Fixed Header Clearance */
#main-wrapper.rev-2022 {
    padding-top: 115px;
}

@media (max-width: 991px) {
    #main-wrapper.rev-2022 {
        padding-top: 95px;
    }
}

.desktop .main-content,
.main-content {
    opacity: 1 !important;
}

/* Header Styles */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1052;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.header-top {
    background: linear-gradient(90deg, #f7931e 0%, #f15a24 100%);
    padding: 10px 0;
    color: #ffffff;
}

.header-top .row {
    flex-wrap: nowrap;
}

.header-top .col {
    min-width: 0;
}

/* Logo Responsive & Constraint Rules */
.col-logo {
    flex: 0 0 auto;
    max-width: var(--logo-max-space, 25%);
    min-width: 100px;
    display: flex;
    align-items: center;
}

.col-logo .custom-logo-link,
.col-logo .header-brand,
.header-brand {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}

.col-logo img,
.col-logo .custom-logo,
.header-brand img,
.header-brand .custom-logo {
    max-width: var(--logo-max-width, 200px) !important;
    width: auto;
    height: auto;
    max-height: 42px !important;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.footer-brand img,
.footer-brand .custom-logo {
    max-width: 160px;
    height: auto;
    max-height: 48px;
    object-fit: contain;
    display: block;
    margin-bottom: 12px;
}

#main-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 15px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#main-menu::-webkit-scrollbar {
    display: none;
}

#main-menu li {
    flex-shrink: 0;
}

#main-menu li a {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

#main-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

#main-menu .icon svg {
    width: 14px;
    height: 14px;
    fill: #ffffff;
}

#main-menu .hot {
    background: #ff0000;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    text-transform: uppercase;
    animation: pulse-hot 1.5s infinite;
}

@keyframes pulse-hot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.header-bottom {
    background: #ffffff;
    border-bottom: 1px solid #ebebeb;
    position: relative;
}

.secondary-menu-wrap {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0;
}

.secondary-menu-wrap::-webkit-scrollbar {
    display: none;
}

.secondary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 24px;
    align-items: center;
}

.secondary-menu li a {
    color: #555555;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 2px;
    position: relative;
}

.secondary-menu li.current-menu-item a,
.secondary-menu li.current-cat a,
.secondary-menu li a:hover {
    color: var(--brand-primary);
}

.secondary-menu li.current-menu-item a::after,
.secondary-menu li.current-cat a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--brand-primary);
    border-radius: 2px;
}

.search-toggle-wrap {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    z-index: 99;
}

.search-toggle-wrap.active,
.search-toggle-wrap.is-open {
    display: block;
}

.search-toggle-wrap form {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.search-toggle-wrap .search-input {
    width: 100%;
    padding: 12px 50px 12px 20px;
    font-size: 16px;
    border: 2px solid var(--brand-primary);
    border-radius: 30px;
    outline: none;
    box-sizing: border-box;
}

.search-toggle-wrap button[type="submit"] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
}

.button-close {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
}

/* Card Post & Image Aspect Ratio Strict Enforcement */
.card-post {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background-color: #1a1a1a;
    transition: all 0.25s ease-in-out;
    outline: 2px solid transparent;
    width: 100%;
    height: 100%;
}

.card-post a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    color: #ffffff;
}

.card-post a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
    transition: all 0.25s ease-in-out;
}

.card-post:hover {
    outline-color: var(--brand-1, #f96913);
    transform: translateY(-2px);
}

.card-post:hover a::before {
    background-color: rgba(0, 0, 0, 0.25);
}

.card-post .post-img,
.card-post img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
}

/* Headline Top 2 Large Cards (525:295 aspect ratio) */
.headline .col-lg-6 .card-post,
.headline .col-lg-6 .card-post a {
    aspect-ratio: 525 / 295;
    min-height: 240px;
}

/* Headline Bottom 3 Medium Cards & Trending / Magazine Cards (360:203 aspect ratio) */
.headline .col-lg-4 .card-post,
.headline .col-lg-4 .card-post a,
.section-magezine-revamp .card-post,
.section-magezine-revamp .card-post a,
.now-trending .card-post,
.now-trending .card-post a,
.archive-post .card-post,
.archive-post .card-post a {
    aspect-ratio: 360 / 203;
    min-height: 175px;
}

/* Sidebar & List Item Images (195:125 aspect ratio) */
.item-post .item-post__thumb,
.item-post .item-post__thumb img,
.item-post .post-img {
    aspect-ratio: 195 / 125;
    object-fit: cover !important;
    width: 100%;
    border-radius: 4px;
}

.card-post .inner {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 16px 20px 14px;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-post .post-title {
    font-size: 16px;
    line-height: 1.35;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-post .cat-wrap {
    list-style-type: none;
    padding-left: 0;
    margin: 0 0 6px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.card-post .cat-wrap .cat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.2;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 500;
    color: #ffffff;
}

.card-post .cat-wrap .cat-item .icon {
    display: inline-flex;
    align-items: center;
}

.card-post .cat-wrap .cat-item .icon svg {
    width: 13px;
    height: 13px;
    fill: #ffffff;
}

/* Avatar with Initials */
[data-letters]:before {
    content: attr(data-letters);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: 700;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    background: var(--tooltip-color, #f69220);
    color: #ffffff;
    text-transform: uppercase;
}

.profile-header__thumb [data-letters]:before {
    width: 80px;
    height: 80px;
    font-size: 32px;
}

/* Social icons footer */
.social {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
    flex-wrap: wrap;
}

.social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #333333;
    border-radius: 50%;
    color: #ffffff;
    transition: background 0.2s, transform 0.2s;
}

.social li a:hover {
    background: var(--brand-primary);
    transform: translateY(-2px);
    color: #ffffff;
}

.social li a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Share Article Sticky Bar */
.share-article-sticky {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
}

.share-article-sticky .share-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}

.share-article-sticky .share-btn:hover {
    transform: scale(1.1);
}

.share-btn.wa { background-color: #25d366; }
.share-btn.fb { background-color: #1877f2; }
.share-btn.tw { background-color: #000000; }
.share-btn.tg { background-color: #0088cc; }
.share-btn.line { background-color: #00c300; }
.share-btn.comments { background-color: #f69220; }