/* ============================================================== */




/* =========================
   LogicLama – Warm Dark UI
   ========================= */

* { box-sizing: border-box; }


html, body {
  color: #e5e7eb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  margin: 0;
  padding: 0;

  background-color: #0b0f14;
  /*background-image: url("/sites/default/files/theme/LL-bg2.webp");*/
  background-repeat: no-repeat;
  background-position: center top;
    /*background-position: center -100px;*/
  background-size: cover;        /* FULL PAGE */
  background-attachment: fixed;  /* stays pinned */

  color: #e5e7eb;
}

/* ================= PAGE LOAD BACKGROUND PINCH (DRUPAL-SAFE) ================= */

/* make the wrapper the stacking context */
.dialog-off-canvas-main-canvas {
  position: relative;
  z-index: 0;
}

.dialog-off-canvas-main-canvas::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background: url("/sites/default/files/theme/LL-bg2.webp") no-repeat center top / cover;

  animation: bg-breath 900ms cubic-bezier(.22,.61,.36,1) both;
  will-change: transform, opacity;
}

@keyframes bg-breath {
  0% {
    transform: scale(1.04) translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}


/* optional accessibility */
@media (prefers-reduced-motion: reduce) {
  .dialog-off-canvas-main-canvas::before { animation: none; }
}








/*============================= SEARCH bock ===========================*/
/* //////////////////////////////////////////////////////////////////////// */
#search-block-form input[type="search"] {
  background-color: rgb(0 0 0 / 60%);
}

.user-login-form input,
.user-register-form input,
.user-pass input {
  background-color: rgb(0 0 0 / 60%);
}


#search-block-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width:100%;

}

#search-block-form .form-item {
flex: 0 1 60%;              /* input takes remaining space */
}

#search-block-form input[type="search"] {
  width: 100%;
}


#search-block-form .form-item {
  flex: 1 1 auto;
  min-width: 0; /* IMPORTANT */
}

#search-block-form input[type="search"] {
  width: 100%;
  max-width: none; /* overrides the 280px rule */
}

#search-block-form .form-actions {
  flex: 0 0 auto;
}




li {list-style: none !important;}

/* ============================ MAIN MENU =========================== */
/* //////////////////////////////////////////////////////////////////////// */

#block-logiclama-mainnavigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#block-logiclama-mainnavigation ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

#block-logiclama-mainnavigation ul li {
  display: list-item;
  list-style: none;

  margin: 0 5px;
  background-color: rgb(0 0 0 / 60%);
  border-radius: 12px;
  padding: .65rem 1rem;
}

#block-logiclama-mainnavigation ul li:hover {
  cursor: pointer;
  text-decoration:none;
  background-color: rgb(0 0 0 / 90%);
}

    /* ---------------------- hide child Links ------------------ */

/* Hide submenus by default */
#block-logiclama-mainnavigation li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  background: rgb(0 0 0 / 80%);
  border-radius: 12px;
  padding: 0.5rem 0;
  margin: 0;

  min-width: 180px;
  z-index: 1000;
}


    /* --------------- Show submenu on hover or focus ---------------- */

#block-logiclama-mainnavigation li:hover > ul,
#block-logiclama-mainnavigation li:focus-within > ul {
  display: block;
}

#block-logiclama-mainnavigation li {
  position: relative;
}

#block-logiclama-mainnavigation li ul li {
  display: block;
  padding: 0;
}

#block-logiclama-mainnavigation li ul a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

#block-logiclama-mainnavigation li ul a:hover {
  background-color: rgb(255 255 255 / 10%); /* <-------- HOVER BUTTON COLOR */
}


    /* -------------------- KEEP TEXT IN ONE LINE ---------------- */

#block-logiclama-tabs ul li {
  display: block;
  padding: 0;
}

#block-logiclama-tabs  ul a {
  display: block;
  white-space: nowrap;  /* <----------- TEXT IN ONE LINE */
}






/* ========================= TRANSLATE dropdown ========================= */
/* //////////////////////////////////////////////////////////////////////// */

#block-logiclama-languageswitcher ul {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: rgb(0 0 0 / 85%);
  border-radius: 12px;
  padding: 0.5rem 0;
  text-align: right;
  background-color: rgb(0 0 0 / 60%);
}

#block-logiclama-languageswitcher:hover ul {
  display: block;
    text-align: right;
  background-color: rgb(0 0 0 / 60%);
}






/* ========================= USER Menu/Login ========================= */
/* //////////////////////////////////////////////////////////////////////// */

/* ------- Push user menu to visual edge inside padded grid ---------- */
#block-logiclama-useraccountmenu {
  justify-self: end;
  margin-right: 1.5rem;
}

#block-logiclama-useraccountmenu {
  top: 0;
  magrin:0;
}

#block-logiclama-useraccountmenu ul {
  display: flex;
  justify-content: flex-end;
}

#block-logiclama-mainnavigation ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  margin: 0;
  padding: 0;
  list-style: none;
}

#block-logiclama-mainnavigation li {
  flex: 0 0 auto;
}

#block-logiclama-mainnavigation a {
  white-space: nowrap;
}

#block-logiclama-useraccountmenu ul li {
  display: list-item;
  list-style: none;
  padding: 0;
  margin: 0 5px;
}

#block-logiclama-useraccountmenu ul li:hover {
  cursor: pointer;
  /*outline: 2px deeppink solid;*/
}





/* ========================= LANGUAGE MENU ========================= */
/* //////////////////////////////////////////////////////////////////////// */

#block-logiclama-languageswitcher {
  position: relative;
  justify-self: end;
  margin-right: 1.5rem;
}

#block-logiclama-languageswitcher > ul {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;

  background: rgb(0 0 0 / 85%);
  border-radius: 12px;
  padding: 0.5rem 0;
  margin: 0;

  min-width: 180px;
  z-index: 2000;
}

#block-logiclama-languageswitcher:hover > ul,
#block-logiclama-languageswitcher:focus-within > ul {
  display: block;
}

#block-logiclama-languageswitcher > ul > li {
  display: block;
  margin: 0;
}

#block-logiclama-languageswitcher > ul a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* ------------ Hide language title visually but keep it clickable ------ */
#block-logiclama-languageswitcher h2 {
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* ------------------------- LANGUAGE: icon  --------------------- */
#block-logiclama-languageswitcher h2::after {
  content: "🇬🇧";    /* 🌐 */
  font-size: 1rem;
  line-height: 1;
}

#block-logiclama-languageswitcher ul {
  right: 0;
  left: auto;
}

/* ------------------ LANGUAGE: Hover button color ----------------- */
#block-logiclama-languageswitcher ul li:hover {
  cursor: pointer;
  /*outline: 2px deeppink solid;*/
}






/* ======================= Second MENU (in Content) ======================= */
/* //////////////////////////////////////////////////////////////////////// */

#block-logiclama-tabs  { margin-left:-25px; padding:10px; }
#block-logiclama-tabs ul {
   margin-left:-25px;
  display: flex;
  justify-content: flex-start;
}


#block-logiclama-tabs ul li {
  display: list-item;
  list-style: none;
  padding: 0;
  margin: 0 10px;

  /*outline: 2px violet solid;*/
}


#block-logiclama-tabs ul li:hover {
  cursor: pointer;
  /*outline: 2px deeppink solid;*/
}









/* ================================== HEADER ============================== */
/* //////////////////////////////////////////////////////////////////////// */

  .region-header {
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 1rem 1.25rem;
  }


  /* ===== HEADER LAYOUT (FIXED) ===== */
  header[role="banner"] > div {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* logo */
  #block-logiclama-site-branding {
    margin-right: 1rem;
  }

  /* main menu takes middle space */
  #block-logiclama-mainnavigation {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  /*---------------------- Search, User-Menu, Language ------------------- */
  #block-logiclama-headersearchtoggle,
  #block-logiclama-useraccountmenu,
  #block-logiclama-languageswitcher {
    display: inline-flex;
    align-items: center;
    margin-left: 0px;   /* <-----------THIS WILL NOW WORK */
  }


  #block-logiclama-headersearchtoggle {
    position: relative;
  }

  #block-logiclama-searchform {
    position: absolute;
    top: calc(100% + .75rem);
    right: 0;
    z-index: 999999;
  }

  #block-logiclama-mainnavigation,
  #block-logiclama-useraccountmenu,
  #block-logiclama-languageswitcher,
  #block-logiclama-mobilehamburgermenu {
    display: block;
  }

  #block-logiclama-mobilehamburgermenu {
    display: none !important;
  }






/* ============================== CONTENT ================================= */
/* //////////////////////////////////////////////////////////////////////// */

  .layout-container {
    max-width:1100px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 1rem 1.5rem;
    /*padding: .9rem 1.1rem;*/

  }

  #block-logiclama-mainpagecontent {
    border-radius: 16px;
    padding:10px 12px;

    background-color: rgb(0 0 0 / 30%);
    border: solid 0px #4d4e51;    /* <------------- border color*/

  }

/* --------------- innder content div/item style ----------------- */
  #block-logiclama-mainpagecontent div {
    padding:1px;
  }




/* ---------------- automatically style all Sections: ------------------ */
/* Account, Picture upload, Contact, forms, node edit / user edit forms  */


/* ------------Panels ONLY – exclude action/button wrappers ------------ */
  #block-logiclama-mainpagecontent .form-wrapper:not(.form-actions),
  #block-logiclama-mainpagecontent .js-form-wrapper:not(.form-actions),
  #block-logiclama-mainpagecontent details {
    border-radius: 16px;
    padding: 24px 26px;
    margin-bottom: 6px;

  /*  background: rgb(0 0 0 / 45%);  <------------- bg color*/
    border: solid 1px #4d4e51;    /* <------------- border color*/
  }




/* Text inside panels    - not doing anything*/
  #block-logiclama-mainpagecontent
    .form-wrapper:not(.form-actions) p,
  #block-logiclama-mainpagecontent
    .js-form-wrapper:not(.form-actions) p,
  #block-logiclama-mainpagecontent
    details p {
    font-size: 1.95rem;
    line-height: 1.55;
    color: #e5e7eb;
    margin-bottom: .75rem;
  }

/* --------------------------- Labels --------------------------- */
  #block-logiclama-mainpagecontent
    .form-wrapper:not(.form-actions) label, #block-logiclama-mainpagecontent
    details label {
    font-weight: 600;
    font-size: .95rem;
    color: #cbd5e1;
    margin-bottom: 25px;
    padding-bottom:20px;
  }

/* ----------------------- Help / descriptions ----------------------- */
  #block-logiclama-mainpagecontent
    .description,
  #block-logiclama-mainpagecontent
    .form-item--description {
    font-size: .9rem;
    color: #94a3b8;
    padding:5px;
  }


/* ----------------- Headings inside panels (automatic) ---------------*/
  #block-logiclama-mainpagecontent
    .form-wrapper:not(.form-actions) h2,
  #block-logiclama-mainpagecontent
    .form-wrapper:not(.form-actions) h3,
  #block-logiclama-mainpagecontent
    details > summary {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .75rem;
  }



/* ------------------- make <details> sections cleaner --------------------*/
  #block-logiclama-mainpagecontent details > summary {
    font-weight: 600;
    cursor: pointer;
    margin-bottom: .75rem;
  }

  #block-logiclama-mainpagecontent details[open] > summary {
    margin-bottom: 1rem;
  }


/* ----------------- remove double padding inside panels ---------------*/
  #block-logiclama-mainpagecontent .form-wrapper > .form-wrapper {
    background: none;
    padding: 0;
  }


/* ----------- NEVER allow button containers to look like panels ---------*/
  #block-logiclama-mainpagecontent .form-actions {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }


  #block-logiclama-mainpagecontent .form-actions {
    margin-top: 1.1rem;   /* <----------- button margin/separate*/
  }




/* -------------- Force checkbox items to stack ---------------- */
  .form-item.js-form-type-checkbox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

/* ---------------- Checkbox on its own line ------------------*/
  .form-item.js-form-type-checkbox input.form-checkbox {
    margin: 0 0 .4rem 0;
    width: 20px;
    height:20px;
  }

/* ----------------- Label below checkbox ------------------- */
  .form-item.js-form-type-checkbox label.option {
    display: block;
    margin-left: 0 !important;
    line-height: 1.4;
    width: 100%;
  }






/* ================ BLOCK ---- Messages / notifications =================== */
/* //////////////////////////////////////////////////////////////////////// */

[data-drupal-messages] {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;

  background-color: rgb(2 0 0 / 20%);
  border-radius: 16px;
  padding:16px 22px;

  margin: 0 auto;

  margin-top:2px;
  margin-bottom:30px;


  width: 100%;
  border:solid 1px #6b6b6b;

  color:#fff;
}








/* ================================ LAYOUT /Content ======================= */
/* //////////////////////////////////////////////////////////////////////// */

/* ------------------------ Layout Builder compatible !! ------------------ */
.layout-content {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;

  top:60px;
}

.region-content {
  /*background: #111827;*/
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}






/* =================================== FOOTER ============================= */
/* //////////////////////////////////////////////////////////////////////// */

  /* flex row for footer blocks */
  footer[role="contentinfo"] > div {
    display: flex !important;
    flex-wrap: wrap !important;
    /*justify-content: center !important;  center the menus as a group */
    justify-content: flex-start !important;

    gap: 4rem !important;               /* spacing BETWEEN menus */
  }

  /* footer menus */
  footer[role="contentinfo"] > div > nav {
    flex: 0 0 auto !important;
  }

  /* IMPORTANT: remove auto-push */
  #block-logiclama-tools {
    margin-left: 0 !important;
  }

  /* copyright always below */
  #block-logiclama-copyright {
    flex: 0 0 100% !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 1.5rem !important;
  }




/* =============================== BLOCKS ================================= */
/* //////////////////////////////////////////////////////////////////////// */

.block {
  margin-bottom: 1.25rem;
}







/* ================================= LINKS ================================ */
/* //////////////////////////////////////////////////////////////////////// */

  a {
    color: #93c5fd;
    text-decoration: none;
  }
  a:hover { text-decoration: underline; }




/* ================================== FORMS =============================== */
/* //////////////////////////////////////////////////////////////////////// */

  input, textarea, select {
    width: 100%;
    background: #0b1220;
    color: #e5e7eb;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    padding: .8rem .7rem;

    font-size:16px;
  }

  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(147,197,253,.15);
  }



/* ================================= BUTTONS =============================== */
/* //////////////////////////////////////////////////////////////////////// */

  button,
  input[type=submit] {
    background: #2563eb;
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: .65rem 1rem;
    cursor: pointer;
    margin 2px;
  }
  button:hover,
  input[type=submit]:hover {
    background: #1d4ed8;
  }


/* =========================== FORM WIDTH CONTROL ========================= */
/* //////////////////////////////////////////////////////////////////////// */

  /* Default: desktop/tablet */
  input,
  textarea,
  select {
    max-width: 380px;
  }

  /* Buttons should size to content */
  button,
  input[type=submit] {
    width: auto;
  }












/* ========================== SEARCH ICON BUTTON ======================== */
/* //////////////////////////////////////////////////////////////////////// */

  .ll-search-icon {
    width: 42px;
    height: 42px;
    background: #fff;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.5 3a6.5 6.5 0 015.2 10.4l4.45 4.45-1.4 1.4-4.45-4.45A6.5 6.5 0 119.5 3zm0 2a4.5 4.5 0 100 9 4.5 4.5 0 000-9z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    cursor: pointer;
  }

  /* still needed */
  .ll-search-icon::-webkit-details-marker,
  .ll-search-icon::marker {
    display: none;
  }




/* ------------------------- Hide search by default -------------------*/

  #block-logiclama-searchform {
    position: absolute;
    top: 100%;
    right: 0;

    opacity: 0;
    pointer-events: none;

    width: 650px;
    /*padding: 1rem;*/

    background: rgb(0 0 0 / 85%);
    border-radius: 14px;
    z-index: 900;
  }



/* --------------- SHOW search when the toggle is open ----------------- */

  #block-logiclama-headersearchtoggle:has(.ll-search-details[open])
    ~ #block-logiclama-searchform {
    opacity: 1;
    pointer-events: auto;
  }

/*==========================================================================*/
/* --------------------- Firefox-safe toggle ----------------------- */

  #block-logiclama-headersearchtoggle[data-search-toggle]
    details[open]
    ~ * {
    /* no-op: anchor point */
  }

  #block-logiclama-headersearchtoggle[data-search-toggle]
    details[open]
    {
    /* force sibling search block visible */
  }

  #block-logiclama-headersearchtoggle[data-search-toggle]
    details[open]
    {
    /* We flip visibility by stacking context instead */
  }

  #block-logiclama-headersearchtoggle[data-search-toggle]
    details[open] {
    z-index: 901;
  }

  #block-logiclama-searchform {
    z-index: 900;
  }

/* --------------------- Firefox-safe toggle ----------------------- */
/*==========================================================================*/




/* =--------------------- DESKTOP: order --------------------------- */

#block-logiclama-site-branding      { order: 1; }
#block-logiclama-mainnavigation     { order: 2; }

#block-logiclama-headersearchtoggle { order: 3; }
#block-logiclama-useraccountmenu    { order: 4; }
#block-logiclama-languageswitcher   { order: 5; }





/* ------------------- DESKTOP: search opens -------------------*/

  #block-logiclama-searchform {
    position: absolute;
    top: 20%;
     /*right: 100%;              ⬅️ THIS is the key */
    margin-right: 20px;       /* space from icon */
    transform: translateY(92%);
    width: 320px;
    z-index: 999999;
  }







/* ------------------------------------------------------------------------- */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%%%%%%%%%%%%%%%%%%%%%% [ MOBILE LAYOUT ] %%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%%%%%%%%%%%%%%%%%%%%%% [ MOBILE LAYOUT ] %%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%%%%%%%%%%%%%%%%%%%%%% [ MOBILE LAYOUT ] %%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%%%%%%%%%%%%%%%%%%%%%% [ MOBILE LAYOUT ] %%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* ------------------------------------------------------------------------- */





/* =============================== MOBILE base ============================ */
/* //////////////////////////////////////////////////////////////////////// */

/* ----------------------- @768px : 1 column  ------------------ */
@media (max-width: 768px) {

  .layout-content {
    grid-template-columns: 1fr;
  }

  /* Show both sidebars again */
  .layout-content > .layout-sidebar-first,
  .layout-content > .layout-sidebar-second {
    display: block;
  }

  /* -------------------- Reset grid placement ------------------ */
  .layout-content > * {
    grid-column: auto;
  }

  /* Stack search */
  #search-block-form {
    display: block;
    width: 100%;
  }

  #search-block-form input,
  #search-block-form button {
    width: 100%;
    max-width: none;
  }

  #search-block-form .form-actions {
    margin-top: 0.5rem;
  }


} /* <---------------------- END  */






/* ============================= MOBILE header ============================ */
/* //////////////////////////////////////////////////////////////////////// */

@media (max-width: 768px) {
  header[role="banner"] > div {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center;
  }

  #block-logiclama-site-branding {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  #block-logiclama-useraccountmenu {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  #block-logiclama-mainnavigation {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center;
  }

  #block-logiclama-mainnavigation ul {
    padding-inline: 0;
  }

  #block-logiclama-languageswitcher:focus-within ul {
    display: block;
  }


  #block-logiclama-languageswitcher, #block-logiclama-useraccountmenu {
    grid-row: 1;
    align-self: center;
  }

  #block-logiclama-languageswitcher {
    margin-right: 0.5rem;
  }

  /* ---------------- Hide desktop menus ONLY on mobile -----------------*/
  #block-logiclama-mainnavigation,
  #block-logiclama-useraccountmenu,
  #block-logiclama-languageswitcher {
    display: none !important;
  }

/* -------------------------- HACKS/FIXes -------------------------- */

    #block-logiclama-mainnavigation ul {
      overflow-x: auto;
      scrollbar-width: none; /* Firefox */
    }

    #block-logiclama-mainnavigation ul::-webkit-scrollbar {
      display: none; /* Chrome */
    }




} /* <---------------------- END  */









/* ===================== MOBILE hamburger & menu ! ======================== */
/* //////////////////////////////////////////////////////////////////////// */

@media (max-width: 768px) {

  #block-logiclama-mobilehamburgermenu {
    display: block !important;
    position: relative;
    z-index: 99999;
  }

  #block-logiclama-mobilehamburgermenu {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  .ll-details {
    position: relative;
  }

  .ll-hamburger {
    list-style: none;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: rgb(0 0 0 / 75%);
    border-radius: 12px;
    cursor: pointer;
  }

  .ll-hamburger::-webkit-details-marker {
    display: none;
  }

  .ll-hamburger span {
    width: 24px;
    height: 2px;
    background: #fff;
    display: block;
  }

  .ll-nav-panel {
    margin-top: .5rem;

    /*background: rgba(0,0,0,.95);*/
    background-color:#6e6e6e; opacity:0.9;

    padding: .4rem;

    border-radius: 14px;
    min-width: 330px;
  }

  .ll-nav-link {
    display: block;
    padding: .45rem 0;
    white-space: nowrap;
  }


  /* --------------------- hide panel when closed ------------------ */
  .ll-details:not([open]) .ll-nav-panel {
    display: none;
  }


  /* --------------------- show panel when open -------------------- */
  .ll-details[open] .ll-nav-panel {
    display: block;
  }

  #ll-nav-panel #text {
    margin-bottom:0;
      padding-bottom:0;
      display: none;
  }


  /* -------------------- FORCE link visibility ------------------ */
  .ll-nav-panel a {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;

    padding:15px;
    /*background-color: rgb(0 0 0 / 40%);     <-------------- link bg */
    /*background-color:#005CAD; opacity:0.7;  #6e6e6e  grey*/

    border-radius: 24px;
    font-size: 17px;

    margin-bottom: .5rem;  /* <------------ separation  from each item ====*/
  }



  /* ----------------- spacing so links don't collapse -----------------*/
  .ll-nav-panel a + a {
    /*margin-top: .5rem;*/

  }



.ll-nav-panel  a:hover {       /* <-------------- link hover bg */
    cursor: pointer;
    text-decoration:none;
    background-color: rgb(0 0 0 / 90%);
  }





/* =========================== SEPARATOR ================================ */
hr {
  border: 2px solid #000; /* 636363 */

}





/* ================== Dropdown area position / Overlay ================== */
  .ll-details[open] {
    background-color: rgb(0 0 0 / 60%);
    border-radius: 14px;
    padding: 1rem;
    min-width: 220px;

    position: absolute !important;
    top: calc(100% + 0.75rem);
    right: 0;

    transform: translateX(5%) translateY(-7%);  /* <-------- POSITION */
    z-index: 999999;
  }



  /* --------------------------- anchor ----------------------------- */
    .ll-details {
      position: relative !important;
    }

    /* SINGLE overlay container = details content */
    .ll-details[open] {
      position: relative;
    }

    .ll-details[open] > .ll-nav-panel,
    .ll-details[open] > hr {
      position: static !important;
      display: block !important;

      background-color: transparent;  /* <-------------- link bg */
      /*background-color: rgb(52 5 0 / 60%);   <-------------- link bg */
    }




  /* ---------------------- overlay wrapper -----------------------*/
    .ll-details[open]::after {
      content: "";
    }



  /* ------------- make DETAILS act as the overlay box ----------------*/
    .ll-details[open] {
      position: absolute !important;
      top: calc(100% + 0.75rem);
      right: 0;
      border-radius: 14px;
      padding: 20px;
      z-index: 999999;

      background-color: rgb(0 0 5 / 60%); /* <--------- BG COLOR*/
    }



  /* --------------- align ALL menu items to the right ------------- */
    .ll-details[open] {
      text-align: right;
    }

    .ll-details[open] .ll-nav-link {
      text-align: right;
    }




  /* ---------------------- hamburger button -------------------- */
      .ll-hamburger {
        width: 26px;
        height: 18px;
        cursor: pointer;
        position: relative;
        list-style: none;
      }

      /* ----------------- hide default marker --------------- */
      .ll-hamburger::-webkit-details-marker { display: none; }
      .ll-hamburger::marker { display: none; }



      /* ------------- draw TWO lines (hamburger)--------------- */
      .ll-hamburger::before,
      .ll-hamburger::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: #fff;
        transition: transform .2s ease, top .2s ease, opacity .2s ease;
      }

      .ll-hamburger::before {
        top: 4px;
      }

      .ll-hamburger::after {
        top: 12px;
      }


      /* ------------------- OPEN STATE - show X  ----------------------*/
      .ll-details[open] .ll-hamburger::before {
        top: 8px;
        transform: rotate(45deg);
      }

      .ll-details[open] .ll-hamburger::after {
        top: 8px;
        transform: rotate(-45deg);
      }




} /* <----------------------------- END  -hamburger Menu */







/* ======================= search Toggle/Bar =========================== */
/* //////////////////////////////////////////////////////////////////////// */

@media (max-width: 768px) {

  .ll-search-nav {
    grid-column: 2;
    grid-row: 1;
    margin-right: 3rem; /* space before hamburger */
  }



  /* -------------------- Hide search by default ---------------------- */
  #block-logiclama-searchform {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%) translateX(12px);
    opacity: 0;
    pointer-events: none;
    width: 320px;

    background: rgb(0 0 0 / 85%);
    border-radius: 14px;
    padding: 1rem;
    transition: transform .25s ease, opacity .2s ease;
    z-index: 600;
  }



  #block-logiclama-headersearchtoggle,
  #block-logiclama-mobilehamburgermenu {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  #block-logiclama-searchform {
    top: calc(100% + .75rem);
    right: 0;
    width: 90vw;
  }


  #block-logiclama-searchform { right: 0; width: 90vw; }





} /* <----------------------------- END  -search Toggle */


/* ===== FOOTER: MOBILE STACK ===== */
@media (max-width: 768px) {

  footer[role="contentinfo"] > div {
    flex-direction: column !important;
    align-items: flex-start !important; /* left aligned like rest of site */
    gap: 1.5rem !important;
  }

  footer[role="contentinfo"] > div > nav {
    width: 100% !important;
  }

  #block-logiclama-copyright {
    text-align: center !important;
    margin-top: 1.25rem !important;
  }
}


/* ===== FOOTER MOBILE: FORCE LARGE TAP TARGETS ===== */
@media (max-width: 768px) {

  #block-logiclama-footer a,
  #block-logiclama-tools a,
  #block-logiclama-privacy a {
    display: block !important;
    width: 100% !important;

    font-size: 1.1rem !important;
    padding: .75rem .9rem !important;

    border-radius: 12px;
    text-decoration: none;
  }

  #block-logiclama-footer li,
  #block-logiclama-tools li,
  #block-logiclama-privacy li {
    margin-bottom: .75rem !important;
  }

  #block-logiclama-footer ul,
  #block-logiclama-tools ul,
  #block-logiclama-privacy ul {
    padding-left: 0 !important;
  }
}




/* ===== MOBILE: FULL-WIDTH FORMS FIX ===== */
@media (max-width: 768px) {

  input,
  textarea,
  select {
    max-width: none !important;
    width: 100% !important;
  }

  button,
  input[type=submit] {
    width: 100% !important;
  }
}





/* ============================================================== */