/* ==========================================================================
   Pelioppaat.fi — Single CSS File
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;padding:0;overflow-x:hidden}
img,video,iframe,embed,object{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}

/* --------------------------------------------------------------------------
   2. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root{
  /* Blues */
  --po-blue-darkest:#0F1A2E;
  --po-blue-dark:#1B2A4A;
  --po-blue-medium:#2D4A7A;
  --po-blue-light:#4A6FA5;
  --po-blue-lighter:#A3BFDB;
  --po-blue-lightest:#E8EFF7;

  /* Ambers */
  --po-amber-dark:#B8841E;
  --po-amber:#E8A838;
  --po-amber-light:#F2C56B;
  --po-amber-lightest:#FDF3DC;

  /* Neutrals */
  --po-black:#1A1A1A;
  --po-gray-dark:#374151;
  --po-gray:#6B7280;
  --po-gray-medium:#9CA3AF;
  --po-gray-light:#D1D5DB;
  --po-surface:#F5F3EF;
  --po-white:#FFFFFF;

  /* Semantic */
  --po-success:#059669;
  --po-success-bg:#ECFDF5;
  --po-warning:#D97706;
  --po-warning-bg:#FDF3DC;
  --po-error:#DC2626;
  --po-error-bg:#FEF2F2;

  /* Spacing */
  --po-space-xs:0.25rem;
  --po-space-sm:0.5rem;
  --po-space-md:1rem;
  --po-space-lg:1.5rem;
  --po-space-xl:2rem;
  --po-space-2xl:3rem;
  --po-space-3xl:4rem;

  /* Radius */
  --po-radius-sm:4px;
  --po-radius-md:8px;
  --po-radius-lg:12px;
  --po-radius-xl:16px;

  /* Shadows */
  --po-shadow-sm:0 1px 2px rgba(27,42,74,0.06);
  --po-shadow-md:0 2px 8px rgba(27,42,74,0.08);
  --po-shadow-lg:0 4px 16px rgba(27,42,74,0.1);
  --po-shadow-header:0 2px 4px rgba(0,0,0,0.15);

  /* Layout */
  --po-content-width:800px;
  --po-wide-width:1200px;
  --po-header-height:64px;
}

/* --------------------------------------------------------------------------
   3. Base / Typography (System Font Stack)
   -------------------------------------------------------------------------- */
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  font-size:1rem;
  line-height:1.7;
  color:var(--po-black);
  background:var(--po-surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* --------------------------------------------------------------------------
   4. Layout: Header (Casino.org inspired — fixed, navy)
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:var(--po-blue-dark);
  box-shadow:var(--po-shadow-header);
}

.header-inner{
  max-width:var(--po-wide-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--po-space-lg);
  height:var(--po-header-height);
}

.site-logo{
  font-size:1.4rem;
  font-weight:800;
  color:var(--po-white);
  letter-spacing:-0.5px;
  white-space:nowrap;
  z-index:1001;
  display:flex;
  align-items:center;
  gap:0.4rem;
}

.logo-icon{
  display:block;
  flex-shrink:0;
}

.site-logo:hover{
  opacity:0.9;
}

.logo-dot{
  color:var(--po-amber);
  font-weight:800;
}

/* --------------------------------------------------------------------------
   5. Layout: Desktop Navigation
   -------------------------------------------------------------------------- */
.main-nav{
  display:flex;
  align-items:center;
}

.nav-list{
  display:flex;
  gap:var(--po-space-xs);
  align-items:center;
}

.nav-list li{
  position:relative;
}

.nav-list li a{
  display:block;
  padding:var(--po-space-sm) var(--po-space-md);
  color:rgba(255,255,255,0.85);
  font-size:0.95rem;
  font-weight:500;
  border-radius:var(--po-radius-sm);
  transition:color 0.2s ease,background 0.2s ease;
  white-space:nowrap;
}

.nav-list li a:hover,
.nav-list li.current-menu-item > a,
.nav-list li.current-menu-parent > a,
.nav-list li.current_page_item > a{
  color:var(--po-white);
  background:rgba(255,255,255,0.1);
}

.nav-list li.current-menu-item > a,
.nav-list li.current_page_item > a{
  border-bottom:2px solid var(--po-amber);
  border-radius:var(--po-radius-sm) var(--po-radius-sm) 0 0;
}

/* Sub-menu (dropdown) */
.nav-list .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--po-white);
  border-radius:var(--po-radius-md);
  box-shadow:var(--po-shadow-lg);
  min-width:220px;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
  padding:var(--po-space-sm) 0;
  z-index:1002;
}

.nav-list li:hover > .sub-menu{
  display:block;
}

/* Prevent right-side overflow for dropdowns near viewport edge */
.nav-list li:last-child > .sub-menu,
.nav-list li:nth-last-child(2) > .sub-menu{
  left:auto;
  right:0;
}

.nav-list .sub-menu li a{
  color:var(--po-black);
  padding:var(--po-space-sm) var(--po-space-lg);
  font-size:0.9rem;
  border-radius:0;
  white-space:nowrap;
}

.nav-list .sub-menu li a:hover{
  background:var(--po-blue-lightest);
  color:var(--po-blue-dark);
}

/* --------------------------------------------------------------------------
   6. Layout: Hamburger Button
   -------------------------------------------------------------------------- */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  z-index:1002;
  -webkit-tap-highlight-color:transparent;
}

.hamburger,
.hamburger::before,
.hamburger::after{
  display:block;
  width:22px;
  height:2px;
  background:var(--po-white);
  border-radius:2px;
  transition:transform 0.3s ease,opacity 0.3s ease;
}

.hamburger{
  position:relative;
}

.hamburger::before,
.hamburger::after{
  content:'';
  position:absolute;
  left:0;
}

