@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
:root {
  /* --- Nord Palette --- */
  --nord-0: #2e3440; /* Polar Night (Deepest) */
  --nord-1: #353b43; /* Polar Night (Sidebar/Highlight) */
  --nord-2: #3b4252; /* Polar Night (Main Background) */
  --nord-3: #434c5e; /* Polar Night (Dividers/Borders) */
  --nord-4: #4c566a; /* Polar Night (Cards/Hovers) */
  --nord-5: #d8dee9; /* Snow Storm (Muted Text) */
  --nord-6: #e5e9f0; /* Snow Storm (Main Text) */
  --nord-8: #88c0d0; /* Frost (Cyan) */
  --nord-9: #81a1c1; /* Frost (Blue) */
  --nord-10: #5e81ac; /* Frost (Dark Blue) */
  --nord-11: #bf616a; /* Aurora (Red - Header) */
  --nord-13: #ebcb8b; /* Aurora (Yellow - Links) */
  --nord-14: #a3be8c; /* Aurora (Green) */
  --nord-15: #b48ead; /* Aurora (Purple) */
  --nord-0-alpha65: rgba(46, 52, 64, 0.65); /* Polar Night (Overlay) */
  /* --- Dracula Palette --- */
  --dra-bg: #282a36; /* Background (Main Content) */
  --dra-sidebar: #21222c; /* Black (Sidebar/Deep Background) */
  --dra-selection: #44475a; /* Selection (Cards/Hovers) */
  --dra-comment: #6272a4; /* Bright Black (Muted Text) */
  --dra-fg: #f8f8f2; /* Foreground (Main Text) */
  --dra-white: #ffffff; /* Bright White */
  --dra-red: #ff5555; /* Red (Header) */
  --dra-orange: #ffb86c; /* Focused Match (Accent) */
  --dra-yellow: #f1fa8c; /* Yellow (Links) */
  --dra-green: #50fa7b; /* Green */
  --dra-purple: #bd93f9; /* Blue/Purple (Frost equivalent) */
  --dra-pink: #ff79c6; /* Magenta */
  --dra-cyan: #8be9fd; /* Cyan */
  --dra-bg-alpha65: rgba(40, 42, 54, 0.65); /* Overlay */
  /* --- Everforest Palette (Dark Hard) --- */
  --ef-bg0: #272e33; /* Background (Deepest) */
  --ef-bg1: #2e383c; /* Background (Sidebar/Highlight) */
  --ef-bg2: #3b444b; /* Background (Main Content) */
  --ef-bg3: #414b50; /* Background (Dividers/Borders) */
  --ef-bg4: #495156; /* Background (Cards/Hovers) */
  --ef-fg: #d3c6aa; /* Snow Storm equivalent (Main Text) */
  --ef-fg-dim: #859289; /* Muted Text */
  --ef-red: #e67e80; /* Aurora Red equivalent */
  --ef-orange: #e69875; /* Aurora Orange */
  --ef-yellow: #dbbc7f; /* Aurora Yellow (Links) */
  --ef-green: #a7c080; /* Aurora Green */
  --ef-blue: #7fbbb3; /* Frost Blue equivalent */
  --ef-aqua: #83c092; /* Frost Cyan equivalent */
  --ef-purple: #d699b6; /* Aurora Purple */
  --ef-bg-alpha65: rgba(39, 46, 51, 0.65); /* Overlay */
  /* --- UI Functional Mapping --- */
  --color-body-bg: black;
  --color-main-bg: var(--nord-2);
  --color-sidebar-bg: var(--nord-1);
  --color-header-bg: var(--nord-11);
  --color-text-body: #161616; /* Preserved specific body text color */
  --color-text-main: var(--nord-6);
  --color-text-muted: var(--nord-5);
  --color-text-dark: var(--nord-2);
  --color-link: var(--nord-13);
  --color-link-hover: var(--nord-8);
  --color-border: var(--nord-3);
  --color-table-border: var(--nord-5) --color-card-bg: var(--nord-4);
  --color-overlay-bg: var(--nord-0-alpha65);
  --color-accent-blue: var(--nord-9);
  --color-accent-dark-blue: var(--nord-10);
  --color-accent-green: var(--nord-14);
  --color-accent-purple: var(--nord-15);
  --color-card-bg: var(--nord-4);
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

body {
  font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
  font-size: 1em;
  line-height: 1.2;
  color: var(--color-text-body);
  background-color: var(--color-body-bg);
  height: 100vh;
  max-width: 1124px;
  margin: auto;
  overscroll-behavior: none;
}

.center {
  text-align: center;
  font-family: inherit;
}

.right {
  text-align: right;
  font-family: inherit;
}

.left {
  text-align: left;
  font-family: inherit;
}

h1 {
  font-size: 1.5em;
  font-family: Oswald;
  font-weight: normal;
  text-transform: uppercase;
}

h2,
h4 {
  font-size: 1.5em;
  font-family: Oswald;
  font-weight: normal;
}

h3 {
  font-family: Oswald;
  font-weight: normal;
  color: var(--color-text-main);
}

.p-border {
  border: 2px solid var(--color-border); /* style the border */
  border-radius: 3px; /* optional: rounded corners */
  padding: 0.75rem 1rem; /* space inside the border */
  display: flow-root; /* self-clear floats inside */
  /* or: overflow: auto;  (older clearfix alternative) */
}

ul {
  list-style-type: none;
}

.layout {
  display: grid;
  grid-template-columns: 12rem 1fr;
  grid-template-areas: "sidebar header" "sidebar main";
  grid-template-rows: 4rem 1fr;
  min-height: 100vh;
}

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  width: 14rem;
  height: 100vh;
  background-color: var(--color-sidebar-bg);
  color: var(--color-text-main);
  z-index: 1000;
}

