/* Sticky footer layout */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

p {
  margin: 0.875rem 0;
}

/*
dl, ol, ul {
  margin-top: 0.875rem;
}
*/

.container-md {
  flex: 1;
}

/* ~20% wider than Bootstrap 4.4.1 defaults (theme CDN) for main + footer containers */
@media (min-width: 576px) {
  .container,
  .container-sm {
    max-width: 648px;
  }
}

@media (min-width: 768px) {
  .container,
  .container-md,
  .container-sm {
    max-width: 864px;
  }
}

@media (min-width: 992px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 1152px;
  }
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1368px;
  }
}

/* Custom footer height reduction */
footer {
  padding: 1.5rem 0 !important; /* Reduced from 3.125rem (50px) to 1.5rem (24px) */
}

@media (min-width: 768px) {
  footer {
    padding: 1.5rem 0 !important; /* Reduced from 3.125rem to 1.5rem */
  }
}

/* Hide empty footer links list to remove extra line */
.footer-links:empty {
  display: none;
}

.centered-block {
  display: block;
  margin: 0 auto;
}

.scaled-image-20 {
  width: 20%;
  height: auto;
}

.lift-image-with-following-text {
  position: relative;
  top: -3em;
  margin-bottom: -2.5em;
}

.centered-page-title {
  text-align: center;
  font-size: 3rem;
}

/* Hebrew page right-to-left alignment */
.hebrew-rtl .container-md,
.hebrew-rtl .page-content,
.hebrew-rtl .markdown-body,
.hebrew-rtl .content,
.hebrew-rtl .post-content {
  direction: rtl;
  text-align: right;
}

/* Ensure all text elements in Hebrew page are right-aligned */
.hebrew-rtl h1,
.hebrew-rtl h2,
.hebrew-rtl h3,
.hebrew-rtl h4,
.hebrew-rtl h5,
.hebrew-rtl h6,
.hebrew-rtl p,
.hebrew-rtl ul,
.hebrew-rtl ol,
.hebrew-rtl li {
  direction: rtl;
  text-align: right;
}

/* Hebrew link styling */
.faint-link {
  color: #eeeeee;
  text-decoration: none;
  font-size: 0.9em;
  text-align: right;
  direction: rtl;
}

.faint-link a {
  color: #eeeeee;
  text-decoration: none;
}

.faint-link a:hover {
  color: #cccccc;
  text-decoration: underline;
}

/* Override Beautiful Jekyll page heading font size */
@media (min-width: 768px) {
  .intro-header .page-heading h1 {
    font-size: 3rem;
  }
}

/* Beautiful Jekyll navbar uses uppercase styling by default */
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .dropdown-item {
  text-transform: none !important;
}

/* Override Beautiful Jekyll navbar font size */
.navbar-custom .navbar-nav .nav-item {
  font-size: 1.1rem !important;
}

/* Let dropdown width fit its content (desktop/tablet) */
/* Beautiful Jekyll uses `.navbar-custom`, so override there too */
.navbar-custom .dropdown-menu,
.navbar .dropdown-menu {
  width: max-content !important;
  min-width: max-content !important;
  max-width: min(90vw, 32rem) !important;
}

.navbar-custom .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item {
  /* Wrap only at word boundaries (spaces), not mid-word */
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none;
}

/* On small screens, keep same behavior (word-boundary wrapping) */

/* Open navbar dropdowns on hover (desktop / tablet only).
   Mobile keeps the original click-to-toggle behavior, since hover
   doesn't really work on touch screens. Keyboard activation (Enter / Space
   on the focused toggle) still works because Bootstrap's JS is unaffected. */
@media (min-width: 768px) {
  .navbar-custom .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0; /* prevent a small gap that can cause hover flicker */
  }
  /* Make the parent toggle non-clickable on desktop so a mouse click
     on e.g. "Concepts" doesn't try to navigate or close the menu
     awkwardly. Submenu items stay clickable. */
  .navbar-custom .nav-item.dropdown > .dropdown-toggle {
    pointer-events: none;
  }
  .navbar-custom .nav-item.dropdown > .dropdown-menu {
    pointer-events: auto;
  }
}

/* Logo styling 
.avatar-img {
  max-width: 100px;
  height: auto;
  border-radius: 50%;
}

.logo-img {
  max-width: 150px;
  height: auto;
} 
  */