/*
Theme Name: Czarnolandia Fantasy Portal
Theme URI: https://example.com/
Author: OpenAI
Description: Motyw WordPress w klimacie klasycznego portalu MMORPG: zielono-złoty nagłówek, pergaminowe panele, ozdobne ramki i fantasy klimat inspirowany starymi stronami gier.
Version: 2.1
License: GPLv2 or later
Text Domain: czarnolandia-dark-fantasy
*/

* { box-sizing: border-box; }

:root{
  --bg:#1a1208;
  --bg2:#0d120a;
  --bg3:#291c10;
  --forest:#183d18;
  --forest2:#275626;
  --forest3:#0f2811;
  --gold:#d6b256;
  --gold2:#f6d47d;
  --gold3:#8d6422;
  --parchment:#dccdb1;
  --parchment2:#eadfc8;
  --ink:#4b351b;
  --ink2:#6d5434;
  --brown:#5b4325;
  --brown2:#3f2d18;
  --red:#791a13;
  --red2:#a32218;
  --blue:#134bb9;
  --blue2:#08308b;
  --greenBtn:#2d9729;
  --greenBtn2:#1d6b1e;
  --line:#8f6a30;
  --lineSoft:rgba(81, 54, 21, .26);
  --shadow:0 16px 34px rgba(0,0,0,.36);
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  font-family: Georgia, "Times New Roman", serif;
  color:var(--ink);
  line-height:1.66;
  background:
    radial-gradient(circle at top, rgba(67,118,54,.34), transparent 30%),
    radial-gradient(circle at top right, rgba(214,178,86,.08), transparent 18%),
    linear-gradient(180deg, #20391a 0, #13190f 90px, #1b1208 240px, #171108 100%);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }

.container{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding-inline:clamp(16px, 2.2vw, 34px);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
}
.skip-link:focus{
  left:16px;
  top:16px;
  z-index:9999;
  background:#fff;
  color:#000;
  padding:10px 14px;
}

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:
    linear-gradient(180deg, rgba(17,50,17,.98), rgba(11,33,11,.98)),
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  border-bottom:3px solid #3b2409;
  box-shadow:0 12px 28px rgba(0,0,0,.34);
}

.header-inner{
  min-height:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px 0 16px;
  text-align:center;
}

.header-inner > *{ min-width:0; }

.logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}

