// ==========================================
// STYLESHEET IMPORTS AND DEPENDENCIES
// ==========================================
// Import base styling modules for colors, fonts, and core functionality
@import "colors";
@import "fonts";
@import "variables";
@import "admonition";
@import "mixins";
@import "normalize.scss";
@import "syntax.scss";

// Conditionally import animation styles if enabled in site configuration
{{ if ne false .Site.Params.usesAnimation }}
@import "animate.scss";
{{ end }}

// Import additional feature-specific stylesheets
@import "scrolltotop.scss";
@import "socialshare.scss";

// Conditionally import gallery styles and set thumbnail size if gallery feature is enabled
{{ if .Site.Params.gallery.enable }}
$thumbnail: {{ printf "%spx" ($.Site.Params.gallery.thumbnail | default "300") }};
@import "gallery.scss";
{{ end }}

// ==========================================
// DYNAMIC ACCENT COLOR CONFIGURATION
// ==========================================
// Override default accent color variables with site-specific accent color from hugo.toml
// If no custom accent color is specified, fallback values from _colors.scss will be used
{{- with .Site.Params.accentColor }}
$aTag-mixin-a-box-shadow: {{.}};
$aTag-mixin-a-hover-box-shadow: {{.}};
$content-anchor-hover: {{.}};
$footnote-ref-hover-background: {{.}};
$post-description-a-hover-border-bottom: {{.}};
$tableofcontents-a-hover-border-bottom: {{.}};
$scrolltotop-arrow: {{.}};
$typewriter: {{.}};
$marked-background: {{.}};
$inserted-text-underline: {{.}};
{{ end -}}

// ==========================================
// SCROLL-TO-TOP BUTTON STYLING
// ==========================================
// Define color properties for the circular scroll-to-top button components
.scroll-up {
  .scroll {
    #st-ring {
      stroke: $scrolltotop-ring;
    }
    #st-circle {
      fill: $scrolltotop-circle;
    }
    #st-arrow {
      fill: $scrolltotop-arrow;
    }
  }
}

// ==========================================
// TEXT SELECTION STYLING
// ==========================================
// Customize the background color of selected text across browsers
::-moz-selection {
  background: $text-select;
}

::selection {
  background: $text-select;
}

// ==========================================
// WEBKIT SCROLLBAR CUSTOMIZATION
// ==========================================
// Style the main page scrollbar for webkit-based browsers
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: $pagescrollbar-background;
}

// Style the scrollbar thumb (draggable portion) with hover effects
::-webkit-scrollbar-thumb {
  background: $pagescrollbar-thumb;

  &:hover {
    background: $pagescrollbar-thumb-hover;
  }
}

// ==========================================
// BASE HTML AND BODY STYLING
// ==========================================
// Set global HTML properties including background, typography, and smooth scrolling
html {
  background: $html-background;
  line-height: 1.6;
  letter-spacing: .06em;
  scroll-behavior: smooth;
}

// Apply consistent text color to all interactive and text elements
body,
button,
input,
select,
textarea,
a {
  color: $text;
}

// Set primary font family for all form elements and body text
body,
button,
input,
select,
textarea {
  font-family: $fonts;
}

// ==========================================
// CODE AND TYPOGRAPHY STYLING
// ==========================================
// Apply monospace font family to all code-related elements
pre,
code,
pre tt {
  font-family: $code-fonts;
}

// Style highlighted text (mark element) with custom colors
mark {
  color: $marked-text;
  background-color: $marked-background;
}

// Style inserted text with custom underline color
ins {
  text-decoration: underline;
  -webkit-text-decoration-color: $inserted-text-underline;
  text-decoration-color: $inserted-text-underline;
}