.logo {
  width: 100%;
  height: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-header-bg);
  margin-bottom: 5rem;
}

.logo img {
  margin-top: 15em;
  width: 90%;
  height: auto;
}

.byline {
  text-align: center;
  margin-top: 0.1rem;
  color: var(--color-text-muted);
  margin-bottom: 0.1rem;
  font-size: 1.3rem;
}

.byline i {
  font-size: 1.4rem;
}

.byline a {
  color: var(--color-text-muted);
  padding: 0 0.3rem;
}

.nav {
  margin-top: 9em;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1rem;
}

.nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav li {
  width: 90%;
  padding-left: 0.6rem;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-weight: 200;
  /*transform: translateX(-5px);*/
  transition: all 0.2s ease-in;
}

.nav a {
  display: block;
  text-decoration: none;
  color: var(--color-text-muted);
  padding: 0.6rem 1em;
  text-transform: uppercase;
}

.nav a i {
  margin-right: 0.7em;
}

.nav li:hover {
  /*transform: translateX(0);*/
  background-color: var(--color-card-bg);
}

.nav ul li.active {
  transform: translateX(0);
  background-color: var(--color-card-bg);
}

.nav-bottom {
  width: 100%;
  margin-top: auto;
  padding: 0.5em 0;
  text-align: center;
  font-size: 0.8rem;
  align-items: center;
}

.nav-bottom a {
  color: inherit;
  text-decoration: inherit;
  margin: 0.4rem;
}

.nav-sublink {
  display: flex;
  text-decoration: none;
  margin-left: 2em;
  opacity: 0.9;
  font-size: 0.8em;
}

.nav-subitem.active > .nav-sublink,
.nav > ul > li.active > a {
  opacity: 1;
}

.header {
  grid-area: header;
  position: relative;
  padding: 0 1.5rem 0 3rem;
  height: 4rem;
  background-color: var(--color-header-bg);
  text-align: center;
  text-transform: uppercase;
}

.main {
  grid-area: main;
  padding: 1rem 1rem 0 3rem;
  background-color: var(--color-main-bg);
  color: var(--color-text-main);
  overflow-wrap: break-word;
  font-weight: 250;
  word-break: keep-all;
  min-width: 0;
}

.post-header {
  padding: 0.1rem 0.5rem 0.5rem;
  background-color: var(--color-sidebar-bg);
  color: var(--color-text-muted);
  display: grid;
  grid-template-rows: auto auto;
}

.post-header h1 {
  line-height: 0.3rem;
}

.post-meta {
  font-size: small;
  display: flex;
  gap: 1.1rem;
}

.post-meta a {
  text-decoration: none;
  color: inherit;
}

.post-meta > div {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.post-content pre {
  max-width: 100%;
  overflow-x: auto;
}

.post-content ul {
  list-style-type: circle;
  margin-left: 0.25rem;
}

.post-content li {
  padding-bottom: 0.5rem;
}

.post-content a {
  color: var(--color-link);
  font-weight: bolder;
}

.tags h1 {
  line-height: 0.3rem;
  word-spacing: 1.2rem;
}

.tags-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  list-style: none;
  padding: 0;
}

.tags-list-item {
  padding: 8px 12px;
  display: flex;
  align-items: center;
}

