/*
  Plone 6 markup compatibility for the Clean Blog theme.

  Plone 6 (Classic UI / Mockup) renders some header elements without the
  classes Plone 5 used, so the matching selectors in main.css no longer hit.
  This file re-applies the same styling to the Plone 6 markup.
*/

/* Plone 5: #content .documentFirstHeading. The P5 site's custom.css
   overrode the theme with bold and no underline border, so do the
   same here. */
#content > header > h1 {
  font-weight: 700;
  padding-bottom: 15px;
}

#content > header > h1 nav {
  font-size: 24px;
  font-weight: 400;
}

/* Plone 5: #content .documentDescription. Plone 6 renders descriptions
   as p.lead (both the content description and full-view item
   descriptions). */
#content > header > p,
#content p.lead {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 300;
  margin: 0 0 10px;
}

/* Plone 6 renders the main nav as ul#portal-globalnav.navbar-nav
   (Bootstrap 5 markup). The core UI bundle's Bootstrap 5 turns .navbar-nav
   into a vertical flex column; restore the theme's horizontal Bootstrap 3
   navbar row (classes are normalized in rules.xml) */
.navbar-custom .navbar-nav {
  display: block;
}

/* The core bundle's Bootstrap 5 also turns .navbar and .navbar >
   .container-fluid into flex containers and gives .navbar-collapse a
   flex-basis of 100%, which breaks the theme's Bootstrap 3 float layout
   (logo left, nav and search on one row at the right). Restore the block
   layout. */
.navbar-custom {
  display: block;
}

.navbar-custom .container-fluid {
  display: block;
}

/* Bootstrap 5 in the core bundle paints every .navbar-nav li with a solid
   light background and dark text (offcanvas styling). The Clean Blog navbar
   is transparent over the hero with white links; strip that back. */
.navbar-custom .navbar-nav li {
  background-color: transparent;
  color: #fff;
}

.navbar-custom .navbar-nav li a {
  background-color: transparent;
}

.navbar-custom .navbar-nav li a:hover,
.navbar-custom .navbar-nav li a:focus {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
}

.navbar-custom .navbar-nav li.active > a,
.navbar-custom .navbar-nav li.current > a,
.navbar-custom .navbar-nav li.inPath > a,
.navbar-custom .navbar-nav li.selected > a {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
}

/* Plone 6 renders the searchbox with Bootstrap 5 utility classes */
#portal-searchbox {
  display: flex;
}

#portal-searchbox .searchButton {
  border-color: #fff;
  color: #fff;
}

#portal-searchbox .searchButton:hover {
  background-color: #0085a1;
  color: #fff;
}

/* Plone 6 adds an empty .sr-only span inside the active page item. The
   theme's .pagination li > span rules (written for Plone 5, where the
   active page number was a span) match it and paint a stray teal box
   next to the current page. Keep it hidden. */
.pagination li > span.sr-only {
  display: none;
}

/* Align the searchbox with the navbar links: push it down and match the
   nav link typography (Plone 6 renders the field as a Bootstrap 5
   form-control, which inherits the body serif font). */
#portal-searchbox {
  margin-top: 12px;
}

#portal-searchbox input.searchField {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}

/* Bootstrap 5's .form-control:focus (specificity 0,2,0) overrides the
   theme's transparent input background (0,1,1) and paints it white,
   hiding the white text. Keep it transparent when focused. */
#portal-searchbox input.searchField:focus {
  background-color: transparent;
}

#portal-searchbox input.searchField::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

/* Scrolled navbar (clean-blog.min.js adds .is-fixed): nav links turn
   dark, so the search field must follow. */
.navbar-custom.is-fixed #portal-searchbox input.searchField {
  color: #404040;
}

.navbar-custom.is-fixed #portal-searchbox input.searchField::placeholder {
  color: rgba(64, 64, 64, 0.8);
}

/* Mobile: the navbar keeps Bootstrap's light background (the theme's
   transparent override only applies at >=768px), so the field needs
   dark text there. */
@media (max-width: 767px) {
  #portal-searchbox input.searchField {
    color: #404040;
  }

  #portal-searchbox input.searchField::placeholder {
    color: rgba(64, 64, 64, 0.8);
  }
}

/* Plone 6 core (barceloneta) styles the footer as a dark band with light
   text, and the theme adds a grey top border. The original design has a
   plain footer: no background, no border, theme text color (which also
   makes the light band text readable again). The extra type selector
   out-specificities the same-# rule in main.css, which loads later. */
footer#portal-footer-wrapper {
  background-color: transparent;
  border-top: 0;
  color: #404040;
}

/* Plone 6 renders the below-content viewlets (document actions: RSS
   feed link) in the #content article's own <footer>. Center the actions
   list (Bootstrap 5 .list-inline is a flex row). */
#content footer #viewlet-below-content ul.list-inline {
  justify-content: center;
}

/* Front page: hide the latest-note collection heading and byline for
   anonymous visitors (port of the P5 site's custom.css rules; P6 adds
   no pat-plone body class, and P6's document title is a plain,
   classless h1). */
html body#visual-portal-wrapper.frontend.icons-on.portaltype-collection.section-latest-note.site-kaeru.template-full_view.thumbs-on.userrole-anonymous.viewpermission-view.patterns-loaded div.outer-wrapper div.container main#main-container.row.row-offcanvas.row-offcanvas-right div.col-xs-12.col-sm-12 div.row div.box div.col-xs-12.col-sm-12 article#content header h1 {
  display: none;
}

html body#visual-portal-wrapper.frontend.icons-on.portaltype-collection.section-latest-note.site-kaeru.template-full_view.thumbs-on.userrole-anonymous.viewpermission-view.patterns-loaded div.outer-wrapper div.container main#main-container.row.row-offcanvas.row-offcanvas-right div.col-xs-12.col-sm-12 div.row div.box div.col-xs-12.col-sm-12 article#content header div#viewlet-below-content-title {
  display: none;
}

