/*
Theme Name: Al Noor Jewellers
Theme URI: https://alnoorjewellers.ca
Author: Al Noor Jewellers
Author URI: https://alnoorjewellers.ca
Description: Fine gold and diamond jewellery WordPress theme for Al Noor Jewellers, Brampton, Ontario.
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alnoor
*/

:root{
    --ink:#12140F;
    --ink-soft:#1C2018;
    --ivory:#F8F4EC;
    --ivory-deep:#F0E9D8;
    --gold:#C6A15B;
    --gold-light:#E8D9B5;
    --gold-dark:#9C7C3C;
    --burgundy:#5E1F2E;
    --text-dark:#241F1A;
    --text-muted:#756B5A;
  }

  html{scroll-behavior:smooth;}

  body{
    font-family:'Jost', sans-serif;
    color:var(--text-dark);
    background:var(--ivory);
    font-weight:300;
    letter-spacing:.01em;
  }

  h1,h2,h3,h4,.display-font{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    color:var(--text-dark);
  }

  .eyebrow{
    font-family:'Cinzel', serif;
    font-size:.72rem;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--gold-dark);
    font-weight:600;
  }

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

  /* ---------- Utility ---------- */
  .btn-gold{
    background:var(--gold);
    border:1px solid var(--gold);
    color:var(--ink);
    font-family:'Cinzel', serif;
    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    padding:.9rem 2.2rem;
    border-radius:0;
    transition:all .35s ease;
  }
  .btn-gold:hover{
    background:transparent;
    color:var(--gold-light);
    border-color:var(--gold-light);
  }
  .btn-outline-ivory{
    background:transparent;
    border:1px solid rgba(248,244,236,.55);
    color:var(--ivory);
    font-family:'Cinzel', serif;
    font-size:.7rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    padding:.85rem 2rem;
    border-radius:0;
    transition:all .35s ease;
  }
  .btn-outline-ivory:hover{
    background:var(--ivory);
    color:var(--ink);
  }

  .divider-flourish{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:0 auto;
    width:100%;
    max-width:260px;
  }
  .divider-flourish svg{flex:none;}
  .divider-flourish .line{
    flex:1;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
  }

  section{position:relative;}

  /* ---------- Header ---------- */
  .top-strip{
    background:var(--ink);
    color:var(--gold-light);
    font-size:.78rem;
    letter-spacing:.03em;
  }
  .top-strip a{color:var(--gold-light); opacity:.9;}
  .top-strip a:hover{opacity:1; color:var(--gold);}

  .navbar-brand-wrap{display:flex; align-items:center; gap:.7rem;}
  .brand-mark{
    width:44px; height:44px;
    border:1px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:'Cinzel', serif;
    color:var(--gold-dark);
    font-size:1rem;
    transform:rotate(45deg);
  }
  .brand-mark span{transform:rotate(-45deg);}
  .brand-text{line-height:1.05;}
  .brand-text .name{
    font-family:'Cormorant Garamond', serif;
    font-size:1.5rem;
    font-weight:600;
    color:var(--text-dark);
    letter-spacing:.02em;
  }
  .brand-text .tag{
    font-family:'Cinzel', serif;
    font-size:.58rem;
    letter-spacing:.28em;
    color:var(--gold-dark);
    text-transform:uppercase;
  }

  .main-nav .nav-link{
    font-family:'Cinzel', serif;
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--text-dark);
    padding:.5rem 1rem !important;
  }
  .main-nav .nav-link:hover{color:var(--gold-dark);}

  /* ---------- Hero ---------- */
  .hero{
    min-height:92vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:var(--ink);
  }
  .hero-video{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:0;
  }
  .hero-overlay{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:linear-gradient(180deg, rgba(18,20,15,.45) 0%, rgba(18,20,15,.72) 100%);
    z-index:1;
  }
  .hero .container{position:relative; z-index:2;}
  .hero .eyebrow{color:var(--gold-light);}
  .hero h1{
    color:var(--ivory);
    font-size:clamp(2.6rem, 5.5vw, 4.6rem);
    line-height:1.08;
  }
  .hero p.lead{
    color:rgba(248,244,236,.85);
    font-weight:300;
    max-width:520px;
    font-size:1.12rem;
  }

  /* ---------- Welcome ---------- */
  .welcome{padding:6.5rem 0; background:var(--ivory);}
  .welcome p.intro{
    font-size:1.15rem;
    font-weight:300;
    color:var(--text-muted);
    max-width:720px;
    line-height:1.85;
  }

  /* ---------- Products ---------- */
  .products{padding:6.5rem 0; background:var(--ivory-deep);}
  .product-card{
    background:var(--ivory);
    border:1px solid rgba(198,161,91,.25);
    position:relative;
    overflow:hidden;
    transition:transform .4s ease, box-shadow .4s ease;
  }
  .product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 40px -20px rgba(18,20,15,.35);
  }
  .product-card .img-wrap{
    aspect-ratio:1/1;
    overflow:hidden;
  }
  .product-card .img-wrap img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .6s ease;
  }
  .product-card:hover .img-wrap img{transform:scale(1.08);}
  .product-card .corner{
    position:absolute; top:10px; width:16px; height:16px;
    border-top:1px solid var(--gold); z-index:2; pointer-events:none;
  }
  .product-card .corner.left{left:10px; border-left:1px solid var(--gold);}
  .product-card .corner.right{right:10px; border-right:1px solid var(--gold);}
  .product-body{padding:1.25rem 1.1rem 1.5rem;}
  .product-body .p-name{
    font-family:'Cormorant Garamond', serif;
    font-size:1.28rem;
    font-weight:600;
    margin-bottom:.15rem;
  }
  .product-body .p-cat{
    font-size:.68rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  .product-body .p-price{
    font-family:'Cinzel', serif;
    color:var(--gold-dark);
    font-size:.92rem;
    margin-top:.5rem;
  }

  /* ---------- Center Banner ---------- */
  .center-banner{
    background:
      linear-gradient(90deg, rgba(18,20,15,.82), rgba(94,31,46,.72)),
      url('https://images.unsplash.com/photo-1617038260897-41a1f14a8ca0?q=80&w=1600&auto=format&fit=crop') center/cover;
    padding:4rem 0;
    text-align:center;
  }
  .center-banner h3{
    color:var(--ivory);
    font-size:clamp(1.6rem, 3vw, 2.4rem);
    margin-bottom:.6rem;
  }
  .center-banner p{color:rgba(248,244,236,.8); margin-bottom:1.6rem;}

  /* ---------- Testimonials ---------- */
  .testimonials{padding:6.5rem 0; background:var(--ivory);}
  .testi-card{
    background:var(--ivory-deep);
    padding:2.4rem 2rem;
    height:100%;
    border-left:2px solid var(--gold);
  }
  .testi-card .quote-mark{
    font-family:'Cormorant Garamond', serif;
    font-size:3.2rem;
    color:var(--gold);
    line-height:1;
    display:block;
    margin-bottom:.4rem;
  }
  .testi-card p.txt{
    color:var(--text-muted);
    font-size:1rem;
    line-height:1.8;
    min-height:120px;
  }
  .testi-card .stars{color:var(--gold-dark); font-size:.85rem; margin-top:1rem;}
  .testi-card .who{
    font-family:'Cinzel', serif;
    font-size:.75rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-top:.4rem;
    color:var(--text-dark);
  }

  /* ---------- Footer ---------- */
  footer{
    background:var(--ink);
    color:rgba(248,244,236,.72);
    padding:5rem 0 0;
  }
  footer h5{
    font-family:'Cinzel', serif;
    font-size:.78rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold-light);
    margin-bottom:1.4rem;
  }
  footer a.flink{
    color:rgba(248,244,236,.7);
    display:block;
    margin-bottom:.65rem;
    font-size:.92rem;
    transition:color .25s ease;
  }
  footer a.flink:hover{color:var(--gold);}
  footer p.small-text{font-size:.9rem; line-height:1.8; color:rgba(248,244,236,.6);}
  .footer-bottom{
    border-top:1px solid rgba(248,244,236,.12);
    margin-top:3.5rem;
    padding:1.4rem 0;
    font-size:.8rem;
    color:rgba(248,244,236,.5);
  }
  .social-row a{
    width:38px; height:38px;
    border:1px solid rgba(198,161,91,.4);
    display:inline-flex; align-items:center; justify-content:center;
    margin-right:.6rem;
    transition:all .3s ease;
  }
  .social-row a:hover{background:var(--gold); color:var(--ink); border-color:var(--gold);}

  /* WhatsApp floating button */
  .whatsapp-float{
    position:fixed;
    bottom:26px;
    right:26px;
    background:#25D366;
    color:#fff;
    width:58px; height:58px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.7rem;
    box-shadow:0 10px 26px rgba(0,0,0,.35);
    z-index:1000;
    animation:wa-pulse 2.4s infinite;
  }
  .whatsapp-float:hover{color:#fff; transform:scale(1.06);}
  @keyframes wa-pulse{
    0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}
    70%{box-shadow:0 0 0 14px rgba(37,211,102,0);}
    100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
  }

  /* ---------- WordPress core alignments ---------- */
  .alignleft{float:left; margin:0 1.5rem 1rem 0;}
  .alignright{float:right; margin:0 0 1rem 1.5rem;}
  .aligncenter{display:block; margin:0 auto 1rem;}
  .wp-caption{max-width:100%;}
  .screen-reader-text{position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px;}

  @media (max-width: 991px){
    .top-strip{text-align:center;}
    .hero{min-height:80vh; text-align:center;}
    .hero p.lead{margin-left:auto; margin-right:auto;}
    .welcome, .products, .testimonials{padding:4.5rem 0;}
  }