/*
Theme Name: Simply Love GP
Theme URI: https://simplyloveprintables.com/
Description: A clean, simple GeneratePress child theme for Simply Love Printables — FirstPalette-style homepage built entirely with editable blocks (Query Loops by category/tag), thumbnail card grids, and a block-widget sidebar.
Author: Simply Love Printables
Template: generatepress
Version: 1.10.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: simply-love-gp
*/

/* =========================================================
   1. Light global polish (GeneratePress handles the rest —
      colors/fonts are still controlled in the Customizer)
   ========================================================= */
:root {
  --slp-font: "Rubik", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* change the font here, one place */
  --slp-teal: #1FA89C;
  --slp-teal-dark: #14776E;
  --slp-red: #d8262c;
  --slp-blue: #2d63a7;
  --slp-ink: #3a3a3a;
  --slp-grey: #767676;
  --slp-line: #e4e4e4;
}

.entry-content a:not(.wp-block-button__link) {
  color: var(--slp-red);
}
.entry-content a:not(.wp-block-button__link):hover {
  text-decoration: underline;
}

/* =========================================================
   2. FirstPalette-style section headings
   (uppercase + grey rule extending right; class "slp-rule")
   ========================================================= */
.slp-rule,
.slp-section > h2,
.slp-section > h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #222;
  margin: 0 0 14px;
}
.slp-rule::after,
.slp-section > h2::after,
.slp-section > h3::after {
  content: "";
  flex: 1;
  height: 9px;
  background: #ececec;
}
.slp-rule a,
.slp-section > h2 a {
  color: #222;
  text-decoration: none;
}
.slp-rule a:hover,
.slp-section > h2 a:hover {
  color: var(--slp-red);
}

/* =========================================================
   3. Homepage sections
   ========================================================= */
.slp-section {
  margin-bottom: 52px;
}
.slp-section .slp-section-desc {
  color: #555;
  margin: 0 0 24px;
}

/* big featured image with overlaid title */
.slp-feature .wp-block-post {
  position: relative;
  margin: 0;
}
.slp-feature .wp-block-post-featured-image,
.slp-feature .wp-block-post-featured-image a {
  display: block;
  margin: 0;
}
.slp-feature .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.slp-feature .wp-block-post-title {
  position: absolute;
  left: 22px;
  bottom: 18px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}
.slp-feature .wp-block-post-title a {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}

/* =========================================================
   4. Image grids — plain FirstPalette style
   (no boxes: image, then a simple title underneath)
   ========================================================= */
.slp-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.slp-grid .wp-block-post {
  width: 100%;
  margin: 0;
  text-align: left;
}
.slp-grid .wp-block-post-featured-image,
.slp-grid .wp-block-post-featured-image a {
  display: block;
  width: 100%;
  margin: 0;
}
.slp-grid .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #e6e6e6;
}
.slp-grid .wp-block-post-title {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 12px 0 0;
}
.slp-grid .wp-block-post-title a {
  color: #222;
  text-decoration: none;
}
.slp-grid .wp-block-post-title a:hover {
  color: var(--slp-red);
}
.slp-grid .wp-block-post-date {
  display: block;
  font-size: 0.84rem;
  color: #888;
  margin-top: 2px;
}
.slp-grid .wp-block-post-date a {
  color: inherit;
  text-decoration: none;
}
@media (max-width: 720px) {
  .slp-grid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
}

/* "More …" link — plain text link, FirstPalette style */
.slp-more {
  margin-top: 20px;
}
.slp-more a {
  font-weight: 600;
  color: var(--slp-blue);
  text-decoration: none;
}
.slp-more a:hover {
  text-decoration: underline;
}

/* =========================================================
   5. Sidebar — ad slot, featured overlay, thumbnail rows
   ========================================================= */
.slp-ad {
  background: #f4f4f4;
  padding: 14px;
  text-align: center;
  margin-bottom: 34px;
}
.slp-ad-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 10px;
}
.slp-ad-slot {
  display: grid;
  place-items: center;
  min-height: 250px;
  background: #fff;
}
.slp-ad-slot:empty::after {
  content: "Ad space — paste your ad code here";
  font-size: 0.85rem;
  color: #999;
  padding: 12px;
}

/* big featured item with overlay (reuses .slp-feature) */
.slp-side-featured { margin-bottom: 34px; }
.slp-side-featured .wp-block-post { position: relative; margin: 0; }
.slp-side-featured .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
.slp-side-featured .wp-block-post-title {
  position: absolute;
  left: 16px;
  bottom: 12px;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.slp-side-featured .wp-block-post-title a {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}

/* small thumbnail + title rows */
.slp-side-list .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.slp-side-list .wp-block-post {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #ececec;
  margin: 0;
}
.slp-side-list .wp-block-post-featured-image,
.slp-side-list .wp-block-post-featured-image a { display: block; margin: 0; }
.slp-side-list .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #e6e6e6;
}
.slp-side-list .wp-block-post-title {
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}
.slp-side-list .wp-block-post-title a { color: #222; text-decoration: none; }
.slp-side-list .wp-block-post-title a:hover { color: var(--slp-red); }

/* sidebar headings get the rule style automatically */
.sidebar .widget .wp-block-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #222;
}
.sidebar .widget .wp-block-heading::after {
  content: "";
  flex: 1;
  height: 9px;
  background: #ececec;
}

