/*
Theme Name: Agence Immobilière Marrakech
Theme URI: https://agence-immobiliere-marrakech.com
Author: Agence Immobilière Marrakech
Description: Thème WordPress sur mesure — conversion à l'identique du site original (FR/EN). Aucune modification visuelle : mêmes couleurs, typographies, images, animations, espacements et structure de sections. Biens immobiliers et articles gérés depuis le tableau de bord.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
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: aim
Tags: real-estate, custom-theme, translation-ready
*/

/* ============================================================
   GLOBAL — ported verbatim from the original <style> block.
   Do not restyle. Values are identical to the source site.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Jost', system-ui, sans-serif; color: #211C17; background: #F4ECDD; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: #9C4426; text-decoration: none; transition: color .3s ease; }
a:hover { color: #B45A34; }
::selection { background: #B45A34; color: #F6EFE3; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #EADBC3; }
::-webkit-scrollbar-thumb { background: #B08636; border-radius: 8px; }
@keyframes am-kenburns { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes am-float { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-16px) rotate(var(--r,0deg)); } }
@keyframes am-floatslow { 0%,100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-22px) rotate(45deg); } }
@keyframes am-riseline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes am-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 50% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } }

/* ---------- IMAGE SLOTS ----------
   The original used a <image-slot> prototyping web component. These rules
   reproduce exactly what it painted: the image covering its wrapper, with
   the Unsplash credit chip bottom-left (same geometry, colours and font as
   the component's shadow stylesheet). The chip is hidden automatically when
   the client replaces the photo with their own — same as the component did.
------------------------------------ */
.aim-slot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.aim-slot picture { display: block; width: 100%; height: 100%; }
.aim-slot img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; -webkit-user-drag: none; user-select: none; }
.aim-slot[data-fit="contain"] img { object-fit: contain; }
.aim-credit { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px);
  padding: 3px 7px; border-radius: 5px; background: rgba(0,0,0,.55); color: #fff;
  font: 10px/1.2 system-ui,-apple-system,sans-serif; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(6px); }
.aim-credit a { color: inherit; text-decoration: none; }
.aim-credit a:hover, .aim-credit a:focus-visible { text-decoration: underline; }
@media print { .aim-credit { display: none !important; } }

/* ---------- MOBILE (desktop untouched) ---------- */
[data-burger] { display: none; }
[data-mobilemenu] { visibility: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 960px) {
  [data-navdesktop] { display: none !important; }
  [data-burger] { display: flex !important; }
  [data-grid3] { grid-template-columns: 1fr 1fr !important; }
  [data-grid4] { grid-template-columns: 1fr 1fr !important; }
  [data-2col] { grid-template-columns: 1fr !important; }
  [data-footergrid] { grid-template-columns: 1fr 1fr !important; }
  [data-search] { flex-direction: column !important; align-items: stretch !important; }
  [data-search] [data-searchdiv] { display: none !important; }
  [data-search] a { width: 100% !important; }
  [data-cat] { height: 340px !important; }
  [data-storyimg] { height: 60vh !important; max-height: 460px !important; }
}
@media (max-width: 620px) {
  [data-grid3] { grid-template-columns: 1fr !important; }
  [data-grid4] { grid-template-columns: 1fr !important; }
  [data-footergrid] { grid-template-columns: 1fr !important; }
  [data-stats] { flex-wrap: wrap !important; gap: 22px 32px !important; }
  [data-stats] [data-statdiv] { display: none !important; }
  [data-navbar] { padding: 16px 20px !important; }
  [data-prop-img] { height: 240px !important; }
  [data-quote] { left: 14px !important; bottom: -18px !important; padding: 16px 18px !important; }
  [data-hero] { min-height: 600px !important; }
}

/* ============================================================
   RESPONSIVE FIXES — the only changes made to the original.
   Layout adaptation only: no colour, type, spacing, image or
   content change at any breakpoint the original already handled.
   ============================================================ */

