/*
Theme Name: My Custom Theme
Theme URI: https://www.drwreikat.com/
Author: TechCare
Author URI: https://www.drwreikat.com/
Description: Custom RTL (Arabic) WordPress theme for Dr. Saad Al-Wreikat Eye Clinic. Built from the clinic's hand-coded static site — self-hosted Almarai typeface, no external dependencies — and wired for Elementor via the_content() and the Elementor Theme Builder locations API.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
Tags: rtl-language-support, custom-colors, custom-menu, custom-logo, translation-ready, right-sidebar, block-styles, wide-blocks
*/

/* ==========================================================================
   NOTE — WHERE THE REAL DESIGN LIVES
   --------------------------------------------------------------------------
   This file exists because WordPress requires a style.css carrying the theme
   header above. The clinic's actual design system (design tokens, top bar,
   navbar, drawer, hero, services, reviews, footer, breakpoints — ~1,370 lines)
   lives in assets/css/style.css and is enqueued by functions.php right after
   this file.

   Edit assets/css/style.css for design changes. Keep this file for WordPress
   plumbing only: block alignments, editor output, accessibility helpers, and
   admin-bar offsets.
   ========================================================================== */

/* ============================ ACCESSIBILITY ============================== */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 1rem; inset-inline-start: 1rem;
  z-index: 100000;
  width: auto; height: auto;
  clip: auto;
  padding: .8rem 1.4rem;
  background: #fff; color: #133A5E;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}

/* ======================== ADMIN BAR COMPENSATION ========================= */
/* The sticky header must not slide under the WP toolbar. */
.admin-bar .header       { top: 32px; }
.admin-bar .drawer       { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .header     { top: 46px; }
  .admin-bar .drawer     { top: 46px; }
}

/* ===================== WORDPRESS / GUTENBERG ALIGNMENTS ================== */
.alignleft {
  float: left;
  margin-inline-end: 1.5rem;
  margin-block-end: 1rem;
}
.alignright {
  float: right;
  margin-inline-start: 1.5rem;
  margin-block-end: 1rem;
}
.aligncenter {
  display: block;
  margin-inline: auto;
  margin-block-end: 1rem;
}
.alignwide  { max-width: 1100px; margin-inline: auto; }
.alignfull  { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
  font-size: .88rem;
  color: var(--muted, #5C7183);
  text-align: center;
  margin-top: .6rem;
}
.wp-block-image img,
.entry-content img { max-width: 100%; height: auto; }

.sticky      { position: relative; }
.gallery-caption { display: block; }

/* ============================ ENTRY / LOOP =============================== */
.entry-header  { margin-bottom: 2rem; }
.entry-title   { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.3; color: var(--navy, #133A5E); }
.entry-meta    { font-size: .9rem; color: var(--muted, #5C7183); margin-top: .6rem; }
.entry-meta a  { color: inherit; }

.entry-content > * + * { margin-top: 1.15rem; }
.entry-content h2 { font-size: 1.7rem; margin-top: 2.4rem; color: var(--navy, #133A5E); }
.entry-content h3 { font-size: 1.35rem; margin-top: 1.8rem; color: var(--navy, #133A5E); }
.entry-content ul,
.entry-content ol { padding-inline-start: 1.5rem; }
.entry-content li + li { margin-top: .45rem; }
.entry-content blockquote {
  border-inline-start: 4px solid var(--brand, #2E90CE);
  background: var(--bg-alt, #F5FAFD);
  padding: 1.2rem 1.4rem;
  border-radius: 10px;
}
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th,
.entry-content td { border: 1px solid #E3EBF2; padding: .7rem .9rem; text-align: start; }

/* Archive / blog listing grid — reuses the site's card tokens. */
.loop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.8rem;
}
.loop-card {
  background: #fff;
  border: 1px solid #E6EEF5;
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.loop-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(19,58,94,.10); }
.loop-card__thumb img { width: 100%; height: 200px; object-fit: cover; display: block; }
.loop-card__body { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.loop-card__title { font-size: 1.15rem; line-height: 1.5; color: var(--navy, #133A5E); }
.loop-card__title a { color: inherit; text-decoration: none; }
.loop-card__title a:hover { color: var(--brand, #2E90CE); }
.loop-card__meta { font-size: .85rem; color: var(--muted, #5C7183); }
.loop-card__more { margin-top: auto; font-weight: 700; color: var(--brand, #2E90CE); text-decoration: none; }

/* Page padding for non-Elementor content, so text never runs edge-to-edge. */
.site-content--default { padding-block: clamp(3rem, 7vw, 6rem); }

/* ============================== PAGINATION =============================== */
.pagination { margin-top: 3rem; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: .8rem;
  border: 1px solid #DDE7EF; border-radius: 10px;
  color: var(--navy, #133A5E); text-decoration: none; font-weight: 700;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--brand, #2E90CE);
  border-color: var(--brand, #2E90CE);
  color: #fff;
}

/* ============================== COMMENTS ================================= */
.comments-area { margin-top: 3.5rem; }
.comments-area .comment-list { list-style: none; padding: 0; }
.comments-area .comment-list ol { list-style: none; padding-inline-start: 1.5rem; }
.comments-area .comment-body {
  background: var(--bg-alt, #F5FAFD);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
}
.comments-area .comment-author img { border-radius: 50%; vertical-align: middle; margin-inline-end: .6rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border: 1px solid #DDE7EF;
  border-radius: 10px;
  padding: .8rem 1rem;
  font: inherit;
}

/* ================================ 404 ==================================== */
.error-404 { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.error-404__code {
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 800;
  line-height: 1;
  color: var(--brand-soft, #E3F1FA);
}

/* ==========================================================================
   ELEMENTOR CONTENT ZONE
   --------------------------------------------------------------------------
   The optional region a static page template prints below the ported design
   when its "إظهار المحتوى الإضافي" toggle is on. Elementor sections bring
   their own spacing and need to stretch; classic/Gutenberg content is padded
   and held to the content column.
   ========================================================================== */
.mct-content-zone:not(.entry-content--elementor) {
	padding-top: 3.5rem;
}

.mct-content-zone:not(.entry-content--elementor) > .container > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.mct-content-zone:not(.entry-content--elementor) {
		padding-top: 2.5rem;
	}
}