/* TABLES DISPLAY */
/* Apply styles to all tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}

/* Apply border and padding to table cells */
th, td {
  border: 1px solid var(--primary-color);
  padding: 8px;
}

/* Apply background color to header row */
th {
  background-color: var(--primary-color);
}

/* Apply alternate background color to rows */
tr:nth-child(even) {
  background-color: var(--card-color);
}




/* CARD STYLE */
article {
  --img-scale: 1.001;
  --title-color: black;
  --link-icon-translate: -20px;
  --link-icon-opacity: 0;
  position: relative;
  box-shadow: none;
  background: var(--card-color);
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}

article h2 {
  margin: 0 0 18px 0;
  font-family: "Bebas Neue", cursive;
  font-size: 1.9rem;
  letter-spacing: 0.06em;
  color: var(--title-color);
  transition: color 0.3s ease-out;
}

article img {
  width: 100%;
  height: auto;
  display: block;
  margin: 6px auto 0 auto;
}

.article-body {
  padding: 24px;
}

article a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--primary-color);
}

article a:hover {
  color: var(--secondary-color);
}

article a .icon {
  min-width: 24px;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  transform: translateX(var(--link-icon-translate));
  opacity: var(--link-icon-opacity);
  transition: all 0.3s;
}

/* Style the article wrapper on hover */
article:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

/* Show the link icon on hover */
article:hover .icon {
  transform: translateX(0);
  opacity: 1;
}

.button-tags {
  margin: 0 2px;
}


.button-tags a {
  color: var(--secondary-color);
}

.button-tags a:hover {
  color: var(--primary-color);
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* MAIN STYLE */
main {
  width: 75%;
  float: left;
  margin-top: 20px;
}

@media screen and (max-width: 800px) {
  main {
    width: 100%;
    padding: 0;
  }
}

.articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.article-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Featured card */
.articles article:first-child {
  grid-column: span 2;
}


/* If there's only one article, make it span the entire width */
.articles article:first-child:only-child {
  grid-column: span 3;
}


/* Related Article */
main .bottom-container h2 {
  padding: 10px 0;
}

main .bottom-container ul {
  list-style-type: none;
}

main .bottom-container ul li a {
  padding-left: 20px;
  color: var(--primary-color);
  text-decoration: none;
}

main .bottom-container ul li a:hover {
  color: var(--secondary-color);
}

@media screen and (max-width: 960px) {
  .articles {
    grid-template-columns: 1fr;
  }

  .articles article:first-child {
    grid-column: span 1;
  }
}

@media screen and (min-width: 960px) {
  .articles {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

.default {
  width: 100%;
  margin-bottom: 20px;
}

.default a {
  text-decoration: none;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.default h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--secondary-color);
}

.default p {
  font-size: 14px;
  color: var(--font-color);
  margin-bottom: 20px;
}

.default img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* POST LIST CONTAINER */
.post-list-container {
  padding: 10px;             /* 10px padding around the container */
  margin-bottom: 20px;       /* spacing below */
}

.post-list-container a {
  display: block;             /* each link on its own line */
  margin-bottom: 5px;         /* spacing between links */
  text-decoration: none;
  color: var(--primary-color); /* adjust to your theme */
}

.post-list-container a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}



/* GLOBAL STYLE */
/* Googlefont Poppins CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

:root {
  --primary-color: #007060;
  --secondary-color: #FF5722;
  --font-color: #333;
  --bg-color: #f8f9fa;
  --card-color: #eee;

  --menu-font-color: #ddd;
  --menu-bg-color: #181F23;
  --menu-hover-color: #ddd;
}

[data-theme="dark"] {
  --primary-color: #007060;
  --secondary-color: #FF5722;
  --font-color: #e1e1ff;
  --bg-color: #000;
  --card-color: #181F23;

}


/* Optional: Add some transitions for smooth theme switching */
body {
  transition: background-color 0.3s, color 0.3s;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  padding: 0 20px;
  background-color: var(--bg-color);
  color: var(--font-color);
}

/* Headings – base */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  color: var(--font-color);
  font-family: inherit;
  line-height: 1.3;
  margin: 1.2em 0 0.6em;
  font-weight: 600;
}

