/*
  Base styling for the 101meme blog.
  Inspired by the layout of Storagehard, this design uses playful colours and modern typography.
  The site is fully responsive and includes elements such as feature cards, numbered highlights,
  progress bars and a simple comment/contact system.
*/

:root {
  --primary-color: #e74c3c; /* vibrant red for calls to action */
  --secondary-color: #3498db; /* cool blue for secondary buttons */
  --accent-color: #f1c40f; /* warm yellow accent for progress bars */
  --text-color: #2c3e50; /* dark slate for body text */
  --light-gray: #f9f9f9; /* very light gray for section backgrounds */
  --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--text-color);
  line-height: 1.6;
  background-color: #fff;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Container to constrain content width */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
.site-header {
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

/* Navigation */
.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.main-nav a {
  font-weight: 500;
  color: var(--text-color);
  padding: 0.5rem 0;
  transition: color 0.2s, border-color 0.2s;
}
.main-nav a:hover,
.main-nav .active {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

/* Hero */
.hero {
  background-color: var(--light-gray);
  padding: 3rem 0;
}
.hero-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}
.hero h1 {
  font-size: 2.75rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}
.hero p {
  margin-bottom: 1.5rem;
  max-width: 550px;
  line-height: 1.5;
}
.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s;
}
.primary-btn {
  background-color: var(--primary-color);
  color: #fff;
}
.primary-btn:hover {
  background-color: #c0392b;
}
.secondary-btn {
  background-color: var(--secondary-color);
  color: #fff;
}
.secondary-btn:hover {
  background-color: #2e86c1;
}

/* Features */
.features {
  padding: 3rem 0;
  background-color: #fff;
}
.features h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}
.feature-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.feature-card {
  background-color: var(--light-gray);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.feature-card img {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
}
.feature-card h3 {
  margin-bottom: 0.5rem;
  color: var(--text-color);
}
.feature-card p {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 1rem;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Showcase */
.showcase {
  background-color: var(--light-gray);
  padding: 3rem 0;
}
.showcase h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}
.showcase-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.showcase-item {
  position: relative;
  padding-left: 3.5rem;
}
.showcase-number {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-color);
  opacity: 0.9;
}
.showcase-item h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.showcase-item p {
  color: #555;
}

/* Mission / Progress bars */
.mission {
  padding: 3rem 0;
  background-color: #fff;
  text-align: center;
}
.mission h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.mission-tagline {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #555;
}
.skills-grid {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.skill h3 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}
.skill-bar {
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  height: 10px;
}
.skill-bar span {
  display: block;
  height: 100%;
  background-color: var(--accent-color);
  border-radius: 4px;
}

/* Recent Posts */
.recent-posts {
  padding: 3rem 0;
  background-color: var(--light-gray);
}
.recent-posts h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}
.posts-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.post-card {
  background-color: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.post-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.post-meta {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 0.75rem;
}
.post-card p {
  color: #555;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Contact section */
.contact-section {
  padding: 3rem 0;
  background-color: var(--light-gray);
}
.contact-section h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
}
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-form .form-group {
  display: flex;
  flex-direction: column;
}
.contact-form label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.contact-form textarea {
  resize: vertical;
  min-height: 150px;
}
.contact-form button {
  align-self: flex-start;
}

/* Footer */
.site-footer {
  background-color: #fafafa;
  padding: 2rem 0;
  border-top: 1px solid #eaeaea;
  font-size: 0.9rem;
  text-align: center;
}
.site-footer p {
  margin-bottom: 0.5rem;
}
.site-footer .policy-links a {
  margin: 0 0.5rem;
  color: var(--text-color);
}
.site-footer .policy-links a:hover {
  color: var(--primary-color);
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  border-top: 1px solid #eaeaea;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 2000;
}
.cookie-banner p {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
}
.cookie-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cookie-banner .btn {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}

/* Post content common styles */
.small-hero {
  padding: 2.5rem 0;
  background-color: var(--light-gray);
}
.small-hero h1 {
  font-size: 2.2rem;
  margin: 0;
  color: var(--text-color);
}
.page-main {
  padding: 2rem 0 4rem 0;
}
.article-content {
  max-width: 800px;
  margin: 0 auto;
}
.article-content h2 {
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.article-content p,
.article-content ul,
.article-content ol {
  margin-bottom: 1rem;
  color: #444;
  line-height: 1.6;
}
.article-content ul,
.article-content ol {
  padding-left: 1.25rem;
}
.article-content li {
  margin-bottom: 0.5rem;
}

/* Comments */
.comments {
  max-width: 800px;
  margin: 2rem auto;
  padding-top: 2rem;
  border-top: 1px solid #eaeaea;
}
.comments h3 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
}
.comment-list {
  list-style: none;
  margin-bottom: 2rem;
}
.comment-list li {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}
.comment-list .comment-author {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.comment-list .comment-body {
  margin-bottom: 0.5rem;
  white-space: pre-wrap;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.comment-form textarea {
  resize: vertical;
  min-height: 120px;
}
.comment-form button {
  align-self: flex-start;
}

/* Footnotes */
.footnotes {
  font-size: 0.8rem;
  color: #666;
  margin-top: 2rem;
}
.footnotes .footnote {
  display: block;
  margin-bottom: 0.5rem;
}
.footnotes .footnote a {
  color: var(--primary-color);
}

/* Media queries */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem;
  }
  .main-nav ul {
    gap: 0.75rem;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .showcase-grid {
    grid-template-columns: 1fr;
  }
  .posts-grid {
    grid-template-columns: 1fr;
  }
}