/*
Theme Name: ContractorKhalid
Theme URI: https://contractorkhalid.com/
Author: Contractor Khalid
Author URI: https://contractorkhalid.com/
Description: Arabic RTL WordPress theme for a Kuwait contractor business specializing in wooden, steel, aluminium and decorative doors. Includes four ready pages: Home, About, Doors & Services, and Contact.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: contractorkhalid
Tags: custom-logo, rtl-language-support, portfolio, one-column, two-columns, featured-images, custom-menu
*/

:root {
  --ck-bg: #fffaf3;
  --ck-surface: #ffffff;
  --ck-ink: #1f160f;
  --ck-muted: #6f6259;
  --ck-primary: #9a5b23;
  --ck-primary-dark: #653913;
  --ck-accent: #0f766e;
  --ck-gold: #d8a647;
  --ck-border: #eadccd;
  --ck-shadow: 0 20px 55px rgba(50, 32, 19, 0.12);
  --ck-radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  direction: rtl;
  text-align: right;
  background: var(--ck-bg);
  color: var(--ck-ink);
  font-family: Tahoma, Arial, "Noto Naskh Arabic", sans-serif;
  line-height: 1.8;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1140px, calc(100% - 32px)); margin-inline: auto; }
.skip-link { position:absolute; top:-60px; right:16px; background:#111; color:#fff; padding:10px 14px; border-radius:10px; z-index:1000; }
.skip-link:focus { top:16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,250,243,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(234,220,205,0.8);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
}
.brand { display: flex; align-items: center; gap: 14px; font-weight: 900; }
.brand-mark {
  width: 52px; height: 52px; border-radius: 18px;
  display:grid; place-items:center; color:#fff;
  background: linear-gradient(145deg, var(--ck-primary), var(--ck-primary-dark));
  box-shadow: 0 12px 30px rgba(154,91,35,0.24);
}
.brand-title { display:block; font-size: 1.2rem; line-height: 1.2; }
.brand-subtitle { display:block; color: var(--ck-muted); font-size: 0.82rem; font-weight:700; margin-top:3px; }
.nav-toggle { display:none; border:0; background: var(--ck-surface); border-radius: 16px; padding: 10px 12px; box-shadow: var(--ck-shadow); cursor:pointer; }
.nav-toggle span { display:block; width:26px; height:3px; background: var(--ck-ink); margin:5px 0; border-radius:8px; }
.main-navigation ul { display:flex; align-items:center; gap: 8px; list-style:none; padding:0; margin:0; }
.main-navigation a { display:block; padding: 10px 14px; border-radius:999px; color: var(--ck-muted); font-weight:800; }
.main-navigation a:hover, .main-navigation .current-menu-item > a { background:#f1dfcb; color:var(--ck-primary-dark); }
.header-phone { display:flex; align-items:center; gap:10px; background:#1f160f; color:#fff; padding:10px 16px; border-radius:999px; font-weight:900; box-shadow: 0 14px 35px rgba(31,22,15,0.18); }

.hero {
  position: relative;
  overflow: hidden;
  padding: 82px 0 56px;
  background: radial-gradient(circle at 12% 15%, rgba(216,166,71,.28), transparent 26%), linear-gradient(145deg, #fff7ec 0%, #f5e0c8 100%);
}
.hero-grid { display:grid; grid-template-columns: 1fr 0.88fr; gap: 46px; align-items:center; }
.eyebrow { color: var(--ck-accent); font-weight:900; letter-spacing:.2px; margin:0 0 8px; }
h1, h2, h3 { line-height:1.25; margin:0 0 18px; color: var(--ck-ink); }
h1 { font-size: clamp(2.2rem, 6vw, 4.7rem); letter-spacing:-1px; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: 1.35rem; }
p { margin:0 0 18px; color: var(--ck-muted); }
.hero-text { font-size:1.1rem; max-width: 690px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button, .wp-block-button__link, button.button {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; border-radius: 999px; padding: 13px 22px;
  background: var(--ck-primary); color:#fff; font-weight:900; cursor:pointer;
  box-shadow: 0 14px 34px rgba(154,91,35,0.22);
}
.button.secondary { background:#fff; color:var(--ck-primary-dark); border:1px solid var(--ck-border); box-shadow:none; }
.button:hover { transform: translateY(-1px); }
.hero-card { background:rgba(255,255,255,0.72); border:1px solid rgba(255,255,255,.8); border-radius: var(--ck-radius); padding:20px; box-shadow: var(--ck-shadow); }
.hero-card img { border-radius: 22px; background:#f2dfca; }
.hero-badges { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:16px; }
.hero-badge { background:#fff; border:1px solid var(--ck-border); border-radius:18px; padding:12px; text-align:center; font-weight:900; color: var(--ck-primary-dark); }
.hero-badge span { display:block; color:var(--ck-muted); font-size:.78rem; font-weight:700; }

.section { padding: 78px 0; }
.section.alt { background: #fff3e4; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; }
.section-head p { max-width: 620px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
.grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:28px; align-items:center; }
.card { background:var(--ck-surface); border:1px solid var(--ck-border); border-radius: var(--ck-radius); padding:24px; box-shadow: 0 12px 36px rgba(50,32,19,.08); }
.service-card img, .door-card img { border-radius: 22px; margin-bottom:18px; background:#f5e5d2; }
.icon-pill { width:48px; height:48px; border-radius:17px; display:grid; place-items:center; background:#f3dfc8; color:var(--ck-primary-dark); font-weight:900; margin-bottom:16px; }
.check-list { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.check-list li { position:relative; padding-right:30px; color:var(--ck-muted); }
.check-list li::before { content:"✓"; position:absolute; right:0; top:0; color:var(--ck-accent); font-weight:900; }

.door-gallery { display:grid; grid-template-columns: repeat(12, 1fr); gap:18px; }
.door-card { grid-column: span 4; overflow:hidden; }
.door-card.featured { grid-column: span 8; display:grid; grid-template-columns: .9fr 1fr; gap:22px; align-items:center; }
.price-note { color:var(--ck-primary-dark); font-weight:900; margin-top:8px; }

.stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
.stat { background:#1f160f; color:#fff; border-radius:24px; padding:22px; text-align:center; }
.stat strong { display:block; font-size:2rem; line-height:1; }
.stat span { color:#ecd8c0; font-size:.88rem; }

.cta-band { background: linear-gradient(135deg, var(--ck-primary-dark), var(--ck-primary)); color:#fff; border-radius:34px; padding:38px; display:flex; align-items:center; justify-content:space-between; gap:26px; box-shadow: var(--ck-shadow); }
.cta-band h2, .cta-band p { color:#fff; }
.cta-band p { opacity:.86; }
.cta-band .button { background:#fff; color:var(--ck-primary-dark); box-shadow:none; }

.contact-wrap { display:grid; grid-template-columns: .9fr 1.1fr; gap:26px; align-items:start; }
.contact-list { display:grid; gap:14px; margin-top:22px; }
.contact-item { display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid var(--ck-border); border-radius:20px; padding:16px; }
.contact-item strong { display:block; }
.contact-form label { display:block; font-weight:900; color:var(--ck-ink); margin-bottom:7px; }
.contact-form input, .contact-form textarea {
  width:100%; border:1px solid var(--ck-border); border-radius:18px; padding:13px 15px;
  font:inherit; background:#fffaf3; color:var(--ck-ink); outline:none;
}
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--ck-primary); box-shadow:0 0 0 4px rgba(154,91,35,.12); }
.contact-form .field { margin-bottom:16px; }
.notice { border-radius:18px; padding:14px 16px; margin:0 0 18px; font-weight:800; }
.notice.success { background:#dff5ea; color:#14532d; }
.notice.error { background:#fee2e2; color:#7f1d1d; }

.page-hero { padding: 68px 0; background: linear-gradient(145deg, #fff7ec, #f5e0c8); }
.content-area { padding: 64px 0; }
.entry-content { background:#fff; border:1px solid var(--ck-border); border-radius: var(--ck-radius); padding:32px; box-shadow: 0 12px 36px rgba(50,32,19,.08); }
.entry-content h2, .entry-content h3 { margin-top: 24px; }

.site-footer { background:#1f160f; color:#fff; padding:52px 0 24px; }
.footer-grid { display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:28px; }
.site-footer p, .site-footer a { color:#ecd8c0; }
.footer-title { color:#fff; font-weight:900; margin-bottom:12px; }
.footer-menu { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.copyright { border-top:1px solid rgba(255,255,255,.12); margin-top:34px; padding-top:18px; color:#c9b69f; font-size:.92rem; }

@media (max-width: 900px) {
  .header-phone { display:none; }
  .nav-toggle { display:block; }
  .main-navigation { position:absolute; left:16px; right:16px; top:86px; background:#fff; border:1px solid var(--ck-border); border-radius:24px; padding:12px; box-shadow: var(--ck-shadow); display:none; }
  .main-navigation.is-open { display:block; }
  .main-navigation ul { display:grid; gap:4px; }
  .hero-grid, .grid-2, .contact-wrap, .door-card.featured { grid-template-columns:1fr; }
  .grid-3, .stats, .footer-grid { grid-template-columns:1fr 1fr; }
  .door-card, .door-card.featured { grid-column: span 12; }
  .section-head, .cta-band { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 560px) {
  .grid-3, .stats, .footer-grid, .hero-badges { grid-template-columns:1fr; }
  .section { padding:54px 0; }
  .hero { padding:60px 0 42px; }
  .brand-title { font-size:1rem; }
  .cta-band { padding:26px; border-radius:26px; }
}


/* Added: branded header logo, product slider, and real project gallery images */
.brand-logo-img,
.custom-logo-link img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 16px;
  background: #ffffff;
  padding: 5px;
  box-shadow: 0 10px 26px rgba(31, 22, 15, 0.10);
}
.brand-text { min-width: 0; }
.service-card.has-image { padding: 0; overflow: hidden; }
.service-card.has-image .service-content { padding: 22px 24px 24px; }
.service-card.has-image img { width: 100%; height: 220px; object-fit: cover; margin: 0; border-radius: 0; background: #f5e5d2; }

.product-slider-section { overflow: hidden; }
.ck-slider { position: relative; }
.ck-slider-shell { position: relative; }
.ck-slider-track {
  direction: ltr;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 46%);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 18px;
  scrollbar-width: thin;
}
.ck-slide {
  direction: rtl;
  scroll-snap-align: start;
  position: relative;
  min-height: 420px;
  border-radius: 30px;
  overflow: hidden;
  background: #1f160f;
  box-shadow: var(--ck-shadow);
  border: 1px solid rgba(234, 220, 205, 0.7);
}
.ck-slide img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; opacity: 0.92; transform: scale(1.01); }
.ck-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(31,22,15,.88), rgba(31,22,15,.12) 58%, rgba(31,22,15,.04));
  pointer-events: none;
}
.ck-slide-content {
  position: absolute;
  z-index: 2;
  right: 22px;
  left: 22px;
  bottom: 22px;
  color: #fff;
}
.ck-slide-content h3 { color: #fff; margin-bottom: 8px; font-size: 1.45rem; }
.ck-slide-content p { color: rgba(255,255,255,.86); margin: 0; }
.ck-slide-tag { display: inline-flex; margin-bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(216,166,71,.92); color: #1f160f; font-weight: 900; font-size: .84rem; }
.slider-controls { display:flex; align-items:center; gap:10px; justify-content:flex-start; margin-top: 16px; }
.slider-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ck-border);
  background: #fff;
  color: var(--ck-primary-dark);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(50,32,19,.08);
}
.slider-btn:hover { background: #f1dfcb; }

.project-gallery { display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.project-card { grid-column: span 4; padding: 0; overflow: hidden; }
.project-card img { width: 100%; height: 260px; object-fit: cover; border-radius: 0; background:#f5e5d2; margin:0; }
.project-card .project-content { padding: 20px 22px 24px; }
.project-card.featured { grid-column: span 6; }
.project-card.featured img { height: 340px; }
.project-card h3 { margin-bottom: 8px; }
.project-card p { margin-bottom: 0; }

@media (max-width: 900px) {
  .brand-logo-img,
  .custom-logo-link img { width: 56px; height: 56px; }
  .ck-slider-track { grid-auto-columns: minmax(290px, 78%); }
  .project-card,
  .project-card.featured { grid-column: span 6; }
  .project-card img,
  .project-card.featured img { height: 250px; }
}
@media (max-width: 560px) {
  .header-inner { min-height: 76px; gap: 10px; }
  .brand { gap: 10px; }
  .brand-logo-img,
  .custom-logo-link img { width: 50px; height: 50px; border-radius: 14px; }
  .brand-subtitle { display: none; }
  .ck-slider-track { grid-auto-columns: 88%; gap: 14px; }
  .ck-slide, .ck-slide img { min-height: 350px; }
  .ck-slide-content { right: 16px; left: 16px; bottom: 16px; }
  .project-card,
  .project-card.featured { grid-column: span 12; }
  .project-card img,
  .project-card.featured img,
  .service-card.has-image img { height: 230px; }
}

.ck-slider-track { direction: ltr; }
.ck-slide { direction: rtl; text-align: right; }


/* Update 1.2.0: sitewide logo, Kuwait details, and visible homepage hero slider */
.brand-logo-img { flex: 0 0 auto; }
.header-phone { white-space: nowrap; }
.hero-card.hero-slider {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 490px;
}
.hero-slider-window {
  position: relative;
  min-height: 490px;
  border-radius: 26px;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide img {
  width: 100%;
  height: 100%;
  min-height: 490px;
  object-fit: cover;
  border-radius: 0;
  background: #f2dfca;
}
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(31,22,15,.74), rgba(31,22,15,.14) 58%, rgba(31,22,15,.02));
  pointer-events: none;
}
.hero-slide-caption {
  position: absolute;
  z-index: 2;
  right: 22px;
  left: 22px;
  bottom: 88px;
  color: #fff;
}
.hero-slide-caption span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(216,166,71,.96);
  color: #1f160f;
  font-size: .82rem;
  font-weight: 900;
}
.hero-slide-caption h3 { color: #fff; margin: 0 0 8px; font-size: 1.45rem; }
.hero-slide-caption p { margin: 0; color: rgba(255,255,255,.86); }
.hero-slider-controls {
  position: absolute;
  z-index: 4;
  left: 18px;
  bottom: 26px;
  display: flex;
  gap: 8px;
}
.hero-slider-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--ck-primary-dark);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(31,22,15,.16);
}
.hero-slider-dots {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 38px;
  display: flex;
  gap: 7px;
}
.hero-slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  border: 0;
  cursor: pointer;
  padding: 0;
}
.hero-slider-dot.is-active { width: 26px; background: var(--ck-gold); }
@media (max-width: 900px) {
  .hero-card.hero-slider,
  .hero-slider-window,
  .hero-slide img { min-height: 430px; }
  .hero-slide-caption { bottom: 82px; }
  .header-inner { position: relative; }
}
@media (max-width: 560px) {
  .brand-logo-img { width: 48px; height: 48px; padding: 4px; }
  .hero-card.hero-slider,
  .hero-slider-window,
  .hero-slide img { min-height: 380px; }
  .hero-slide-caption { right: 16px; left: 16px; bottom: 82px; }
  .hero-slider-controls { left: 14px; bottom: 22px; }
  .hero-slider-dots { right: 16px; bottom: 34px; }
}