/*
Theme Name: Agadir City Center — Coming Soon
Theme URI: https://agadircitycenter.com/
Author: Agadir City Center
Author URI: https://agadircitycenter.com/
Description: Dedicated, lightweight theme for the Agadir City Center coming-soon homepage. Meant to be used only until the full site launches.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: agadir-city-center
*/

/* This file is the theme's required stylesheet header (WordPress reads the
   comment above to identify the theme) followed by all of the page's CSS.
   It is loaded through functions.php with wp_enqueue_style(), never linked
   directly and never duplicated in front-page.php or script.js. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --agadir-teal: #1B9AAA;
  --agadir-deep-teal: #087F8C;
  --agadir-gold: #D8A83E;
  --agadir-off-white: #F7F4ED;
  --agadir-dark: #172126;
  --acc-bg-img: url("agadir-wallpapers.jpg");  --acc-bg-img: none;
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--agadir-off-white);
  line-height: 1.55;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.acc a { color: inherit; }
.acc [hidden] { display: none !important; }
.acc a:focus-visible,
.acc button:focus-visible,
.acc input:focus-visible {
  outline: 3px solid var(--agadir-gold);
  outline-offset: 3px;
}

/* ---------- Hero ---------- */
.acc-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--acc-bg-img) center/cover no-repeat,
    linear-gradient(135deg, var(--agadir-deep-teal) 0%, var(--agadir-teal) 100%);
}
.acc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 33, 38, .38), rgba(23, 33, 38, .18) 60%, rgba(23, 33, 38, .05));
}
.acc-glow {
  position: absolute; top: -12%; right: -8%;
  width: min(60vw, 640px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 168, 62, .28), transparent 65%);
  pointer-events: none;
}
.acc-ring {
  position: absolute; left: -90px; top: 26%;
  width: 300px; height: 300px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  pointer-events: none;
}
.acc-scene { position: absolute; left: 0; bottom: -1px; width: 100%; height: min(46vh, 380px); pointer-events: none; }

/* ---------- Nav ---------- */
.acc-nav {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 14px clamp(16px, 5vw, 56px);
}
.acc-brand { font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; text-decoration: none; color: #fff; }
.acc-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.acc-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 8px; text-decoration: none; color: #fff; font-size: .95rem;
}
.acc-links a:hover { background: rgba(255, 255, 255, .15); }

/* ---------- Hero content ---------- */
.acc-in {
  position: relative; z-index: 2; flex: 1; width: 100%; max-width: 900px;
  margin: 0 auto; padding: 16px 20px 170px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  animation: acc-rise .8s ease both;
}
.acc-logo { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.acc-logo small { font-size: .5em; font-weight: 600; opacity: .9; }
.acc-logo img { max-width: 240px; height: auto; }
.acc-badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 6px; padding: 8px 16px;
  border-radius: 999px; background: rgba(23, 33, 38, .42); border: 1px solid rgba(216, 168, 62, .7);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
}
.acc-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--agadir-gold); }
.acc h1 { margin: .3em 0 .35em; font-size: clamp(2.1rem, 6.4vw, 4.3rem); line-height: 1.05; letter-spacing: -.03em; color: #fff; }
.acc-lead { max-width: 680px; margin: 0 auto 28px; font-size: clamp(1rem, 2.2vw, 1.2rem); color: #fff; }
.acc-label { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .2em; color: var(--agadir-off-white); }

/* ---------- Countdown ---------- */
.acc-count {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 2vw, 16px);
  width: 100%; max-width: 640px; margin: 0 auto;
}
.acc-cell {
  padding: 18px 6px 14px; border-radius: 18px; background: rgba(23, 33, 38, .32);
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}
.acc-num { display: block; font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.acc-num::after { content: ""; display: block; width: 26px; height: 3px; margin: 10px auto 0; border-radius: 3px; background: var(--agadir-gold); }
.acc-unit { display: block; margin-top: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.acc-tick { animation: acc-tick .35s ease; }

/* ---------- Newsletter form ---------- */
.acc-form { width: 100%; max-width: 520px; margin: 34px auto 0; }
.acc-form p { margin: 0 0 12px; font-weight: 600; color: #fff; }
.acc-row { display: flex; gap: 10px; }
.acc-input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .5); background: var(--agadir-off-white);
  color: var(--agadir-dark); font: inherit; font-size: 1rem;
}
.acc-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 0 26px; border: 0; border-radius: 12px; background: var(--agadir-gold);
  color: var(--agadir-dark); font: inherit; font-weight: 800; text-decoration: none;
  cursor: pointer; transition: transform .2s, box-shadow .2s;
}
.acc-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.acc-btn:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
.acc-status { min-height: 1.4em; margin-top: 10px; font-size: .9rem; color: #fff; }

/* ---------- Launch state ---------- */
.acc-live h2 { margin: 0 0 10px; font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.02em; color: #fff; }
.acc-live p { margin: 0 0 22px; font-size: 1.15rem; color: #fff; }

/* ---------- Feature section ---------- */
.acc-disc { background: var(--agadir-off-white); color: var(--agadir-dark); padding: 64px 20px 88px; }
.acc-wrap { max-width: 1100px; margin: 0 auto; }
.acc-disc h2 { margin: 0 0 8px; text-align: center; font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -.02em; color: var(--agadir-dark); }
.acc-sub { margin: 0 auto 36px; text-align: center; max-width: 560px; color: #3b4a50; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 18px; }
.acc-card { padding: 26px; border-radius: 18px; background: #fff; border: 1px solid rgba(23, 33, 38, .09); box-shadow: 0 6px 22px rgba(23, 33, 38, .05); }
.acc-card h3 { margin: 16px 0 6px; font-size: 1.15rem; color: var(--agadir-dark); }
.acc-card p { margin: 0; color: #3b4a50; }
.acc-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: rgba(27, 154, 170, .12); color: var(--agadir-deep-teal); }
.acc-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Footer ---------- */
.acc-foot { background: var(--agadir-dark); color: var(--agadir-off-white); padding: 44px 20px 30px; text-align: center; }
.acc-foot strong { font-size: 1.2rem; }
.acc-foot p { margin: 6px 0; }
.acc-soc { display: flex; justify-content: center; gap: 10px; list-style: none; margin: 18px 0; padding: 0; }
.acc-soc a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(247, 244, 237, .4); color: var(--agadir-off-white); }
.acc-soc a:hover { border-color: var(--agadir-gold); color: var(--agadir-gold); }
.acc-soc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acc-copy { font-size: .85rem; opacity: .85; }
.acc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Animations ---------- */
@keyframes acc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes acc-tick { from { opacity: .4; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .acc-nav { justify-content: center; }
  .acc-count { grid-template-columns: repeat(2, 1fr); }
  .acc-row { flex-direction: column; }
  .acc-btn { width: 100%; }
  .acc-in { padding-bottom: 130px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .acc-in, .acc-tick { animation: none !important; }
  .acc-btn { transition: none !important; }
}