/*
Theme Name: Fowler Theme
Theme URI: http://www.lafowler.ca
Author: L.A. Fowler
Description: Main theme stylesheet for Fowler Theme.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: fowler-theme
*/




/* ==================== */
/* 🧱 BASE STYLES        */
/* ==================== */

/* -------------------- Typography & Resets -------------------- */
:root {
  --font-heading: 'Amatic SC', serif;
  --font-body: 'Merriweather', serif;
  --font-ui: 'Inter', sans-serif;
  --color-text: #222;
  --color-accent: #e63946;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}

*, ::before, ::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

html, body {
  overflow-x: hidden;
}

body, #page {
  margin: 0;
  font-family: var(--font-body), Arial, Helvetica, sans-serif;
  color: var(--color-text);
  line-height: 1.6;
}


h1, h2, .title {
  font-family: var(--font-heading), serif;
  font-weight: 700; /* Amatic SC only has this weight */
}

h3, h4, .section-header {
  font-family: 'Merriweather', serif;
  font-weight: bold;
}

body, p, .content-text {
  font-family: var(--font-body), Arial, Helvetica, sans-serif;
}


.titles, .entry-title {
  color: var(--default-white, #FFF);
  text-transform: inherit;
  background: var(--default-black, #222);
  display: inline;
  line-height: 1.4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 15px;
  position: relative;
  z-index: 3;
  font-family: var(--font-heading), serif;
  font-weight: 400; 
    margin: 1rem 0;
}

p {
  margin: 0 0 var(--spacing-md);
}

/* Normalize elements */
main { display: block; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; color: #712A48; text-decoration: none; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
img { border-style: none; max-width: 100%; height: auto; }
table { width: 100%; margin-bottom: 1.5em; }

.entry-content {
  padding-top: 2rem; /* or whatever spacing you want */
}

.specialtext {
  font-family: var(--font-heading), serif !important;
  font-weight: 400; 
    font-size: 2rem;
}



/* ===================================================================== */
/* 🍴                        HEADER & MENU STYLES                        */
/* ===================================================================== */

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
    opacity: .4;
}




#masthead {
    padding: 0 2rem;
}

.site-header {
    background: #111;
    color: white;
    padding: 1rem 2rem 0 2rem;
    font-family: var(--font-heading), Arial, Helvetica, sans-serif;
    font-weight: 700;
    margin: -0.5rem 0 2rem 0;
    position: relative;
    z-index: 10;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Branding */
.site-branding {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.custom-logo-link img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.branding-text {
    display: flex;
    flex-direction: column;
}

.branding-text .webtitle a {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
}


.branding-text .webtitle {
    margin-top: -3.9rem;
}

.branding-text .subtitlenav {
    font-size: 0.9rem;
    color: #cccccc;
    letter-spacing: 1px;
    font-weight: 400;
    margin-top: -.5rem;
}

/* Nav + CTA wrapper */
.nav-cta-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-grow: 1;
}

/* Burger toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    z-index: 100;
}

/* Navigation menu */
.main-navigation {
    display: flex;
    align-items: center;
    position: relative;
}

#primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary-menu li a {
    color: white;
    font-size: 1.3rem;
    text-transform: lowercase;
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    transition: color 0.3s ease;
}

#primary-menu li.current-menu-item a,
#primary-menu li a:hover {
    color: #2ddcc2;
}

/* Dropdowns */
.main-navigation li.menu-item-has-children > ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #1b1b1b;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.3s ease;
}

.main-navigation li.menu-item-has-children:hover > ul,
.main-navigation li.menu-item-has-children:focus-within > ul {
    opacity: 1;
    pointer-events: auto;
    transform: scaleY(1);
}

.main-navigation li.menu-item-has-children ul li a {
    display: block;
    padding: 0.6rem 1.2rem;
    color: #fff;
    font-weight: 500;
}

