:root {
    --primary-color: #1d2d3e;
    --secondary-color: #4a6572;
    --accent-color: #0383c9;
    --accent-color-info: #0383c9;
    --background-color: #f5f5f5;
    --background-color-light: rgba(29, 45, 62, 0.1);
    --card-background: #ffffff;
    --text-color: #333333;
    --table-title: #7a0f51;
    --border-color: #e0e0e0;
    --code-background: #e7d8d8;
    --note-background: #dff0d8;
    --note-text: #212121;
    --info-background: #d9edf7;
    --info-text: #424242;
    --hint-background: #E0F2F1;
    --background-image: url('/d.webp');
    color-scheme: light; /* native widgets use light by default */
}

/* Respect OS preference by default */
@media (prefers-color-scheme: light) {
  :root {
    /* dark tokens */
    --primary-color: #c7d3e0;
    --secondary-color: #9bb0bc;
    --accent-color: #4fb2ff;
    --accent-color-info: #84dd5b;
    --background-color: #0f141a;
    --background-color-light: rgba(79, 96, 115, 0.1);
    --card-background: #19212b;
    --text-color: #e6e6e6;
    --table-title: #c7d3e0;
    --border-color: #2a3441;
    --code-background: #383131;
    --note-background: #2d3829;
    --note-text: #699269;
    --info-background: #2b383e;
    --info-text: #6da6da;
    --hint-background: #384e58;
    --background-image: none;
    color-scheme: dark; /* native widgets use dark */
  }
}

/* Manual override via attribute takes precedence */
html[data-theme="dark"] {
  --primary-color: #c7d3e0;
  --secondary-color: #9bb0bc;
  --accent-color: #4fb2ff;
  --accent-color-info: #84dd5b;
  --background-color: #0f141a;
  --background-color-light: rgba(79, 96, 115, 0.1);
  --card-background: #19212b;
  --text-color: #e6e6e6;
  --table-title: #c7d3e0;
  --border-color: #2a3441;
  --code-background: #383131;
  --note-background: #2d3829;
  --note-text: #699269;
  --info-background: #2b383e;
  --info-text: #6da6da;
  --hint-background: #384e58;
  --background-image: none;
  color-scheme: dark;
}

html[data-theme="light"] {
  /* optionally force light explicitly */
  color-scheme: light;
}

.background-element {
  background-image: var(--background-image);
  background-size: 125% 125%;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* Main content area - FULL WIDTH */
.main-content {
    width: 100%;
    min-height: 100vh;
     /* Add these lines: */
    margin: 0;
    padding: 0;
    position: relative;
}

.content-header {
    background-color: var(--background-color);
    padding: 20px 30px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

/* Button-like control shared by link and button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .6rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--card-background);
  color: var(--text-color);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  margin: 0.5rem;
}

/* Outline variant uses your variables and hover focus affordances */
.btn:hover {
  border-color: var(--accent-color);
  background: rgba(3,131,201,.06);
  color: #6863b6;
}

.btn:hover .material-icons {
  color: #6863b6; /* Same color as your button text */
}

/* Size Material Icons inside controls */
.btn .material-icons {
  font-size: 20px;
}

/* Remove global external-link pseudo icon for button-like links */
.btn::after { content: none; }

.content-header h2 {
    font-weight: 400;
    color: var(--text-color);
}

.content {
    /* padding: 30px;*/ 
    padding: 15px;
    max-width: 100%;
}

/* Card components (like ownCloud's file cards) */
.card {
    background: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    max-width: 100%;
}

.card h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 500;
}


/* Link styling with hover effects and icons */
a {
    display: inline-flex;
    align-items: center;
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    line-height: 1;
}

a:hover {
    border-bottom: 1px solid currentColor;
    color: #00a000; /* Green color on hover */
}

a::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-arrow-out-up-right"><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-arrow-out-up-right"><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* To change the default icon size */
.material-icons {
  font-size: 20px; /* Adjust to match your design */
  vertical-align: middle; /* Helps with alignment in text */
}

/* Your existing link hover effect will also style the icon! */
a:hover .material-icons {
  color: #00a000; /* Your chosen green hover color */
}

/* Table */

/* Markdown table styling with alternating colors and hover effects */
.content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Make tables responsive on mobile */
@media (max-width: 768px) {
    .content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Optional: Stack table cells for better mobile reading */
    .content table.stack-on-mobile {
        display: table;
        width: 100%;
        white-space: normal;
    }
    
    .content table.stack-on-mobile thead {
        display: none;
    }
    
    .content table.stack-on-mobile tbody,
    .content table.stack-on-mobile tr,
    .content table.stack-on-mobile td {
        display: block;
        width: 100%;
    }
    
    .content table.stack-on-mobile tr {
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 0.5rem;
    }
    
    .content table.stack-on-mobile td {
        border: none;
        padding: 0.5rem;
        position: relative;
        padding-left: 50%;
    }
    
    .content table.stack-on-mobile td:before {
        content: attr(data-label);
        position: absolute;
        left: 0.5rem;
        width: 45%;
        font-weight: 600;
        color: var(--primary-color);
    }
}

.content table thead {
    /* background-color: rgba(29, 45, 62, 0.1);  Lighter version of primary color */
    background-color: var(--background-color-light);
}

.content table th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 500;
    border-bottom: 2px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    color: var(--table-title);
    background-color: transparent;  /* Added to match table background */
}

.content table th:last-child {
    border-right: none;
}

.content table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    transition: all 0.2s ease;
    background-color: transparent;  /* Added to match table background */
    word-wrap: break-word;
    color: var(--text-color);
}

.content table td:last-child {
    border-right: none;
}

@media (max-width: 768px) {
    .content table td {
        max-width: none;
    }
}

.content table tbody tr:nth-child(even) {
    background-color: var(--background-color);
}

.content table tbody tr:nth-child(odd) {
    background-color: var(--card-background);
}

/* Hover effect - updated to be more subtle */
.content table tbody tr:hover {
    background-color: rgba(3, 132, 201, 0.276); /* Very light accent color */
    border-left: 3px solid var(--accent-color);
}

/* Remove border from last row */
.content table tbody tr:last-child td {
    border-bottom: none;
}

/* Optional: Add some spacing and styling for table headers */
.content table th { 
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.content p {
    margin-bottom: 1.2rem; /* Increased paragraph spacing */
    line-height: 1.7; /* Better line height for readability */
}

.content h1 > .heading-anchor,
.content h2 > .heading-anchor,
.content h3 > .heading-anchor,
.content h4 > .heading-anchor,
.content h5 > .heading-anchor,
.content h6 > .heading-anchor {
    text-decoration: none;
    color: inherit; /* Inherit color from heading */
    
}

.content h1 > .heading-anchor:hover,
.content h2 > .heading-anchor:hover,
.content h3 > .heading-anchor:hover,
.content h4 > .heading-anchor:hover,
.content h5 > .heading-anchor:hover,
.content h6 > .heading-anchor:hover {
    opacity: 1 !important;
    background-color: rgba(33, 164, 234, 0.1);
    color: var(--accent-color);
    border-radius: 4px; /* Nicely rounded edges */
}

.content blockquote {
    margin: 1rem 0;
    padding: 0.5rem 1.25rem; /* Even smaller vertical padding */
    border-left: 4px solid var(--accent-color);
    background-color: rgba(3, 131, 201, 0.05);
    border-radius: 0 4px 4px 0;
}

.content blockquote p {
    margin: 0.25rem 0; /* Very small paragraph margins inside blockquotes */
}

 .content pre {
    margin: 1.2rem 0;
    padding: 1.2rem;
    border-radius: 6px;
    background-color: var(--background-color);
    overflow-x: auto;
}

.content code {
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    background-color: var(--code-background);
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
}

/* SVG icon styling (if using SVG instead) */
.heading-anchor .anchor-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

a.heading-anchor::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0.6;
    transition: all 0.2s ease;
    vertical-align: middle;
}

/* Show the chain icon on heading hover */
.content h1:hover a.heading-anchor::after,
.content h2:hover a.heading-anchor::after,
.content h3:hover a.heading-anchor::after,
.content h4:hover a.heading-anchor::after,
.content h5:hover a.heading-anchor::after,
.content h6:hover a.heading-anchor::after {
    opacity: 1;
}

/* Hover effects on the chain icon itself */
a.heading-anchor:hover::after {
    opacity: 1 !important;
    background-color: var(--accent-color);
    transform: scale(1.1);
}

