/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  WhatsUp Guelph - Local News & Events Site
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      1.0
*/

/* ============================================
   WHATSUP GUELPH - MAILCHIMP NEWSLETTER FORM
   ============================================ */

   .gb-element-38688255 {
    background-color: var(--base);
    padding: 40px 30px !important;
}

.gb-element-7eb0470f {
    row-gap: 1rem !important;
}

/* Mailchimp Form - Using GenerateBlocks styling */
.mailchimp-form {
  align-items: center;
  column-gap: 0.94rem;
  display: flex;
  row-gap: 0.94rem;
}

@media (max-width: 767px) {
  .mailchimp-form {
    flex-direction: column;
    width: 100%;
  }
}

/* Form Inputs - Override default input styling to match GB text elements */
.mailchimp-form input[type="text"],
.mailchimp-form input[type="email"] {
  font-family: inherit;
  line-height: inherit;
  margin: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.mailchimp-form input[type="text"]::placeholder,
.mailchimp-form input[type="email"]::placeholder {
  color: inherit;
  opacity: 0.6;
}

/* Form Button - Override default button styling to match GB link elements */
.mailchimp-form button[type="submit"] {
  font-family: inherit;
  line-height: inherit;
  margin: 0;
  cursor: pointer;
  border: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ============================================
   WHATSUP GUELPH - WHAT'S TRENDING SECTION
   ============================================ */

/* Override the 2-column grid constraint to use full width */
.gb-element-df3c187a {
  grid-template-columns: 1fr !important;
}

/* Ensure unified posts element spans full width */
.gb-element-unified-posts {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
}

/* Magazine-style layout for posts */
.gb-looper-unified-looper {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  grid-auto-rows: auto !important;
}

/* First post - Large featured (left side, spans 2 columns and 2 rows) */
.gb-looper-unified-looper > article:nth-child(1) {
  grid-column: 1 / 3 !important;
  grid-row: 1 / 3 !important;
}

.gb-looper-unified-looper > article:nth-child(1) img {
  height: auto !important;
  aspect-ratio: 16/10 !important;
}

/* First post - larger meta (category and date) */
.gb-looper-unified-looper > article:nth-child(1) .gb-text-f42df232 {
  font-size: 0.9rem !important;
}

.gb-looper-unified-looper > article:nth-child(1) .gb-text-post-date-123 {
    font-size: 0.9rem !important;
}

.gb-text-post-date-123 {
    color: #5a5a5a !important;
}

.gb-looper-unified-looper > article:nth-child(1) .gb-element-meta-wrapper {
  margin-bottom: 0.6rem !important;
}

.gb-looper-unified-looper > article:nth-child(1) .gb-text-99be9c32 {
  font-size: 1.6rem !important;
  line-height: 1.48em !important;
}

.gb-looper-unified-looper > article:nth-child(1) .gb-text-6bab4703 {
  display: block !important;
}

/* Posts 2-5 - Small 2x2 grid on the right (each 1 column) */
.gb-looper-unified-looper > article:nth-child(2) {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.gb-looper-unified-looper > article:nth-child(3) {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

.gb-looper-unified-looper > article:nth-child(4) {
  grid-column: 3 !important;
  grid-row: 2 !important;
}

.gb-looper-unified-looper > article:nth-child(5) {
  grid-column: 4 !important;
  grid-row: 2 !important;
}

/* Posts 6-9 - Bottom row (each 1 column) */
.gb-looper-unified-looper > article:nth-child(6),
.gb-looper-unified-looper > article:nth-child(7),
.gb-looper-unified-looper > article:nth-child(8),
.gb-looper-unified-looper > article:nth-child(9) {
  grid-column: span 1 !important;
}

/* All posts except first - consistent image height */
.gb-looper-unified-looper > article:nth-child(n+2) img {
  height: 250px !important;
  object-fit: cover !important;
}

/* Responsive - Stack on tablet and mobile */
@media (max-width: 1024px) {
  .gb-looper-unified-looper {
    grid-template-columns: 1fr !important;
  }

  .gb-looper-unified-looper > article:nth-child(1),
  .gb-looper-unified-looper > article:nth-child(2),
  .gb-looper-unified-looper > article:nth-child(3),
  .gb-looper-unified-looper > article:nth-child(4),
  .gb-looper-unified-looper > article:nth-child(5),
  .gb-looper-unified-looper > article:nth-child(6),
  .gb-looper-unified-looper > article:nth-child(7),
  .gb-looper-unified-looper > article:nth-child(8),
  .gb-looper-unified-looper > article:nth-child(9) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* ============================================
   WHATSUP GUELPH - PAGINATION STYLING
   ============================================ */

/* Pagination container */
.gb-element-e5fd5654 {
  align-items: center !important;
  column-gap: 1rem !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 2rem !important;
  margin-top: 4rem !important;
  row-gap: 1rem !important;
}

/* Next/Previous buttons */
.gb-text-44f6e79f, .gb-text-124e946e {
    background-color: var(--accent) !important;
    color: var(--base-2) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: all 0.5s ease 0s !important;
    border-radius: 2px !important;
    padding: 0.35rem 1rem !important;
    border: none !important;
    line-height: 19px !important;
}

/* Page numbers container */
.gb-query-page-numbers-8fec889c {
  color: var(--base-2) !important;
  column-gap: 0.6rem !important;
  display: flex !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  transition: all 0.5s ease 0s !important;
  border-radius: 2px !important;
}

/* Individual page number buttons */
.gb-query-page-numbers-8fec889c .page-numbers {
    color: var(--base-3) !important;
    background-color: var(--accent) !important;
    font-weight: 500 !important;
    transition: all 0.5s ease 0s !important;
    text-decoration: none !important;
    border-radius: 2px !important;
    padding: 0.25rem 0.75rem !important;
    border: none !important;
    line-height: 22px !important;
}

/* Current page number */
.gb-query-page-numbers-8fec889c .page-numbers.current {
  color: var(--base-3) !important;
  background-color: var(--accent-2) !important;
}

@media (max-width: 767px) {
    .gb-element-5bce850f {
        padding-bottom: 0rem !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .gb-element-c00e8c32 {
    padding-bottom: 4rem !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
}
.gb-element-5bce850f {
    padding: 4rem 20px 2rem 20px !important;
}

p img {
    margin-top: 1.5em;
}

/* Noto Emoji images */
img[src*="fonts.gstatic.com/s/e/notoemoji"] {
    height: 1.5em;
    width: 1.5em;
    margin-right: 5px;
}