/*
Theme Name: FarmersOrigin Platform
Description: A custom WordPress theme that closely emulates the Open Mineral dashboard layout. It features a dark collapsible sidebar with icons and active highlights, responsive main/right columns, and optional submenus. Designed for SupplierHub.
Author: FarmersOrigin
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: supplierhub-theme-final
*/

/* Import the Inter font family to match the Open Mineral interface */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* Root variables to make it easier to adjust colors globally */
:root {
  /* Colour variables tuned to approximate the Open Mineral palette */
  /*
     * Sidebar base and active colours. These values were adjusted per the
     * user's latest request to better match the Open Mineral design when
     * collapsed and expanded. The sidebar itself uses a very dark blue
     * (#2f3541) and the active/highlighted rows use a slightly lighter
     * tone (#282e38).
     */
  --sidebar-bg: #262f3d; /* dark background for the left bar */
  /* --sidebar-bg: #2f3541; dark background for the left bar */
  --sidebar-active-bg: #1e2530; /* colour used when a row is active or hovered */
  /* --sidebar-active-bg: #282e38; colour used when a row is active or hovered */
  --sidebar-text: #a7b4c5; /* muted grey for menu text */
  --sidebar-icon: #a7b4c5; /* muted grey for icons */
  --sidebar-active-text: #f8f9fa!; /* white for active text/icons */
  /* --sidebar-active-text: #ffffff; white for active text/icons */
  --sidebar-highlight: #f3cd96; /* unused but left for reference */
  --toggle-bg: #2b3750; /* toggle button circle background */
  /* Define sidebar widths so that offsets can adapt uniformly across the theme.  The
       primary sidebar width controls the expanded state while the collapsed width
       applies when the sidebar is minimized.  These variables make it easy to
       adjust the layout globally and will scale with browser zoom because
       the values are expressed in pixels that scale with the page. */
  --sidebar-width: 16rem;
  /* --sidebar-width: 260px; */
  --sidebar-collapsed-width: 72px;
  --toggle-icon: #a7b4c5; /* toggle arrow colour */
  /* Insights layout sizing */
  --insights-list-width: 360px;
}

html,
body {
  margin: 0;
  padding: 0;
  /* Prevent any horizontal scrolling */
  overflow-x: hidden;
  /* Use Inter for a modern, clean look similar to Open Mineral */
  font-family: "Inter", sans-serif;
  background: #ffffff;
  /* Reduce the base font size slightly so the entire interface scales down
       when viewed at 100% browser zoom.  This makes the overall UI feel
       less oversized without requiring users to manually zoom out. */
  /* font-size: 14px; */
}

/* Remove default WordPress max-widths and margins */
#page,
.site,
.wp-site-blocks,
main {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Layout container wraps sidebar and content */
.layout {
  width: 100%;
  min-height: 100vh;
}

/* Fixed left sidebar */
/*
 * Sidebar container
 *
 * Use flex layout so that the navigation grows to fill available space and
 * the contact box sticks to the bottom of the sidebar. This ensures the
 * “Questions? Anytime!” section appears at the bottom rather than in the
 * middle of the menu list.
 */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  /* padding: 24px 20px 32px; */
  box-sizing: border-box;
  /* Remove scrolling from the entire sidebar.  The navigation section will
       handle its own scroll behavior so that the brand/header row remains
       pinned at the top of the sidebar. */
  /* overflow-y: auto; */
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

/* Adjust for admin bar if present */
.admin-bar .sidebar {
  top: 32px;
}

/* Mobile menus css */

.top-bar .left-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-menu-icon span.dashicons.dashicons-menu {
  font-size: 2.5rem;
  display: unset;
  line-height: unset;
}
.mobile-menu-icon button.icon-btn {
  background: none;
  border: none;
  line-height: unset;
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: none;
  /* width: 3rem; */
  /* height: 2rem; */
}

/* Mobile menus css ends */

@media (max-width: 782px) {
  .admin-bar .sidebar {
    top: 46px;
  }
}

/* Toggle button at top of sidebar */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--toggle-bg);
  color: var(--toggle-icon);
  border: none;
  cursor: pointer;
  margin-bottom: 16px;
}
.sidebar-toggle .dashicons {
  font-size: 16px;
}
.sidebar-toggle:hover {
  background: #384663;
}

/* Logo text styling */
/* .sidebar .logo {
  margin-bottom: 24px;
} */
.sidebar .logo h2 {
  margin: 0;
  /* Enlarge the logo text for greater prominence in the sidebar */
  font-size: 1.8em;
  color: var(--sidebar-active-text);
}