.hamburger::before{
  top:-7px;
}

.hamburger::after{
  top:7px;
}

/* X state */
.nav-toggle.is-open .hamburger{
  background:transparent;
}

.nav-toggle.is-open .hamburger::before{
  top:0;
  transform:rotate(45deg);
}

.nav-toggle.is-open .hamburger::after{
  top:0;
  transform:rotate(-45deg);
}

/* --------------------------------------------------------------------------
   7. Layout: Mobile Menu Overlay (Casino.org style — full screen, slide left)
   -------------------------------------------------------------------------- */
.mobile-menu{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:85%;
  max-width:360px;
  height:100%;
  background:var(--po-blue-darkest);
  z-index:1001;
  transform:translateX(-100%);
  transition:transform 0.3s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:calc(var(--po-header-height) + var(--po-space-lg)) var(--po-space-lg) var(--po-space-xl);
}

.mobile-menu.is-open{
  transform:translateX(0);
}

/* Overlay backdrop */
.mobile-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.6);
  z-index:1000;
  opacity:0;
  transition:opacity 0.3s ease;
}

.mobile-overlay.is-open{
  opacity:1;
}

/* Mobile menu section headers */
.mobile-menu-section{
  margin-bottom:var(--po-space-xl);
}

.mobile-menu-title{
  color:var(--po-gray-medium);
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:var(--po-space-md);
  padding:0 var(--po-space-sm);
}

/* Category tiles grid (popular pages) */
.mobile-tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--po-space-sm);
  margin-bottom:var(--po-space-xl);
}

.mobile-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--po-space-sm);
  background:rgba(255,255,255,0.08);
  border-radius:var(--po-radius-lg);
  padding:var(--po-space-lg) var(--po-space-sm);
  color:var(--po-white);
  font-size:0.85rem;
  font-weight:500;
  text-align:center;
  transition:background 0.2s ease;
  min-height:80px;
}

.mobile-tile:hover,
.mobile-tile:active{
  background:rgba(255,255,255,0.15);
}

.mobile-tile-icon{
  font-size:1.5rem;
  line-height:1;
}

/* Category list with chevrons */
.mobile-nav-list{
  display:flex;
  flex-direction:column;
}

.mobile-nav-ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}

.mobile-nav-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--po-space-md) var(--po-space-sm);
  color:var(--po-white);
  font-size:1rem;
  font-weight:500;
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:background 0.2s ease,padding-left 0.2s ease;
}

.mobile-nav-list a:hover,
.mobile-nav-list a:active{
  background:rgba(255,255,255,0.05);
  padding-left:var(--po-space-md);
}

/* Chevron on regular (non-parent) mobile nav links */
.mobile-nav-ul > li:not(.menu-item-has-children) > a::after{
  content:'›';
  font-size:1.3rem;
  color:var(--po-gray-medium);
  font-weight:300;
}

.mobile-nav-list a:last-child{
  border-bottom:none;
}

/* Mobile sub-menu (expandable) */
.mobile-nav-ul .menu-item-has-children{
  position:relative;
}
.mobile-nav-ul .menu-item-has-children > a{
  padding-right:52px;
}
.mobile-nav-ul .sub-menu-toggle{
  position:absolute;
  top:0;
  right:0;
  width:52px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--po-gray-medium);
  font-size:1.5rem;
  cursor:pointer;
  z-index:1;
  background:none;
  border:none;
  border-left:1px solid rgba(255,255,255,0.08);
  padding:0;
  transition:transform 0.2s ease;
}
.mobile-nav-ul .sub-menu-toggle.is-open{
  transform:rotate(90deg);
}
.mobile-nav-ul .sub-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:none;
}
.mobile-nav-ul .sub-menu.is-open{
  display:flex;
  flex-direction:column;
}
.mobile-nav-ul .sub-menu li a{
  padding-left:var(--po-space-xl);
  font-size:0.92rem;
  font-weight:400;
  color:var(--po-gray-light);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.mobile-nav-ul .sub-menu li a::after{
  content:'›';
  font-size:1.1rem;
  color:var(--po-gray-medium);
  font-weight:300;
}
.mobile-nav-ul .sub-menu li a:hover{
  color:var(--po-white);
  background:rgba(255,255,255,0.05);
}

/* --------------------------------------------------------------------------
   8. Layout: Hero Section (Front Page — Casino.org style)
   -------------------------------------------------------------------------- */
.hero{
  background:linear-gradient(180deg, var(--po-blue-dark) 0%, var(--po-blue-darkest) 100%);
  padding:calc(var(--po-header-height) + var(--po-space-2xl)) var(--po-space-lg) var(--po-space-2xl);
  color:var(--po-white);
}

.hero-inner{
  max-width:var(--po-content-width);
  margin:0 auto;
  gap:var(--po-space-xl);
}

.hero-text{
  max-width:100%;
}

.hero-text h1{
  font-size:2.8rem;
  font-weight:800;
  line-height:1.1;
  margin-bottom:var(--po-space-lg);
  letter-spacing:-1px;
}

.hero-text .hero-accent{
  color:var(--po-amber);
}

.hero-text p{
  font-size:1.05rem;
  color:rgba(255,255,255,0.75);
  line-height:1.7;
}

/* Hero category cards (2x2 grid — casino.org layout) */
.hero-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--po-space-md);
  max-width:500px;
  width:100%;
}

.hero-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:rgba(255,255,255,0.07);
  border-radius:var(--po-radius-lg);
  padding:var(--po-space-xl) var(--po-space-lg);
  color:var(--po-white);
  transition:background 0.2s ease;
  min-height:140px;
}

.hero-card:hover{
  background:rgba(255,255,255,0.13);
}

/* Top row: icon left, arrow right */
.hero-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--po-space-lg);
}