// Style preformatted code blocks with syntax highlighting support
pre {
  padding: .7em 1.1em;
  font-size: .9em;
  line-height: 1.5;
  letter-spacing: normal;
  white-space: pre;
  color: $pre-code;
  background: $pre-background;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  
  // Special background for Mermaid diagrams
  &.mermaid {
    background: $mermaid-background;
  }
  
  // Style inline code within pre blocks
  code {
    padding: 0;
    margin: 0;
    color: $pre-code;
    background: $pre-code-background;
  }
}

// Style inline code elements with rounded corners and spacing
code {
  color: hsl(0, 1%, 67%);
  background: $code-background;
  border-radius: 3px;
  padding: 0 3px;
  margin: 0 4px;
  word-wrap: break-word;
  letter-spacing: normal;
}

// Style blockquotes with left border and italic text
blockquote {
  border-left: .25em solid;
  margin: 1em;
  padding: 0 1em;
  font-style: italic;

  // Style citation elements within blockquotes
  cite {
    font-weight: bold;
    font-style: normal;

    // Add em dash before citations
    &::before {
      content: "—— ";
    }
  }
}

// ==========================================
// LINK AND INTERACTIVE ELEMENT STYLING
// ==========================================
// Style all links with smooth color transitions and hover effects
a {
  text-decoration: none;
  border: none;
  transition-property: color;
  transition-duration: .4s;
  transition-timing-function: ease-out;

  &:hover {
    color: $a-hover;
    text-shadow: 0 0 1px $a-hover;
  }
}

// Style horizontal rule elements with dashed appearance
hr {
  opacity: .2;
  border-width: 0 0 5px 0;
  border-style: dashed;
  background: transparent;
  width: 50%;
  margin: 1.8em auto;
}

// ==========================================
// TABLE STYLING
// ==========================================
// Style data tables with consistent borders and spacing
table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  width: 100%;
  max-width: 100%;

  th,
  td {
    padding: 1.5%;
    border: 1px solid;
  }

  th {
    font-weight: 700;
    vertical-align: bottom;
  }
}

// ==========================================
// LAYOUT CONTAINER CLASSES
// ==========================================
// Main content container with responsive width and centering
.section-inner {
  margin: 0 auto;
  max-width: 1200px;
  width: 93%;
}

// Narrow content container for better readability
.thin {
  max-width: 720px;
  margin: auto;
}

// Icon styling for consistent feather icon display
.feather {
  display: inline-block;
  vertical-align: -.125em;
  width: 1em;
  height: 1em;
}

// Sub-menu text sizing
.sub-menu {
  font-size: .7em;
}

// Elements that are hidden on mobile and shown only on desktop
.desktop-only, .desktop-only-ib {
  display: none;
}

// ==========================================
// CODE COPY BUTTON FUNCTIONALITY
// ==========================================
// Container positioning for syntax highlighted code blocks
.highlight {
    position: relative;
}

// Ensure proper overflow handling for code blocks
.highlight div,
.highlight pre {
  overflow-x: auto;
  border-radius: 4px;
  -webkit-overflow-scrolling: touch;
}

// Style the copy-to-clipboard button for code blocks
.highlight-copy-btn {
    position: absolute;
    bottom: 7px;
    right: 7px;
    border: 0;
    border-radius: 4px;
    padding: 1px;
    font-size: 0.7em;
    line-height: 1.8;
    color: $highlight-copy-btn;
    background-color: $highlight-copy-btn-background;
    opacity: 0.6;
    min-width: 55px;
    text-align: center;
}

// Hover state for the copy button
.highlight-copy-btn:hover {
    background-color: $highlight-copy-btn-hover;
}

// ==========================================
// ACCESSIBILITY FEATURES
// ==========================================
// Screen reader accessible text that's visually hidden but available to assistive technologies
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

// Show screen reader text when it receives keyboard focus
.screen-reader-text:focus {
  background-color: $screen-reader-text-background;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: $screen-reader-text;
  display: block;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

// ==========================================
// SITE HEADER AND NAVIGATION
// ==========================================
// Fixed bottom header with shadow and animation support
#site-header {
  position: fixed;
  z-index: 1;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.45);
  background-color: $site-header-background;
  animation-duration: .3s;
  animation-fill-mode: forwards;
}