/* =========================================================
   5b. Share buttons (added automatically under post titles)
   ========================================================= */
.slp-share {
  display: flex;
  gap: 10px;
  margin: 18px 0 6px;
}
.slp-share a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff !important;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  line-height: 1;
}
.slp-share a:hover { opacity: 0.88; }
.slp-share .slp-share-fb  { background: #3b5998; }
.slp-share .slp-share-tw  { background: #1da1f2; }
.slp-share .slp-share-pin { background: #bd081c; }

/* =========================================================
   6. Post meta: make author + date clearly visible
      (toggle items in Customizer → Layout → Blog)
   ========================================================= */
.entry-meta {
  font-size: 0.92rem;
  color: var(--slp-grey);
}
.entry-meta a {
  color: var(--slp-teal-dark);
}

/* =========================================================
   7. Sticky header
   ========================================================= */
#masthead.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 0 #ececec;
}
/* keep clear of the WP admin bar when logged in */
.admin-bar #masthead.site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar #masthead.site-header { top: 46px; }
}
/* if the menu is set to display below the header, stick that instead */
#site-navigation.main-navigation:not(.inside-header *) { z-index: 100; }
body:not(.nav-float-right):not(.nav-float-left) #site-navigation.main-navigation {
  position: sticky;
  top: 0;
  background: #fff;
}
.admin-bar body:not(.nav-float-right):not(.nav-float-left) #site-navigation.main-navigation { top: 32px; }


/* =========================================================
   8. Fixes: heading link colors, overlay legibility
   ========================================================= */
/* ruled headings keep their dark color even though content links are red */
.entry-content h1.slp-rule a,
.entry-content h2.slp-rule a,
.entry-content h3.slp-rule a,
.entry-content .slp-section > h2 a {
  color: #222 !important;
  text-decoration: none !important;
}
.entry-content h1.slp-rule a:hover,
.entry-content h2.slp-rule a:hover,
.entry-content h3.slp-rule a:hover,
.entry-content .slp-section > h2 a:hover {
  color: var(--slp-red) !important;
}

/* dark gradient behind overlaid titles so white text is always readable */
.slp-feature .wp-block-post,
.slp-side-featured .wp-block-post { overflow: hidden; }
.slp-feature .wp-block-post::after,
.slp-side-featured .wp-block-post::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
  pointer-events: none;
}
.slp-feature .wp-block-post-title,
.slp-side-featured .wp-block-post-title { z-index: 1; }

/* no page title on the homepage (FirstPalette style) — backup for the PHP filter */
.home.page .entry-header { display: none; }


/* =========================================================
   9. Match the mockup: slim header, image below the intro
   ========================================================= */
