/*
 Theme Name: Moosicology Child
 Template: my-music-band
 Version: 1.0.1
 Description: Child theme for My Music Ba/*
 Theme Name: Moosicology Child
 Template: my-music-band
 Version: 1.0.1
 Description: Child theme for My Music Band
 Author: Moosicology
 Text Domain: moosicology-child
*/

/* =========================================================
   MOOSICOLOGY — FULL CSS OVERRIDES (v3)
   ========================================================= */

/* 0) Brand palette */
:root{
  --moos-purple: #6a1b9a;
  --moos-purple-hover: #55157b;
  --moos-charcoal: #333333;
  --moos-charcoal-dk: #111111;
  --moos-white: #ffffff;
}

/* Header-center image sizing — safe defaults */
:root{
  --hc-h-desktop: 70px;
  --hc-h-tablet:  60px;
  --hc-h-mobile:  48px;
  --hc-max-w: clamp(160px, 28vw, 420px);
}

.header-center-area{
  order:2 !important;
  flex: 1 1 auto !important;
  text-align:center !important;
  overflow:hidden;
}

.header-center-area img{
  max-height: var(--hc-h-desktop);
  max-width: var(--hc-max-w);
  width: auto;
  height: auto;
  vertical-align: middle;
  object-fit: contain;
}

@media (max-width:1024px){
  .header-center-area img{ max-height: var(--hc-h-tablet); }
}
@media (max-width:767px){
  .header-center-area img{
    max-height: var(--hc-h-mobile);
    max-width: clamp(140px, 42vw, 320px);
  }
}

/* Ensure header row doesn’t wrap */
.site-header .site-header-main .wrapper{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }

/* 1) LOGO SIZING — unified (paste this whole block) */
.site-header .site-branding .custom-logo,
.site-header .site-branding .custom-logo-link img{
  height: auto !important;          /* keep aspect ratio */
  width: auto !important;
  max-width: none !important;        /* don't clamp width */
}

/* Desktop (≥1025px): SCALE visually so the header height/menu layout don't change */
@media (min-width: 1025px){
  .site-header .site-branding .custom-logo,
  .site-header .site-branding .custom-logo-link img{
    max-height: 400px !important;    /* base size that keeps header tidy */
    transform: scale(1.18) translateY(var(--logo-overhang, -20px));  /* combine both */
    transform-origin: left center;    /* grow rightwards, not down over the nav */
  }
  .site-header .site-branding{ overflow: visible; } /* allow safe overhang if needed */
}

/* Tablet & small laptops (≤1024px) */
@media (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse){
  .site-header .site-branding .custom-logo,
  .site-header .site-branding .custom-logo-link img{
    max-height: 200px !important;
    height: auto !important;
    width: auto !important;
    transform: translateY(var(--logo-overhang, -20px)) !important;
  }
}

/* Phones (≤767px) */
@media (max-width: 767px){
  .site-header .site-branding .custom-logo,
  .site-header .site-branding .custom-logo-link img{
   max-height: 150px !important;
    transform: translateY(var(--logo-overhang, -30px)) !important;  /* was: none */
  }
}



/* 2) MAIN MENU (single source of truth) */
.main-navigation a{
  color: var(--moos-charcoal) !important;
  background: transparent !important; border: none !important;
  text-decoration: none;
}
.main-navigation a:hover,
.main-navigation a:focus{
  color: var(--moos-purple) !important;
  background: transparent !important;
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a{
  color: var(--moos-purple) !important;
  background: transparent !important;
  font-weight: 600;
}

/* 3) DROPDOWNS */
.main-navigation ul ul{
  background:#fff !important; border:1px solid #e5e5e5 !important; min-width:220px;
}
.main-navigation ul ul a{
  color: var(--moos-charcoal) !important; background: transparent !important;
  display:block; padding: .6rem .9rem;
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus{
  color: var(--moos-purple) !important; background:#f6f6f8 !important;
}

/* 4) MOBILE MENU (hamburger) */
.menu-toggle{
  background:#fff !important; border:1px solid var(--moos-purple) !important;
  color: var(--moos-purple) !important;
}
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle[aria-expanded="true"]{
  background: var(--moos-purple) !important; border-color: var(--moos-purple) !important; color: var(--moos-white) !important;
}
.menu-toggle svg, .menu-toggle i, .menu-toggle::before, .menu-toggle::after{
  fill: currentColor !important; color: currentColor !important;
}
.main-navigation.toggled ul{ background:#fff !important; }
.main-navigation.toggled ul li a{ color: var(--moos-charcoal) !important; background: transparent !important; }
.main-navigation.toggled ul li a:hover,
.main-navigation.toggled ul li a:focus{ color: var(--moos-purple) !important; }

/* 5) HEADER CTA (“Find Out More”) — purple, smaller */
.custom-header .more-link,
.header-media .more-link,
.more-link{
  display:inline-block !important;
  font-size: 0.85rem !important;
  padding: 0.35em 0.75em !important;
  line-height: 1.1 !important;
  border-radius: 3px !important;

  background-color: var(--moos-purple) !important;
  border:1px solid var(--moos-purple) !important;
  color: var(--moos-white) !important;
  background-image:none !important;
  box-shadow:none !important;
}
.custom-header .more-link:hover,
.header-media .more-link:hover,
.more-link:hover{
  background-color: var(--moos-purple-hover) !important;
  border-color: var(--moos-purple-hover) !important;
  color: var(--moos-white) !important;
}
.custom-header .more-link::before,
.custom-header .more-link::after,
.header-media .more-link::before,
.header-media .more-link::after,
.more-link::before,
.more-link::after{ content:none !important; display:none !important; }

/* Force removal of any inner gold layer that some builds inject */
.custom-header .more-link *, .header-media .more-link *, .more-link *{
  background: transparent !important; background-image:none !important; box-shadow:none !important; border:none !important;
}

/* 6) BACK-TO-TOP */
#scrollup, .scrollup, .back-to-top, a.back-to-top, #gotop, a#gotop{
  background-color: var(--moos-charcoal) !important; border-color: var(--moos-charcoal) !important;
  color: var(--moos-white) !important; background-image:none !important;
}
#scrollup:hover, .scrollup:hover, .back-to-top:hover, a.back-to-top:hover, #gotop:hover, a#gotop:hover{
  background-color: var(--moos-charcoal-dk) !important; border-color: var(--moos-charcoal-dk) !important; color: var(--moos-white) !important;
}
#scrollup svg, .scrollup svg, .back-to-top svg, #scrollup i, .scrollup i, .back-to-top i{
  fill: var(--moos-white) !important; color: var(--moos-white) !important;
}

/* 7) WOO BUTTONS (purple, smaller) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.woocommerce .added_to_cart{
  background-color: var(--moos-purple) !important;
  border: 1px solid var(--moos-purple) !important;
  color: var(--moos-white) !important;
  text-transform: none !important;
  background-image: none !important;
  box-shadow: none !important;

  font-size: 0.85rem !important;
  padding: 0.4em 0.8em !important;
  line-height: 1.1 !important;
  border-radius: 3px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover,
.woocommerce .added_to_cart:hover{
  background-color: var(--moos-purple-hover) !important;
  border-color: var(--moos-purple-hover) !important;
  color: var(--moos-white) !important;
}

/* 8) DECORATIVE GOLD LINES -> charcoal */
.section-title span:after,
.section-title:after,
.page-title:after,
.entry-title:after,
h1:after, h2:after, h3:after,
h1 span:after, h2 span:after, h3 span:after,
.section-heading:after,
.widget-title:after,
.section-subtitle:before,
.section-subtitle:after,
.title-separator,
.heading-underline,
.separator,
hr, .wp-block-separator, .wp-block-separator.is-style-wide, .wp-block-separator.is-style-dots {
  background-color: var(--moos-charcoal) !important;
  border-color: var(--moos-charcoal) !important;
  color: var(--moos-charcoal) !important;
}