/* 1. Never allow a sideways scrollbar. The original relied on a single
      overflow:hidden wrapper; decorative diamonds and the offset quote
      card could still push the document sideways on some mobile browsers. */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* 2. Small-laptop / tablet-landscape nav (961px–1180px). The original kept
      the full desktop nav down to 960px, where 6 links + FR/EN + the
      WhatsApp button no longer fit and wrapped over the logo. Same links,
      same order, same styling — only the gap and label size step down so
      the row stays on one line. */
@media (max-width: 1180px) and (min-width: 961px) {
  [data-navdesktop] { gap: 16px !important; }
  [data-navdesktop] > a[data-navlink] { font-size: 12px !important; letter-spacing: .12em !important; }
  [data-navdesktop] > a[href^="https://wa.me"] { padding: 10px 15px !important; letter-spacing: .1em !important; }
}
@media (max-width: 1040px) and (min-width: 961px) {
  [data-navdesktop] { gap: 12px !important; }
  [data-navdesktop] > a[data-navlink] { font-size: 11px !important; letter-spacing: .09em !important; }
}

/* 3. Mobile viewport height. `height:100vh` on the hero is measured against
      the largest viewport on iOS/Android, so the scroll cue sat under the
      browser toolbar. `100svh` gives the same full-screen hero without the
      overhang. Desktop is unaffected (svh == vh there). */
@supports (height: 100svh) {
  @media (max-width: 960px) {
    [data-hero] { height: 100svh; }
  }
}

/* 4. Landscape phones (short viewports). The hero's 680px min-height forced
      the whole viewport to scroll before any content was legible. */
@media (max-height: 560px) and (orientation: landscape) {
  [data-hero] { height: auto !important; min-height: 0 !important; padding-top: 92px; }
  [data-hero] [data-scrollcue] { display: none !important; }
}

/* 5. Long words / prices in narrow cards. Prevents the price and title
      overflowing their card on 320px-wide screens. */
@media (max-width: 380px) {
  [data-prop-card] h3, [data-prop-card] [data-price] { overflow-wrap: anywhere; }
}

/* 6. The two overlays (property + article) scroll inside themselves on
      short screens instead of clipping their WhatsApp button. */
[data-overlay] { -webkit-overflow-scrolling: touch; }

/* 7. Fonts render at the same optical size on high-DPI mobile. */
@media (max-width: 620px) {
  html { -webkit-text-size-adjust: 100%; }
}

/* 8. Respect the OS "reduce motion" setting — the ken-burns, float,
      parallax and pulse loops stop. Nothing moves, everything still
      looks identical in its resting state. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   INNER PAGES

   The homepage opens on the hero photograph, so the fixed navigation can sit
   over it. The other pages open on a normal section, so they render the nav
   in the solid state it already uses after scrolling (header.php) and offset
   their content below it. 92px clears the tallest form of the bar (22px
   padding + the 46px burger + 22px); 80px covers the 16px padding it drops to
   on phones. The gap sits on [data-root], whose background is the same
   #F4ECDD as the bar, so there is no visible seam — and each section keeps
   its own padding exactly as on the homepage.

   The homepage is not affected by any rule here.
   ============================================================ */

body.aim-inner [data-root] { padding-top: 92px; }
@media (max-width: 620px) {
  body.aim-inner [data-root] { padding-top: 80px; }
}

/* Editor content on a client-created page, in the site's existing type scale. */
[data-pagecontent] > :first-child { margin-top: 0; }
[data-pagecontent] p { margin: 0 0 1.2em; }
[data-pagecontent] h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(28px,3.4vw,42px); line-height: 1.1; color: #26221E; margin: 1.6em 0 .5em; }
[data-pagecontent] h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 23px; color: #26221E; margin: 1.4em 0 .4em; }
[data-pagecontent] ul, [data-pagecontent] ol { margin: 0 0 1.2em; padding-left: 1.3em; }
[data-pagecontent] li { margin-bottom: .45em; }
[data-pagecontent] img { border-radius: 4px; margin: 1.4em 0; }

/* ---------- WordPress admin bar offset (logged-in only) ---------- */
body.admin-bar [data-nav] { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar [data-nav] { top: 46px; } }