@charset "UTF-8";

/* ============================================================
   1. CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* Colors */
  --color-bg:            #f4f4f9;
  --color-surface:       #ffffff;
  --color-text:          #333333;
  --color-text-dark:     #2b2b2b;
  --color-text-muted:    #818181;
  --color-black:         #000000;

  --color-primary:       #003366;
  --color-accent:        #3b82f6;
  --color-link:          #8b0000;
  --color-link-hover:    #d9534f;

  --color-green-dark:    #006400;
  --color-green:         #28a745;
  --color-green-muted:   #c8e6c9;
  --color-orange:        darkorange;
  --color-purple:        #8a2be2;
  --color-gold:          #b8860b;
  --color-red:           #d9534f;
  --color-red-dark:      #8b0000;

  /* Typography */
  --font-body:           'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono:           monospace;
  --font-size-base:      1rem;
  --font-size-sm:        0.875rem;
  --font-size-xs:        0.75rem;
  --line-height-body:    1.65;
  --line-height-heading: 1.2;

  /* Layout */
  --max-width:           1200px;
  --content-max-width:   700px;
  --radius:              8px;
  --shadow:              0 2px 5px rgba(0, 0, 0, 0.1);
  --spacing-xs:          5px;
  --spacing-sm:          10px;
  --spacing-md:          20px;
  --spacing-lg:          40px;
  --spacing-xl:          100px;

  /* Complaint state colors */
  --complaint-new:       green;
  --complaint-closed:    darkgreen;
  --complaint-warn:      indianred;
  --complaint-ignore:    lightskyblue;
  --complaint-error:     darkred;
  --complaint-before:    peru;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  background-color: var(--color-bg);
  color: var(--color-text);
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4X, h5 {
  color: var(--color-text-dark);
  text-transform: uppercase;
  line-height: var(--line-height-heading);
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  color: var(--color-black);
  text-decoration: underline dotted red;
}

h3 {
  color: var(--color-black);
  text-decoration: underline dotted green;
  margin-bottom: 1px;
}

h3::before {
  content: attr(data-header);
  color: var(--color-green-dark);
}

h3 a {
  color: var(--color-black);
  text-decoration: none;
}

h4 {
  color: #0d47a1;
  text-decoration: underline dotted green;
  margin: var(--spacing-xs);
  clear: both;
  /** display: inline-block; */
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 15px;
  background: #bbdefb;
}
 

h4X ~ ul {
  margin-left: 30px;
}

h4X ~ ul li {
  list-style-type: circle;
}

h5 {
  background: #c8e6c9; 
  color: #1b5e20; 
  text-decoration: underline dotted green;
  margin: var(--spacing-xs);
  clear: both;
  /** display: inline-block; */
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 15px;
}

p {
  display: inline;
  line-height: var(--line-height-body);
  margin-bottom: unset;
}

b,
strong {
  font-weight: bolder;
}

pre {
  font-family: var(--font-mono);
  font-size: large;
  color: var(--color-red-dark);
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
}

blockquote p {
  display: inline;
}

blockquote strong {
  font-weight: 700;
}

label {
  font-size: var(--font-size-sm);
  font-weight: bold;
  margin-bottom: calc(var(--spacing-sm) / 3);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  color: #2c3e50;
}

abbr {
  font-variant: all-small-caps;
  letter-spacing: 0.05em;
}

time {
  color: var(--color-red-dark);
  font-weight: bolder;
  text-decoration: underline;
}


/* ============================================================
   4. LINKS
   ============================================================ */
a {
  cursor: pointer;
  background-color: transparent;
  color: var(--color-link);
  text-decoration: underline dotted green;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: all;
}

a:hover {
  color: var(--color-link-hover);
}


/* ============================================================
   5. LISTS
   ============================================================ */
li {
  list-style-type: none;
}

ul::before {
  content: attr(data-header);
  font-size: 120%;
  font-weight: bold;
  margin-left: -15px;
}


/* ============================================================
   6. TABLES
   ============================================================ */
table {
  border-collapse: collapse;
  font-size: 11px;
  width: 100%;
}

table tr {
  border: 1px #b0b0b0 solid;
  text-align: center;
}

table td {
  vertical-align: top;
  border: 1px solid #b0b0b0;
  text-align: center;
}

table tr td a {
  text-decoration: underline;
  display: block;
}


/* ============================================================
   7. FORM ELEMENTS
   ============================================================ */
input:read-only {
  border-color: red;
  border-style: dashed;
}


/* ============================================================
   8. MEDIA
   ============================================================ */
img {
  padding: var(--spacing-sm);
  width: 30%;
}

img:hover {
  float: unset;
  width: 90%;
}