.hero-card-icon{
  font-size:2.5rem;
  line-height:1;
}

.hero-card-arrow{
  color:rgba(255,255,255,0.5);
  font-size:1.3rem;
  transition:color 0.2s ease,transform 0.2s ease;
}

.hero-card:hover .hero-card-arrow{
  color:var(--po-white);
  transform:translateX(3px);
}

/* Bottom: text label */
.hero-card-title{
  font-size:1.05rem;
  font-weight:600;
  line-height:1.3;
}

/* --------------------------------------------------------------------------
   9. Layout: Site Main & Content Wrap
   -------------------------------------------------------------------------- */
.site-main{
  padding-top:var(--po-header-height);
  min-height:calc(100vh - 200px);
}

/* When hero is present, remove default padding — hero handles it */
.home .site-main,
.single .site-main,
.page .site-main,
.archive .site-main,
.error404 .site-main{
  padding-top:0;
}

.content-wrap{
  max-width:var(--po-content-width);
  margin:0 auto;
  padding:var(--po-space-xl) var(--po-space-lg) var(--po-space-2xl);
}

/* --------------------------------------------------------------------------
   10. Layout: Page Hero (Content pages — flows from header)
   -------------------------------------------------------------------------- */
.page-hero{
  background:linear-gradient(180deg, var(--po-blue-dark) 0%, var(--po-blue-darkest) 100%);
  padding:calc(var(--po-header-height) + var(--po-space-2xl)) var(--po-space-lg) var(--po-space-2xl);
  color:var(--po-white);
}

.page-hero-inner{
  max-width:var(--po-content-width);
  margin:0 auto;
}

.page-hero-title{
  font-size:2.2rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.5px;
  color:var(--po-white);
  margin-bottom:var(--po-space-sm);
}

.page-hero-meta{
  font-size:0.9rem;
  color:rgba(255,255,255,0.6);
  margin-top:var(--po-space-sm);
}

.page-hero-meta time{
  font-weight:500;
}

.page-hero-meta .meta-sep{
  margin:0 var(--po-space-sm);
  color:rgba(255,255,255,0.3);
}

.page-hero-meta a{
  color:var(--po-amber-light);
  text-decoration:underline;
  text-decoration-color:rgba(242,197,107,0.4);
  text-underline-offset:2px;
  transition:color 0.2s ease;
}

.page-hero-meta a:hover{
  color:var(--po-amber);
  text-decoration-color:var(--po-amber);
}

.page-hero-desc{
  font-size:1.05rem;
  color:rgba(255,255,255,0.7);
  margin-top:var(--po-space-sm);
  line-height:1.6;
}

/* Breadcrumbs inside hero — light colors */
.page-hero .breadcrumbs{
  font-size:0.85rem;
  color:rgba(255,255,255,0.5);
  padding:0;
  margin-bottom:var(--po-space-lg);
}

.page-hero .breadcrumbs a{
  color:rgba(255,255,255,0.5);
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,0.2);
  text-underline-offset:2px;
  transition:color 0.2s ease;
}

.page-hero .breadcrumbs a:hover{
  color:rgba(255,255,255,0.85);
}

.page-hero .bc-sep{
  margin:0 var(--po-space-sm);
  color:rgba(255,255,255,0.25);
}

.page-hero .breadcrumbs [aria-current="page"]{
  color:rgba(255,255,255,0.75);
  font-weight:500;
}

/* --------------------------------------------------------------------------
   11. Layout: Entry Content (no card box — clean flow)
   -------------------------------------------------------------------------- */
.entry-content{
  overflow-wrap:break-word;
  word-wrap:break-word;
  line-height:1.8;
}

.entry-content>p{
  margin-bottom:var(--po-space-lg);
}

/* Back button (404 etc) */
.btn-back{
  display:inline-block;
  padding:var(--po-space-sm) var(--po-space-xl);
  background:var(--po-blue-dark);
  color:var(--po-white) !important;
  border-radius:var(--po-radius-md);
  font-weight:600;
  text-decoration:none !important;
  transition:background 0.2s ease;
}

.btn-back:hover{
  background:var(--po-blue-medium);
}

/* --------------------------------------------------------------------------
   12. Layout: Breadcrumbs (fallback — outside hero)
   -------------------------------------------------------------------------- */
.breadcrumbs{
  font-size:0.85rem;
  color:var(--po-gray);
  padding:var(--po-space-md) 0;
  margin-bottom:var(--po-space-sm);
}

.breadcrumbs a{
  color:var(--po-gray);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color 0.2s ease;
}

.breadcrumbs a:hover{
  color:var(--po-blue-medium);
}

.bc-sep{
  margin:0 var(--po-space-sm);
  color:var(--po-gray-medium);
}

.breadcrumbs [aria-current="page"]{
  color:var(--po-black);
  font-weight:500;
}

/* --------------------------------------------------------------------------
   13. Layout: Archive / Post List
   -------------------------------------------------------------------------- */
.post-list{
  display:flex;
  flex-direction:column;
  gap:var(--po-space-md);
}

.post-card{
  background:var(--po-white);
  border-radius:var(--po-radius-md);
  padding:var(--po-space-xl);
  box-shadow:var(--po-shadow-sm);
  transition:box-shadow 0.2s ease,transform 0.15s ease;
  border:1px solid var(--po-gray-light);
}

.post-card:hover{
  box-shadow:var(--po-shadow-md);
  transform:translateY(-1px);
}

.post-card-title{
  font-size:1.25rem;
  margin-bottom:var(--po-space-sm);
}

.post-card-title a{
  color:var(--po-blue-dark);
  transition:color 0.2s ease;
}

.post-card-title a:hover{
  color:var(--po-blue-medium);
}

