/*
Theme Name: Ridda
Theme URI: https://wp.webtend.net/ridda
Author: WebTend
Author URI: https://themeforest.net/user/webtend
Description: Webtend team presents absolutely fresh and powerful WordPress theme. It combines new technologies and functional design that helps to showcase your content in better way. This WordPress theme is developed with attention to details, so you can create effective presentation of a website easily. Enjoy building web pages with our product!
Version: 1.0.7
Tested up to: 6.8
Requires PHP: 7.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: blog, featured-images, translation-ready
Text Domain: ridda
*/

/* ===== Glacial Indifference Font Import ===== */
@import url('https://fonts.cdnfonts.com/css/glacial-indifference');

/* ===== CSS Custom Properties ===== */
:root {
    /* Color System */
    --ridda-primary-color: #AE8F62;
    --ridda-primary-dark: #8a7049;
    --ridda-primary-light: #c9b298;
    --ridda-heading-color: #141414;
    --ridda-text-color: #838383;
    --ridda-text-light: #a0a0a0;
    --ridda-border-color: #F2F2F2;
    --ridda-border-dark: #e0e0e0;
    --ridda-lighter-color: #F7F8FE;
    --ridda-white-color: #ffffff;
    --ridda-black-color: #000000;
    --ridda-base-color: #717178;
    --ridda-gray-color: #717178;
    --ridda-extra-color: #f2eeeb;
    --ridda-bgc-black: #000000;
    --ridda-secondary-color: #241F21;
    
    /* Semantic Colors */
    --ridda-success-color: #28a745;
    --ridda-error-color: #dc3545;
    --ridda-warning-color: #ffc107;
    --ridda-info-color: #17a2b8;
    
    /* ===== GLACIAL INDIFFERENCE TYPOGRAPHY ===== */
    --ridda-font: "Glacial Indifference", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --ridda-heading-font: "Glacial Indifference", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ridda-primary-font: "Glacial Indifference", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ridda-secondary-font: "Glacial Indifference", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Font Weights */
    --ridda-font-light: 300;
    --ridda-font-normal: 400;
    --ridda-font-medium: 500;
    --ridda-font-bold: 700;
    
    /* Letter Spacing */
    --ridda-tracking-tight: -0.025em;
    --ridda-tracking-normal: 0;
    --ridda-tracking-wide: 0.025em;
    --ridda-tracking-wider: 0.05em;
    
    /* Spacing Scale */
    --ridda-space-xs: 0.25rem;
    --ridda-space-sm: 0.5rem;
    --ridda-space-md: 1rem;
    --ridda-space-lg: 1.5rem;
    --ridda-space-xl: 2rem;
    --ridda-space-2xl: 3rem;
    --ridda-space-3xl: 4rem;
    
    /* Border Radius */
    --ridda-radius-sm: 0.25rem;
    --ridda-radius-md: 0.5rem;
    --ridda-radius-lg: 0.75rem;
    --ridda-radius-xl: 1rem;
    
    /* Shadows */
    --ridda-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ridda-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --ridda-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    
    /* Transitions */
    --ridda-transition-fast: 0.15s ease-in-out;
    --ridda-transition-base: 0.3s ease-in-out;
    --ridda-transition-slow: 0.5s ease-in-out;
    
    /* Z-index Scale */
    --ridda-z-dropdown: 1000;
    --ridda-z-sticky: 1020;
    --ridda-z-fixed: 1030;
    --ridda-z-modal: 1040;
    --ridda-z-popover: 1050;
    --ridda-z-tooltip: 1060;
    
    /* Container Max Widths */
    --ridda-container-xs: 100%;
    --ridda-container-sm: 540px;
    --ridda-container-md: 720px;
    --ridda-container-lg: 960px;
    --ridda-container-xl: 1140px;
    --ridda-container-xxl: 1320px;
}

