/*
 * -----------------------------------------------------------------------------
 * Promolatte Mega Menu design overrides
 *
 * This stylesheet refines the default HAP Ultimate Mega Categories styling to
 * align with a modern affiliate magazine aesthetic.  It introduces a warm
 * colour palette, premium typography and subtle shadows to create a clean,
 * high‑converting user interface.  All functional markup and PHP logic remain
 * untouched; only presentational styles are adjusted.
 *
 * Typography: import Poppins and Inter for headings and body text. These
 * fonts will fallback gracefully if Google Fonts cannot be loaded.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* Custom palette overrides */
:root{
  /*
   * Colour palette tuned for the Promolatte magazine‑style design.
   * These variables override the original plugin palette to adopt
   * warm oranges and rich browns paired with light, neutral backgrounds.
   */
  --hap-bg:#f7f5f2;            /* primary page background */
  --hap-bg-2:#ffffff;          /* secondary background (cards/panels) */
  --hap-surface:#ffffff;       /* surfaces such as cards remain white */
  --hap-text:#333333;          /* primary text: dark grey */
  --hap-muted:#666666;         /* secondary text: medium grey */
  --hap-line:#e5e0d8;          /* soft divider lines */
  --hap-brand:#ff8a00;         /* primary accent (orange) */
  --hap-brand-2:#ffa64d;       /* secondary accent for gradients */
  --hap-teal:#2b1a10;          /* complementary dark tone for small accents */
  --hap-pink:#ffb27a;          /* subtle tertiary accent */
  --hap-shadow:0 10px 25px rgba(0,0,0,.08);     /* base shadow */
  --hap-shadow-hover:0 14px 32px rgba(0,0,0,.12); /* elevated hover shadow */
  --hap-radius:16px;           /* card border radius */
  --hap-radius-sm:12px;        /* small radius for compact elements */
  /* container max width increased to 1280px for a spacious mega panel */
  --hap-container:min(1280px, calc(100% - 40px));
}

.hap-container{
  width:100%;
  max-width:var(--hap-container);
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}
.main-header-bar,.main-header-container,.ast-builder-grid-row,.ast-builder-menu,.ast-builder-menu-1,.main-navigation,.main-header-menu,.main-header-menu .sub-menu,.ast-desktop .main-header-menu,.ast-desktop .main-header-menu .sub-menu,.ast-nav-menu,.ast-nav-menu .sub-menu,.site-header-primary-section-left,.site-header-primary-section-right{overflow:visible !important;}
li[data-hap-mega-item="1"],.menu-item.hap-mega-enabled{position:relative;}
li[data-hap-mega-item="1"] > a,.menu-item.hap-mega-enabled > a{display:flex;align-items:center;gap:6px;}

.hap-mega-menu{
  --hap-mega-shift:0px;
  position:absolute;
  left:50%;
  top:100%;
  /*
   * Allow the mega menu to grow with its content while capping the maximum width.
   * Instead of forcing a fixed max container (previously 1320px), we use
   * inline-block so the element’s width naturally expands to fit its contents.
   * The max‑width is clamped to 900px or the viewport minus 40px (to respect
   * site margins), whichever is smaller. This prevents the menu from ever
   * overflowing the main page width on large screens. On narrower viewports
   * the @media rules below will still force the menu to 100% width.
   */
  display:inline-block;
  width:auto;
  max-width:min(900px, calc(100vw - 40px));
  margin-left:auto;
  margin-right:auto;
  background:linear-gradient(180deg,#fff7f3 0%,#fff1ea 100%);
  box-shadow:0 22px 55px rgba(44,25,18,.15);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(calc(-50% + var(--hap-mega-shift))) translateY(8px);
  transition:opacity .22s ease, visibility .22s ease, transform .22s ease;
  z-index:99999;
  border:1px solid rgba(255,109,59,.08);
  border-radius:28px;
}
.menu-item.hap-mega-enabled:hover>.hap-mega-menu,
.menu-item.hap-mega-enabled.hap-open>.hap-mega-menu,
li[data-hap-mega-item="1"]:hover>.hap-mega-menu,
li[data-hap-mega-item="1"].hap-open>.hap-mega-menu,
.menu-item.hap-open>.hap-mega-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(calc(-50% + var(--hap-mega-shift))) translateY(0);
}
.hap-mega-inner{
  /*
   * Remove the hard 1320px max‑width on the inner wrapper so the mega menu
   * can shrink and grow based on its content. The first column uses
   * `max-content` so it only takes up as much horizontal space as the
   * category grid requires. The second column remains a fixed 340px
   * for the featured posts. A generous gap keeps the two areas visually
   * separated.
   */
  max-width:none;
  margin:0 auto;
  padding:28px;
  display:grid;
  grid-template-columns:max-content 340px;
  gap:34px;
}
.hap-mega-head-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid rgba(255,109,59,.18);margin-bottom:18px;}
.hap-mega-head-row span{font-size:15px;font-weight:800;border:2px solid rgba(31,31,36,.42);padding:8px 12px;text-transform:uppercase;border-radius:12px;letter-spacing:.05em;}
.hap-mega-all{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  background:var(--hap-brand);
  color:#ffffff;
  padding:8px 16px;
  border-radius:999px;
  transition:background .25s ease, transform .25s ease;
}
.hap-mega-all:hover{
  background:var(--hap-brand-2);
  color:#ffffff;
  text-decoration:none;
  transform:translateY(-2px);
}
.hap-mega-grid{display:grid;gap:16px 22px;}
.hap-mega-grid.hap-cols-1{grid-template-columns:repeat(1,max-content);}
.hap-mega-grid.hap-cols-2{grid-template-columns:repeat(2,max-content);}
.hap-mega-grid.hap-cols-3{grid-template-columns:repeat(3,max-content);}
.hap-mega-grid.hap-cols-4{grid-template-columns:repeat(4,max-content);} /*
    Using max-content for each column allows the mega menu’s width to scale
    proportionally with the number of columns. Each column only takes as
    much horizontal space as its content requires rather than stretching to
    fill the container. Combined with the inline-block sizing on
    .hap-mega-menu, this produces the adaptive behaviour shown in the
    provided mockups.
*/
.hap-mega-col{display:flex;flex-direction:column;gap:12px;}
.hap-mega-cat{
  /*
   * Render each category as a simple row rather than a pill‑style card. The
   * category name and count sit on a single line and the row height is
   * controlled purely by its content and padding. Removing the background,
   * border and radius produces the clean table‑like look seen in the
   * reference design. A very light hover effect provides subtle
   * interactivity without shifting the layout.
   */
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  margin:0;
  text-decoration:none;
  color:var(--hap-text);
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  transition:background .2s ease;
}

