/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/**
 * ============================================================================
 * AMLAK CUSTOM THEME STYLES
 * ============================================================================
 * Developer: Abdelrhman Mohamed
 * Updated by: Gemini AI Partner
 * Last Updated: 2025-12-31
 * Version: 2.1.0 (Added Dark Mode & Menu Enhancements)
 * ============================================================================
 */

/* ==========================================================================
   1. CSS VARIABLES
   ========================================================================== */

:root {
  /* 1.1 Base Colors */
  --primary-base: var(--accent);      /* #b93434 */
  --contrast-base: var(--contrast);   /* #000000 */
  --contrast-2-base: var(--contrast-2); /* #5b5b5b */
  --white-base: var(--base);          /* #ffffff */
  --accent-2-base: var(--accent-2);   /* #ffebeb */

  /* 1.2 Red Shades */
  --red-darker: #761315;
  --red-dark: #a02d2d;
  --red-primary: #b93434;
  --red-light: #d45555;
  --red-lighter: #ffebeb;
  --red-pale: #fff5f5;

  /* 1.3 Gray Shades */
  --gray-darkest: #000000;
  --gray-darker: #1a1a1a;
  --gray-dark: #333333;
  --gray-medium: #555555;
  --gray-light: #777777;
  --gray-lighter: #999999;
  --gray-pale: #cccccc;

  /* 1.4 Semantic Colors */
  --primary-red: var(--red-primary);
  --primary-dark: var(--gray-darker);

  /* Status Colors */
  --success-dark: #1e7e34;
  --success: #28a745;
  --success-light: #d4edda;

  --warning-dark: #e8650e;
  --warning: #fd7e14;
  --warning-light: #fff3cd;

  --info-dark: #138496;
  --info: #17a2b8;
  --info-light: #d1ecf1;

  --danger-dark: #c82333;
  --danger: #dc3545;
  --danger-light: #f8d7da;

  /* 1.5 Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-light: #f9f9f9;
  --bg-lighter: #fafafa;
  --background: var(--bg-primary);
  --background-light: var(--bg-light);
  --background-gray: var(--bg-secondary);
  --background-section: var(--bg-lighter);

  /* 1.6 Text Colors */
  --text-primary: var(--gray-dark);
  --text-secondary: var(--gray-medium);
  --text-muted: var(--gray-light);
  --text-light: var(--gray-lighter);
  --text-link: var(--red-primary);
  --text-link-hover: var(--red-dark);

  /* 1.7 Border Colors */
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;
  --border-dark: #9ca3af;

  /* 1.8 Button Colors */
  --btn-primary: var(--red-primary);
  --btn-primary-hover: var(--red-dark);
  --btn-primary-active: var(--red-darker);

  --btn-secondary: #6c757d;
  --btn-secondary-hover: #5a6268;
  --btn-secondary-active: #545b62;

  --btn-success: var(--success);
  --btn-success-hover: var(--success-dark);

  --btn-info: #007cba;
  --btn-info-hover: #005a87;

  --btn-warning: var(--warning);
  --btn-warning-hover: var(--warning-dark);

  --btn-danger: var(--danger);
  --btn-danger-hover: var(--danger-dark);

  /* 1.9 Social Media Colors */
  --social-x: #000000;
  --social-x-hover: #333333;
  --social-linkedin: #0077b5;
  --social-linkedin-hover: #005885;
  --social-phone: #28a745;
  --social-phone-hover: #218838;
  --social-email: #dc3545;
  --social-email-hover: #c82333;
  --social-website: #17a2b8;
  --social-website-hover: #138496;

  /* 1.10 Shadows */
  --shadow-light: 0 2px 5px rgba(0, 0, 0, 0.03);
  --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.05);
  --shadow-dark: 0 8px 25px rgba(0, 0, 0, 0.15);

  /* 1.11 Border Radius */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;

  /* 1.12 Typography */
  --font-h1: 32px;
  --font-h2: 24px;
  --font-h3: 18.72px;
  --font-h4: 16px;
  --font-h5: 13.28px;
  --font-h6: 10.72px;

  --font-xs: 10px;
  --font-sm: 12px;
  --font-base: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 22px;
  --font-3xl: 28px;
  --font-4xl: 36px;

  --font-button: inherit;
  --font-nav: 16px;
  --font-nav-sub: 14px;
  --font-caption: 12px;
  --font-label: 14px;
  --font-input: 16px;
  --font-meta: 13px;
  --font-breadcrumb: 14px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;
}

