/* ================== PorchMe – Royal Porch Design (style.css) ================== */



/* Palette & tokens */

:root{

  --bg:#0f1216;            /* خلفية مخملية داكنة */

  --bg-2:#151a20;          /* طبقة ثانية */

  --card:#11161c;          /* بطاقات */

  --text:#e9edf1;          /* نص فاتح */

  --muted:#9aa6b2;         /* نص ثانوي */

  --gold:#d4af37;          /* ذهبي ملكي */

  --gold-2:#b8932c;        /* ذهبي داكن */

  --line:#223040;          /* حدود خفيفة */

  --shadow:rgba(0,0,0,.35);

  --radius:14px;



  /* صورة الهيرو */

  --hero-url:url("image/porch_hero.jpg");

  --hero-y-desktop:52%;

  --hero-y-mobile:50%;

}



/* Reset */

*{box-sizing:border-box}

html,body{

  margin:0;padding:0;background:var(--bg);color:var(--text);

  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;

  line-height:1.6

}

img{max-width:100%;display:block}

a{color:inherit;text-decoration:none}

.wrap{max-width:1100px;margin-inline:auto;padding:0 18px}



/* Top line */

.topline{height:6px;background:linear-gradient(90deg, #1f2a36, #2a3a4c)}



/* ================== Nav ================== */

.nav{position:sticky;top:0;z-index:1000;background:rgba(15,18,22,.72);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}

.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}

.brand{display:flex;align-items:center;gap:10px}

.royal-logo{height:50px;width:auto;object-fit:contain;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

.wordmark{font-weight:700;letter-spacing:.5px}

.nav-links{display:flex;gap:18px;align-items:center}

.nav-links a{opacity:.9}

.nav-cta{margin-left:6px}

.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:26px;line-height:1}



@media (max-width:600px){

  .royal-logo{height:40px}

}

@media (max-width:860px){

  .nav-toggle{display:block}

  .nav-links{position:fixed;inset:64px 0 auto 0;background:rgba(15,18,22,.96);

    transform:translateY(-10px);opacity:0;pointer-events:none;transition:.25s;

    flex-direction:column;padding:18px;border-bottom:1px solid var(--line)}

  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}

}



/* ================== Buttons ================== */

.btn{display:inline-flex;align-items:center;justify-content:center;

  padding:12px 16px;border-radius:12px;border:1px solid transparent;font-weight:600;

  box-shadow:0 6px 18px -8px var(--shadow);transition:.2s}

.btn-gold{background:var(--gold);color:#1a1200;border-color:#00000020}

.btn-gold:hover{background:var(--gold-2)}

.btn-outline{background:transparent;border-color:#ffffff33}

.btn-outline:hover{background:#ffffff12}

.btn-quiet{background:#ffffff12;color:#fff}

.btn-quiet:hover{background:#ffffff1f}



/* ================== Hero ================== */

.hero{

  position:relative;isolation:isolate;min-height:100vh;

  display:flex;align-items:center;

  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45)), var(--hero-url);

  background-repeat:no-repeat;background-size:cover;

  background-position:center var(--hero-y-mobile);

  border-bottom:1px solid var(--line);

}

.hero::after{

  content:"";position:absolute;inset:auto 0 0 0;height:80px;

  background:linear-gradient(180deg, transparent, #0f1216 65%);

  pointer-events:none;z-index:-1;

}

.hero-inner{padding:8vh 0 72px}

.hero-title{font-size:clamp(28px,5vw,54px);line-height:1.1;margin:0 0 14px;font-weight:800;text-shadow:0 3px 16px rgba(0,0,0,.55)}

.hero-subtitle{color:#f2f5f8;opacity:.92;margin:0 0 8px}

.hero .hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}



@media (min-width:961px){.hero{background-position:center var(--hero-y-desktop);}}

@media (min-width:1200px){.hero{background-position:center 50%;}}

@media (min-width:1600px){.hero{background-position:center 48%;}}



/* ================== Sections / Cards ================== */

.section{padding:56px 0}

.section.alt{background:var(--bg-2);border-block:1px solid var(--line)}

.card{

  background:linear-gradient(180deg, #0f141a, #0d1217);

  border:1px solid var(--line);border-radius:var(--radius);

  box-shadow:0 20px 40px -28px var(--shadow);padding:24px

}

h2{font-size:clamp(20px,3.2vw,30px);margin:0 0 14px}

.muted{color:var(--muted)}



/* ================== Gallery ================== */

#gallery{margin-top:16px}

.gallery-hidden{display:none}

.gallery-visible{display:block}

.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

@media (min-width:860px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}

.gallery-item{border-radius:12px;overflow:hidden;border:1px solid #1e2a36}

.gallery-item img{width:100%;height:180px;object-fit:cover;transition:transform .25s ease}

.gallery-item:hover img{transform:scale(1.04)}



.pm-lightbox{

  position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;

  opacity:0;pointer-events:none;transition:.2s;z-index:1200;padding:16px

}

.pm-lightbox.open{opacity:1;pointer-events:auto}

.pm-lightbox img{max-width:min(1100px,96vw);max-height:88vh;border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}

.pm-close{position:absolute;top:14px;right:14px;background:#ffffff18;border:1px solid #ffffff30;color:#fff;

  font-size:28px;line-height:1;border-radius:12px;padding:6px 10px}



/* ================== Footer ================== */

.footer{background:#0c1015;border-top:1px solid var(--line);padding:28px 0}

.footer .wrap{display:grid;gap:14px}

.fbrand{display:flex;align-items:center;gap:10px}

.fbrand img{height:26px}

.fnav{display:flex;flex-wrap:wrap;gap:14px}

.social-icons{display:flex;gap:12px}

.social-icons img{width:22px;height:22px;opacity:.9;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

.copy{color:#a9b4bf;font-size:14px}



/* ================== Forms (Customer & Builder) ================== */

.h3{margin:10px 0 6px;font-size:clamp(18px,2.4vw,22px);font-weight:700}

.divider{border:0;border-top:1px solid var(--line);margin:16px 0}

.form--grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}

.form__item--span{grid-column:1 / -1}

.form__label{display:block;margin:4px 0 6px;font-size:.95rem;opacity:.9}

.req{color:var(--gold)}

.form__control{

  width:100%;background:#0b1016;color:#ffffff;border:1px solid rgba(255,255,255,.14);

  border-radius:12px;padding:.9rem 1rem;outline:none;

  transition:border-color .15s, box-shadow .15s;

}

.form__control:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.25)}

.form__control--file{padding:.6rem;color:#cfd6de}

.form__control--file::-webkit-file-upload-button{

  background:var(--bg-2);color:#fff;border:1px solid rgba(255,255,255,.18);

  border-radius:10px;padding:.5rem .8rem;margin-right:.6rem;cursor:pointer;

}

.check{display:flex;gap:.6rem;align-items:flex-start;line-height:1.35}

.actions{display:flex;gap:10px;align-items:center}

.btn--gold{background:var(--gold);color:#1a1200;border:1px solid #00000020}

.btn--gold:hover{background:var(--gold-2)}

.btn--ghost{background:transparent;border:1px solid transparent;color:#fff}

.status{margin-top:6px}

.status.error{color:#ff8a8a}

.honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0}



@media (max-width:760px){

  .form--grid{grid-template-columns:1fr;gap:12px}

  .btn-row{flex-direction:column}

  .btn-row .btn,.actions .btn{width:100%}

}



/* Accessibility & polish */

:focus-visible{outline:2px solid #8ab4ff;outline-offset:2px}

a:hover{opacity:1}

.hero .btn{min-width:150px}