/* 9) HIDE COMMENTS ON PAGES */
.page .comments-area,
.page .comment-respond,
.page #respond,
.page .comments-title { display: none !important; }

/* 10) CONTACT FORM SUBMIT — purple */
.entry-content form input[type="submit"],
.entry-content form button[type="submit"],
form input[type="submit"],
form button[type="submit"],
.wpcf7 .wpcf7-submit,
.wpforms-submit,
.nf-form-cont .nf-form .nf-element.button,
.gform_wrapper .gform_button {
  background-color: var(--moos-purple) !important;
  border: 1px solid var(--moos-purple) !important;
  color: var(--moos-white) !important;
  text-transform: none !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 0.95rem !important;
  padding: 0.45em 0.9em !important;
  border-radius: 3px !important;
}
.entry-content form input[type="submit"]:hover,
.entry-content form button[type="submit"]:hover,
form input[type="submit"]:hover,
form button[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover,
.wpforms-submit:hover,
.nf-form-cont .nf-form .nf-element.button:hover,
.gform_wrapper .gform_button:hover {
  background-color: var(--moos-purple-hover) !important;
  border-color: var(--moos-purple-hover) !important;
  color: var(--moos-white) !important;
}

/* 11) FOOTER CREDIT (hide) */
.site-footer .site-info a[href*="catchthemes"],
.site-footer .site-info .bycatch,
.site-footer .site-info .theme-credit,
.site-footer .site-info .site-generator,
.site-footer .site-info .theme-info,
.site-info .copyright a[href*="catchthemes"] {
  display:none !important;
}
.site-footer .site-info{ visibility:visible !important; }

/* Footer: off-white background + tidy colours */
.site-footer,
#colophon {
  background-color: #f9f9fb !important;
  color: #333333 !important;
}

.site-footer .site-info { 
  border-top: 1px solid #e9e9ee !important;
  padding-top: 12px !important;
}