.wp-block-image {
  text-align: center;
}

.video-container {
  position: relative;
  float: left;
  padding: 50px;
  max-width: 315px;
  margin: 0 auto;
}

.video-container iframe {
  width: 100%;
  aspect-ratio: 9 / 16;
}


/* ============================================================
   9. LAYOUT
   ============================================================ */
.wrapper {
  display: flex;
  max-width: var(--max-width);
  margin: var(--spacing-md) auto;
  gap: var(--spacing-md);
  padding: 0 var(--spacing-md);
}

.main {
  padding-left: var(--spacing-xl);
}

.content {
  flex: 3;
  background: var(--color-surface);
  padding: var(--spacing-lg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}


/* ============================================================
   10. SIDEBAR
   ============================================================ */
.sidebar {
  flex: 1;
  background: var(--color-surface);
  padding: var(--spacing-md);
  border-radius: var(--radius);
  height: fit-content;
  position: sticky;
  top: var(--spacing-md);
  box-shadow: var(--shadow);
}

.sidebar ul {
  list-style: none;
}

.sidebar li {
  margin-bottom: var(--spacing-sm);
}

.sidebar a {
  text-decoration: none;
  color: var(--color-primary);
  font-weight: bold;
}

.sidebar a:hover {
  color: var(--color-link-hover);
}


/* ============================================================
   11. HEADER / NAV / FOOTER
   ============================================================ */
header {
  color: white;
  padding: 1rem 2rem;
  text-align: center;
}

.navbar {
  background-color: var(--color-black);
  text-align: center;
}

.navbar a,
.navbar ul,
.navbar li {
  display: inline;
  color: red;
  text-transform: capitalize;
}

footer {
  font-size: var(--font-size-sm);
  padding: 50px 50px 50px var(--spacing-xl);
}

footer a {
  color: green;
  text-decoration: none;
}


/* ============================================================
   12. ASIDE / BREADCRUMB
   ============================================================ */
aside {
  height: 100%;
  width: 100px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-right: 30px;
}

aside img {
  padding: var(--spacing-md);
  width: 90%;
}

aside a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: var(--color-text-muted);
  display: block;
  transition: color 0.3s;
}

aside a:hover {
  color: #f1f1f1;
}

.breadcrumb {
  height: 100%;
  width: 100px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-right: 30px;
}


/* ============================================================
   13. SCHEMA.ORG / SEMANTIC MICRODATA
   ============================================================ */
div[itemscope],
p[itemprop="name"],
span[itemprop="jobTitle"],
div[itemscope] + p {
  display: inline;
}

span[itemprop="jobTitle"] {
  color: var(--color-red-dark);
}

p[itemprop="email"] {
  color: var(--color-purple) !important;
  background: url(/images/email.png) no-repeat top left;
}

p[itemprop="about"],
.readonly {
  color: var(--color-green-dark) !important;
}

div[itemtype="https://schema.org/Quotation"],
.quote {
  display: block;
}

div[itemtype="https://schema.org/GovernmentOrganization"],
div[itemtype="http://schema.org/Organization"] p {
  color: var(--color-gold);
  font-weight: bolder;
  display: inline;
}

div[itemtype="http://schema.org/ImageObject"] img {
  display: block;
}


/* ============================================================
   14. UTILITY CLASSES
   ============================================================ */

/* Display */
.nu_itemid  { display: inline; }
.signature  { display: block; }
.nu_author,
.bypostauthor { display: block; }
.question   { display: block; margin: unset; padding: unset; }

/* Text alignment */
.nu_center  { text-align: center; }
.right,
.nu_right   { text-align: right; float: right; }
.left,
.nu_left    { text-align: left; }

/* Text size */
.nu_small   { font-size: smaller; }
.reply      { font-size: var(--font-size-sm); line-height: var(--line-height-heading); }
.author     { text-align: right; font-size: xx-small; display: block; }

/* Text decoration */
.nu_underline { text-decoration: underline; }

/* Color utilities */
.nu_orange,
.complaint-warn { color: var(--color-orange) !important; }
.nu_red,
.complaint-response,
.question-n  { color: red; }
.warning     { color: red !important; }
.popup       { color: var(--color-green-dark) !important; }

/* Emphasis */
.person {
  font-weight: 700;
  color: var(--color-green-dark);
  display: inline;
}

.bis {
  font-weight: 700;
  color: var(--color-red-dark);
}

