@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Public+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   CareNode skin for Barceloneta
   Palette matches the product mockup. Semantic colours are separate from the
   accent so status never competes with brand.
   ========================================================================== */
:root{
  --cn-paper:#F6F8F6;
  --cn-surface:#FFFFFF;
  --cn-surface-2:#EDF2EF;
  --cn-ink:#16211E;
  --cn-ink-2:#3D4A46;
  --cn-ink-3:#6B7975;
  --cn-line:#D7DFDB;
  --cn-line-2:#C1CCC7;
  --cn-accent:#2F6F5E;
  --cn-accent-deep:#1F4E42;
  --cn-accent-wash:#E2EEE9;
  --cn-ochre:#A8501C;
  --cn-ochre-wash:#F6E8DE;
  --cn-crit:#A3221C;
  --cn-warn:#8A6100;

  /* Bootstrap variables Barceloneta builds on */
  --bs-primary:#2F6F5E;
  --bs-primary-rgb:47,111,94;
  --bs-link-color:#2F6F5E;
  --bs-link-color-rgb:47,111,94;
  --bs-link-hover-color:#1F4E42;
  --bs-body-color:#16211E;
  --bs-body-color-rgb:22,33,30;
  --bs-body-bg:#F6F8F6;
  --bs-border-color:#D7DFDB;
  --bs-emphasis-color:#16211E;
  --bs-secondary-color:#6B7975;
  --bs-font-sans-serif:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bs-body-font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

body{
  background:var(--cn-paper);
  color:var(--cn-ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.outer-wrapper{background:var(--cn-paper)}

h1,h2,h3,h4,h5,
.documentFirstHeading{
  font-family:Archivo,system-ui,sans-serif;
  letter-spacing:-.022em;
  color:var(--cn-ink);
  text-wrap:balance;
}
.documentFirstHeading{
  font-weight:700;
  font-size:2.15rem;
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:.35rem;
}
.documentDescription{
  color:var(--cn-ink-2);
  font-size:1.06rem;
  line-height:1.55;
}
code,pre,.mono,.monospace{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;
}
a{color:var(--cn-accent);text-underline-offset:2px}
a:hover{color:var(--cn-accent-deep)}

/* --------------------------------------------------------------- header --- */
#portal-top{background:var(--cn-surface);border-bottom:1px solid var(--cn-line)}
#portal-header{padding-block:.55rem}
/* Swap the Plone logo for the CareNode mark + wordmark. The mark is an inline
   SVG data URI so there is no asset to upload or serve. */
#portal-logo img,#portal-logo-wrapper img{display:none!important}
#portal-logo{
  display:inline-flex!important;
  align-items:center;
  gap:9px;
  font-family:Archivo,system-ui,sans-serif;
  font-weight:800;
  font-size:1.28rem;
  letter-spacing:-.025em;
  color:var(--cn-ink)!important;
  text-decoration:none!important;
  line-height:1;
}
#portal-logo::before{
  content:"";
  width:27px;height:27px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='6' r='2.6' fill='%232F6F5E'/%3E%3Ccircle cx='5.5' cy='17' r='2.6' fill='%232F6F5E' opacity='.55'/%3E%3Ccircle cx='18.5' cy='17' r='2.6' fill='%232F6F5E' opacity='.55'/%3E%3Cpath d='M12 8.6v3.2M11 12.4 6.8 15.4M13 12.4l4.2 3' stroke='%232F6F5E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
#portal-logo::after{content:"CareNode"}
#portal-anontools a{color:var(--cn-ink-2);font-size:.9rem;text-decoration:none}
#portal-anontools a:hover{color:var(--cn-accent)}

#portal-searchbox input[type="text"],
#portal-searchbox .form-control{
  border:1px solid var(--cn-line-2);border-radius:8px;background:var(--cn-surface);
  color:var(--cn-ink);
}
#portal-searchbox .form-control:focus{
  border-color:var(--cn-accent);
  box-shadow:0 0 0 3px rgba(47,111,94,.16);
}
#portal-searchbox .btn,#portal-advanced-search .btn{
  background:var(--cn-accent);border-color:var(--cn-accent);color:#fff;border-radius:8px;
}
#portal-searchbox .btn:hover{background:var(--cn-accent-deep);border-color:var(--cn-accent-deep)}