.post-card-excerpt{
  color:var(--po-gray-dark);
  font-size:0.95rem;
  line-height:1.6;
  margin-bottom:var(--po-space-sm);
}

.post-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  font-size:0.85rem;
  color:var(--po-gray);
}

.post-card-cat a{
  color:var(--po-blue-medium);
  font-weight:500;
}

/* Pagination */
.nav-links{
  display:flex;
  gap:var(--po-space-sm);
  justify-content:center;
  margin-top:var(--po-space-2xl);
  flex-wrap:wrap;
}

.nav-links a,
.nav-links span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 var(--po-space-md);
  border-radius:var(--po-radius-md);
  font-size:0.9rem;
  font-weight:500;
  transition:background 0.2s ease,color 0.2s ease;
}

.nav-links a{
  background:var(--po-white);
  color:var(--po-blue-dark);
  border:1px solid var(--po-gray-light);
}

.nav-links a:hover{
  background:var(--po-blue-lightest);
  border-color:var(--po-blue-lighter);
}

.nav-links .current{
  background:var(--po-blue-dark);
  color:var(--po-white);
  border:1px solid var(--po-blue-dark);
}

/* --------------------------------------------------------------------------
   13. Layout: Footer
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--po-blue-darkest);
  color:rgba(255,255,255,0.7);
  padding:var(--po-space-3xl) var(--po-space-lg) var(--po-space-xl);
}

.footer-inner{
  max-width:var(--po-wide-width);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:var(--po-space-2xl);
  align-items:start;
}

.footer-heading{
  color:var(--po-white);
  font-size:0.95rem;
  font-weight:700;
  margin-bottom:var(--po-space-sm);
}

.footer-about .footer-links{
  flex-direction:column;
  gap:var(--po-space-xs);
}

.footer-brand{}

.footer-logo{
  font-size:1.3rem;
  font-weight:800;
  color:var(--po-white);
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  margin-bottom:var(--po-space-sm);
}

.footer-logo .logo-dot{
  color:var(--po-amber);
}

.footer-tagline{
  font-size:0.9rem;
  color:rgba(255,255,255,0.6);
}

.footer-nav{}

.footer-links{
  display:flex;
  gap:var(--po-space-lg);
  flex-wrap:wrap;
}

.footer-links li a{
  color:rgba(255,255,255,0.7);
  font-size:0.9rem;
  transition:color 0.2s ease;
}

.footer-links li a:hover{
  color:var(--po-white);
}

.footer-copy{
  grid-column:1/-1;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:var(--po-space-lg);
  margin-top:var(--po-space-md);
}

.footer-copy p{
  font-size:0.8rem;
  color:rgba(255,255,255,0.4);
}

/* Cookie Banner */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:var(--po-blue-darkest);
  color:rgba(255,255,255,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--po-space-md);
  padding:var(--po-space-md) var(--po-space-lg);
  font-size:0.85rem;
  z-index:9999;
  box-shadow:0 -2px 8px rgba(0,0,0,0.3);
}

.cookie-banner p{margin:0;}

.cookie-banner a{
  color:var(--po-amber);
  text-decoration:underline;
}

.cookie-accept{
  background:var(--po-amber);
  color:var(--po-blue-darkest);
  border:none;
  padding:0.4rem 1.2rem;
  border-radius:4px;
  font-weight:700;
  font-size:0.85rem;
  cursor:pointer;
  white-space:nowrap;
}

.cookie-accept:hover{
  opacity:0.9;
}

/* --------------------------------------------------------------------------
   14. Layout: 404 Page
   -------------------------------------------------------------------------- */
.error-404 .entry-body{
  text-align:center;
  padding:var(--po-space-3xl) 0;
}

.error-404 .entry-title{
  text-align:center;
}

.error-404 .entry-body a{
  display:inline-block;
  margin-top:var(--po-space-md);
  padding:var(--po-space-sm) var(--po-space-xl);
  background:var(--po-blue-dark);
  color:var(--po-white);
  border-radius:var(--po-radius-md);
  font-weight:600;
  transition:background 0.2s ease;
}

.error-404 .entry-body a:hover{
  background:var(--po-blue-medium);
}

/* ==========================================================================
   COMPONENTS (Content Area)
   ========================================================================== */

/* --------------------------------------------------------------------------
   15. Content Typography
   -------------------------------------------------------------------------- */
.entry-content h2{
  color:var(--po-blue-dark);
  font-weight:700;
  font-size:1.5rem;
  margin-top:var(--po-space-2xl);
  margin-bottom:var(--po-space-md);
  padding-bottom:var(--po-space-sm);
  border-bottom:2px solid var(--po-blue-lightest);
}

.entry-content h3{
  color:var(--po-blue-medium);
  font-weight:600;
  font-size:1.2rem;
  margin-top:var(--po-space-xl);
  margin-bottom:var(--po-space-sm);
}

.entry-content a{
  color:var(--po-blue-medium);
  text-decoration:underline;
  text-decoration-color:var(--po-blue-lighter);
  text-underline-offset:2px;
  transition:color 0.2s ease,text-decoration-color 0.2s ease;
}

.entry-content a:hover{
  color:var(--po-blue-dark);
  text-decoration-color:var(--po-blue-dark);
}

/* --------------------------------------------------------------------------
   16. Quick Facts Box
   -------------------------------------------------------------------------- */
.quick-facts-box{
  background:var(--po-blue-lightest);
  border-left:4px solid var(--po-blue-medium);
  border-radius:var(--po-radius-md);
  padding:var(--po-space-lg) var(--po-space-xl);
  margin-bottom:var(--po-space-xl);
  box-shadow:var(--po-shadow-sm);
}