/* ===== CSS Reset & Base Styles ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    line-height: 1.15;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--ridda-font);
    font-weight: var(--ridda-font-normal);
    line-height: 1.6;
    color: var(--ridda-text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    overflow-x: hidden;
}

/* ===== Improved Layout System ===== */
.ridda-site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ridda-body-content {
    flex: 1 0 auto;
    width: 100%;
}

/* ===== Enhanced Container System ===== */
.container {
    width: 100%;
    max-width: var(--ridda-container-xl);
    margin: 0 auto;
    padding: 0 var(--ridda-space-md);
}

.container-fluid {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--ridda-space-md);
}

/* Responsive Container Fixes */
@media (min-width: 480px) {
    .container {
        max-width: var(--ridda-container-sm);
        padding: 0 var(--ridda-space-lg);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: var(--ridda-container-md);
        padding: 0 var(--ridda-space-xl);
    }
}

@media (min-width: 992px) {
    .container {
        max-width: var(--ridda-container-lg);
        padding: 0 var(--ridda-space-xl);
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: var(--ridda-container-xl);
        padding: 0 var(--ridda-space-xl);
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: var(--ridda-container-xxl);
        padding: 0 var(--ridda-space-xl);
    }
}

/* ===== Enhanced Typography Scale ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ridda-heading-font);
    font-weight: var(--ridda-font-bold);
    line-height: 1.2;
    color: var(--ridda-heading-color);
    margin-bottom: var(--ridda-space-md);
    letter-spacing: var(--ridda-tracking-tight);
    text-wrap: balance;
}

h1 { 
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.1;
}

h2 { 
    font-size: clamp(1.875rem, 4vw, 3rem);
}

h3 { 
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

h4 { 
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
}

h5 { 
    font-size: clamp(1.125rem, 2vw, 1.5rem);
}

h6 { 
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}

p {
    margin-bottom: var(--ridda-space-md);
    line-height: 1.7;
    font-size: 1.0625rem;
    font-weight: var(--ridda-font-normal);
    max-width: 65ch;
}

.lead {
    font-size: 1.25rem;
    font-weight: var(--ridda-font-normal);
    line-height: 1.6;
    color: var(--ridda-text-color);
}

/* ===== Improved Header Alignment ===== */
.default-header {
    width: 100%;
    background: var(--ridda-white-color);
    box-shadow: var(--ridda-shadow-sm);
    position: relative;
    z-index: var(--ridda-z-fixed);
}

.default-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    width: 100%;
}

.default-header .logo {
    padding: var(--ridda-space-sm) 0;
    display: flex;
    align-items: center;
}

.default-header .logo img {
    max-height: 40px;
    width: auto;
}

/* ===== Improved Main Content Area ===== */
.main-content {
    width: 100%;
    min-height: 60vh;
    padding: var(--ridda-space-2xl) 0;
}

.content-area {
    width: 100%;
}

/* ===== Improved Grid and Layout Systems ===== */
.ridda-grid {
    display: grid;
    gap: var(--ridda-space-xl);
    width: 100%;
}

.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

@media (min-width: 768px) {
    .grid-sidebar {
        grid-template-columns: 1fr 300px;
        gap: var(--ridda-space-2xl);
    }
    
    .grid-sidebar-left {
        grid-template-columns: 300px 1fr;
        gap: var(--ridda-space-2xl);
    }
}

/* ===== Improved Component Alignment ===== */

/* Pagination */
.ridda-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ridda-space-sm);
    margin: var(--ridda-space-2xl) 0;
    width: 100%;
}

.pagination {
    list-style: none;
    display: flex;
    gap: var(--ridda-space-sm);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.pagination li a,
.pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 var(--ridda-space-md);
    font-size: 0.875rem;
    font-weight: var(--ridda-font-bold);
    color: var(--ridda-text-color);
    text-decoration: none;
    background-color: var(--ridda-white-color);
    border: 1px solid var(--ridda-border-color);
    border-radius: var(--ridda-radius-md);
    transition: all var(--ridda-transition-base);
    font-family: var(--ridda-font);
}

/* Comments */
.comments-area {
    margin-top: var(--ridda-space-2xl);
    width: 100%;
}

.comments-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: var(--ridda-space-xl);
    text-align: left;
}

.comment-list {
    list-style: none;
    width: 100%;
}

.comment {
    padding: var(--ridda-space-lg);
    margin-bottom: var(--ridda-space-lg);
    background: var(--ridda-white-color);
    border: 1px solid var(--ridda-border-color);
    border-radius: var(--ridda-radius-md);
    width: 100%;
}

.comment-list ul.children {
    padding-left: var(--ridda-space-xl);
    margin-top: var(--ridda-space-lg);
    width: 100%;
}

@media (max-width: 768px) {
    .comment-list ul.children {
        padding-left: var(--ridda-space-lg);
    }
}

/* ===== Improved Form Alignment ===== */
.wp-block-search,
.widget_search .ridda-search-form {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.wp-block-search input[type="search"],
.widget_search .ridda-search-form input[type="search"] {
    width: 100%;
    height: 3.75rem;
    padding: 0 4.5rem 0 var(--ridda-space-lg);
    border: 1px solid var(--ridda-border-color);
    border-radius: var(--ridda-radius-md);
    font-size: 1rem;
    transition: all var(--ridda-transition-base);
    background: var(--ridda-white-color);
    font-family: var(--ridda-font);
}

/* ===== Improved Button Alignment ===== */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ridda-space-md);
    align-items: center;
}

.wp-block-button {
    margin: 0;
}

.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ridda-space-md) var(--ridda-space-xl);
    font-size: 1rem;
    font-weight: var(--ridda-font-bold);
    text-decoration: none;
    border-radius: var(--ridda-radius-md);
    transition: all var(--ridda-transition-base);
    border: 2px solid transparent;
    font-family: var(--ridda-font);
    text-align: center;
    white-space: nowrap;
}

/* ===== Improved Widget Alignment ===== */
.widget {
    margin-bottom: var(--ridda-space-2xl);
    width: 100%;
}

.widget-title {
    font-size: 1.25rem;
    margin-bottom: var(--ridda-space-lg);
    padding-bottom: var(--ridda-space-sm);
    border-bottom: 2px solid var(--ridda-primary-color);
    color: var(--ridda-heading-color);
}

.widget_categories ul {
    list-style: none;
    width: 100%;
}

.widget_categories ul li {
    margin-bottom: var(--ridda-space-sm);
    width: 100%;
}

.widget_categories ul li a {
    display: block;
    padding: var(--ridda-space-sm) var(--ridda-space-md);
    color: var(--ridda-text-color);
    text-decoration: none;
    transition: all var(--ridda-transition-base);
    border-radius: var(--ridda-radius-sm);
    border: 1px solid transparent;
}

.widget_categories ul li a:hover {
    color: var(--ridda-primary-color);
    background: var(--ridda-lighter-color);
    border-color: var(--ridda-border-color);
    transform: translateX(var(--ridda-space-sm));
}

/* ===== Improved Footer Alignment ===== */
.ridda-site-footer.default-footer {
    background: var(--ridda-black-color);
    color: var(--ridda-white-color);
    font-family: var(--ridda-font);
    margin-top: auto;
    width: 100%;
}

.ridda-site-footer .footer-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ridda-site-footer.default-footer p {
    padding: var(--ridda-space-xl) 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: var(--ridda-font-normal);
    width: 100%;
}

/* ===== Improved WordPress Blocks Alignment ===== */
.wp-block-group.has-background {
    padding: var(--ridda-space-xl);
    margin: var(--ridda-space-xl) 0;
    border-radius: var(--ridda-radius-md);
    width: 100%;
}

.wp-block-columns {
    display: flex;
    gap: var(--ridda-space-lg);
    width: 100%;
    margin-bottom: var(--ridda-space-lg);
}

.wp-block-column {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .wp-block-columns {
        flex-direction: column;
    }
}

.wp-block-image,
.wp-block-gallery {
    margin: var(--ridda-space-xl) 0;
    width: 100%;
}

