/*
Theme Name: Sullam Al-Amal
Theme URI: https://sullam-alamal.com
Author: Sullam Al-Amal
Author URI: https://sullam-alamal.com
Description: قالب ووردبريس احترافي لشركة سلم الأمل لكشف تسربات المياه، عزل الأسطح والخزانات، الترميمات، رش المبيدات وتسليك المجاري. يدعم اللغة العربية بالكامل مع أزرار اتصال وواتساب عائمة وألوان قابلة للتخصيص من لوحة التحكم.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sullam-alamal
Tags: rtl-language-support, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, business
*/

/* ====== Reset & Base ====== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
  direction: rtl;
  text-align: right;
  line-height: 1.8;
  color: #1f2937;
  background: #f9fafb;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary-color, #0ea5e9); text-decoration: none; transition: all .25s ease; }
a:hover { color: var(--secondary-color, #0369a1); }

:root {
  --primary-color: #0ea5e9;
  --secondary-color: #0369a1;
  --accent-color: #f59e0b;
  --dark-color: #0f172a;
  --light-color: #f9fafb;
  --whatsapp-color: #25D366;
  --call-color: #16a34a;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ====== Top Bar ====== */
.top-bar {
  background: var(--dark-color);
  color: #fff;
  padding: 10px 0;
  font-size: 14px;
}
.top-bar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.top-bar a { color: #fff; margin-left: 15px; display: inline-flex; align-items: center; gap: 6px; }
.top-bar a:hover { color: var(--accent-color); }

/* ====== Header ====== */
.site-header {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  position: sticky; top: 0; z-index: 999;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.site-branding h1 { font-size: 26px; color: var(--primary-color); margin: 0; }
.site-branding p { font-size: 13px; color: #6b7280; margin: 0; }
.site-branding img { max-height: 70px; }

.main-nav ul { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.main-nav a {
  padding: 10px 16px;
  color: var(--dark-color);
  font-weight: 600;
  border-radius: 8px;
}
.main-nav a:hover, .main-nav .current-menu-item a {
  background: var(--primary-color); color: #fff;
}

.header-cta { display: flex; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 50px; font-weight: 700;
  border: none; cursor: pointer; font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.btn-call { background: var(--call-color); color: #fff !important; }
.btn-whatsapp { background: var(--whatsapp-color); color: #fff !important; }
.btn-primary { background: var(--primary-color); color: #fff !important; }
.btn-accent { background: var(--accent-color); color: #fff !important; }
.btn-outline { background: transparent; color: #fff !important; border: 2px solid #fff; }

.mobile-toggle { display: none; background: var(--primary-color); color: #fff; border: none; padding: 10px 14px; border-radius: 8px; font-size: 20px; cursor: pointer; }

/* ====== Hero ====== */
.hero {
  background: linear-gradient(135deg, rgba(14,165,233,.92), rgba(3,105,161,.92)), url('https://images.unsplash.com/photo-1581094288338-2314dddb7ece?w=1600') center/cover;
  color: #fff;
  padding: 110px 20px 130px;
  text-align: center;
  position: relative;
}
.hero h2 { font-size: 56px; margin-bottom: 18px; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.hero p { font-size: 22px; margin-bottom: 32px; max-width: 850px; margin-inline: auto; opacity: .95; }
.hero .btn { font-size: 18px; padding: 16px 32px; }
.hero-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }

.hero-badges { display: flex; justify-content: center; gap: 30px; margin-top: 50px; flex-wrap: wrap; }
.hero-badge { background: rgba(255,255,255,.15); backdrop-filter: blur(10px); padding: 18px 24px; border-radius: 12px; }
.hero-badge .num { font-size: 32px; font-weight: 800; color: var(--accent-color); }
.hero-badge .label { font-size: 14px; }

/* ====== Sections ====== */
.section { padding: 80px 0; }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h2 { font-size: 40px; color: var(--dark-color); margin-bottom: 12px; position: relative; display: inline-block; padding-bottom: 14px; }
.section-title h2::after { content: ''; position: absolute; bottom: 0; right: 50%; transform: translateX(50%); width: 80px; height: 4px; background: var(--accent-color); border-radius: 2px; }
.section-title p { color: #6b7280; font-size: 18px; max-width: 700px; margin: 0 auto; }

/* ====== Services Grid ====== */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.service-card {
  background: #fff; border-radius: 16px; padding: 36px 26px; text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: all .3s ease; border-top: 4px solid var(--primary-color);
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(14,165,233,.2); border-top-color: var(--accent-color); }
.service-icon {
  width: 80px; height: 80px; margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 36px;
}
.service-card h3 { color: var(--dark-color); margin-bottom: 12px; font-size: 22px; }
.service-card p { color: #6b7280; margin-bottom: 18px; }
.service-card .service-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.service-card .btn { padding: 9px 16px; font-size: 13px; }

/* ====== Features Strip ====== */
.features-strip { background: var(--dark-color); color: #fff; padding: 70px 0; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; text-align: center; }
.feature-item .icon { font-size: 48px; color: var(--accent-color); margin-bottom: 12px; }
.feature-item h4 { font-size: 20px; margin-bottom: 8px; }
.feature-item p { color: #cbd5e1; font-size: 14px; }

/* ====== About ====== */
.about-section { background: #fff; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-grid img { border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.about-text h2 { font-size: 36px; color: var(--dark-color); margin-bottom: 18px; }
.about-text p { color: #4b5563; margin-bottom: 14px; font-size: 16px; }
.about-list { list-style: none; margin: 20px 0; }
.about-list li { padding: 8px 0; padding-right: 30px; position: relative; color: #374151; }
.about-list li::before { content: '✓'; position: absolute; right: 0; top: 8px; width: 22px; height: 22px; background: var(--call-color); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; }

/* ====== CTA Banner ====== */
.cta-banner {
  background: linear-gradient(135deg, var(--accent-color), #d97706);
  color: #fff; padding: 60px 20px; text-align: center;
}
.cta-banner h2 { font-size: 36px; margin-bottom: 14px; }
.cta-banner p { font-size: 18px; margin-bottom: 26px; }
.cta-banner .btn { background: #fff; color: var(--dark-color) !important; }
.cta-banner .btn:hover { background: var(--dark-color); color: #fff !important; }

/* ====== Latest Posts ====== */
.posts-section { background: #f3f4f6; }
.posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.post-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  transition: all .3s ease;
  display: flex; flex-direction: column;
}
.post-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,.12); }
.post-thumb { height: 220px; overflow: hidden; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-thumb img { transform: scale(1.08); }
.post-content { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.post-meta { font-size: 13px; color: #6b7280; margin-bottom: 10px; }
.post-meta span { margin-left: 12px; }
.post-content h3 { font-size: 20px; margin-bottom: 10px; color: var(--dark-color); }
.post-content h3 a { color: inherit; }
.post-content h3 a:hover { color: var(--primary-color); }
.post-excerpt { color: #6b7280; font-size: 15px; margin-bottom: 16px; flex: 1; }
.read-more { color: var(--primary-color); font-weight: 700; }

/* ====== Testimonials ====== */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.testimonial-card { background: #fff; padding: 30px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.06); position: relative; }
.testimonial-card::before { content: '"'; position: absolute; top: 10px; right: 20px; font-size: 80px; color: var(--primary-color); opacity: .15; font-family: Georgia; }
.testimonial-card p { color: #4b5563; margin-bottom: 18px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-author .avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--primary-color); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.testimonial-author strong { display: block; color: var(--dark-color); }
.testimonial-author span { font-size: 13px; color: #6b7280; }

/* ====== Contact Section ====== */
.contact-section { background: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact-info-box { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: #fff; padding: 40px; border-radius: 16px; }
.contact-info-box h3 { font-size: 28px; margin-bottom: 20px; }
.contact-info-item { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-size: 16px; }
.contact-info-item .icon { width: 44px; height: 44px; background: rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.contact-info-item a { color: #fff; }
.contact-buttons-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.contact-buttons-stack .btn { justify-content: center; }

/* ====== Floating Buttons ====== */
.floating-buttons {
  position: fixed; bottom: 25px; left: 25px;
  display: flex; flex-direction: column; gap: 14px; z-index: 9999;
}
.floating-btn {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff !important; font-size: 30px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: all .3s ease;
  position: relative;
}
.floating-btn:hover { transform: scale(1.12); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.floating-btn.whatsapp { background: var(--whatsapp-color); }
.floating-btn.call { background: var(--call-color); animation: ringPulse 2s infinite; }
.floating-btn .label-tip {
  position: absolute; right: 75px; background: var(--dark-color); color: #fff;
  padding: 6px 12px; border-radius: 6px; font-size: 13px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: all .25s ease;
}
.floating-btn:hover .label-tip { opacity: 1; right: 80px; }
@keyframes ringPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(22,163,74,.5), 0 0 0 0 rgba(22,163,74,.5); }
  50% { box-shadow: 0 6px 20px rgba(22,163,74,.5), 0 0 0 16px rgba(22,163,74,0); }
}

/* ====== Footer ====== */
.site-footer { background: var(--dark-color); color: #cbd5e1; padding: 60px 0 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; padding-bottom: 40px; }
.footer-col h4 { color: #fff; font-size: 18px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-color); display: inline-block; }
.footer-col ul { list-style: none; }
.footer-col ul li { padding: 6px 0; }
.footer-col ul li a { color: #cbd5e1; }
.footer-col ul li a:hover { color: var(--accent-color); padding-right: 6px; }
.footer-bottom { border-top: 1px solid #1e293b; padding: 20px 0; text-align: center; font-size: 14px; }
.footer-social { display: flex; gap: 12px; margin-top: 12px; }
.footer-social a { width: 38px; height: 38px; background: #1e293b; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--primary-color); }

/* ====== Single Post / Page ====== */
.single-content { background: #fff; padding: 50px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.06); margin: 40px 0; }
.single-content h1 { font-size: 36px; color: var(--dark-color); margin-bottom: 16px; }
.single-content h2, .single-content h3 { color: var(--dark-color); margin: 24px 0 14px; }
.single-content p { margin-bottom: 16px; color: #374151; font-size: 17px; }
.single-content img { border-radius: 12px; margin: 20px 0; }
.entry-meta { color: #6b7280; margin-bottom: 24px; font-size: 14px; }

/* ====== Archive ====== */
.page-header { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: #fff; padding: 70px 0; text-align: center; }
.page-header h1 { font-size: 42px; }
.page-header p { font-size: 18px; margin-top: 10px; opacity: .9; }

/* ====== Pagination ====== */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 40px 0; }
.pagination a, .pagination span { padding: 10px 16px; background: #fff; border-radius: 8px; color: var(--dark-color); font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.pagination .current { background: var(--primary-color); color: #fff; }

/* ====== Responsive ====== */
@media (max-width: 900px) {
  .mobile-toggle { display: block; }
  .main-nav { display: none; position: absolute; top: 100%; right: 0; left: 0; background: #fff; padding: 20px; box-shadow: 0 8px 20px rgba(0,0,0,.1); }
  .main-nav.active { display: block; }
  .main-nav ul { flex-direction: column; }
  .header-cta { display: none; }
  .hero h2 { font-size: 36px; }
  .hero p { font-size: 17px; }
  .section-title h2 { font-size: 30px; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .single-content { padding: 24px; }
}

/* ====== Single Post Content & Images ====== */
.single-content {
  background: #fff;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  margin: 30px auto;
  max-width: 900px;
  line-height: 2;
  font-size: 17px;
  color: #1f2937;
}
.single-content .entry-meta {
  font-size: 14px; color: #6b7280;
  padding-bottom: 16px; margin-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}
.single-content .entry-meta i { color: var(--primary-color); margin-left: 6px; }

/* Featured image — nicely sized with fixed aspect ratio */
.post-featured-image {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
  border-radius: 14px;
  margin: 0 auto 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  background: #f3f4f6;
}
.post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

/* All images inside article content */
.single-content img,
.single-content .wp-block-image img,
.single-content figure img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px;
  margin: 20px auto;
  display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.single-content figure {
  margin: 24px auto;
  text-align: center;
}
.single-content figure figcaption {
  font-size: 14px;
  color: #6b7280;
  margin-top: 10px;
  font-style: italic;
}
.single-content .alignleft   { float: right; margin: 10px 0 15px 20px; max-width: 50%; }
.single-content .alignright  { float: left;  margin: 10px 20px 15px 0; max-width: 50%; }
.single-content .aligncenter { display: block; margin: 20px auto; }
.single-content .alignwide,
.single-content .alignfull   { max-width: 100%; margin: 25px 0; }

.single-content h2 { font-size: 28px; margin: 32px 0 16px; color: var(--dark-color); border-right: 4px solid var(--primary-color); padding-right: 14px; }
.single-content h3 { font-size: 22px; margin: 26px 0 14px; color: var(--secondary-color); }
.single-content p  { margin-bottom: 18px; }
.single-content ul, .single-content ol { margin: 16px 30px 20px; }
.single-content li { margin-bottom: 8px; }
.single-content blockquote {
  border-right: 4px solid var(--primary-color);
  background: #f0f9ff;
  padding: 18px 24px; margin: 22px 0;
  border-radius: 8px; color: #374151;
}
.single-content a { color: var(--primary-color); text-decoration: underline; }

/* Archive / index post-card images keep fixed aspect-ratio nicely */
.post-thumb { aspect-ratio: 16/10; height: auto; }

/* Responsive */
@media (max-width: 768px) {
  .single-content { padding: 22px; font-size: 16px; }
  .post-featured-image { max-height: 280px; }
  .post-featured-image img { max-height: 280px; }
  .single-content h2 { font-size: 22px; }
  .single-content .alignleft,
  .single-content .alignright { float: none; max-width: 100%; margin: 18px auto; }
}