/* Self-hosted fonts (variable WOFF2, latin + latin-ext subsets).
   No request ever leaves the host: third-party font CDNs would receive the page
   URL in the Referer header, which conflicts with the toolkit's privacy model. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* CSS Custom Properties (Variables) for site-wide theming */
:root {
  --primary-color: #0066ff;
  --secondary-color: #333; /* Default text color */
  --neutral-color: #888;
  --bg-color: #f9f9f9;
}

/* Basic CSS Reset for all elements */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Default body styling */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-color);
  color: var(--secondary-color); /* Default text color for the body */
  padding-top: 60px;     /* Space for fixed navbar */
  padding-bottom: 60px; /* Space for fixed footer */
  margin: 0;
}

/* Styling for code example blocks (used in customise.html) */
pre.code-guide-block {
  background-color: #f4f4f8; /* A slightly different background color for highlighting */
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-x: auto; /* Necessary if the code is wider than the container */
}

/* Styling for inline code within code example blocks */
pre.code-guide-block code {
  font-family: 'Courier New', Courier, monospace; /* Or another monospace font of your choice */
  font-size: 1.1em; /* Makes the font slightly larger */
  line-height: 1.6; /* Improves readability */
  color: #2c3e50; /* A dark color for the code text */
}

/* Styling for inline validation feedback messages */
.feedback-message {
  min-height: 1.2em; /* Prevents layout shifts when message appears/disappears */
  font-size: 0.9em;
  margin-top: 0.5rem;
  font-style: italic;
  margin-bottom: 1rem; 
}
.feedback-error {
  color: #d9534f; /* A standard red for errors */
  font-weight: bold;
}
.feedback-info {
  color: #5cb85c; /* A standard green for success/info */
}
.feedback-message.ready {
    color: #5cb85c; /* A standard green for success/info */
    font-weight: bold;
}
/* TYPOGRAPHY */
/* General heading styles */
h1 {
  text-align: center;
  margin: 16px 0;
  font-size: 2rem;
}

h2 {
  margin: 16px 0;
  font-size: 1.2rem;
  border-bottom: 1px solid var(--primary-color);
  padding-bottom: 0.5rem;
  color: var(--primary-color);
}

h3 {
  margin: 16px 0;
  font-size: 1.1rem;
}

.search-instructions-minimal {
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0; /* Removes the base class border-radius */
  margin-bottom: 0;
}

/* Styling for the CyberChef iframe container */
.cyberchef-iframe {
  width: 100%;
  height: 80vh; 
  border: none;
}

/* Specific styling for main page titles (typically H1) */
.page-title { 
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

/* Utility class for centering text */
.center-text {
  text-align: center;
}

/* LIST STYLING for content lists within the <main> element */
main ul,
main ol {
  list-style-position: outside; 
  padding-left: 20px;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

main ul {
  list-style-type: disc;
}

main ol {
  list-style-type: decimal;
}

main ul li, 
main ol li {
  margin-bottom: 0.5em;
  line-height: 1.6;
}

/* Removes extra bottom margin from the last list item in main content lists */
main ul li:last-child,
main ol li:last-child {
  margin-bottom: 0;
}


/* NAVBAR */
/* Main navigation bar container */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff; /* White background for navbar */
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: center;
  z-index: 1000;
}

/* Main menu list container */
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  max-width: 1200px;
  width: 100%;
  justify-content: space-around;
}

/* Individual main menu items (<li>) */
.menu > li {
  position: relative;
  height: 60px;
  flex: 1 1 auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.85rem;
  border-right: 1px solid #eee;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
}

/* Removes border from the last main menu item */
.menu > li:last-child {
  border-right: none;
}

/* Styling for text/links (<a> or <span>) within main menu items */
.menu > li a,
.menu > li span {
  display: block;
  line-height: 1.2;
  text-decoration: none; /* Remove underline from links */
  color: var(--secondary-color); /* Default text color for menu items */
  transition: color 0.2s ease-in;
}

/* Style for the active main menu link */
.menu > li a.active {
  color: var(--primary-color);
  font-weight: bold;
}

/* Hover state for the entire main menu item (<li>) */
.menu > li:hover {
  background-color: var(--primary-color);
}

/* Text of links and spans within .menu > li becomes white on <li> hover */
.menu > li:hover > a,
.menu > li:hover > span {
  color: #fff;
}

/* SUBMENU */
/* Submenu container styling (hidden by default) */
.submenu {
  display: none;
  position: absolute;
  background-color: #ffffff;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  min-width: 200px;
  z-index: 1001;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Individual submenu items (<li>) */
.submenu li {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  line-height: 1.4;
  border-bottom: 1px solid #eee;
}

/* Removes border from the last submenu item */
.submenu li:last-child {
  border-bottom: none;
}

/* Submenu links (<a>) styling */
.submenu li a {
  text-decoration: none;
  color: var(--secondary-color);
  display: block;
  transition: color 0.2s;
}

/* Hover state for individual submenu items (<li>) */
.submenu li:hover {
  background-color: var(--primary-color);
}

/* Submenu link (<a>) text color on <li> hover */
.submenu li:hover a {
  color: #ffffff;
}

/* Shows the submenu when the parent main menu item (<li>) is hovered */
.menu > li:hover > .submenu {
  display: block;
}


/* MAIN CONTENT */
/* Styling for the main content container of each page */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
}


/* SEARCH/INDEX CONTENT & INPUT CONTAINERS */
/* Styling for instructional sections, often containing input fields */
.search-instructions {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f0f0f0; 
    border: 1px solid #1a1a1a;   
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
}

/* Styling for labels within search-instructions sections */
.search-instructions label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
}

/* Container for multiple input fields, allows wrapping */
.input-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Container for a single input field and a button on the same line */
.input-button-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem; 
}

/* General styling for text input fields */
.input-field { 
  flex: 1;
  min-width: 200px;
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* Specific behavior for .input-field within .input-button-line */
.input-button-line .input-field {
  flex-grow: 1;
}


/* COLUMN LAYOUT */
/* Container for a two-column layout */
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Individual column styling */
.column {
  flex: 1;
  min-width: 300px;
  background-color: #fafafa;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* Grid layout for arranging forms (or other items) in typically 3 columns */
.form-row-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; 
  margin-bottom: 1rem;
}

.form-row-grid > form {
  /* Optional styling for forms within grid */
}


/* BUTTONS */
/* Base style for all buttons */
.button {
  width: 100%;
  padding: 0.5rem;
  background-color: #fff;
  border: 1px solid #ccc;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 3px;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  color: var(--secondary-color);
}

/* Hover state for buttons */
.button:hover {
  background-color: var(--primary-color);
  color: #FFFFFF;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/*
 * 1. Styling for active (enabled) buttons - STATIC STATE
 * Sets only the text color to primary, background remains default.
*/
.button.text-active {
  color: var(--primary-color);
  font-weight: bold;
  /* NON impostiamo qui il colore di sfondo */
}

/*
 * 2. Fix for text readability on ACTIVE + HOVER state
 * This rule ensures the text becomes white when an active button is hovered.
*/
.button.text-active:hover {
  color: #FFFFFF;
}

/* Buttons within .input-button-line should have automatic width */
.input-button-line .button {
  width: auto;
  flex-shrink: 0;
  min-width: 100px; 
}


/* BUTTON GROUP LABELS */
/* Category labels used to visually group buttons within a section */
.button-group-label {
  font-size: 0.8rem;
  color: var(--neutral-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin: 0.75rem 0 0.35rem;
  padding-left: 2px;
}

.button-group-label:first-of-type {
  margin-top: 0;
}


/* BUTTON GRID */
/* Container for a responsive grid of buttons */
.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Modifier class for a button grid strictly with 2 columns */
.button-grid-2col {
  grid-template-columns: repeat(2, 1fr);
}

/* Modifier class for a button grid strictly with 3 columns */
.button-grid-3col {
  grid-template-columns: repeat(3, 1fr);
}


/* NOTE BOX */
/* Styling for notification/note boxes */
.note {
  font-size: 0.9rem;
  background-color: #fff9d6;
  border-left: 3px solid #ffc107;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border-radius: 3px;
}
.note strong {
  font-weight: bold;
}

.iban-coverage-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.8rem 0;
}

.iban-coverage-table th {
    padding: 0.4rem 0.75rem;
    font-weight: bold;
    border: 1px solid #ccc;
    text-align: left;
    white-space: nowrap;
}

.iban-coverage-table td {
    padding: 0.35rem 0.75rem;
    border: 1px solid #ccc;
    vertical-align: top;
}

.iban-coverage-table tbody tr:nth-child(even) td {
    background-color: #f4f4f4;
}

/* Override inside .note (yellow background context) */
.note .iban-coverage-table th {
    background-color: #c8a000;
    color: #111;
    border-color: #a08000;
}

.note .iban-coverage-table td {
    background-color: #fffde8;
    border-color: #c8b800;
}

.note .iban-coverage-table tbody tr:nth-child(even) td {
    background-color: #fff8c0;
}

/* Likelihood table: highlight header row, body rows all same colour */
.likelihood-table thead th {
    background-color: #f4f4f4;
}
.likelihood-table tbody tr:nth-child(odd) td,
.likelihood-table tbody tr:nth-child(even) td {
    background-color: transparent;
}


/* MISCELLANEOUS STYLES */
/* Styling for Unix timestamp output (used in Currencies.html) */
#datetime {
  display: block;
  margin-top: 0.5rem;
  font-weight: bold;
  color: var(--primary-color);
}

/* Container for standards display (for Guidelines.html) */
.standards-container {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.standards-column {
  flex: 1;
  min-width: 300px;
}
.standards-list {
  list-style: disc;
}
.standards-list > li {
  position: relative;
  cursor: help;
}
.standards-list > li .description-text {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #dedede;
  padding: 12px;
  margin-top: 6px;
  width: 95%;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 6px;
  line-height: 1.5;
  color: var(--secondary-color);
  z-index: 10;
}
.standards-list > li:hover .description-text {
  display: block;
}


/* FOOTER */
/* Footer styling, fixed at the bottom */
footer {
  background-color: #ffffff;
  border-top: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  font-size: 0.9em;
  color: #555;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
}

footer a {
  color: var(--primary-color);
  text-decoration: none;
  margin-left: 10px;
}


/* RESPONSIVE STYLES */
/* Adjustments for medium-sized screens and smaller (e.g., tablets) */
@media (max-width: 992px) {
  .columns { 
    flex-direction: column;
  }
  .form-row-grid { 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
  }
}

/* Styling for the logo on the index page */
.index-logo {
  max-width: 500px;
  height: auto;
  margin-bottom: 1rem;
  display: block; 
  margin-left: auto;
  margin-right: auto;
}

/* Adjustments for small screens (e.g., mobile phones) */
@media (max-width: 768px) {
  .menu > li {
    font-size: 0.75rem;
    padding: 0 0.2rem;
  }
  .button-grid,
  .button-grid-2col,
  .button-grid-3col {
    grid-template-columns: 1fr;
  }
  .form-row-grid { 
    grid-template-columns: 1fr;
  }
  .input-button-line { 
    flex-wrap: wrap;
  }
  .input-button-line .input-field,
  .input-button-line .button { 
    width: 100%;
  }
  .input-button-line .input-field {
    margin-bottom: 0.5rem; 
  }
}

/* --- Easter Egg: Classical Theme --- */
body.matrix-mode {
  background-color: #ffffff;
  color: #2c1a00;
  font-family: 'Cinzel', serif;
}

body.matrix-mode * {
  font-family: 'Cinzel', serif;
}

body.matrix-mode .page-title {
  color: #8B6914;
  letter-spacing: 0.12em;
  text-shadow: 1px 1px 2px rgba(139,105,20,0.2);
  font-weight: 700;
}

body.matrix-mode h2,
body.matrix-mode h3 {
  color: #8B6914;
}

body.matrix-mode h2 {
  border-bottom-color: #C9A84C;
}

body.matrix-mode nav {
  background-color: #ffffff;
  border-bottom: 1px solid #C9A84C;
}

body.matrix-mode nav .menu > li {
  border-right-color: #C9A84C;
}

body.matrix-mode nav .menu > li > span,
body.matrix-mode nav .menu > li > a {
  color: #2c1a00;
}

body.matrix-mode nav .submenu {
  background-color: #fffdf5;
  border: 1px solid #C9A84C;
}

body.matrix-mode nav .submenu li a {
  color: #2c1a00;
}

body.matrix-mode nav .submenu li a:hover {
  background-color: rgba(201,168,76,0.12);
  color: #8B6914;
}

body.matrix-mode .input-field {
  background-color: #fffdf5;
  color: #2c1a00;
  border: 1px solid #C9A84C;
}

body.matrix-mode .input-field:focus {
  border-color: #8B6914;
  box-shadow: 0 0 6px rgba(139,105,20,0.2);
  outline: none;
}

body.matrix-mode .input-field::placeholder {
  color: #b89a5a;
}

body.matrix-mode .button {
  background-color: #ffffff;
  color: #2c1a00;
  border: 1px solid #C9A84C;
}

body.matrix-mode .button:hover {
  background-color: #C9A84C;
  color: #ffffff;
  border-color: #8B6914;
  box-shadow: 0 2px 8px rgba(139,105,20,0.25);
}

body.matrix-mode .button.text-active {
  color: #8B6914;
  font-weight: bold;
  border-color: #8B6914;
}

/* Styles for Phone Number Intel Display */
.phone-intel-display {
  margin-top: 0.75rem; 
  font-style: italic;
  color: #333; 
  min-height: 1.2em;
  text-align: left;
}

.input-section-description {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 0.75rem;
}

body.matrix-mode .note {
  background-color: #1a1410;
  border-left-color: #8B7355;
  color: #D4AF37;
}

body.matrix-mode .note strong {
  color: #E8C547;
}

body.matrix-mode footer {
  background-color: #1a1410;
  border-top: 1px solid #3d3428;
  color: #D4AF37;
}

body.matrix-mode footer a {
  color: #D4AF37;
}

body.matrix-mode footer a:hover {
  color: #E8C547;
}

/* --- Light Version Visibility ---
 * This class is added by JavaScript based on config.js
 * to hide elements for the "light" version of the toolkit.
*/
.hidden-in-light {
  display: none !important;
}

/* Stili per la Ricerca Toolkit */

.toolkit-search-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#toolkit-search-input {
    width: 50%;
    margin-bottom: 0;
    flex-shrink: 0;
}

#toolkit-search-counter {
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

#toolkit-search-count {
    color: #c0392b;
    font-weight: bold;
}

