/* birthday-article-styles.css */
/* ----------------------------------------------------------------
  Styles for "Birthday" Article - Incorporating Glassmorphism
-----------------------------------------------------------------*/

/* --- Base --- */
.birthday-article {
  font-family: "Zen Kaku Gothic New", sans-serif;
  line-height: 1.8;
  color: #444; /* 少し濃いめのグレー */
  background-color: #fefefe; /* Light background */
  padding: 2em 1.5em;
  margin: 2.5em auto;
  max-width: 820px;
  border-radius: 12px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07);
}

/* --- Headings --- */
.birthday-article h1 {
  font-size: 2.3em;
  color: #ff7f50; /* Coral - birthday-ish */
  text-align: center;
  margin-bottom: 1.8em;
}

.birthday-article h2 {
  font-size: 2em;
  border-bottom: 3px solid #ffb6c1; /* LightPink accent */
  padding-bottom: 0.6em;
  margin-bottom: 1.5em;
  color: #2c3e50; /* Dark Blue Grey */
}

.birthday-article h3 {
  font-size: 1.65em;
  color: #4682b4; /* SteelBlue */
  margin-top: 2.8em;
  margin-bottom: 1.2em;
  display: flex;
  align-items: center;
}

.birthday-article h3 .fa-icon {
  margin-right: 0.6em;
  color: #ffb6c1; /* LightPink accent */
  font-size: 0.9em;
  flex-shrink: 0;
}

.birthday-article h4 {
  font-size: 1.25em; /* Slightly larger h4 for cards */
  color: #333; /* Darker for better contrast on cards */
  font-weight: 600;
  margin-top: 0; /* Adjusted for card layout */
  margin-bottom: 1em;
}

/* --- Paragraphs & Links --- */
.birthday-article p {
  margin-bottom: 1.4em;
  font-size: 1.08em;
  line-height: 1.95;
}

.birthday-article a {
  color: #ff7f50; /* Coral */
  text-decoration: none;
  border-bottom: 1px dashed #ff7f50;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
  word-break: break-all;
}

.birthday-article a:hover,
.birthday-article a:focus {
  color: #ff6347; /* Tomato */
  border-bottom-style: solid;
}

/* --- Lists (Font Awesome Icons) --- */
.birthday-article ul.icon-list {
  list-style-type: none;
  padding-left: 0.5em;
  margin-bottom: 1.8em;
}

.birthday-article ul.icon-list li {
  margin-bottom: 1em;
  line-height: 1.85;
  position: relative;
  padding-left: 2.5em;
}

.birthday-article ul.icon-list li .fa-li-icon {
  position: absolute;
  left: 0.2em;
  top: 0.1em;
  width: 1.8em;
  text-align: center;
  color: #ffb6c1; /* LightPink */
  font-size: 1em;
}

/* Standard list without icons */
.birthday-article ul:not(.icon-list) {
    list-style-type: disc;
    padding-left: 2em;
    margin-bottom: 1.5em;
}
.birthday-article ul:not(.icon-list) li {
    margin-bottom: 0.7em;
}


.birthday-article ol {
  margin-bottom: 1.5em;
  padding-left: 2em;
}

.birthday-article ol li {
  margin-bottom: 0.7em;
  line-height: 1.8;
}

/* --- Emphasis & Strong --- */
.birthday-article strong, .birthday-article b {
  font-weight: 700;
  color: #d9534f; /* Softer Red */
}

.birthday-article em, .birthday-article i:not([class*="fa-"]) {
  font-style: italic;
  color: #555; /* Darker italic */
}

/* --- Superscript for references --- */
.birthday-article sup {
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 1px;
  line-height: 0;
}
.birthday-article sup a {
  border-bottom: none;
  padding: 0.1em 0.2em;
}

/* --- Horizontal Rule --- */
.birthday-article .references-separator {
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(255,182,193,0.6), rgba(0,0,0,0)); /* LightPink gradient */
  margin: 4em 0;
}

/* --- References List --- */
.birthday-article .references-list {
  padding-left: 1em;
  font-size: 0.88em;
  color: #555;
  line-height: 1.75;
}

.birthday-article .references-list li {
  margin-bottom: 1em;
  word-break: break-all;
  overflow-wrap: break-word;
  padding-left: 0;
}

.birthday-article .references-list li a {
  font-weight: normal;
  color: #4682b4; /* SteelBlue */
  border-bottom: 1px dotted #4682b4;
}