/* Navigation styling */
.sidebar-menu,
.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* .sidebar-menu > li {
  margin-bottom: 4px;
} */

.sidebar-menu a {
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  border-radius: 8px;
  padding: 10px 12px;
  /* font-weight: 600; */
  color: var(--sidebar-text);
  width: 100%;
  box-sizing: border-box;
}

/* Icon inside menu */
.sidebar-menu .dashicons {
  font-size: 18px;
  margin-right: 5px;
  /* margin-right: 12px; */
  color: var(--sidebar-icon);
}

/* Arrow indicator for items with children */
.menu-item-has-children > a::after {
  content: "\f347"; /* dashicons-arrow-down */
  font-family: "dashicons";
  margin-left: auto;
  transition: transform 0.2s ease;
  color: var(--sidebar-icon);
}

/* Submenu styling */
.sub-menu {
  margin-left: 20px;
}
.sub-menu a {
  font-size: 0.9em;
}

/* Style parent items when they or any of their children are active */
.sidebar-menu .menu-item-has-children.current-menu-item > a {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
}
.sidebar-menu .menu-item-has-children.current-menu-item > a .dashicons,
.sidebar-menu .menu-item-has-children.current-menu-item > a::after {
  color: var(--sidebar-active-text);
}

/* Submenu appearance */
.sidebar-menu .sub-menu a {
  /* Match background of parent section */
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
}
.sidebar-menu .sub-menu a:hover {
  color: var(--sidebar-active-text);
}
.sidebar-menu .sub-menu .dashicons {
  margin-right: 12px;
  font-size: 16px;
  color: var(--sidebar-icon);
}
.sidebar-menu .sub-menu li.current-menu-item > a {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  /* Ensure the highlight on active submenu items spans the full width
       of the submenu without rounded corners or side margins. */
  border-radius: 0;
  margin: 0;
  width: 100%;
}
.sidebar-menu .sub-menu li.current-menu-item > a .dashicons {
  color: var(--sidebar-active-text);
}

/* Hover state */
.sidebar-menu a:hover {
  color: var(--sidebar-active-text);
}
.sidebar-menu a:hover .dashicons {
  color: var(--sidebar-active-text);
}

/* Active/current item styling */
/* Active/current item styling */
.sidebar-menu li.current-menu-item > a {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  /* Make the active item span the full width of the sidebar with no rounded
       corners or side margins. This mimics the Open Mineral design where
       the selected tab fills the entire menu row. */
  border-radius: 0;
  margin: 0;
  width: 100%;
}
.sidebar-menu li.current-menu-item > a .dashicons {
  color: var(--sidebar-active-text);
}
/* Remove the vertical highlight bar on active items. Instead, the active
   item is distinguished only by its white icon/text and a slightly darker
   background (handled below). */

/* Contact section at bottom */
.sidebar .contact-box {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.05);
  padding: 12px 16px;
  border-radius: 8px;
}
/* Remove styles for the old contact-box class; replaced by sidebar-bottom */

/* Bottom section container holding the questions button and contact details */
.sidebar-bottom {
  margin-top: auto;
  /* Raise the support section slightly off the bottom so it doesn't sit
       directly on the page edge. */
  /* margin-bottom: 48px; */
}

/* Dark pill for "Questions? Anytime!" */
.questions-box {
  /* background: #222a37;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--sidebar-text);
  font-size: 0.9em; */
  cursor: pointer;
  margin: 0.5rem;
  height: 3rem;
  background-color: #222a37;
  border-radius: 8px;
}

.questions-box p {
  /* margin: 0;
  line-height: 3rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sidebar-text); */
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--sidebar-text);
  text-align: center;
  display: inline-block;
  /* margin: 0; */
}