.quick-facts-box h2,
.quick-facts-box h3{
  color:var(--po-blue-dark);
  font-size:1.1rem;
  font-weight:700;
  margin:0 0 var(--po-space-md) 0;
  padding:0;
  border:none;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.quick-facts-box ul{
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--po-space-sm) var(--po-space-lg);
}

.quick-facts-box li{
  color:var(--po-black);
  font-size:0.95rem;
  padding:var(--po-space-xs) 0;
}

.quick-facts-box li strong{
  color:var(--po-gray);
  font-weight:600;
  text-transform:uppercase;
  font-size:0.75rem;
  letter-spacing:0.3px;
  display:block;
  margin-bottom:2px;
}

/* --------------------------------------------------------------------------
   17. Tables
   -------------------------------------------------------------------------- */
.entry-content table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:var(--po-space-xl) 0;
  border-radius:var(--po-radius-md);
  overflow:hidden;
  box-shadow:var(--po-shadow-md);
  font-size:0.95rem;
}

.table-responsive{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:var(--po-space-xl) 0;
  border-radius:var(--po-radius-md);
}

.table-responsive table{
  margin:0;
  min-width:500px;
}

.entry-content thead th{
  background:var(--po-blue-dark);
  color:var(--po-white);
  font-weight:600;
  padding:var(--po-space-md) var(--po-space-lg);
  text-align:left;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
  border:none;
}

.entry-content thead th:first-child{
  border-top-left-radius:var(--po-radius-md);
}

.entry-content thead th:last-child{
  border-top-right-radius:var(--po-radius-md);
}

.entry-content tbody td{
  padding:var(--po-space-md) var(--po-space-lg);
  border-bottom:1px solid var(--po-gray-light);
  color:var(--po-black);
  vertical-align:top;
}

.entry-content tbody tr:nth-child(even){
  background:var(--po-surface);
}

.entry-content tbody tr:nth-child(odd){
  background:var(--po-white);
}

.entry-content tbody tr:hover{
  background:var(--po-blue-lightest);
  transition:background 0.15s ease;
}

.entry-content tbody tr:last-child td{
  border-bottom:none;
}

.entry-content tbody tr:last-child td:first-child{
  border-bottom-left-radius:var(--po-radius-md);
}

.entry-content tbody tr:last-child td:last-child{
  border-bottom-right-radius:var(--po-radius-md);
}

/* --------------------------------------------------------------------------
   18. How-To Steps
   -------------------------------------------------------------------------- */
.entry-content ol{
  counter-reset:howto-step;
  padding:0;
  margin:var(--po-space-xl) 0;
}

.entry-content ol>li{
  counter-increment:howto-step;
  position:relative;
  padding:var(--po-space-lg) var(--po-space-lg) var(--po-space-lg) 4rem;
  margin-bottom:var(--po-space-sm);
  background:var(--po-white);
  border:1px solid var(--po-gray-light);
  border-radius:var(--po-radius-md);
  box-shadow:var(--po-shadow-sm);
  transition:box-shadow 0.2s ease,border-color 0.2s ease;
}

.entry-content ol>li:hover{
  box-shadow:var(--po-shadow-md);
  border-color:var(--po-blue-lighter);
}

.entry-content ol>li::before{
  content:counter(howto-step);
  position:absolute;
  left:var(--po-space-lg);
  top:var(--po-space-lg);
  width:2rem;
  height:2rem;
  background:var(--po-blue-dark);
  color:var(--po-white);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:0.85rem;
  line-height:1;
}

.entry-content ol>li:not(:last-child)::after{
  content:'';
  position:absolute;
  left:calc(var(--po-space-lg) + 0.9375rem);
  bottom:-0.5rem;
  width:2px;
  height:calc(var(--po-space-sm) + 1px);
  background:var(--po-gray-light);
}

/* --------------------------------------------------------------------------
   19. Tiesitkö? Box
   -------------------------------------------------------------------------- */
.tiesitko-box{
  background:var(--po-amber-lightest);
  border-left:4px solid var(--po-amber);
  border-radius:var(--po-radius-md);
  padding:var(--po-space-lg) var(--po-space-xl);
  margin:var(--po-space-xl) 0;
  box-shadow:var(--po-shadow-sm);
  font-size:1rem;
  line-height:1.7;
}

.tiesitko-box strong{
  color:var(--po-amber-dark);
  font-weight:700;
  text-transform:uppercase;
  font-size:0.8rem;
  letter-spacing:0.5px;
  display:inline-block;
  margin-bottom:var(--po-space-xs);
}

/* --------------------------------------------------------------------------
   20. FAQ Section
   -------------------------------------------------------------------------- */
.faq-section{
  margin:var(--po-space-xl) 0;
}

.faq-item{
  border:1px solid var(--po-gray-light);
  border-radius:var(--po-radius-md);
  margin-bottom:var(--po-space-sm);
  background:var(--po-white);
  transition:border-color 0.2s ease,box-shadow 0.2s ease;
}

.faq-item:hover{
  border-color:var(--po-blue-lighter);
  box-shadow:var(--po-shadow-sm);
}

.faq-toggle{
  color:var(--po-blue-dark);
  font-size:1rem;
  font-weight:600;
  padding:var(--po-space-lg) 3rem var(--po-space-lg) var(--po-space-xl);
  margin:0;
  cursor:pointer;
  position:relative;
  border:none;
  background:transparent;
  width:100%;
  text-align:left;
  display:block;
  transition:background 0.2s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  line-height:1.4;
}

.faq-toggle:hover{
  background:var(--po-blue-lightest);
  border-radius:var(--po-radius-md);
}

.faq-toggle::after{
  content:'+';
  position:absolute;
  right:var(--po-space-xl);
  top:50%;
  transform:translateY(-50%);
  color:var(--po-blue-medium);
  font-size:1.4rem;
  font-weight:300;
  line-height:1;
  transition:transform 0.3s ease;
}

