/**
 * FG Custom Styles - Fachportal Glücksspiel
 * Colors: #0A2A1A (dark green), #D4A843 (gold), #1A4A2A (secondary green)
 */

:root {
  --fg-green: #0A2A1A;
  --fg-gold: #D4A843;
  --fg-secondary: #1A4A2A;
  --fg-text: #1A1A1A;
  --fg-bg: #F5F4F0;
  --fg-border: #DDD8CC;
}

/* ============================================================
   HEADER - Dunkelgrün + Gold-Border
   ============================================================ */
.site-header {
  background-color: var(--fg-green) !important;
  border-bottom: 3px solid var(--fg-gold) !important;
}

.site-header a,
.site-header .site-title a {
  color: #ffffff !important;
}

.site-title {
  color: #ffffff !important;
}

.site-description {
  color: rgba(255,255,255,0.7) !important;
}

/* ============================================================
   NAVIGATION - Transparent background + white links
   ============================================================ */
.main-navigation,
.main-navigation.toggled,
.main-navigation.mobile-menu-open {
  background: transparent !important;
}

.main-navigation ul li a,
.main-navigation ul li a:visited {
  color: #ffffff !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li a:focus {
  color: var(--fg-gold) !important;
}

.main-navigation ul.sub-menu {
  background-color: var(--fg-green) !important;
  border-top: 2px solid var(--fg-gold);
}

/* ============================================================
   HAMBURGER MENU - Transparent + white SVG icon
   ============================================================ */
button.menu-toggle {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
}

button.menu-toggle:hover,
button.menu-toggle:focus {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}

button.menu-toggle .mobile-menu svg,
button.menu-toggle svg {
  fill: #ffffff !important;
}

.mobile-menu-control-wrapper {
  background: var(--fg-green) !important;
}

.mobile-menu-control-wrapper button.menu-toggle {
  background: transparent !important;
}

/* ============================================================
   HOMEPAGE - Kill entry-header, full-width content
   ============================================================ */
body.home .entry-header {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.home.separate-containers .inside-article {
  padding: 0 !important;
}

body.home .content-area {
  width: 100% !important;
  max-width: 100% !important;
}

body.home .widget-area,
body.home #sidebar-primary {
  display: none !important;
}

/* ============================================================
   WP LATEST POSTS BLOCK - Cards Padding
   ============================================================ */
.wp-block-latest-posts {
  padding: 0 !important;
}

.wp-block-latest-posts li {
  padding: 0 1rem 1.5rem !important;
  margin: 0 0 0.5rem !important;
}

.wp-block-latest-posts__post-title {
  padding: 0 !important;
  margin: 0 0 0.5rem !important;
}

.wp-block-latest-posts__post-full-content {
  padding: 0 !important;
}

.wp-block-latest-posts time,
.wp-block-latest-posts .wp-block-latest-posts__post-date {
  text-transform: none !important;
  font-size: 0.85rem;
  color: #666;
}

.wp-block-latest-posts__featured-image {
  margin-bottom: 0.75rem;
}

/* ============================================================
   SIDEBAR WIDGETS - Compact
   ============================================================ */
.widget-area .widget {
  padding: 1rem !important;
  margin: 0 0 1rem !important;
  background: #ffffff;
  border: 1px solid var(--fg-border);
  border-radius: 4px;
}

.widget-title {
  font-size: 1rem !important;
  margin-bottom: 0.75rem !important;
  color: var(--fg-green) !important;
  border-bottom: 2px solid var(--fg-gold);
  padding-bottom: 0.4rem;
}

/* ============================================================
   FOOTER - Dunkelgrün
   ============================================================ */
.site-footer {
  background-color: var(--fg-green) !important;
  color: rgba(255,255,255,0.8) !important;
  border-top: 3px solid var(--fg-gold);
}

.site-footer a,
.site-footer .site-info a {
  color: var(--fg-gold) !important;
}

.site-footer a:hover {
  color: #ffffff !important;
}

.site-info {
  color: rgba(255,255,255,0.7) !important;
}