/* Footer links (text) */
.site-footer a { color: #333333 !important; text-decoration: none; }
.site-footer a:hover { color: #6a1b9a !important; }

/* Footer text links row */
.site-footer .widget_nav_menu .menu,
.site-footer .wp-block-navigation__container{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; list-style:none; margin:0; padding:0;
}
.site-footer .widget_nav_menu .menu a,
.site-footer .wp-block-navigation a{
  color:#333333 !important;
}
.site-footer .widget_nav_menu .menu a:hover,
.site-footer .wp-block-navigation a:hover{
  color:#6a1b9a !important;
}

/* Make the custom footer bar full-width and at the bottom */
.site-footer .footer-legal{
  display:block;
  clear: both !important;
  width: 100% !important;
  text-align:center;
  font-size:.95rem;
  padding:12px 0;
  border-top:1px solid #e9e9ee;
  color:#333;
}

/* Link colours */
.site-footer .footer-legal a{
  color:#333 !important;
  text-decoration:none;
}
.site-footer .footer-legal a:hover{
  color:#6a1b9a !important;
}

/* Neutralise any injected separators */
.site-footer .footer-legal a + a::before{ content:none !important; }

/* Hide the theme’s built-in bottom line */
.site-footer .site-info{ display:none !important; }

/* Style the injected footer bar */
#mcl-footerbar { text-align: center; padding: 1rem 0; }
#mcl-footerbar a { color: var(--nav-text, #333); text-decoration: none; }
#mcl-footerbar a:hover { text-decoration: underline; }

/* Orientation swap helpers */
.show-portrait { display: block !important; }
.show-landscape { display: none !important; }
@media (orientation: landscape) {
  .show-portrait { display: none !important; }
  .show-landscape { display: block !important; }
}
@media (min-aspect-ratio: 11/10) {
  .show-portrait { display: none !important; }
  .show-landscape { display: block !important; }
}

/* Hide default page titles sitewide (pages + static front page) */
body.page .entry-header,
body.page .page-header,
body.home .entry-header,
body.home .page-header,
body.front-page .entry-header,
body.front-page .page-header,
body.page h1.entry-title,
body.home h1.entry-title,
body.front-page h1.entry-title {
  display: none !important;
}



/* ===== Header alignment: put MENU on the right, logo on the left ===== */
.site-header .wrapper,
.site-header .container,
.site-header .site-header-main {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Keep logo left */
.site-header .site-branding {
  order: 1 !important;
  margin: 0 !important;
}

/* Navigation area takes remaining space */
.site-header .main-navigation {
  order: 3 !important;
  margin-left: auto !important;
}

/* Hamburger button on the right (tablet/mobile) */
.menu-toggle {
  order: 3 !important;
  margin-left: auto !important;
}

@media (max-width: 1024px){
  .site-header .main-navigation { margin-left: 0 !important; }
  .menu-toggle { margin-left: auto !important; }
}

/* Mobile dropdown panel full width, left aligned */
.main-navigation.toggled ul {
  right: auto !important;
  left: 0 !important;
  text-align: left !important;
  width: 100% !important;
}

/* === HEADER: logo LEFT, nav/MENU RIGHT (extra safety) === */
.site-header .site-header-main,
.site-header .wrapper,
.site-header .container{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
}
.site-header .site-branding{
  order:1 !important;
  margin:0 !important;
  flex:0 0 auto !important;
}
.site-header .site-branding + *{
  order:3 !important;
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:1 1 auto !important;
}
.site-header .main-navigation,
.site-header .menu-toggle{
  order:3 !important;
  flex:0 0 auto !important;
}
@media (max-width:1024px){
  .site-header .menu-toggle{ margin-left:auto !important; }
  .site-header .main-navigation{ margin-left:0 !important; }
}

/* === Footer social: real logos (robust) === */
/* Catch all the footer wrappers/menus */
#footer-social-navigation .social-navigation a,
.site-footer .social-navigation a,
.site-footer .menu-social a,
.site-footer .social-links-menu a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  margin: 0 6px !important;
  background: transparent !important;  /* was white, now transparent */
  border: none !important;             /* no border */
  text-decoration: none !important;
  overflow: hidden !important;
}

/* Wipe parent icon font; show our logos */
#footer-social-navigation .social-navigation a::before,
.site-footer .social-navigation a::before,
.site-footer .menu-social a::before,
.site-footer .social-links-menu a::before {
  content: "" !important;
  display: block !important;
  width: 75% !important;   /* was 60%, bumped so logos fill better */
  height: 75% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

/* X / Twitter — File URL */
#footer-social-navigation .social-navigation a[href*="x.com"]::before,
#footer-social-navigation .social-navigation a[href*="twitter.com"]::before,
.site-footer a[href*="x.com"]::before,
.site-footer a[href*="twitter.com"]::before,
.site-footer .social-links-menu a[href*="x.com"]::before,
.site-footer .social-links-menu a[href*="twitter.com"]::before {
  background-image: url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/Unknown-1.png") !important;
}

/* Facebook */
.site-footer a[href*="facebook.com"]::before,
.site-footer .social-links-menu a[href*="facebook.com"]::before {
  background-image: url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/facebook.png") !important;
}

/* Instagram */
.site-footer a[href*="instagram.com"]::before,
.site-footer .social-links-menu a[href*="instagram.com"]::before {
  background-image: url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/icons8-instagram-48.png") !important;
}

/* YouTube */
.site-footer a[href*="youtube.com"]::before,
.site-footer .social-links-menu a[href*="youtube.com"]::before {
  background-image: url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/Youtube.png") !important;
}

/* Hover polish */
#footer-social-navigation .social-navigation a:hover,
.site-footer .social-navigation a:hover,
.site-footer .menu-social a:hover,
.site-footer .social-links-menu a:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* ==============================
   HOME ONLY — center footer rows
   ============================== */
.home #colophon, .home .site-footer { text-align: center !important; }
.home .site-footer .widget-area,
.home .site-footer .footer-widgets,
.home .site-footer .footer-widgets .wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  text-align: center !important;
}
.home .site-footer .widget,
.home .site-footer .widget_text,
.home .site-footer .widget_nav_menu,
.home .site-footer .widget_block {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.home .site-footer .widget_nav_menu .menu,
.home .site-footer .wp-block-navigation__container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}
.home .site-footer .widget_nav_menu .menu li {
  float: none !important;
  display: inline-block !important;
}
.home .site-footer .menu-social,
.home .site-footer .social-navigation {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.home .site-footer .menu-social li,
.home .site-footer .social-navigation li {
  float: none !important;
  display: inline-block !important;
}
.home .site-footer .footer-legal,
.home .site-footer .footer-legal > p,
.home .site-footer .site-info,
.home .site-footer .site-info > p,
.home .site-footer .widget_text p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}


/* === FOOTER: align baseline + make one line on landscape/desktop === */

/* 1) Every item sits on the same baseline */
.site-footer .widget_nav_menu .menu,
.site-footer .wp-block-navigation__container{
  align-items: center !important;   /* center within the row */
  align-content: center !important;
  gap: 10px 12px !important;        /* a touch tighter */
}
.site-footer .widget_nav_menu .menu li{
  display: inline-flex !important;
  align-items: center !important;   /* fixes the "Cookie Policy UK" drop */
}
.site-footer .widget_nav_menu .menu li a{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;   /* keep each label on one line */
  padding: 0 !important; margin: 0 !important;
}

/* 2) On landscape & desktop, keep all links on ONE row */
@media (orientation: landscape) and (min-width: 640px){
  .site-footer .widget_nav_menu .menu,
  .site-footer .wp-block-navigation__container{
    flex-wrap: nowrap !important;   /* force a single row */
    gap: 12px !important;
    justify-content: center !important;
  }
  /* Tiny shrink to help everything fit in one row */
  .site-footer .widget_nav_menu .menu li a{
    font-size: 0.95rem !important;
  }
}

/* 3) Trim extra space above the copyright */
#mcl-footerbar{ margin-top: 6px !important; }
.site-footer .menu-social,
.site-footer .social-navigation{ margin-bottom: 6px !important; }

/* === FOOTER MENU: lock to one row in landscape + perfect baseline === */

/* 1) Universal baseline fix (kills the "Cookies Policy" drop on all sizes) */
.site-footer .widget_nav_menu .menu,
.site-footer .widget_nav_menu .menu *{
  line-height: 1.2 !important;
}
.site-footer .widget_nav_menu .menu li{
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}
.site-footer .widget_nav_menu .menu li > a{
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;     /* single-line labels */
  padding: 0 !important;
  margin: 0 !important;
}

/* If any theme pseudo-icon is causing misalignment, neutralise it */
.site-footer .widget_nav_menu .menu li > a::before,
.site-footer .widget_nav_menu .menu li > a::after{
  content: none !important;
}

/* 2) Landscape/desktop: keep ALL items on ONE row (if there’s room) */
@media (orientation: landscape){
  .site-footer .widget_nav_menu .menu{
    display: flex !important;
    flex-wrap: nowrap !important;       /* force single row */
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .site-footer .widget_nav_menu .menu > li{
    margin: 0 !important;               /* spacing handled by gap */
  }
}

/* 3) Emergency fit if your phone is tight in landscape — uncomment if it still wraps */
/*
@media (orientation: landscape){
  .site-footer .widget_nav_menu .menu li > a{ font-size: 0.95rem !important; }
  .site-footer .widget_nav_menu .menu{ gap: 10px !important; }
}
*/

/* FOOTER: fix slight vertical drop of "Cookies Policy" – PORTRAIT ONLY */
@media (max-width: 767px) and (orientation: portrait){
  /* Make each footer link render on the same baseline */
  .site-footer .menu a,
  .site-footer .wp-block-navigation__container a{
    display: inline-flex !important;
    align-items: center !important;  /* vertically center text */
    line-height: 1.25 !important;    /* normalize line-height */
    padding: 0 !important;           /* kill odd paddings that shift baseline */
    vertical-align: middle !important;
    font-size: 1rem !important;      /* normalize font size just in case */
  }

  /* Ensure list items themselves don’t nudge baselines */
  .site-footer .menu li,
  .site-footer .wp-block-navigation__container li{
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
}

/* PAGE TITLES: purple bar */
.page .page-header,
.archive .page-header,
.singular .entry-header,
.woocommerce-products-header{
  background: var(--moos-purple) !important;
  border:0 !important;
  padding: 1.2rem 0 !important;
}

.page .page-header .page-title,
.singular .entry-header .entry-title,
.woocommerce-products-header .page-title{
  color: #fff !important;
}

/* =========================
   DESKTOP NAV INTERACTION
   ========================= */
@media (min-width:1280px){

  /* Keep submenus visible when the parent <li> has focus (theme uses .focus) */
  .main-navigation li.focus > ul{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block !important;
  }

  /* Remove any desktop focus box on the parent link (no outlines) */
  .main-navigation li.focus > a{
    outline: none !important;
    outline-offset: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  /* Stay-open behavior and hover/focus-within support */
  .main-navigation li.menu-item-has-children:hover > ul,
  .main-navigation li.menu-item-has-children:focus-within > ul {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .main-navigation li.menu-item-has-children > ul:hover {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* Baseline hide/show logic */
  .main-navigation li > ul { display:none; }
  .main-navigation li:hover > ul,
  .main-navigation li:focus-within > ul,
  .main-navigation li > ul:hover {
    display:block !important;
  }

  /* Remove tiny gaps that make the pointer “fall out” */
  .main-navigation li { position:relative; }
  .main-navigation ul ul {
    position:absolute;
    top:100% !important;
    margin-top:0 !important;
  }

  .main-navigation a { line-height: 1.2; }
}

/* No focus boxes anywhere in header nav (keyboard + mouse, cross-browser) */
.site-header .main-navigation a:focus,
.site-header .main-navigation a:focus-visible,
.site-header .main-navigation li:focus-within > a{
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* === Keep scroll-to-top arrow clear of cookie/recaptcha === */
html body #scrollup,
html body .scrollup,
html body .back-to-top,
html body a.back-to-top,
html body #gotop,
html body a#gotop{
  bottom: 88px !important;   /* lift it one line */
  right: 16px !important;
  z-index: 1001 !important;
}

/* ======================================
   WOO + BLOG — DEFAULT COLOURS → THEME PALETTE
   ====================================== */

/* WooCommerce Prices */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce table.shop_table td .amount,
.woocommerce table.shop_table tfoot .amount,
.woocommerce .order-total .amount,
.woocommerce-cart .cart_totals .amount,
.woocommerce-checkout-review-order-table .amount {
  color: var(--moos-purple) !important;
}

/* WooCommerce Coupon notice */
.woocommerce-info { border-top-color: var(--moos-purple) !important; }
.woocommerce-info::before { color: var(--moos-purple) !important; }
.woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info .showcoupon {
  color: var(--moos-purple) !important; 
  text-decoration: underline;
}

/* WooCommerce Pagination */
.woocommerce nav.woocommerce-pagination ul { border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li .page-numbers {
  background: #fff !important; 
  color: var(--moos-purple) !important;
  border: 1px solid var(--moos-purple) !important; 
  padding: .35em .6em !important; 
  border-radius: 4px !important;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li .page-numbers:focus {
  background: var(--moos-purple-hover) !important; 
  border-color: var(--moos-purple-hover) !important; 
  color: #fff !important;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers.current {
  background: var(--moos-purple) !important; 
  border-color: var(--moos-purple) !important; 
  color: #fff !important;
}

/* WooCommerce Product Meta */
.single-product .product_meta,
.single-product .product_meta span,
.single-product .product_meta span.sku {
  color: var(--moos-charcoal) !important;
}
.single-product .product_meta a {
  color: var(--moos-purple) !important;
}
.single-product .product_meta a:hover,
.single-product .product_meta a:focus {
  color: var(--moos-purple-hover) !important;
}

/* WooCommerce Cart/Checkout */
.woocommerce-cart .shop_table .product-name,
.woocommerce-cart .shop_table .product-name a,
.woocommerce-checkout-review-order-table .product-name,
.woocommerce-checkout-review-order-table .product-name a {
  color: var(--moos-charcoal) !important;
}
.woocommerce-cart .shop_table .product-name a:hover,
.woocommerce-cart .shop_table .product-name a:focus,
.woocommerce-checkout-review-order-table .product-name a:hover,
.woocommerce-checkout-review-order-table .product-name a:focus {
  color: var(--moos-purple) !important;
}
.woocommerce-cart .shop_table th,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table tfoot th {
  color: var(--moos-charcoal) !important;
}

/* Blog Pagination (Older/Newer posts) */
.navigation .nav-links a,
.nav-previous a,
.nav-next a {
  background: #fff !important;
  color: var(--moos-purple) !important;
  border: 1px solid var(--moos-purple) !important;
  padding: .4em .8em !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  display: inline-block;
}
.navigation .nav-links a:hover,
.nav-previous a:hover,
.nav-next a:hover,
.navigation .nav-links a:focus,
.nav-previous a:focus,
.nav-next a:focus {
  background: var(--moos-purple-hover) !important;
  border-color: var(--moos-purple-hover) !important;
  color: #fff !important;
}

/* Ensure "remove item" links are visible in the Checkout Block order summary */
.wc-block-components-order-summary-item__remove {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-left: 8px;
  color: #a00 !important; /* red link like classic Woo */
  cursor: pointer;
}
.wc-block-components-order-summary-item__remove {
  display:inline-flex !important; visibility:visible !important; opacity:1 !important;
}

/* =========================
   MASTER BUTTON STYLING
   Classic Woo + WooCommerce Blocks
   ========================= */

/* Classic Woo buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.woocommerce .added_to_cart {
  background-color: var(--moos-purple) !important;
  border: 1px solid var(--moos-purple) !important;
  color: #fff !important;
  border-radius: 3px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover,
.woocommerce .added_to_cart:hover {
  background-color: var(--moos-purple-hover) !important;
  border-color: var(--moos-purple-hover) !important;
  color: #fff !important;
}

/* Disabled state (classic) */
.woocommerce button.button:disabled,
.woocommerce input.button:disabled { opacity: .6; }

/* WooCommerce BLOCKS (Cart/Checkout blocks) */
.wc-block-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button,
.wc-block-checkout button.components-button.is-primary,
.wc-block-checkout .components-button.is-primary,
.wc-block-checkout .wc-block-components-button:not(.is-secondary),
.wc-block-cart__submit-container .wc-block-components-button {
  background-color: var(--moos-purple) !important;
  border-color: var(--moos-purple) !important;
  color: #fff !important;
}

/* Hover/focus (blocks) */
.wc-block-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button:hover,
.wc-block-checkout button.components-button.is-primary:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover {
  background-color: var(--moos-purple-hover) !important;
  border-color: var(--moos-purple-hover) !important;
  color: #fff !important;
}

/* Disabled state (blocks) */
.wc-block-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button:disabled,
.wc-block-checkout button.components-button.is-primary:disabled,
.wc-block-cart__submit-container .wc-block-components-button:disabled {
  background-color: var(--moos-purple) !important;
  border-color: var(--moos-purple) !important;
  color: #fff !important;
  opacity: .6;
}

/* Some themes color via WP preset; nudge it on checkout only */
body.woocommerce-checkout {
  --wp--preset--color--primary: var(--moos-purple) !important;
}

/* (Optional) make sure our custom remove link stays visible in Order Summary */
.wc-block-components-order-summary-item .mcl-remove {
  margin-left: 8px;
  color: #a00 !important;
  text-decoration: none;
  font-weight: 600;
}

/* ===== Smart Slider device routing (kept) ===== */

/* Hide all sliders by default */
#n2-ss-13, #n2-ss-10, #n2-ss-9, #n2-ss-12, #n2-ss-11 {
  display:none !important;
}

/* Desktop (>=1200px) */
@media (min-width:1200px){
  #n2-ss-13 { display:block !important; }
}

/* Tablet LANDSCAPE (769–1199px) */
@media (min-width:769px) and (max-width:1199px) and (orientation:landscape){
  #n2-ss-10 { display:block !important; }
}

/* Tablet PORTRAIT (769–1199px) */
@media (min-width:769px) and (max-width:1199px) and (orientation:portrait){
  #n2-ss-9 { display:block !important; }
}

/* Mobile LANDSCAPE (<=1024px, landscape) */
@media (max-width:1024px) and (orientation:landscape){
  #n2-ss-12 { display:block !important; }
}

/* Mobile PORTRAIT (<=768px, portrait) */
@media (max-width:768px) and (orientation:portrait){
  #n2-ss-11 { display:block !important; }
}

/* (Optional debug outlines — keep for now, remove when done) */
#n2-ss-13 { outline: 0px solid #4caf50 !important; }  /* Desktop = green */
#n2-ss-10 { outline: 0px solid #2196f3 !important; }  /* Tablet-Land = blue */
#n2-ss-9  { outline: 0px solid #9c27b0 !important; }  /* Tablet-Port = purple */
#n2-ss-12 { outline: 0px solid #ff9800 !important; }  /* Mob-Land = orange */
#n2-ss-11 { outline: 0px solid #e91e63 !important; }  /* Mob-Port = pink */

/* === Footer 1: Social Media Footer menu — logos only, no text === */
.site-footer #menu-social-media-footer{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Each social link becomes a round button; text hidden (but link stays accessible) */
.site-footer #menu-social-media-footer a{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 6px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid #d6d6de !important;
  overflow: hidden !important;
  text-decoration: none !important;

  /* hide the visible label text */
  font-size: 0 !important;
  color: transparent !important;
}

/* The logo layer inside the button */
.site-footer #menu-social-media-footer a::before{
  content: "" !important;
  display: block !important;
  width: 75% !important;   /* adjust 60–85% to taste */
  height: 75% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Map each domain to YOUR uploaded image (use https + exact filename/case) */
.site-footer #menu-social-media-footer a[href*="facebook.com"]::before{
  background-image: url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/facebook.png") !important;
}
.site-footer #menu-social-media-footer a[href*="instagram.com"]::before{
  background-image: url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/icons8-instagram-48.png") !important;
}
.site-footer #menu-social-media-footer a[href*="youtube.com"]::before{
  background-image: url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/Youtube.png") !important;
}
.site-footer #menu-social-media-footer a[href*="x.com"]::before,
.site-footer #menu-social-media-footer a[href*="twitter.com"]::before{
  background-image: url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/Unknown-1.png") !important;
}

/* Nice hover */
.site-footer #menu-social-media-footer a:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* Transparent round social buttons (keep circular crop, no fill/border) */
.site-footer #menu-social-media-footer a{
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* =========================================================
   BURGER: replace theme grey icons with your uploaded logos
   (footer untouched)
   ========================================================= */

/* 0) Layout (optional) */
@media (max-width:1024px){
  .site-header nav.social-navigation,
  .menu-modal nav.social-navigation,
  .offcanvas nav.social-navigation,
  .drawer nav.social-navigation,
  #site-navigation.toggled nav.social-navigation{
    display:flex !important;
    justify-content:center;
    gap:10px;
    margin:12px 0 0;
    padding-top:12px;
    border-top:1px solid rgba(0,0,0,.08);
  }
}

/* 1) Base button box for burger social links (NOT in footer) */
:not(.site-footer) nav.social-navigation a{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  overflow: hidden !important;

  /* kill visible label + icon font glyphs */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  font-family: inherit !important;
}

/* 2) Hide any inline SVGs/icons the theme inserts */
:not(.site-footer) nav.social-navigation a > svg,
:not(.site-footer) nav.social-navigation a > i,
:not(.site-footer) nav.social-navigation a > span.icon{
  display:none !important;
}

/* 3) Use ::before as the logo layer (exactly like your footer) */
:not(.site-footer) nav.social-navigation a::before{
  content:"" !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
}

/* 4) Domain → image mapping (HTTPS only preferred) */
:not(.site-footer) nav.social-navigation a[href*="facebook.com"]::before{
  background-image:url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/facebook.png") !important;
}
:not(.site-footer) nav.social-navigation a[href*="instagram.com"]::before{
  background-image:url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/icons8-instagram-48.png") !important;
}
:not(.site-footer) nav.social-navigation a[href*="youtube.com"]::before{
  background-image:url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/Youtube.png") !important;
}
:not(.site-footer) nav.social-navigation a[href*="x.com"]::before,
:not(.site-footer) nav.social-navigation a[href*="twitter.com"]::before{
  background-image:url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/twitter-x-logo-png_seeklogo-492396.png") !important;
}

/* =========================================
   TUNABLES - adjust here (px)
   ========================================= */
:root{
  /* Header bits */
  --social-icon-size: 0px;

  /* Burger/search row height */
  --nav-drop-desktop: -40px;
  --nav-drop-tablet:  -70px;
  --nav-drop-mobile:  -40px;

  /* Silver film (overlay) vertical nudge — negative = up */
  --search-film-nudge: 0px;

  /* Tablet white panels — negative = up */
  --panel-tab-por:        -0px;  /* MENU panel, tablet portrait */
  --panel-tab-land:       00px; /* MENU panel, tablet landscape (you liked ~-30) */
  --search-panel-tab-por:  -0px;  /* SEARCH panel, tablet portrait */
  --search-panel-tab-land: -0px;  /* SEARCH panel, tablet landscape */
}




 

/* =========================================
   A) HEADER STRUCTURE + SOCIALS ROW
   (logo left, socials full-width row above nav/burger)
   ========================================= */
.site-header .site-branding{
  order:1 !important;
  flex:0 0 auto !important;
  margin:0 !important;
}
.site-header #site-navigation,
.site-header .main-navigation,
.site-header .menu-toggle{
  order:3 !important;
  margin-left:auto !important;
}

/* Header Center slot (works if class is .header-center-area or .header-center-slot) */
.site-header .header-center-area,
.site-header .header-center-slot{
  order:2 !important;
  flex:1 0 100% !important;          /* full-width row */
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  padding:4px 0 !important;
}

/* Smaller social icons for headroom */
.site-header .header-center-area img,
.site-header .header-center-slot  img{
  max-height: var(--social-icon-size);
  width:auto;
}
.site-header .header-center-area .wp-block-social-links,
.site-header .header-center-slot  .wp-block-social-links{ margin:0 !important; }
/* =========================================
   B) NAVIGATION DROP (space for socials)
   ========================================= */
@media (min-width:1025px){  /* desktop */
  .site-header #site-navigation,
  .site-header .main-navigation{
    margin-top: var(--nav-drop-desktop) !important;
  }
}

/* tablet (768–1024) */
@media (min-width:768px) and (max-width:1024px){
  .site-header .menu-toggle,
  .site-header .search-toggle{
    position: relative !important;
    top: var(--nav-drop-tablet) !important;  /* negative = up */
    margin-top: 0 !important;
  }
}

/* tablet LANDSCAPE (big iPads 1025–1366, touch only) */
@media (min-width:1025px) and (max-width:1366px)
       and (orientation:landscape)
       and (hover:none) and (pointer:coarse){
  .site-header .menu-toggle,
  .site-header .search-toggle{
    position: relative !important;
    top: var(--nav-drop-tablet) !important;
    margin-top: 0 !important;
  }
}

/* mobile (<=767) */
@media (max-width:767px){
  .site-header .menu-toggle,
  .site-header .search-toggle{
    position: relative !important;
    top: var(--nav-drop-mobile) !important;  /* negative = up */
    margin-top: 0 !important;
  }
}


@media (min-width:768px) and (max-width:1024px){  /* tablet (incl. many phone-landscape) */
  .site-header .menu-toggle,
  .site-header .search-toggle{
    position: relative !important;
    top: var(--nav-drop-tablet) !important;   /* try -12px, then nudge */
    margin-top: 0 !important;
  }
}  /* <-- close tablet block */

@media (max-width:767px){  /* mobile portrait */
  .site-header .menu-toggle,
  .site-header .search-toggle{
    position: relative !important;
    top: var(--nav-drop-mobile) !important;   /* try -12px, then nudge */
    margin-top: 0 !important;
  }
}



/* =========================================
   D) FOOTER TRIM
   ========================================= */
.site-footer,
.site-footer .wrapper{
  padding-top: var(--footer-pad-top) !important;
  padding-bottom: var(--footer-pad-bot) !important;
}
.site-footer .widget{ margin-bottom: 10px !important; }
.site-footer .widget:empty{ display:none !important; }
.site-footer .site-info{
  padding-top: 0px !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* =========================================
   E) LOGO-ONLY OVERHANG (ON via variable)
   ========================================= */
.site-header{ overflow: visible; }                     /* allow visual spill without moving header */
.site-header .site-branding{ position: relative; z-index: 10; }

.custom-logo,
.custom-logo-link img{
  transform: translateY(var(--logo-overhang, 0px));   /* negative lifts the logo */
  will-change: transform;
}

/* =========================================
   E) LOGO-ONLY OVERHANG (ON via variable)
   ========================================= */
.site-header{ overflow: visible; }                      /* allow visual spill without moving header */
.site-header .site-branding{ position: relative; z-index: 10; }

.custom-logo,
.custom-logo-link img{
  transform: translateY(var(--logo-overhang, 0px));    /* negative lifts the logo */
  will-change: transform;
}

/* ------- BASE FALLBACKS (unchanged system) ------- */
:root{ --logo-overhang: -20px; }                        /* phones default */
@media (min-width: 768px){
  :root{ --logo-overhang: -60px; }                      /* tablets fallback */
}
@media (min-width: 1025px){
  :root{ --logo-overhang: -25px; }                      /* desktops/laptops fallback */
}

/* ------- ORIENTATION OVERRIDES (edit only the numbers) ------- */

/* Phone/* ------- ORIENTATION OVERRIDES (edit only the numbers) ------- */

/* Phones — PORTRAIT */
@media (max-width: 767px) and (orientation: portrait){
  :root{ --logo-overhang: -20px; }                      /* tweak to taste */
}

/* Phones — LANDSCAPE (reliable touch catch for modern phones) */
@media (pointer: coarse) and (hover: none) and (orientation: landscape) and (max-height: 580px){
  :root{ --logo-overhang: -100px; }
}

/* Tablets — PORTRAIT (covers iPad/Fire incl. Pro; excludes laptops) */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) and (pointer: coarse){
  :root{ --logo-overhang: -60px; }
}

/* Tablets — LANDSCAPE (covers iPad/Fire incl. Pro; excludes laptops) */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse){
  :root{ --logo-overhang: -70px; }
}
s — PORTRAIT */
@media (max-width: 767px) and (orientation: portrait){
  :root{ --logo-overhang: -20px; }                      /* tweak to taste */
}