.faq-item.is-open .faq-toggle{
  background:var(--po-blue-lightest);
}

.faq-item.is-open .faq-toggle::after{
  content:'−';
  transform:translateY(-50%);
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease;
}

.faq-item.is-open .faq-answer{
  max-height:600px;
}

.faq-item p{
  padding:var(--po-space-md) var(--po-space-xl) var(--po-space-lg);
  margin:0;
  color:var(--po-gray-dark);
  line-height:1.7;
  font-size:0.95rem;
}

/* --------------------------------------------------------------------------
   21. Related Games Cards
   -------------------------------------------------------------------------- */
.related-games{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--po-space-md);
  margin:var(--po-space-xl) 0;
}

.related-game-card{
  background:var(--po-white);
  border:1px solid var(--po-gray-light);
  border-left:3px solid var(--po-amber);
  border-radius:var(--po-radius-md);
  padding:var(--po-space-lg) var(--po-space-xl) var(--po-space-lg) var(--po-space-lg);
  transition:border-color 0.2s ease,box-shadow 0.2s ease,transform 0.2s ease;
  display:block;
  position:relative;
}

.related-game-card::after{
  content:'→';
  position:absolute;
  right:var(--po-space-lg);
  top:var(--po-space-lg);
  color:var(--po-amber);
  font-size:1.2rem;
  font-weight:600;
  transition:transform 0.2s ease;
}

.related-game-card:hover{
  border-color:var(--po-blue-medium);
  border-left-color:var(--po-blue-medium);
  box-shadow:var(--po-shadow-md);
  transform:translateY(-2px);
  text-decoration:none;
}

.related-game-card:hover::after{
  transform:translateX(4px);
  color:var(--po-blue-medium);
}

.related-game-card strong{
  color:var(--po-blue-dark);
  font-weight:700;
  margin:0 0 var(--po-space-xs) 0;
  font-size:1.05rem;
  display:block;
}

.related-game-card p{
  color:var(--po-gray);
  font-size:0.88rem;
  margin:0;
  line-height:1.6;
}

/* --------------------------------------------------------------------------
   22. Scoring / Comparison Tables
   -------------------------------------------------------------------------- */
.scoring-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:var(--po-space-xl) 0;
  border-radius:var(--po-radius-md);
  overflow:hidden;
  box-shadow:var(--po-shadow-md);
}

.scoring-table thead th{
  background:var(--po-blue-dark);
  color:var(--po-white);
  font-weight:600;
  padding:var(--po-space-md) var(--po-space-lg);
  text-align:center;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.scoring-table tbody td{
  padding:var(--po-space-md) var(--po-space-lg);
  text-align:center;
  border-bottom:1px solid var(--po-gray-light);
  font-variant-numeric:tabular-nums;
}

.scoring-table tbody td:first-child{
  text-align:left;
  font-weight:600;
  color:var(--po-blue-dark);
}

.scoring-table tbody tr:nth-child(even){
  background:var(--po-surface);
}

.scoring-table tbody tr:hover{
  background:var(--po-blue-lightest);
}

.scoring-table .highlight-row{
  background:var(--po-amber-lightest) !important;
  font-weight:600;
}

.comparison-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:var(--po-space-xl) 0;
  border-radius:var(--po-radius-md);
  overflow:hidden;
  box-shadow:var(--po-shadow-md);
}

.comparison-table thead th{
  background:var(--po-blue-dark);
  color:var(--po-white);
  font-weight:600;
  padding:var(--po-space-md) var(--po-space-lg);
  text-align:center;
  font-size:0.95rem;
}

.comparison-table thead th:first-child{
  background:var(--po-blue-darkest);
  text-align:left;
}

.comparison-table tbody td{
  padding:var(--po-space-md) var(--po-space-lg);
  text-align:center;
  border-bottom:1px solid var(--po-gray-light);
}

.comparison-table tbody td:first-child{
  text-align:left;
  font-weight:600;
  color:var(--po-blue-dark);
  background:var(--po-blue-lightest);
}

.comparison-table tbody tr:hover td{
  background:var(--po-blue-lightest);
}

/* --------------------------------------------------------------------------
   23. Badges
   -------------------------------------------------------------------------- */
.badge{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.3px;
}

.badge-easy{background:var(--po-success-bg);color:var(--po-success)}
.badge-medium{background:var(--po-warning-bg);color:var(--po-warning)}
.badge-hard{background:var(--po-error-bg);color:var(--po-error)}

/* --------------------------------------------------------------------------
   24. Blockquotes & Lists
   -------------------------------------------------------------------------- */
.entry-content blockquote{
  border-left:4px solid var(--po-amber);
  background:var(--po-surface);
  padding:var(--po-space-lg) var(--po-space-xl);
  margin:var(--po-space-xl) 0;
  border-radius:0 var(--po-radius-md) var(--po-radius-md) 0;
  color:var(--po-gray-dark);
  font-style:italic;
}

.entry-content>ul,
.entry-content>div>ul:not(.quick-facts-box ul){
  padding-left:var(--po-space-lg);
  margin:var(--po-space-md) 0;
  list-style:disc;
}

.entry-content>ul>li,
.entry-content>div>ul:not(.quick-facts-box ul)>li{
  margin-bottom:var(--po-space-sm);
  padding-left:var(--po-space-xs);
  line-height:1.7;
}

.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object{
  max-width:100%;
  height:auto;
}

/* --------------------------------------------------------------------------
   25. Image Alignment & Figures
   -------------------------------------------------------------------------- */
.aligncenter{
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin-top:var(--po-space-lg);
  margin-bottom:var(--po-space-lg);
}

.alignleft{
  float:left;
  max-width:50%;
  margin:var(--po-space-xs) var(--po-space-lg) var(--po-space-md) 0;
}