.main-navigation li.menu-item-has-children ul li a:hover {
    background: linear-gradient(90deg, #2ddcc2, #ff00ff);
    color: #000;
}

/* Desktop CTA */
.header-cta .cta-button {
    padding: 1rem 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e91e63;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 10;
    margin-bottom: -0.5rem;
}

.header-cta .cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Desktop stack text */
.desktop-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mobile-inline {
    display: none;
}

/* 📱 Mobile Styles */
@media (max-width: 843px) {
    .desktop-stack { display: none; }
    .mobile-inline { display: inline; }

    .header-cta {
        width: 114%%;
        text-align: center;
        margin: .3rem 0;
    }

    .header-cta .cta-button {
        display: block;
        width: 118% !important;
        box-sizing: border-box;
        padding: 0 !important;
        font-size: 14px;
        margin-top: -10px;
    }

    .header-cta .cta-button:focus {
        transform: scale(1.05);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    }

    .header-cta.menu-open .cta-button { display: none; }

    /* Header grid */
    .header-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "branding burger"
            "menu menu"
            "cta cta";
        align-items: center;
        width: 100%;
        gap: 0.75rem;
    }

    .site-branding { grid-area: branding; }
    .menu-toggle { grid-area: burger; display: block; justify-self: end; }

    .main-navigation {
        grid-area: menu;
        display: none;
        flex-direction: column;
        width: 100%;
        background: #111;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-navigation.menu-open { display: flex !important; }

    #primary-menu {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    #primary-menu li { width: 100%; }

    #primary-menu li a {
        display: block;
        width: 100%;
        padding: 0.85rem 1.2rem;
        color: #fff;
        text-decoration: none;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    #primary-menu li a:hover { background: rgba(255, 255, 255, 0.1); }

    /* Mobile dropdowns */
    .main-navigation li.menu-item-has-children > ul {
        position: static !important;
        display: none;
        background: rgba(45, 220, 194, 0.05);
        border-radius: 6px;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .main-navigation li.menu-item-has-children.open > ul { display: block; }

    .main-navigation li.menu-item-has-children > ul li a {
        padding-left: 0;
        font-size: 1rem;
        text-align: center;
    }

    .nav-cta-wrapper { display: contents; }
    .main-navigation { width: 100%; max-width: 100%; }
    #primary-menu { width: 100%; }
}

/* Fix masthead spacing on smaller screens */
@media (max-width: 901px) {
    #masthead { margin-bottom: -2rem !important; }
}


.custom-logo-link img {
  transition: transform 1.5s ease-in-out, filter 0.8s ease;
}

.custom-logo-link:hover img {
  transform: rotate(360deg) scale(1.08);
  filter: drop-shadow(0 0 10px #00e5ff);
}



/* ===================================================================== */
/* -------------------   END HEADER & MENU STYLES   --------------------- */
/* ===================================================================== */




/* ========================================================= */
/* 🧩 GLOBAL LAYOUT + STRUCTURE                              */
/* ========================================================= */

body {
  background-image: url('/wp-content/themes/fowler-theme/images/brickdarker.jpg');
  background-repeat: repeat;
  background-size: 500px;
  background-position: center center;
  background-attachment: scroll;
}

#page {
  margin: 0;
  padding: 0;
}

.center_main {
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  width: 100%;
}

/* ==================== */
/* 📦 Primary Structure */
/* ==================== */

body #primary {
  display: flex;
  gap: 0;
  width: 100%;
  margin: 13rem auto 0 auto;
  padding: 0.5rem 1.5rem;
  background: white;
}

body.home #primary {
  background: none !important;
}

/* ==================== */
/* ⚙️ Main Content Area  */
/* ==================== */

#main-content {
  margin: 0 auto;
  padding: 1rem 0;
  max-width: 1100px;
}

#main-content .page,
#main-content .post,
#main-content .single {
  padding: 0 2rem;
}

/* ========================================================= */
/* 🧱 PAGEWRAPFLOAT LAYOUT – MAIN + SIDEBAR (FIXED + STABLE) */
/* ========================================================= */

#pagewrapfloat {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch; /* ✅ keeps equal height */
  width: 1200px;
  margin: 0 auto;
  gap: 0;
  box-sizing: border-box;
  padding: 0 1rem;
}

/* ✅ Core Fix: Prevent collapse and weird shrink behaviour */
#main-content,
#secondary {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

#main-content > *,
#secondary > * {
  flex-shrink: 0;
}

#pagewrapfloat #main-content {
  flex: 1 1 70%;
  min-width: 0;
  box-sizing: border-box;
}

#pagewrapfloat #secondary {
  flex: 0 0 28%;
  box-sizing: border-box;
}

/* Sidebar */
#secondary {
  flex: 0 0 300px;
  max-width: 300px;
  color: white;
  box-sizing: border-box;
  position: relative;
  padding: -2rem 0.5rem -1.5rem 1.3rem;
  margin: -8rem 0.5rem 0 0;
 /* box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.58);
background: #222;*/

}

#sidebar {
  padding: 1rem;
}

#secondary .sidebar-inner {
  display: block;
  position: sticky;
  top: 30px;
  z-index: 2;
}

/* ========================================================= */
/* 📱 RESPONSIVE STACK                                       */
/* ========================================================= */
@media (max-width: 900px) {
  #pagewrapfloat {
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    padding: 0 1rem;
  }

  #pagewrapfloat #main-content,
  #pagewrapfloat #secondary {
    flex: 1 1 100%;
    width: 100%;
  }

  #secondary {
    margin: 0;
    max-width: 100%;
  }

  #secondary .sidebar-inner {
    position: relative;
    top: auto;
  }

  #primary {
    flex-direction: column;
    margin: 50px auto 0 auto !important;
  }

  #main-content,
  #secondary {
    flex: 0 1 100%;
    width: 100%;
  }
}

/* ========================================================= */
/* 🌐 GRID + FOOTER                                          */
/* ========================================================= */

.mainwrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
}

.site-footer {
  background: black;
  padding: 0.5rem 1rem !important;
}

.container {
  margin: 0 auto;
}

/* ========================================================= */
/* 🌄 FEATURED IMAGE HEADER + POST/PAGE STYLES               */
/* ========================================================= */

.entry-content h1, 
.entry-content h2, 
.page-title {
  color: var(--default-white, #FFF);
  text-transform: inherit;
  background: var(--default-black, #222);
  display: inline;
  line-height: 3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 15px;
  position: relative;
  z-index: 3;
  font-family: var(--font-heading), serif;
  font-weight: 400; 
  margin: 0 0 0 -20px;
}

.page-title {
  margin: 0 0 0 -10px;
}

.featured-image-header {
  width: 104%;
  height: 400px;
  z-index: 3;
  overflow: hidden;
  position: relative;
  margin: -13rem 0 0 -2% !important;
  box-shadow:
    0 -10px 30px rgba(0,0,0,0.3),
    -10px 0 20px rgba(0,0,0,0.2),
    10px 0 20px rgba(0,0,0,0.2);
}

/* 🖥️ Large screens – full dramatic effect */


/* 💻 Medium screens – dial it back */
@media (max-width: 1199px) and (min-width: 900px) {
  .featured-image-header {
    width: 106%;
    margin-left: -3%;
  }
}

/* 📱 Tablets and small laptops – keep it neat */
@media (max-width: 899px) {
  .featured-image-header {
    width: 100%;
    margin-left: 0;
  }
}

.featured-image-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.featured-title {
  position: absolute;
  bottom: 1rem;
  left: 2rem;
  color: white;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.7);
  max-width: 60%;
  z-index: 10;
}

/* ========================================================= */
/* 📱 MOBILE FEATURED IMAGE                                  */
/* ========================================================= */
@media (max-width: 900px) {
  .featured-image-header {
    width: 100%;
    height: clamp(220px, 35vh, 350px);
    margin: -9rem 0 0 0 !important;
  }

  .featured-title {
    left: 1rem;
    bottom: 0.5rem;
    max-width: 90%;
    font-size: 1.1rem;
  }
}






.about_fowler { margin-top: 10px;}



/* ==================== */
/* 🎟️ Single Post Meta Pills */
/* ==================== */

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 1.5rem;
  font-size: 0.85rem;
  font-family: var(--font-ui, 'Inter', sans-serif);
}

.entry-meta .posted-on {
  color: #fff;
  background: rgba(255,255,255,0.1);
  padding: 3px 10px;
  border-radius: 12px;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.category-pills .tag-pill {
  background: rgba(238, 51, 131, 0.9);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.category-pills .tag-pill a {
  color: inherit;
  text-decoration: none;
}

.category-pills .tag-pill:hover {
  background: rgba(123, 31, 162, 0.9); /* subtle purple hover like grid */
}


/* 🌙 Mobile adjustments */
@media (max-width: 700px) {
  .featured-image-header {
      width: 104%;
    height: 230px;
    margin: -2% 0 0 -2% !important;
  }


  .featured-title {
    transform: translateX(-10%);
    padding: 0 1rem;
  }

  .featured-title h1.entry-title {
    font-size: 1.3rem;
    margin-bottom: 0;
  }

  .featured-title .entry-meta {
    font-size: 0.5rem;
  }
    
  .tag-pill {
    font-size: 0.4rem !important;
    padding: 2px;
  }
}

/* ==================== */
/* 🍴 Sidebar Style     */
/* ==================== */

#secondary ul:first-of-type {
    margin: 0;
    padding: 0;
    list-style: none; /* optional if you want to remove bullets */
}

/* -------------------- */
/* Join the Fowl Society */
/* -------------------- */


#secondary .joinfowlsocietywidget h4 {
    font-size: 20px;
    margin-bottom: 8px;
}

#secondary .joinfowlsocietywidget p {
    margin: 8px 0;
    line-height: 1.4;
}

#secondary .joinfowlsocietywidget .highlight {
    color: #ff00ff;
    font-weight: bold;
}

#secondary .joinfowlsocietywidget .sessanite-insider {
    font-weight: bold;
    background: linear-gradient(45deg, #ff00ff, #8000ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#secondary .joinfowlsocietywidget input[type="email"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

#secondary .joinfowlsocietywidget input.button {
    width: 100%;
    background-color: #ff00ff;
    color: #fff;
    font-size: 16px;
    padding: 10px 0;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

#secondary .joinfowlsocietywidget input.button:hover {
    background-color: #e600e6;
}

/* -------------------- */
/* Preorder Links */
/* -------------------- */
#secondary .preorderlinks {
    margin-top: 30px;
}

#secondary .preorderlinks h4 {
    font-size: 18px;
    margin-bottom: 8px;
}

#secondary .preorderlinks ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#secondary .preorderlinks li {
    margin: 6px 0;
    font-size: 16px;
}

#secondary .preorderlinks li a {
    text-decoration: none;
    color: #ff00ff;
    font-weight: bold;
}

#secondary .preorderlinks li a:hover {
    text-decoration: underline;
}

/* -------------------- */
/* Responsive tweaks */
/* -------------------- */
@media (max-width: 900px) {
    #secondary {
    margin: 0;
      width: 100%;
      max-width: inherit;
    }
}


/* =============================== */
/* 🔗 Custom Share Buttons Section */
/* =============================== */

/* Share container styling */
.share-buttons {
    background-image: linear-gradient(
        75deg,
        rgba(238, 51, 131, 0.8) 0%,    /* neon pink at end */
        rgba(0, 0, 0, 1) 100%        /* solid black at start */
    );
    padding: 10px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 15px;
    transition: box-shadow 0.3s ease;
        margin-top: -30px;
}

/* Optional subtle hover glow effect */
.share-buttons:hover {
    box-shadow: 0 0 20px rgba(238, 51, 131, 0.8);
}


/* Individual icon links */
.share-buttons a {
    color: #fff;
    font-size: 1.3rem;
    padding: 8px;
    border-radius: 50%;
    display: inline-block;
    transition: color 0.2s ease, background 0.2s ease;
}

/* Simple hover: subtle color change */
.share-buttons a:hover {
    color: #39ff14;
}

/* Heading styling */
.share-buttons h3 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 5px;
}

.sharethisposttitle {
  color: var(--default-white, #FFF);
  text-transform: inherit;
  background: var(--default-black, #222);
  display: inline;
  line-height: 3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 15px;
  position: relative;
  z-index: 3;
  font-family: var(--font-heading), serif;
  font-weight: 400; 
    margin:  0 0 0 -20px;
}

@media (max-width: 768px) {
    .share-buttons a  {
        font-size: .9rem;
    }
}


/* Container for all book images */
.fowler-float-container {
    display: flex;
    flex-wrap: wrap;           
    gap: 1rem;                 
    justify-content: space-between; 
}

/* Individual book wrapper */
.fowler-float {
    flex: 1 1 100%; /* shrink to ~50% width, flex-wrap will handle rows */
    max-width: 45%; /* prevent it from getting too big */
    text-align: center;
}

/* Images inside the wrapper */
.fowler-float img {
    width: 100%;   /* take full width of wrapper */
    height: auto;
    transition: transform 0.4s ease;
    cursor: pointer;
}

/* Title and text */
.fowler-float-title {
    font-size: 1.5rem;
    margin: 0.5rem 0 0.25rem 0;
    font-family: var(--font-heading), serif;
}

.fowler-float-text {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* Buttons */
.fowler-float-button {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: #54B5B8;
    color: #fff;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.fowler-float-button:hover {
    background: #fff;
    color: #54B5B8;
    transform: scale(1.05);
}

/* Hover wobble on image only */
.fowler-float img:hover {
    animation: wobble 0.6s ease forwards;
}

/* Keyframes for wobble */
@keyframes wobble {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-3deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-2deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
    100% { transform: rotate(0deg); }
}

/* Responsive: stack on smaller screens */
@media (max-width: 768px) {
    .fowler-float {
        flex: 1 1 100%;
        max-width: 100%;
        margin-bottom: 2rem;
    }
}


/* ===================================================================== */
/* --------------   END POST, SIDEBAR, AND PAGE   STYLES     --------------- */
/* ===================================================================== */





/* ==================================================== */
/* ✨                BLOG GRID LAYOUT                   */
/* ================================================== */



/* Full-width headers, pagination, etc. */
.blog-grid-header,
.blog-pagination {
  grid-column: 1 / -1 !important;
}
/* ==================================================== */
/* ✨ BLOG GRID – STACKED CLEAN WHITE STYLE             */
/* ==================================================== */

.archive #main-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
      gap: 2rem;

}

.blog-grid  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

/* 🧱 BLOG POST CARD */
.blog-post {
  position: relative;
  overflow: hidden;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.blog-post:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* 🖼 Thumbnail image */
.blog-post img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.4s ease;
}

/* 🎬 Zoom image on hover */
.blog-post:hover img {
  transform: scale(1.05);
}

/* 🩷 Category pills */
.blog-post .post-tags {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 2;
}

.blog-post .tag-pill {
  background: rgba(238, 51, 131, 0.9);
  color: #fff;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* 📄 Text overlay */
.post-overlay {
  padding: 1.5rem;
  color: #000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}

.post-title {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  font-family: var(--font-heading), serif;

}

.post-meta {
  font-size: 0.9rem;
  color: #888;
}

.post-excerpt {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  flex-grow: 1;
}

/* 🔗 Read More */
.read-more {
  display: inline-block;
  padding: 0.9rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(135deg, #8b0045, #ff007c);
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(139,0,69,0.4);
    text-align: center;
      font-family: var(--font-heading), serif;

}



.read-more:hover {
  transform: scale(1.08) rotate(-1deg);
      background: linear-gradient(135deg, #440021, #8b0045);
  box-shadow: 0 0 20px rgba(255,0,124,0.6);
  letter-spacing: 1px;
}



/* 🌟 Fade-in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (max-width: 900px) {
  .mainwrap, .archive #main-content  {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
   .mainwrap, .archive #main-content  {
    grid-template-columns: 1fr;
  }
      .blog-post img {
    height: 200px;
  }

  .post-title {
    font-size: 1.2rem;
  }
}


/* ========================= */
/* BLOG PAGINATION POSITION + STYLE */
/* ========================= */
.blog-pagination {
  grid-column: 1 / -1; /* Stretch across full grid width */
  justify-self: center;
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  margin-bottom: 2rem;
  width: 100%;
}

/* List + layout */
.blog-pagination ul {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.blog-pagination li {
  display: inline-block;
}

/* Buttons (links and current page) */
.blog-pagination a,
.blog-pagination span {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  border: 1px solid #ee3383; /* neon pink edge */
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  background: linear-gradient(145deg, #111, #1a0014); /* dark gradient */
  transition: all 0.25s ease;
  box-shadow: 0 0 8px rgba(238, 51, 131, 0.4);
}

/* Hover glow effect */
.blog-pagination a:hover {
  background: linear-gradient(145deg, #ee3383, #ff4fad);
  color: #000;
  box-shadow: 0 0 15px rgba(255, 0, 128, 0.75);
  transform: translateY(-2px);
}

/* Active/current page */
.blog-pagination .current {
  background: linear-gradient(145deg, #7b1fa2, #ee3383);
  border-color: #ee3383;
  color: #fff;
  box-shadow: 0 0 15px rgba(238, 51, 131, 0.8);
  pointer-events: none;
}

/* Prev/Next buttons – darker, with subtle glow */
.blog-pagination .prev,
.blog-pagination .next {
  background: linear-gradient(145deg, #222, #111);
  border-color: #444;
  color: #fff;
}

.blog-pagination .prev:hover,
.blog-pagination .next:hover {
  background: linear-gradient(145deg, #00ff88, #00663f); /* bright green pop */
  color: #000;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.7);
}

/* Mobile tidy-up */
@media (max-width: 600px) {
  .blog-pagination {
    font-size: 12px;
    gap: 0.4rem;
  }

  .blog-pagination a,
  .blog-pagination span {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
  }
}


/* ===================================================================== */
/* ---------------------   BLOG POST STYLES    ------------------------- */
/* ===================================================================== */





/* ========================================================= */
/* 🩶 SIDEBAR – Harmonized with Main Site Style              */
/* ========================================================= */
.sidebar-section {
  background: rgba(34, 34, 34, 0.9);
  margin: 5px 0;
  padding: 1.2rem;
  border-radius: 1rem;
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 8px rgba(255,255,255,0.05),
              0 4px 10px rgba(0,0,0,0.4);
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff !important;
}

.sidebar-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(84,181,184,0.35), 0 6px 15px rgba(0,0,0,0.4);
}

.sidebar-section a { color: white; }



/* === TITLES === */
.sidebar-section h3 {
  font-family: 'Amatic SC', sans-serif;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 1px;
  color: #fff;
  width: 127%;
  background: #21777c;
  margin: 0 0 .7rem -2rem;
  padding: 0 1rem;
    text-align: center;
}

@media (max-width: 900px) {
    .sidebar-section h3  { width: 112%;}

}

/* ========================================================= */
/* 🌸 BUTTONS – Unified Look & Hover Glow                    */
/* ========================================================= */
.shop-button,
.fear-link,
.poll button,
.fowl-society button,
.apm-button-box {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: linear-gradient(135deg, #8b0045, #ff007c) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: bold !important;
  font-family: 'Amatic SC', sans-serif !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  padding: 5px !important;
  font-size: 18px !important;
  text-decoration: none !important;
  box-shadow: 0 0 8px rgba(0,0,0,0.4) !important;
}

.shop-button:hover,
.fear-link:hover,
.poll button:hover,
.fowl-society button:hover,
.apm-button-box:hover {
  background: linear-gradient(135deg, #26bdb6, #8b0045) !important;
  box-shadow: 0 0 15px #26bdb6, 0 0 25px rgba(38,189,182,0.5) !important;
  text-shadow: 0 0 5px #26bdb6, 0 0 10px rgba(38,189,182,0.6) !important;
  transform: scale(1.05);
}



.quail-shop {
  text-align: center; /* centers inline elements like img + button */
  position: relative;
}

.quail-mascot {
  display: block;
  max-width: 100px;
  width: 100%;
  margin: -4rem auto -2.5rem;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

.quail-mascot:hover {
  animation: quail-wiggle 0.6s ease-in-out infinite alternate;
}

@keyframes quail-wiggle {
  0% { transform: rotate(0deg) translateY(-2px); }
  25% { transform: rotate(3deg) translateY(-3px); }
  50% { transform: rotate(-3deg) translateY(-1px); }
  75% { transform: rotate(2deg) translateY(-4px); }
  100% { transform: rotate(0deg) translateY(-2px); }
}


/* ========================================================= */
/* 🎬 WHAT I'M BINGING — Sleek Neon Bars                     */
/* ========================================================= */
.binging {
  text-align: center;
}

.binging ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.binging li {
  margin: 1rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

/* 💡 Top black bar */
.binging-bar {
  background: #000;
  color: #26bdb6;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(38,189,182,0.4);
}

.binging a br {
  display: none;
}


/* ✨ Title + subtitle */
.binging li a {
  display: block;
  color: #fff !important;
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  transition: all 0.3s ease;
}

.binging li a em {
  display: block;
  font-size: 1.05rem;
  font-style: normal;
  margin-top: 0.2rem;
}

.binging li a small {
  display: block;
  font-size: 0.85rem;
  color: #aaa;
  margin-top: 0.1rem;
}

/* 💫 Hover = glow + slight lift */
.binging li:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 8px rgba(38,189,182,0.6),
    0 0 15px rgba(38,189,182,0.4);
}

.binging li a:hover em {
  color: #26bdb6;
  text-shadow: 0 0 10px rgba(38,189,182,0.7);
}



/* ========================================================= */
/* 🗳️ POLL FORM / FOWL SOCIETY INPUTS                       */
/* ========================================================= */
.poll form,
.fowl-society form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fowl-society input {
  background: #111;
  border: 1px solid rgba(84,181,184,0.6);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  color: #fff;
  font-family: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.fowl-society input:focus {
  border-color: #54B5B8;
  box-shadow: 0 0 10px rgba(84,181,184,0.4);
  outline: none;
}

/* Hide extra title boxes & clean poll buttons */
.apm-title-box { display: none !important; }

.ays-poll-btn {
 font-family: 'Amatic SC', sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

.apm-button-box {
      line-height: 1.3 !important;

}

.box-apm { padding: 0 !important; }
.ays-poll-each-answer-grid { text-align: center !important; }
.ays_label_poll { border-color: rgb(34, 34, 34) !important; }
.ays_label_poll:hover { color: white !important; }


/* ===================================================================== */
/* 🏠 FOOTER STYLES with CSS VARIABLES (Cleaned + Mobile-First Layout)    */
/* ===================================================================== */

/* ---------------------------
   Color Variables
---------------------------- */
:root {
  --color-bg-footer: #0a0a0a;
  --color-text-footer: #f5f5f5;
  --color-text-muted: #888;
  --color-border-footer: #333;
  --color-primary: #93d180;
  --color-accent-hover: #e5a0bd;
  --color-button-gradient-end: #00ffff;
  --color-social-hover-bg: #E91E63;
  --color-social-hover-text: #000;
  --color-social-bluesky-shadow: #93d180;
}

/* ---------------------------
   General Footer Styling
---------------------------- */
.site-footer {
  background-color: var(--color-bg-footer);
  color: var(--color-text-footer);
  padding: 3rem 2rem;
  margin-top: -1.5rem;
  border-top: 1.5rem groove var(--color-border-footer);
}

.footwrap {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------------------------
   Footer Navigation
---------------------------- */
.footer-lore-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Amatic SC', serif;
}

.footer-lore-nav ul.footer-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
}

.footer-lore-nav ul.footer-menu li a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  color: var(--color-primary);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-lore-nav ul.footer-menu li a:hover {
  color: var(--color-accent-hover);
}

/* ---------------------------
   Footer Bottom Row (Always Stacked)
---------------------------- */
.footer-bottom-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.footer-frog-reward,
.footer-login-secret,
.footer-social-icons {
  width: 100%;
  max-width: 500px;
}

/* ----- Frog Reward ----- */
.footer-frog-reward {
  text-align: center;
  order: 2;
}

.frog-sticker {
  width: 120px;
  height: auto;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 0 5px var(--color-primary));
  animation: frogFloat 3.5s ease-in-out infinite;
  transition: transform 0.2s ease;
}

.frog-sticker:hover {
  animation: frogBoing 0.5s ease-in-out;
}

@keyframes frogFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes frogBoing {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-12px) scale(1.05); }
  50% { transform: translateY(-5px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}


.footer-frog-reward p,
.footer-frog-reward a {
  font-weight: bold;
  color: var(--color-primary);
}

.footer-frog-reward a {
  font-style: italic;
  text-decoration: underline;
}


/* ----- Login Box ----- */
.footer-login-secret {
  background-color: #111;
  border: 2px dashed var(--color-primary);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  order: 0;
}

.footer-login-secret label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--color-primary);
}

.footer-login-secret input,
.footer-login-secret button {
  width: 100%;
  padding: 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.footer-login-secret input {
  background-color: #222;
  border: 1px solid var(--color-primary);
  color: var(--color-text-footer);
}

.footer-login-secret button {
  background: linear-gradient(to right, var(--color-primary), var(--color-button-gradient-end));
  border: none;
  color: var(--color-text-footer);
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.footer-login-secret button:hover {
  box-shadow: 0 0 10px var(--color-primary);
}

/* ----- Social Icons ----- */
.footer-social-icons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  order: 1;
}

.footer-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background-color: #222;
  color: var(--color-primary);
  transition: all 0.3s ease;
  text-decoration: none;
}

.footer-social-icons a:hover {
  background-color: var(--color-social-hover-bg);
  color: var(--color-social-hover-text);
  box-shadow: 0 0 10px var(--color-primary);
}

.footer-social-icons .custom-bluesky-icon {
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  background-color: var(--color-primary);
  -webkit-mask: url('/wp-content/themes/fowler-theme/images/bluesky-icon.svg') no-repeat center;
  mask: url('/wp-content/themes/fowler-theme/images/bluesky-icon.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: all 0.3s ease;
}

.footer-social-icons a:hover .custom-bluesky-icon {
  background-color: var(--color-social-hover-text);
  filter: drop-shadow(0 0 10px var(--color-social-bluesky-shadow));
}


.footer-login-secret input[type="submit"] {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.footer-login-secret input[type="submit"]:hover {
  background-color: #666;
}


@media (max-width: 500px){
.footer-social-icons a {
  font-size: 11px;
  width: 35px;
  height: 35px;
    }
}
/* ---------------------------
   Site Info
---------------------------- */
.site-info {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-footer);
  padding-top: 1rem;
}



/* ===========================
   🗳️ Poll of the Month Styling
   =========================== */

.sidebar-section.poll {
  text-align: center;
  padding: 1rem;
}

 .forminator-poll--column {
  width: 100% !important;
}

.forminator-poll--grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem; /* space between cells */
  justify-items: stretch;
  align-items: stretch;
  margin-top: 1rem;
}

/* Each choice box */
.forminator-poll--column {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Label styling — full card area clickable */
.forminator-radio-label{
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0.8rem;
  cursor: pointer;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.2;
  transition: all 0.25s ease;
}

/* --- Poll Grid Layout --- */
.forminator-poll--grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* --- Make all options same height --- */
.forminator-poll--column {
  display: flex;
}

/* --- Label styling (clickable cards) --- */
.forminator-radio-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px; /* set your preferred uniform height */
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0.8rem;
  text-align: center;
  color: #fff;
  font-size: 0.95rem !important;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.25s ease;
    height: 120px !important;  display: flex;
  align-items: center;   /* vertical centering */
  justify-content: center; /* horizontal centering */
  text-align: center;     /* keeps multiline text centered */
}
.sidebar-section .forminator-poll--question { color: #fff !important;}

@media (max-width: 900px) {
    .forminator-radio-label {
    height: auto !important;
    }
}
/* Hover effect */
.forminator-radio-label:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.02);
}

/* Optional: selected state */
input[type="radio"]:checked + .forminator-radio-bullet + .forminator-radio-label {
  background: rgba(255, 255, 255, 0.25);
  border-color: #fff;
}

/* Hide the actual radio button & bullet */
.forminator-radio input[type="radio"],
.forminator-radio-bullet {
  display: none !important;
}

/* Hover and focus effects */
.forminator-radio:hover,
.forminator-radio:has(input[type="radio"]:checked) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.03);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

/* Optional: subtle text glow */
.forminator-radio:hover span,
.forminator-radio:has(input[type="radio"]:checked) span {
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.forminator-response-message { display:none;}

/* Responsive fallback for small screens */
@media (max-width: 600px) {
  .forminator-poll--grid {
    grid-template-columns: 1fr;
  }
}


/* === POPUP OVERLAY SYSTEM === */
.fs-popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 2rem;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fs-popup-overlay.active {
  display: flex;
  opacity: 1;
}

.fs-popup-content {
  background: #fff;
  padding: 2rem;
  max-width: 700px;
  width: 100%;
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  animation: popupFadeIn 0.4s ease;
}

@keyframes popupFadeIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.fs-popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.fs-popup-close:hover {
  transform: scale(1.2);
}


.fs-popup-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  padding: 2rem;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fs-popup-overlay.active {
  display: flex;
  opacity: 1;
}

.fs-popup-content {
  background: #fff;
  padding: 2rem;
  max-width: 700px;
  width: 100%;
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  animation: popupFadeIn 0.4s ease;
}

.fs-popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
}

@keyframes popupFadeIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.fs-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fs-popup-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fs-item .entry-content {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal columns */
  gap: 10px; /* space between items */
  align-items: start; /* or center if you prefer */
}



/* ==================== */
/* 🛠 OVERRIDES           */
/* ==================== */
/* Empty for future custom overrides */


/* Hide admin bar while logged in 
body.admin-bar {
    margin-top: 0 !important;
}
#wpadminbar {
    display: none !important;
}
 */



/* --- Fowler Pipeline Styling --- */

.pipeline-section {
  background: #f9f9f9;
  border-left: 6px solid #7c5cff;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pipeline-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.pipeline-section strong:first-of-type {
  font-size: 1.2rem;
  color: #333;
  display: block;
  margin-bottom: 0.25rem;
}

.pipeline-section em {
  font-style: italic;
  color: #7c5cff;
}

.pipeline-meta {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.pipeline-meta strong {
  color: #444;
  width: 130px;
  display: inline-block;
}

@media (prefers-color-scheme: dark) {
  .pipeline-section {
    background: #1e1e1e;
    border-left-color: #9a7fff;
    color: #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }

  .pipeline-section strong:first-of-type {
    color: #fff;
  }

  .pipeline-meta strong {
    color: #ccc;
  }
}