/* Specific heading spacing */
.content h1 {
    margin-top: 0; /* First heading doesn't need top margin */
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.content h4 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

/* List spacing */

.content ul,
.content ol {
  /*  margin-bottom: 1.5rem;
  /*  margin-top: 0.5rem;  */
    padding-left: 1.5rem; 
}

.content li {
 /*   margin-bottom: 0.5rem; */
    line-height: 1.2;
}

.content li:last-child {
    margin-bottom: 0;
}

/* Admonition Styles for Eleventy */
/* Admonition Styles - FIXED for markdown-it-container output */
.note, .tip, .info, .quote, .abstract, .attention,
.example, .hint, .success, .question, .caution, 
.warning, .danger, .failure, .bug, .error {
    border: 1px solid;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    display: block;
    position: relative;
}

/* Apply list styles INSIDE admonitions */

.note ul, .note ol,
.tip ul, .tip ol, 
.info ul, .info ol,
.quote ul, .quote ol,
.abstract ul, .abstract ol,
.attention ul, .attention ol,
.example ul, .example ol,
.hint ul, .hint ol,
.success ul, .success ol,
.question ul, .question ol,
.caution ul, .caution ol,
.warning ul, .warning ol,
.danger ul, .danger ol,
.failure ul, .failure ol,
.bug ul, .bug ol,
.error ul, .error ol {
   /* margin-bottom: 1.5rem; */
    margin-top: 1.2rem;
    padding-left: 2rem;
}


.note li, .tip li, .info li, .quote li, .abstract li,
.attention li, .example li, .hint li, .success li,
.question li, .caution li, .warning li, .danger li,
.failure li, .bug li, .error li {
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.note li:last-child, .tip li:last-child, .info li:last-child,
.quote li:last-child, .abstract li:last-child,
.attention li:last-child, .example li:last-child,
.hint li:last-child, .success li:last-child,
.question li:last-child, .caution li:last-child,
.warning li:last-child, .danger li:last-child,
.failure li:last-child, .bug li:last-child,
.error li:last-child {
    margin-bottom: 0;
}

.note p, .tip p, .info p, .quote p, .abstract p, .attention p,
.example p, .hint p, .success p, .question p, .caution p, 
.warning p, .danger p, .failure p, .bug p, .error p {
    margin: 0.2rem 0;
    line-height: 1.1;
}

.note p:first-of-type, .tip p:first-of-type, .info p:first-of-type,
.quote p:first-of-type, .abstract p:first-of-type, .attention p:first-of-type,
.example p:first-of-type, .hint p:first-of-type, .success p:first-of-type,
.question p:first-of-type, .caution p:first-of-type, .warning p:first-of-type,
.danger p:first-of-type, .failure p:first-of-type, .bug p:first-of-type,
.error p:first-of-type {
    margin-top: 0;
}

.note p:last-of-type, .tip p:last-of-type, .info p:last-of-type,
.quote p:last-of-type, .abstract p:last-of-type, .attention p:last-of-type,
.example p:last-of-type, .hint p:last-of-type, .success p:last-of-type,
.question p:last-of-type, .caution p:last-of-type, .warning p:last-of-type,
.danger p:last-of-type, .failure p:last-of-type, .bug p:last-of-type,
.error p:last-of-type {
    margin-bottom: 0;
}

/* Individual admonition styles */
.note {
    background-color: var(--note-background);
    border-color: #A6A6A6;
    color: var(--note-text);
}

.tip {
    background-color: #F5F5F5;
    border-color: #B9B9B9;
    color: #616161;
}

.info {
    background-color: var(--info-background);
    border-color: #AAAAAA;
    color: var(--info-text);
}

.info a {
    color: var(--accent-color-info);
}

.quote {
    background-color: #ECEFF1;
    border-color: #A9B3B8;
    color: #455A64;
}

.abstract {
    background-color: #E1F5FE;
    border-color: #87C9EC;
    color: #0288D1;
}

.attention {
    background-color: #E3F2FD;
    border-color: #94C7F3;
    color: #1E88E5;
}

.example {
    background-color: #EDE7F6;
    border-color: #B39FDA;
    color: #5E35B1;
}

.hint {
    background-color: var(--hint-background);
    border-color: #86C8C1;
    color: #00897B;
}

.success {
    background-color: #E8F5E9;
    border-color: #A1CBA3;
    color: #388E3C;
}

.question {
    background-color: #FFFDE7;
    border-color: #FCDB99;
    color: #F9A825;
}

.caution {
    background-color: #FFF8E1;
    border-color: #FDCC87;
    color: #FB8C00;
}

.warning {
    background-color: #FFF3E0;
    border-color: #FBC386;
    color: #F57C00;
}

.danger {
    background-color: #FFEBEE;
    border-color: #EFA797;
    color: #D84315;
}

.failure {
    background-color: #FEE2E6;
    border-color: #EC9A9C;
    color: #D32F2F;
}

.bug {
    background-color: #FDDADD;
    border-color: #E58D8F;
    color: #C31A1A;
}

.error {
    background-color: #FDD2D6;
    border-color: #E1898B;
    color: #B71C1C;
}

/* Make the anchor inline-block when it contains centered content */
.heading-anchor:has(.center-heading) {
    display: inline-block !important;
    text-align: center;
    width: auto;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* Center the heading content while maintaining proper alignment */
.heading-anchor:has(.center-heading) .center-heading {
    /* display: inline;*/
    text-align: center;
}

.center-img { 
    display: block; 
    margin-inline: auto; 
}

/* theme-toggle */

#theme-toggle:focus {
  outline: 2px solid var(--accent-color, #007bff);
  outline-offset: 2px;
}

#theme-toggle:active {
  transform: translateY(1px);
}

/* -------------------------------- */
/* Markdown Customization */

mark {
  background-color: #79744e;
  color: rgb(255, 255, 255);
  padding: 0.2em 0.3em;
  font-size: 1.1em;
  border-radius: 2px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1); /* Subtle text shadow */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


/* Image spacing */
.content img {
    margin: 0.95rem 0;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.content-center {
    display: grid;
    place-items: center;
    height: auto;
    padding-bottom: 1.5rem;
}

.content-center img {
  max-width: 100%;
  height: auto;
}

/* Reduce spacing for images inside paragraphs */
.content p img {
    margin: 1rem 0 0.3rem; /* Reduced margin when inside paragraphs */
}