/* Kendis Hosting and Subprocessor Schedule (/hosting-subprocessor-schedule/).
   Same convention as european-cloud.css: every rule is scoped under .hss-page
   and every class carries an hss- prefix, because the theme bundle already owns
   bare names like .row, .container and .sec — unprefixed classes here would
   restyle the shared header/footer or be restyled by them.

   The sections are native <details>/<summary> rather than JS-driven panels: the
   whole schedule is contractual text that has to be in the DOM for crawlers and
   for Ctrl-F, and it stays usable with JavaScript off. */

/* Full-bleed: the theme caps #content.site-content at 90% with a large top
   padding, but the hero band has to run edge to edge (.hss-container inside
   keeps the text at 1100px). */
#content.site-content.hss-content{max-width:100%;width:100%;margin:0;padding:0;overflow-x:hidden}

.hss-page{
  /* Neutrals come from the Hosting Schedule Hero design. The accent stays the
     Kendis brand blue rather than the design's #2a31e8: the header CTA, the
     footer and /european-cloud/ all paint #2547D0, and a one-page-only accent
     would read as a mismatch against the chrome this page sits inside. */
  --hss-blue:#2547D0; --hss-blue-700:#1b34a0;
  --hss-ink:#12103a; --hss-body:#4c527a; --hss-muted:#6b7192;
  --hss-border:#e8e9f4; --hss-rule:#eef0f7;
  --hss-tint:#f7f8fd; --hss-tint-2:#eef1fb;
  display:block;width:100%;margin:0;
  background:#fff;
  color:var(--hss-body);
  font-family:"Poppins",system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
.hss-page *,.hss-page *::before,.hss-page *::after{box-sizing:border-box}
.hss-page h1,.hss-page h2,.hss-page h3{color:var(--hss-ink);font-family:inherit;font-weight:600;margin:0;letter-spacing:-.02em}
.hss-page p{margin:0}
.hss-page a{color:var(--hss-blue);text-decoration:none;word-break:break-word}
.hss-page a:hover{color:var(--hss-blue-700);text-decoration:underline}
.hss-page :focus-visible{outline:2px solid var(--hss-blue);outline-offset:2px;border-radius:6px}
.hss-page .hss-container{max-width:1100px;width:auto;margin:0 auto;padding:0 32px}

/* hero — from the "Hosting Schedule Hero" design.
   The design lays its hero out in an 1180px/40px container, but the container
   here is the page's shared .hss-container so the h1 sits on the same left edge
   as the section headings below it. A hero that started 40px outside the
   accordion would misalign on every viewport. */
.hss-page .hss-hero{background:linear-gradient(180deg,var(--hss-tint) 0%,#fff 100%);border-bottom:1px solid var(--hss-border)}
.hss-page .hss-hero .hss-container{
  display:flex;flex-direction:column;align-items:flex-start;gap:32px;
  padding-top:88px;padding-bottom:72px;
}
.hss-page .hss-badge{display:flex;align-items:center;gap:18px}
.hss-page .hss-badge-mark{
  flex:0 0 auto;width:72px;height:72px;border-radius:16px;
  background:#fff;border:1px solid #e2e4f2;box-shadow:0 6px 20px rgba(23,22,74,.07);
  display:flex;align-items:center;justify-content:center;color:var(--hss-blue);
}
.hss-page .hss-badge-mark svg{display:block;width:34px;height:38px}
/* min-width:0 lets the label column shrink below its content width on narrow
   screens — without it the long Finnish sub-label would push the row wider
   than the container instead of wrapping. */
.hss-page .hss-badge-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.hss-page .hss-kicker{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--hss-muted);
}
.hss-page .hss-badge-sub{font-size:15px;line-height:1.4;color:#5b6079}
/* 62px is the design's desktop size; the clamp only takes over once the title
   would otherwise outgrow narrow viewports. */
/* The design caps the title at 20ch. 24ch here: at 20ch the German compound
   ("Hosting- und Unterauftragsverarbeiter-Anlage") pushed its trailing hyphen
   past the cap and started a line with "-Anlage". The English title still
   breaks after "Subprocessor" either way. */
.hss-page .hss-title{font-size:clamp(32px,5.2vw,62px);line-height:1.08;font-weight:700;letter-spacing:-.025em;max-width:24ch}
.hss-page .hss-version{margin:0;font-size:17px;color:var(--hss-muted)}

.hss-page .hss-body{padding-bottom:24px}

/* section shell — one <details> per numbered section */
.hss-page .hss-item{border-bottom:1px solid var(--hss-border)}
.hss-page .hss-item > summary{
  display:flex;align-items:center;gap:18px;
  padding:26px 0;cursor:pointer;list-style:none;
}
.hss-page .hss-item.hss-intro > summary{align-items:flex-start}
.hss-page .hss-item > summary::-webkit-details-marker{display:none}
.hss-page .hss-item > summary::marker{content:""}

/* the rounded blue mark — a square that turns into a filled diamond when the
   section is open, with the chevron inside pointing down / up accordingly */
.hss-page .hss-mark{
  flex:0 0 auto;width:24px;height:24px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:500;line-height:1;user-select:none;
  background:var(--hss-tint-2);color:var(--hss-blue);transform:rotate(0deg);
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.hss-page .hss-intro > summary .hss-mark{margin-top:2px}
.hss-page .hss-mark::before{
  content:"\203A";display:block;line-height:1;font-size:17px;font-weight:600;
  transform:rotate(90deg);transition:transform .18s ease;
}
.hss-page .hss-item[open] > summary .hss-mark{background:var(--hss-blue);color:#fff;transform:rotate(45deg)}
.hss-page .hss-item[open] > summary .hss-mark::before{transform:rotate(-135deg)}
@media (prefers-reduced-motion:reduce){
  .hss-page .hss-mark,.hss-page .hss-mark::before{transition:none}
}

.hss-page .hss-heading{flex:1;font-size:clamp(20px,2.2vw,24px);line-height:1.3;color:var(--hss-ink)}

/* intro summary — clamped to two lines while collapsed, full text when open */
.hss-page .hss-lede{flex:1;min-width:0;display:block;color:var(--hss-body);font-weight:400}
.hss-page .hss-item:not([open]) .hss-lede{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.hss-page .hss-panel{padding:0 0 34px 42px}
.hss-page .hss-intro .hss-panel{padding-bottom:30px}
.hss-page .hss-panel p{color:var(--hss-body);margin:0 0 18px}
.hss-page .hss-panel p:last-child{margin-bottom:0}
.hss-page .hss-panel strong{color:var(--hss-ink);font-weight:600}
/* Modifiers below carry .hss-panel so they outrank `.hss-page .hss-panel p`,
   which would otherwise win on specificity and flatten their spacing. */
.hss-page .hss-panel p.hss-note{color:var(--hss-muted);font-style:italic;font-size:14.5px}
.hss-page .hss-subhead{font-size:18px;letter-spacing:-.01em;margin:0 0 18px}
.hss-page .hss-subhead.hss-later{margin-top:38px}
.hss-page .hss-panel ul{margin:0;padding-left:20px;color:var(--hss-body)}
.hss-page .hss-panel li + li{margin-top:8px}

/* tables — each scrolls inside its own rounded frame rather than widening the
   page, since five columns of legal text cannot compress to a phone width */
.hss-page .hss-scroll{overflow-x:auto;border:1px solid var(--hss-border);border-radius:12px}
.hss-page .hss-table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0}
.hss-page .hss-table th,.hss-page .hss-table td{padding:16px 18px;vertical-align:top;text-align:left}
.hss-page .hss-table thead tr{background:var(--hss-tint)}
.hss-page .hss-table th{
  font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--hss-body);padding-top:14px;padding-bottom:14px;
  border-bottom:1px solid var(--hss-border);
}
.hss-page .hss-table td{color:var(--hss-body)}
.hss-page .hss-table tbody tr + tr td{border-top:1px solid var(--hss-rule)}
.hss-page .hss-table td:first-child{color:var(--hss-ink);font-weight:600}
.hss-page .hss-table .hss-legal{display:block;font-weight:400;color:var(--hss-muted);font-size:12.5px;margin-top:3px}
.hss-page .hss-nowrap{white-space:nowrap}
.hss-page .hss-w-regions{min-width:760px}
.hss-page .hss-w-subs{min-width:860px}
.hss-page .hss-w-versions{min-width:640px}
.hss-page .hss-panel p.hss-lead-in{margin:0 0 24px}
.hss-page .hss-panel p.hss-after-table{margin:24px 0 0}
.hss-page .hss-panel p.hss-scc{margin:34px 0 12px}

.hss-page .hss-entity{margin:36px 0 48px;font-size:13.5px;color:var(--hss-muted)}

@media (max-width:560px){
  .hss-page .hss-container{padding:0 20px}
  .hss-page .hss-hero .hss-container{padding-top:52px;padding-bottom:44px;gap:24px}
  .hss-page .hss-badge{gap:14px}
  .hss-page .hss-badge-mark{width:56px;height:56px;border-radius:13px}
  .hss-page .hss-badge-mark svg{width:27px;height:30px}
  .hss-page .hss-item > summary{gap:14px;padding:22px 0}
  .hss-page .hss-panel{padding-left:0}
}