/* Phones — LANDSCAPE (reliable touch catch for modern phones) */
@media (pointer: coarse) and (hover: none) and (orientation: landscape) and (max-height: 580px){
  :root{ --logo-overhang: -156px; }
}

/* Tablets — PORTRAIT (covers iPad/Fire incl. Pro) */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait){
  :root{ --logo-overhang: -60px; }
}

/* Tablets — LANDSCAPE (covers iPad/Fire incl. Pro) */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape){
  :root{ --logo-overhang: -70px; }
}




/* 3.2 — Keep logo above the over-header; stop clipping on small screens */
@media (max-width: 1366px){
  .site-header{ position: relative; z-index: 20; overflow: visible !important; }
  .site-header .site-branding{ position: relative; z-index: 30; overflow: visible !important; }

  /* Your over-header row (names vary; include what exists on your theme) */
  #top-social-bar,
  .header-top,
  .top-header,
  .header-center-area,
  .header-center-slot{
    position: relative;   /* make z-index apply */
    z-index: 15;          /* ensure it sits below the logo */
    overflow: visible;    /* don’t clip the logo edge */
  }
}



/* =========================================
   F) INLINE MENU — keep neutral; no extra color/outline here
   ========================================= */

/* Some themes add focus styles on the LI—neutralize them */
.site-header .main-navigation li:focus-within{
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================
   TOP SOCIAL BAR (outside header)
   ============================ */
#top-social-bar{
  width:100%;
  display:flex;
  justify-content:flex-end;      /* right on desktop */
  padding:6px 14px;
  box-sizing:border-box;
  gap:12px;                      /* spacing between items */
}

