/*
Theme Name: ValenPaper Studio
Theme URI: https://valenpaperstudio.com
Author: ValenPaper Studio
Description: A custom creative stationery theme with WhatsApp ordering and WordPress blog support.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: valenpaper-studio
*/

:root{
      --pink:#f7b7d2;
      --hot-pink:#e85e9f;
      --purple:#8a5ccf;
      --lavender:#eee4ff;
      --cream:#fffaf5;
      --ink:#2f2340;
      --white:#ffffff;
      --gold:#f3c86a;
      --shadow:0 18px 45px rgba(93,63,120,.14);
      --radius:24px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:Arial, Helvetica, sans-serif;
      background:var(--cream);
      color:var(--ink);
      line-height:1.6;
      overflow-x:hidden;
    }

    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    button{font:inherit}

    .container{
      width:min(1120px,92%);
      margin:auto;
    }

    .announcement{
      background:var(--ink);
      color:#fff;
      text-align:center;
      padding:10px 16px;
      font-size:.92rem;
      letter-spacing:.2px;
    }

    header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,250,245,.92);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(47,35,64,.08);
    }

    .nav{
      min-height:74px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      font-size:1.18rem;
    }

    .brand-mark{
      width:46px;
      height:46px;
      border-radius:16px;
      background:linear-gradient(135deg,var(--hot-pink),var(--purple));
      display:grid;
      place-items:center;
      color:#fff;
      font-size:1.4rem;
      box-shadow:0 10px 24px rgba(138,92,207,.28);
    }

    nav ul{
      display:flex;
      list-style:none;
      gap:28px;
      align-items:center;
      font-weight:700;
      font-size:.95rem;
    }

    .nav-cta,.btn-primary{
      background:linear-gradient(135deg,var(--hot-pink),var(--purple));
      color:#fff;
      padding:12px 20px;
      border-radius:999px;
      box-shadow:0 10px 24px rgba(138,92,207,.24);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-weight:800;
      transition:.25s ease;
    }

    .nav-cta:hover,.btn-primary:hover{transform:translateY(-2px)}
    .menu-btn{display:none;border:0;background:transparent;font-size:1.6rem;cursor:pointer}

    .hero{
      padding:80px 0 60px;
      position:relative;
      isolation:isolate;
    }

    .hero:before,.hero:after{
      content:"";
      position:absolute;
      border-radius:50%;
      filter:blur(5px);
      z-index:-1;
    }
    .hero:before{
      width:320px;height:320px;
      background:rgba(247,183,210,.45);
      top:30px;left:-120px;
    }
    .hero:after{
      width:380px;height:380px;
      background:rgba(238,228,255,.75);
      right:-130px;bottom:-70px;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:56px;
      align-items:center;
    }

    .eyebrow{
      display:inline-block;
      color:var(--purple);
      background:var(--lavender);
      padding:8px 14px;
      border-radius:999px;
      font-weight:800;
      font-size:.9rem;
      margin-bottom:18px;
    }

    h1{
      font-size:clamp(2.7rem,7vw,5.4rem);
      line-height:.98;
      letter-spacing:-3px;
      margin-bottom:22px;
    }

    .gradient-text{
      background:linear-gradient(90deg,var(--hot-pink),var(--purple));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .hero p{
      font-size:1.1rem;
      max-width:620px;
      color:#665a72;
      margin-bottom:28px;
    }

    .hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:30px;
    }

    .btn-secondary{
      border:2px solid rgba(47,35,64,.15);
      padding:11px 20px;
      border-radius:999px;
      font-weight:800;
      background:#fff;
    }

    .trust-row{
      display:flex;
      gap:20px;
      flex-wrap:wrap;
      font-size:.93rem;
      color:#665a72;
      font-weight:700;
    }

    .art-card{
      position:relative;
      min-height:480px;
      border-radius:38px;
      background:linear-gradient(145deg,#fff 0%,#fde8f1 48%,#e8dcff 100%);
      box-shadow:var(--shadow);
      overflow:hidden;
      padding:34px;
    }

    .art-card:before{
      content:"";
      position:absolute;
      width:230px;height:230px;
      border:2px dashed rgba(138,92,207,.35);
      border-radius:50%;
      right:-60px;top:-50px;
    }

    .sample{
      position:absolute;
      border-radius:20px;
      box-shadow:0 16px 30px rgba(47,35,64,.14);
      display:grid;
      place-items:center;
      text-align:center;
      font-weight:900;
      color:#fff;
      padding:20px;
    }

    .notebook{
      width:230px;height:300px;
      background:linear-gradient(160deg,#ed73ae,#8059c8);
      left:58px;top:84px;
      transform:rotate(-7deg);
    }

    .notebook small{
      display:block;
      margin-top:12px;
      font-weight:600;
      opacity:.88;
    }

    .sticker{
      width:150px;height:150px;
      border-radius:50%;
      right:35px;top:58px;
      background:linear-gradient(145deg,#ffd985,#ef8eb9);
      transform:rotate(11deg);
      color:var(--ink);
    }

    .label{
      width:185px;height:105px;
      right:22px;bottom:44px;
      background:#fff;
      color:var(--ink);
      transform:rotate(-5deg);
      border:4px solid var(--pink);
    }

    .section{
      padding:82px 0;
    }

    .section-head{
      text-align:center;
      max-width:720px;
      margin:0 auto 42px;
    }

    .section-head h2{
      font-size:clamp(2rem,4vw,3.4rem);
      line-height:1.05;
      margin-bottom:14px;
      letter-spacing:-1.5px;
    }

    .section-head p{color:#74677f}

    .categories{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }

    .category{
      background:#fff;
      border-radius:22px;
      padding:28px 22px;
      text-align:center;
      box-shadow:0 12px 28px rgba(47,35,64,.08);
      border:1px solid rgba(47,35,64,.05);
      transition:.25s ease;
    }

    .category:hover{transform:translateY(-5px)}
    .category-icon{
      width:64px;height:64px;
      margin:0 auto 16px;
      border-radius:20px;
      background:linear-gradient(145deg,var(--pink),var(--lavender));
      display:grid;
      place-items:center;
      font-size:1.8rem;
    }

    .products{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
    }

    .product{
      background:#fff;
      border-radius:26px;
      overflow:hidden;
      box-shadow:var(--shadow);
      border:1px solid rgba(47,35,64,.06);
    }

    .product-visual{
      height:225px;
      display:grid;
      place-items:center;
      font-size:4rem;
      position:relative;
    }

    .product:nth-child(1) .product-visual{background:linear-gradient(135deg,#fbd2e4,#f6a9cc)}
    .product:nth-child(2) .product-visual{background:linear-gradient(135deg,#e9ddff,#bda5ec)}
    .product:nth-child(3) .product-visual{background:linear-gradient(135deg,#fff1bf,#f8c981)}
    .product:nth-child(4) .product-visual{background:linear-gradient(135deg,#d9f7f1,#9fded4)}
    .product:nth-child(5) .product-visual{background:linear-gradient(135deg,#f6d9ff,#dcb5f0)}
    .product:nth-child(6) .product-visual{background:linear-gradient(135deg,#ffd9d9,#ffa6b7)}

    .badge{
      position:absolute;
      top:16px;left:16px;
      background:#fff;
      color:var(--purple);
      padding:7px 11px;
      border-radius:999px;
      font-size:.78rem;
      font-weight:900;
      box-shadow:0 8px 18px rgba(47,35,64,.08);
    }

    .product-body{padding:22px}
    .product-body h3{font-size:1.2rem;margin-bottom:6px}
    .product-body p{color:#74677f;font-size:.94rem;margin-bottom:18px;min-height:48px}
    .product-footer{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .price{font-size:1.25rem;font-weight:900}
    .order-btn{
      border:0;
      cursor:pointer;
      background:var(--ink);
      color:#fff;
      padding:10px 14px;
      border-radius:999px;
      font-weight:800;
    }

    .custom{
      background:linear-gradient(135deg,var(--ink),#514067);
      color:#fff;
      border-radius:32px;
      padding:48px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:30px;
      align-items:center;
      overflow:hidden;
      position:relative;
    }

    .custom:after{
      content:"✦";
      font-size:12rem;
      color:rgba(255,255,255,.06);
      position:absolute;
      right:100px;
      top:-50px;
    }

    .custom h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.06;margin-bottom:12px}
    .custom p{max-width:680px;color:#ded6e7}

    .steps{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
    }

    .step{
      background:#fff;
      padding:28px;
      border-radius:24px;
      box-shadow:0 12px 28px rgba(47,35,64,.07);
    }

    .step-number{
      width:44px;height:44px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg,var(--hot-pink),var(--purple));
      font-weight:900;
      margin-bottom:16px;
    }

    .contact{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:34px;
      align-items:start;
    }

    .contact-card{
      background:linear-gradient(145deg,#fde8f1,#eee4ff);
      border-radius:28px;
      padding:36px;
      min-height:100%;
    }

    .contact-card h2{font-size:2.4rem;line-height:1.08;margin-bottom:14px}
    .contact-card p{color:#665a72;margin-bottom:22px}
    .contact-list{display:grid;gap:14px;font-weight:800}

    form{
      background:#fff;
      border-radius:28px;
      padding:32px;
      box-shadow:var(--shadow);
    }

    .field{margin-bottom:16px}
    label{display:block;font-weight:800;margin-bottom:7px}
    input,select,textarea{
      width:100%;
      padding:14px 15px;
      border-radius:14px;
      border:1px solid rgba(47,35,64,.16);
      background:#fff;
      color:var(--ink);
      outline:none;
    }
    input:focus,select:focus,textarea:focus{border-color:var(--purple)}
    textarea{min-height:130px;resize:vertical}

    footer{
      background:var(--ink);
      color:#fff;
      padding:48px 0 22px;
      margin-top:70px;
    }

    .footer-grid{
      display:grid;
      grid-template-columns:1.3fr 1fr 1fr;
      gap:30px;
      margin-bottom:34px;
    }
    footer p, footer a{color:#d9d0e3}
    footer h4{margin-bottom:12px}
    .copyright{
      border-top:1px solid rgba(255,255,255,.12);
      padding-top:20px;
      text-align:center;
      color:#cbbfd4;
      font-size:.9rem;
    }

    .floating-whatsapp{
      position:fixed;
      right:20px;
      bottom:20px;
      z-index:60;
      width:58px;height:58px;
      border-radius:50%;
      background:#25D366;
      color:#fff;
      display:grid;
      place-items:center;
      font-size:1.55rem;
      box-shadow:0 12px 30px rgba(0,0,0,.2);
    }

    @media (max-width:900px){
      .hero-grid,.contact{grid-template-columns:1fr}
      .categories{grid-template-columns:repeat(2,1fr)}
      .products{grid-template-columns:repeat(2,1fr)}
      .steps{grid-template-columns:1fr}
      .custom{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      .art-card{min-height:430px}
    }

    @media (max-width:700px){
      nav ul{
        display:none;
        position:absolute;
        left:4%;
        right:4%;
        top:76px;
        background:#fff;
        padding:22px;
        border-radius:20px;
        flex-direction:column;
        box-shadow:var(--shadow);
      }
      nav ul.show{display:flex}
      .menu-btn{display:block}
      .nav-cta{display:none}
      h1{letter-spacing:-2px}
      .hero{padding-top:50px}
      .categories,.products,.footer-grid{grid-template-columns:1fr}
      .custom{padding:34px 24px}
      .art-card{min-height:390px}
      .notebook{left:24px;top:80px;width:200px;height:270px}
      .sticker{width:125px;height:125px;right:18px}
      .label{width:160px;right:10px}
    }


/* WordPress additions */
body.admin-bar header { top: 32px; }
.site-main { min-height: 55vh; }
.blog-shell { padding: 72px 0; }
.blog-hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 42px;
}
.blog-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  margin-bottom: 16px;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(47,35,64,.06);
}
.blog-card-image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg,#fbd2e4,#e9ddff);
}
.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card-placeholder {
  min-height: 220px;
  display: grid;
  place-items: center;
  font-size: 3.5rem;
}
.blog-card-body { padding: 24px; }
.blog-card-body h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin-bottom: 10px;
}
.post-meta {
  color: #74677f;
  font-size: .9rem;
  margin-bottom: 12px;
}
.blog-card-body p { color: #665a72; margin-bottom: 18px; }
.read-more {
  font-weight: 900;
  color: var(--purple);
}
.single-wrap, .page-wrap {
  width: min(850px, 92%);
  margin: 0 auto;
  padding: 72px 0;
}
.single-wrap h1, .page-wrap h1 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: 16px;
}
.single-featured {
  border-radius: 28px;
  overflow: hidden;
  margin: 28px 0;
  box-shadow: var(--shadow);
}
.entry-content {
  font-size: 1.07rem;
  color: #4e4358;
}
.entry-content > * { margin-bottom: 1.15em; }
.entry-content h2, .entry-content h3 {
  color: var(--ink);
  line-height: 1.2;
  margin-top: 1.5em;
}
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content a { color: var(--purple); text-decoration: underline; }
.wp-block-image img { border-radius: 20px; }
.pagination, .nav-links {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 38px;
}
.page-numbers, .post-page-numbers {
  background: #fff;
  border-radius: 999px;
  padding: 9px 14px;
  box-shadow: 0 8px 18px rgba(47,35,64,.08);
}
.page-numbers.current { background: var(--purple); color: #fff; }
.no-posts {
  background: #fff;
  border-radius: 24px;
  padding: 34px;
  text-align: center;
  box-shadow: var(--shadow);
}
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
  body.admin-bar header { top: 46px; }
}
@media (max-width: 700px) {
  .blog-grid { grid-template-columns: 1fr; }
}