/* ------------------------------------------------------------------
   Port of the P5 site's custom.css text styling (site-level
   customizations that were never part of the theme). The P5 class
   names do not exist in the Plone 6 markup, so the selectors target
   the P6 equivalents.
   ------------------------------------------------------------------ */

/* Byline (P5: #content .documentByLine). The P5 file also had
   .documentAuthor { display: none }, but that rule was silently
   dropped by browsers (the file had a stray closing brace) and never
   applied on the live site, so the author stays visible. */
#content #section-byline {
  color: #979797;
  font-size: 14px;
  font-style: italic;
  margin-top: 0;
  margin-bottom: 14px;
}

/* P6 renders the byline author as a Bootstrap 5 badge (light pill,
   dark text); the P5 look is plain inherited text. */
#content #section-byline a {
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* Responsive content images (P5 rule as-is; P6 core defines no
   .image-responsive rule). */
.image-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Figure spacing and caption styling (P5 rules; 'sohne' was never
   loaded on the P5 site either and fell back to Helvetica Neue). */
#content figure {
  margin-bottom: 50px;
}

#content figure figcaption {
  font-size: 80%;
  font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgb(117, 117, 117);
}

/* Collection full-view item titles: P5 rendered them as h2.headline a,
   which the P5 custom.css styled with the sohne stack, 48px, no
   underline. P6 renders them as h1 > a.summary.url (the summary view
   uses h2, so the h1 keeps this rule on the full view). */
#content h1 a.summary.url {
  font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 48px;
  text-decoration: none;
}

/* Collection full-view item descriptions: P5 rendered them as
   div.description, styled by the P5 custom.css (sohne stack, 22px,
   grey). P6 renders them as p.lead, the same class the document
   header description uses; scope the rule to the .item wrapper so the
   header description keeps the Open Sans styling above. */
#content .item p.lead {
  font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: rgb(117, 117, 117);
}

/* Logged-in managers: the P5 site styled the collection heading
   smaller and lighter in the edit view (its rule was scoped to the
   latest-note page for manager/owner roles). */
body.userrole-manager.section-latest-note #content > header > h1 {
  font-size: 24px;
  font-weight: 200;
}

/* ------------------------------------------------------------------
   Plone 6 modals (TinyMCE "Insert image" / link dialogs).

   The mockup plone-modal pattern renders these with Bootstrap 5
   classes (.modal.fade.show, .modal-dialog). The theme's Bootstrap 3
   (css/bootstrap.min.css, loaded before this file) breaks them:

   1. `.fade { opacity: 0 }` -- in BS3 a .fade element only becomes
      visible when the (BS3-only) .in class is added. Plone 6 adds
      .show instead, so the dialog box stays at opacity 0 and only
      the dark backdrop is visible: "the dialog doesn't load".
   2. `.modal.fade .modal-dialog { transform: translate(0, -25%) }`
      -- the transform is only cleared by BS3's .modal.in, so the
      dialog would be shifted ~25% of the viewport up even if it
      were visible.
   3. `.modal { overflow: hidden }` clips tall dialogs; BS5 scrolls.

   Re-assert the Bootstrap 5 (barceloneta core bundle) behaviour.
   ------------------------------------------------------------------ */
.modal.fade {
  opacity: 1;
}

.modal.fade .modal-dialog {
  transform: translate(0, -50px);
}

.modal.show .modal-dialog {
  transform: none;
}

.modal {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Constrain the dialog to the viewport: a dialog taller than the
   screen (many form fields, long selection lists) would otherwise
   hide its footer (Insert / Cancel) below the fold. The body scrolls
   internally (same pattern as Bootstrap 5 .modal-dialog-scrollable). */
.modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 60px);
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ------------------------------------------------------------------
    TinyMCE image dialog, "Internal Image" tab: selected items.

    The mockup relateditems pattern renders each selected item as a
    full-width row (`.select2-choices > li { flex: 1 1 100% }`)
    showing title, full path and a 100x100 thumbnail. A few images
    already make the list taller than the dialog. Compact the chips:
    auto width (several per row), 40px thumbnail, title on one line,
    no path, and the close (x) link in normal flow.
    ------------------------------------------------------------------ */
.pat-relateditems .select2-choices > li {
  flex: 0 1 auto;
}

/* Keep the search input as its own full-width row. */
.pat-relateditems .select2-choices > li.select2-search-field {
  flex: 1 1 100%;
}

.pat-relateditems .select2-choices > li.select2-search-choice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* The close link is positioned absolutely by the select2 CSS; flow
   it at the start of the chip instead. */
.pat-relateditems .select2-choices .select2-search-choice .select2-search-choice-close {
  position: static;
  order: -1;
}

.pat-relateditems .select2-choices .select2-search-choice > div {
  flex: 0 1 auto;
  min-width: 0;
}

.pat-relateditems .select2-choices .select2-search-choice .pat-relateditems-item {
  align-items: center;
  gap: 0.4rem;
}

.pat-relateditems .select2-choices .select2-search-choice .pat-relateditems-result-info {
  min-width: 0;
}

/* Title on one line (type icon + text) instead of title + full path. */
.pat-relateditems .select2-choices .select2-search-choice .pat-relateditems-item-title {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pat-relateditems .select2-choices .select2-search-choice .pat-relateditems-item-path {
  display: none;
}

/* 40px thumbnail instead of 100x100. */
.pat-relateditems .select2-choices .select2-search-choice .pat-relateditems-item-image img {
  width: 40px;
  height: 40px;
}