.birthday-article .references-list li a:hover,
.birthday-article .references-list li a:focus {
  color: #5a9bd5; /* Lighter SteelBlue */
  border-bottom-color: #5a9bd5;
}

/* --- Glassmorphism Content Blocks --- */
.birthday-article .info-box,
.birthday-article .warning-box,
.birthday-article .tips-box,
.birthday-article .visual-step-card {
  padding: 1.8em;
  margin-bottom: 2em; /* Consistent margin for all blocks */
  border-radius: 16px; /* More pronounced radius for glass effect */
  background: rgba(255, 255, 255, 0.6); /* Base white with more opacity */
  backdrop-filter: blur(8px); /* Increased blur */
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35); /* Slightly more visible border */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.17); /* Softer, more spread shadow */
}

.birthday-article .info-box {
  border-left: 6px solid #5dade2; /* Blue for info */
  background: rgba(232, 245, 253, 0.6); /* Light Blue tint with opacity */
}

.birthday-article .warning-box {
  border-left: 6px solid #e74c3c; /* Red for warning */
  background: rgba(253, 237, 237, 0.6); /* Light Red tint with opacity */
}

.birthday-article .tips-box {
  border-left: 6px solid #58d68d; /* Green for tips */
  background: rgba(232, 251, 239, 0.6); /* Light Green tint with opacity */
}

.birthday-article .info-box h4,
.birthday-article .warning-box h4,
.birthday-article .tips-box h4,
.birthday-article .visual-step-card h4 { /* h4 styling for cards also here */
  margin-top: 0;
  margin-bottom: 0.8em;
  font-size: 1.3em; /* Ensure consistent h4 size */
  display: flex;
  align-items: center;
}

.birthday-article .info-box h4 .fa-icon,
.birthday-article .warning-box h4 .fa-icon,
.birthday-article .tips-box h4 .fa-icon,
.birthday-article .visual-step-card h4 .fa-icon {
  margin-right: 0.7em; /* Slightly more space */
  font-size: 1em; /* Icon size relative to h4 */
  flex-shrink: 0;
}

