/*
Theme Name: TRON Network Theme
Theme URI: https://dev.com.vn
Author: TRON.com.vn
Version: 1.6.1
Text Domain: studio-portfolio-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --gold:#9A6E1A; --gold-mid:#B8892A; --gold-light:#D4A843;
  --gold-pale:#F5E6C0; --gold-wash:#FDF8EE;
  --gold-border:#E2CC90; --gold-border2:#C9A84C;
  --bg:#FDFAF4; --bg2:#FFFFFF; --bg3:#FBF6EA;
  --text:#2C1F08; --text-muted:#6B5530; --text-dim:#A8916A;
  --radius:5px; --radius-md:10px;
  --font:'Inter',sans-serif;
  --shadow:0 1px 3px rgba(140,100,20,.07),0 4px 14px rgba(140,100,20,.06);
  --shadow-hover:0 4px 14px rgba(140,100,20,.13),0 12px 32px rgba(140,100,20,.09);
  --max-w:1250px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--gold)}

/* ════ HEADER ════ */
.site-header{
  background:var(--bg2);border-bottom:1px solid var(--gold-border);
  position:sticky;top:0;z-index:100;
  box-shadow:0 1px 8px rgba(140,100,20,.07);
}
.site-header-inner{
  max-width:var(--max-w);margin:0 auto;
  padding:0 2rem;height:60px;
  display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:1.25rem;
}

/* Logo */
.site-logo{display:flex;align-items:baseline;gap:1px;text-decoration:none;flex-shrink:0}
.site-logo-main{font-size:1.35rem;font-weight:600;color:var(--gold)}
.site-logo-dot{font-size:1.35rem;font-weight:600;color:var(--gold-light)}
.site-logo-ext{font-size:1.35rem;font-weight:400;color:var(--text-muted)}

/* Header search - center */
.site-header-search{flex:1;max-width:480px;margin:0 auto}
.header-search-form{width:100%}
.header-search-inner{
  display:flex;align-items:center;gap:0;
  border:1px solid var(--gold-border);border-radius:var(--radius-md);
  background:var(--bg3);padding:0 12px;
  transition:border-color .18s, box-shadow .18s;
}
.header-search-inner:focus-within{
  border-color:var(--gold-mid);
  box-shadow:0 0 0 3px rgba(154,110,26,.1);
  background:var(--bg2);
}
.header-search-inner svg{color:var(--text-dim);flex-shrink:0;margin-right:8px}
.header-search-input{
  flex:1;border:none;background:transparent;
  padding:9px 0;font-family:var(--font);font-size:13px;
  color:var(--text);outline:none;
}
.header-search-input::placeholder{color:var(--text-dim)}

/* Nav */
.site-nav{display:flex;align-items:center;gap:2px;flex-shrink:0}
.site-nav a{font-family:var(--font);font-size:13px;font-weight:500;color:var(--text-muted);padding:6px 12px;border-radius:var(--radius);text-decoration:none;transition:all .15s;white-space:nowrap}
.site-nav a:hover,.site-nav a.current-menu-item{color:var(--gold);background:var(--gold-wash)}
.site-nav a.current-menu-item{font-weight:600}
.site-nav .nav-cta{background:var(--gold);color:#fff!important;padding:7px 16px;border-radius:var(--radius)}
.site-nav .nav-cta:hover{background:var(--gold-mid)}

/* Mobile toggle */
.mobile-menu-toggle{display:none;background:none;border:1px solid var(--gold-border);border-radius:var(--radius);padding:7px 10px;cursor:pointer;color:var(--text-muted);font-size:1.1rem;flex-shrink:0}

/* Mobile nav panel */
.mobile-nav-overlay{display:none;position:fixed;inset:0;background:rgba(44,31,8,.42);z-index:200}
.mobile-nav-panel{position:fixed;top:0;right:-300px;width:280px;height:100vh;background:var(--bg2);z-index:201;padding:1.5rem;transition:right .28s ease;overflow-y:auto}
.mobile-nav-panel.open{right:0;box-shadow:var(--shadow-hover)}
.mobile-nav-close{float:right;background:none;border:none;font-size:1.25rem;cursor:pointer;color:var(--text-dim);margin-bottom:1.25rem}
.mobile-nav-panel .site-nav{flex-direction:column;align-items:flex-start;gap:.25rem}
.mobile-nav-panel .site-nav a{width:100%;padding:.75rem 1rem;font-size:14px}

/* ════ SITE CONTENT ════ */
.site-content{min-height:calc(100vh - 60px)}

/* ════ MAX-WIDTH WRAPPER ════ */
/* Tất cả nội dung trang đơn, blog, breadcrumb = 1250px */
.spf-single-wrap,
.spf-post-wrap,
.spf-breadcrumb,
.spf-related-inner,
.spf-tax-hero-inner {
  max-width:var(--max-w);
  margin-left:auto;
  margin-right:auto;
}

/* Tax hero */
.spf-tax-hero-wrap{background:var(--bg2);border-bottom:1px solid var(--gold-border)}
.spf-tax-hero-inner{padding:1.5rem 2rem}
.spf-tax-eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-mid);margin-bottom:.375rem;font-weight:600}
.spf-tax-title{font-size:1.625rem;font-weight:600;color:var(--text);margin-bottom:.25rem}
.spf-tax-desc{font-size:14px;color:var(--text-muted);margin-bottom:.25rem}
.spf-tax-count{font-size:12px;color:var(--text-dim)}