/* ----------------------------------------------------------- global nav --- */
#mainnavigation-wrapper,#portal-globalnav-wrapper{
  background:var(--cn-ink);
  border-bottom:1px solid var(--cn-ink);
}
#portal-globalnav .nav-link,
#mainnavigation .nav-link{
  color:rgba(231,238,234,.86);
  font-size:.925rem;
  font-weight:500;
  padding:.62rem .85rem;
  border-radius:7px;
  transition:background .14s,color .14s;
}
#portal-globalnav .nav-link:hover,
#mainnavigation .nav-link:hover{background:rgba(111,191,166,.14);color:#fff}
#portal-globalnav .nav-item.inPath > .nav-link,
#portal-globalnav .nav-link.current,
#portal-globalnav .nav-item.current > .nav-link{
  background:rgba(111,191,166,.20);
  color:#fff;
  font-weight:600;
}
#portal-globalnav-wrapper .navbar-toggler{border-color:rgba(231,238,234,.3)}

/* --------------------------------------------------------- breadcrumbs --- */
#portal-breadcrumbs{
  background:var(--cn-surface);
  border-bottom:1px solid var(--cn-line);
  font-size:.86rem;
}
#portal-breadcrumbs .breadcrumb{margin-bottom:0;padding-block:.6rem}
#portal-breadcrumbs a{color:var(--cn-ink-3);text-decoration:none}
#portal-breadcrumbs a:hover{color:var(--cn-accent)}
#portal-breadcrumbs .breadcrumb-item.active,
#portal-breadcrumbs [aria-current="page"]{color:var(--cn-ink);font-weight:500}
#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::before{color:var(--cn-line-2)}

/* ------------------------------------------------------------- content --- */
#content-header{background:transparent}
article#content{background:transparent}
#content-core{color:var(--cn-ink-2)}
#content-core h2,#content-core h3{color:var(--cn-ink);margin-top:1.9rem}
#content-core h2{font-size:1.42rem;font-weight:700}
#content-core h3{font-size:1.15rem;font-weight:700}
#content-core p,#content-core li{color:var(--cn-ink-2)}

/* Dexterity field display — the Policy metadata block.
   Plone renders these labels as <b class="widget-label form-label d-block">,
   not <label> or <dt>. */
#content-core .field{margin-bottom:.85rem}
#content-core .widget-label,
#content-core b.widget-label,
#content-core .field > label,
#content-core dt{
  font-family:"IBM Plex Mono",monospace!important;
  font-size:.68rem!important;
  font-weight:600!important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cn-ink-3)!important;
  display:block;
  margin-bottom:.1rem;
}
#content-core .widget-mode-display .widget,
#content-core dd{margin-left:0;color:var(--cn-ink);font-weight:500}

/* The Policy view renders every behaviour field, including internal settings a
   reader has no use for. Attribute selectors avoid escaping the dots in class
   names like fieldname-form.widgets.IShortName.id. */
#content-core [class*="fieldname"][class*="IShortName"],
#content-core [class*="fieldname"][class*="IVersionable"],
#content-core [class*="fieldname"][class*="ITableOfContents"],
#content-core [class*="fieldname"][class*="IRelatedItems"].empty,
#content-core [class*="fieldname"][class*="IExcludeFromNavigation"]{display:none}
/* the body IS the content — it does not need a "Text" label above it */
#content-core [class*="fieldname"][class*="IRichTextBehavior"] > .widget-label{display:none}