.highlight { background-color: #faa; }

.money    { font-family: sans-serif; font-weight: bold; }
.symbol   { font-size: 0.6em; vertical-align: super; margin-right: 2px; }
.decimals { font-size: 0.8em; }


/* ============================================================
   15. PSEUDO-CONTENT ANNOTATIONS
   ============================================================ */
.no-reply::after {
  content: " - Never had a reply.";
  color: green;
  line-height: 0.8;
}

.disclosure::after {
  content: " - From Disclosure";
  color: green;
  line-height: 0.8;
}

.notindisclosure::after {
  content: " - Not In Disclosure";
  color: green;
  line-height: 0.8;
}

.notinreport::before {
  content: "Not In Report: ";
  color: orangered;
  line-height: 0.8;
}

.ooo::before {
  content: " >>> Automated Out Of Office -";
  color: green;
  line-height: 0.8;
}

.subissue::before {
  content: " >>> Sub Issue -";
  color: green;
  line-height: 0.8;
}


/* ============================================================
   16. COMPLAINT STATE CLASSES
   ============================================================ */
.subissue,
.complaint-acknowledgment,
.complaint-event-before,
.internalissue    { color: green; }

.stage_one        { color: green !important; }
.stage_two        { color: darkgreen !important; }
.stage_three      { color: orange !important; }
.stage_ombdusman  { color: red !important; }

.complaint-new {
  color: var(--complaint-new) !important;
  font-weight: bold;
}

.complaint-closed {
  color: var(--complaint-closed) !important;
  font-weight: bold;
  font-style: italic;
}

.complaint-closed-bad {
  color: darkcyan !important;
  font-weight: bold;
}

.complaint-warn {
  color: var(--complaint-warn) !important;
  font-weight: bold;
}

.complaint-ignore {
  color: var(--complaint-ignore) !important;
  font-style: italic;
}

.complaint-error {
  color: var(--complaint-error) !important;
  font-weight: bold;
}

.complaint-value-error {
  background: url(/images/icons8-warning-48.png) no-repeat 5px 50%;
  background-size: 20px;
  padding-left: 30px;
  display: inline;
  color: var(--complaint-error) !important;
}

.complaint-unacceptable {
  color: red;
  font-weight: bold;
}

.complaint-before-submission {
  color: var(--complaint-before);
  font-style: italic;
}

.complaint-submission,
.question-y { color: blue; }

.complaint-form-normal { background-color: white; }

.complaint-form-warn {
  border-width: thick !important;
  border-color: darkred !important;
}

.complaint-form-resolved {
  color: green !important;
  border-width: thick !important;
  border-bottom-color: darkred !important;
}


/* ============================================================
   17. COMPONENTS
   ============================================================ */

/* Spoiler / warning toggle */
#warning {
  color: white;
  background-color: var(--color-red);
  padding: 10px 10px 10px 35px;
  cursor: pointer;
  display: inline-block;
  border-radius: 4px;
  user-select: none;
}

#spoiler {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

/* Expand/collapse */
.expand-content {
  display: none;
  padding: var(--spacing-sm) 0;
  color: #555;
}

.expand-link {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

/* Icon badges */
.star {
  background: url(/images/star.png) no-repeat 0 50%;
  background-size: 25px;
  padding-left: 25px;
  display: inline;
  color: var(--color-purple);
}

.fact {
  background: url(/images/icons8-warning-48.png) no-repeat 5px 50%;
  background-size: 25px;
  padding-left: 25px;
  display: inline;
  color: var(--color-purple);
}

.fact li {
  list-style-type: auto;
}

/* Comment / quote */
.comment blockquote,
.quote-them {
  color: var(--color-green-dark) !important;
  font-weight: bolder;
}

/* Card components */
.card-a { border-color: #2196f3; background-color: var(--outcome-a); }
.card-b { border-color: #4caf50; background-color: var(--outcome-b); }

.card h2 {
  margin-top: 0;
  color: #2c3e50;
  text-decoration: none;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.badge-a { background: #bbdefb; color: #0d47a1; }
.badge-b { background: var(--color-green-muted); color: #1b5e20; }


/* ============================================================
   18. WEBIX OVERRIDES
   ============================================================ */
.webix_view { font-size: 16px; }

.webix_hcell {
  text-align: center;
  line-height: 25px !important;
  white-space: normal !important;
  display: flex;
  align-items: center;
}

.webix_table_cell {
  border-right-color: black !important;
  border-left-color: transparent;
}

.webix_column,
.webix_cell {
  border-color: lightgreen;
  border-width: 1px;
  border-style: groove;
  border-right: 1px purple !important;
}

.no-close .ui-dialog-titlebar-close { display: none; }


/* ============================================================
   19. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .wrapper {
    flex-direction: column;
  }

  .sidebar {
    position: static;
  }
}

@media (max-width: 576px) {
  aside {
    display: none;
  }

  .text {
    font-size: 14px;
  }
}