// Header wrapper with flexbox layout for navigation elements
.hdr-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5em 0;
  font-size: 1.2rem;

  // Site logo/branding styling
  .site-branding {
    display: inline-block;
    margin-right: .8em;
    font-size: 1.2em;
  }

  // Main navigation menu styling
  .site-nav {
    display: inline-block;
    font-size: 1.1em;
    opacity: .8;

    // Parent menu items with children indicators
    .has-children {
      padding-right: .5em;
      border-right: 2px solid $site-nav-children-border-right;
    }

    // Sub-menu item spacing
    .sub-menu > a{
      margin-left: .3em;
    }

    // General navigation link spacing
    a {
      margin-left: .8em;
    }
  }
}

// Header icon container styling
.hdr-icons {
  font-size: 1.2em;
}

// Header link container for external links
.hdr-links {
  display: inline-block;
  margin-left: .6em;

  &>a {
    margin-left: .4em;
  }
}

// Base styling for header buttons
.hdr-btn {
  border: none;
  background: none;
  padding: 0;
  margin-left: .4em;
  cursor: pointer;
}

// Mobile hamburger menu button (hidden by default)
#menu-btn {
  display: none;
  margin-left: .6em;
  cursor: pointer;
}

// Mobile dropdown menu overlay
#mobile-menu {
  position: fixed;
  bottom: 4.8em;
  right: 4.5em;
  display: none;
  padding: .6em 1.8em;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: -1px -2px 3px 0px rgba(0, 0, 0, 0.45);
  background-color: $mobile-menu-background;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 2;
    font-size: 1.2em;
  }
}

// ==========================================
// SITE FOOTER
// ==========================================
// Simple centered footer with appropriate spacing
#site-footer {
  text-align: center;
  font-size: .6em;
  margin-bottom: 96px;
  margin-top: 64px;

  p {
    margin: 0;
  }
}

// ==========================================
// SPOTLIGHT/HOMEPAGE LAYOUT
// ==========================================
// Full-height centered layout for homepage and error pages
#spotlight {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 93%;
  margin: auto;
  font-size: 1.5rem;

  // Special layout for 404 error pages
  &.error-404 {
    flex-direction: row;
    line-height: normal;
  }
}

// 404 error page illustration container
p.img-404 {
  margin: 0;

  svg {
    width: 180px;
    max-width: 100%;
    height: auto;
  }
}

// 404 error page content and action buttons
.banner-404 {
  margin-left: 2em;

  h1 {
    font-size: 3em;
    margin: .5rem 0;
  }

  p {
    margin-top: 0;
  }

  .btn-404 {
    font-size: .8em;

    a {
      display: inline-block;
      border: 2px solid $btn-404-a-border;
      border-radius: 5px;
      padding: 5px;
      transition-property: color, border-color;

      &:first-child {
        margin-right: 1em;
      }

      &:hover {
        border-color: $btn-404-a-hover;
      }

      svg {
        margin-right: .5em;
      }
    }
  }
}

// Homepage central content container
#home-center {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
}

// Homepage main title styling
#home-title {
  margin: 0;
  text-align: center;
}

// Homepage social/external links
#home-links {
  font-size: 1.4em;
  text-align: center;
  opacity: .8;

  a {
    margin: 0 .2em;
  }
}

// Homepage internal navigation links
#home-nav {
  opacity: .8;

  a {
    display: block;
    text-align: center;
    margin-top: .5em;
  }
}

// Homepage footer content
#home-footer {
  text-align: center;
  font-size: .6em;
  line-height: normal;
  @include dimmed;

  p {
    margin-top: 0;
  }
}

