/*
Theme Name: Hearthlands Online
Theme URI: https://hearthlandsonline.local
Author: UndeadTankTech + ChatGPT
Description: MMO-style WordPress theme inspired by the Hearthlands Online mockup. Includes custom homepage, game/news/community/rankings/store pages, and improved login/register/lost password templates using WordPress authentication.
Version: 5.0.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: hearthlands-online
*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#060809;
  --bg-soft:#0b0e11;
  --panel:#0d1012;
  --panel-2:#121518;
  --gold:#c88a34;
  --gold-soft:#e4b666;
  --gold-bright:#f0d6a0;
  --text:#f4ead7;
  --muted:#b9ab90;
  --line:#4f3317;
  --line-soft:rgba(233,185,96,.16);
  --green:#43dc77;
  --shadow:0 18px 48px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  background:
    linear-gradient(rgba(6,8,9,.965),rgba(6,8,9,.965)),
    url(assets/images/panel-pattern.svg) center top/420px auto repeat,
    var(--bg);
}
img{display:block;max-width:100%;height:auto}
a{color:var(--gold-soft);text-decoration:none;transition:all .2s ease}
a:hover{color:#fff}
.wrap{width:min(1440px,calc(100% - 40px));margin:0 auto}
.site-shell{min-height:100vh;box-shadow:inset 0 0 120px rgba(0,0,0,.6)}
.screen-reader-text{position:absolute;left:-9999px}

.panel-box,
.news-card,
.auth-card,
.home-hero-backdrop,
.feature-panel,
.class-panel,
.stats-bar,
.topbar{
  position:relative;
  background:linear-gradient(180deg,rgba(18,20,22,.97),rgba(8,10,11,.97));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.panel-box:before,
.news-card:before,
.auth-card:before,
.home-hero-backdrop:before,
.feature-panel:before,
.class-panel:before,
.stats-bar:before,
.topbar:before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid var(--line-soft);
  pointer-events:none;
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  padding:10px 0 0;
  background:linear-gradient(180deg,rgba(5,7,9,.92),rgba(5,7,9,.78) 72%,transparent);
}
body.admin-bar .site-header{top:32px}
.topbar{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:10px 18px;
}
.brand{display:flex;align-items:center;gap:14px;color:var(--text);min-width:0}
.brand img.crest{width:54px;height:54px;flex:0 0 auto}
.brand img.logo{height:58px;width:auto;max-width:min(42vw,320px)}
.mobile-toggle{
  display:none;
  background:#0d1013;
  color:var(--gold-soft);
  border:1px solid var(--line);
  padding:10px 12px;
  font-family:'Cinzel',Georgia,serif;
}
.nav,.nav .menu,.nav ul{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.nav li{list-style:none}
.nav a,.menu a{
  font-family:'Cinzel',Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  font-size:14px;
  color:#efe1c5;
}
.nav a:hover,.current-menu-item>a{color:var(--gold-soft)}
.download-btn,.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:13px 24px;
  border-radius:3px;
  border:1px solid #b7833d;
  background:linear-gradient(180deg,#dfa850,#966123);
  color:#fff !important;
  font-family:'Cinzel',Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:800;
  box-shadow:inset 0 1px rgba(255,255,255,.18),0 8px 18px rgba(0,0,0,.32);
}
.download-btn:hover,.btn:hover{filter:brightness(1.07);color:#fff}
.btn.secondary{background:linear-gradient(180deg,#293440,#10161b);border-color:#566472}
.btn.ghost{background:rgba(0,0,0,.2);border-color:rgba(183,131,61,.6)}

.hero,.page-hero,.section-title,.entry-title,.wp-block-post-title,.content h2,.footer-links h4,.home-hero-copy h1,.class-body h3,.news-card h3,.feature-panel h3{
  font-family:'Cinzel',Georgia,serif;
}
.lead{font-size:20px;color:#eadfca;max-width:420px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.stacked-actions{flex-direction:column;align-items:flex-start;margin-top:28px}
.hero-btn{min-width:292px;justify-content:flex-start;padding-left:28px}

.home-hero{padding:18px 0 16px}
.home-hero-frame{position:relative}
.home-hero-backdrop{
  min-height:650px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(6,8,9,.78) 0%,rgba(6,8,9,.56) 28%,rgba(6,8,9,.12) 55%,rgba(6,8,9,.32) 100%),
    url(assets/images/hero-hearthlands-v2.jpg) center center/cover no-repeat;
}
.home-hero-copy{
  position:absolute;
  top:62px;
  left:58px;
  width:min(470px,calc(100% - 116px));
  z-index:2;
}
.home-hero-copy h1{
  margin:0 0 18px;
  font-size:clamp(52px,5.8vw,86px);
  line-height:.93;
  text-transform:uppercase;
  color:#f8edd7;
  text-shadow:0 4px 0 #201109,0 12px 28px rgba(0,0,0,.7);
}
.home-hero-copy h1 span{display:block;color:var(--gold-soft)}
.feature-row{
  margin-top:-78px;
  position:relative;
  z-index:3;
}
.grid{display:grid;gap:22px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.feature-panel{
  display:block;
  min-height:198px;
  overflow:hidden;
  color:var(--text);
}
.feature-panel:hover,.class-panel:hover{transform:translateY(-2px)}
.feature-panel-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(.95);
}
.feature-panel-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.78));
}
.feature-panel-inner{
  position:relative;
  z-index:2;
  height:100%;
  padding:20px 18px 18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.feature-panel h3{
  margin:0 0 10px;
  font-size:19px;
  line-height:1.05;
  text-transform:uppercase;
  color:var(--gold-soft);
}
.feature-panel p{margin:0;font-size:13px;color:#dccdb1;line-height:1.45}

.section{padding:18px 0 20px}
.home-main-section{padding-top:4px}
.main-two-col{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(350px,.8fr);gap:22px;align-items:start}
.news-column,.world-status{padding:18px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.section-title{
  margin:0;
  font-size:26px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--gold-soft);
}
.section-title.centered{text-align:center;margin-bottom:18px}
.section-link{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--gold-soft)}
.news-grid-home{gap:16px}
.news-card{overflow:hidden}
.news-card img{width:100%;height:150px;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.06)}
.news-card .body{padding:14px 16px 16px}
.news-card h3{margin:6px 0 10px;font-size:20px;line-height:1.16;color:#f0e4cc}
.date{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#9c8864}
.small{font-size:14px;color:var(--muted)}
.world-status-head{flex-direction:column;align-items:flex-start;margin-bottom:10px}
.status-pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#99e8ab}
.status-pill .dot{width:9px;height:9px;border-radius:999px;background:var(--green);box-shadow:0 0 12px rgba(67,220,119,.75)}
.status-table{width:100%;border-collapse:collapse}
.status-table th,.status-table td{padding:12px 6px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}
.status-table th{font-family:'Cinzel',Georgia,serif;color:#d6c4a2;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.online{color:var(--green);font-weight:800}
.status-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  font-family:'Cinzel',Georgia,serif;
  text-transform:uppercase;
  color:var(--gold-soft);
}
.status-number{font-size:34px;line-height:1;color:var(--gold-bright)}

.choose-path-section{padding-top:8px}
.class-grid{gap:20px}
.class-panel{
  overflow:hidden;
  min-height:240px;
  position:relative;
}
.class-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.class-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,9,.08) 0%,rgba(5,7,9,.12) 35%,rgba(5,7,9,.32) 52%,rgba(5,7,9,.88) 76%,rgba(5,7,9,.96) 100%);pointer-events:none}
.class-body{position:relative;z-index:2;min-height:240px;width:min(48%, 320px);margin-left:auto;padding:22px 22px 18px;display:flex;flex-direction:column;justify-content:center}
.class-body h3{margin:0 0 8px;font-size:21px;text-transform:uppercase;color:var(--gold-soft)}
.class-body p{margin:0;color:#ddd0b5;font-size:14px;line-height:1.5}
.stats-bar{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
}
.stat{padding:22px 18px;text-align:center;border-right:1px solid rgba(255,255,255,.07)}
.stat:last-child{border-right:none}
.stat strong{display:block;font-family:'Cinzel',Georgia,serif;font-size:36px;line-height:1;color:var(--gold-soft);margin-bottom:8px}
.stat span{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#e0d2b7}

.page-hero{
  min-height:320px;
  display:flex;
  align-items:center;
  text-align:center;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(rgba(6,8,10,.55),rgba(6,8,10,.74)),
    url(assets/images/hero-dark-v2.jpg) center/cover no-repeat;
}
.page-hero h1{
  margin:0 0 8px;
  font-size:clamp(42px,5vw,72px);
  line-height:.95;
  text-transform:uppercase;
  color:#f7ecd7;
  text-shadow:0 4px 0 #201109,0 12px 26px rgba(0,0,0,.65);
}
.breadcrumbs{color:var(--muted);font-size:14px}
.content{padding:54px 0}
.content h2{font-size:34px;color:var(--gold-soft);margin-top:0}
.content h3{font-family:'Cinzel',Georgia,serif;color:#f1e5ce}
.split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);gap:30px;align-items:center}
.side-img{border:1px solid var(--line);box-shadow:var(--shadow)}
.rank-table{width:100%;border-collapse:collapse}
.rank-table th,.rank-table td{padding:15px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.rank-table th{color:var(--gold-soft);font-family:'Cinzel',Georgia,serif;text-transform:uppercase;letter-spacing:.06em}
.shop-item{padding:24px}
.price{font-family:'Cinzel',Georgia,serif;color:var(--gold-soft);font-size:28px}

.auth-wrap{
  min-height:740px;
  background:
    linear-gradient(rgba(6,8,9,.64),rgba(6,8,9,.8)),
    url(assets/images/hero-dark-v2.jpg) center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 18px;
}
.auth-card{width:min(460px,100%);padding:34px 32px}
.auth-card h1{margin:0 0 14px;font-family:'Cinzel',Georgia,serif;color:var(--gold-soft);text-transform:uppercase;text-align:center}
.form-row{margin:0 0 16px}.form-row label{display:block;margin-bottom:6px;color:#e5d7bf;font-size:14px}
.input,input[type=text],input[type=password],input[type=email],textarea,select{width:100%;background:#0a0d10;border:1px solid #3f3428;color:var(--text);padding:13px;border-radius:2px}
.notice{padding:12px 14px;border:1px solid var(--line);background:#15110c;margin-bottom:16px}.notice.error{border-color:#6e2b22}.notice.success{border-color:#276e37}

.site-footer{
  position:relative;
  margin-top:34px;
  padding:42px 0 24px;
  background:linear-gradient(180deg,#080909,#050607);
  border-top:1px solid var(--line);
}
.site-footer:after{
  content:"";
  position:absolute;
  right:max(18px, calc((100vw - min(1260px, calc(100% - 36px))) / 2 + 6px));
  bottom:0;
  width:164px;
  height:250px;
  background:url(assets/images/footer-fire.jpg) center bottom/contain no-repeat;
  opacity:.92;
  pointer-events:none;
}
.footer-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:30px;padding-right:190px}
.footer-logo{height:62px;width:auto;margin-bottom:10px}
.footer-links h4{margin:0 0 10px;color:#f0d9a6;text-transform:uppercase;letter-spacing:.05em;font-size:17px}
.footer-links a{display:block;color:var(--muted);margin:7px 0}.footer-links a:hover{color:#fff}
.wp-block-post-title,.entry-title{color:var(--gold-soft)}.alignwide{max-width:1180px;margin:auto}.comment-respond,.comments-area{width:min(900px,calc(100% - 36px));margin:40px auto}

@media (max-width: 1120px){
  .home-hero-copy{position:relative;top:auto;left:auto;width:auto;padding:42px 28px 24px}
  .home-hero-backdrop{min-height:560px;background-position:center right}
  .feature-row{margin-top:16px}
  .main-two-col{grid-template-columns:1fr}
  .class-panel{min-height:230px}
  .class-panel img{height:100%}
  .class-body{width:min(56%, 340px);min-height:230px;padding:20px 18px 18px}
  .footer-grid{padding-right:0}
  .site-footer:after{display:none}
}
@media (max-width: 900px){
  body.admin-bar .site-header{top:46px}
  .mobile-toggle{display:block}
  .nav{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;padding:16px 18px 18px;background:#090b0d;border:1px solid var(--line);border-top:none;flex-direction:column;align-items:flex-start;gap:14px}
  .nav.open{display:flex}
  .nav .menu,.nav ul{flex-direction:column;align-items:flex-start;gap:14px;width:100%}
  .grid-4,.grid-3,.grid-2,.split,.footer-grid,.stats-bar{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.07)}
  .stat:last-child{border-bottom:none}
  .topbar{padding:12px 14px}
  .brand img.logo{height:50px}
  .home-hero-copy h1{font-size:48px}
  .lead{font-size:18px}
  .hero-btn{min-width:0;width:100%;justify-content:center;padding-left:24px}
  .feature-panel{min-height:180px}
  .class-body{width:58%;min-height:220px}
}
@media (max-width: 600px){
  .wrap{width:min(100%,calc(100% - 24px))}
  .home-hero-copy{padding:34px 20px 18px}
  .class-body{width:100%;min-height:220px;padding:18px;background:linear-gradient(180deg,rgba(5,7,9,.2) 0%,rgba(5,7,9,.78) 35%,rgba(5,7,9,.92) 100%)}
  .class-panel:after{background:linear-gradient(180deg,rgba(5,7,9,.06) 0%,rgba(5,7,9,.18) 38%,rgba(5,7,9,.8) 72%,rgba(5,7,9,.94) 100%)}
}