/* Sizes per level */
h1, .wp-block-heading.is-style-h1 { font-size: 2.2rem; font-weight: 700; }
h2, .wp-block-heading.is-style-h2 { font-size: 1.8rem; font-weight: 700; }
h3, .wp-block-heading.is-style-h3 { font-size: 1.5rem; font-weight: 600; }
h4, .wp-block-heading.is-style-h4 { font-size: 1.25rem; font-weight: 600; }
h5, .wp-block-heading.is-style-h5 { font-size: 1.1rem; font-weight: 500; }
h6, .wp-block-heading.is-style-h6 {
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.posts-list {
  list-style: none; /* removes bullets */
  padding: 0;       /* removes default padding */
  margin: 0;        /* removes default margin */
}

.posts-list li {
  margin-bottom: 0.5em; /* optional spacing between links */
}

.taxonomy-list {
  list-style: none;      /* remove bullets */
  margin: 0;             /* reset default UL margin */
  padding: 0;            /* reset default UL padding */
}

.taxonomy-list li {
  margin: 0.5rem 10px;      /* optional spacing between items */
}

/* CONTENT OF EACH CARDS */
.meta-top, .meta-author {
  font-size: 0.9rem;
  color: var(--font-color-light, #888);
  margin-bottom: 0.5rem;
}

.meta-top .meta-label {
  font-weight: 600;
  margin-right: 4px;
  color: var(--primary-color);
}

.meta-link {
  margin-right: 6px;
  text-decoration: none;
  color: var(--font-color-light, #666);
}
.meta-link:hover {
  text-decoration: underline;
  color: var(--primary-color);
}

/* Text color (default state) */
.meta-tags .button-tags {
  color: var(--font-color-light, #888);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Icon color inside tag button */
.meta-tags .button-tags i {
  color: var(--primary-color); /* icon fixed color */
  margin-right: 4px; /* small spacing from text */
}

/* Hover state: only text changes, icon stays same */
.meta-tags .button-tags:hover {
  background: var(--primary-color);
  color: #fff;
}

.meta-tags .button-tags:hover i {
  color: #fff; /* OR keep as var(--primary-color) if you want it fixed */
}

.meta-author {
  display: flex;
  flex-wrap: wrap;          /* allows items to break on small screens */
  gap: 0.75rem;             /* consistent spacing instead of " | " */
  align-items: center;
  font-size: 0.9rem;
  color: var(--font-color-light, #888);
}

.meta-author span {
  display: flex;
  align-items: center;
  gap: 4px;                 /* space between icon and text */
}

.meta-author i {
  color: var(--primary-color); /* icons follow theme */
  font-size: 0.95em;
}

img.post-image {
  max-width: 100%;
  width: auto;
  height: auto;

}



/* FIXES */

/* Solves the list style of the rendered markdown */
ol {
  list-style-position: inside;
}

.featured-image {
  width: 100%;
  height: auto;
  max-width: 100%;
}

.wp-block-image img {
  width: clamp(200px, 100%, 1200px);
  height: auto;
}

.article-body pre {
  white-space: pre-wrap;   /* allow wrapping */
  word-wrap: break-word;   /* break long words if needed */
  overflow-x: auto;        /* horizontal scroll for very long code */
  max-width: 100%;         /* never overflow container */
}


.ad-slot {
  width: 100%;
  height: auto;
  margin: 1rem auto;
  background: var(--card-color); /* fallback so it's not blank */
  border: 1px dashed #ccc;       /* optional placeholder border */
  text-align: center;
  line-height: 90px;
  color: #777;
  font-size: 0.85rem;
}

.ad-slot:empty::before {
  content: "Ad space";
}


/* Table Of Contents */
.post-content h2[id],
.post-content h3[id],
.post-content h4[id],
.post-content h5[id],
.post-content h6[id] {
  position: relative;
}

.post-content h2[id]::before,
.post-content h3[id]::before,
.post-content h4[id]::before,
.post-content h5[id]::before,
.post-content h6[id]::before {
  content: "";
  display: block;
  height: 100px;  /* same as navbar height */
  margin-top: -100px;
  visibility: hidden;
}

html {
  scroll-behavior: smooth;
}

.table-of-contents {
  margin: 2em 0;
  padding: 1.2em 1.5em;
  border: 1px solid var(--font-color);
  background: var(--background-color, transparent); /* fallback if no bg var */
  font-family: inherit; /* match theme font */
  font-size: 0.95em;
  line-height: 1.6;
}

.table-of-contents h2 {
  margin-top: 0;
  margin-bottom: 0.8em;
  font-size: 1.1em; /* smaller than post-title */
  font-weight: 600;
  color: var(--font-color);
  font-family: inherit; /* follow theme font */
}

.table-of-contents ul {
  margin: 0;
  padding-left: 1.2em;
  list-style: none;
}

.table-of-contents li {
  margin: 0.35em 0;
}

.table-of-contents li ul {
  margin-top: 0.3em;
  padding-left: 1.2em; /* deeper indent for subheadings */
  border-left: 1px solid rgba(0,0,0,0.1); /* subtle visual hierarchy */
}

.table-of-contents a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.table-of-contents a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}