/* Social menu container */
#top-social-bar .social-navigation{ display:flex; gap:12px; }

/* Default social icon buttons (round) */
#top-social-bar nav.social-navigation a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px !important;
  height:56px !important;
  margin:0 6px !important;
  border-radius:50% !important;
  background:transparent !important;
  border:none !important;
  overflow:hidden !important;
  font-size:0 !important;
  color:transparent !important;
  text-decoration:none !important;
  transition:transform .25s, box-shadow .25s;
}

/* === Top bar Buy button === */
#top-social-bar .top-buy-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;

  border:2px solid var(--moos-purple);
  background:var(--moos-purple);
  color:#fff;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
}

#top-social-bar .top-buy-button:hover,
#top-social-bar .top-buy-button:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  background:#fff;
  color:var(--moos-purple);
}

#top-social-bar .top-buy-button .buy-icon{
  width:18px; height:18px;
  fill:currentColor;
}

@media (max-width:1023px){
  #top-social-bar{ justify-content:center; flex-wrap:wrap; }
  #top-social-bar .top-buy-button{
    padding:8px 12px;
    font-size:14px;
  }
}


/* Logo layer (reuses ::before mapping from footer) */
#top-social-bar nav.social-navigation a::before{
  content:"" !important;
  display:block;
  width:75% !important;
  height:75% !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
}

