/*
Theme Name: Follow the Orient
Theme URI: https://www.followtheorient.com
Author: Follow the Orient
Author URI: https://www.followtheorient.com
Description: Custom editorial theme for Follow the Orient — bilingual book procurement, publishing and design services.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: fto
*/

:root{
  --ink:#1E3A56;
  --ink-soft:#35526B;
  --paper:#FFFFFF;
  --paper-tint:#F5F8FA;
  --seal:#4F8FC4;
  --seal-dark:#386F9E;
  --jade:#4F7869;
  --ochre:#C08829;
  --stone:#5C6570;
  --stone-light:#99A3AC;
  --accent:#C2402F;
  --accent-dark:#9A311F;
  --line: rgba(30,58,82,0.12);
  --font-en: 'Source Serif 4', serif;
  --font-zh: 'Noto Serif SC', serif;
  --font-zh-brush: 'Ma Shan Zheng', cursive;
  --font-body: 'Source Sans 3', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
a{color:inherit;}

/* NAV */
nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:76px;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--font-en); font-weight:700; font-size:20px; letter-spacing:-0.01em;}
.logo .zh{font-family:var(--font-zh); font-size:15px; color:var(--stone); font-weight:700;}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{text-decoration:none; font-size:15px; font-weight:600; color:var(--ink);}
.nav-links a:hover{color:var(--seal-dark);}
.nav-icons{display:flex; align-items:center; gap:14px;}
.icon-btn{position:relative; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; background:none; cursor:pointer; color:var(--ink); text-decoration:none; transition:border-color 140ms ease, background 140ms ease;}
.icon-btn:hover{border-color:var(--seal); background:var(--paper-tint);}
.cart-count{position:absolute; top:-6px; right:-6px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;}