/* ------------------------------------------------------------ portlets --- */
#portal-column-one .portlet,
#portal-column-two .portlet{
  background:var(--cn-surface);
  border:1px solid var(--cn-line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:none;
}
.portlet .portletHeader,
.portlet .card-header{
  background:var(--cn-surface-2);
  border-bottom:1px solid var(--cn-line);
  font-family:"IBM Plex Mono",monospace;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--cn-ink-3);
  padding:.62rem .85rem;
}
.portlet .portletHeader a{color:var(--cn-ink-3);text-decoration:none}
.portlet .portletItem,.portlet .card-body{padding:.5rem .5rem}
.portlet .navTree a,.portlet a.list-group-item{
  color:var(--cn-ink-2);
  border:0;
  border-radius:7px;
  padding:.42rem .6rem;
  font-size:.9rem;
  background:transparent;
}
.portlet .navTree a:hover,.portlet a.list-group-item:hover{
  background:var(--cn-surface-2);color:var(--cn-ink);
}
.portlet .navTreeCurrentItem,
.portlet a.list-group-item.active{
  background:var(--cn-accent-wash)!important;
  color:var(--cn-accent-deep)!important;
  font-weight:600;
  border:0;
}

/* ------------------------------------------------------------- buttons --- */
.btn{border-radius:8px;font-weight:500}
.btn-primary,.context{
  background:var(--cn-accent);border-color:var(--cn-accent);color:#fff;font-weight:600;
}
.btn-primary:hover,.context:hover{background:var(--cn-accent-deep);border-color:var(--cn-accent-deep)}
.btn-secondary,.standalone{
  background:var(--cn-surface);border-color:var(--cn-line-2);color:var(--cn-ink);
}
.btn-secondary:hover,.standalone:hover{background:var(--cn-surface-2);color:var(--cn-ink)}
.btn-outline-primary{color:var(--cn-accent);border-color:var(--cn-accent)}
.btn-outline-primary:hover{background:var(--cn-accent);border-color:var(--cn-accent)}

/* -------------------------------------------------------------- tables --- */
#content-core table,table.listing{
  border:1px solid var(--cn-line);border-radius:10px;border-collapse:separate;
  border-spacing:0;overflow:hidden;width:100%;
}
#content-core table th,table.listing th{
  background:var(--cn-surface-2);
  font-family:"IBM Plex Mono",monospace;
  font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cn-ink-3);border-bottom:1px solid var(--cn-line);padding:.7rem .9rem;
}
#content-core table td,table.listing td{
  border-bottom:1px solid var(--cn-line);padding:.7rem .9rem;color:var(--cn-ink-2);
}
#content-core table tr:last-child td,table.listing tr:last-child td{border-bottom:0}

/* --------------------------------------------------------- status/msgs --- */
.portalMessage,.alert{border-radius:9px;border-width:1px}
.portalMessage.info,.alert-info{
  background:var(--cn-accent-wash);border-color:rgba(47,111,94,.26);color:var(--cn-accent-deep);
}
.portalMessage.warning,.alert-warning{
  background:var(--cn-ochre-wash);border-color:rgba(168,80,28,.26);color:var(--cn-ochre);
}
.portalMessage.error,.alert-danger{
  background:#F8E2E0;border-color:rgba(163,34,28,.26);color:var(--cn-crit);
}
.state-published{color:var(--cn-accent)}
.state-private{color:var(--cn-ink-3)}

/* -------------------------------------------------------------- footer --- */
#portal-footer-wrapper{
  background:var(--cn-ink);color:rgba(231,238,234,.72);border-top:0;
}
#portal-footer-wrapper a{color:#9AD7C3;text-decoration:none}
#portal-footer-wrapper a:hover{text-decoration:underline}
#portal-footer-wrapper .portletFooter,
#portal-footer-wrapper .card{background:transparent;border:0;color:inherit}

/* ------------------------------------------------------------- toolbar --- */
/* Left alone functionally — tinted only so it belongs to the same system. */
#edit-bar,.plone-toolbar-container,#portal-toolbar{
  --bs-primary:var(--cn-accent);
}
.plone-toolbar-left #edit-bar{background:var(--cn-ink)}

/* --------------------------------------------------------- focus state --- */
a:focus-visible,button:focus-visible,input:focus-visible,
.btn:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--cn-accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}