/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/




/* == Parent flex == */
.worksheet-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

/* == Main == */
.worksheet-main {
  flex: 0 0 70% !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: 20px;
  gap: 20px !important;
  padding-bottom: 50px;
}

/* == Sidebar == */
.worksheet-sidebar {
  flex: 0 0 30% !important;
}

/* == White boxes == */
.acf-view-container,
.related-worksheets,
.worksheet-content {
  background: #fff !important;
  padding-top: 30px !important;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box !important;
}


/* == ACF flex == */
.acf-view-container {
  display: flex !important;
  gap: 20px !important;
}

.acf-image-container {
  flex: 0 0 30% !important;
}


/* == Description Container == */
.acf-description-container {
  flex: 0 0 70% !important;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
}

@media (max-width: 768px) {
  .acf-description-container {
    padding-left: 0;
    padding-right: 0;
  }
}

.related-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 768px) {
  .worksheet-container {
    flex-direction: column !important;
  }
  .worksheet-main,
  .worksheet-sidebar {
    flex: 0 0 100% !important;
  }
  .acf-view-container {
    flex-direction: column !important;
  }
  .acf-image-container,
  .acf-description-container {
    flex: 0 0 100% !important;
  }
  .related-list {
    grid-template-columns: 1fr !important;
  }
}

/* == Image Caption == */

.acf-image-container figure {
  margin: 0;
  text-align: center;
}

.acf-image-container figcaption {
  font-size: 14px;
  color: #555;
  margin-top: 8px;
  font-style: italic;
}


/* == H1 Title == */
.acf-description-container h1 {
  font-size: 24px;
  line-height: 1.3;
  margin: 0 0 0 0;
}


/* == Authorbox == */
.author-box {
  background: #f5f5f5;
  color: #0E2954;
  padding: 5px 15px;
  border-left: 3px solid #0E2954;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
  margin: 10px 0;
  box-sizing: border-box;
}


/* == ACF Description == */
.worksheet-description {
  margin-bottom: 0;
  margin-top: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}


/* == Download Btn == */
.download-btn {
  display: block;
  width: 100%;
  background: #113F67;
  color: #fff;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
  font-weight: 600;
  box-sizing: border-box;
  transition: background 0.3s ease;
}

.download-btn:hover {
  background: #090040; /* hover par halka light */
  color: #fff;
}


/* == Post Category Box == */
.post-categories-box {
  background: #e8f0f8;           /* lighter than author box */
  padding: 5px 15px;
  border: 1px dashed #0E2954;    /* dashed border accent */
  border-radius: 4px;
  display: inline-block;
  font-size: 14px;
  margin-top: 20px;
  color: #0E2954;
  font-weight: 500;
}
.post-categories-box::before {
  content: "📂 ";
}


/* == Social Share Text == */
.share-note {
  background: #f5f5f5;
  color: #0E2954;
  padding: 5px 15px;
  border-left: 3px solid #0E2954;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
  margin-top: 20px;
  margin-bottom: 8px;
  box-sizing: border-box;
}



/* == Social Share Button == */

.social-share {
  margin-top: 0px;
}

.social-share .social-btn {
  display: inline-block;
  background: #0E2954;     /* primary color */
  color: #fff;
  padding: 8px 15px;
  margin: 5px 5px 0 0;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  transition: background 0.3s ease;
  font-weight: 600;
}

.social-share .social-btn:hover {
  background: #183a70;   /* hover color lighter */
}

/* Optional: different colors for each social platform */
.social-share .facebook {
  background: #3b5998;
}

.social-share .facebook:hover {
  background: #4a69ad;
}

.social-share .whatsapp {
  background: #25D366;
}

.social-share .whatsapp:hover {
  background: #2eea75;
}

.social-share .twitter {
  background: #1DA1F2;
}

.social-share .twitter:hover {
  background: #3DB2F9;
}

.social-share .pinterest {
  background: #E60023;
}

.social-share .pinterest:hover {
  background: #f0002b;
}



/* == Similler Worksheets Section == */

.related-heading {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
  position: relative;
  padding-bottom: 15px;
}

.related-heading {
  background: #f5f5f5;           /* Light grey box */
  color: #0E2954;                /* Brand text color */
  padding: 10px 20px;
  border-left: 5px solid #0E2954;/* Accent line at left */
  border-radius: 4px;
  display: block;                /* Full width */
  width: 100%;                   /* Stretch end to end */
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  box-sizing: border-box;        /* Padding included in width */
}



/* == Related Post Bullet Point == */
.related-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px 20px !important; /* 5px row, 20px column */
  margin-top: 20px;
  margin-left: 0px;
  margin-bottom: 10px;
}

.related-post {
  display: flex !important;
  align-items: flex-start;
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}

.related-post a {
  display: inline-block;
  background: #e8f0f8;
  border: 1px dashed #0E2954;
  border-radius: 4px;
  color: #0E2954;
  font-size: 16px;
  font-weight: 500;
  padding: 4px 15px 4px 35px;  /* Left padding extra for bullet space */
  text-decoration: none;
  position: relative;          /* Position for pseudo-element */
  transition: background 0.3s;
}

.related-post a::before {
  content: "📌";
  position: absolute;
  left: 8px;                  /* Inside the box */
  top: 50%;
  transform: translateY(-50%);
  color: #0E2954;
  font-size: 16px;
}


.related-post a:hover {
  background: #d4e6f4;
  text-decoration: none;
}


@media (max-width: 768px) {
  .related-list {
    grid-template-columns: 1fr !important;
    gap: 10px 0 !important;
  }
}