/*
Theme Name: Sovereign Demo
Theme URI: https://t-cloud-public.dev
Author: Platform Team
Description: T Cloud-skinned theme for the Azure -> T Cloud Public migration
  demo, with an EN/NL toggle. It exists so the migration has something that
  could ONLY have arrived by moving files -- a theme from wordpress.org proves
  nothing, since the target could simply re-download it. This one lives nowhere
  but wp-content/themes on the shared filesystem.
Version: 1.1.0
License: GPL-2.0-or-later
Text Domain: sovereign-demo
*/

/* ---------------------------------------------------------------------------
   T Cloud campaign palette (Toolkit, 2 Sept 2026)

   Magenta #E20074 is the Telekom brand colour. The campaign key visual is a
   magenta cloud on a light grey ground with white type reversed out of it.

   TYPEFACE: the brand face is TeleNeo, which is licensed and not in this repo.
   The stack below degrades to the platform grotesque, the closest widely
   available match. Drop TeleNeo in as a webfont and it is picked up first.
   --------------------------------------------------------------------------- */

:root {
  --magenta:      #e20074;
  --magenta-deep: #b3005c;
  --ground:       #e9e9ee;
  --ink:          #1a1a20;
  --ink-soft:     #5a5a68;
  --line:         #d6d6de;
  --white:        #ffffff;

  --font: "TeleNeoWeb", "TeleNeo", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

.sd-skip {
  position: absolute;
  left: -9999px;
}
.sd-skip:focus {
  left: 1rem; top: 1rem;
  z-index: 10;
  background: var(--white);
  color: var(--ink);
  padding: .6rem 1rem;
  border-radius: 4px;
}

/* --- hero ---------------------------------------------------------------- */

.sd-hero {
  position: relative;
  background: var(--ground);
  overflow: hidden;
  padding: 4rem 1.5rem 3.5rem;
  text-align: center;
}

/*
  The campaign cloud.

  The real hero image is in the T-Systems Image Library (01 HERO IMAGE). This
  is a CSS stand-in so the demo renders with no binary assets in the repo --
  layered radial gradients, not an attempt to reproduce the artwork. To use the
  official asset: set a background-image on .sd-hero and delete this rule.
*/
.sd-cloud {
  position: absolute;
  inset: -10% -5% auto -5%;
  height: 130%;
  background:
    radial-gradient(38% 44% at 30% 42%, rgba(226,0,116,.95) 0%, rgba(226,0,116,0) 68%),
    radial-gradient(34% 40% at 62% 34%, rgba(226,0,116,.90) 0%, rgba(226,0,116,0) 70%),
    radial-gradient(44% 46% at 50% 60%, rgba(226,0,116,.92) 0%, rgba(226,0,116,0) 72%),
    radial-gradient(26% 34% at 18% 62%, rgba(179,0,92,.75)  0%, rgba(179,0,92,0)  70%),
    radial-gradient(28% 34% at 80% 62%, rgba(179,0,92,.75)  0%, rgba(179,0,92,0)  70%);
  filter: blur(6px);
  pointer-events: none;
}

.sd-hero-inner { position: relative; max-width: 44rem; margin: 0 auto; }

.sd-lang { position: absolute; top: -2.25rem; right: 0; }
.sd-lang a {
  display: inline-block;
  padding: .3rem .8rem;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 2rem;
  color: var(--white);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  background: rgba(0,0,0,.12);
}
.sd-lang a:hover, .sd-lang a:focus { background: var(--white); color: var(--magenta); }

.sd-lockup { margin: 0 0 1.5rem; }
.sd-logo-img  { display: inline-block; height: 34px; width: auto; }
.sd-logo-text {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--white);
}
.sd-logo-dot { color: var(--white); padding: 0 .12em; }

/*
  Headline: uppercase, reversed white out of the cloud, with ONE highlight span
  in ExtraBold + Italic. That pairing is a Toolkit rule (slides 6-7), not a
  stylistic choice -- keep the <em class="sd-hi"> even if you change the copy.
*/
.sd-headline {
  margin: 0 0 1rem;
  font-size: clamp(1.7rem, 5vw, 2.9rem);
  line-height: 1.12;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}
.sd-hi {
  font-weight: 800;
  font-style: italic;
}

.sd-subline {
  margin: 0;
  font-size: 1.02rem;
  color: var(--white);
  opacity: .95;
}

.sd-where {
  display: inline-block;
  margin: 1.75rem 0 0;
  padding: .4rem .95rem;
  border-radius: 2rem;
  background: var(--white);
  color: var(--magenta);
  font-size: .82rem;
  font-weight: 600;
}
.sd-where strong { font-weight: 800; }

/* --- content ------------------------------------------------------------- */

.sd-wrap { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

.sd-post { padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.sd-post:last-of-type { border-bottom: 0; }

.sd-post-title { margin: 0 0 .35rem; font-size: 1.4rem; line-height: 1.25; font-weight: 700; }
.sd-post-title a { color: var(--ink); text-decoration: none; }
.sd-post-title a:hover, .sd-post-title a:focus { color: var(--magenta); }

.sd-post-date { display: block; margin-bottom: 1rem; color: var(--ink-soft); font-size: .85rem; }

.sd-post-thumb { margin: 0 0 1.25rem; }
.sd-post-thumb img { max-width: 100%; height: auto; border-radius: 6px; display: block; }

.sd-post-body img { max-width: 100%; height: auto; border-radius: 6px; }
.sd-post-body a { color: var(--magenta); }
.sd-post-body blockquote {
  margin: 1.25rem 0;
  padding: .25rem 0 .25rem 1.1rem;
  border-left: 3px solid var(--magenta);
  color: var(--ink-soft);
}

.sd-pager { padding-top: 1.5rem; }
.sd-pager a { color: var(--magenta); }

/* --- footer -------------------------------------------------------------- */

.sd-foot {
  background: var(--ground);
  border-top: 3px solid var(--magenta);
  padding: 1.75rem 1.5rem;
  text-align: center;
}
.sd-foot-inner { max-width: 44rem; margin: 0 auto; }
.sd-foot-where { margin: 0 0 .4rem; font-size: .9rem; color: var(--ink); }
.sd-foot-where strong { color: var(--magenta); font-weight: 800; }
.sd-foot-note { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.sd-foot code {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1rem .4rem;
  font-size: .85em;
}

@media (max-width: 480px) {
  .sd-hero { padding-top: 3.5rem; }
  .sd-lang { top: -2rem; }
}