/* Using variables for easy theming */
:root {
  --font-family-body: 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --color-text-primary: #333;
  --color-background: #f9f9f9;
  --color-link: #007bff;
  --color-link-hover: #0056b3;
  --border-radius-base: 8px;
  --box-shadow-base: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Base article container and typography */
.node--view-mode-full {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  font-family: var(--font-family-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: #fff;
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-base);
}

/* Hide Drupal's standard theme debug comments and wrappers */
body .layout-content > div:nth-child(1),
.layout-content,
#block-immature-content > div:not(.node--view-mode-full),
#block-immature-page-title {
  display: contents; /* Keeps child elements visible while hiding the parent container */
}

/* The new H1 title styling */
h1 {
  max-width: 800px;
  margin: 40px auto 20px;
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
}

/* Hero image styling using your custom class */
.feat_image_wrapper {
  margin: 0 -20px 20px -20px; /* Extends to the edges of the container */
}

.featured_image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
}

/* Body content styling using your custom class */
.body_content {
  padding: 0 20px;
}

/* Body paragraph styling */
.body_field p {
  font-size: 1.1em;
  margin-bottom: 1.5em;
}

/* Categories and tags styling using your custom classes */
.catwrapper,
.tags_wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* Style the labels for categories and tags */
.catlabel,
.tags_label {
  font-weight: bold;
  color: #666;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Style the actual tag links */
.catitem,
.tag_item {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.catitem a,
.tag_item a {
  display: inline-block;
  padding: 5px 15px;
  background-color: #f0f0f0;
  border-radius: 20px;
  text-decoration: none;
  color: #555;
  font-size: 0.9em;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.catitem a:hover,
.tag_item a:hover {
  background-color: var(--color-link);
  color: #fff;
}