/*
Theme Name: Wanigarathna World
Theme URI: https://wanigarathnaworld.lk/
Author: Wanigarathna World
Description: WordPress theme for the Wanigarathna World hub site — portals to Electronics and Beauty, plus About, Contact, and legal pages.
Version: 1.0
Requires PHP: 7.4
Text Domain: wanigarathna-world
*/

:root{
  --ink:#F3EFE7;
  --charcoal:#1C1B1A;
  --charcoal-deep:#121110;
  --gold:#C6952C;
  --gold-soft:#E3C77E;
  --teal:#1F3A3A;
  --elec-glow:#33C7FF;
  --beauty-glow:#E7A6B4;
  --max:1100px;
  --serif:'Fraunces', serif;
  --sans:'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--charcoal);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* Header */
.site-header{padding:28px 0;}
.site-header .wrap{display:flex; align-items:center; gap:14px;}
.crest{
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; color:var(--gold);
  flex-shrink:0;
}
.wordmark{font-family:var(--serif); font-weight:600; font-size:1.15rem; letter-spacing:.02em;}

/* Hero */
.hero{padding:60px 0 40px;}
.eyebrow{
  text-transform:uppercase; letter-spacing:.18em; font-size:.75rem;
  color:var(--gold-soft); margin-bottom:18px; font-weight:500;
}
.hero h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  line-height:1.12; margin-bottom:22px;
}
.lede{max-width:560px; color:#CFC9BD; font-size:1.05rem;}

/* Portals */
.portals{padding:20px 0 70px;}
.portal-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.portal{
  position:relative; overflow:hidden;
  background:var(--charcoal-deep);
  border:1px solid #2C2A27;
  border-radius:6px;
  padding:40px 32px;
  display:flex; flex-direction:column; gap:14px;
  min-height:280px;
  transition:transform .35s ease, border-color .35s ease;
}
.portal:hover{transform:translateY(-4px); border-color:var(--gold);}
.portal-glow{
  position:absolute; top:-60px; right:-60px;
  width:200px; height:200px; border-radius:50%;
  filter:blur(60px); opacity:.35; pointer-events:none;
}
.portal--electronics .portal-glow{background:var(--elec-glow);}
.portal--beauty .portal-glow{background:var(--beauty-glow);}
.portal-eyebrow{font-family:var(--serif); font-size:.85rem; color:var(--gold-soft); opacity:.8;}
.portal h2{font-family:var(--serif); font-weight:600; font-size:1.7rem; line-height:1.2;}
.portal p{color:#B9B3A6; font-size:.95rem; max-width:32ch;}
.portal-cta{margin-top:auto; font-weight:600; font-size:.9rem; color:var(--gold); letter-spacing:.02em;}

/* About + Contact */
.about-contact{padding:0 0 80px;}
.about-row{border-top:1px solid #2C2A27; padding-top:36px;}
.about-col{max-width:560px;}
.about-col h3{font-family:var(--serif); font-size:1.3rem; margin-bottom:14px; font-weight:600;}
.about-col p{color:#B9B3A6;}

.contact-row{border-top:1px solid #2C2A27; margin-top:44px; padding-top:36px;}
.contact-row h3{font-family:var(--serif); font-size:1.3rem; margin-bottom:22px; font-weight:600;}
.contact-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
.contact-item{background:var(--charcoal-deep); border:1px solid #2C2A27; border-radius:6px; padding:22px 20px;}
.contact-label{display:block; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--gold-soft); font-weight:600; margin-bottom:10px;}
.contact-item p{color:#CFC9BD; font-size:.95rem;}
.contact-item a{color:var(--gold); font-weight:500;}
.contact-item a:hover{color:var(--gold-soft);}
.contact-note{color:#6E695D; font-size:.78rem; margin-top:18px; font-style:italic;}

/* Generic page (Privacy, Refund, FAQ, ToS, etc.) */
.page-content{padding:60px 0 80px;}
.page-content h1{font-family:var(--serif); font-weight:600; font-size:2.2rem; margin-bottom:8px;}
.page-content .updated{color:#8B8577; font-size:.85rem; margin-bottom:32px;}
.page-content h2{font-family:var(--serif); font-weight:600; font-size:1.3rem; margin:34px 0 12px;}
.page-content h3{font-family:var(--sans); font-weight:600; font-size:1rem; margin:22px 0 8px; color:var(--gold-soft);}
.page-content p{color:#CFC9BD; margin-bottom:14px; max-width:72ch;}
.page-content a{color:var(--gold); text-decoration:underline;}
.page-content ul{color:#CFC9BD; margin:0 0 14px 22px;}

/* Contact form */
.contact-form-wrap{max-width:560px; margin-top:20px;}
.contact-form{display:flex; flex-direction:column; gap:16px;}
.contact-form label{display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:#CFC9BD;}
.contact-form input, .contact-form textarea{
  background:var(--charcoal-deep); border:1px solid #2C2A27; border-radius:6px;
  padding:12px 14px; color:var(--ink); font-family:var(--sans); font-size:.95rem; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--gold);}
.contact-form button{
  margin-top:6px; background:var(--gold); border:none; border-radius:6px; padding:13px 20px;
  font-weight:700; cursor:pointer; color:#1C1B1A; font-size:.95rem; align-self:flex-start;
}
.contact-form button:hover{background:var(--gold-soft);}
.form-notice{padding:14px 16px; border-radius:6px; font-size:.9rem; margin-bottom:20px;}
.form-notice-success{background:rgba(198,149,44,.12); border:1px solid var(--gold);}
.form-notice-error{background:rgba(200,80,80,.12); border:1px solid #C85050;}

/* Footer */
.site-footer{border-top:1px solid #2C2A27; padding:40px 0 26px; font-size:.85rem; color:#8B8577;}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:28px;}
.footer-brand{max-width:280px;}
.footer-brand .wordmark{display:block; margin-bottom:10px;}
.footer-support h4{
  font-family:var(--serif); font-size:.95rem; color:var(--ink); margin-bottom:14px; font-weight:600;
}
.footer-support ul{list-style:none;}
.footer-support li{margin-bottom:9px;}
.footer-support a{color:#B9B3A6;}
.footer-support a:hover{color:var(--gold);}

.payment-methods{margin-top:26px;}
.pm-label{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--gold-soft); margin-bottom:12px; font-weight:600;}
.payment-badges{display:flex; flex-wrap:wrap; gap:8px;}
.pay-badge{width:42px; height:27px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:.58rem; font-weight:800; letter-spacing:.01em; background:#fff; color:#111; overflow:hidden; font-family:var(--sans);}
.pay-amex{background:#1F72CD; color:#fff;}
.pay-applepay{background:#000; color:#fff;}
.pay-diners{background:#0079BE; color:#fff; font-size:.5rem;}
.pay-discover{background:#FF6000; color:#fff; font-size:.5rem;}
.pay-googlepay{background:#fff; color:#3C4043; font-size:.5rem;}
.pay-mastercard{background:radial-gradient(circle at 38% 50%, #EB001B 0 42%, transparent 43%), radial-gradient(circle at 62% 50%, #F79E1B 0 42%, transparent 43%), #fff;}
.pay-unionpay{background:linear-gradient(90deg,#E21836 0 33%, #00447C 33% 66%, #007B34 66% 100%); color:#fff; font-size:.46rem;}
.pay-visa{background:#1A1F71; color:#fff; font-style:italic; font-size:.62rem;}
.footer-bottom{border-top:1px solid #2C2A27; padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer-bottom nav a{margin-left:18px; color:#B9B3A6;}
.footer-bottom nav a:hover{color:var(--gold);}

/* Responsive */
@media (max-width:760px){
  .portal-grid{grid-template-columns:1fr;}
  .hero{padding:40px 0 20px;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-top{flex-direction:column; gap:24px;}
}
@media (max-width:420px){
  .portal{padding:30px 22px;}
}