/*
Theme Name: OJUE TECH
Theme URI: https://ojuetech.com
Author: OJ UNIQUE EMPIRE LIMITED
Author URI: https://ojuetech.com
Description: Official website theme for OJUE TECH — web design packages, a themes library, and a plugins library, all fully editable from the WordPress dashboard. Order buttons send buyers straight to WhatsApp.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ojue-tech
*/

/* ===========================================================
   Design tokens — mirrored as CSS variables and overridden
   inline (see inc/customizer.php) from Customizer color values.
   =========================================================== */
:root{
  --navy: #10202E;
  --navy-soft: #17303F;
  --paper: #F4F2EC;
  --paper-dim: #E8E4D9;
  --gold: #B4863A;
  --gold-bright: #D3A75A;
  --ink: #1A2530;
  --line: rgba(16,32,46,0.16);
  --line-on-navy: rgba(244,242,236,0.18);
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1.55;
}

h1,h2,h3,h4,.display{
  font-family: 'Spectral', serif;
  font-weight: 500;
  color: var(--navy);
  margin: 0;
}

a{ color: inherit; }
img{ max-width: 100%; display:block; }
.wrap{ max-width: 1040px; margin: 0 auto; padding: 0 28px; }
.screen-reader-text{ position:absolute; left:-9999px; }

/* ---------- SITE HEADER / NAV ---------- */
.site-header{
  background: var(--navy);
  color: var(--paper);
  border-bottom: 6px solid var(--gold);
}
.masthead-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 20px 0; flex-wrap: wrap; gap: 14px;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding img{ max-height: 40px; }
.site-title{ font-family:'Spectral',serif; font-size:20px; color: var(--paper); text-decoration:none; }
.site-title a{ text-decoration:none; color:inherit; }

.primary-nav ul{ list-style:none; display:flex; gap: 26px; margin:0; padding:0; flex-wrap:wrap; }
.primary-nav a{
  text-decoration:none; color: rgba(244,242,236,0.82); font-size: 14.5px;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a{ color: var(--paper); border-bottom-color: var(--gold); }

.nav-toggle{ display:none; background:none; border:1px solid var(--line-on-navy); color: var(--paper); padding: 8px 12px; font-size: 14px; }

@media (max-width: 720px){
  .nav-toggle{ display:inline-block; }
  .primary-nav{ display:none; width:100%; }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; gap: 14px; padding: 14px 0 4px; }
}

/* ---------- HERO (used on front page and archives) ---------- */
.hero{
  background: var(--navy);
  color: var(--paper);
  padding: 64px 0 56px;
}
.hero h1{ color: var(--paper); font-size: 40px; line-height: 1.15; max-width: 640px; }
.hero .sub{ max-width: 560px; color: rgba(244,242,236,0.78); font-size: 16px; margin-top: 16px; }
.hero-buttons{ display:flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; }

