/* ============================================
   VARIABLES
   ============================================ */

:root {

    /* Pallet CSS Variables */
    --blue: hsla(240, 100%, 50%, 1);
    --red: hsla(0, 100%, 50%, 1);
    --green: hsla(120, 100%, 50%, 1);
    --yellow: hsla(60, 100%, 50%, 1);
    --pink: hsla(300, 100%, 50%, 1);
    --orange: hsla(30, 100%, 50%, 1);

    /* Pallet Shades */
    --transparent: hsla(0, 0%, 0%, 0);

    --white: hsla(0, 0%, 100%, 1);
    --black: hsla(0, 0%, 0%, 1);

    /* Debug Colors */
    --success: var(--green);
    --warning: var(--yellow);
    --error: var(--red);
    --info: var(--blue);
    --trans: var(--transparent);
    
    --debug-grey: var(--light-grey);
    --debug-blue: var(--blue);
    --debug-red: var(--red);

    /* Typography */
    --font-primary: 'Roboto', 'Helvetica', sans-serif;
    --font-secondary: 'Open Sans', 'Arial', sans-serif; 
   
    --text-size-small: 0.75rem;     /* 12px */
    --text-size-normal: 1rem;       /* 16px */
    --text-size-large: 1.25rem;     /* 20px */
    --text-size-xlarge: 1.5rem;     /* 24px */
    --text-size-xxlarge: 2rem;      /* 32px */

    /* Responsive text sizes (Modern, but complicated */
    /* --text-size-small: clamp(0.7rem, 0.65rem + 0.3vw, 0.8rem);      ~11–13px */
    /* --text-size-normal: clamp(0.95rem, 0.9rem + 0.5vw, 1.125rem);   ~15–18px */
    /* --text-size-large: clamp(1.15rem, 1.1rem + 0.7vw, 1.375rem);    ~18–22px */
    /* --text-size-xlarge: clamp(1.35rem, 1.3rem + 0.9vw, 1.75rem);    ~22–28px */
    /* --text-size-xxlarge: clamp(1.7rem, 1.6rem + 1.25vw, 2.5rem);    ~28–40px */
     
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.8;
    
    --letter-spacing-tight: -0.03em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.03em;
}

/* Set the base rem size */
html, body {
    font-size: 16px;        /* sets base */
    margin: 0;
    padding: 0;
    width: 100%;

    font-family: var(--font-primary, 'Roboto', sans-serif);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ============================================
   GENERALY.py Styles
   ============================================ */

/* Base div styling - core styles for all divs */
.basic-div {

    /* Text */
    color: var(--text-primary);
    
    /* font-family: var(--font-primary, 'Roboto', sans-serif); */
    line-height: var(--line-height-normal, 1.5);
    letter-spacing: var(--letter-spacing-normal, 0.5px);            

    /* Calculated */
    width: calc(100% - var(--margin-left) - var(--margin-right));
    height: calc(100% - var(--margin-top) - var(--margin-bottom));
    margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);

    /* Default Flexbox Settings */
    display: flex;
    box-sizing: border-box;
}

.debug-div {
    border: 3px solid black !important;
    position: relative !important;
}

/* Create virtual element, red dashed line to show padding boundary */
.debug-div::before {
    content: '';
    position: absolute;
    top: calc(var(--padding-top, 0rem) - 2px);
    left: calc(var(--padding-left, 0rem) - 2px);
    right: calc(var(--padding-right, 0rem) - 2px);
    bottom: calc(var(--padding-bottom, 0rem) - 2px);
    border: 2px dashed blue;
    pointer-events: none;
    z-index: 999;
}

/* Create virtual element, blue dashed line to show margin boundary */
.debug-div::after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--margin-top, 0rem) - 4px);
    left: calc(-1 * var(--margin-left, 0rem) - 4px);
    right: calc(-1 * var(--margin-right, 0rem) - 4px);
    bottom: calc(-1 * var(--margin-bottom, 0rem) - 4px);
    border: 2px dashed red;
    pointer-events: none;
    z-index: 998;
}


/* Generic hover classes for any element */
.hover-bg-secondary {
    transition: background-color 0.25s ease;
}

.hover-bg-secondary:hover {
    background-color: var(--bg-secondary) !important; /* Overwrite inline styles */
}

.hover-bg-inverse {
    transition: background-color 0.25s ease;
}

.hover-bg-inverse:hover {
    background-color: var(--bg-inverse) !important; /* Overwrite inline styles */
}

.hover-bg-primary {
  transition: background-color 0.25s ease;
}

.hover-bg-primary:hover {
  background-color: var(--primary-hover) !important; /* Overwrite inline styles */
}

/* Swaps text color to primary on hover */
.hover-text-primary { transition: color 0.25s ease; }
.hover-text-primary:hover { color: var(--text-primary) !important; } /* or var(--text-primary) */

.hover-text-primary-instant { transition: color 0s ease !important; }

/* Allow parent hover to cascade hover styles to children */
.hover-bg-inverse:hover .hover-text-primary {
    color: var(--text-primary) !important;
}

.hover-bg-inverse:hover .hover-border-primary {
    border-color: var(--primary-color) !important;
}

/* Swaps text color to primary on hover */
.hover-border-primary { transition: color 0s ease; }
.hover-border-primary:hover { border-color: var(--primary-color) !important; }

/* ============================================
   TEXT BOX HOVER STYLES
   ============================================ */

/* Remove hover effects on textareas */
.no-text-hover.basic-div:hover,
.no-text-hover.basic-div:hover textarea,
.no-text-hover:hover {
  background-color: var(--trans) !important;
  border-color: var(--trans) !important;
  box-shadow: none !important;
  transition: none !important;
}

/* Add border hover effect for outer div */
.add-border-hover:hover {
    border-color: var(--border-inverse) !important;
  }
  
/* Keep outer border active while inner textarea is focused */
.add-border-hover:focus-within {
  border-color: var(--border-inverse) !important;
}

/* Remove default focus ring/glow on the textarea itself */
.no-text-hover:focus,
.no-text-hover:focus-visible {
  background-color: var(--trans) !important;
  border-color: var(--trans) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Auto-size textarea to its content (progressive enhancement) */
.textarea-auto {
    field-sizing: content;          /* modern browsers */
    resize: none;
    overflow-y: hidden;
    min-height: 1rem;              /* ~3 rows */
    max-height: 40rem;              /* cap growth */
  }


/* ============================================
   MARKDOWN CONTENT STYLES
   ============================================ */
/* Container that receives raw markdown text and is rendered by MarkdownJS */
.marked {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0 !important; /* allow flex items to shrink to container */
    overflow-wrap: anywhere; /* break long tokens (e.g., URLs) */
    word-break: break-word;  /* fallback for older engines */
  }
  
  /* Avoid large default top margin from first heading pushing layout */
  .marked > :first-child { margin-top: 0; }
  
  /* Media should never overflow the container */
  .marked img, .marked video, .marked iframe {
    max-width: 100%;
    height: auto;
  }
  
  /* Code blocks: keep within container and allow horizontal scroll when needed */
  .marked pre {
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
  .marked pre code { white-space: pre; }
  
  /* Inline code can wrap if extremely long */
  .marked :not(pre) > code {
    white-space: pre-wrap;
    word-break: break-word;
  }
  
  /* Tables: allow horizontal scrolling instead of breaking layout */
  .marked table {
    background: var(--transparent) !important;
    display: block;
    width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
  }