/*
Theme Name: Hi Classic
Theme URI: https://hiclassic.site/hi-theme/
Author: Hi Classic
Author URI: https://hiclassic.site/
Description: Hi Classic is a lightweight and minimalist WordPress theme designed for those who appreciate simplicity and flexibility. It is fully compatible with Elementor, allowing you to easily customize your website's design. With Hi Classic, you can personalize your header and footer without needing the pro version of Elementor, making it an excellent choice for users who want a clean and customizable website without the bloat.
Version: 2.2
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hi-classic
Tags: blog, custom-logo, custom-menu, featured-images, flexible-header, full-width-template, rtl-language-support, translation-ready

Copyright © 2025 Hi Classic. This theme is licensed under the GPL v2 or later.
*/

/* ==================================================
   WordPress Recommended Classes
================================================== */

/*Captions */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1em;
    text-align: center;
}

.wp-caption img {
    display: block;
    margin: 0 auto;
}

.wp-caption-text {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/*Sticky Post */
.sticky {
    background: #f5f5f5;
    padding: 10px;
    border-left: 5px solid #0073aa;
}

/*Gallery Caption */
.gallery-caption {
    font-size: 14px;
    color: #555;
    text-align: center;
    margin-top: 5px;
}

/*Author Comments */
.bypostauthor {
    border-left: 3px solid #0073aa;
    padding-left: 10px;
}

/*Image Alignments */
.alignright {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
}

.alignleft {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.aligncenter {
    display: block;
    margin: 0 auto;
    text-align: center;
}

/*Screen Reader Text*/
/* Hide text visually but keep it accessible for screen readers */
  .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Allow screen reader text to be visible when focused (for accessibility) */
.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    background: #fff;
    color: #000;
    padding: 10px;
    border-radius: 5px;
}

html {
    box-sizing: border-box;
  }
body{
    margin:0px;
    padding: 0px;
}
.hi-body {
    text-align: center;
}
.hi-content {
    width: 1240px;
    margin: 0px auto;
    padding: 10px;
}
/*header*/
.primary--main-menu {
    display: flex;
}
nav.primary-menu li {
    list-style: none;
}
nav.primary-menu li a {
    text-decoration:none;
    font-size: 18px;
}
#menu-main_menu li {
    list-style: none;
    padding-right: 20px;
    text-transform: uppercase;
    font-size: 18px;
}
#menu-main_menu a {
text-decoration: none;
color:#000;
}
#menu-main_menu a:hover {
    color:#19008a;
    }
header.site-header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.logo a {
    text-decoration: none;
    color: #000;
}
.primary-menu li {
    display: inline;
    padding-right: 20px;
}
.primary-menu ul {
    padding:0px;
}
/*single post*/
img.post-banner.wp-post-image {
    width: 100%;
    height: auto;
}
/*404*/
#not-found-content{
    text-align: center;
}
#not-found-content h1{
    font-size: 100px;
    margin-bottom: 0px;
}
/*comment section*/
p.comment-form-comment {
    display: flex;
    flex-direction: column;
}
#comments-section {
    width: 1240px;
    margin: 0px auto;
    padding: 10px;
}
textarea#comment {
     width: 90%;
}
.commentlist {
    padding: 0;
}
/*footer*/
footer.site-footer {
    text-align: center;
    font-size: 15px;
}

/*resposnive*/
@media (min-width: 320px) and (max-width: 1024px) {
    .hi-content {
        width: 100%;
    }
    .comments-section {
        width: 100%;
    }
  }