.alignright{
  float:right;
  max-width:50%;
  margin:var(--po-space-xs) 0 var(--po-space-md) var(--po-space-lg);
}

.alignnone{
  display:block;
  max-width:100%;
  margin-top:var(--po-space-lg);
  margin-bottom:var(--po-space-lg);
}

.alignwide{
  display:block;
  max-width:var(--po-wide-width);
  margin-left:auto;
  margin-right:auto;
  margin-top:var(--po-space-lg);
  margin-bottom:var(--po-space-lg);
  width:100%;
}

.alignfull{
  display:block;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:var(--po-space-lg);
  margin-bottom:var(--po-space-lg);
}

figure,
.wp-caption,
.wp-block-image{
  max-width:100%;
  margin:var(--po-space-lg) 0;
}

figure img,
.wp-caption img,
.wp-block-image img{
  border-radius:var(--po-radius-md);
  display:block;
  max-width:100%;
  height:auto;
}

figcaption,
.wp-caption-text{
  font-size:0.85rem;
  color:var(--po-gray);
  text-align:center;
  font-style:italic;
  margin-top:var(--po-space-sm);
}

.entry-content::after{
  content:'';
  display:table;
  clear:both;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --------------------------------------------------------------------------
   25. Tablet (max-width: 1024px) — nav collapses
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  .main-nav{
    display:none;
  }

  .nav-toggle{
    display:flex;
  }

  .mobile-menu{
    display:block;
  }

  .mobile-overlay{
    display:block;
    pointer-events:none;
  }

  .mobile-overlay.is-open{
    pointer-events:auto;
  }
}

/* --------------------------------------------------------------------------
   26. Tablet (max-width: 768px) — layout adjustments
   -------------------------------------------------------------------------- */
@media(max-width:768px){
  :root{
    --po-header-height:56px;
  }

  /* Hero stacks vertically */
  .hero-text h1{
    font-size:2rem;
  }

  /* Page Hero */
  .page-hero{
    padding:calc(var(--po-header-height) + var(--po-space-lg)) var(--po-space-md) var(--po-space-lg);
  }

  .page-hero-title{
    font-size:1.7rem;
  }

  /* Content */
  .content-wrap{
    padding:var(--po-space-lg) var(--po-space-md) var(--po-space-xl);
  }

  /* Quick Facts */
  .quick-facts-box ul{
    grid-template-columns:1fr 1fr;
  }

  .quick-facts-box{
    padding:var(--po-space-md) var(--po-space-lg);
  }

  /* Tables */
  .entry-content table{
    font-size:0.85rem;
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .entry-content thead th,
  .entry-content tbody td{
    padding:var(--po-space-sm) var(--po-space-md);
    white-space:nowrap;
  }

  .entry-content tbody td:nth-child(3){
    white-space:normal;
    min-width:150px;
  }

  /* How-to steps */
  .entry-content ol>li{
    padding-left:3.25rem;
  }

  .entry-content ol>li::before{
    left:var(--po-space-md);
    width:1.75rem;
    height:1.75rem;
    font-size:0.8rem;
  }

  .entry-content ol>li:not(:last-child)::after{
    left:calc(var(--po-space-md) + 0.8125rem);
  }

  /* Related games */
  .related-games{
    grid-template-columns:1fr;
  }

  /* FAQ */
  .faq-toggle{
    padding:var(--po-space-md) 2.5rem var(--po-space-md) var(--po-space-lg);
    font-size:0.95rem;
  }

  .faq-toggle::after{
    right:var(--po-space-lg);
  }

  .faq-item p{
    padding:var(--po-space-sm) var(--po-space-lg) var(--po-space-md);
  }

  /* Images: remove floats, stack full-width */
  .alignleft,
  .alignright{
    float:none;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    margin-top:var(--po-space-md);
    margin-bottom:var(--po-space-md);
  }

  /* Scoring/comparison tables */
  .comparison-table,
  .scoring-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Tiesitkö */
  .tiesitko-box{
    padding:var(--po-space-md) var(--po-space-lg);
  }

  /* Footer stacks */
  .footer-inner{
    grid-template-columns:1fr;
    gap:var(--po-space-lg);
  }

  .footer-links{
    flex-direction:column;
    gap:var(--po-space-sm);
  }
}

/* --------------------------------------------------------------------------
   27. Mobile (max-width: 480px) — tight spacing
   -------------------------------------------------------------------------- */
@media(max-width:480px){
  .hero{
    padding:calc(var(--po-header-height) + var(--po-space-xl)) var(--po-space-md) var(--po-space-xl);
  }

  .hero-text h1{
    font-size:1.65rem;
  }

  .hero-text p{
    font-size:1rem;
  }

  .hero-cards{
    gap:var(--po-space-sm);
  }

  .hero-card{
    padding:var(--po-space-lg);
    min-height:110px;
  }

  /* Page Hero */
  .page-hero{
    padding:calc(var(--po-header-height) + var(--po-space-md)) var(--po-space-sm) var(--po-space-md);
  }

  .page-hero-title{
    font-size:1.45rem;
  }

  /* Content */
  .content-wrap{
    padding:var(--po-space-md) var(--po-space-sm) var(--po-space-lg);
  }

  /* Quick Facts single col */
  .quick-facts-box ul{
    grid-template-columns:1fr;
  }

  /* Tables */
  .entry-content table{
    font-size:0.8rem;
  }

  .entry-content thead th,
  .entry-content tbody td{
    padding:var(--po-space-xs) var(--po-space-sm);
  }

  /* How-to */
  .entry-content ol>li{
    padding:var(--po-space-md) var(--po-space-md) var(--po-space-md) 2.75rem;
  }

  .entry-content ol>li::before{
    left:var(--po-space-sm);
    width:1.5rem;
    height:1.5rem;
    font-size:0.75rem;
  }

  .entry-content ol>li:not(:last-child)::after{
    left:calc(var(--po-space-sm) + 0.6875rem);
  }

  /* FAQ */
  .faq-item h3{
    padding:var(--po-space-sm) 2.25rem var(--po-space-sm) var(--po-space-md);
    font-size:0.9rem;
  }

  .faq-item h3::after{
    right:var(--po-space-md);
  }

  .faq-item p{
    padding:var(--po-space-xs) var(--po-space-md) var(--po-space-sm);
    font-size:0.9rem;
  }

  /* Headings */
  .entry-content h2{
    margin-top:var(--po-space-xl);
    font-size:1.3rem;
  }

  .entry-content h3{
    margin-top:var(--po-space-lg);
    font-size:1.1rem;
  }

  /* Images: tighter spacing */
  .aligncenter,
  .alignnone,
  figure,
  .wp-caption,
  .wp-block-image{
    margin-top:var(--po-space-md);
    margin-bottom:var(--po-space-md);
  }

  /* Post cards */
  .post-card{
    padding:var(--po-space-lg);
  }

  .post-card-title{
    font-size:1.1rem;
  }
}

/* --------------------------------------------------------------------------
   28. Homepage: Post Grid + Intro
   -------------------------------------------------------------------------- */
.hero-inner--wide{
  max-width:var(--po-wide-width);
}

.hero-cards--8{
  max-width:100%;
  grid-template-columns:repeat(2,1fr);
}

.hero-card-bottom{
  display:flex;
  flex-direction:column;
  gap:var(--po-space-xs);
}

.hero-card-count{
  font-size:0.8rem;
  color:rgba(255,255,255,0.5);
}

.content-wrap--wide{
  max-width:var(--po-wide-width);
}

.section-heading{
  font-size:1.5rem;
  font-weight:700;
  color:var(--po-blue-darkest);
  border-bottom:3px solid var(--po-amber);
  display:inline-block;
  padding-bottom:var(--po-space-sm);
  margin-bottom:var(--po-space-xl);
}

.post-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--po-space-md);
  margin-bottom:var(--po-space-2xl);
}

