/*
Theme Name: MOBINEWS
Theme URI: https://elhachimi.net
Author: BRAHIM ELHACHIMI
Author URI: https://elhachimi.net
Description: mobi news is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. bhmnews comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP:7.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elhachimi
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news, bhmnews, brahim elhachimi , mobinews
*/
body {
  font-family: 'Tajawal', sans-serif;
}

body.light-mode {
    background-color: #ffffff;
    color: #000000;
  }
  
  body.dark-mode {
    background-color: #000000;
    color: #ffffff;
  }
  
  /* إضافة أنماط إضافية حسب الحاجة */
  /* Single Post Content*/
main.post {
  max-width:100%;
  margin: 0 auto 2rem auto;
  padding: 0 1rem;
}
h1.post-title  {
  position: realtive;
  padding: 1em 0;
  margin: 0;
  text-align:center;
  color: #553c9a;
}
section.post-mata p {
  max-width: 768px;
  margin: 1rem auto;
   }
.ptitle-image {
  height: 600px;
  max-width: 100%;
  border-radius:5%;
  display: block;
  margin: 2rem auto 0 auto;
}
p.categories, span a 
{color: white;
text-decoration: none;}
p.categories span  { 
  background-color: #553c9a; 
}
span a:hover {
  color: #c1afd4;
}
main.post .content 
{
  max-width: 768px;
  margin: 3rem auto;
}
main.post .content figure {
  margin: 1rem 0;
  text-align: center;
}
main.post .content figure img {
  max-width: 100%;
  border-radius:5%;
  display: block;
  
}
main.post .content figure figcaption {
  text-align: center;
  color: #553c9a;
}
main.post .social {
 display: flex;
  justify-content: center;
  align-items: center;
  border-top: 2px solid #553c9a;
  justify-content: center;
  gap: 1rem;
  font-size: 1rem;
}
.icon {
  stroke: white;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: #553c9a;
  width: 50px;
  height: 50px;
}
main.post .social a:hover {
  transform: scale(1.1);
}
main.post .social a.social-twitter:hover .icon {
  stroke: #c1afd4;
}
main.post .social a.social-linkedin:hover .icon {
  stroke: #c1afd4;
}



.inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-gray-100 dark:bg-slate-800 hover:opacity-80 {

  .font-medium {
    font-weight: 500;
}
.text-xs {
    font-size: .75rem;
    line-height: 1rem;
}
.py-1\.5 {
    padding-top: .375rem;
    padding-bottom: .375rem;
}
.px-3 {
    padding-left: .75rem;
    padding-right: .75rem;
}
.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.rounded-full {
    border-radius: 9999px;
}
.gap-1\.5 {
    gap: .375rem;
}
.items-center {
    align-items: center;
}
.inline-flex {
    display: inline-flex;
}
a {
    color: inherit;
    text-decoration: inherit;
}
*, ::backdrop, :after, :before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f680;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}

*, :after, :before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
}

}

.tags-cloud my-3 {

  margin-top: .75rem;
    margin-bottom: .75rem;
}
*, ::backdrop, :after, :before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f680;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}

*, :after, :before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}



/* أضف هذا CSS إلى ملف style.css الخاص بالقالب */
.thumbnail {
  height: 12rem; /* يمكنك تعديل الارتفاع حسب الحاجة */
  width: 100%;
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* لضمان أن الصورة تغطي كامل المساحة دون تشويه */
}

#post-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.item-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}