// ==========================================
// BLOG POST LISTING PAGE (list.html)
// ==========================================
// Yearly post grouping container with flexible layout
.posts-group {
  display: flex;
  margin-bottom: 1.9em;
  line-height: normal;

  // Year header for post groupings
  .post-year {
    padding-top: 6px;
    margin-right: 1.8em;
    font-size: 1.6em;
    @include dimmed;

    &:hover {
      cursor: pointer;
    }
  }

  // List of posts within each year group
  .posts-list {
    flex-grow: 1;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  // Individual post item styling with divider
  .post-item {
    border-bottom: 1px $post-item-border-bottom dashed;

    a {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 10px 0;
    }
  }

  // Post publication date display
  .post-day {
    flex-shrink: 0;
    margin-left: 1em;
    @include dimmed;
  }

  // Post taxonomy (tags and categories) styling
  .post-tags,
  .post-categories {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    font-size: xx-small;
    @include dimmed;

    a {
      margin-right: 0.5em;
    }
  }
  
  .post-tags {
    padding-right: 12px;
  }

  // Post excerpt/description styling
  .post-description {
    font-size:x-small;
    @include dimmed;
  }
  
  // Container for post metadata (tags, categories)
  .post-taxonomy {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
  }
}

// Special styling for pinned/featured posts
.pinned-posts-group {
  display: flex;
  margin-bottom: 1.9em;
  line-height: normal;
  border-bottom: 2px $pinned-posts-group-border-bottom solid;

  .pinned-posts-list {
    flex-grow: 1;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pinned-post-item {
    display: flex;
    justify-content: start;
    align-items: baseline;
    padding: 12px 0;

    a {
      padding-left: 12px;
    }
  }
}

// ==========================================
// SINGLE POST PAGE STYLING (single.html)
// ==========================================
// Full-screen background image overlay functionality
.bg-img {
  width: 100vw;
  height: 100vh;
  opacity: .03;
  z-index: -1;
  position: fixed;
  top: 0;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: opacity .5s;
}

// Active state for background image overlay
.show-bg-img {
  z-index: 100;
  opacity: 1;
  cursor: pointer;
}

// Copyright notice overlay for featured background images
.bg-img-copyright {
  position: fixed;                                // Positioned relative to the viewport
  bottom: 20px;                                   // Adjust padding from the bottom as needed
  left: 0;
  right: 0;                                       // Stretches across the full width
  padding: 8px 15px;                              // Vertical and horizontal padding
  color: $featured-image-text;                    // Light text color, suitable for overlays
  background-color: $featured-image-background;  // Semi-transparent dark background for readability
  font-size: 0.75em;                              // Smaller font size for copyright text
  text-align: center;
  z-index: 100;                                   // z-index should be high enough to be visible with the shown background.
  
  // Initially hidden: opacity for fade, visibility to remove from layout/interaction
  opacity: 0;
  visibility: hidden;
  pointer-events: none; // Prevent any interaction when hidden

  // Transition opacity smoothly. Visibility changes will be immediate.
  transition: opacity 0.5s ease;

  @include aTag;
}

// Show copyright when background image is active
.bg-img.show-bg-img + .bg-img-copyright {
  opacity: 1;
  visibility: visible; // Make it visible
  pointer-events: auto; // Allow interaction
}

// Post header section with title and metadata
.post-header {
  margin-top: 1.2em;
  line-height: normal;

  .post-date {
    font-size: .9em;
    letter-spacing: normal;
    @include dimmed;
  }

  h1 {
    margin-top: .1em;
  }
}

// Decorative horizontal rule at post end
hr.post-end {
  width: 50%;
  margin-top: 1.6em;
  margin-bottom: .8em;
  margin-left: 0;
  border-style: solid;
  border-bottom-width: 4px;
}

// ==========================================
// MAIN CONTENT AREA STYLING
// ==========================================
// Primary post content container with optional text justification
.content {
  {{- with .Site.Params.justifyContent }}
  text-align: justify;
  text-justify: inter-ideograph; //For IE/Edge
  {{- end }}

  @include aTag;

  // Figure and image handling with various alignment options
  figure {
    max-width: 100%;
    height: auto;
    margin: 0;
    text-align: center;

    // Figure captions styling
    p {
      font-size: .8em;
      font-style: italic;
      @include dimmed;
    }
  }

  // Left-aligned figures for text wrapping
  figure.left {
    float: left;
    margin-right: 1.5em;
    max-width: 50%;
  }

  // Right-aligned figures for text wrapping
  figure.right {
    float: right;
    margin-left: 1.5em;
    max-width: 50%;
  }

  // Full-width figures that extend beyond content bounds
  figure.big {
    max-width: 100vw;
  }

  // Responsive image styling with rounded corners
  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
    border-radius: 4px;
  }

  // List styling with consistent indentation
  ul,
  ol {
    padding: 0;
    margin-left: 1.8em;
  }

  // Heading anchor links for deep linking to sections
  a.anchor {
    float: left;
    margin-left: -20px;
    padding-right: 6px;
    box-shadow: none;
    opacity: .8;
    
    &:hover {
      background: none;
      color: $content-anchor-hover;
      opacity: 1;
    }

    svg {
      display: inline-block;
      width: 14px;
      height: 14px;
      vertical-align: baseline;
      visibility: hidden;
    }
    
    &:focus svg {
      visibility: visible;
    }
  }

  // Show anchor links on heading hover for better UX
  h1:hover a.anchor svg,
  h2:hover a.anchor svg,
  h3:hover a.anchor svg,
  h4:hover a.anchor svg,
  h5:hover a.anchor svg,
  h6:hover a.anchor svg {
    visibility: visible;
  }
}

// ==========================================
// FOOTNOTES STYLING
// ==========================================
// Footnotes section with smaller text and specialized link handling
.footnotes {
  font-size: .85em;

  a {
    box-shadow: none;
    text-decoration: underline;
    transition-property: color;

    &:hover {
      background: transparent;
    }

    &.footnote-backref {
      text-decoration: none;
    }
  }

  ol {
    line-height: 1.8;
  }
}

// Inline footnote reference links with background highlighting
a.footnote-ref {
  box-shadow: none;
  text-decoration: none;
  padding: 2px;
  border-radius: 2px;
  background-color: $footnote-ref-background;

  &:hover{
    box-shadow: none;
    background-color: $footnote-ref-hover-background;
    transition-property: background-color;
  }
}

// ==========================================
// TAXONOMY (TAGS AND CATEGORIES) STYLING
// ==========================================
// Tag styling with customizable prefix symbol
.tag {
  text-transform: lowercase;
  &::before {
    {{- with .Site.Params.tagSymbol | default "#" -}}content: "{{ . }}"{{- end -}}
  }
}

// Category styling with customizable prefix symbol
.category {
  &::before {
    {{- with .Site.Params.categorySymbol | default "⊲" -}}content: "{{ . }}"{{- end -}}
  }
}

// Post metadata and taxonomy display
.post-description {
  font-size: .8rem;
  line-height: normal;
  @include dimmed;

  p {
    margin: .8em 0;
  }

  a:hover {
    border-bottom: 1px solid $post-description-a-hover-border-bottom;
  }

  svg {
    margin-right: .8em;
  }

  .tag, 
  .category {
    margin-right: .5em;
  }
}

// ==========================================
// TABLE OF CONTENTS (TOC) FUNCTIONALITY
// ==========================================
// Fixed-position table of contents for long articles
#toc {
  position: fixed;
  left: 50%;
  top: 0;
  display: none;
  background-color: $tableofcontents-background;
}

