/*!
Theme Name:  Blogloom
Theme URI: https://vishoro.com
Author: The Vishoro Team
Author URI: https://vishoro.com/
Description: Blogloom is a responsive  personal blog theme for WordPress. The theme's elegant and minimalistic look makes it an attractive choice for bloggers and writers who aim to have a user-friendly and modern website. It's created to work well with any sort of niche but has designs particular for: food, lifestyle, fashion, travel, and review websites. The theme is fast and fully search engine optimized (SEO friendly).
Version: 1.0.0
Requires at least: 5.0
Requires PHP: 5.6
Tested up to: 6.3
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: blogloom
Tags:  custom-logo, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, theme-options, footer-widgets, full-width-template, left-sidebar, right-sidebar, blog

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

*/

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
    font-family: 'Inter', 'Roboto', Arial, sans-serif;
    background: #f7f7fa;
    color: #222;
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* --- Modern Blog Theme Styles --- */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 16px;
}

.site-main, .single-detail__inner, .widget-area, .related-posts, .comments-area, .comment-list, .comment, .comment-form, .site-footer, .related-post-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 16px 0 rgba(60,60,100,0.07);
}

.single-heading-default__title {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.single-entry__excerpt {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 18px;
}

img, .wp-post-image {
    border-radius: 14px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 18px auto;
}

/* Sidebar */
.widget-area {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 16px 0 rgba(60,60,100,0.07);
    padding: 24px 18px;
    margin-bottom: 24px;
}
.widget-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Recent Posts, Categories, Tags */
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
}
.widget ul li {
    margin-bottom: 10px;
}
.widget_categories ul li, .widget_recent_entries ul li {
    color: #444;
    font-size: 1rem;
}

/* Tags as pills */
.tagcloud a, .widget_tag_cloud a {
    display: inline-block;
    background: #f06292;
    color: #fff !important;
    border-radius: 16px;
    padding: 4px 14px;
    margin: 0 6px 8px 0;
    font-size: 0.95rem !important;
    text-decoration: none;
    transition: background 0.2s;
}
.tagcloud a:hover, .widget_tag_cloud a:hover {
    background: #d81b60;
}

/* Comments */
.comments-area {
    margin-top: 32px;
    padding: 24px 18px;
}
.comment-list {
    padding: 0;
    margin: 0;
}
.comment {
    background: #f7f7fa;
    border-radius: 14px;
    margin-bottom: 16px;
    padding: 16px 18px;
    box-shadow: 0 1px 6px 0 rgba(60,60,100,0.04);
}
.comment .avatar {
    float: left;
    margin-right: 12px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}
.comment-author {
    font-weight: 600;
    color: #d81b60;
}
.comment-meta {
    font-size: 0.95rem;
    color: #888;
}
.comment-content {
    margin-top: 6px;
    font-size: 1rem;
}

/* Related Posts */
.related-posts {
    margin-top: 36px;
    padding: 18px 0 0 0;
}
.related-posts h2 {
    font-size: 1.3rem;
    margin-bottom: 18px;
}
.related-posts .row, .related-posts .grid {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.related-post-card {
    flex: 1 1 30%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 6px 0 rgba(60,60,100,0.04);
    padding: 10px;
    text-align: center;
    min-width: 180px;
    max-width: 220px;
}
.related-post-card img {
    border-radius: 10px;
    margin-bottom: 8px;
}
.related-post-card h3 {
    font-size: 1rem;
    margin: 0 0 8px 0;
}

/* Social Share Buttons */
.social-share {
    margin: 18px 0 24px 0;
    display: flex;
    gap: 10px;
}
.social-share a {
    display: inline-block;
    border-radius: 16px;
    padding: 7px 18px;
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    transition: background 0.2s;
}
.social-share .facebook { background: #3b5998; }
.social-share .twitter { background: #1da1f2; }
.social-share .linkedin { background: #0077b5; }
.social-share a:hover { opacity: 0.85; }

/* Footer */
.site-footer {
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -2px 16px 0 rgba(60,60,100,0.07);
    padding: 24px 0 12px 0;
    margin-top: 48px;
    text-align: center;
    font-size: 0.98rem;
    color: #888;
}
.site-footer a { color: #d81b60; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Header */
.site-header, .site-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #d81b60;
    padding: 18px 0 0 18px;
    background: none;
    box-shadow: none;
    margin-bottom: 0;
}

/* Utility */
.text-center { text-align: center; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 2rem; }
.d-flex { display: flex; }
.justify-content-center { justify-content: center; }

/* Responsive */
@media (max-width: 900px) {
    .container { max-width: 100%; padding: 16px 4px; }
    .related-posts .row, .related-posts .grid { flex-direction: column; gap: 12px; }
    .related-post-card { max-width: 100%; min-width: 0; }
}

/* --- Layout Flex for Main Content and Sidebar --- */
.post-layout-flex {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}
.main-content-area {
    flex: 1 1 0%;
    max-width: 700px;
    margin-right: 40px;
}
.sidebar-area {
    width: 260px;
    flex-shrink: 0;
}

/* Main Post Card */
.post-card {
    padding: 32px 28px;
    margin-bottom: 32px;
}

/* Comments Section */
.comments-section {
    margin-top: 32px;
}
.comments-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: #222;
}

/* Related Posts Section */
.related-posts-section {
    margin-top: 36px;
    margin-bottom: 0;
}

/* Sidebar Widget Spacing */
.sidebar-area > .widget-area {
    margin-bottom: 24px;
}

/* Featured and Content Images */
.single-featured-image img,
.single-content img,
.related-post-card img {
    border-radius: 14px;
}

/* Responsive for Mobile */
@media (max-width: 900px) {
    .post-layout-flex {
        flex-direction: column;
        gap: 0;
    }
    .main-content-area {
        max-width: 100%;
        margin-right: 0;
    }
    .sidebar-area {
        width: 100%;
        margin-top: 32px;
    }
}