/* ========================== */
/*        COMMON STYLES       */
/* Applies to both blog.html and blog1.html */
/* ========================== */

/* Body and background */
body {
    margin: 0;
    padding: 0;
    background-color: rgba(217, 237, 247, 1); /* blue background */
    font-family: sans-serif;
    cursor: url('littlepencil.png') 16 16, auto;
}

/* Page container — centers everything horizontally */
.page-container {
    position: relative; /* ensures absolute/fixed children are positioned relative to this */
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
}

/* ========================== */
/* BLOG MAIN PAGE (blog.html) */
/* ========================== */
body.blog-index {
  background-color: rgba(217, 237, 247, 1);
  font-family: sans-serif;
}

.blog-index .page-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
}

.blog-index .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  width: 80%;
  margin: 0 auto;
}


.blog-title {
    font-size: 2rem;
    color: rgba(84, 144, 196, 1);
    margin-bottom: 30px;
    letter-spacing: 0.05em;
    text-align: center;
    animation: gentleFloat 4s ease-in-out infinite;
}

.blog-subtitle {
    font-size: 1rem;
    color: rgba(84, 144, 196, 1);
    margin-top: -10px;
    margin-bottom: 20px;
    text-align: center;
    animation: gentleFloat 3s ease-in-out infinite;
}

.blog-grid {
  display: flex;           /* use flex so card width is respected */
  flex-wrap: wrap;
  justify-content: center; /* center cards */
  gap: 30px;
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Floating wrapper: the wrapper animates (translateY) so card can be scaled separately */
.float-wrapper {
  display: inline-block;
  animation: gentleFloat 5s ease-in-out infinite;
  will-change: transform; /* hint to browser for smoother animation */
}

/* Blog card: fixed size, no transform animation here (only hover scale) */
.blog-card {
  display: block;             /* anchor acts like a block-level card */
  position: relative;
  width: 260px;               /* original size you wanted */
  height: 260px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.28s cubic-bezier(.2,.9,.2,1), box-shadow 0.28s;
  cursor: url('littlepencil.png') 16 16, auto;
  transform-origin: center center; /* scale from center */
}

/* Scale on hover — only the card (not the wrapper) scales, so both animations coexist */
.float-wrapper:hover .blog-card,
.blog-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* Thumbnail inside card */
.blog-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}

/* Info overlay */
.blog-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255,255,255,0.85);
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
}

.blog-info h3 { font-size: 1rem; margin: 0; color: rgb(70,120,160); }
.blog-info p  { font-size: 0.8rem; margin: 0; color: rgb(110,150,180); }




/* ========================== */
/* ARTICLE PAGE (blog1.html)  */
/* ========================== */
body.blog-article {
  background-color: rgba(217, 237, 247, 1);
  font-family: "Times New Roman", serif;
}

.blog-article .page-container {
  display: flex;
  justify-content: center;
  padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background-color: rgba(217, 237, 247, 1); /* blue background on sides */
    font-family: "Times New Roman", serif;
    cursor: url('littlepencil.png') 16 16, auto;
}

/* Page container - full width */
.page-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center; /* centers paper horizontally */
    box-sizing: border-box;
    padding: 0;
}

/* Article container - full-length vertical rectangle */
.article-container {
    width: 60%;           /* width of “paper” */
    max-width: 900px;     
    background-color: #ffffff; /* white paper */
    padding: 50px;
    color: rgb(60, 90, 120);
    line-height: 1.65;
    font-size: 1.05rem;
    box-sizing: border-box;
    min-height: 100vh;
}

/* Blog content paragraphs */
.blog-content p {
    margin-bottom: 1rem;
}

.blog-graphs {
    display: flex;            /* puts children in a row */
    justify-content: center;  /* centers the row horizontally */
    gap: 20px;                /* spacing between the two images */
    margin: 20px 0;           /* vertical spacing from paragraphs */
    flex-wrap: wrap;           /* allows wrapping on small screens */
}

.blog-graphs .blog-image {
    max-width: 45%;            /* two images fit side by side */
    height: auto;              /* maintain aspect ratio */
    border-radius: 8px;        /* optional */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* optional subtle shadow */
}


.blog-image {
    width: 100%;      /* fills the width of its container */
    max-width: 900px; /* optional: keeps it from getting too wide */
    height: auto;     /* maintains aspect ratio */
    display: block;
    margin: 20px auto; /* centers it and adds vertical spacing */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.blog-figure {
    text-align: center;      /* centers images and label */
    margin: 20px 0;          /* spacing from surrounding content */
}

.figure-label {
    display: block;
    margin-top: 5px;
    font-weight: bold;
    color: #000;             /* black label */
}

/* Publish date */
.publish-date {
    font-size: 0.9rem;
    color: rgba(84,144,196,0.6);
    margin-bottom: 20px;
}

/* Extra indentation from left and right, italic text */
.indented-italic {
    margin-left: 50px;   /* adjust for more/less space from left */
    margin-right: 70px;  /* adjust for more/less space from right */
    font-style: italic;  /* makes text italic */
}

.collapsible {
  background-color: #cce7ff;  /* light blue */
  color: #333;
  cursor: pointer;
  padding: 12px 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1rem;
  border-radius: 6px;
  margin-top: 30px;
}

.collapsible:hover {
  background-color: #99d1ff;  /* slightly darker blue on hover */
}

.collapsible:after {
  content: " ▼";
  float: right;
}


.collapsible-content {
  display: none;
  padding: 12px 18px;
  border-left: 3px solid #99d1ff; /* matches hover blue */
  margin-top: 5px;
  background-color: #e6f3ff; /* very light blue for content area */
}




/* ========================== */
/*        HOME & BLOG BUTTONS  */
/* ========================== */

/* Home button - bottom right */
.home-button {
    text-decoration: none;
    position: fixed;
    right: 30px;
    bottom: 30px;
    text-align: center;
    z-index: 10;
}

/* Blog button - to the right of home button */
.blog-button {
    text-decoration: none;
    position: fixed;
    right: 110px; 
    bottom: 30px;
    text-align: center;
    z-index: 10;
}

/* Home and Blog icons */
.home-icon {
    width: 80px;
    border-radius: 12px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: url('littlepencil.png'), auto;
}

.blog-icon {
    width: 50px;
    border-radius: 12px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: url('littlepencil.png'), auto;
}

/* Hover effect */
.home-icon:hover,
.blog-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Labels */
.home-label,
.blog-label {
    display: block;
    font-size: 1rem;
    color: rgba(84, 144, 196, 0.6);
    font-weight: bold;
    letter-spacing: 1px;
    cursor: url('littlepencil.png'), auto;
    user-select: none;
    text-transform: lowercase;
}


/* Floating wrapper so hover scaling doesn’t interfere */
.float-wrapper {
    display: inline-block;
    animation: gentleFloat 5s ease-in-out infinite;
}

/* Icons only handle hover scaling */
.home-icon,
.blog-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover effect */
.float-wrapper:hover .home-icon,
.float-wrapper:hover .blog-icon {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Gentle floating animation */
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}