.birthday-article .info-box h4 { color: #347cb4; }
.birthday-article .warning-box h4 { color: #c0392b; }
.birthday-article .tips-box h4 { color: #229954; }
.birthday-article .visual-step-card h4 { color: #4682b4; } /* SteelBlue for general cards */
.birthday-article .visual-step-card h4 .fa-icon { color: #ff7f50; } /* Coral for card icons */


/* --- Visual Step/Card Layout --- */
.birthday-article .visual-steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8em;
  margin: 2.5em 0;
}

/* .visual-step-card specific styling already covered by glassmorphism block */

.birthday-article .visual-step-card p,
.birthday-article .visual-step-card ul {
  font-size: 1em;
  line-height: 1.75;
  color: #444; /* Slightly darker text for readability on glass */
}
.birthday-article .visual-step-card ul {
  padding-left: 1.5em; /* Standard padding for ul inside cards */
}

/* --- Table Styling (Important Table section) --- */
.birthday-article .styled-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 0.95em;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden; /* For border-radius to apply to corners */
}

.birthday-article .styled-table th,
.birthday-article .styled-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #dddddd;
}

.birthday-article .styled-table th {
  background-color: #4682b4; /* SteelBlue */
  color: #ffffff;
  font-weight: 600;
}

.birthday-article .styled-table tr:nth-of-type(even) {
  background-color: rgba(243, 243, 243, 0.7); /* Slightly transparent for even rows */
}

.birthday-article .styled-table tr:last-of-type {
  border-bottom: 2px solid #4682b4; /* SteelBlue */
}

.birthday-article .styled-table tr:hover {
  background-color: rgba(255, 182, 193, 0.3); /* LightPink tint on hover */
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .birthday-article {
    padding: 1.8em 1em;
    margin: 2em auto;
  }
  .birthday-article h1 {
    font-size: 2em;
  }
  .birthday-article h2 {
    font-size: 1.8em;
  }
  .birthday-article h3 {
    font-size: 1.5em;
  }
  .birthday-article p {
    font-size: 1.02em;
    line-height: 1.85;
  }
  .birthday-article .visual-steps-container {
    grid-template-columns: 1fr;
  }
  .birthday-article .styled-table {
    font-size: 0.85em;
  }
  .birthday-article .styled-table th,
  .birthday-article .styled-table td {
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .birthday-article {
    padding: 1.2em 0.8em;
  }
   .birthday-article h1 {
    font-size: 1.8em;
  }
  .birthday-article h2 {
    font-size: 1.6em;
  }
  .birthday-article h3 {
    font-size: 1.4em;
  }
   .birthday-article ul.icon-list li {
    padding-left: 2.2em;
  }
  .birthday-article ul.icon-list li .fa-li-icon {
    top: 0.15em;
    font-size: 0.9em;
  }
  .birthday-article .styled-table {
    display: block; /* Allows horizontal scrolling */
    overflow-x: auto;
    white-space: nowrap; /* Prevents line breaks in table cells */
  }
}

/* --- Introduction Section Specific Styles --- */
.birthday-article .intro-section {
  margin-top: 2em;
  margin-bottom: 3em;
}

.birthday-article .special-intro-box {
  background: rgba(255, 223, 186, 0.65); /* Light orange/peach tint for emphasis */
  border-left-color: #ff7f50; /* Coral to match h1 */
  margin-bottom: 2.5em; /* Space before next cards */
}

.birthday-article .special-intro-box h4 {
  color: #d2691e; /* Chocolate - darker for contrast */
  font-size: 1.4em;
}

.birthday-article .special-intro-box h4 .fa-icon {
  color: #ff7f50; /* Coral */
}

.birthday-article .intro-cards {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Slightly smaller min for 2 cards */
  gap: 1.5em;
}

.birthday-article .intro-card {
  /* Glassmorphism is already applied via .visual-step-card */
  /* We can add specific tweaks if needed */
  padding: 1.5em;
}

.birthday-article .intro-card h5 {
  font-size: 1.2em; /* Specific size for h5 in intro cards */
  color: #4682b4; /* SteelBlue, consistent with other card h4s */
  margin-top: 0;
  margin-bottom: 0.7em;
  display: flex;
  align-items: center;
}

.birthday-article .intro-card h5 .fa-icon {
  margin-right: 0.6em;
  color: #ff7f50; /* Coral for icon color */
  font-size: 1em;
}

.birthday-article .intro-card p {
  font-size: 0.95em;
  line-height: 1.7;
  color: #555;
}

/* Ensure h5 in general visual-step-card is not affected if not intended */
/* If .visual-step-card can contain h5 generally, that style should be separate */
.birthday-article .visual-step-card h5:not(.intro-card h5) {
    /* Styles for other h5 elements within .visual-step-card if any */
    /* For now, assuming h5 is primarily for these intro cards or specific sections */
}

/* --- Birthday Essence Box Specific Styles --- */
.birthday-article .birthday-essence-box ul.icon-list {
  margin-bottom: 1.2em; /* Reduce bottom margin for the list */
}

.birthday-article .birthday-essence-box ul.icon-list li {
  font-size: 1.02em; /* Slightly adjust font size for readability */
  margin-bottom: 0.8em; /* Adjust space between list items */
}

.birthday-article .birthday-essence-box p.additional-note {
  font-size: 0.9em;
  line-height: 1.6;
  color: #555;
  margin-top: 1em;
  margin-bottom: 0; /* Remove bottom margin if it's the last element */
  text-align: center;
  padding: 0.5em;
  background-color: rgba(0,0,0,0.03);
  border-radius: 6px;
}

/* --- Final Summary Section --- */
.birthday-article .final-summary {
  background: rgba(255, 230, 240, 0.65); /* Slightly different celebratory tint, e.g., light pinkish */
  border-left-color: #ff69b4; /* HotPink or a similar festive color */
  margin-top: 2.5em; /* Ensure adequate space before the summary */
}

.birthday-article .final-summary h4 {
  color: #c71585; /* MediumVioletRed or similar */
  font-size: 1.45em; /* Slightly larger for emphasis */
  text-align: center;
  margin-bottom: 1em;
}

.birthday-article .final-summary h4 .fa-icon {
  color: #ff69b4; /* Match border color */
  margin-right: 0.5em;
}

.birthday-article .final-summary p {
  font-size: 1.1em;
  line-height: 2;
  margin-bottom: 1.5em;
}

.birthday-article .final-summary ul.icon-list li {
  font-size: 1.05em;
  margin-bottom: 0.9em;
}

.birthday-article .final-summary ul.icon-list li .fa-li-icon {
  color: #ff69b4; /* Match border color */
}