/* Hover effect: same lift/shadow as footer */
#top-social-bar nav.social-navigation a:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}


/* Responsive: center + allow wrap on tablet/mobile */
@media (max-width:1023px){
  #top-social-bar{ justify-content:center; flex-wrap:wrap; }
}
#top-social-sep{ height:4px; }
/* === MOBILE TUNE: smaller icons + tighter gaps; try to keep one line === */
@media (max-width: 480px){
  /* keep items on one row if possible */
  #top-social-bar{ justify-content:center; flex-wrap:nowrap; gap:8px; }

  /* tighten spacing between icon links */
  #top-social-bar .social-navigation{ gap:8px; }

  /* shrink the round buttons */
  #top-social-bar nav.social-navigation a{
    width:34px !important;
    height:34px !important;
    margin:0 4px !important;
  }

  /* shrink the logo layer inside each button */
  #top-social-bar nav.social-navigation a::before{
    width:70% !important;
    height:70% !important;
  }

  /* compact Buy button */
  #top-social-bar .top-buy-button{
    padding:6px 10px;
    font-size:13px;
    border-width:2px;
    white-space:nowrap;   /* prevent internal wrap */
    flex:0 0 auto;
  }

  #top-social-bar .top-buy-button .buy-icon{
    width:16px; height:16px;
  }
}

/* ultra-narrow phones: squeeze a touch more */
@media (max-width: 360px){
  #top-social-bar{ gap:6px; }
  #top-social-bar .social-navigation{ gap:6px; }
  #top-social-bar nav.social-navigation a{
    width:30px !important;
    height:30px !important;
    margin:0 3px !important;
  }
  #top-social-bar nav.social-navigation a::before{
    width:68% !important;
    height:68% !important;
  }
  #top-social-bar .top-buy-button{
    padding:5px 9px;
    font-size:12px;
  }
}

/* Phones only default image placeholder, portrait — make the header box 4:3 so the 400x300 fills perfectly */
@media (max-width: 767px) and (orientation: portrait){
  /* Prevent any theme min-heights interfering */
  body:not(.home) .custom-header{ min-height: 0 !important; }

  body:not(.home) .custom-header .wrapper:before{
    /* Build a 4:3 box via padding (height = 75% of width) */
    display: block !important;
    height: 0 !important;
    padding-top: 75% !important;              /* 300/400 = 0.75 (4:3) */

    background-image: url("https://moosicology.com/staging.moosicology.com/wp-content/uploads/2021/11/All-Pages-Mobile-As-Featured-In-Moosicology-Press.jpg") !important;
    background-size: cover !important;        /* aspect matches, so no crop */
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
  }
}


/* === ULTRA-WIDE SCREENS: keep non-home header image in proportion === */
/* Triggers on very wide monitors; adjust ratios if you prefer */
@media (min-width: 1400px) and (min-aspect-ratio: 21/9),
       (min-width: 1600px) and (min-aspect-ratio: 16/9){

  /* If your non-home header image is a background on :before (as on mobile) */
  body:not(.home) .custom-header .wrapper:before{
    background-size: contain !important;   /* no crop */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;     /* letterbox colour; tweak to taste */
  }

  /* If some templates use a real <img> instead of background: cover both cases */
  body:not(.home) .custom-header img,
  body:not(.home) .custom-header picture img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}


/* HOME — STRIP SLIDER GAPS ON ALL DEVICES */
.home .entry-content > .wp-block-smart-slider3-smartslider,
.home .entry-content > .wp-block-smart-slider3-block,
.home .entry-content > [id^="n2-ss-"][id$="-align"]{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.home .entry-content > .wp-block-group{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}  /* ← closing brace was missing here */

:root{
  --header-pad-bottom: 2px;
  --content-pad-top:   1px;
}

/* Slider Lift — Home only */
.home header#masthead.site-header{
  padding-bottom: var(--header-pad-bottom) !important;
}
.home #content,
.home .site-content,
.home .site-content .wrapper{
  padding-top: var(--content-pad-top) !important;
}






  




  




    
  






 
 



	  
 



  
	  


/* === FINAL: FILM + MOBILE PANEL (clean, deduped) === */
:root{
  --film-desktop: -20px;        /* helper; keep for now */
  --search-film-nudge: -5px;   /* base/desktop+tablet default */
}
/* Film nudge per orientation (positive = down, negative = up) */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  :root{ --search-film-nudge: 0px; }   /* start 4–6px */
}

@media (min-width:1025px) and (max-width:1366px)
       and (orientation:landscape)
       and (hover:none) and (pointer:coarse){
  :root{ --search-film-nudge: -45px; }   /* start 6–10px */
}



/* Grey film uses the live dial */
body:not(.woocommerce-checkout).menu-open .overlay,
body:not(.woocommerce-checkout) .site-overlay{
  transform: translateY(calc(var(--logo-overhang) + var(--search-film-nudge))) !important;
  z-index: 12000 !important;
}

/* MOBILE (portrait & landscape): one dial moves BOTH film + white panel */
@media (max-width: 959px){
  :root{ --search-film-nudge: -15px !important; } /* tweak: -10 / -12 / -14 */

  /* White burger panel follows the same dial */
  body.menu-open :is(#masthead, header) :is(nav, .main-navigation, #site-navigation) :is(.menu, ul.menu){
    position: relative !important;
    top: var(--search-film-nudge) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
    background: #fff !important;
  }
}

nd
 Author: Moosicology
 Text Domain: moosicology-child
*/