.btn{
  display:inline-block; text-decoration:none; font-family:'IBM Plex Sans',sans-serif;
  font-size: 14.5px; font-weight:600; padding: 13px 22px; border: 1px solid transparent;
  cursor:pointer;
}
.btn-gold{ background: var(--gold); color: var(--navy); }
.btn-gold:hover{ background: var(--gold-bright); }
.btn-outline{ background: transparent; border-color: var(--line-on-navy); color: var(--paper); }
.btn-outline:hover{ border-color: var(--gold); color: var(--gold-bright); }
.btn-order{ background: var(--gold); color: #FFFFFF; }
.btn-order:hover{ background: var(--gold-bright); color: #FFFFFF; }

/* ---------- HOME PAGE LIBRARY LINKS ---------- */
.library-links{ padding: 56px 0 80px; }
.library-links .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.library-card{
  border: 1px solid var(--line); padding: 40px 30px; text-align:left;
  display:flex; flex-direction:column; gap:14px;
}
.library-card h2{ font-size: 24px; }
.library-card p{ font-size: 14.5px; color:#40505E; margin:0; }
.library-card .btn{ align-self:flex-start; margin-top: 8px; }

@media (max-width: 720px){
  .library-links .grid{ grid-template-columns: 1fr; }
  .hero h1{ font-size: 30px; }
}

/* ---------- PACKAGES PAGE ---------- */
.intro{ padding: 40px 0 8px; }
.intro p{ max-width: 640px; font-size: 15px; color: #40505E; }

.tiers{ padding: 20px 0 80px; }
.tier{
  border-top: 1px solid var(--line);
  padding: 44px 0;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
}
.tier:last-child{ border-bottom: 1px solid var(--line); }
.tier-num{ font-family:'Spectral', serif; font-style: italic; color: var(--gold); font-size: 14px; margin-bottom: 10px; display:block; }
.tier-name{ font-size: 26px; margin-bottom: 10px; }
.tier-price{ font-family:'Spectral', serif; font-size: 21px; color: var(--navy); margin-bottom: 4px; }
.tier-price small{ font-size: 13px; color:#6B7885; font-family:'IBM Plex Sans',sans-serif; display:block; margin-top:4px; }
.tier-tag{ display:inline-block; margin-top: 14px; font-size: 12.5px; color: var(--navy); background: var(--paper-dim); border: 1px solid var(--line); padding: 5px 10px; }

.tier-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.field h4{ font-weight:600; font-size: 13px; color: var(--gold); margin: 0 0 8px; padding-bottom:6px; border-bottom: 1px solid var(--line); }
.field ul{ margin:0; padding-left: 18px; font-size: 14.5px; color: #2E3B47; }
.field li{ margin-bottom: 6px; }
.field p{ margin:0; font-size: 14.5px; color: #2E3B47; }
.field.expect{ grid-column: 1 / -1; }
.field.expect ul{ columns: 2; column-gap: 32px; }
.field.expect li{ break-inside: avoid; }
.tier-order{ margin-top: 22px; }

.tier.flagship{ background: var(--navy); color: var(--paper); margin: 0 -28px; padding: 44px 28px; border-top:none; }
.tier.flagship .tier-name,.tier.flagship .tier-price{ color: var(--paper); }
.tier.flagship .tier-price small{ color: rgba(244,242,236,0.6); }
.tier.flagship .field h4{ color: var(--gold-bright); border-bottom-color: var(--line-on-navy); }
.tier.flagship .field ul,.tier.flagship .field p{ color: rgba(244,242,236,0.85); }
.tier.flagship .tier-tag{ background: rgba(244,242,236,0.08); border-color: var(--line-on-navy); color: var(--paper); }

.fine{ border-top: 1px solid var(--line); padding: 32px 0 64px; font-size: 13.5px; color: #5B6975; }
.fine h3{ font-size: 15px; margin-bottom: 10px; color: var(--navy); }
.fine ul{ padding-left: 18px; margin: 0; }
.fine li{ margin-bottom: 6px; }

@media (max-width: 720px){
  .tier{ grid-template-columns: 1fr; }
  .tier-grid{ grid-template-columns: 1fr; }
  .field.expect ul{ columns: 1; }
  .tier.flagship{ margin: 0 -20px; padding: 36px 20px; }
}

/* ---------- LIBRARY ARCHIVES (Themes / Plugins) ---------- */
.library-archive{ padding: 48px 0 80px; }
.library-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
.library-item{ border: 1px solid var(--line); display:flex; flex-direction:column; }
.library-item .thumb{ aspect-ratio: 16/10; overflow:hidden; background: var(--paper-dim); }
.library-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.library-item .body{ padding: 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.library-item h3{ font-size: 18px; }
.library-item .excerpt{ font-size: 14px; color:#40505E; flex:1; }
.library-item .price{ font-family:'Spectral',serif; font-size: 18px; color: var(--navy); }
.no-items{ padding: 40px 0; color:#5B6975; }

@media (max-width: 900px){ .library-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .library-grid{ grid-template-columns: 1fr; } }

/* ---------- SINGLE LIBRARY ITEM ---------- */
.single-library{ padding: 48px 0 80px; }
.single-library .thumb{ margin-bottom: 28px; border: 1px solid var(--line); }
.single-library .price-row{ display:flex; align-items:center; gap: 20px; margin: 20px 0 28px; flex-wrap: wrap; }
.single-library .price{ font-family:'Spectral',serif; font-size: 26px; color: var(--navy); }
.single-library .content{ font-size: 15px; color:#2E3B47; max-width: 720px; }
.back-link{ display:inline-block; margin-bottom: 20px; font-size: 13.5px; color: var(--gold); text-decoration:none; }

/* ---------- FOOTER ---------- */
.site-footer{ background: var(--navy); color: rgba(244,242,236,0.65); padding: 26px 0; font-size: 13px; }
.site-footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }