/* =========================================================
   SKYHAWK CLEAN CUSTOM CSS
   Source of truth:
   web/themes/custom/barrio/css/custom.css

   Goals:
   - Keep contrib Bootstrap Barrio mostly clean.
   - Header: login/logout left, branding center, search right.
   - Main menu: blue menu bar only.
   - Preserve YP / Jack memorial.
   - Fix exact Directors page node 730.
========================================================= */


/* =========================================================
   BASE
========================================================= */

body {
  font-size: 16px;
  line-height: 1.45;
}

img {
  height: auto;
}

a {
  color: #006ea8;
}


/* =========================================================
   TOP HEADER: LOGIN LEFT, BRAND CENTER, SEARCH RIGHT
========================================================= */

#navbar-top {
  background: #f8f9fa !important;
  border-bottom: 1px solid #d6dce2 !important;
  padding: 10px 24px !important;
}

#navbar-top > .container {
  max-width: none !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 220px minmax(420px, 1fr) 420px !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Left login/logout zone */
#navbar-top .skyhawk-top-left,
#navbar-top .region-secondary-menu,
#navbar-top .region-top-header,
#navbar-top .menu--account {
  grid-column: 1 !important;
  justify-self: start !important;
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#navbar-top .skyhawk-top-left ul,
#navbar-top .skyhawk-top-left .nav,
#navbar-top .menu--account ul,
#navbar-top .menu--account .nav {
  display: flex !important;
  flex-direction: row !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#navbar-top .skyhawk-top-left a,
#navbar-top .menu--account a {
  color: #003b5c !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: 1.05rem !important;
}

#navbar-top .skyhawk-top-left a:hover,
#navbar-top .menu--account a:hover {
  text-decoration: underline !important;
}

/* Center branding zone */
#navbar-top .skyhawk-top-branding {
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
}

#navbar-top .skyhawk-top-branding #block-bootstrap-barrio-site-branding,
#navbar-top .skyhawk-top-branding .navbar-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

#navbar-top .skyhawk-top-branding img {
  max-height: 58px !important;
  width: auto !important;
  margin: 0 !important;
}

#navbar-top .skyhawk-top-branding .site-name,
#navbar-top .skyhawk-top-branding .navbar-brand,
#navbar-top .skyhawk-top-branding a {
  color: #003b5c !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* Right search zone */
#navbar-top .navbar-form,
#navbar-top .region-top-header-form {
  grid-column: 3 !important;
  justify-self: end !important;
  width: auto !important;
  margin: 0 !important;
}

#navbar-top form,
#navbar-top #search-block-form {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}

#navbar-top .form-item,
#navbar-top .form-actions {
  margin: 0 !important;
}

#navbar-top input[type="search"],
#navbar-top input.form-search {
  width: 280px !important;
  max-width: 280px !important;
}


/* =========================================================
   MAIN BLUE MENU BAR
========================================================= */

#navbar-main {
  background: #2f76a6 !important;
  padding: 0 !important;
  border-bottom: 1px solid #1f557d !important;
}

#navbar-main #block-bootstrap-barrio-site-branding,
#navbar-main .region-header,
#navbar-main .navbar-brand {
  display: none !important;
}

#navbar-main .container {
  justify-content: center !important;
}

#navbar-main .navbar-toggler {
  display: none !important;
}

#CollapsingNavbar,
#CollapsingNavbar.collapse:not(.show) {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
}

#navbar-main .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 0 auto !important;
  gap: .15rem !important;
}

#navbar-main .nav-link {
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: .75rem 1rem !important;
}

#navbar-main .nav-link:hover,
#navbar-main .nav-link:focus {
  background: rgba(255,255,255,.15) !important;
  color: #ffffff !important;
}

/* Dropdowns */
#navbar-main .dropdown-menu {
  background: #2f76a6 !important;
  border: 1px solid #1f557d !important;
  border-radius: 0 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.22) !important;
  padding: .4rem 0 !important;
  min-width: 260px !important;
  z-index: 2000 !important;
}

#navbar-main .dropdown-menu a,
#navbar-main .dropdown-menu .dropdown-item {
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: .7rem 1rem !important;
  text-decoration: none !important;
}

#navbar-main .dropdown-menu a:hover,
#navbar-main .dropdown-menu a:focus,
#navbar-main .dropdown-menu .dropdown-item:hover {
  background: #1f557d !important;
  color: #ffffff !important;
}

@media (min-width: 992px) {
  #navbar-main .dropdown:hover > .dropdown-menu,
  #navbar-main .dropdown:focus-within > .dropdown-menu {
    display: block !important;
    margin-top: 0 !important;
  }
}


/* =========================================================
   GENERAL CONTENT LAYOUT
========================================================= */

body:not(.path-frontpage) #main-wrapper {
  background: #eef3f7;
  padding: 1rem 0 !important;
}

body:not(.path-frontpage) main .section {
  max-width: 1100px;
  margin: 0 auto;
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

body:not(.path-frontpage) h1,
body:not(.path-frontpage) .page-title,
body:not(.path-frontpage) .node__title {
  color: #003b5c;
}

body:not(.path-frontpage) table {
  max-width: 100%;
}

body:not(.path-frontpage) .field--name-body {
  overflow-x: auto;
}


/* =========================================================
   HOMEPAGE FEATURE AREA + CAROUSEL
========================================================= */

body.path-frontpage .region-featured-top {
  max-width: 960px;
  margin: 1.5rem auto;
}

body.path-frontpage .region-featured-top .block {
  background: #f4f4f4;
  color: #073642;
  border-radius: 14px;
  padding: 1.25rem 1.75rem;
  margin: 1.1rem 0;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

body.path-frontpage #skyhawkCarousel {
  max-width: 920px;
  margin: 1rem auto 1.5rem auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0,0,0,.18);
}

body.path-frontpage #skyhawkCarousel .carousel-item,
body.path-frontpage #skyhawkCarousel img {
  height: 360px;
}

body.path-frontpage #skyhawkCarousel img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

body:not(.path-frontpage) #skyhawkCarousel {
  display: none !important;
}


/* =========================================================
   YP / JACK MEMORIAL PAGE
   Do not generalize these rules.
========================================================= */

body.path-memories-of-yp .yp-memories-wrap {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 30px 20px 90px 20px !important;
}

body.path-memories-of-yp .yp-memory-submit {
  text-align: center !important;
  margin: 0 0 50px 0 !important;
}

body.path-memories-of-yp .yp-memory-submit a {
  display: inline-block !important;
  padding: 16px 28px !important;
  background: #17324d !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  font-weight: bold !important;
  font-size: 22px !important;
}

body.path-memories-of-yp .yp-memory-card {
  display: block !important;
  clear: both !important;
  background: #ffffff !important;
  border: 4px solid #b8c8d8 !important;
  border-radius: 18px !important;
  padding: 30px !important;
  margin: 0 0 120px 0 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
}

body.path-memories-of-yp .yp-memory-photo {
  display: block !important;
  text-align: center !important;
  margin: 0 0 35px 0 !important;
  padding: 0 !important;
}

body.path-memories-of-yp .yp-memory-photo img {
  display: block !important;
  width: 100% !important;
  max-width: 700px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
}

body.path-memories-of-yp .yp-memory-name {
  font-size: 32px !important;
  font-weight: bold !important;
  color: #17324d !important;
  margin: 0 0 10px 0 !important;
}

body.path-memories-of-yp .yp-memory-date {
  font-size: 16px !important;
  color: #666 !important;
  margin: 0 0 24px 0 !important;
}

body.path-memories-of-yp .yp-memory-text {
  font-size: 22px !important;
  line-height: 1.7 !important;
  color: #333 !important;
  margin: 0 !important;
}

body.path-memories-of-yp .yp-memory-empty {
  text-align: center !important;
  font-size: 22px !important;
  color: #666 !important;
  margin-top: 50px !important;
}


/* =========================================================
   DIRECTORS / ASSOCIATION LEADERSHIP PAGE
   Exact page: node 730
========================================================= */

body.page-node-730 main .section {
  max-width: 1040px !important;
  width: auto !important;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.page-node-730 .field--name-body {
  overflow-x: visible !important;
}

body.page-node-730 .field--name-body table,
body.page-node-730 table.table {
  display: table !important;
  width: 960px !important;
  max-width: 960px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  margin: 0 auto 18px auto !important;
}

body.page-node-730 .field--name-body tr {
  display: table-row !important;
}

body.page-node-730 .field--name-body td,
body.page-node-730 .field--name-body th {
  display: table-cell !important;
  width: 320px !important;
  max-width: 320px !important;
  min-width: 320px !important;
  vertical-align: top !important;
  text-align: center !important;
  padding: 6px !important;
  border: 1px solid #d0d0d0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.page-node-730 .field--name-body img,
body.page-node-730 .field--name-body td img,
body.page-node-730 article img {
  display: block !important;
  width: 260px !important;
  max-width: 260px !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: 310px !important;
  object-fit: contain !important;
  margin: 8px auto !important;
}

body.page-node-730 .field--name-body h3 {
  font-size: 1.15rem !important;
  margin: 6px 0 !important;
}

body.page-node-730 .field--name-body p {
  margin: 6px 0 !important;
}


/* =========================================================
   EDITOR / CKEDITOR RESCUE
========================================================= */

body.path-node form.node-form main .section,
body.path-node form.node-form,
body.path-node .layout-region-node-main,
body.path-node .form-wrapper,
body.path-node .ck-editor,
body.path-node .ck-editor__main,
body.path-node .ck-content {
  max-width: none !important;
  width: auto !important;
  padding: initial !important;
  margin: initial !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.ck-editor__editable,
.ck-editor__editable_inline,
.ck-content {
  min-height: 500px !important;
  width: 100% !important;
  max-width: none !important;
}

textarea.form-textarea,
.form-textarea-wrapper textarea {
  min-height: 500px !important;
  width: 100% !important;
  max-width: none !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {
  #navbar-top > .container {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  #navbar-top .skyhawk-top-left,
  #navbar-top .skyhawk-top-branding,
  #navbar-top .navbar-form,
  #navbar-top .region-top-header-form {
    grid-column: 1 !important;
    justify-self: center !important;
  }

  #navbar-top input[type="search"],
  #navbar-top input.form-search {
    width: 220px !important;
    max-width: 220px !important;
  }

  #navbar-main .navbar-nav {
    justify-content: center !important;
  }

  body.page-node-730 main .section {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-node-730 .field--name-body {
    overflow-x: auto !important;
  }
}

/* =========================================================
   FINAL HEADER / MENU / LEGACY TABLE STABILIZATION
   ========================================================= */

/* ---------- TOP HEADER ROW ---------- */

#navbar-top {
  background: #f3f5f7;
}

#navbar-top .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-height: 120px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* left login/logout area */
.skyhawk-top-left,
.region-top-header-left,
.region-top-header-left .block,
.region-top-header-left .content {
  display: flex !important;
  align-items: center !important;
  min-width: 140px !important;
}

/* centered branding/logo */
.skyhawk-top-branding {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.skyhawk-top-branding img {
  max-height: 72px !important;
  width: auto !important;
  margin-right: 14px !important;
}

/* right search block */
.region-top-header-form,
.region-top-header-form .block,
.region-top-header-form .content {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 320px !important;
}

/* ---------- MAIN MENU ---------- */

.navbar-nav {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  gap: 24px !important;
}

.navbar-nav .nav-link {
  white-space: nowrap !important;
}

/* ---------- LEGACY TABLE FIX ---------- */

body.path-skyhawk-association-leadership table,
body.path-board-of-directors table,
body.path-board-photos table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

body.path-skyhawk-association-leadership td,
body.path-board-of-directors td,
body.path-board-photos td {
  vertical-align: top !important;
  text-align: center !important;
  overflow: hidden !important;
  padding: 10px !important;
}

/* contain legacy oversized images */
body.path-skyhawk-association-leadership td img,
body.path-board-of-directors td img,
body.path-board-photos td img {
  display: block !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* ---------- MEMORIAL PAGE SAFETY ---------- */

body.path-memories-of-yp .yp-memory-card img,
body.path-memories-of-yp .yp-memory-photo img {
  max-width: 100% !important;
  height: auto !important;
}


/* =========================================================
   FINAL HEADER + ADMIN OVERFLOW CLEANUP
========================================================= */

/* Prevent left-side admin clipping */
body.toolbar-horizontal {
  overflow-x: hidden !important;
}

/* Keep header row compact and centered */
.skyhawk-header-inner,
#navbar-top .container,
.region-top-header {
  min-height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin: 0 auto !important;
  align-items: center !important;
}

/* Normalize logo sizing */
.skyhawk-top-branding img,
.navbar-brand img,
.site-logo img {
  max-height: 90px !important;
  width: auto !important;
  height: auto !important;
}

/* Tighten title spacing */
.skyhawk-top-branding h1,
.site-name,
.navbar-brand {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* Keep login/logout aligned left */
.skyhawk-top-left,
.region-top-header-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 140px !important;
}

/* Keep search aligned right */
.region-top-header-form,
.search-block-form {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Prevent menu admin buttons from shoving layout */
.tabs,
.local-tasks-block,
.block-local-tasks-block {
  overflow: visible !important;
  margin-left: 0 !important;
}

/* Final table image sanity */
.page-node-type-page table img,
.page-node-type-article table img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Prevent giant accidental image scaling */
.field--name-body img {
  image-rendering: auto;
}

/* Keep memorial pages untouched */
body.path-memories-of-yp .field--name-body img,
body.path-remembering-jack-yp-woodul .field--name-body img {
  max-width: unset !important;
}


/* =========================================================
   ADMIN TOOLBAR / LOCAL TASK BAR FIX
========================================================= */

/* Stop horizontal page shove */
html,
body {
  overflow-x: hidden !important;
}

/* Fix clipped admin local tasks */
.block-local-tasks-block,
.tabs,
ul.tabs,
nav.tabs {
  margin-left: 0 !important;
  padding-left: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  overflow: visible !important;
  position: relative !important;
}

/* Normalize page wrapper */
.dialog-off-canvas-main-canvas,
.layout-container,
main,
#main-wrapper {
  margin-left: 0 !important;
  padding-left: 0 !important;
  overflow-x: visible !important;
}

/* Keep header centered */
#navbar-top .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Keep branding area stable */
.skyhawk-top-branding {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex: 1 1 auto !important;
}

/* Prevent table image overflow */
.page-node-type-page table img,
.page-node-type-article table img {
  max-width: 300px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}


/* =========================================================
   FIX BOOTSTRAP .row DAMAGE IN TOP HEADER
========================================================= */

/* Bootstrap row margins were shoving login block off-screen */
#navbar-top .region-secondary-menu.row,
#navbar-top .region-top-header-form.row,
#navbar-top .region.row {
  --bs-gutter-x: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
}

/* Stabilize left login area */
#navbar-top .skyhawk-top-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 160px !important;
  overflow: visible !important;
}

/* Prevent clipping */
#navbar-top {
  overflow: visible !important;
}

#navbar-top .container {
  overflow: visible !important;
}


/* =========================================================
   PREVENT ADMIN LOCAL TASKS FROM OVERLAPPING LOGIN AREA
========================================================= */

body.toolbar-horizontal #navbar-top,
body.role-administrator #navbar-top {
  padding-top: 28px !important;
  min-height: 120px !important;
}

/* Push local task tabs downward slightly */
.tabs,
.block-local-tasks-block,
nav.tabs {
  margin-top: 12px !important;
}

/* Keep login/logout visible */
.skyhawk-top-left {
  position: relative !important;
  z-index: 20 !important;
}


/* =========================================================
   FIX HEADER CONTEXTUAL LINK OVERLAP
   "Edit menu" is Drupal contextual links, not local tasks.
========================================================= */

/* Hide exposed contextual edit links inside the header */
#header .contextual-links,
#navbar-top .contextual-links,
#navbar-main .contextual-links {
  display: none !important;
}

/* Keep only the small contextual gear/pencil trigger available */
#header .contextual,
#navbar-top .contextual,
#navbar-main .contextual {
  position: absolute !important;
  z-index: 1000 !important;
}

/* If Drupal marks contextual links as open, allow them only then */
#header .contextual.open .contextual-links,
#navbar-top .contextual.open .contextual-links,
#navbar-main .contextual.open .contextual-links,
#header .contextual.is-open .contextual-links,
#navbar-top .contextual.is-open .contextual-links,
#navbar-main .contextual.is-open .contextual-links {
  display: block !important;
}