/*
Theme Name: Yokel Local
Theme URI: https://www.yokellocal.com
Version: 1.0.1
Description: Global Stylesheet
Author: Yokel Local
Author URI: https://www.yokellocal.com
*/

/* =Global
-------------------------------------------------------------- */
body                            { font-family:Arial; margin:0 0; }
a                               { transition:all 300ms ease 0ms; }
a, a:hover                      { text-decoration:none; }
img                             { max-width:100%; }
h1                              { font:normal normal 400 37px/48px HKGrotesk-Regular !important; }
h2                              { font:normal normal 400 31px/41px HKGrotesk-Regular !important; }
h3                              { font:normal normal 400 27px/38px HKGrotesk-Regular !important; }
p                               { font:normal normal 400 17px/27px HKGrotesk-Regular !important; }

/* =Fonts
-------------------------------------------------------------- */
@font-face { font-family: 'HKGrotesk-LightItalic'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-LightItalic.otf'); }
@font-face { font-family: 'HKGrotesk-SemiBoldLegacy'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-SemiBoldLegacy.otf'); }
@font-face { font-family: 'HKGrotesk-MediumItalic'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-MediumItalic.otf'); }
@font-face { font-family: 'HKGrotesk-Regular'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-Regular.otf'); }
@font-face { font-family: 'HKGrotesk-Italic'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-Italic.otf'); }
@font-face { font-family: 'HKGrotesk-SemiBoldItalic'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-SemiBoldItalic.otf'); }
@font-face { font-family: 'HKGrotesk-Black'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-Black.otf'); }
@font-face { font-family: 'HKGrotesk-BoldItalic'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-BoldItalic.otf'); }
@font-face { font-family: 'HKGrotesk-Medium'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-Medium.otf'); }
@font-face { font-family: 'HKGrotesk-Bold'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-Bold.otf'); }
@font-face { font-family: 'HKGrotesk-SemiBold'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-SemiBold.otf'); }
@font-face { font-family: 'HKGrotesk-ExtraBold'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-ExtraBold.otf'); }
@font-face { font-family: 'HKGrotesk-Light'; src: url('https://7197110.fs1.hubspotusercontent-na1.net/hubfs/7197110/Fonts/HKGrotesk/HKGrotesk-Light.otf'); }

/* =Header
-------------------------------------------------------------- */
a#cta_button_7197110_63cd36d2-7aa3-4384-b716-8c7dc4532638 { color:#ffffff; background-color:#005b88; font-size:1.0625rem; font-weight:600; border-radius:.375rem; font-family:HKGrotesk-SemiBold,serif; padding:13px 20px; }
a#cta_button_7197110_63cd36d2-7aa3-4384-b716-8c7dc4532638:hover { box-shadow:0 1rem 2.5rem rgba(22,28,45,.1),0 .5rem 1rem -.75rem rgba(22,28,45,.1)!important; transform:translate3d(0,-3px,0); background-color:#004162; }

/* =Menu
-------------------------------------------------------------- */
.custom-menu-primary .hs-menu-wrapper>ul { margin-top:10px !important; }
.custom-menu-primary .hs-menu-wrapper>ul>li { min-width: 90px; text-align: center; }
.custom-menu-primary .hs-menu-wrapper>ul>li>a { color:#005B88; font-size:17px; text-transform:capitalize; }
.section-subscribe { background-color:#1b2a4e!important; color:#ffffff; width:100% !important; max-width:100% !important; }

/* =Content
-------------------------------------------------------------- */
.blog-section .section.post-body { max-width: 800px; margin: 0px auto; }

@media (max-width: 767px) {
  
}

/* =Comments
-------------------------------------------------------------- */


/* =Widget Areas
-------------------------------------------------------------- */


/* =Footer
-------------------------------------------------------------- */


@media (max-width: 767px) {
  
}
/* BLOG LISTING STYLING PATCH — DRAFT, NOT INSTALLED OR PORTAL-TESTED.
   Save originals and test in a copied template first.

   1. In Edit listing template, change the FIRST line from:
      <div class="blog-section">
      to:
      <div class="blog-section ise-listing-refresh">

   2. In that template, replace:
      truncate(80, breakword=False, end='...')
      with:
      truncate(180, false, '...')
      This sets a maximum character length without splitting the final word;
      it does not make every summary exactly the same length.

   3. Append the CSS below to a COPY of Blog.css, and attach that copy
      INSTEAD OF the original Blog.css on your copied template.
      Keep the other existing stylesheet attachments in place.
      Do not paste raw CSS into the HTML listing editor.

   4. Preview normal listing, author/tag listings, /all, and mobile before
      applying the copied template to the live blog.

   Scope: listing titles, card grid, image boxes, excerpts, local spacing.
   NOT included: global header, post typography, page-editor design controls.
   Existing stylesheets have not been reviewed: check preview for conflicts.
*/

.blog-section.ise-listing-refresh {
  /* Code-level settings only: these are NOT page-editor design controls. */
  --ise-title-size: 24px;
  --ise-title-line-height: 1.25;
  --ise-card-gap: 28px;
  --ise-card-padding: 16px;
  --ise-listing-padding: 16px;
  --ise-thumbnail-ratio: 16 / 9;
  --ise-thumbnail-fit: contain; /* Preserves text within existing graphics. */
  font-family: inherit;
  padding-top: var(--ise-listing-padding);
  padding-bottom: var(--ise-listing-padding);
}

.ise-listing-refresh,
.ise-listing-refresh * { box-sizing: border-box; }

.ise-listing-refresh .post-listing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ise-card-gap);
  width: 100%;
}

/* Prevent theme clearfix pseudo-elements becoming grid cells. */
.ise-listing-refresh .post-listing::before,
.ise-listing-refresh .post-listing::after { display: none; }

/* Keep author information above the article cards. */
.ise-listing-refresh .post-listing > .hs-author-profile,
.ise-listing-refresh .post-listing > .hs-author-listing-header {
  grid-column: 1 / -1;
}
.ise-listing-refresh .post-listing > br { display: none; }

/* !important is limited to properties currently hard-coded inline. */
.ise-listing-refresh .post-listing > .post-item {
  float: none !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ise-listing-refresh .hs-featured-image-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}
.ise-listing-refresh .hs-featured-image-link {
  display: block;
  width: 100%;
  aspect-ratio: var(--ise-thumbnail-ratio);
  overflow: hidden;
  background: #f4f5f6;
}
.ise-listing-refresh img.hs-featured-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  object-fit: var(--ise-thumbnail-fit);
}

/* Target the existing inline-padded card text wrapper. */
.ise-listing-refresh .post-listing > .post-item > div:not(.hs-featured-image-wrapper) {
  padding: var(--ise-card-padding) !important;
}

/* Override the original stylesheet's global h2 font shorthand !important.
   Preserve the existing heading family; change only size, leading and weight. */
.ise-listing-refresh .post-header h2 {
  font-size: var(--ise-title-size) !important;
  line-height: var(--ise-title-line-height) !important;
  font-weight: 600 !important;
  margin: 0 0 12px;
  padding: 0;
  overflow-wrap: anywhere;
}
.ise-listing-refresh .post-header h2 a {
  font: inherit;
  color: inherit;
  text-decoration: none;
}
.ise-listing-refresh .post-header h2 a:hover { text-decoration: underline; }
.ise-listing-refresh .post-body {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.ise-listing-refresh .topic-link,
.ise-listing-refresh .more-link {
  font-size: 14px;
  line-height: 1.5;
}
.ise-listing-refresh .blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

/* Preserve the all-posts link-list view without applying card grid rules. */
.ise-listing-refresh .post-listing-simple > .post-item {
  float: none !important;
  max-width: none !important;
  min-height: 0 !important;
  width: 100%;
  margin: 0 0 16px !important;
}

@media (max-width: 1023px) {
  .ise-listing-refresh .post-listing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  .ise-listing-refresh .post-listing {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-section.ise-listing-refresh {
    --ise-title-size: 22px;
    --ise-card-gap: 24px;
  }
}

/* Compact header: scoped to the local blog header only */
.ise-blog-header .global-header.page-center {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Smaller logo without stretching or cropping */
.ise-blog-header .logo img {
  width: 160px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Show the existing CTA only in the local blog header on mobile */
@media (max-width: 768px) {
  .ise-blog-header .row-fluid [class*="span"].header-cta {
    display: block !important;
    float: none !important;
    clear: both;
    width: 100% !important;
    margin: 16px 0 0 !important;
    text-align: center;
  }
}

.ise-listing-refresh .ise-blog-intro {
  margin: 0 0 28px;
  padding: 0;
  max-width: 760px;
}

.ise-listing-refresh .ise-blog-intro h1 {
  font-size: 36px !important;
  line-height: 1.2 !important;
  margin: 0 0 12px;
}

.ise-listing-refresh .ise-blog-intro p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 639px) {
  .ise-listing-refresh .ise-blog-intro h1 {
    font-size: 28px !important;
  }
}

/* Separate the introduction from the cards on mobile */
@media (max-width: 639px) {
  .ise-listing-refresh .ise-blog-intro {
    margin-bottom: 0 !important;
    padding-bottom: 32px !important;
  }
}
/* Separate topic tags from the article link */
.ise-listing-refresh .post-item .topic-link {
  display: inline-block;
  margin-right: 8px;
}

.ise-listing-refresh .post-item .more-link {
  display: block;
  margin-top: 12px;
}

/* Topic navigation beneath the blog introduction */
.ise-listing-refresh .ise-topic-nav {
  margin: 0 0 32px;
}

.ise-listing-refresh .ise-topic-nav-label {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
}


.ise-listing-refresh .ise-topic-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ise-listing-refresh .ise-topic-nav li {
  margin: 0;
  padding: 0;
}

.ise-listing-refresh .ise-topic-nav a {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: 4px;
  text-decoration: none;
  line-height: 1.4;
}

.ise-listing-refresh .ise-topic-nav a:hover {
  text-decoration: underline;
}

.ise-listing-refresh .ise-topic-nav a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ise-listing-refresh .ise-topic-nav li {
  margin: 0;
  padding: 0;
}

.ise-listing-refresh .ise-topic-nav a {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: 4px;
  text-decoration: none;
  line-height: 1.4;
}

.ise-listing-refresh .ise-topic-nav a:hover {
  text-decoration: underline;
}

.ise-listing-refresh .ise-topic-nav a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}