/* BUTTONS */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:2px; font-size:14.5px; font-weight:700; text-decoration:none; cursor:pointer; border:1px solid transparent;}
.btn-light{background:#fff; color:var(--ink); border:1px solid var(--line);}
.btn-light:hover{background:#EDEFF1;}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:#fff;}
.btn-primary{background:var(--seal); color:#fff;}
.btn-primary:hover{background:var(--seal-dark);}
.btn-accent{background:var(--accent); color:#fff;}
.btn-accent:hover{background:var(--accent-dark);}

/* HERO — now using a light background image (header-bg-v3.jpg), so text
   and buttons switched to dark-on-light instead of white-on-dark. */
.hero{position:relative; min-height:560px; display:flex; align-items:flex-end; overflow:hidden; background:url('assets/images/header-bg-v4.jpg') center/cover no-repeat, var(--paper-tint);}
.hero::after{content:""; position:absolute; inset:0; background: rgba(255,255,255,0.5);}
.hero-content{position:relative; z-index:2; padding:0 32px 56px; max-width:1200px; margin:0 auto; width:100%; color:var(--ink);}
.hero-eyebrow{font-family:var(--font-mono); font-size:15px; letter-spacing:0.12em; text-transform:uppercase; opacity:0.85; margin-bottom:16px; transform:translateY(-3.5cm);}
.hero h1{font-family:var(--font-en); font-weight:700; font-size:46px; line-height:1.18; max-width:980px;}
.hero h1 .zh{display:block; font-family:var(--font-zh-brush); font-weight:400; font-size:34px; letter-spacing:0.04em; opacity:0.9; margin-top:10px;}
.hero p{font-size:16.5px; max-width:760px; margin-top:20px; opacity:0.85;}
.hero-ctas{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}

section{padding:64px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:32px; flex-wrap:wrap; gap:12px;}
.section-head h2{font-family:var(--font-en); font-weight:700; font-size:26px;}
.section-head .see-all{font-size:13.5px; font-weight:600; text-decoration:none; color:var(--accent); white-space:nowrap;}

/* SERIES ENTRY CARDS (Shop your next order) — 3 book-series/imprint cards,
   each linking through to the shop; swap the hrefs on front-page.php for
   the matching WooCommerce category archive once those categories exist. */
.series-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.series-card{background:var(--paper-raised, #fff); text-decoration:none; color:inherit; text-align:center; padding:36px 28px; border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 20px -14px rgba(30,58,86,0.25); transition:box-shadow 160ms ease, transform 160ms ease;}
.series-card:hover{box-shadow:0 16px 30px -20px rgba(30,58,86,0.3); transform:translateY(-3px);}
.series-card-image{width:150px; height:150px; margin:0 auto 20px;}
.series-card-image img{width:100%; height:100%; object-fit:contain;}
.series-card h3{font-family:var(--font-en); font-weight:600; font-size:19px; margin-bottom:10px; line-height:1.3;}
.series-card p{font-size:14px; color:var(--stone); line-height:1.55; margin-bottom:16px;}
.series-card .series-cta{font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent);}

/* SERVICES — same background photo as Hero/Institutional, light overlay + dark text/cards for consistency */
#services{background: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url('assets/images/header-bg-v4.jpg') center center/cover no-repeat fixed;}

/* CATEGORY TILES */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.tile{background:var(--paper-raised, #fff); text-decoration:none; color:inherit; text-align:center; padding:30px 18px; border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 20px -14px rgba(30,58,86,0.25); transition:box-shadow 160ms ease, transform 160ms ease;}
.tile:hover{box-shadow:0 16px 30px -20px rgba(30,58,86,0.3); transform:translateY(-3px);}
.tile-icon{width:88px; height:88px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;}
.tile-icon img{max-width:74px; max-height:74px; width:auto; height:auto;}
.tile h3{font-family:var(--font-en); font-weight:600; font-size:16.5px; margin-bottom:8px;}
.tile p{font-size:13.5px; color:var(--stone); line-height:1.5;}

/* SERVICE DETAIL sections (procurement / publishing / design) */
.service-detail{border-top:1px solid var(--line);}
.service-detail-grid{display:flex; align-items:center; gap:56px;}
.service-detail-media{flex:0 0 280px; width:280px; aspect-ratio:1/1; border-radius:12px; background:var(--paper-tint); display:flex; align-items:center; justify-content:center; padding:30px;}
.service-detail-copy{flex:1; min-width:0;}
.service-detail-media img{max-width:70%; max-height:70%; width:auto; height:auto;}
.service-detail-tag{font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; color:var(--stone-light); text-transform:uppercase;}
.service-detail-copy h2{font-family:var(--font-en); font-weight:700; font-size:30px; margin-top:8px; margin-bottom:14px;}
.service-detail-copy p.lead{color:var(--stone); font-size:16.5px; max-width:600px; margin-bottom:20px;}
.service-detail-list{list-style:none; margin-bottom:26px;}
.service-detail-list li{position:relative; padding-left:24px; margin-bottom:10px; font-size:15px; color:var(--ink-soft); max-width:600px;}
.service-detail-list li::before{content:"—"; position:absolute; left:0; color:var(--seal);}
.service-detail-ctas{display:flex; gap:14px; flex-wrap:wrap;}

/* WOOCOMMERCE SHOP ARCHIVE — match the rest of the site */
.woocommerce-wrap{padding-top:48px; padding-bottom:64px;}
.woocommerce .page-title,
.woocommerce-products-header__title{font-family:var(--font-en); font-weight:700; font-size:32px; color:var(--ink); margin-bottom:8px;}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{font-family:var(--font-body); font-size:14px; color:var(--stone);}
.woocommerce .woocommerce-ordering select{font-family:var(--font-body); font-size:14px; border:1px solid var(--line); border-radius:2px; padding:6px 10px; color:var(--ink);}

.woocommerce ul.products{display:grid !important; grid-template-columns:repeat(4, 1fr); grid-auto-flow:row dense; gap:28px; list-style:none; margin:56px 0 0; padding:0;}
.woocommerce ul.products li.product{width:auto !important; margin:0 !important; float:none !important; visibility:visible !important; opacity:1 !important;}
.woocommerce ul.products li.product:empty,
.woocommerce ul.products li:not(.product){display:none !important;}
.woocommerce ul.products > *:not(li.product){display:none !important;}
.woocommerce ul.products li.product:first-child:not(:has(img)):not(:has(a)){display:none !important;}
.woocommerce ul.products li.product:not(:has(a)){display:none !important;}
.woocommerce ul.products li.product img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px; box-shadow:0 10px 24px -14px rgba(30,58,86,0.3); margin-bottom:14px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-en); font-weight:600; font-size:16px; line-height:1.35; color:var(--ink); margin:0 0 6px;}
.woocommerce ul.products li.product .price{font-family:var(--font-mono); font-size:14px; color:var(--stone); display:block; margin-bottom:10px;}
.woocommerce ul.products li.product .price ins{text-decoration:none; color:var(--accent);}
.woocommerce ul.products li.product .button{display:inline-block; width:100%; text-align:center; background:none; border:1px solid var(--seal); color:var(--seal); border-radius:2px; padding:9px 12px; font-family:var(--font-body); font-size:13px; font-weight:700; text-transform:none; box-shadow:none;}
.woocommerce ul.products li.product .button:hover{background:var(--seal); color:#fff;}
.woocommerce ul.products li.product .onsale{background:var(--accent); font-family:var(--font-mono); font-size:10px; text-transform:uppercase; border-radius:2px; min-height:auto; min-width:auto; padding:4px 8px; line-height:1.4; top:10px; left:10px;}

.woocommerce nav.woocommerce-pagination ul{border:none; gap:8px; display:flex;}
.woocommerce nav.woocommerce-pagination ul li{border:none;}
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{font-family:var(--font-body); border:1px solid var(--line); border-radius:2px; color:var(--ink);}
.woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current{background:var(--seal); border-color:var(--seal); color:#fff;}

@media (max-width:900px){
  .woocommerce ul.products{grid-template-columns:repeat(2, 1fr);}
}

/* INSTITUTIONAL — same background photo as Hero/Services, light overlay + dark text */
.institutional{background:#fff; border:1px solid var(--line); border-radius:6px; padding:52px 44px;}
.inst-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center;}
.institutional h2{font-family:var(--font-en); font-weight:700; font-size:34px; margin-bottom:16px; color:var(--ink);}
.institutional p.lead{color:var(--stone); font-size:18px; margin-bottom:24px;}
.inst-list{list-style:none;}
.inst-list li{display:flex; gap:12px; padding:16px 0; border-top:1px solid var(--line); font-size:17px;}
.inst-list li:first-child{border-top:none;}
.inst-list b{font-family:var(--font-en); font-weight:600; display:block; margin-bottom:4px; font-size:18px; color:var(--ink);}
.inst-list span{color:var(--stone); font-size:15.5px;}

/* COMMUNITY */
.community{border-top:1px solid var(--line);}
.community .service-detail-copy p.lead{margin-bottom:26px;}
.community-items{list-style:none; display:flex; gap:40px; flex-wrap:wrap;}
.community-items a{display:flex; align-items:center; gap:14px; color:var(--ink); text-decoration:none; font-family:var(--font-en); font-size:24px; font-weight:700;}
.community-items a:hover{color:var(--seal);}
.community-icon-circle{flex-shrink:0; width:52px; height:52px; border-radius:50%; border:1.5px solid var(--seal); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:border-color 140ms ease, transform 140ms ease;}
.community-icon-circle img{width:80%; height:80%; object-fit:contain;}
.community-items a:hover .community-icon-circle{border-color:var(--accent); transform:scale(1.06);}

/* NEWSLETTER + FOOTER */
.newsletter{background: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url('assets/images/header-bg-v4.jpg') center center/cover no-repeat fixed; color:var(--ink); padding:56px 0;}
.newsletter p{opacity:0.75;}
.newsletter-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.newsletter h2{font-family:var(--font-en); font-weight:700; font-size:24px; margin-bottom:8px;}
.newsletter p{font-size:14px; opacity:0.85;}
.newsletter form{display:flex; gap:10px; flex-wrap:wrap;}
.newsletter input{height:44px; padding:0 16px; border-radius:2px; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:var(--font-body); font-size:14px; min-width:240px;}
footer.fto-footer{padding:48px 0 36px; border-top:1px solid var(--line); margin-top:12px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.foot-links{display:flex; gap:30px; flex-wrap:wrap;}
.foot-links a{text-decoration:none; color:var(--stone); font-size:13.5px;}
.foot-bottom{margin-top:32px; padding-top:18px; font-size:12px; color:var(--stone-light); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

.reveal{opacity:0; transform:translateY(14px); transition:opacity 550ms ease, transform 550ms ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (max-width:900px){
  .hero{height:auto; padding-top:64px;}
  .hero h1{font-size:36px;}
  .tiles{grid-template-columns:repeat(2,1fr);}
  .series-grid{grid-template-columns:1fr;}
  .inst-grid{grid-template-columns:1fr;}
  .service-detail-grid{flex-direction:column; gap:28px;}
  .service-detail-media{width:100%; max-width:220px; margin:0 auto;}
  .nav-links a:not(:last-child){display:none;}
}