/* ==========================================================================
   2. BASE & RESET STYLES
   ========================================================================== */

ul {
  margin: 0 0 0.5em 0.5em;
}

button,
.form-submit .submit {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ==========================================================================
   3. GENERATEPRESS OVERRIDES
   ========================================================================== */

.site-content {
  display: flex;
  width: 100%;
}
.nav-align-right .inside-navigation {
justify-content: space-between;
}
.container.grid-container {
  width: auto;
  display: flex;
  align-content: center;
  justify-content: center;
  padding-bottom: 40px;
}

.gp-modal__container {
  overflow-y: auto;
}

.gp-search-modal .gp-modal__overlay {
  padding-top: 15vh;
}

/* Search Results */
.search-results .page-header .page-title {
  font-size: var(--font-4xl);
  text-transform: uppercase;
  border-bottom: 2px solid var(--contrast-base);
}

/* Single Post */
.single .rt-label,
.single-post .rt-label,
.single .rt-time,
.single-post .rt-time {
  display: none !important;
}

/* Login */
.login-message {
  padding: 40px;
  box-shadow: 0px 0px 1px 0px rgba(26, 26, 26, 0.47);
}

/* Content Width */
.entry-content .alignwide {
  margin-left: -40px;
  width: 100%;
  max-width: calc(100% + 80px);
}

.dynamic-entry-content {
  text-align: justify;
  max-width: 80ch;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* جعل الروابط داخل المحتوى عريضة تلقائياً */
.dynamic-entry-content a {
    font-weight: var(--font-weight-bold, 700) !important;
    text-decoration: none; /* اختياري: لإزالة الخط تحت الرابط إذا أردت */
    transition: color 0.2s ease-in-out;
}

/* إضافة تأثير بسيط عند تمرير الماوس */
.dynamic-entry-content a:hover {
    text-decoration: underline;
    color: var(--text-link-hover);
}
/* ==========================================================================
   4. NAVIGATION & HEADER
   ========================================================================== */

/* Main Navigation */
.main-navigation a {
  color: var(--gray-darkest) !important;
}

.main-navigation a:hover {
  color: var(--text-link) !important;
}

/* Sub-menu Styles (Newly Added) */
.main-navigation .sub-menu li a {
    font-size: 13px;
    padding: 8px 15px !important;
    line-height: 1.4;
    font-weight: 500;
}

/* Block Navigation Labels */
.wp-block-navigation-item__label:hover {
    color: var(--accent);
}

/* Secondary Navigation */
#secondary-navigation {
  border-bottom: solid 1px var(--border-light);
}

#menu-sec > .menu-item > a {
  font-size: var(--font-nav);
  font-weight: var(--font-weight-medium);
}

.secondary-navigation .main-nav ul li a {
  font-family: inherit;
  font-weight: var(--font-weight-bold) !important;
  text-transform: none;
  font-size: var(--font-meta);
  padding-left: 20px;
  padding-right: 20px;
  line-height: 40px;
}

/* Menu Bar Items */
.menu-bar-items {
  flex-direction: row-reverse;
  margin-right: 5px !important;
}

/* Slideout Menu */
#generate-slideout-menu .slideout-menu li {
  float: none;
  width: 100%;
  clear: both;
  text-align: right !important;
}

.slideout-navigation button.slideout-exit {
  display: flex;
}

/* ==========================================================================
   5. SIDEBAR & LAYOUT
   ========================================================================== */

.sidebar {
  margin-top: 40px;
  margin-left: 0;
}

#right-sidebar {
  margin-left: 0px !important;
  width: 25%;
}

#left-sidebar {
  margin-right: 0px;
  margin-left: 0px !important;
  width: 25%;
}

/* ==========================================================================
   6. GALLERY & MEDIA
   ========================================================================== */

.arc-img-post.wp-post-image {
  height: 100%;
}

.img-ratio-3x2 {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* PDF Gallery */
.my-custom-pdf-gallery .gallery {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px;
}

.my-custom-pdf-gallery .gallery-item {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: var(--shadow-medium);
  padding: 15px;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  width: auto !important;
}

.my-custom-pdf-gallery .gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.my-custom-pdf-gallery .gallery-icon {
  margin-bottom: 15px;
}

.my-custom-pdf-gallery .gallery-icon img {
  max-width: 100%;
  height: auto;
  display: block;
}

.my-custom-pdf-gallery .gallery-caption {
  font-size: 1em;
  font-weight: bold;
  color: var(--text-primary);
  margin-top: auto;
}

.my-custom-pdf-gallery .gallery-caption a {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 5px 0;
}

.my-custom-pdf-gallery .gallery-caption a:hover {
  color: var(--btn-info);
  text-decoration: underline;
}

/* df-popup fix */
.df-popup-thumb {
	width: auto !important;
	margin: 10px auto !important;
    display: block !important;
}

/* ==========================================================================
   7. BLOCKS & COMPONENTS
   ========================================================================== */

/* Tag Cloud */
.wp-block-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
}

.wp-block-tag-cloud a {
  border-radius: var(--border-radius-sm);
  padding: 4px 10px;
}

.site-footer .wp-block-tag-cloud a {
  background-color: var(--contrast-base);
  color: var(--white-base);
}

.sidebar .wp-block-tag-cloud a {
  background-color: var(--white-base);
  color: var(--contrast-base);
  border: 1px solid var(--contrast-base);
}

.wp-block-tag-cloud a:hover {
  background-color: var(--white-base);
  color: var(--contrast-base);
}

/* Latest Posts */
.wp-block-latest-posts__post-author,
.wp-block-latest-posts__post-date {
  display: block;
  font-size: var(--font-meta);
  color: var(--text-link);
}

/* Blockspare */
.blockspare-banner-wrapper {
  --gap: 10px;
  margin-top: 0px !important;
  margin-bottom: 30px;
  margin-left: 0px;
  margin-right: 0px;
}

.blockspare-posts-block-latest-post-carousel-wrap .blockspare-posts-block-post-single .blockspare-posts-block-post-content .blockspare-posts-block-post-grid-byline,
.blockspare-posts-block-latest-post-wrap .blockspare-posts-block-post-single .blockspare-posts-block-post-content .blockspare-posts-block-post-grid-byline {
  display: revert;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
}

.blockspare-posts-block-post-grid-date {
  font-weight: 600 !important;
  font-size: 13.28px !important;
  line-height: 1.3em !important;
  color: var(--accent) !important;
}

.blockspare-posts-block-latest-post-wrap.blockspare-posts-block-is-express.blockspare-posts-block-express-grid-layout-2 {
  display: grid;
  direction: ltr;
}

body.rtl .blockspare-posts-block-latest-post-wrap .blockspare-posts-block-post-single .blockspare-posts-block-post-content .blockspare-posts-block-post-grid-byline .blockspare-posts-block-post-grid-date i {
  margin-right: 0;
  margin-left: 5px;
  display: none;
}

/* Reading Time */
.span-reading-time {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}

.span-reading-time::before {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-size: 16px;
  margin-left: 5px;
  margin-right: 5px;
}

/* Social Icons */
.is-style-logos-only {
  margin: 2px 2px !important;
}

/* ==========================================================================
   8. UTILITY CLASSES
   ========================================================================== */

.border-gray {
  border-color: var(--contrast);
}

.border-rad-sm {
  border-radius: var(--border-radius-sm);
}

.long-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.li-separetd li {
  border-bottom: 2px dashed;
  margin-bottom: 15px;
}

.prives-list {
  display: flex;
  gap: 15px;
  flex-direction: column;
}