.logo-mark{
  width:62px;
  height:62px;
  border-radius:10px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff4be;
  font-weight:700;
  font-size:22px;
  background:linear-gradient(180deg, #1f6bf0, #0d3ea4 70%, #0a2a73);
  border:3px solid var(--gold);
  box-shadow:
    inset 0 0 0 2px #5b4314,
    0 6px 0 rgba(58,35,8,.7),
    0 10px 18px rgba(0,0,0,.28);
  overflow:hidden;
}
.logo-mark.custom-logo-link{
  padding:4px;
}
.logo-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.logo-text h1,
.site-title{
  margin:0;
  font-size:38px;
  line-height:1;
  font-weight:700;
  letter-spacing:.8px;
  color:#ffcf5f;
  text-transform:uppercase;
  text-shadow:
    0 1px 0 #fff1ab,
    0 2px 0 #8f4d00,
    0 3px 0 #703500,
    0 0 12px rgba(0,0,0,.35);
}

.site-title a{ color:inherit; }

.logo-text span,
.site-description{
  display:block;
  margin-top:4px;
  color:#d0c694;
  font-size:12px;
  letter-spacing:1.1px;
  text-transform:uppercase;
}

.main-nav .menu,
.main-nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.main-nav li{ position:relative; }

.main-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 15px;
  border-radius:8px;
  color:#f8e6a8;
  background:linear-gradient(180deg, rgba(38,84,38,.92), rgba(19,51,19,.96));
  border:2px solid rgba(214,178,86,.9);
  box-shadow:inset 0 0 0 1px rgba(66,43,10,.92), 0 4px 0 rgba(71,48,18,.7);
  transition:.2s ease;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.6px;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a{
  transform:translateY(1px);
  background:linear-gradient(180deg, #305f2d, #173e17);
  color:#fff2bd;
}

.main-nav ul ul{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  min-width:220px;
  padding:10px;
  display:none;
  background:linear-gradient(180deg, #1e3718, #142613);
  border:2px solid var(--gold);
  border-radius:12px;
  box-shadow:var(--shadow);
  z-index:20;
}
.main-nav li:hover > ul{ display:block; }
.main-nav ul ul a{ width:100%; justify-content:flex-start; }

.header-status{
  border-top:2px solid #4d2a08;
  border-bottom:2px solid #41250b;
  background:linear-gradient(180deg, #8e1c16, #6a120f);
  color:#f7dcc4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.25);
}

.header-status-inner{
  min-height:42px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:16px;
  padding:8px 0;
}

.status-list{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  color:#f1d1d1;
  font-size:14px;
}

.status-item strong{ color:#fff3c2; }
.ticker-shell{
  position:relative;
  width:100%;
  min-width:0;
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(255,220,175,.18);
  background:linear-gradient(180deg, rgba(120,18,13,.45), rgba(74,10,8,.25));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.ticker-track{
  display:flex;
  width:max-content;
  gap:48px;
  padding:4px 0;
  color:#fff0cf;
  font-size:13px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  white-space:nowrap;
  animation:cz-ticker 18s linear infinite;
}

.ticker-track span::after{
  content:" ✦ ";
  color:#ffde8b;
}

@keyframes cz-ticker{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-33.333%); }
}

/* HERO */
.hero-banner{
  margin:20px 0 18px;
  border:3px solid #4c3518;
  border-radius:12px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(11,28,11,.72), rgba(13,16,11,.5)),
    linear-gradient(135deg, rgba(33,74,32,.82), rgba(22,17,10,.88));
  box-shadow:var(--shadow);
}

.hero-inner{
  padding:30px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.hero-copy{ max-width:760px; }

.hero-kicker{
  display:inline-block;
  padding:6px 12px;
  margin-bottom:12px;
  background:rgba(0,0,0,.28);
  color:#fbe9aa;
  border:1px solid rgba(214,178,86,.7);
  border-radius:999px;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.9px;
}

.hero-copy h2{
  margin:0 0 10px;
  color:#fff4d6;
  font-size:40px;
  line-height:1.08;
  text-shadow:0 2px 12px rgba(0,0,0,.42);
}

.hero-copy p{
  margin:0;
  color:#eadbbd;
  max-width:640px;
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.hero-badge{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(241,226,184,.12);
  color:#fff1c1;
  border:1px solid rgba(214,178,86,.45);
  font-size:13px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

/* MAIN */
.site-main{ padding:8px 0 44px; }

.layout{
  display:grid;
  grid-template-columns:minmax(0, 2.15fr) minmax(300px, .95fr);
  gap:22px;
  align-items:start;
}

.content-area,
.sidebar{ min-width:0; }

.section-head{
  margin-bottom:18px;
  border:2px solid #4d3616;
  border-radius:8px;
  overflow:hidden;
  background:var(--parchment);
  box-shadow:var(--shadow);
}

.section-head h2{
  margin:0;
  padding:12px 16px;
  background:linear-gradient(180deg, #315e2a, #1d4420);
  color:#ffe8a1;
  font-size:32px;
  line-height:1.1;
  text-shadow:0 1px 0 #4f340c;
}

.section-head p{
  margin:0;
  padding:12px 16px 14px;
  color:var(--ink2);
  background:linear-gradient(180deg, var(--parchment2), var(--parchment));
  border-top:1px solid rgba(78,53,22,.22);
}

/* CARDS / POSTS */
.post-card,
article.post,
article.page,
.search .post,
.archive .post,
.comments-area{
  position:relative;
  background:linear-gradient(180deg, var(--parchment2), var(--parchment));
  border:2px solid #4d3616;
  border-radius:8px;
  padding:18px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}

.post-card:before,
article.post:before,
article.page:before,
.comments-area:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
  pointer-events:none;
}

.post-badge{
  display:inline-block;
  margin-bottom:12px;
  padding:5px 10px;
  border-radius:999px;
  background:linear-gradient(180deg, #355b2d, #1d3c1e);
  color:#ffefb7;
  border:1px solid #7b5a21;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.entry-title,
.post-card h3{
  margin:0 0 8px;
  color:#4d3616;
  font-size:31px;
  line-height:1.12;
}
.entry-title a:hover{ color:#214f22; }

.entry-meta,
.post-meta{
  margin-bottom:14px;
  color:#7a6242;
  font-size:14px;
}

.post-thumbnail{
  display:block;
  margin:0 0 16px;
  overflow:hidden;
  border-radius:8px;
  border:2px solid #7e602c;
  background:#bca47d;
}
.post-thumbnail img{ display:block; width:100%; }

.entry-content,
.entry-content p,
.entry-summary p,
.post-card p{ color:var(--ink); }

.entry-content p:last-child{ margin-bottom:0; }

/* Buttons */
.btn,
.read-more-link,
button,
input[type="submit"],
.wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:8px;
  background:linear-gradient(180deg, #1f59dd, #0c3aa5 70%, #082c80);
  color:#fff6d8 !important;
  border:2px solid var(--gold);
  box-shadow:inset 0 0 0 1px #4d3616, 0 4px 0 rgba(81,53,17,.75);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.45px;
  text-shadow:0 1px 0 #4a2b07, 0 0 10px rgba(0,0,0,.25);
  transition:.2s ease;
}

.btn:hover,
.read-more-link:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover{
  transform:translateY(1px);
  color:#fff7d0;
}

.btn-secondary{
  background:linear-gradient(180deg, #39a233, #237a23 72%, #185d18);
}

/* SIDEBAR */
.widget{
  position:relative;
  background:linear-gradient(180deg, var(--parchment2), var(--parchment));
  border:2px solid #4d3616;
  border-radius:8px;
  padding:18px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}

.widget h3,
.widget-title{
  margin:0 0 12px;
  padding-bottom:10px;
  font-size:24px;
  color:#4d3616;
  border-bottom:1px solid rgba(77,54,22,.28);
}

.widget p,
.widget li,
.widget a{ color:var(--ink); }

.widget-intro,
.map-note{ color:#6c5533; }

.quick-links{
  list-style:none;
  margin:0;
  padding:0;
}
.quick-links li + li{ margin-top:8px; }
.quick-links a{
  display:block;
  padding:10px 12px;
  border-radius:6px;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(77,54,22,.18);
}
.quick-links a:hover{
  background:#f1e6d1;
  color:#214f22;
}

/* MAP */
.map-preview{
  border:2px solid #8f6a30;
  border-radius:8px;
  padding:14px;
  background:linear-gradient(180deg, #e6d9c1, #d5c39e);
}

.map-iframe{
  display:block;
  width:100%;
  height:360px;
  border:2px solid #8f6a30;
  border-radius:8px;
  background:#d7c69f;
}

.map-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin:0 0 14px;
}

.map-tile{
  aspect-ratio:1/1;
  border-radius:4px;
  border:1px solid rgba(77,54,22,.26);
  background:
    linear-gradient(135deg, rgba(40,84,40,.25), rgba(75,53,23,.16)),
    linear-gradient(180deg, #cdbb94, #b79f75);
  position:relative;
  overflow:hidden;
}
.map-tile:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.28) 49%, transparent 50%),
    linear-gradient(transparent 48%, rgba(255,255,255,.26) 49%, transparent 50%);
  opacity:.35;
}
.map-tile.is-center{
  border-color:#376132;
  box-shadow:0 0 0 2px rgba(55,97,50,.18);
}
.map-pin{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:14px;
  height:14px;
  border-radius:999px;
  background:radial-gradient(circle at 35% 35%, #fff, #f6d47d 40%, #8c291b 72%);
  box-shadow:0 0 0 4px rgba(140,41,27,.18);
}

.map-coords{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.coord-chip{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(77,54,22,.08);
  border:1px solid rgba(77,54,22,.15);
  color:#6f5634;
  font-size:12px;
}

.map-open-btn{ width:100%; margin-top:2px; }

/* FORMS */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select{
  width:100%;
  padding:11px 12px;
  border-radius:6px;
  border:1px solid rgba(77,54,22,.25);
  background:#fbf6eb;
  color:#4b351b;
  font:inherit;
}
textarea{ min-height:150px; resize:vertical; }

.search-form,
.wp-block-search{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.search-form label,
.wp-block-search__inside-wrapper{ flex:1 1 220px; }
.search-form input[type="search"]{ width:100%; }

/* PAGINATION */
.pagination-nav{ margin-top:10px; }
.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:42px;
  padding:0 12px;
  border-radius:8px;
  background:linear-gradient(180deg, #f1e5cb, #ddccab);
  color:#4b351b;
  border:2px solid #7e602c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.page-numbers.current{
  background:linear-gradient(180deg, #305d2b, #214722);
  color:#fff0b7;
}

/* COMMENTS */
.comments-area h2,
.comments-area h3{ color:#4d3616; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list li{ margin-bottom:14px; }
.comment-body{
  padding:12px 14px;
  background:rgba(255,255,255,.24);
  border:1px solid rgba(77,54,22,.16);
  border-radius:8px;
}
.comment-meta{ font-size:14px; color:#6f5635; }
.comment-content{ color:#4b351b; }

/* FOOTER */
.site-footer{
  border-top:3px solid #4a2e0d;
  background:linear-gradient(180deg, #143214, #0d220d);
  color:#d2c98e;
}

.footer-inner{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px 0;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.footer-links a{
  color:#fff0b7;
  padding:8px 12px;
  border-radius:6px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(214,178,86,.22);
}
.footer-links a:hover{ background:rgba(255,255,255,.1); }

/* WORDPRESS BASICS */
.alignwide,.alignfull{ max-width:100%; }
.wp-block-image img{ border-radius:8px; }
.wp-block-quote{
  margin:18px 0;
  padding:12px 16px;
  border-left:4px solid #35622f;
  background:rgba(255,255,255,.16);
}
.wp-caption,
.gallery{ max-width:100%; }
.screen-reader-text{
  position:absolute;
  left:-9999px;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .header-inner,
  .footer-inner,
  .hero-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .layout{ grid-template-columns:1fr; }
  .hero-copy h2{ font-size:34px; }
}

@media (max-width: 680px){
  .container{ padding-inline:14px; }
  .logo-text h1,
  .site-title{ font-size:28px; }
  .header-status-inner,
  .status-list{ gap:10px; }
  .section-head h2,
  .entry-title,
  .post-card h3{ font-size:24px; }
  .hero-copy h2{ font-size:29px; }
  .main-nav .menu,
  .main-nav ul{ gap:8px; }
  .main-nav a{ min-height:40px; padding:8px 12px; font-size:12px; }
}

/* Integrated Czarnolandia.VS SVG logo */
.brand-logo{
  display:block;
  width:min(520px, 52vw);
  line-height:0;
}
.brand-logo img{
  display:block;
  width:100%;
  height:auto;
  max-height:104px;
  object-fit:contain;
}
.site-branding{ flex:0 1 auto; }
@media (max-width: 980px){
  .brand-logo{ width:min(560px, 92vw); }
}
@media (max-width: 680px){
  .brand-logo{ width:100%; }
  .header-inner{ align-items:stretch; }
  .main-nav .menu,
  .main-nav ul{ justify-content:center; }
}


@media (max-width: 1180px){
  .header-inner{ gap:16px; }
  .brand-logo{ width:min(480px, 54vw); }
  .main-nav .menu,
  .main-nav ul{ justify-content:flex-end; }
}

@media (max-width: 980px){
  .header-inner{ align-items:stretch; }
  .brand-logo{ width:min(560px, 100%); }
  .main-nav .menu,
  .main-nav ul{ justify-content:center; }
  .header-status-inner{ justify-content:center; text-align:center; }
}

@media (max-width: 768px){
  .hero-inner{ padding:24px 20px; }
  .section-head h2{ font-size:26px; }
  .status-list{ justify-content:center; }
}


.widget-list-simple{
  list-style:disc;
  padding-left:20px;
}
.widget-list-simple li{
  margin:8px 0;
}
.widget-list-simple li a{
  display:inline;
  padding:0;
  background:none;
  border:none;
}
.widget-search_fallback .search-form,
.widget .search-form{
  display:flex;
  gap:10px;
  align-items:stretch;
}
.widget-search_fallback .search-form label,
.widget .search-form label{
  flex:1;
}
.widget-select select{
  width:100%;
}

@media (max-width: 980px){
  .header-status-inner{ grid-template-columns:1fr; }
  .status-list{ justify-content:center; }
  .ticker-shell{ width:100%; }
}

@media (max-width: 680px){
  .brand-logo{ width:min(520px, 100%); }
  .map-iframe{ height:300px; }
}