// Table of contents title styling
.toc-title {
  margin-left: 1em;
  margin-bottom: .5em;
  font-size: .8em;
  font-weight: bold;
}

// Main table of contents container with custom scrollbar
#TableOfContents {
  font-size: .8em;
  @include dimmed;

  ul {
    padding-left: 1em;
    padding-right: 1em;
    margin: 0;
  }

  // Custom scrollbar styling for table of contents
  &>::-webkit-scrollbar {
    width: 4px;
  }

  &>::-webkit-scrollbar-track {
    background: $tableofcontents-scrollbar-track;
  }

  &>::-webkit-scrollbar-thumb {
    background: $tableofcontents-scrollbar-thumb ;
  }

  &>::-webkit-scrollbar-thumb:hover {
    background: $tableofcontents-scrollbar-thumb-hover;
  }

  &>ul {
    list-style-type: none;
    overflow-y: auto;
    height: calc(100vh - 300px);

    // Nested list styling with smaller font
    ul ul {
      font-size: .9em;
    }
  }

  a:hover {
    border-bottom: $tableofcontents-a-hover-border-bottom 1px solid;
  }
}

// ==========================================
// POST NAVIGATION (PREV/NEXT LINKS)
// ==========================================
// Navigation between consecutive blog posts
.post-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5em;
  margin-bottom: 2.5em;
  font-size: 1.2em;

  a {
    flex-basis: 50%;
    flex-grow: 1;
  }

  .next-post {text-align: left; padding-right: 5px;}
  .prev-post {text-align: right; padding-left: 5px;}

  .post-nav-label {
    font-size: .8em;
    opacity: .8;
    text-transform: uppercase;
  }
}