@media (min-width:1200px){
  /* Make HEADER the positioning context and ensure nothing is clipped */
  #masthead{
    position: relative !important;
    overflow: visible !important;
    z-index: 13000 !important;
  }

  /* Move the WHOLE search unit; anchor to header’s RIGHT edge */
  #primary-search-wrapper{
    position: absolute !important;
    right: var(--header-right-pad) !important;  /* keep it tucked to the right */
    left: auto !important;
    top: var(--search-wrapper-top) !important;  /* single vertical dial */
    margin: 0 !important;
    transform: none !important;
    z-index: 13005 !important; /* above slider/film (film ~12000) */
    box-sizing: border-box !important;
  }

  /* Icon sits naturally inside the wrapper (do NOT transform it) */
  #primary-search-wrapper .search-toggle,
  #primary-search-wrapper .menu-toggle{
    transform: none !important;
    margin: 0 !important;
    position: static !important;
    z-index: 13010 !important;
  }

  /* White panel: open directly UNDER the icon, still right-aligned */
  #primary-search-wrapper .menu-inside-wrapper{
    position: absolute !important;
    top: calc(100% + var(--search-gap)) !important; /* under icon with gap */
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;      /* prevents “double-height” wrapper */
    z-index: 13006 !important;
    max-width: 520px;           /* optional; adjust if needed */
  }

  /* Inners: padding lives here; never transform inners (prevents split) */
  #primary-search-wrapper .search-container,
  #primary-search-wrapper .search-form,
  #primary-search-wrapper form.search-form{
    transform: none !important;
    margin: 0 !important;
    padding: 8px 12px !important;
  }
}


/* === DESKTOP SEARCH (wrapper-anchored; icon + box move together) === */
:root{
  /* Dials you tweak */
  --search-wrapper-top: 13px;   /* vertical position of the whole search unit */
  --search-gap: 20px;           /* gap between icon and white box */
  --header-right-pad: 0px;      /* set to header’s right padding if your header has one */
}

/* Apply on desktop/laptop widths */
@media (min-width:1280px){
  #masthead{
    position: relative !important;
    overflow: visible !important;
  }

  /* Move the WHOLE unit (icon + white box) from the header baseline */
  #masthead #primary-search-wrapper{
    position: absolute !important;
    right: var(--header-right-pad) !important;
    left: auto !important;
    top: var(--search-wrapper-top) !important;          /* <-- THIS is what moves it */
    transform: none !important;
    margin: 0 !important;
    z-index: 13005 !important;
    box-sizing: border-box !important;
  }

  /* Make the white panel open directly under the icon with your gap */
  #masthead #primary-search-wrapper .menu-inside-wrapper{
    position: absolute !important;
    top: calc(100% + var(--search-gap)) !important;     /* <-- gap under icon */
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 13006 !important;
  }
	
	body.woocommerce-checkout #masthead #primary-search-wrapper .menu-inside-wrapper{ z-index: 0 !important; }


  /* Never transform inners; prevents the “split” */
  #masthead #primary-search-wrapper .search-container,
  #masthead #primary-search-wrapper .search-form,
  #masthead #primary-search-wrapper form.search-form{
    transform: none !important;
    margin: 0 !important;
    padding: 8px 12px !important;
  }
}

/* DESKTOP: force the search input to show inside the opened panel */
@media (min-width:1280px){
  #masthead #primary-search-wrapper .menu-inside-wrapper{
    min-width: 420px !important;
    max-width: 520px !important;
    background: #fff !important;
    overflow: visible !important;
  }
  #masthead #primary-search-wrapper .search-form{
    width: 100% !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  #masthead #primary-search-wrapper input[type="search"]{
    width: 100% !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
  }
  #masthead #primary-search-wrapper .search-container{
    overflow: visible !important;
  }
}


/* TABLET — LANDSCAPE: move the WHITE panel (not the film) */
@media (min-width:1024px) and (max-width:1370px) and (orientation:landscape){
  body.menu-open :is(#site-navigation, .main-navigation, nav) :is(.menu, ul.menu){
    position: relative !important;
    top: var(--panel-tab-land) !important;   /* <-- PROOF OF MOVE */
    margin-top: 0 !important;
    padding-top: 10px !important;
    transform: none !important;
    background: #fff !important;             /* ensures the white background is visible */
  }
}

/* MOBILE — PORTRAIT: white panel only (film already aligned for you) */
@media (max-width: 767px){
  body.menu-open :is(#site-navigation, .main-navigation, nav) :is(.menu, ul.menu){
    position: relative !important;
    top: var(--panel-mob-por) !important;
    margin-top: 0 !important;
    padding-top: 0px !important;
    transform: none !important;
    background: #fff !important;
  }
}

/* MOBILE — LANDSCAPE: white panel only */
@media (min-width:568px) and (max-width:959px) and (orientation:landscape){
  body.menu-open :is(#site-navigation, .main-navigation, nav) :is(.menu, ul.menu){
    position: relative !important;
    top: var(--panel-mob-land) !important;
    margin-top: 0 !important;
    padding-top: 0px !important;
    transform: none !important;
    background: #fff !important;
  }
}


/* === FINAL OVERRIDE — PHONE LANDSCAPE LOGO LIFT (keeps overhang) === */
/* Match modern phone landscape by short height OR narrow width (touch only) */
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height: 620px),
       (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width: 932px){
  /* 1) Set the overhang value you want for phone landscape */
  :root{ --logo-overhang: -90px; }  /* tweak: more negative = higher */

  /* 2) Reassert transform on the image (wins over earlier tablet rule) */
  .site-header .site-branding .custom-logo,
  .site-header .site-branding .custom-logo-link img{
    transform: translateY(var(--logo-overhang)) !important;
  }

  /* 3) Make sure it never tucks under the top bar */
  .site-header{ position: relative !important; overflow: visible !important; }
  .site-header .site-branding{ position: relative !important; z-index: 30 !important; }
}



/* =========================================
   NON-HOME: HEADER OVERLAP (no banner lift)
   — Keeps Home untouched
   ========================================= */

/* One dial for how much the header overlaps the banner */
:root{
  --hero-overlap: 90px;   /* try 70–110px to taste */
  --veil-height: 110px;   /* ≈ your header height for readability */
}

/* 1) On non-Home pages, let the header sit 'over' the banner */
body:not(.home):not(.woocommerce-checkout) .site-header{
  position: relative !important;
  z-index: 5000 !important;
  margin-bottom: calc(-1 * var(--hero-overlap)) !important;  /* pulls next section up under header */
  background: transparent !important;                        /* show banner underneath */
  box-shadow: none !important;
  overflow: visible !important;
}

/* 2) Soft veil so the logo/menu stay readable over the image */
body:not(.home) .site-header::after{
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: var(--veil-height);
  pointer-events: none;
  z-index: 1;    /* under logo/menu (which are naturally above), above banner */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.96) 0%,
    rgba(255,255,255,0.72) 70%,
    rgba(255,255,255,0.00) 100%
  );
}

/* 3) Ensure the banner can be seen (no clipping) */
body:not(.home) .custom-header,
body:not(.home) .custom-header-media{
  overflow: visible !important;
}

/* 4) Keep header contents above the veil */
body:not(.home) .site-header .site-branding,
body:not(.home) .site-header .main-navigation,
body:not(.home) .site-header .menu-toggle,
body:not(.home) .site-header .search-toggle{
  position: relative;
  z-index: 2;
}


/* Base (fallback) */
:root{
  --hero-overlap: 90px;            /* desktop-ish default */
  --veil-height: 110px;            /* ≈ header height */
  --seam-fix: 2px;                  /* closes 1–2px hairline seams */
}

/* Mobile portrait */
@media (max-width: 767px) and (orientation: portrait){
  :root{ --hero-overlap: 60px; --veil-height: 100px; }
}

/* Mobile landscape */
@media (max-width: 767px) and (orientation: landscape){
  :root{ --hero-overlap: 60px; --veil-height: 92px; }
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  :root{ --hero-overlap: 111px; --veil-height: 108px; }
}