/* slimmer header bar */
.site-header .inside-header { padding-top: 14px; padding-bottom: 14px; }
.main-title { font-size: 1.5rem; font-weight: 700; }
.main-title a { color: #222; }
.main-title a:hover { color: var(--slp-red); }

/* hide GP's automatic featured image on single posts —
   the theme re-inserts it after the intro paragraph instead */
.single .post-image,
.single .featured-image,
.single .page-header-image-single { display: none; }

.slp-hero-img { margin: 8px 0 28px; }
.slp-hero-img img { display: block; width: 100%; height: auto; }


/* =========================================================
   10. Roboto everywhere (FirstPalette's typeface) +
       header/search/share-button corrections
   ========================================================= */
body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.main-title,
.main-navigation a,
.entry-content,
.sidebar .widget {
  font-family: var(--slp-font) !important;
}

/* belt-and-braces: never show GP's nav search leftovers */
.navigation-search,
.search-item { display: none !important; }

/* share buttons: identical size no matter what scripts run on the page */
.slp-share { align-items: stretch; }
.slp-share a,
.slp-share a[data-pin-custom] {
  height: 36px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.9rem !important;
  border-radius: 4px !important;
  width: auto !important;
  background-image: none !important;
}


/* =========================================================
   11. 21px body text + search in the menu bar
   ========================================================= */
body { font-size: 21px !important; line-height: 1.65; }
.sidebar .widget { font-size: 17px; }

/* (nav search rebuilt as a menu-item icon below) */


/* =========================================================
   12. Menu search icon (FirstPalette style, expands on click)
   ========================================================= */
.main-navigation .slp-search-item { display: flex; align-items: center; position: relative; }
.slp-search-item form { display: flex; align-items: center; margin: 0; padding: 0 14px; }
.slp-search-item label {
  cursor: pointer;
  line-height: 0;
  color: #222;
  padding: 10px 0;
}
.slp-search-item label:hover { color: var(--slp-red); }
/* the field floats below the icon — never reflows the menu */
.slp-search-item input[type="search"] {
  position: absolute;
  top: calc(100% + 10px);
  right: 6px;
  width: 240px;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 110;
}
.slp-search-item form:focus-within input[type="search"] {
  opacity: 1;
  visibility: visible;
}
.slp-search-item input[type="search"]:focus { outline: none; border-color: var(--slp-blue); }
.slp-search-submit { display: none; } /* Enter submits */
@media (max-width: 768px) {
  .main-navigation .slp-search-item { display: none; } /* mobile keeps sidebar search */
}


/* =========================================================
   13. Spacing tightened + grid dates removed
   ========================================================= */
/* less dead air between the header and page content */
.site-content { padding-top: 0 !important; }
.site-main { margin-top: 26px !important; }
.inside-article { padding-top: 0 !important; }
.single .entry-title,
.page .entry-title { margin-top: 0; margin-bottom: 6px; }

/* homepage: tighter rhythm between blocks */
.entry-content .wp-block-group { margin-bottom: 0; }
.entry-content .wp-block-spacer { height: 16px !important; }
.slp-home-intro p { margin-bottom: 16px; }
.slp-feature { margin-top: 0; }
.slp-section { margin-bottom: 44px; }
.slp-section .slp-section-desc { margin-bottom: 18px; }
.slp-grid .wp-block-post-template { gap: 30px 26px; }
.entry-content .wp-block-query { margin: 0 0 8px; }

/* the italic how-to notes in section descriptions are editor hints —
   never show them to visitors */
.slp-section-desc em { display: none; }

/* no dates under homepage/grid cards */
.slp-grid .wp-block-post-date { display: none !important; }


/* =========================================================
   14. Editable sidebar widgets (search / ads / featured / cats)
   ========================================================= */
.sidebar .widget { margin-bottom: 34px; }
.sidebar .widget-title,
.sidebar .widget h2.slp-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #222;
  margin-bottom: 16px;
}
.sidebar .widget-title::after,
.sidebar .widget h2.slp-rule::after {
  content: "";
  flex: 1;
  height: 8px;
  background: #ececec;
}
.slp-ad-label {
  text-align: center;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #9a9a9a;
  padding: 8px 0;
}
.slp-w-featured {
  position: relative;
  display: block;
  margin-bottom: 16px;
  overflow: hidden;
}
.slp-w-featured img { display: block; width: 100%; height: auto; }
.slp-w-featured::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
  pointer-events: none;
}
.slp-w-feat-title {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  z-index: 1;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.slp-w-list { list-style: none; margin: 0; padding: 0; }
.slp-w-list li { border-bottom: 1px solid #ececec; }
.slp-w-list li:last-child { border-bottom: 0; }
.slp-w-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  color: #222;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.35;
}
.slp-w-list a:hover { color: var(--slp-red); }
.slp-w-list img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex: none;
}
.sidebar .widget_categories ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget_categories li { padding: 7px 0; border-bottom: 1px solid #f1f1f1; }
.sidebar .widget_categories li:last-child { border-bottom: 0; }
.sidebar .widget_categories a { color: #222; text-decoration: none; }
.sidebar .widget_categories a:hover { color: var(--slp-red); }


/* =========================================================
   15. Search overlay, tighter homepage, nicer sidebar search
   ========================================================= */
.slp-search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: #222;
  padding: 8px 14px;
  line-height: 0;
}
.slp-search-toggle:hover { color: var(--slp-red); }
#slp-search-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #fff;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.14);
  padding: 24px 5vw;
  z-index: 99999;
  display: none;
}
#slp-search-overlay.open { display: block; }
#slp-search-overlay form {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
#slp-search-overlay input[type="search"] {
  flex: 1;
  font-size: 24px;
  padding: 13px 18px;
  border: 2px solid var(--slp-blue);
  border-radius: 4px;
  background: #fff;
}
#slp-search-overlay input[type="search"]:focus { outline: none; }
.slp-search-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #111;
  padding: 6px;
}
.slp-search-close:hover { color: var(--slp-red); }

/* homepage rhythm, round two — kill every leftover gap */
.entry-content .wp-block-spacer { height: 10px !important; }
.entry-content .wp-block-query,
.slp-feature .wp-block-post-template,
.slp-feature ul { margin: 0 !important; }
.slp-home-intro { margin-bottom: 8px; }
.slp-home-intro p { margin-bottom: 14px; }
.slp-section { margin-bottom: 36px; }
.slp-section > h2 { margin-bottom: 10px; }
.slp-section-desc { margin-bottom: 14px !important; }
.entry-content p:empty { display: none; margin: 0; }

/* sidebar search: one clean rounded field with attached button */
.sidebar .wp-block-search__inside-wrapper {
  display: flex;
  border: 1px solid #ddd !important;
  border-radius: 6px;
  overflow: hidden;
  padding: 0 !important;
}
.sidebar .wp-block-search__input {
  flex: 1;
  border: none !important;
  padding: 11px 14px !important;
  font-size: 15px;
  background: #fff;
}
.sidebar .wp-block-search__input:focus { outline: none; }
.sidebar .wp-block-search__button {
  margin: 0 !important;
  border: none !important;
  background: #222;
  color: #fff;
  padding: 0 18px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 0;
}
.sidebar .wp-block-search__button:hover { background: var(--slp-red); }