// ==========================================
// RELATED POSTS SECTION
// ==========================================
// Suggested related posts at the end of articles
.related-posts {
  padding: .8em;
  margin-top: 1.5em;
  font-size: .8rem;
  border: 3px dashed rgba(255, 255, 255, .2);
  border-radius: 5px;

  h2{
    margin: 0;
    line-height: normal;
  }

  ul {
    margin-top: .5em;
    margin-bottom: 0;
  }
}

// Positioning of brainmade label at the end of articles
.human{
  display: flex;
  justify-content: flex-end;
}

// ==========================================
// TYPEWRITER ANIMATION EFFECT SYSTEM
// ==========================================
// Main container for typewriter effect with responsive sizing
#typewriter-container {
    width: $width-desktop;
    font-size: $font-size-desktop;
    line-height: $line-height;
}

// Subtitle text element with typewriter animation behavior
#home-subtitle {
  padding: 0 1.2em;
  margin: 0;
  line-height: normal;
  font-size: .7em;
  font-style: italic;
  opacity: .9;
  word-wrap: break-word;
  text-align: left;
  white-space: pre-wrap;
  
  // Reserve minimum height based on maximum expected content to prevent layout shift
  min-height: calc(#{$line-height} * #{$max-lines-desktop} * 1em);
}

{{- if .Site.Params.homeSubtitlePrinter -}}
// Enhanced typewriter animation functionality when printer feature is enabled
#home-subtitle {
  // Initially hidden until animation system is ready
  visibility: hidden;

  // Show element during active typewriter animation states
  &.ready,
  &.typing,
  &.done {
    visibility: visible;
  }

  // Animated cursor implemented as CSS pseudo-element
  &::after {
    content: '';
    display: inline-block;
    width: $cursor-width;
    height: $cursor-height;
    background: $typewriter;
    margin-left: $cursor-margin;
    vertical-align: middle;
  }

  // Activate blinking cursor animation during ready and completed states
  &.ready::after,
  &.done::after {
    animation: blink $blink-duration infinite;
  }
}

// Hidden element for measuring text width during typewriter animation calculations
.measure-element {
  width: auto;
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  top: -9999px; // Position element outside visible viewport
  left: -9999px;
}

// Keyframe animation for typewriter cursor blinking effect
@keyframes blink {
  from,
  to {
    opacity: 1; // Cursor visible state
  }

  50% {
    opacity: 0; // Cursor hidden state (mid-animation)
  }
}
{{- end -}}

// ==========================================
// RESPONSIVE DESIGN MEDIA QUERIES
// ==========================================
// Progressive enhancement for different screen sizes and devices