.post-grid--3{
  grid-template-columns:1fr;
}

@media(min-width:640px){
  .post-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .post-grid--3{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(min-width:768px){
  .hero-cards--8{
    grid-template-columns:repeat(4,1fr);
  }
  .post-grid--3{
    grid-template-columns:repeat(3,1fr);
  }
}

.post-card-date{
  font-size:0.85rem;
  color:var(--po-gray);
  margin-left:auto;
}

.seo-intro{
  margin-top:var(--po-space-xl);
  padding-top:var(--po-space-xl);
  border-top:1px solid var(--po-gray-light);
  color:var(--po-gray-dark);
  font-size:0.95rem;
  line-height:1.7;
  max-width:var(--po-content-width);
}

/* --------------------------------------------------------------------------
   29. Author Page
   -------------------------------------------------------------------------- */
.author-bio-section{
  margin-bottom:var(--po-space-2xl);
  padding-bottom:var(--po-space-xl);
  border-bottom:1px solid var(--po-gray-light);
}

.author-stats{
  margin-bottom:var(--po-space-xl);
}

.author-stat-badge{
  display:inline-block;
  background:var(--po-blue-lightest);
  color:var(--po-blue-dark);
  font-weight:600;
  font-size:0.9rem;
  padding:var(--po-space-sm) var(--po-space-lg);
  border-radius:var(--po-radius-lg);
}

.author-post-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--po-space-md);
  margin-bottom:var(--po-space-2xl);
}

@media(min-width:640px){
  .author-post-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

.author-post-card{
  background:var(--po-white);
  border-radius:var(--po-radius-md);
  border:1px solid var(--po-gray-light);
  box-shadow:var(--po-shadow-sm);
  transition:box-shadow 0.2s ease,transform 0.15s ease;
  overflow:hidden;
}

.author-post-card:hover{
  box-shadow:var(--po-shadow-md);
  transform:translateY(-2px);
}

.author-post-card-inner{
  padding:var(--po-space-lg);
  display:flex;
  flex-direction:column;
  gap:var(--po-space-sm);
  height:100%;
}

.author-post-badge{
  display:inline-block;
  align-self:flex-start;
  background:var(--po-amber-lightest);
  color:var(--po-amber-dark);
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding:2px 10px;
  border-radius:var(--po-radius-sm);
}

.author-post-title{
  font-size:1.1rem;
  margin:0;
}

.author-post-title a{
  color:var(--po-blue-dark);
  transition:color 0.2s ease;
}

.author-post-title a:hover{
  color:var(--po-blue-medium);
}

.author-post-excerpt{
  color:var(--po-gray-dark);
  font-size:0.9rem;
  line-height:1.5;
  flex-grow:1;
}

.author-post-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:var(--po-space-sm);
  padding-top:var(--po-space-sm);
  border-top:1px solid var(--po-gray-light);
}

.author-post-date{
  font-size:0.8rem;
  color:var(--po-gray);
}

.author-post-link{
  font-size:0.85rem;
  font-weight:600;
  color:var(--po-blue-medium);
  transition:color 0.2s ease;
}

.author-post-link:hover{
  color:var(--po-blue-dark);
}

/* --------------------------------------------------------------------------
   30. Print
   -------------------------------------------------------------------------- */
@media print{
  .site-header,.site-footer,.nav-toggle,.breadcrumbs,.mobile-menu,.mobile-overlay{
    display:none !important;
  }
  .site-main{padding-top:0}
  .entry-content{box-shadow:none;border-radius:0;padding:0}
  body{background:#fff;color:#000}
}