/* Breadcrumb */
.spf-breadcrumb-wrap{background:var(--bg2);border-bottom:1px solid var(--gold-border)}
.spf-breadcrumb{padding:.75rem 2rem;font-size:12px;color:var(--text-dim);display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.spf-breadcrumb a{color:var(--gold);text-decoration:none}
.spf-breadcrumb a:hover{text-decoration:underline}
.spf-breadcrumb-sep{color:var(--gold-border2)}

/* ════ FOOTER ════ */
.site-footer{border-top:1px solid var(--gold-border);background:var(--bg2)}
.footer-top{max-width:var(--max-w);margin:0 auto;padding:2rem 2rem 1.5rem;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.footer-col-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:.75rem}
.footer-col-desc{font-size:13px;color:var(--text-muted);line-height:1.65}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.footer-links li a{font-size:13px;color:var(--text-muted);text-decoration:none;transition:color .15s}
.footer-links li a:hover{color:var(--gold)}
.footer-social{display:flex;gap:.375rem;flex-wrap:wrap;margin-top:.875rem}
.footer-social-link{font-size:12px;padding:4px 11px;border-radius:10px;background:var(--gold-pale);border:1px solid var(--gold-border);color:var(--gold);text-decoration:none;font-weight:500;transition:all .15s}
.footer-social-link:hover{background:var(--gold);color:#fff}
.footer-bottom{border-top:1px solid var(--gold-border);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:12px;color:var(--text-dim)}
.footer-bottom a{color:var(--gold);text-decoration:none}

/* ════ ENTRY CONTENT ════ */
.entry-content h1,.entry-content h2,.entry-content h3{color:var(--text);margin-bottom:.625rem;margin-top:1.25rem;font-weight:600}
.entry-content p{margin-bottom:.875rem;color:var(--text-muted);line-height:1.75}
.entry-content ul,.entry-content ol{padding-left:1.5rem;margin-bottom:.875rem;color:var(--text-muted)}
.entry-content a{color:var(--gold)}
.entry-content blockquote{border-left:3px solid var(--gold);padding:.75rem 1rem;background:var(--gold-wash);margin:1.25rem 0;color:var(--text-muted)}
.spf-post-meta-bar{display:flex;gap:1rem;flex-wrap:wrap;font-size:12px;color:var(--text-dim);margin-bottom:1.375rem;padding-bottom:.875rem;border-bottom:1px solid var(--gold-border)}

/* Page content */
.spf-fullwidth-page{}
.spf-page-content{max-width:var(--max-w);margin:0 auto;padding:2rem}

/* ════ RESPONSIVE ════ */
@media(max-width:900px){
  .site-header-inner{grid-template-columns:auto 1fr auto;gap:.875rem;padding:0 1.25rem}
  .site-nav{display:none}
  .mobile-menu-toggle{display:flex}
  .site-header-search{max-width:100%}
  .footer-top{grid-template-columns:1fr 1fr;padding:1.5rem 1.25rem}
  .footer-bottom{padding:.875rem 1.25rem;flex-direction:column;text-align:center}
  .spf-breadcrumb{padding:.625rem 1.25rem}
  .spf-tax-hero-inner{padding:1.25rem}
}
@media(max-width:540px){
  .site-header-inner{grid-template-columns:auto 1fr auto;padding:0 1rem}
  .site-header-search{display:none} /* hidden on very small - use mobile menu search */
  .footer-top{grid-template-columns:1fr 1fr;gap:1rem}
  body{padding-bottom:68px}
}