/* Remove the card‑style hover transform and border colour change. Instead
 * lightly tint the background on hover to hint at interactivity. */
.hap-mega-cat:hover{
  background:rgba(0,0,0,0.02);
  transform:none;
  box-shadow:none;
  border-color:transparent;
}
.hap-mega-cat-name{
  display:inline;
  font-size:16px;
  line-height:1.3;
  font-weight:700;
  margin:0;
  color:var(--hap-text);
}

/*
 * Prevent excessively long category names from forcing the mega menu wider
 * than intended. By constraining text to a single line and adding an
 * ellipsis when it overflows, the width of each column remains consistent
 * and the overall menu can stay within its maximum width. Users can still
 * click through to see the full category name on the destination page.
 */
.hap-mega-cat-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hap-mega-cat-count{
  /* Hide the per‑category article counts in the mega menu. The user
   * requested that these counts be removed entirely so they no longer
   * appear next to each category name. */
  display:none;
}
.hap-mega-right,.hap-mega-featured{display:flex;flex-direction:column;gap:16px;}
.hap-mega-right{
  /*
   * Introduce a subtle dividing line between the category list and the
   * featured posts area. A left padding maintains the original spacing after
   * adding the border. The colour uses the existing line variable for
   * consistency with other separators.
   */
  border-left:1px solid var(--hap-line);
  padding-left:34px;
}
.hap-mega-featured-title{margin:0;font-size:18px;line-height:1.2;color:var(--hap-text);}
.hap-mega-featured-empty{padding:18px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(255,109,59,.10);}
.hap-mega-featured-empty p{margin:0;color:var(--hap-muted);}
.hap-mega-post{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit;background:rgba(255,255,255,.72);border:1px solid rgba(255,109,59,.10);border-radius:16px;padding:12px;}
.hap-mega-post:hover{box-shadow:var(--hap-shadow);}
.hap-mega-thumb{width:82px;height:64px;object-fit:cover;flex-shrink:0;background:#f2e6e6;border-radius:12px;}
.hap-mega-thumb.placeholder{background:linear-gradient(135deg,#ffd8c9,#ffeae2);}
.hap-mega-post-title{font-size:15px;font-weight:700;margin:0 0 4px;line-height:1.35;color:var(--hap-text);}
.hap-mega-post-date{font-size:12px;color:var(--hap-muted);}
.hap-mobile-arrow{margin-left:6px;display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid currentColor;transform:rotate(0deg);transition:transform .2s ease;}
.menu-item.hap-open > a .hap-mobile-arrow,li[data-hap-mega-item="1"].hap-open > a .hap-mobile-arrow{transform:rotate(180deg);}

.hap-topics-page,.hap-category-page{background:linear-gradient(180deg,var(--hap-bg) 0%, var(--hap-bg-2) 100%);}
.hap-topics-hero{padding:42px 0 20px;}
.hap-topics-hero-card,.hap-category-hero-inner{position:relative;overflow:hidden;border-radius:32px;background:linear-gradient(135deg,#fff5f0 0%,#ffece5 55%,#fff8f6 100%);border:1px solid rgba(255,109,59,.10);box-shadow:var(--hap-shadow);}
.hap-topics-hero-card{padding:52px 40px 34px;}
.hap-category-page{padding:24px 0 80px;}
.hap-category-hero{margin-bottom:26px;}
.hap-category-hero-inner{padding:54px 46px 38px;}
.hap-topics-hero-card:before,.hap-topics-hero-card:after,.hap-category-hero-inner::before,.hap-category-hero-inner::after{content:"";position:absolute;border-radius:999px;background:rgba(255,109,59,.10);}
.hap-topics-hero-card:before{width:300px;height:120px;right:-60px;top:26px;}
.hap-topics-hero-card:after{width:240px;height:240px;left:-80px;bottom:-110px;}
.hap-category-hero-inner::before{top:-86px;right:-62px;width:250px;height:250px;}
.hap-category-hero-inner::after{bottom:-112px;left:-74px;width:270px;height:270px;}
.hap-topics-kicker,.hap-category-kicker{position:relative;z-index:2;display:inline-block;color:var(--hap-brand);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
.hap-topics-kicker{margin-bottom:12px;}
.hap-category-kicker{margin-bottom:14px;}
.hap-topics-title,.hap-category-title{position:relative;z-index:2;margin:0 0 10px;color:var(--hap-text);font-weight:900;letter-spacing:-.04em;}
.hap-topics-title{font-size:clamp(34px,6vw,68px);line-height:.98;}
.hap-category-title{font-size:clamp(38px,6vw,74px);line-height:.95;}
.hap-topics-desc,.hap-category-desc{position:relative;z-index:2;max-width:760px;font-size:18px;line-height:1.75;color:#534d57;}
.hap-topics-directory{padding:18px 0 70px;}
.hap-topics-search{margin:20px 0 28px;max-width:560px;position:relative;}
.hap-topics-search input[type="text"]{width:100%;min-height:56px;padding:14px 16px;font-size:16px;border:1px solid rgba(255,109,59,.18);border-radius:18px;background:#fff;box-shadow:var(--hap-shadow);}
#hap-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid rgba(255,109,59,.18);border-radius:16px;z-index:10;display:none;max-height:260px;overflow-y:auto;box-shadow:var(--hap-shadow);}
#hap-search-results a{display:block;padding:12px 14px;text-decoration:none;color:var(--hap-text);border-bottom:1px solid #f5e2db;}
#hap-search-results a:last-child{border-bottom:none;}
#hap-search-results a:hover{background:#fff6f2;}
.hap-topics-letters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px;}
.hap-topics-letters a{min-width:42px;height:42px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#fff;color:var(--hap-text);border:1px solid rgba(255,109,59,.12);box-shadow:var(--hap-shadow);font-weight:800;}
.hap-letter-group{margin-bottom:30px;background:#fff;border:1px solid rgba(255,109,59,.10);border-radius:24px;padding:24px;box-shadow:var(--hap-shadow);}
.hap-letter-group h2{margin:0 0 14px;color:var(--hap-text);font-size:28px;}
.hap-letter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;border-top:1px solid #f6e5df;padding-top:18px;}
.hap-letter-grid a{text-decoration:none;color:var(--hap-text);background:#fff8f6;border:1px solid rgba(255,109,59,.10);border-radius:16px;padding:14px 16px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.hap-letter-grid a strong{font-size:12px;color:var(--hap-muted);white-space:nowrap;}
.hap-letter-grid a:hover{color:var(--hap-brand);}
.hap-category-section-label{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#443d48;margin:0 0 18px;}
.hap-category-section-label:before{content:"";width:34px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--hap-teal),var(--hap-brand));}
.hap-subcat-cards{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:20px;margin:0 0 34px;}
.hap-subcat-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid rgba(255,109,59,.10);border-radius:24px;padding:22px 20px;text-decoration:none;color:inherit;box-shadow:var(--hap-shadow);transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;}
.hap-subcat-card:hover{transform:translateY(-4px);box-shadow:var(--hap-shadow-hover);border-color:rgba(255,109,59,.22);}
.hap-subcat-card-badge{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#ffe5da,#fff2ec);color:var(--hap-brand);font-size:22px;}
.hap-subcat-card-title{margin:0;font-size:22px;line-height:1.15;color:var(--hap-text);}
.hap-subcat-card-desc{margin:0;color:var(--hap-muted);font-size:15px;line-height:1.6;}
.hap-subcat-card-meta{margin-top:auto;color:var(--hap-brand);font-weight:800;font-size:14px;}
.hap-post-grid{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));gap:26px;}
.hap-post-card{background:var(--hap-surface);border:1px solid rgba(255,109,59,.10);border-radius:var(--hap-radius);overflow:hidden;box-shadow:var(--hap-shadow);transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;}
.hap-post-card:hover{transform:translateY(-4px);box-shadow:var(--hap-shadow-hover);border-color:rgba(255,109,59,.22);}
.hap-post-grid .hap-post-card.is-featured{grid-column:span 12;display:grid;grid-template-columns:1.15fr .85fr;min-height:470px;}
.hap-post-grid .hap-post-card:not(.is-featured){grid-column:span 6;}
.hap-post-thumb{display:block;text-decoration:none;overflow:hidden;background:#f7eae5;}
.hap-post-card.is-featured .hap-post-thumb{min-height:470px;height:100%;}
.hap-post-card:not(.is-featured) .hap-post-thumb{aspect-ratio:16/10;}
.hap-post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease;}
.hap-post-card:hover .hap-post-thumb img{transform:scale(1.03);}
.hap-post-thumb.placeholder{display:block;width:100%;min-height:240px;background:linear-gradient(135deg,#ffe5da,#fff2ec);}
.hap-post-content{display:flex;flex-direction:column;gap:12px;padding:24px 24px 22px;height:100%;}
.hap-post-card.is-featured .hap-post-content{padding:38px 36px;justify-content:center;}
.hap-post-meta{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#7a7180;}
.hap-post-title{margin:0;font-size:30px;line-height:1.12;letter-spacing:-.02em;color:var(--hap-text);}
.hap-post-title a{text-decoration:none;color:inherit;}
.hap-post-excerpt{margin:0;color:var(--hap-muted);font-size:16px;line-height:1.7;}
.hap-read-more{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:999px;background:linear-gradient(90deg,var(--hap-brand),var(--hap-brand-2));color:#fff;text-decoration:none;font-weight:800;width:max-content;box-shadow:var(--hap-shadow);}
.hap-pagination{margin-top:26px;}
.hap-pagination .nav-links{display:flex;gap:10px;flex-wrap:wrap;}
.hap-pagination .page-numbers,.hap-no-posts{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 16px;border-radius:16px;background:#fff;border:1px solid rgba(255,109,59,.10);box-shadow:var(--hap-shadow);text-decoration:none;color:var(--hap-text);}
.hap-pagination .page-numbers.current{background:linear-gradient(90deg,var(--hap-brand),var(--hap-brand-2));color:#fff;}

@media (max-width:1200px){
  /*
   * On medium screens the mega menu still adapts its width to the size of
   * the category grid. Replace the flexible 1fr track with max-content so
   * the left column shrinks to fit its content and grows up to the
   * available space before capping at the global max-width.
   */
  .hap-mega-inner{grid-template-columns:max-content 300px;}
  .hap-subcat-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:921px){
  .hap-mobile-arrow{display:inline-block;}
  .hap-mega-menu{position:static;width:100%;max-width:none;margin-top:10px;border-radius:22px;transform:none !important;box-shadow:none;display:none;opacity:1;visibility:visible;pointer-events:auto;}
  .menu-item.hap-mega-enabled.hap-open>.hap-mega-menu,li[data-hap-mega-item="1"].hap-open>.hap-mega-menu,.menu-item.hap-open>.hap-mega-menu{display:block;}
  .menu-item.hap-mega-enabled:hover>.hap-mega-menu,li[data-hap-mega-item="1"]:hover>.hap-mega-menu,.menu-item:hover>.hap-mega-menu{display:none;}
  .menu-item.hap-mega-enabled.hap-open:hover>.hap-mega-menu,li[data-hap-mega-item="1"].hap-open:hover>.hap-mega-menu,.menu-item.hap-open:hover>.hap-mega-menu{display:block;}
  .hap-mega-inner{grid-template-columns:1fr;padding:18px;gap:18px;}
  .hap-mega-grid,.hap-mega-grid.hap-cols-2,.hap-mega-grid.hap-cols-3,.hap-mega-grid.hap-cols-4{grid-template-columns:1fr;}
  .hap-subcat-cards,.hap-letter-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hap-post-grid .hap-post-card.is-featured,.hap-post-grid .hap-post-card:not(.is-featured){grid-column:span 12;display:block;min-height:0;}
  .hap-post-card.is-featured .hap-post-thumb{min-height:280px;}
}
@media (min-width:922px){
  .hap-mobile-arrow{display:none;}
  .menu-item > .hap-mega-menu{display:block;}
}
@media (max-width:680px){
  .hap-topics-hero-card,.hap-category-hero-inner{padding:34px 24px 24px;}
  .hap-subcat-cards,.hap-letter-grid{grid-template-columns:1fr;}
  .hap-category-title{font-size:42px;}
  .hap-topics-title{font-size:40px;}
}


.ast-desktop-header-content,.ast-mobile-header-wrap,.ast-above-header-wrap,.site-primary-header-wrap,.ast-primary-sticky-header-active{overflow:visible !important;}
.hap-mega-menu{will-change:transform,opacity;}

/*
 * -----------------------------------------------------------------------------
 * Custom design overrides
 *
 * The following rules override the default plugin styles with a softer colour
 * palette, subtler shadows and a more balanced layout inspired by the site’s
 * homepage design.  Placing overrides at the end of the stylesheet ensures
 * they take precedence without altering core plugin logic.
 * -------------------------------------------------------------------------- */

/* Mega menu panel tweaks */
.hap-mega-menu{
  background:var(--hap-surface) !important;
  box-shadow:var(--hap-shadow) !important;
  border:1px solid var(--hap-line) !important;
  border-radius:var(--hap-radius) !important;
}
.hap-mega-head-row{
  border-bottom:1px solid var(--hap-line);
}
.hap-mega-head-row span{
  /*
   * Transform the topic label into a bold, borderless heading using the
   * primary accent colour. Increase the font size and remove the pill
   * border so it matches the lightweight style of the reference design.
   */
  border:none;
  color:var(--hap-brand);
  font-size:20px;
  font-weight:700;
  padding:0;
  border-radius:0;
  letter-spacing:-.02em;
  text-transform:capitalize;
}
.hap-mega-cat{
  /* Override later colour overrides so our simplified row styling isn’t
   * overridden by the theme section below. Remove background and border
   * entirely to match the reference design.
   */
  background:none;
  border:none;
}
.hap-mega-cat:hover{
  border:none;
  box-shadow:none;
}
.hap-mega-featured-empty{
  background:var(--hap-surface);
  border:1px solid var(--hap-line);
}
.hap-mega-featured-empty p{
  color:var(--hap-muted);
}
.hap-mega-post{
  background:var(--hap-surface);
  border:1px solid var(--hap-line);
}
.hap-mega-post:hover{
  border-color:var(--hap-brand);
  box-shadow:var(--hap-shadow-hover);
}
.hap-mega-post-title{
  color:var(--hap-text);
}
.hap-mega-post-date{
  color:var(--hap-muted);
}
.hap-mega-thumb.placeholder{
  background:var(--hap-bg);
}

/* Hero card and category hero tweaks */
.hap-topics-hero-card,
.hap-category-hero-inner{
  background:var(--hap-surface);
  border:1px solid var(--hap-line);
  box-shadow:var(--hap-shadow);
}
.hap-topics-hero-card:before,
.hap-topics-hero-card:after,
.hap-category-hero-inner::before,
.hap-category-hero-inner::after{
  background:rgba(0,0,0,.03);
}

/* Search box and results styling */
.hap-topics-search input[type="text"]{
  border:1px solid var(--hap-line);
  background:var(--hap-surface);
  box-shadow:var(--hap-shadow);
}
#hap-search-results{
  background:var(--hap-surface);
  border:1px solid var(--hap-line);
  box-shadow:var(--hap-shadow);
}
#hap-search-results a{
  border-bottom:1px solid var(--hap-line);
}
#hap-search-results a:hover{
  background:var(--hap-bg-2);
}

/* Topic letter navigation */
.hap-topics-letters a{
  background:var(--hap-surface);
  border:1px solid var(--hap-line);
  box-shadow:var(--hap-shadow);
}

/* Letter groups and listing */
.hap-letter-group{
  background:var(--hap-surface);
  border:1px solid var(--hap-line);
  box-shadow:var(--hap-shadow);
}
.hap-letter-grid a{
  background:var(--hap-surface);
  border:1px solid var(--hap-line);
}

/* Section labels */
.hap-category-section-label{
  color:var(--hap-text);
}
.hap-category-section-label:before{
  background:linear-gradient(90deg,var(--hap-teal),var(--hap-brand));
}

/* Subtopic card styling */
.hap-subcat-card{
  border:1px solid var(--hap-line);
  box-shadow:var(--hap-shadow);
}
.hap-subcat-card:hover{
  border-color:var(--hap-brand);
  box-shadow:var(--hap-shadow-hover);
}
.hap-subcat-card-badge{
  background:linear-gradient(135deg,#fff7f4,#fffdfc);
  color:var(--hap-brand);
}
.hap-subcat-card-desc{
  color:var(--hap-muted);
}
.hap-subcat-card-meta{
  color:var(--hap-brand);
}

/* Post cards */
.hap-post-card{
  border:1px solid var(--hap-line);
  box-shadow:var(--hap-shadow);
}
.hap-post-card:hover{
  border-color:var(--hap-brand);
  box-shadow:var(--hap-shadow-hover);
}
.hap-post-meta{
  color:var(--hap-muted);
}
.hap-post-title{
  color:var(--hap-text);
}
.hap-post-excerpt{
  color:var(--hap-muted);
}
.hap-post-thumb.placeholder{
  background:var(--hap-bg);
}
.hap-pagination .page-numbers,
.hap-no-posts{
  background:var(--hap-surface);
  border:1px solid var(--hap-line);
  box-shadow:var(--hap-shadow);
  color:var(--hap-text);
}

/* Ensure the entire topics/category pages centre and span the full available width */
main.hap-topics-page,
main.hap-category-page{
  width:100%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* --------------------------------------------------------------------------
 * Typography and spacing enhancements for Promolatte Mega Menu
 *
 * Apply modern sans‑serif fonts and clear hierarchy throughout the plugin UI.
 * Headings use Poppins for a bold, premium look while body text falls back
 * to Inter for readability.  These styles override default theme fonts
 * without impacting other site components.
 * ----------------------------------------------------------------------- */
body.hap-mega-page{
  font-family:'Inter','Open Sans',sans-serif;
  color:var(--hap-text);
}
/* Ensure all elements within plugin pages inherit the base font */
.hap-mega-page *{
  font-family:inherit;
}
/* Headings and key labels use a modern display font */
.hap-mega-head-row span,
.hap-mega-cat-name,
.hap-mega-featured-title,
.hap-mega-post-title,
.hap-subcat-card-title,
.hap-category-section-label,
.hap-topics-title,
.hap-category-title{
  font-family:'Poppins','Montserrat',sans-serif;
  font-weight:700;
}

/* Increase spacing between columns in mega menu grid on desktop */
.hap-mega-grid{
  gap:24px 30px;
}

/* Smooth dropdown animation */
.hap-mega-menu{
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease;
}

/* --------------------------------------------------------------------------
 * Homepage-aligned layout + less-cartoon styling (without touching logic)
 * ----------------------------------------------------------------------- */

/* Match site background (including outside the content container) */
body.hap-mega-page{
  background:var(--hap-bg) !important;
}

/* Astra (and similar) layouts can reserve a blank sidebar area on archives.
   Force full-width content ONLY on plugin pages. */
/*
 * Hide sidebars only within the main site content area.  Some themes reuse
 * the `.widget-area`, `#secondary` and `.sidebar` classes for footer widgets
 * or other structural elements.  Targeting sidebars inside `.site-content`
 * prevents the accidental removal of the footer on sub‑category pages.
 */
/*
 * Remove forced hiding of sidebars and widget areas. The previous rule hid
 * `.widget-area`, `#secondary`, `.sidebar-main` and `.sidebar` within the
 * site content area, which could inadvertently hide footer widgets on
 * certain themes. Rely on the theme or page builder to manage the layout
 * instead of forcibly hiding these elements.
 */
/*
 * Do not force plugin pages to full width.
 *
 * Historically the plugin attempted to remove the theme’s sidebars and
 * containers by forcing the content area to 100% width.  On some themes
 * (including the user’s install) this caused the footer to break out of
 * its normal layout or appear duplicated at the top of the page.  It is
 * safer to let the active theme control the overall width and spacing.
 */

/* body.hap-mega-page .content-area,
body.hap-mega-page .site-content .content-area{
  width:100% !important;
  max-width:100% !important;
}
body.hap-mega-page .site-content .ast-container,
body.hap-mega-page .site-content .container,
body.hap-mega-page .site-content .site-content-inner{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  display:block !important;
} */

/*
 * Ensure the theme’s footer is visible on mega menu pages.  Some themes
 * inadvertently hide the footer when a custom body class is present or
 * when sidebars are hidden.  Explicitly reset the display and visibility
 * properties for common footer selectors.  These rules are kept
 * intentionally broad—matching typical footer hooks used by popular
 * themes—so that the footer remains accessible on all category depths.
 */
/*
 * Make sure the primary footer remains visible on plugin pages.  We avoid
 * resetting *all* classes containing “footer” or “sidebar” because
 * those generic selectors can inadvertently reveal hidden widgets or
 * duplicate layout elements.  Restrict the override to common footer
 * elements such as the `<footer>` tag, the `.site-footer` class and
 * the `#colophon` id.
 */
body.hap-mega-page footer,
body.hap-mega-page .site-footer,
body.hap-mega-page #colophon {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Softer, cleaner page background (remove pink gradients) */
.hap-topics-page,
.hap-category-page{
  background:var(--hap-bg) !important;
}

/* Hero cards: remove decorative blobs and use clean homepage-style surfaces */
.hap-topics-hero-card,
.hap-category-hero-inner{
  border-radius:24px;
  background:var(--hap-surface) !important;
  border:1px solid var(--hap-line) !important;
}
.hap-topics-hero-card:before,
.hap-topics-hero-card:after,
.hap-category-hero-inner::before,
.hap-category-hero-inner::after{
  content:none !important;
  display:none !important;
}

/* Typography tweaks (closer to homepage tone) */
.hap-topics-kicker,
.hap-category-kicker{
  letter-spacing:.10em;
}
.hap-topics-desc,
.hap-category-desc{
  color:var(--hap-muted);
}

/* Subtopic badges: icon, not emoji (more premium look) */
.hap-subcat-card-badge{
  background:linear-gradient(135deg, rgba(45,138,138,.10), rgba(255,126,95,.10));
  border:1px solid var(--hap-line);
  color:var(--hap-teal);
}
.hap-icon-paw{display:block;}

/* ========================================================================== 
   Promolatte Mega Menu v2.4.0 — reference-matched desktop + mobile layout
   ========================================================================== */

/* Keep mega panels above Astra/header/page-builder layers without changing the
   rest of the theme layout. */
li[data-hap-mega-item="1"],
.menu-item.hap-mega-enabled{
  position:relative;
}

li[data-hap-mega-item="1"] > a.hap-mega-trigger,
.menu-item.hap-mega-enabled > a.hap-mega-trigger{
  display:flex;
  align-items:center;
  gap:4px;
}

.hap-mega-menu{
  --hap-mega-shift:0px;
  position:absolute;
  top:100%;
  left:50%;
  width:min(880px, calc(100vw - 36px));
  max-width:none;
  margin:0;
  background:#ffffff !important;
  border:1px solid #ead9c5 !important;
  border-radius:12px !important;
  box-shadow:0 18px 42px rgba(58,38,18,.16) !important;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(calc(-50% + var(--hap-mega-shift))) translateY(8px);
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
  z-index:999999;
}

.menu-item.hap-mega-enabled:hover > .hap-mega-menu,
.menu-item.hap-mega-enabled.hap-open > .hap-mega-menu,
li[data-hap-mega-item="1"]:hover > .hap-mega-menu,
li[data-hap-mega-item="1"].hap-open > .hap-mega-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(calc(-50% + var(--hap-mega-shift))) translateY(0);
}

.hap-mega-shell{
  width:100%;
  background:#fff;
}

/* Desktop title band: white title block + diagonal edge + Promolatte brown. */
.hap-mega-header{
  min-height:72px;
  display:grid;
  grid-template-columns:195px minmax(0,1fr);
  background:#3a250f;
}

.hap-mega-title-wrap{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  padding:0 0 0 34px;
  background:#fff;
}

.hap-mega-title-wrap::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:-62px;
  width:64px;
  height:72px;
  background:#fff;
  clip-path:polygon(0 0, 100% 100%, 0 100%);
}

.hap-mega-title{
  color:#2e2116;
  font-family:'Poppins','Montserrat',sans-serif;
  font-size:24px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.025em;
  text-transform:uppercase;
}

.hap-mega-header-band{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
  padding:0 26px 0 80px;
}

.hap-mega-all{
  text-decoration:none !important;
}

.hap-mega-all-desktop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 22px;
  border-radius:999px;
  background:#ff9300 !important;
  color:#fff !important;
  font-family:'Inter','Open Sans',sans-serif;
  font-size:15px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
  box-shadow:none !important;
  transition:background-color .18s ease, transform .18s ease;
}

.hap-mega-all-desktop:hover,
.hap-mega-all-desktop:focus{
  background:#f18400 !important;
  color:#fff !important;
  transform:translateY(-1px);
}

.hap-mega-content{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:46px;
  padding:28px 42px 38px;
  background:#fff;
}

.hap-mega-left{
  min-width:0;
}

.hap-mega-grid,
.hap-mega-grid.hap-cols-1,
.hap-mega-grid.hap-cols-2,
.hap-mega-grid.hap-cols-3,
.hap-mega-grid.hap-cols-4{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 46px;
  align-items:start;
}

.hap-mega-grid.hap-cols-1{
  grid-template-columns:minmax(0,1fr);
}

.hap-mega-col{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}

.hap-mega-cat{
  display:block;
  width:100%;
  margin:0;
  padding:9px 0;
  color:#414141 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  transform:none !important;
}

.hap-mega-cat:hover,
.hap-mega-cat:focus{
  color:#ff8a00 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.hap-mega-cat-name{
  display:block;
  margin:0;
  color:inherit !important;
  font-family:'Inter','Open Sans',sans-serif;
  font-size:15px;
  line-height:1.35;
  font-weight:650;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.hap-mega-all-mobile{
  display:none;
}

.hap-mega-right{
  display:block;
  min-width:0;
  padding:0 !important;
  border:0 !important;
}

.hap-mega-featured{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.hap-mega-featured-title{
  margin:0 0 5px;
  color:#1f1f1f !important;
  font-family:'Poppins','Montserrat',sans-serif;
  font-size:19px;
  line-height:1.2;
  font-weight:800;
}

.hap-mega-post{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-width:0;
  margin:0;
  padding:0 !important;
  color:#2e2e2e !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}

.hap-mega-post:hover,
.hap-mega-post:focus{
  color:#ff8a00 !important;
  box-shadow:none !important;
}

.hap-mega-thumb{
  display:block;
  width:112px !important;
  height:84px !important;
  object-fit:cover;
  margin:0;
  border-radius:8px !important;
  background:#eee;
}

.hap-mega-thumb.placeholder{
  background:linear-gradient(135deg,#efe4da,#faf5f0);
}

.hap-mega-post-info{
  min-width:0;
}

.hap-mega-post-title{
  margin:0 !important;
  color:inherit !important;
  font-family:'Inter','Open Sans',sans-serif;
  font-size:14px;
  line-height:1.38;
  font-weight:700;
}

.hap-mega-post-date{
  display:none !important;
}

.hap-mobile-arrow{
  display:none;
  flex:0 0 auto;
  width:0;
  height:0;
  margin-left:1px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transform:rotate(0deg);
  transition:transform .18s ease;
}

.menu-item.hap-open > a .hap-mobile-arrow,
li[data-hap-mega-item="1"].hap-open > a .hap-mobile-arrow{
  transform:rotate(180deg);
}

/* Tablet guard: keep the desktop structure but trim spacing. */
@media (min-width:922px) and (max-width:1100px){
  .hap-mega-menu{
    width:min(820px, calc(100vw - 28px));
  }

  .hap-mega-content{
    grid-template-columns:minmax(0,1fr) 280px;
    gap:34px;
    padding:26px 32px 34px;
  }

  .hap-mega-grid,
  .hap-mega-grid.hap-cols-2,
  .hap-mega-grid.hap-cols-3,
  .hap-mega-grid.hap-cols-4{
    gap:0 34px;
  }
}

/* --------------------------------------------------------------------------
   Mobile / Astra off-canvas view — intentionally styled like the supplied
   375px reference: inline expansion, 2 category columns, centered CTA,
   followed by compact featured resources. No card shell or desktop brown band.
   -------------------------------------------------------------------------- */
@media (max-width:921px){
  .hap-mobile-arrow{
    display:inline-block !important;
  }

  /* Use our arrow/toggle behavior for the mega item; suppress Astra's extra
     direct toggle button so the label does not show two arrows. */
  li.hap-mega-enabled > button.ast-menu-toggle,
  li.hap-mega-enabled > button.ast-submenu-toggle,
  li[data-hap-mega-item="1"] > button.ast-menu-toggle,
  li[data-hap-mega-item="1"] > button.ast-submenu-toggle{
    display:none !important;
  }

  .hap-mega-menu{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    transform:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible;
    background:#fff !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:none !important;
    display:none !important;
  }

  .menu-item.hap-mega-enabled.hap-open > .hap-mega-menu,
  li[data-hap-mega-item="1"].hap-open > .hap-mega-menu,
  .menu-item.hap-open > .hap-mega-menu{
    display:block !important;
  }

  /* Override the legacy hover rule: mobile visibility is click-state only. */
  .menu-item.hap-mega-enabled:hover > .hap-mega-menu,
  li[data-hap-mega-item="1"]:hover > .hap-mega-menu{
    display:none !important;
  }

  .menu-item.hap-mega-enabled.hap-open:hover > .hap-mega-menu,
  li[data-hap-mega-item="1"].hap-open:hover > .hap-mega-menu{
    display:block !important;
  }

  .hap-mega-shell{
    width:100%;
    border-top:1px solid #fff0df;
    background:#fff;
    box-shadow:0 -4px 12px rgba(255,147,0,.06);
  }

  .hap-mega-header{
    display:block;
    min-height:0;
    background:#fff;
  }

  .hap-mega-title-wrap{
    display:flex;
    justify-content:center;
    width:100%;
    min-height:0;
    padding:8px 14px 12px;
    background:#fff;
  }

  .hap-mega-title-wrap::after{
    content:none;
    display:none;
  }

  .hap-mega-title{
    color:#292929;
    font-family:'Inter','Open Sans',sans-serif;
    font-size:12px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.01em;
    text-transform:uppercase;
    text-align:center;
  }

  .hap-mega-header-band,
  .hap-mega-all-desktop{
    display:none !important;
  }

  .hap-mega-content{
    display:block;
    width:100%;
    padding:0 14px 14px;
    background:#fff;
  }

  .hap-mega-grid,
  .hap-mega-grid.hap-cols-1,
  .hap-mega-grid.hap-cols-2,
  .hap-mega-grid.hap-cols-3,
  .hap-mega-grid.hap-cols-4{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    align-items:stretch;
  }

  .hap-mega-grid.hap-cols-1{
    grid-template-columns:minmax(0,1fr);
  }

  .hap-mega-col{
    display:flex;
    flex-direction:column;
    gap:0;
    min-width:0;
  }

  .hap-mega-grid.hap-cols-2 .hap-mega-col:first-child{
    border-right:1px solid #292929;
    padding-right:20px;
  }

  .hap-mega-grid.hap-cols-2 .hap-mega-col:last-child{
    padding-left:24px;
  }

  .hap-mega-cat{
    padding:7px 0 !important;
    line-height:1.2;
  }

  .hap-mega-cat-name{
    color:#4a4a4a !important;
    font-size:12.5px;
    line-height:1.32;
    font-weight:650;
    white-space:normal;
  }

  .hap-mega-all-mobile{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:max-content;
    min-width:126px;
    min-height:34px;
    margin:14px auto 10px;
    padding:0 18px;
    border-radius:999px;
    background:#ff9300 !important;
    color:#fff !important;
    font-family:'Inter','Open Sans',sans-serif;
    font-size:11px;
    line-height:1;
    font-weight:700;
    box-shadow:0 2px 5px rgba(64,39,12,.18) !important;
    text-decoration:none !important;
  }

  .hap-mega-right{
    display:block;
    width:100%;
    margin:0;
    padding:0 !important;
    border:0 !important;
  }

  .hap-mega-featured{
    gap:8px;
  }

  .hap-mega-featured-title{
    margin:0 0 1px;
    color:#1f1f1f !important;
    font-family:'Inter','Open Sans',sans-serif;
    font-size:12.5px;
    line-height:1.25;
    font-weight:800;
  }

  .hap-mega-post{
    display:grid;
    grid-template-columns:86px minmax(0,1fr);
    gap:10px;
    align-items:center;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .hap-mega-thumb{
    width:86px !important;
    height:64px !important;
    border-radius:2px !important;
    object-fit:cover;
  }

  .hap-mega-post-title{
    margin:0 !important;
    color:#333 !important;
    font-family:'Inter','Open Sans',sans-serif;
    font-size:10.5px;
    line-height:1.35;
    font-weight:700;
  }

  /* Keep the top-level trigger centered in Astra's off-canvas list and make
     the whole label feel like a disclosure control. */
  .ast-mobile-popup-content li.hap-mega-enabled > a.hap-mega-trigger,
  .ast-mobile-header-content li.hap-mega-enabled > a.hap-mega-trigger,
  .ast-header-break-point li.hap-mega-enabled > a.hap-mega-trigger{
    justify-content:center !important;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
}