/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/


/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

/* Our default values set as CSS variables */
:root {
  --color-bg: #69F7BE;
  --color-text-main: #000000;
  --color-text-header: #2800FF;
  --color-primary: #FFFF00;
  --wrapper-height: 87vh;
  --image-max-width: 250px;
  --image-margin: 3rem;
  --font-family: "Hanken Grotesk", sans-serif;
  --font-family-header: "Hanken Grotesk", sans-serif;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

body {
  background: fixed linear-gradient(0deg, var(--color-bg), #FFFFFF);
}

/* Our remix on glitch button */
.btn--remix {
  font-family: var(--font-family);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}
.btn--remix img {
  margin-right: 0.5rem;
}
.btn--remix:hover {
  background-color: #D0FFF1;
}

/* Navigation grid */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 0;
  width: 100%;
}

/* Make this rule more specific to override the yellow background */
.footer .social-icons .social-profile-icon:hover {
  background: none;
  opacity: 1;
}

.footer .social-icons .social-profile-icon:hover path {
  fill: #1a2137; /* Darker version of the original color */
}

/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 1rem;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Add this new rule to override center alignment for h2 */
.content h2 {
  align-self: flex-start;
}

/* Very light scaling for our illustration */
.title {
  color: var(--color-text-header);
  font-family: var(--font-family);
  font-style: normal;
  font-weight: 700;
  font-size: 60px;
  line-height: 105%;
  margin: 2rem 0 0 0;
  text-align: center;
  width: 100%;
}

.subtitle {
  font-family: var(--font-family);
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 105%;
  text-align: center;
}
/* Subheading */
h2 {
  color: var(--color-text-header);
}

/* Add responsive font size for mobile devices */
@media screen and (max-width: 768px) {
  .title {
    font-size: 42px;
  }
  .subtitle {
    font-size: 16px;
  }
}

/* Very light scaling for our illustration */
.profile-pic {
  max-width: 100%;
  max-height: var(--image-max-width);
  margin-top: var(--image-margin);
  border-radius: 50%;
}

/* Interactive image */
.profile-pic:active {
  transform: translateY(5px);
}

/* Apps Section */
.apps-section {
  margin: 0 1rem auto 0;
}

/* Instructions */
.instructions {
  margin: 1rem 1rem auto 0;
}

/* Meetups Section */
.meetups-section {
  margin: 0 1rem auto 0;
}

.social-icons {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  justify-content: center;
}

.social-icons a {
  background: transparent !important;
  display: flex;  /* This helps center the icon */
  align-items: center;
}

.social-icons a:hover {
  background: transparent !important;
}

.social-profile-icon {
  width: 24px;
  height: 24px;
  color: #2E3A59;
  opacity: 0.8;
  transition: all 0.2s ease-in-out;  /* Smooth transition for hover effects */
}

.social-profile-icon:hover {
  color: #1a2137;
  opacity: 1;
  transform: scale(1.1);  /* Slightly increase size on hover */
}

.link-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 800px;
}

.link-list li {
  margin-bottom: 1rem;
}

.link-list a {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;  /* Changed to affect all properties */
  border: 1px solid rgba(0, 0, 0, 0.1);  /* Added subtle border */
  background-color: rgba(255, 255, 255, 0.5);  /* Added slight background */
}

.link-list a:hover,
.link-list a:active {  /* Added active state for touch */
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateY(1px);  /* Slight push effect */
  border-color: rgba(0, 0, 0, 0.2);  /* Darker border on interaction */
}

.link-list img {
  width: 48px;
  height: 48px;
  margin-right: 1rem;
  border-radius: 4px;
}

.link-list span {
  color: #333;
  font-size: 1rem;
}

/* Links that open files in the editor */
.fileopener {
  cursor: pointer;
  font-weight: bold;
  border-bottom: 3px solid var(--color-primary);
  color: var(--color-secondary);
  text-decoration: none;
}

.fileopener:hover {
  border-bottom:3px solid var(--color-secondary);
}

.hosted-on {
  text-align: center;
  font-size: 0.9rem;
}

.hosted-on p {
  margin: 0;
}

.hosted-on a {
  font-weight: bold;
  text-underline-offset: 0.3rem;
}

.post-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 800px;
}

.post-list li {
  margin-bottom: 1rem;
}

.post-list a {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;  /* Changed to affect all properties */
  border: 1px solid rgba(0, 0, 0, 0.1);  /* Added subtle border */
  background-color: rgba(255, 255, 255, 0.5);  /* Added slight background */
}

.post-list a:hover,
.post-list a:active {  /* Added active state for touch */
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateY(1px);  /* Slight push effect */
  border-color: rgba(0, 0, 0, 0.2);  /* Darker border on interaction */
}

.post-list img {
  width: 169px;  /* Increased width for rectangular shape */
  height: 95px;  /* Kept original height */
  margin-right: 1rem;
  border-radius: 4px;
  object-fit: cover;  /* Added to ensure images cover the area nicely */
}

.post-list span {
  color: #333;
  font-size: 1rem;
}

.post-list .post-date {
  display: block;
  color: #6b6b6b;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}


/* YouTube video indicator styles */
.post-list.youtube-video li {
  position: relative;
}

.post-list.youtube-video .video-icon-wrapper {
  position: relative;
  display: inline-block;
}

.post-list.youtube-video .video-icon {
  position: absolute;
  bottom: 0px;
  right: 8px;
  width: 25px;
  height: 20px;
  background-color: rgba(255, 0, 0, 0.8);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.post-list.youtube-video .video-icon svg {
  width: 18px;
  height: 18px;
  fill: white;
}

@media screen and (max-width: 600px) {
  .post-list a {
    flex-direction: column;
    align-items: flex-start;
  }

  .post-list img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    margin-right: 0;
    margin-bottom: 0.75rem;
  }

  .post-list.youtube-video .video-icon {
    right: 8px;
    bottom: 12px;
  }
}

/* [eo-block="powered-by"] {
    display: none !important;
} */

.meetup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 800px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.meetup-list li {
  display: flex;
}

.meetup-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
}

.meetup-list a:hover,
.meetup-list a:active {
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateY(1px);
  border-color: rgba(0, 0, 0, 0.2);
}

.meetup-list img {
  width: 80px;
  height: 80px;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  object-fit: cover;
}

.meetup-list span {
  color: #333;
  font-size: 0.9rem;
  line-height: 1.4;
}

@media screen and (max-width: 600px) {
  .meetup-list {
    grid-template-columns: 1fr;
  }
}

.newsletter-section {
  text-align: center;
  max-width: 600px;
  margin: 0rem auto;
}

.newsletter-link {
  color: var(--color-text-header);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  text-decoration-color: var(--color-text-header); /* Match initial text color */
}

.newsletter-link:hover {
  text-decoration-color: var(--color-primary); /* Only underline changes to yellow */
}

/* Ensure proper bold rendering for strong elements */
strong {
  font-weight: 600;
}