// Extra Small Mobile Devices - Phones in portrait mode (up to 520px)
@media (max-width: 520px) {
  .content figure.left,
  .content figure.right {
    float: unset;
    max-width: 100%;
    margin: 0;
  }

  hr.post-end {
    width: 60%;
  }

  #mobile-menu {
    right: 4.2em;
  }
}

// Small Mobile Devices - Phones and small tablets (up to 760px)
@media (max-width: 760px) {
  .hide-in-mobile,
  .site-nav.hide-in-mobile {
    display: none;
  }

  #menu-btn {
    display: inline-block;
  }

  .posts-group {
    display: block;

    .post-year {
      margin: -6px 0 4px;
    }
  }

  #spotlight.error-404 {
    flex-direction: column;
    text-align: center;

    .banner-404 {
      margin: 0;
    }
  } 

  #home-subtitle {
    font-size: .7rem;
  }

  // Mobile-specific typewriter container sizing
  #typewriter-container {
    width: $width-mobile;
    font-size: $font-size-mobile;
  }
  
  #home-subtitle {
    padding: 0;
    // Adjust minimum height for mobile line count expectations
    min-height: calc(#{$line-height} * #{$max-lines-mobile} * 1em);
  }
}

// Above Mobile - Desktop and tablet devices (761px and up)
@media (min-width: 761px) {
  #mobile-menu {
    display: none !important;
  }
}

// Medium Tablet Devices - iPads and similar (768px to 1023px)
@media (min-width: 768px) and (max-width: 1023px) {
  #typewriter-container {
    width: $width-tablet;
  }
}

// Small Desktop - Laptops and smaller desktops (800px and up)
@media (min-width: 800px) {
  .site-main {
    margin-top: 3em;
  }

  hr.post-end {
    width: 40%;
  }
}

// Medium Desktop - Standard desktop screens (960px and up)
@media (min-width: 960px) {
  .site-main {
    margin-top: 6em;
  }
}

// Large Desktop - Wide desktop monitors (1300px and up)
@media (min-width: 1300px) {
  .site-main {
    margin-top: 8em;
  }

  // Show desktop-only elements and table of contents
  .desktop-only,
  #toc.show-toc {
    display: block;
  }

  .desktop-only-ib {
    display: inline-block;
  }

  // Extended figure positioning for wide screens
  figure.left {
    margin-left: -240px;
    p {
      text-align: left;
    }
  }

  figure.right {
    margin-right: -240px;
    p {
      text-align: right;
    }
  }

  figure.big {
    width: 1200px;
    margin-left: -240px;
  }

  hr.post-end {
    width: 30%;
  }

  // Position table of contents in sidebar area
  #toc {
    top: 13em;
    margin-left: 370px;
    max-width: 220px;
  }
}

// Extra Large Desktop - Ultra-wide monitors (1800px and up)
@media (min-width: 1800px) {
  .site-main {
    margin-top: 10em;
  }

  // Expanded content container for ultra-wide screens
  .section-inner {
    max-width: 1600px;
  }

  .thin {
    max-width: 960px;
  }

  // Further extended figure positioning for ultra-wide displays
  figure.left {
    max-width: 75%;
    margin-left: -320px;
  }

  figure.right {
    max-width: 75%;
    margin-right: -320px;
  }

  figure.big {
    width: 1600px;
    margin-left: -320px;
  }

  hr.post-end {
    width: 30%;
  }

  // Adjusted table of contents positioning for ultra-wide layouts
  #toc {
    top: 15em;
    margin-left: 490px;
    max-width: 300px;
  }
}

// ==========================================
// USER CUSTOMIZATION OVERRIDE
// ==========================================
// Import user-specific custom styles if they exist - these will override all built-in styles
{{- if (fileExists "assets/scss/userstyles.scss") }}
@import "userstyles.scss";
{{ end -}}