#toolkit-search-results {
    display: none;
    margin-top: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f5f5f5;
}

#toolkit-search-results.active {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow: hidden;
}

.toolkit-search-header {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    background-color: #eaeaea;
    border-bottom: 1px solid #ddd;
}

.toolkit-search-header span {
    flex: 1;
    padding: 0.4rem 0.75rem;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-color);
}

.toolkit-search-header span + span {
    border-left: 1px solid #ddd;
}

.toolkit-search-body {
    overflow-y: auto;
    flex: 1;
}

.toolkit-search-row {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #e0e0e0;
}

.toolkit-search-row:last-child {
    border-bottom: none;
}

.toolkit-search-row a {
    flex: 1;
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 0.88em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease;
}

.toolkit-search-row a + a {
    border-left: 1px solid #e0e0e0;
}

.toolkit-search-row:hover a {
    background-color: var(--primary-color);
    color: #fff;
}

.toolkit-search-more {
    padding: 0.4rem 0.75rem;
    font-size: 0.75em;
    color: var(--neutral-color);
    font-style: italic;
    text-align: center;
}

/* Help page screenshots */
.screenshot {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    margin: 1rem 0 1.5rem;
}
.screenshot-caption {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
}

/* Help page TOC */
.faq-toc {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    display: inline-block;
    min-width: 260px;
}