/* --- Attributions Section --- */

#attributions {
  padding: var(--space-lg);
  grid-area: attributions;
}

.attribution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: var(--space-xl);         /* Gap between the two main columns */
  align-items: start;          /* Align content to the top */
}

/* --- Left Column: External Sources --- */
.attribution-sources-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.source-item {
  /* Styling for each source block (AccuWeather, NWS, etc.) */
  padding: var(--space-md);
  border-radius: var(--radius-md);
  display: flex;         /* Use flexbox for logo and text arrangement */
  flex-direction: column; /* Stack logo/header and text/link vertically */
  gap: 0px;
  color: var(--frosted2-color) !important; /* Adjust color as needed */
}

.source-name p2{
  color: var(--frosted2-color) !important; /* Adjust color as needed */

}
.source-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--frosted2-color) !important; /* Adjust color as needed */
}

.source-logo {
  width: 50%; /* Adjust size */
  height: auto; /* Adjust size */
  object-fit: contain;
}


/* --- Right Column: Own Site Info (Updated) --- */
.attribution-own-col {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center items horizontally */
  text-align: center;  /* Center text */
  padding: var(--space-md);
  gap: var(--space-sm); /* Add gap between flex items (logo, paragraphs) */
}

.own-logo {
  width: 90%;
  height: auto;
  object-fit: contain;
  margin-bottom: var(--space-lg);
  /* margin-bottom removed, rely on flex gap */
}


/* Add a line break (border) below each paragraph EXCEPT the last one */
.own-text:not(:last-of-type) {
  border-bottom: 1px solid var(--subtext-color); /* Adjust color and thickness as needed */
  padding-bottom: var(--space-sm); /* Space between text and the line */
  margin-bottom: var(--space-sm); /* Space between the line and the next paragraph (adjust if using gap) */
}

@media (max-width: 450px) {

  .attribution-grid {
    display: grid;
    grid-template-columns: 1fr; /* Two equal columns */
    gap: var(--space-xl);         /* Gap between the two main columns */
    align-items: start;          /* Align content to the top */
  }

  .own-logo {
    width: auto;
    height: 30px;
    object-fit: contain;
    margin-bottom: var(--space-lg);
    /* margin-bottom removed, rely on flex gap */
  }

    .source-logo {
      width: 150px; /* Adjust size */
      height: auto; /* Adjust size */
      object-fit: contain;
    }



}