/* Target the items in the first row of each alternating pair (Row 1, Row 3, Row 5, etc.) */
/* This covers items 1, 2, 3, 7, 8, 9, etc. */
.tags-list-item:nth-child(6n+1),
.tags-list-item:nth-child(6n+2),
.tags-list-item:nth-child(6n+3) {
  background-color: var(--color-text-muted); /* Color for the "odd" rows */
  color: var(--color-text-dark);
}

/* Target the items in the second row of each alternating pair (Row 2, Row 4, Row 6, etc.) */
/* This covers items 4, 5, 6, 10, 11, 12, etc. */
.tags-list-item:nth-child(6n+4),
.tags-list-item:nth-child(6n+5),
.tags-list-item:nth-child(6n+6) {
  background-color: var(--color-card-bg); /* Color for the "even" rows */
  color: var(--color-text-main); /* Added a contrasting color for dark background */
}

a {
  text-decoration: none;
  color: inherit;
}

.tags-list-item-title:hover {
  font-weight: bold;
}

.tags-list-item i {
  margin-right: 8px;
}

/* Styles for the main list page */
.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-list-item {
  display: flex;
  margin-top: 1.25rem;
  border: var(--color-sidebar-bg) solid 1px;
}

.article-image {
  width: 30%;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-content-right {
  background-color: var(--color-card-bg);
  color: var(--color-text-muted);
  padding: 8px;
  flex-grow: 1;
}

.article-title {
  display: block;
  padding: 0.2rem 0 0.3rem 0.1rem;
  font-size: 1.2em;
  color: var(--color-text-muted);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 50% 1px;
  transition: background-size 0.3s;
}

.article-title:hover {
  background-size: 100% 1px;
  color: var(--color-link);
}

.article-title a {
  text-decoration: none;
}

.article-title h3 {
  margin: 0;
  padding: 0;
  font-size: 1.1em;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.8em;
  margin: 10px 0 0 0;
}

.article-meta > div > a.tag {
  background-color: var(--color-text-muted) !important;
  color: var(--color-card-bg);
  font-weight: normal;
  border-radius: 0.2rem;
  padding: 0 0.15rem 0 0.15rem;
}

.article-meta > div > a.tag:hover {
  background-color: var(--color-text-main) !important;
  color: var(--color-card-bg);
  font-weight: normal;
  border-radius: 0.2rem;
}

.article-description {
  display: inline-block !important;
  color: var(--color-text-muted);
  margin-top: 0px;
  font-size: 1rem;
}

.article-description > h3 {
  color: var(--color-text-main) !important;
}

.post,
.cat,
.tags,
.list-page,
.home {
  text-align: justify;
  text-justify: inter-word;
  margin: 0 0.5rem 1.5rem 0;
  position: relative;
}

.list-page p {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.article-description p {
  margin-top: 10px;
  margin-bottom: 0;
}

.home-image {
  width: 100%;
  position: relative;
}

.home-image img {
  display: block;
  width: 100%;
  height: auto;
  z-index: 2;
}

.home a {
  color: var(--color-link);
  font-weight: bolder;
}

.home .highlight {
  padding: 1rem 0rem 1rem 0rem;
}

.home .highlight pre {
  padding: 0 1rem 1rem 1rem;
  background-color: var(--color-text-muted) !important;
}

.subtitle {
  position: absolute;
  top: 20px;
  width: 100%;
  padding: 0.3rem 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-overlay-bg);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
  z-index: 1;
}

blockquote {
  margin: 0;
}

.article-description > h3 {
  color: var(--color-text-dark);
  margin: 0;
}

blockquote > .one {
  border-bottom: var(--color-accent-dark-blue) solid 2px;
}

blockquote > .two {
  border-bottom: var(--color-accent-purple) solid 2px;
}

blockquote > .three {
  border-bottom: var(--color-link) solid 2px;
}

blockquote > .four {
  border-bottom: var(--color-accent-green) solid 2px;
}

blockquote > .five {
  border-bottom: var(--color-header-bg) solid 2px;
}

h2[data-heading-colour] {
  border-bottom: var(--heading-line-colour) solid 2px;
}

h2[data-heading-colour="1"] {
  --heading-line-colour: var(--color-accent-dark-blue);
}

h2[data-heading-colour="2"] {
  --heading-line-colour: var(--color-accent-purple);
}

h2[data-heading-colour="3"] {
  --heading-line-colour: var(--color-link);
}

h2[data-heading-colour="4"] {
  --heading-line-colour: var(--color-accent-green);
}

h2[data-heading-colour="5"] {
  --heading-line-colour: var(--color-header-bg);
}

em {
  font-size: 1rem;
  color: var(--color-text-main);
}

.five div {
  background-color: var(--color-text-main) !important;
}

.cert {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 0 0;
}

.cert:last-child {
  margin-right: 0;
}

.cert > figcaption > p {
  font-size: 0.9rem;
}

.supertext {
  /* vertical-align: super; */
  font-size: smaller;
  margin: 1rem;
}

.cat h1 {
  line-height: 0.3rem;
  word-spacing: 1.2rem;
}

.cat > p {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.cat-list {
  padding: 0;
  margin: 0;
}

.cat-list-item {
  margin-top: 2rem;
  transition: transform 0.4s ease-in-out;
}

.cat-list-item-link {
  display: flex;
  /* Arrange image and info in a row */
  align-items: flex-start;
  /* Align the top of the image and info block */
  text-decoration: none;
  /* Remove default link styling */
  color: inherit;
  /* Inherit text color from parent */
}

.cat-list-item-title {
  font-size: 1.5rem;
  margin-right: 0.8rem;
}

.cat-list-img {
  max-width: 250px;
  /* Ensure the image doesn't exceed 200px width */
  width: 150px;
  /* Set a fixed width for the image container */
  min-width: 150px;
  height: auto;
  /* Allow the height to adjust based on the image aspect ratio */
  flex-shrink: 0;
  /* Prevent the image container from shrinking */
  margin-right: 1rem;
  /* Add some space between the image and the info */
}

.cat-list-img img {
  display: block;
  /* Remove extra space below inline images */
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensure the image covers the entire container */
}

.cat-list-item-info {
  padding: 0.5rem 0.5rem 0.5rem 0;
  flex-grow: 1;
  text-align: left;
  font-size: 1rem;
}

.cat-list-item-title {
  font-weight: bold;
  /* Make the title stand out */
  display: inline-block;
  /* Allows it to be on the same line as the count */
  margin-right: 0.5rem;
  /* Add some space between the title and count */
  margin-bottom: 0.2rem;
  /* Add a small bottom margin for spacing below this line */
}

.cat-list-item:nth-child(odd) {
  background-color: var(--color-text-muted);
  color: var(--color-text-dark);
}

.cat-list-item:nth-child(even) {
  background-color: var(--color-card-bg);
}

.cat-list-item i {
  margin-right: 8px;
}

.cat-list-item p {
  font-size: 1em;
  line-height: 1.2rem;
  margin: 0;
  padding-top: 0.4rem;
}

.cat-list-item:last-child {
  margin-bottom: 2rem;
}

.cat-list-item:hover {
  transform: scale(1.02);
}

.pagination-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  width: 100%;
  margin-top: 3rem;
}

.button {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border-radius: 0.2rem;
  text-decoration: none;
  color: var(--color-text-main);
  width: 50%;
  background-color: var(--color-card-bg);
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: var(--color-text-muted);
  /* Lighter background on hover */
  color: var(--color-text-dark);
  /* Darker text on hover */
}

.button-icon {
  font-size: 1.5rem;
  /* Adjust icon size */
  margin: 0 0.5rem;
  /* Space between icon and text */
}

.previous .button-icon {
  margin-left: 0;
  /* No left margin for previous button's icon */
}

.next .button-icon {
  margin-right: 0;
  /* No right margin for next button's icon */
}

.next {
  justify-content: flex-end;
}

.button-text {
  font-size: 1rem;
  /* Adjust text size */
}

blockquote > .danger,
blockquote > .note,
blockquote > .warning {
  background: var(--color-card-bg);
  border-left-style: solid;
  border-left-width: 1.4rem;
  border-radius: 0.2rem;
  /* margin-left: 1rem; */
  font-size: 1.2rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
}

.warning {
  border-left-color: var(--color-link);
}

.note {
  border-left-color: var(--color-accent-dark-blue);
}

.danger {
  border-left-color: var(--color-header-bg);
}

.series-list {
  list-style: none;
  background-color: var(--color-card-bg);
  padding: 0.5rem;
  margin: 0;
}

summary::before {
  content: "▶";
  /* Right-pointing arrow for closed state */
  display: inline-block;
  margin-right: 10px;
  transition: transform 0.2s ease-in-out;
}

.series-list summary {
  display: block;
  cursor: pointer;
  color: var(--color-text-main);
}

.series-list[open] ol {
  padding-bottom: 0.5rem !important;
  padding-top: 1rem;
  margin: 0;
}

.series-list[open] summary::before {
  transform: rotate(90deg); /* No rotation needed if content is '▼' */
}

.series-list .active {
  font-weight: bolder;
}

.series-list ol > li.active {
  list-style-type: none;
  position: relative;
}

.series-list ol > li.active::before {
  content: "👉";
  position: absolute;
  right: calc(100% + 0.3em);
}

/* Ensure the scrollable wrapper */
.highlight {
  overflow-x: auto !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  width: 100% !important;
}

/* Force pre to allow scroll */
.highlight pre {
  padding: 1rem !important;
  overflow-x: auto !important;
  background-color: var(--color-sidebar-bg) !important;
  display: block !important;
  width: max-content !important;
  min-width: 100% !important;
  white-space: pre !important;
}

/* Table styling */
table {
  width: 100%;
  border-collapse: collapse; /* Removes spacing between borders */
  margin-bottom: 1em; /* Adds space below the table */
}

th,
td {
  border: 1px solid var(--color-table-border);
  padding: 8px;
  text-align: left;
}

th {
  background-color: var(--color-sidebar-bg);
  font-weight: bold;
  text-align: center;
}

/* recent article cards */
.latest-articles-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.post-card-link {
  text-decoration: none;
  font-weight: normal !important;
  color: var(--color-text-muted) !important;
}

.post-card {
  background-color: var(--color-card-bg);
  padding: 10px;
  border: 1px solid var(--color-card-bg);
  border-radius: 2px;
  height: 100%; /* Ensures all cards are the same height */
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  color: var(--color-text-muted) !important;
  border: 1px solid var(--color-link);
}

.post-title {
  /* Or use a more specific selector for your title container */
  border-bottom: 1px solid var(--color-text-muted);
}

.post-title H3 {
  margin: 0 0 0.5rem 0;
}

.post-card p {
  flex-grow: 1; /* Pushes the date to the bottom */
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 15px; /* Adds a little space below the line */
  margin-bottom: 5px; /* Adds space between the line and the content */
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.8em;
  gap: 0.8rem;
}

/* breadrumbs */
.breadcrumb {
  position: absolute; /* <-- ADD THIS LINE */
  bottom: 0.2rem; /* Places the breadcrumb at the bottom edge of the header */
  left: 3rem;
  font-size: 0.8em;
}

.breadcrumb ol {
  list-style: none; /* Remove default list bullets */
  margin: 0;
  padding: 0;
  display: flex; /* Arrange list items horizontally */
  flex-wrap: wrap; /* Allow breadcrumbs to wrap on small screens */
}

.breadcrumb ol li {
  display: flex;
  align-items: center; /* Center content vertically */
}

.breadcrumb ol li a {
  text-decoration: none;
  white-space: nowrap;
}

.breadcrumb ol li a:hover {
  text-decoration: underline; /* Underline on hover for better user experience */
}

/* This is the key rule that creates the separator */
.breadcrumb ol li:not(:last-child)::after {
  content: ">"; /* The separator character */
  margin: 0 8px; /* Space before and after the separator */
}

/* Style for the current, active breadcrumb item */
.breadcrumb ol li.active a {
  pointer-events: none; /* Make it unclickable */
  text-decoration: none;
}

/* * Apply Styling to Hugo default pagination template text
 */
.pagination-default {
  list-style: none; /* Ensure no bullets */
  margin: 3rem auto 0 auto; /* Margin-top and center the list */
  padding: 0;
  display: flex;
  gap: 1rem; /* Space between buttons */
  justify-content: center;
}

.page-item {
  display: inline-flex; /* Use inline-flex on the li container */
  /* Remove default list styling */
  margin: 0;
  padding: 0;
}

.page-item a.page-link,
.page-item.active a.page-link,
.page-item.disabled a.page-link {
  /* Apply core button styles to the link element (a.page-link) */
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border-radius: 0.2rem;
  text-decoration: none;
  /* Color theme */
  color: var(--color-text-main); /* Light color for normal state */
  background-color: var(--color-card-bg); /* Dark background */
  transition: background-color 0.3s ease;
  /* Resetting default styles */
  border: none;
  box-shadow: none;
}

/* HOVER: Replaces .button:hover */
.page-item a.page-link:hover:not([aria-disabled=true]) {
  background-color: var(--color-text-muted); /* Lighter background on hover */
  color: var(--color-text-dark); /* Darker text on hover */
}

/* ACTIVE PAGE: Style for the current page number */
.page-item.active a.page-link {
  background-color: var(--color-text-muted);
  color: var(--color-text-dark);
}

/* DISABLED BUTTONS: Style for 'First'/'Previous' when on page 1 */
.page-item.disabled a.page-link {
  /* Re-apply the initial background/color but with opacity */
  opacity: 0.3;
  cursor: default;
  background-color: var(--color-card-bg);
  color: var(--color-text-main);
}

/* ICONS/TEXT: Handle the internal span elements */
.page-item a.page-link span[aria-hidden=true] {
  font-size: 1.5rem;
  margin: 0 0.5rem;
}

/* Specific adjustments for previous/next arrows*/
/* The general margin above should cover this, but let's target them: */
.page-item:first-child a.page-link span[aria-hidden=true] {
  margin-left: 0;
}

.page-item:last-child a.page-link span[aria-hidden=true] {
  margin-right: 0;
}

/* Target the specific link with the "First" aria-label */
/* Hide the original content "««" (&laquo;&laquo;) */
.page-item a[aria-label=First] span[aria-hidden=true] {
  display: none;
}

/* Insert the new text "First" using the ::after pseudo-element */
.page-item a[aria-label=First]::after {
  content: "First";
}

/* Target the specific link with the "Previous" aria-label */
/* Hide the original content "«" (&laquo;) */
.page-item a[aria-label=Previous] span[aria-hidden=true] {
  display: none;
}

/* Insert the new text "First" using the ::after pseudo-element */
.page-item a[aria-label=Previous]::after {
  content: "← Back";
}

/* Target the specific link with the "Previous" aria-label */
/* Hide the original content "«" (&laquo;) */
.page-item a[aria-label=Next] span[aria-hidden=true] {
  display: none;
}

/* Insert the new text "First" using the ::after pseudo-element */
.page-item a[aria-label=Next]::after {
  content: "Next →";
}

/* Target the specific link with the "Last" aria-label */
/* Hide the original content "»»"" (&raquo;&raquo;) */
.page-item a[aria-label=Last] span[aria-hidden=true] {
  display: none;
}

/* Insert the new text "First" using the ::after pseudo-element */
.page-item a[aria-label=Last]::after {
  content: "Last";
}

/* Style and align images using hugo default render-image function */
img.left {
  float: left;
  margin: 0 5px 5px 0;
}

img.right {
  float: right;
  margin: 15px 0 10px 10px;
}

.center {
  display: block; /* make <img> respect margins */
  margin: 0 auto; /* centers horizontally */
  max-width: 100%; /* responsive */
  height: auto;
}

.padded > img {
  padding: 0 20px 0 20px;
}

/* Style and align Figure images based on custom shortcode  */
/* layout/shortcode/figure.html                             */
.figure {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.figure-img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.figure-caption {
  align-self: stretch; /* take full cross-axis width in a column flex */
  text-align: center; /* center the caption text */
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Alignment (no wrapping) */
.figure-left {
  justify-content: flex-start;
  align-items: flex-start;
}

.figure-center {
  justify-content: center;
  align-items: center;
}

.figure-right {
  justify-content: flex-end;
  align-items: flex-end;
}

/* Optional text wrapping (float) */
.figure-wrap {
  max-width: min(100%, 40ch);
} /* tweak as you like */
.figure-wrap.figure-left {
  float: left;
  margin: 0 5px 5px 0;
}

.figure-wrap.figure-right {
  float: right;
  margin: 0 0 5px 5px;
}

/* Clear floats after paragraphs so later content doesn't snake around */
p::after,
.content p::after {
  content: "";
  display: block;
  clear: both;
}

.inline-link-icon {
  vertical-align: super;
  display: inline-block;
  font-size: 0.5rem;
  font-weight: 150;
  margin-right: 0.5em; /* gap between icon and following text */
}

/* Container for the source link, aligning elements */
.post-source-link {
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-muted); /* Nord Snow Storm */
  margin-top: 1.5rem; /* Added some breathing room from the content above */
}

/* Targeting the specific red accent color for the icon */
.post-source-link i {
  color: var(--color-header-bg); /* Theme Red */
  font-size: 1.1rem;
}

/* Subtle styling for the link itself with hover effects */
.post-source-link a {
  color: var(--color-accent-blue); /* Nord Frost Blue */
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-source-link a:hover {
  color: var(--color-link-hover); /* Lighter Nord Blue */
  text-decoration: underline;
} /* Added missing closing brace */

/*# sourceMappingURL=style.css.map */