/*
Theme Name: RankHub
Description: A lightweight theme built for the RankHub Rankings plugin — country and category ranking pages, browsable by country, with a shared ledger-style design system.
Author: RankHub
Version: 1.0
Text Domain: rankhub-theme
*/

:root{
  --ink:#17140F;
  --paper:#EFE8D8;
  --paper-dim:#E4DBC5;
  --gold:#C7962C;
  --gold-dim:#9C7623;
  --clay:#8C2F26;
  --green:#2B6B45;
  --line: rgba(23,20,15,0.14);
}

*{box-sizing:border-box;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.5;
  margin:0;
}
a{color:inherit;}
img{max-width:100%; display:block;}
::selection{background:var(--gold); color:var(--ink);}

.rh-wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ---- Masthead ---- */
.rh-masthead{border-bottom:1px solid var(--line); padding:18px 0;}
.rh-masthead-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.rh-brand{font-family:'Fraunces', serif; font-weight:700; font-size:1.15rem; text-decoration:none;}
.rh-brand span{color:var(--clay);}
.rh-nav{display:flex; gap:22px; font-size:0.82rem; font-weight:500; letter-spacing:0.03em; text-transform:uppercase; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
.rh-nav li{list-style:none;}
.rh-nav a{opacity:0.6; text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent;}
.rh-nav a:hover{opacity:1;}

.rh-breadcrumb{font-size:0.78rem; color:rgba(23,20,15,0.5); padding:16px 0 0;}
.rh-breadcrumb a{text-decoration:underline; text-underline-offset:2px;}

/* ---- Hero ---- */
.rh-hero{padding:48px 0 32px; border-bottom:1px solid var(--line);}
.rh-eyebrow{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-dim); display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.rh-eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--clay); display:inline-block;}
.rh-hero h1{font-family:'Fraunces', serif; font-weight:600; font-size:clamp(2rem, 5vw, 3.1rem); line-height:1.04; letter-spacing:-0.01em; margin:0 0 12px;}
.rh-hero p{max-width:60ch; font-size:1rem; color:rgba(23,20,15,0.72); margin:0;}

/* ---- Card grid (countries / categories) ---- */
.rh-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; padding:32px 0 56px;}
.rh-card{
  display:block; padding:22px; border:1px solid var(--line); border-radius:3px; text-decoration:none; color:inherit;
  background:transparent; transition:background 0.15s ease, border-color 0.15s ease;
}
.rh-card:hover{background:var(--paper-dim); border-color:var(--gold-dim);}
.rh-card-title{font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem; margin-bottom:4px;}
.rh-card-count{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:rgba(23,20,15,0.5); text-transform:uppercase; letter-spacing:0.04em;}

/* ---- Generic page content ---- */
.rh-page{padding:40px 0 60px;}
.rh-page h1{font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.9rem, 4.5vw, 2.7rem); margin:0 0 20px;}
.rh-content{max-width:70ch; font-size:1rem; line-height:1.7;}
.rh-content p{margin:0 0 1.1em;}
.rh-content h2{font-family:'Fraunces', serif; font-size:1.4rem; margin:1.6em 0 0.6em;}

/* ---- Country/category picker prompt ---- */
.rh-picker-note{max-width:60ch; font-size:0.95rem; color:rgba(23,20,15,0.7); margin-bottom:26px;}

/* ---- Single ranking entry ---- */
.rh-entry-head{display:flex; align-items:center; gap:20px; padding:40px 0 24px; border-bottom:1px solid var(--line);}
.rh-entry-thumb img{width:84px; height:84px; border-radius:50%; object-fit:cover;}
.rh-entry-name{font-family:'Fraunces', serif; font-weight:600; font-size:2rem;}
.rh-entry-sub{color:rgba(23,20,15,0.6); margin-top:4px;}
.rh-entry-meta{display:flex; gap:24px; padding:20px 0; font-size:0.85rem; color:rgba(23,20,15,0.65); flex-wrap:wrap; border-bottom:1px solid var(--line);}
.rh-entry-meta strong{color:var(--ink);}
.rh-entry-body{max-width:70ch; padding:24px 0; font-size:1rem; line-height:1.7;}

/* ---- Footer ---- */
.rh-footer{border-top:1px solid var(--line); padding:24px 0 44px; font-size:0.78rem; color:rgba(23,20,15,0.5);}
.rh-footer a{text-decoration:underline; text-underline-offset:2px;}

@media (max-width:640px){
  .rh-entry-head{flex-direction:column; align-items:flex-start; gap:12px;}
}