/* Tablet landscape — includes iPad/Fire incl. Pro; excludes laptops */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse){
  :root{ --hero-overlap: 120px; --veil-height: 108px; } /* start ~220–260, then tune */
}

/* Desktop / large — real desktops only (excludes iPad landscape) */
@media (min-width: 1367px), (min-width: 1025px) and (hover: hover) and (pointer: fine){
  /* Separate dials for Home vs other pages on desktop */
  body.home{ --hero-overlap: 20px; }        /* adjust to taste */
  body:not(.home){ --hero-overlap: 80px; }   /* adjust to taste */
  :root{ --veil-height: 110px; }
}

/* === ROOT FIX: kill header/below-header borders that cause the hairline === */
body:not(.home) .site-header,
body:not(.home) .site-header::before,
body:not(.home) .site-header::after,
body:not(.home) .site-header > *,
body:not(.home) .site-header > *::before,
body:not(.home) .site-header > *::after{
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;      /* some themes draw the “line” as a shadow */
  background-clip: padding-box;     /* avoid weird 1px paints on some browsers */
}

/* The hero/banner container must also have no top border */
body:not(.home) .custom-header,
body:not(.home) .custom-header-media{
  border-top: 0 !important;
  box-shadow: none !important;
}

/* If your theme inserts a separator element under the header, nuke it */
body:not(.home) .site-header + .site-separator,
body:not(.home) .site-header .header-separator,
body:not(.home) .site-header .site-header-main::after{
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep the overlap you already have, but remove prior “seam-fix” patches */


/* === CONTENT NUDGE (after hero) === */
:root{ --content-nudge: 10px; } /* try 6–14px to taste */

/* Pull the main content up slightly under the banner/slider */
body .site-content{ margin-top: calc(-1 * var(--content-nudge)) !important; }
body .site-content, body #content{ overflow: visible !important; }

/* === CONTENT NUDGE (after hero) — split phones by orientation === */

/* Mobile baseline (kept) */
@media (max-width:767px){ :root{ --content-nudge: 10px; } }  /* positive = up, negative = down */

/* Mobile — PORTRAIT only (title too high → push content DOWN a touch) */
@media (max-width:767px) and (orientation: portrait){
  :root{ --content-nudge: -6px; }  /* tweak: -4 to -10 if needed */
}

/* Mobile — LANDSCAPE only (leave as you had it) */
@media (max-width:767px) and (orientation: landscape){
  :root{ --content-nudge: 100px; }
}

/* Tablets (unchanged) */
@media (min-width:768px) and (max-width:1194px){ :root{ --content-nudge: 99px; } }

/* Desktop (unchanged) */
@media (min-width:1195px){ :root{ --content-nudge: 80px; } }


/* === SCOPE FIX: apply lifts only on non-Home; reset Home === */

/* A) Header overlap via the same dial — now also on Home */
body .site-header{

  margin-bottom: calc(-1 * var(--hero-overlap)) !important;
}

/* B) Content nudge: only on non-Home pages */
body:not(.home):not(.front-page) .site-content,
body:not(.home):not(.front-page) #content{
  margin-top: calc(-1 * var(--content-nudge)) !important;
}

/* C) Home: keep content reset only (no header reset) */
body.home .site-content,
body.front-page .site-content,
body.home #content,
body.front-page #content{
  margin-top: 0 !important;
}



/* === PHONE LANDSCAPE — force the LOGO up (wrapper-only; burger/menu untouched) === */
@media (max-width: 767px) and (orientation: landscape){
  :root{ --ml-logo-up: -30px; } /* tweak: -10 (smaller lift) … -22 (more lift) */

  /* Stop any previous image transforms from interfering */
  .site-header .site-branding .custom-logo,
  .site-header .site-branding .custom-logo-link img{
    transform: none !important;
  }

  /* Lift just the branding wrapper (logo block) */
  .site-header .site-branding,
  .site-header .site-branding .site-title,
  .site-header .site-branding .custom-logo-link{
    position: relative !important;
    top: var(--ml-logo-up) !important;
  }

  /* Ensure nothing clips the lift */
  .site-header{ overflow: visible !important; }
}

/* ================================================
   PHONE LANDSCAPE — consolidated controls (END)
   Matches modern phones by short height OR width
   ================================================ */
@media (orientation: landscape) and (max-height: 580px),
       (orientation: landscape) and (max-width: 932px){

  /* DIALS — tweak these only (negative = up) */
  body.home{ --hero-overlap: 109px; }        /* Home slider tuck */
  body:not(.home){ --hero-overlap: 110px; }  /* Non-Home image header tuck */
  :root{
    --veil-height:        99px;              /* mist trim */
    --ml-logo-up:        -30px;              /* logo wrapper lift */

    /* ONE shared dial for phone-landscape */
    --nav-drop-mobile:   -80px;              /* burger/search buttons */
    --panel-mob-land:    -60px;              /* white menu sheet lift */
    --search-film-nudge: var(--panel-mob-land) !important; /* film locked to sheet */
  }

  /* LOGO — keep lifted and visible (wrapper only; no image transform) */
  .site-header .site-branding,
  .site-header .site-branding .site-title,
  .site-header .site-branding .custom-logo-link{
    position: relative !important;
    top: var(--ml-logo-up) !important;
  }
  .site-header{ overflow: visible !important; }
  .site-header .site-branding{ position: relative !important; z-index: 30 !important; }
  .site-header .site-branding .custom-logo,
  .site-header .site-branding .custom-logo-link img{
    transform: none !important;
  }

  /* BURGER + SEARCH — apply shared dial (tracks the panel/film) */
  .site-header .menu-toggle,
  .site-header .search-toggle{
    position: relative !important;
    top: var(--nav-drop-mobile) !important;
    margin-top: 0 !important;
  }

  /* WHITE SHEET — move the INNER CONTENT (not the wrapper, not the list) */
  /* Block themes */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
    transform: translateY(var(--panel-mob-land)) !important;  /* sheet content moves as one */
    will-change: transform;
  }
  /* Classic / modal patterns (Twenty*, etc.) */
  .menu-modal.is-active .menu-modal__inner,
  .menu-modal.is-active .menu-modal__content{
    transform: translateY(var(--panel-mob-land)) !important;
    will-change: transform;
  }
  /* Classic toggled navigation containers */
  .main-navigation.toggled .menu-primary-container,
  #site-navigation.toggled .menu-primary-container{
    transform: translateY(var(--panel-mob-land)) !important;
    will-change: transform;
  }

  /* IMPORTANT: zero inner-list offsets so we don't double-shift the items */
  :is(.main-navigation .nav-menu,
      .main-navigation ul.menu,
      .main-navigation ul.menu.toggled-on,
      .main-navigation .nav-menu.toggled-on,
      .wp-block-navigation__container){
    top: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
  }
}



/* Hide single product title (all common variants) */
.single-product h1.product_title,
.single-product .product .product_title,
.single-product .entry-summary .product_title,
.single-product .summary .product_title,
.single-product .entry-title,
.single-product .product .entry-title,
.single-product .woocommerce-product-title,
.single-product .page-title,
.single-product .hero-title,
.single-product .site-content .product .product_title.entry-title {
  display: none !important;
}

/* If your theme prints a separate page header/hero on product pages */
.single-product .page-header,
.single-product .product-hero,
.single-product .woocommerce-products-header {
  display: none !important;
}



/* Single product: hide date/author/meta strip */
.single-product .entry-meta,
.single-product .post-meta,
.single-product .meta,
.single-product .posted-on,
.single-product .byline,
.single-product .entry-header .entry-meta,
.single-product .product .entry-meta,
.single-product .product .post-meta {
  display: none !important;
}

/* If your theme uses a stamped/overlay badge near the gallery/title */
.single-product .entry-header .meta-badge,
.single-product .product-hero .meta-badge,
.single-product .product .meta-badge {
  display: none !important;
}