/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/*
===========================================
🎨 Theme Layout & Header Adjustments
===========================================
*/

/* 🔧 Reduce gap between navigation and header image */
.main-navigation {
  margin-top: 0px !important;
}

/* 🖼️ Center the header media block (auto-generated class) */
.gb-media-92d5d06d {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*
===========================================
📱 Mobile-Specific Visibility Rules
===========================================
*/

/* ❌ Hide default GeneratePress hamburger on mobile */
.menu-toggle {
  display: none !important;
}

/* 📵 Hide custom menu wrapper and toggle button on desktop */
@media (min-width: 769px) {
  .sals-mobile-menu-wrapper,
  .sals-menu-toggle {
    display: none !important;
  }
}

/*
===========================================
🍔 Custom Hamburger Toggle Styling
===========================================
*/

/* 📌 Persistent fixed-position hamburger icon */
.sals-menu-toggle {
  position: fixed;
  top: 50px;
  right: 20px;
  z-index: 9999;

  font-size: 28px;
  color: #fff;
  background-color: #222;
  padding: 10px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: none;
  cursor: pointer;
}

/* 🎯 Visual feedback on hover/focus */
.sals-menu-toggle:hover,
.sals-menu-toggle:focus {
  background-color: #444;
  outline: none;
}

/*
===========================================
🧭 Floating Mobile Menu Behavior
===========================================
*/

/* 🧁 Initially hidden menu panel */
.sals-mobile-menu {
  display: none;
  position: absolute;
  top: 60px;
  left: 43%;
  transform: translateX(0);
  z-index: 9999;
  width: fit-content;
  background-color: #F8E4C6;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 6px 10px;
}

.sals-mobile-menu.active {
  display: block;
}

.sals-mobile-menu ul {
  list-style: none;
  margin: 0;
  padding-left: 5px;
}

.sals-mobile-menu li {
  display: block;
  width: fit-content;
  padding: 8px 16px;
  margin-bottom: 12px;
  background-color: #F8E4C6;
  color: #000000;
  font-size: 25px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.sals-mobile-menu li:hover {
  background-color: #F8E4C6;
}

/*
=========================================================
📱 Mobile Search Bar Display (Sitewide)
=========================================================
*/
.sal-mobile-search-wrap {
  display: none;
}

/* Mobile search box */
@media (max-width: 768px) {
  .sal-mobile-search-wrap {
    display: block;
    padding: 6px 10px;
    background: #ffffff;
  }

  .sal-mobile-search-wrap input[type="search"] {
    width: 65%;
    height: 35px;
    background-color: #F0ECEC;
    font-size: 16px;
  }

  .sal-mobile-search-wrap input[type="submit"] {
    padding: 5px 12px;
    font-size: 16px;
    width: auto;
    min-width: 60px;
  }

  /* ❌ Remove sidebar search form in mobile view */
  .widget_search, 
  #right-sidebar,
  .inside-right-sidebar {
    display: none;
  }
}

/*
=========================================================
🔻 Footer Menu Styling
=========================================================
*/

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

.sal-footer-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sal-footer-menu a {
  color: #000000;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sal-footer-menu a:hover {
  text-decoration: underline;
  opacity: 0.85;
}
/* Responsive size for iframe embedded youtube video */
.video-responsive {
  position: relative;
  width: 100%;
  max-width: 560px;     /* Optional: limits max size */
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  margin: 0 0 25px 0;
  border-radius: 8px;
  background: #000;
  overflow: hidden;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* === HEADER CLEANUP: REMOVE MASTHEAD LOGO BAR === */
#masthead {
  display: none !important;
}

/* === STICKY HEADER WRAPPER === */
body .sticky-header-wrapper {
  overflow: visible !important;
}

/* === STICKY HEADER CONTAINER === */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: white;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 0;
}

/* === HEADER IMAGE BLOCK === */
.header-image-block {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 0;
  margin-bottom: 0;
  line-height: 0;
}

/* === MENU BAR === */
.menu-bar {
  margin-top: 0;
  padding-top: 0;
}

/* Mobile Menu Panel - Active State */
.sals-mobile-menu.active {
  position: fixed;
  top: 50px;
  bottom: auto;
  left: 150px;
  right: auto;

  width: 35%;
  height: auto;



  margin-top: 10px;


  background-color: #f5f0e6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  border: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  z-index: 9999;
  transition: all 0.3s ease;
}

/* Individual Menu Items */
.sals-mobile-menu.active li {
  list-style: none;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding: 0px;
}

/* Menu Links Styling */
.sals-mobile-menu.active a {
  color: #003366;
  font-size: 25px;
  text-decoration: none;

  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;

  margin: 0px;
  background-color: #f5f0e6;
  border-radius: 4px;
  display: block;
  text-align: center;
}

/* Video description box title font size*/
.video-description .video-title {
  font-size: 1.5em !important;
  color: #c14f2d;
  font-weight: bold;
  margin-bottom: 0em;
}

.video-description p {
  font-size: 1em;
  line-height: 1.6;
}

/* fix cropped video thumbnail in desktop view*/
 @media (min-width: 769px) {
  .video-responsive {
    max-width: 100%; /* Allow full width on desktop */
    padding-bottom: 56.25%; /* Maintain aspect ratio */
  }

  .video-responsive iframe {
    object-fit: contain; /* Prevent thumbnail cropping */
  }
}

/* Remove bottom margin from Custom HTML blocks */
.wp-block-html {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove top margin from Paragraph blocks following HTML blocks */
.wp-block-html + .wp-block-paragraph {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Global post and page title size */
.entry-title {
  font-size: 20px;
}

/* Ensure video titles wrap and don't get cut off */
.list-category-posts li,
.list-category-posts .lcp_title {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.4;
}