.separator--dotted {
  background: linear-gradient(90deg, var(--white-base) 2px, #0000 1%) 50%,
    linear-gradient(var(--white-base) 2px, #0000 1%) 50%, var(--gray-darkest);
  background-position: 0 0;
  background-size: 3px 3px;
  height: 9px;
  width: 100%;
}

.mb-slider {
  display: none;
}



/* ==========================================================================
   9. RESPONSIVE DESIGN (Mobile First)
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.1 Extra Small Devices (max-width: 575px) - Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .my-custom-pdf-gallery .gallery-item {
    flex: 0 0 calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 auto 20px auto !important;
  }
}

/* --------------------------------------------------------------------------
   9.2 Medium Devices (max-width: 767px) - Mobile & Small Tablets
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Layout */
  #right-sidebar, #left-sidebar {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: none !important;
  }

  #secondary-navigation {
    display: none !important;
  }

  /* Mobile Header Layout */
  #mobile-header {
    display: block !important;
    width: 100% !important;
    border-bottom: solid 1px rgba(191, 200, 208, 0.58) !important;
  }

  #mobile-header .inside-navigation {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 5px 5px;
    flex-direction: row-reverse;
  }

  #mobile-header .site-logo {
    order: 2;
    margin: 0;
    display: flex;
    justify-content: center;
  }

  #mobile-header .menu-toggle {
    order: 3;
    flex-shrink: 0;
    margin-left: 15px;
  }

  #mobile-header .menu-bar-items .menu-bar-item:first-child {
    order: 1;
    flex-shrink: 0;
    margin-right: 15px;
  }

  /* Components */
  .mb-slider { display: block; margin-bottom: 15px; }
  .one-container .site-content { padding: 10px 0px 40px 0px; }

  /* ------------------------------------------
     MOBILE ONLY DARK MODE (New Force Section)
     ------------------------------------------ */
  @media (prefers-color-scheme: dark) {
    :root {
        --contrast: #ffffff;
        --contrast-2: #b0b0b0;
        --base: #121212;
        --accent-2: #1e1e1e;
    }

    body {
        background-color: var(--base);
        color: var(--contrast);
    }

    .main-navigation a,
    .blockspare-d1eb891c-f69d-4 .bs-flash-wrap .bs-exclusive-posts .bs-exclusive-slides a .bs-post-title,
    .blockspare-e8da4e4b-b265-4 .bs-flash-wrap .bs-exclusive-posts .bs-exclusive-slides a .bs-post-title ,
.blockspare-b2b09a0f-2f0a-4 .bs-flash-wrap .bs-exclusive-posts .bs-exclusive-slides a .bs-post-title{
        color: var(--contrast) !important;
    }

    .gb-container-4f04a80a, .multi-select-trigger, .options-header, 
    .clear-filters-btn, .load-more-btn {
        background-color: var(--gray-dark) !important;
    }
.site-logo.mobile-header-logo img {
            content: url('http://test.amlak.net.sa/wp-content/uploads/2026/01/logo-amlak-scaled.png') !important;
            
            /* منع المتصفح والقالب من تغيير الألوان */
            filter: none !important;
            -webkit-filter: none !important;
            backdrop-filter: none !important;
            
            /* الحفاظ على الأبعاد */
            max-width: 232px;
            height: auto;
            display: block;
        }

        /* التأكد من عدم وجود خلفية سوداء إضافية خلف اللوجو */
        .site-logo.mobile-header-logo a {
            filter: none !important;
            -webkit-filter: none !important;
            background: transparent !important;
        }
    .clear-filters-btn:hover, .load-more-btn:hover {
        background-color: var(--accent) !important;
    }

    .heateor_sss_horizontal_sharing .heateor_sss_svg,
    .heateor_sss_standard_follow_icons_container .heateor_sss_svg {
        background-color: transparent !important;
        border-width: 0px;
    }
  }
}

/* --------------------------------------------------------------------------
   9.3 Large Devices (min-width: 768px+) - Tablet & Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .sidebar {
    margin-left: 40px;
    margin-top: 0;
  }

  .inside-navigation .navigation-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .is-sticky {
    position: sticky;
    top: 112px;
  }

  .my-custom-pdf-gallery .gallery-item {
    flex: 0 0 calc(50% - 20px) !important;
    max-width: calc(50% - 20px) !important;
  }
}

@media (min-width: 992px) {
  .my-custom-pdf-gallery .gallery-item {
    flex: 0 0 calc(33.333% - 20px) !important;
    max-width: calc(33.333% - 20px) !important;
  }
}