/* Contact details styling */
.contact-details {
  padding: 0.5rem 0 0 1rem;
  font-size: small;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* .contact-details p {
  margin: 0 0 4px;
  font-size: 0.8em;
  color: var(--sidebar-text);
}
.contact-details a {
  color: var(--sidebar-icon);
  text-decoration: none;
} */

/* Ensure nav expands to fill available space so contact box stays at bottom */
.sidebar .nav {
  /* Allow the navigation to expand and provide its own vertical scroll.  The
       footer remains pinned at the bottom of the sidebar because of the
       flexbox column layout on the parent.  Horizontal overflow is hidden. */
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/*
 * Sticky top bar for all pages
 *
 * Many templates render a `.top-bar` element that contains the page title
 * and user controls. To ensure this bar remains visible while scrolling
 * vertically, make it sticky at the top of the viewport. We set a high
 * z-index so it stays above the main content and give it a solid
 * background to avoid content peeking through.
 */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #ffffff;
}

/* Right-of-sidebar content wrapper */
.content {
  margin-left: var(--sidebar-width);
  padding: 24px;
  /* Add top padding slightly larger than the top bar height so there is
       comfortable breathing room between the header and the page
       content.  This offset prevents the first chart or heading from
       appearing jammed up against the fixed bar. */
  padding-top: 88px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

/* On pages with a right-hand panel (.content), allow the top bar to span both
   columns. Otherwise the top bar would be constrained to the first column of
   the grid, which would misalign the action icons. */
/*
 * On pages where the `.top-bar` is rendered as a direct child of `.content` (such as the
 * front page/home template) we need to ensure it behaves like the fixed header found
 * elsewhere in the theme.  Using `position: fixed` here keeps the page title and user
 * controls anchored to the top of the viewport while the main column scrolls underneath.
 * We also shift it to the right by the width of the sidebar (260px) so it aligns with
 * the content area.  When the sidebar collapses to 72px a separate rule further below
 * overrides the left offset to keep everything aligned.  The increased padding
 * heightens the bar slightly per the user's request, and a subtle border defines
 * its separation from the content below.  Finally, we set the same high z‑index
 * used in the default header to ensure this bar stays above other elements.
 */
.content > .top-bar {
  grid-column: 1 / -1;
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  /* z-index: 1000; */
  z-index: 999;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e2e2e2;
  margin: 0;
}

/* When there is no secondary column (no right panel), collapse to a single column */
.content.no-right {
  grid-template-columns: 1fr;
}

/* Main content area */
.main-content {
  min-width: 0;
}

/* Optional right sidebar (news/market terms) */
.sidebar-right {
  min-width: 0;
}
.sidebar-right h4 {
  margin: 0 0 8px;
  font-size: 1em;
}
.sidebar-right .box {
  background: #ffffff;
  border: 1px solid #e7ebf0;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Buttons used in various pages */
.btn-blue {
  background: #2f55d4;
  color: #ffffff;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.btn-grey {
  background: #eef2f7;
  color: #222222;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.btn-green {
  background: #16a34a;
  color: #ffffff;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

/* Responsive: stack columns on small screens */
@media (max-width: 992px) {
  .content {
    grid-template-columns: 1fr;
  }
  .sidebar-right {
    order: 2;
  }
}

/* Collapsed sidebar styles */
body.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width);
  padding-left: 12px;
  padding-right: 12px;
}
body.sidebar-collapsed .content {
  margin-left: var(--sidebar-collapsed-width);
}
body.sidebar-collapsed .sidebar .logo h2,
body.sidebar-collapsed .sidebar .contact-box,
body.sidebar-collapsed .sidebar-menu .menu-text,
body.sidebar-collapsed .menu-item-has-children > a::after {
  display: none;
}
body.sidebar-collapsed .sidebar-toggle .dashicons {
  transform: rotate(180deg);
}
/* Adjust active bar height in collapsed mode */
/* No vertical bar in collapsed mode either; highlight is by colour only */

/* ================================================================
 * Sidebar modifications: full-width highlight and collapse controls
 *
 * The styles below override earlier definitions to ensure that
 * navigation rows span the entire sidebar width, with no inner
 * margins or rounded corners, and implement a round collapse
 * toggle button within a brand header. A collapsed state hides
 * labels and contact information, reducing the sidebar to an
 * icons-only rail.
 */

/* Override base sidebar background and padding */
.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  /* padding: 16px 0; */
}

/* Brand/header row with logo and collapse button */
.brand {
  /*
     * Centre the logo horizontally in the brand bar. Convert the brand
     * container to a relative positioned flex container with centered
     * content. The collapse button is positioned absolutely on the
     * right side so it does not affect the centering of the logo.
     */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1.235rem 1.5rem;
}
.brand .logo {
  /* Center the logo horizontally within the brand bar. Use auto margins
       so it occupies available space and stays centred between the
       sidebar edge and the collapse button. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-left: auto;
  margin-right: auto;
}
.brand .logo h2 {
  margin: 0;
  /* Match the larger logo size defined for the sidebar for consistency */
  font-size: 1.8em;
  color: var(--sidebar-active-text);
}
/* .collapse-btn { */
/* Adjust the size and styling of the collapse button to mirror the Open Mineral
       design.  The button is a dark circular pill with a subtle border.  It is
       positioned so that half of it overlaps the sidebar and half sits in the
       content area.  The fixed positioning allows it to remain anchored
       relative to the viewport instead of within the sidebar’s header. */
/* width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--toggle-icon); */
/* Position the collapse toggle within the brand bar.  It sits on the
       right-hand side of the logo header and vertically centres itself
       using a translation.  Removing the fixed positioning allows
       JavaScript handlers to toggle the sidebar class correctly. */
/* position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
} */
.collapse-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #424a59;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--toggle-icon);
  position: absolute;
  top: 35px;
  right: 16px;
  z-index: 999;
  transform: translateY(-50%);
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.collapse-btn .dashicons {
  /* Increase the icon size to better fit the larger collapse button */
  /* font-size: 20px; */
  /* line-height: 1; */
  font-size: 16px;
  line-height: unset;
  color: white;
}

/* Navigation container grows to fill space */
.nav {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Reset menu row styles: remove inner margins/rounded corners and ensure full width */
.sidebar-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 1rem 1.5rem;
  /* padding: 16px 20px; */
  text-decoration: none;
  /* font-weight: 700; */
  /* Slightly smaller font to match Open Mineral's navigation (approx. 18px) */
  font-size: 1rem;
  color: var(--sidebar-text);
  border-radius: 0;
  height: 3.5rem;
}
.sidebar-menu .dashicons {
  font-size: 22px;
  color: var(--sidebar-icon);
}
/* Arrow indicator for items with children */
.menu-item-has-children > a::after {
  content: "\f347";
  font-family: "dashicons";
  margin-left: auto;
  transition: transform 0.2s ease;
  color: var(--sidebar-icon);
  font-size: 0.8rem;
}
.menu-item-has-children.current-menu-ancestor > a::after {
  transform: rotate(180deg);
  color: #ffffff;
}
/* Submenu items indent but maintain full-width highlight */
.sidebar-menu .sub-menu li a {
  padding: 16px 20px 16px 56px;
  font-size: 18px;
  font-weight: 600;
}
/* Hover and active states for top-level and ancestor rows */
.sidebar-menu li.current-menu-item > a,
.sidebar-menu li.current-menu-ancestor > a,
.sidebar-menu a:hover {
  background: var(--sidebar-active-bg);
  color: #ffffff;
}
.sidebar-menu li.current-menu-item > a .dashicons,
.sidebar-menu li.current-menu-ancestor > a .dashicons,
.sidebar-menu a:hover .dashicons {
  color: #ffffff;
}
/* Active/hover states for submenu items */
.sidebar-menu .sub-menu li.current-menu-item > a,
.sidebar-menu .sub-menu li a:hover {
  background: var(--sidebar-active-bg);
  color: #ffffff;
  border-radius: 0;
  margin: 0;
  width: 100%;
}
/* Hide caret on submenu items */
.sidebar-menu .sub-menu li a::after {
  display: none;
}

/* Hide icons on submenu items to match Open Mineral design */
.sidebar-menu .sub-menu .dashicons {
  display: none;
}

/* Rotate caret for active parent items (current page or its ancestor) */
.menu-item-has-children.current-menu-item > a::after {
  transform: rotate(180deg);
  color: #ffffff;
}

/* Hide submenus by default. Display them when their parent is open or
   represents the current page/ancestor. */
.sidebar-menu .sub-menu {
  display: none;
  /* Remove default indent on nested lists so the highlight spans the full sidebar width */
  margin-left: 0;
  padding-left: 0;
}
.sidebar-menu li.open > .sub-menu,
.sidebar-menu li.current-menu-ancestor > .sub-menu,
.sidebar-menu li.current-menu-item > .sub-menu {
  display: block;
}

/* Rotate caret on open parents */
.menu-item-has-children.open > a::after {
  transform: rotate(180deg);
  color: #ffffff;
}

/* Reset the default sub-menu row appearance so child items do not have
   boxed backgrounds or rounded corners. Align the indentation and set
   the font size/weight similar to the Open Mineral design. */
.sidebar-menu .sub-menu li a {
  background: transparent;
  color: var(--sidebar-text);
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
  padding: 16px 20px 16px 56px;
}

/* Add subtle separators between menu rows for visual grouping. The last child
   of each list skips the border to avoid a trailing line. */
/* .sidebar-menu > li > a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
} */
.sidebar-menu > li:last-child > a {
  border-bottom: none;
}
.sidebar-menu .sub-menu li a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar-menu .sub-menu li:last-child > a {
  border-bottom: none;
}

/* Support section reposition and styling */
/* .sidebar-bottom {
  margin-top: auto;
  margin-bottom: 0;
  padding: 0 10px;
} */
.questions-box {
  padding: 0 0 0 2rem;
}
.contact-details p {
  margin: 0 0 4px;
  color: var(--sidebar-text);
  font-size: 0.9em;
  line-height: 1.6;
}
.contact-details a {
  color: var(--sidebar-text);
  text-decoration: none;
}

/* Collapsed sidebar: icons-only */
body.sidebar-collapsed .sidebar {
  width: 72px;
}
body.sidebar-collapsed .content {
  margin-left: 72px;
}
body.sidebar-collapsed .brand .logo h2,
body.sidebar-collapsed .sidebar-bottom,
body.sidebar-collapsed .sidebar-menu .menu-text,
body.sidebar-collapsed .menu-item-has-children > a::after {
  display: none;
}
body.sidebar-collapsed .nav {
  overflow: visible;
}

/* Adjust the top bar alignment when the sidebar is collapsed. In this
   state the sidebar width shrinks to 72px, so the fixed top bar
   should align flush with the content area by shifting its left
   offset accordingly. */
body.sidebar-collapsed .top-bar {
  left: var(--sidebar-collapsed-width);
}
body.sidebar-collapsed .sidebar-menu a {
  justify-content: center;
  padding: 16px 0;
}
body.sidebar-collapsed .sidebar-menu .dashicons {
  margin: 0;
}
body.sidebar-collapsed .collapse-btn .dashicons {
  transform: rotate(180deg);
}

/* When the sidebar is collapsed, shift the toggle button so that it
   remains centred relative to the narrow rail.  The calculation
   subtracts half of the button’s width from the collapsed sidebar
   width so that it overlaps the seam between the sidebar and content. */
/* body.sidebar-collapsed .collapse-btn { */
.collapse-btn.closed {
  /* When the sidebar is collapsed, reposition the toggle to the centre of the rail.
       The button becomes fixed relative to the viewport so it stays centred
       vertically within the collapsed bar.  The left offset uses the collapsed
       sidebar width minus half of the button's width so it overlaps the seam. */
  width: 24px;
  height: 24px;
  position: fixed;
  left: calc(var(--sidebar-collapsed-width) - 15px);
  right: auto;
  transform: translateY(-50%);
}
.collapse-btn.opened {
  position: fixed;
  right: auto;
  transform: translateY(-50%);
  left: 245px;
}

/* Sidebar animation */
.sidebar.animated,
.sidebar.animated .sidebar-content {
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

/* Content smooth animation */
.content {
  -webkit-transition: margin-left 0.4s ease-in-out, left 0.4s ease-in-out;
  -o-transition: margin-left 0.4s ease-in-out, left 0.4s ease-in-out;
  transition: margin-left 0.4s ease-in-out, left 0.4s ease-in-out;
}

/*
 * ====================================================================
 * Fly‑out submenus for the collapsed sidebar
 *
 * When the sidebar is collapsed down to a narrow rail of icons, the
 * Open Mineral UI displays child menu items as a pop‑out panel to
 * the right of the rail rather than inline under the icons. The
 * following rules replicate that behaviour: each parent item with
 * children becomes the anchor for an absolutely positioned panel
 * containing its submenu items. The panel appears on hover or when
 * the menu is opened via a click (by toggling the `.open` class).
 */

/* Position the submenu container relative to its parent in collapsed mode */
body.sidebar-collapsed .sidebar-menu .menu-item-has-children {
  position: relative;
}

/* Base styles for the fly‑out panel: hidden by default */
body.sidebar-collapsed .sidebar-menu .menu-item-has-children > .sub-menu {
  display: none;
  position: absolute;
  /* Position to the immediate right of the collapsed rail (72px) */
  left: 72px;
  top: 0;
  /* z-index: 1000; */
  z-index: 999;
  background: var(--sidebar-bg);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 4px 0;
  min-width: 200px;
}

/* Triangle pointer connecting the fly‑out to the collapsed rail */
body.sidebar-collapsed
  .sidebar-menu
  .menu-item-has-children
  > .sub-menu::before {
  content: "";
  position: absolute;
  left: -8px;
  /* Vertically align the pointer roughly with the middle of the first child row */
  top: 20px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent var(--sidebar-bg) transparent transparent;
}

/* Show the fly‑out on hover or when the parent is open */
body.sidebar-collapsed .sidebar-menu .menu-item-has-children:hover > .sub-menu,
body.sidebar-collapsed .sidebar-menu .menu-item-has-children.open > .sub-menu {
  display: block;
}

/* Styles for items inside the fly‑out panel */
body.sidebar-collapsed .sidebar-menu .menu-item-has-children > .sub-menu li a {
  display: block;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--sidebar-text);
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
body.sidebar-collapsed
  .sidebar-menu
  .menu-item-has-children
  > .sub-menu
  li:last-child
  > a {
  border-bottom: none;
}
body.sidebar-collapsed
  .sidebar-menu
  .menu-item-has-children
  > .sub-menu
  li
  a:hover,
body.sidebar-collapsed
  .sidebar-menu
  .menu-item-has-children
  > .sub-menu
  li.current-menu-item
  > a {
  background: var(--sidebar-active-bg);
  color: #ffffff;
}

/* Hide icons and arrows inside the fly‑out to mimic the reference */
body.sidebar-collapsed
  .sidebar-menu
  .menu-item-has-children
  > .sub-menu
  .dashicons,
body.sidebar-collapsed
  .sidebar-menu
  .menu-item-has-children
  > .sub-menu
  li
  a::after {
  display: none;
}

/* Highlight parent rows when hovered or active even in collapsed mode */
body.sidebar-collapsed .sidebar-menu li.current-menu-item > a,
body.sidebar-collapsed .sidebar-menu li.current-menu-ancestor > a,
body.sidebar-collapsed .sidebar-menu a:hover {
  background: var(--sidebar-active-bg);
  color: #ffffff;
}
body.sidebar-collapsed .sidebar-menu li.current-menu-item > a .dashicons,
body.sidebar-collapsed .sidebar-menu li.current-menu-ancestor > a .dashicons,
body.sidebar-collapsed .sidebar-menu a:hover .dashicons {
  color: #ffffff;
}

/*---------------------------------------------------------------------
 * Footer styles
 *
 * The site footer appears below the main content on every page. It contains
 * a simple copyright notice and is designed to be unobtrusive while still
 * readable. The text is centred and uses a small font size to avoid
 * distracting from the main content. A subtle top border helps separate
 * the footer from the rest of the page.
 */
.site-footer {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border-top: 1px solid #e2e2e2;
  color: #606a78;
  font-size: 0.8rem;
  line-height: 1.4;
  /* Align the footer content to the left to mimic the Open Mineral layout */
  text-align: left;
  /* Offset the footer by the width of the fixed sidebar so it aligns with the main content */
  margin-left: var(--sidebar-width);
  padding: 16px 24px;
  margin-top: 4px;
}

.site-footer a {
  /* Use a blue hue similar to the Open Mineral links for legal pages */
  color: #386ed5;
  text-decoration: underline;
}

/* Ensure the legal links in the footer have a small gap above them */
.site-footer .legal-links {
  margin-top: 4px;
}

/*
 * Sidebar scrolling behaviour
 *
 * Allow the entire sidebar (including the logo, navigation and support
 * sections) to scroll as one unit when its contents exceed the viewport
 * height.  This prevents the logo and bottom contact details from being
 * pinned separately and ensures they move together with the rest of the
 * menu.  The horizontal overflow is hidden to avoid unwanted side scrolling.
 */
/* Restore the sidebar to a flex container so that the navigation can grow
   and the footer stays at the bottom.  Horizontal overflow remains hidden. */
.sidebar {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* When the sidebar is collapsed, reduce the offset on the footer accordingly */
body.sidebar-collapsed .site-footer {
  margin-left: var(--sidebar-collapsed-width);
}

/*---------------------------------------------------------------------
 * Legal notice styles
 *
 * Styles for the legal notice section that appears on the front page. This
 * block is kept compact with a smaller font size and muted colour. The
 * margins are adjusted to reduce space above the copyright, emulating
 * the Open Mineral layout. Paragraphs inside reset their bottom margin to
 * maintain consistent spacing.
 */
.legal-notice {
  font-size: 0.8rem;
  color: #606a78;
  margin-top: 8px;
  margin-bottom: 0;
}

.legal-notice p {
  margin-top: 0;
  margin-bottom: 4px;
}

/* Remove default margins on headings inside the top bar to reduce
 * unnecessary vertical whitespace */
.top-bar h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

/*
 * Customise scrollbars
 *
 * Reduce the thickness of scrollbars and remove rounded corners from
 * both the track and thumb for a sleeker look.  These rules apply
 * to WebKit browsers (Chrome, Safari) which support the
 * ::-webkit-scrollbar pseudo-elements.  Other browsers will fall
 * back to their default scrollbars.
 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0;
}
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0;
}

/*
 * Top bar actions and profile menu
 *
 * The top bar includes notification and language icons along with a
 * profile dropdown for account-related links. These styles provide
 * spacing, alignment and interactivity consistent with the Open Mineral
 * dashboard interface. The dropdown opens on click and closes when
 * clicking outside via accompanying JavaScript (see toggle.js).
 */
/*
 * Top bar container styling
 *
 * Combine sticky positioning with a flex layout so that the page title
 * and user controls remain visible at the top of the viewport while
 * scrolling. The position: sticky declaration ensures the bar sticks
 * when the user scrolls past it. A high z-index keeps it above
 * page content. Absolute positioning of the actions is handled via
 * .top-actions to align icons on the far right.
 */
.top-bar {
  /* Fix the top bar to the top of the viewport so it doesn’t scroll
       away when scrolling down the page. The left offset matches the
       sidebar’s width so that the bar aligns flush with the content
       area.  A high z-index ensures it remains above page content. */
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  z-index: 999;
  background: #ffffff;
  display: flex;
  align-items: center;
  /* Increase vertical padding to match the taller header used on the home page.
       This ensures a consistent height across all pages. */
  padding: 20px 24px;
  border-bottom: 1px solid #e2e2e2;
  margin: 0;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Position the actions in the absolute top-right corner of the header */
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: #606a78;
}
.icon-btn .dashicons {
  font-size: 20px;
}
.profile-dropdown {
  position: relative;
}
.profile-trigger {
  display: flex;
  align-items: center;
  /* Style the profile button to mimic the Open Mineral user control. A soft
       grey‑blue background with rounded corners and white text creates a pill
       shape that stands apart from the surrounding header. */
  background: #626d8c;
  color: #ffffff;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  gap: 6px;
}
.profile-trigger .dashicons-admin-users {
  margin-right: 4px;
}
.profile-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: #ffffff;
  border: 1px solid #e2e2e2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 220px;
  display: none;
  z-index: 999;
}
.profile-menu li {
  margin: 0;
}
.profile-menu a {
  display: block;
  padding: 8px 16px;
  color: #222222;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}
.profile-menu a:hover {
  background: #f5f5f5;
  color: #000000;
}
.profile-dropdown.open .profile-menu {
  display: block;
}

/*
 * Dropdown styling for user profile menu. Each item is separated by a subtle
 * border. Icons appear to the left of the text and are coloured a
 * muted slate. The "Sign Out" link is coloured red to draw attention.
 */
.profile-menu li {
  border-bottom: 1px solid #f0f0f0;
}
.profile-menu li:last-child {
  border-bottom: none;
}
.profile-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #263260;
  font-weight: 500;
  text-decoration: none;
  font-size: 14px;
}
.profile-menu li a:hover {
  background: #f5f7fb;
}
.profile-menu li a .dashicons {
  font-size: 18px;
  color: #626d8c;
}
.profile-menu li a.sign-out {
  color: #e14646;
}

/* === Insights page specific styles === */
/* Scope these rules by the .insights-content container to avoid interfering with other pages. */
.insights-content .insights-layout {
  display: flex;
  /* Allow columns to stretch and scroll independently */
  flex: 1;
  min-height: 0;
}
.insights-content .insights-list {
  /*
     * Left column containing the list of insights.
     *
     * We explicitly set a height relative to the viewport so that this column
     * can scroll independently from the article.  Without a fixed height the
     * browser will treat the entire page as one scroll container and the
     * list will move in tandem with the article.  The 160px offset roughly
     * accounts for the fixed top bar and padding; adjust this value if the
     * header height changes.  A light background similar to the Open Mineral
     * interface is applied and the border delineates the separation between
     * the list and article.
     */
  width: var(--insights-list-width);
  background: #f5f7fa;
  border-right: 1px solid #e5e7eb;
  /*
     * Pin the list to the viewport below the top bar and let it scroll
     * independently of the article.  The sticky positioning keeps the
     * list anchored under the 88px top padding defined on .content.  The
     * height calculation fills the remaining viewport height so the list
     * extends down to the page footer.  Overflow on the Y axis allows
     * users to scroll through all posts without moving the article.
     */
  /*
     * Instead of relying on sticky positioning—which can be fragile inside nested flex
     * layouts—use a fixed position to pin the insights list under the top bar. The
     * left offset accounts for the sidebar width (260px) and the content padding
     * (24px) so the list aligns perfectly with the content area.  Top is set to
     * the same padding-top used on .content (88px) so the list begins just below
     * the page header.  Height fills the remainder of the viewport so the list
     * extends all the way to the page footer.  Users can scroll within this
     * column independently of the article on the right.
     */
  position: fixed;
  /* left: calc(var(--sidebar-width) + 24px); */
  /* Position the list so that it starts just below the page title.  The
       additional 32px offset (88+32) approximates the height of the
       heading bar itself, aligning the first list item with the bottom
       edge of the “Latest industry insights” title. */
  /* Align the top of the list with the page heading.  A 112px offset
       approximates the combined height of the top bar and the title row. */
  top: 64px;
  /* Stretch the list down to the bottom of the viewport so it fills
       the entire page.  With the top bar height accounted for in the
       padding-top override below, no additional bottom offset is needed. */
  height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.insights-content .insights-list-item {
  /* Each individual row in the list.  We use a white background and a subtle
       border to mimic Open Mineral’s card‑like entries.  Padding and font
       sizes are adjusted for better legibility. */
  display: block;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  text-decoration: none;
  color: #111827;
  background: #ffffff;
}
/* On hover, lightly darken to indicate interactivity */
.insights-content .insights-list-item:hover {
  /* Lightly darken the item when hovered */
  background: #f5f7fa;
}
/* Active/selected post in the list */
.insights-content .insights-list-item.active {
  /* Highlight the selected post with a white background and a left accent bar */
  background: #ffffff;
  box-shadow: inset 4px 0 0 0 #0a66c2;
}
.insights-content .insights-list-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #111827;
}
.insights-content .insights-list-excerpt {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 4px;
}
.insights-content .insights-list-date {
  font-size: 0.75rem;
  color: #9ca3af;
}
.insights-content .insights-detail {
  flex: 1;
  position: relative;
  /* Let the article scroll with the main page instead of within its own container */
  overflow-y: visible;
  padding: 24px 64px 40px 40px;
  background: #ffffff;
  /* Offset the article to the right by the width of the pinned insights list plus
       the default content padding (24px).  This prevents the article from
       overlapping the fixed list. */
  margin-left: calc(var(--insights-list-width) + 24px);
  /* allow the element to shrink when contained in a flex parent so scrolling
       works correctly */
  min-height: 0;
}
.insights-content .insight-share-rail {
  position: absolute;
  left: 0;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.insights-content .insight-share-rail .share-linkedin,
.insights-content .insight-share-rail .share-email {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
}
.insights-content .insight-share-rail .share-linkedin {
  background: #0a66c2;
}
.insights-content .insight-share-rail .share-email {
  background: #6b7280;
}
.insights-content .insight-article {
  max-width: 760px;
  /* Provide a modest margin between the article and the list without reserving space for a side rail */
  margin-left: 24px;
}
.insights-content .insight-article-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #111827;
}
.insights-content .insight-article-date {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 16px;
}
.insights-content .insight-article-content p {
  margin-bottom: 1.2em;
  line-height: 1.6;
  font-size: 0.9rem;
  color: #374151;
}
/* Make lists and tables inside content adopt consistent styling */
.insights-content .insight-article-content ul,
.insights-content .insight-article-content ol {
  margin-bottom: 1.2em;
  padding-left: 1.2em;
}

/* Share block appears below the article content similar to Open Mineral. */
.insights-content .insight-share-block {
  margin-top: 32px;
  width: 56px;
  padding: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.insights-content .insight-share-block .share-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 8px;
}
.insights-content .insight-share-block a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: #ffffff;
  text-decoration: none;
}
.insights-content .insight-share-block a.linkedin {
  background: #0a66c2;
}
.insights-content .insight-share-block a.email {
  background: #6b7280;
}

/* Additional footer within the insights page detail column */
.insights-content .insights-copyright {
  margin-top: 32px;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
}
.insights-content .insights-copyright .legal-links {
  margin-top: 4px;
}
.insights-content .insights-copyright a {
  color: #2f55d4;
  text-decoration: none;
}
.insights-content .insights-copyright a:hover {
  text-decoration: underline;
}
.insights-content .insights-copyright .sep {
  margin: 0 6px;
  color: #6b7280;
}

/* Adjust the top padding specifically on the insights page so the list aligns
   directly below the heading.  The default padding-top on .content is 88px;
   we reduce it to 64px here to remove the excess space. */
.insights-content {
  padding-top: 64px;
}

/* On the insights page the main content height should be automatic so that the
   article uses the browser's main scrollbar rather than its own. Override
   any previously defined height on this element. */
.insights-content .main-content {
  height: auto !important;
}

/* Configure the main-content area on the insights page as a flex container so
   the top bar remains fixed and the insights layout fills the remaining space. */
.insights-content .main-content {
  display: flex;
  flex-direction: column;
  /* subtract an approximate height for the top bar to ensure the scroll areas
       fill the viewport. Adjust this value if the top bar height changes. */
  height: calc(100vh - 80px);
}

/* Responsive: stack columns on tab or laptop screens */
@media (max-width: 63.99rem) {
  .mobile-menu-icon button.icon-btn {
    display: block;
  }
  .collapse-btn {
    display: none !important;
  }
  .sidebar {
    display: none;
  }

  .content {
    margin-left: unset;
    .top-bar {
      left: 0;
    }
  }
  .overlay {
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 999;
    background-color: #000;
    opacity: 0.25;
    display: block;
    top: 0;
  }
}