/* Footer navigation */
.fg-footer-nav {
  padding: 1rem 0;
  text-align: center;
}

.fg-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.fg-footer-menu li a {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.85rem;
  text-decoration: none;
}

.fg-footer-menu li a:hover {
  color: var(--fg-gold) !important;
}

/* ============================================================
   TABLES - Scrollable, min-width 540px
   ============================================================ */
.fg-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
}

.fg-table-wrap table {
  min-width: 540px !important;
  border-collapse: collapse;
  border-spacing: 0;
}

.fg-table-wrap table th,
.fg-table-wrap table td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--fg-border);
  text-align: left;
}

.fg-table-wrap table th {
  background-color: var(--fg-green);
  color: #ffffff;
  font-weight: 600;
}

.fg-table-wrap table tr:nth-child(even) td {
  background-color: #f9f8f5;
}

/* ============================================================
   POST NAVIGATION - No uppercase
   ============================================================ */
.post-navigation .nav-links a,
.nav-previous a,
.nav-next a {
  text-transform: none !important;
}

/* ============================================================
   SINGLE POST - Entry footer compact
   ============================================================ */
.entry-footer {
  margin-top: 1rem !important;
  padding-top: 0.75rem !important;
  font-size: 0.875rem;
  border-top: 1px solid var(--fg-border);
}

.entry-footer .cat-links,
.entry-footer .tags-links {
  margin-right: 1rem;
}

.wp-block-group__inner-container {
  padding: 0 !important;
}

/* ============================================================
   AUTHOR BOX
   ============================================================ */
.fg-author-box {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--fg-bg);
  border: 1px solid var(--fg-border);
  border-left: 4px solid var(--fg-gold);
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 4px;
}

.fg-author-avatar img {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

.fg-author-name {
  margin: 0 0 0.5rem !important;
  font-size: 1rem !important;
}

.fg-author-name a {
  color: var(--fg-green) !important;
  text-decoration: none;
}

.fg-author-bio {
  margin: 0 !important;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
}

/* ============================================================
   RELATED POSTS
   ============================================================ */
.fg-related-posts {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid var(--fg-border);
  border-radius: 4px;
}

.fg-related-title {
  margin: 0 0 1rem !important;
  font-size: 1.1rem !important;
  color: var(--fg-green) !important;
  border-bottom: 2px solid var(--fg-gold);
  padding-bottom: 0.5rem;
}

.fg-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.fg-related-item h4 {
  margin: 0.5rem 0 0.25rem !important;
  font-size: 0.9rem !important;
}

.fg-related-item h4 a {
  color: var(--fg-text) !important;
  text-decoration: none;
}

.fg-related-item h4 a:hover {
  color: var(--fg-green) !important;
}

.fg-related-date {
  font-size: 0.8rem;
  color: #888;
}

/* ============================================================
   GENERAL - Body background, text
   ============================================================ */
body {
  background-color: var(--fg-bg) !important;
  color: var(--fg-text) !important;
}

a {
  color: var(--fg-green) !important;
}

a:hover {
  color: var(--fg-gold) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-green) !important;
}

/* Category archive titles */
.page-title {
  color: var(--fg-green) !important;
}

/* ============================================================
   COVER BLOCK HERO
   ============================================================ */
.wp-block-cover {
  min-height: 400px !important;
}

.wp-block-cover__inner-container h1,
.wp-block-cover__inner-container h2,
.wp-block-cover__inner-container p {
  color: #ffffff !important;
}

/* ============================================================
   CATEGORIES BLOCK
   ============================================================ */
.wp-block-categories {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wp-block-categories li a {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: var(--fg-green);
  color: #ffffff !important;
  border-radius: 20px;
  font-size: 0.875rem;
  text-decoration: none;
}

.wp-block-categories li a:hover {
  background: var(--fg-gold);
  color: var(--fg-green) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .fg-author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .fg-related-grid {
    grid-template-columns: 1fr;
  }

  .fg-footer-menu {
    flex-direction: column;
    align-items: center;
  }
}