.wp-block-image img,
.wp-block-gallery img {
    width: 100%;
    height: auto;
    border-radius: var(--ridda-radius-md);
}

/* ===== Improved Table Alignment ===== */
.wp-block-table {
    overflow-x: auto;
    margin: var(--ridda-space-xl) 0;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.wp-block-table table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    background: var(--ridda-white-color);
}

/* ===== Improved Quote Alignment ===== */
.blog-details-content blockquote,
.comment-content blockquote,
.wp-block-quote {
    background-color: var(--ridda-lighter-color);
    border-left: 4px solid var(--ridda-primary-color);
    padding: var(--ridda-space-xl);
    margin: var(--ridda-space-xl) 0;
    border-radius: 0 var(--ridda-radius-md) var(--ridda-radius-md) 0;
    font-style: italic;
    position: relative;
    width: 100%;
}

/* ===== Improved List Alignment ===== */
.blog-details-content ul,
.comments-area ul,
.blog-details-content ol,
.comments-area ol {
    margin: 0 0 var(--ridda-space-lg) var(--ridda-space-lg);
    padding: 0;
    width: 100%;
}

.blog-details-content ul li,
.comments-area ul li,
.blog-details-content ol li,
.comments-area ol li {
    margin-bottom: var(--ridda-space-sm);
    line-height: 1.6;
    padding-left: var(--ridda-space-sm);
}

/* ===== Enhanced Utility Classes for Alignment ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.align-center { 
    display: flex;
    align-items: center;
    justify-content: center;
}

.align-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.align-start {
    display: flex;
    align-items: flex-start;
}

.align-end {
    display: flex;
    align-items: flex-end;
}

.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }

/* ===== Responsive Alignment Fixes ===== */
@media (max-width: 767.98px) {
    .container {
        padding: 0 var(--ridda-space-md);
    }
    
    .default-header .header-inner {
        flex-direction: column;
        gap: var(--ridda-space-md);
        padding: var(--ridda-space-md) 0;
    }
    
    .default-header .logo {
        justify-content: center;
        text-align: center;
    }
    
    .wp-block-buttons {
        justify-content: center;
    }
    
    .wp-block-button__link {
        width: 100%;
        text-align: center;
    }
    
    .comments-title,
    .widget-title {
        text-align: center;
    }
    
    .comment-list ul.children {
        padding-left: var(--ridda-space-md);
    }
    
    .ridda-pagination {
        gap: var(--ridda-space-xs);
    }
    
    .pagination li a,
    .pagination li span {
        min-width: 2.25rem;
        height: 2.25rem;
        padding: 0 var(--ridda-space-sm);
    }
}

@media (max-width: 575.98px) {
    .container {
        padding: 0 var(--ridda-space-sm);
    }
    
    .main-content {
        padding: var(--ridda-space-xl) 0;
    }
    
    .wp-block-group.has-background {
        padding: var(--ridda-space-lg);
    }
    
    .blog-details-content blockquote,
    .comment-content blockquote,
    .wp-block-quote {
        padding: var(--ridda-space-lg);
        margin: var(--ridda-space-lg) 0;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    
    p {
        font-size: 1rem;
    }
}

/* ===== Print Styles ===== */
@media print {
    .container {
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .default-header,
    .ridda-site-footer,
    .widget,
    .pagination,
    .comment-reply-link {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: #000;
        page-break-after: avoid;
    }
    
    p {
        max-width: none;
    }
}

/* ===== Loading States ===== */
.is-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--ridda-border-color);
    border-top: 2px solid var(--ridda-primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== Focus Styles for Better Accessibility ===== */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.wp-block-button__link:focus {
    outline: 2px solid var(--ridda-primary-color);
    outline-offset: 2px;
    border-radius: var(--ridda-radius-sm);
}

/* ===== Selection Styles ===== */
::selection {
    background-color: var(--ridda-primary-color);
    color: var(--ridda-heading-color);
}

::-moz-selection {
    background-color: var(--ridda-primary-color);
    color: var(--ridda-heading-color);
}