/*
Theme Name:   IPS Evolution
Theme URI:    https://ianshort.link
Description:  Understrap child theme for ianshort.link — IPS Evolution dark design system.
Author:       Ian Paul Short
Author URI:   https://ianshort.link
Template:     understrap
Version:      1.0.0
Tags:         dark, custom-colors, custom-menu, featured-images, understrap
Text Domain:  ips-evolution
*/

/* ==========================================================
   IPS EVOLUTION — DESIGN SYSTEM
   Dark-first theme based on the IPS Evolution logo palette.
   All colour tokens defined here; all components reference
   CSS custom properties so a single edit propagates site-wide.
   ========================================================== */

/* ── 1. Palette tokens ──────────────────────────────────── */
:root {
  /* Foundation */
  --ips-void:           #08051A;   /* page / outermost bg  */
  --ips-midnight:       #100C2E;   /* section bg           */
  --ips-deep-indigo:    #1A1445;   /* card / panel bg      */
  --ips-iris:           #281E60;   /* elevated card bg     */

  /* Purple ramp — primary brand */
  --ips-amethyst-dark:  #3D2E80;   /* borders / dividers   */
  --ips-amethyst:       #5C48A8;   /* interactive elements */
  --ips-lavender:       #8B72D0;   /* secondary text       */
  --ips-mist:           #C4B2F0;   /* body text on dark    */

  /* Magenta ramp — accent & CTA */
  --ips-magenta-deep:   #8C1F68;   /* active states        */
  --ips-magenta:        #C03590;   /* CTA button bg        */
  --ips-rose:           #E060B8;   /* logo ring / highlight*/
  --ips-blush:          #F4B0DC;   /* hover tints          */

  /* Highlights & neutrals */
  --ips-dusk:           #6B5890;   /* muted text / icons   */
  --ips-soft-violet:    #9C88CC;   /* subheadings          */
  --ips-ghost:          #E8DCFF;   /* headings on dark     */
  --ips-star-white:     #F8F4FF;   /* max contrast / orb   */

  /* Typography scale */
  --ips-font-serif:     'IM Fell English', Georgia, 'Times New Roman', serif;
  --ips-font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ips-font-mono:      'Courier New', Courier, monospace;

  /* Spacing */
  --ips-radius-sm:      4px;
  --ips-radius-md:      6px;
  --ips-radius-lg:      10px;
}

/* ── 2. Base / reset ────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--ips-void) !important;
  color: var(--ips-mist);
  font-family: var(--ips-font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 3. Site structure ──────────────────────────────────── */
.site,
#page {
  background-color: var(--ips-void);
}

.site-content,
#content,
.wrapper {
  background-color: var(--ips-void);
}

/* ── 4. Navigation / header ─────────────────────────────── */
.site-header,
.navbar,
.navbar-understrap {
  background-color: var(--ips-midnight) !important;
  border-bottom: 1px solid var(--ips-amethyst-dark) !important;
}

.navbar-brand,
.site-title a {
  color: var(--ips-star-white) !important;
  font-family: var(--ips-font-serif);
  font-size: 1.2rem;
  text-decoration: none;
}

.navbar-brand:hover,
.site-title a:hover {
  color: var(--ips-rose) !important;
}

/* Nav links */
.navbar-nav .nav-link,
.navbar-nav .nav-item > a {
  color: var(--ips-mist) !important;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item > a:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.current-menu-item > a {
  color: var(--ips-rose) !important;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: var(--ips-deep-indigo);
  border: 1px solid var(--ips-amethyst-dark);
  border-radius: var(--ips-radius-md);
}

.dropdown-item {
  color: var(--ips-mist);
  font-size: 0.875rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ips-iris);
  color: var(--ips-ghost);
}

/* Mobile toggler */
.navbar-toggler {
  border-color: var(--ips-amethyst-dark);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%238B72D0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── 5. Footer ──────────────────────────────────────────── */
.site-footer,
footer.site-footer {
  background-color: var(--ips-midnight) !important;
  border-top: 1px solid var(--ips-amethyst-dark) !important;
  color: var(--ips-dusk);
  padding: 2rem 0;
  font-size: 0.85rem;
}

.site-footer a {
  color: var(--ips-lavender);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ips-rose);
  text-decoration: underline;
}

.site-footer .widget-title {
  color: var(--ips-ghost);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ── 6. Typography ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--ips-ghost);
  font-family: var(--ips-font-serif);
  font-weight: 400;
  line-height: 1.25;
  margin-top: 0;
}

h1 { font-size: 2.25rem;  color: var(--ips-star-white); }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.4rem;  color: var(--ips-ghost); }
h4 { font-size: 1.15rem; color: var(--ips-soft-violet); font-family: var(--ips-font-sans); font-weight: 600; }
h5 { font-size: 1rem;    color: var(--ips-lavender);    font-family: var(--ips-font-sans); font-weight: 600; }
h6 { font-size: 0.875rem; color: var(--ips-dusk);       font-family: var(--ips-font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }

p {
  color: var(--ips-mist);
  margin-bottom: 1rem;
}

strong, b {
  color: var(--ips-ghost);
  font-weight: 600;
}

em, i {
  color: var(--ips-soft-violet);
}

small {
  color: var(--ips-dusk);
  font-size: 0.8rem;
}

/* ── 7. Links ───────────────────────────────────────────── */
a {
  color: var(--ips-lavender);
  text-decoration: underline;
  transition: color 0.2s;
}

a:hover,
a:focus {
  color: var(--ips-rose);
  text-decoration: underline;
}

/* ── 8. Entry / post ────────────────────────────────────── */
.entry-header,
.page-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ips-amethyst-dark);
}

.entry-title,
.page-title {
  color: var(--ips-star-white);
  font-size: 2rem;
}

.entry-meta,
.page-meta {
  font-size: 0.8rem;
  color: var(--ips-dusk);
}

.entry-meta a,
.page-meta a {
  color: var(--ips-lavender);
}

.entry-content {
  color: var(--ips-mist);
}

.entry-content p,
.entry-content li {
  color: var(--ips-mist);
  line-height: 1.8;
}

/* ── 9. Cards / panels ──────────────────────────────────── */
.card {
  background-color: var(--ips-deep-indigo);
  border: 1px solid var(--ips-amethyst-dark);
  border-radius: var(--ips-radius-lg);
  color: var(--ips-mist);
}

.card-header {
  background-color: var(--ips-iris);
  border-bottom: 1px solid var(--ips-amethyst-dark);
  color: var(--ips-ghost);
}

.card-title {
  color: var(--ips-ghost);
}

.card-text {
  color: var(--ips-mist);
}

.card-footer {
  background-color: var(--ips-midnight);
  border-top: 1px solid var(--ips-amethyst-dark);
  color: var(--ips-dusk);
  font-size: 0.8rem;
}

/* ── 10. Buttons ────────────────────────────────────────── */
.btn-primary,
.wp-block-button .wp-block-button__link {
  background-color: var(--ips-magenta) !important;
  border-color: var(--ips-rose) !important;
  color: var(--ips-star-white) !important;
  border-radius: var(--ips-radius-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color 0.2s, color 0.2s;
}

.btn-primary:hover,
.wp-block-button .wp-block-button__link:hover {
  background-color: var(--ips-rose) !important;
  border-color: var(--ips-rose) !important;
  color: var(--ips-void) !important;
}

.btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--ips-amethyst) !important;
  color: var(--ips-lavender) !important;
}

.btn-secondary:hover {
  background-color: var(--ips-iris) !important;
  color: var(--ips-ghost) !important;
}

.btn-outline-light {
  border-color: var(--ips-amethyst-dark) !important;
  color: var(--ips-mist) !important;
}

.btn-outline-light:hover {
  background-color: var(--ips-iris) !important;
  color: var(--ips-ghost) !important;
}

/* ── 11. Forms ──────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
  background-color: var(--ips-deep-indigo) !important;
  border: 1px solid var(--ips-amethyst-dark) !important;
  border-radius: var(--ips-radius-md) !important;
  color: var(--ips-mist) !important;
  font-size: 0.9rem;
  padding: 0.5rem 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--ips-amethyst) !important;
  box-shadow: 0 0 0 3px rgba(92, 72, 168, 0.25) !important;
  outline: none;
  color: var(--ips-ghost) !important;
}

.form-control::placeholder {
  color: var(--ips-dusk) !important;
}

label {
  color: var(--ips-soft-violet);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
}

/* ── 12. Tables ─────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ips-mist);
  font-size: 0.9rem;
}

thead th {
  background-color: var(--ips-iris);
  color: var(--ips-ghost);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ips-amethyst-dark);
}

tbody tr {
  border-bottom: 1px solid var(--ips-amethyst-dark);
}

tbody tr:nth-child(even) {
  background-color: var(--ips-deep-indigo);
}

tbody tr:hover {
  background-color: var(--ips-iris);
}

td, th {
  padding: 0.65rem 1rem;
  vertical-align: top;
}

/* ── 13. Blockquote ─────────────────────────────────────── */
blockquote,
.wp-block-quote {
  border-left: 4px solid var(--ips-rose);
  background-color: var(--ips-deep-indigo);
  border-radius: 0 var(--ips-radius-md) var(--ips-radius-md) 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  color: var(--ips-mist);
  font-family: var(--ips-font-serif);
  font-size: 1rem;
  line-height: 1.85;
}

blockquote p,
.wp-block-quote p {
  color: var(--ips-mist);
  margin-bottom: 0;
}

blockquote cite,
.wp-block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--ips-dusk);
  font-style: normal;
}

/* ── 14. Code / pre ─────────────────────────────────────── */
code {
  background-color: var(--ips-deep-indigo);
  border: 1px solid var(--ips-amethyst-dark);
  border-radius: var(--ips-radius-sm);
  color: var(--ips-blush);
  font-family: var(--ips-font-mono);
  font-size: 0.85em;
  padding: 0.1em 0.4em;
}

pre {
  background-color: var(--ips-deep-indigo);
  border: 1px solid var(--ips-amethyst-dark);
  border-radius: var(--ips-radius-md);
  color: var(--ips-mist);
  font-family: var(--ips-font-mono);
  font-size: 0.875rem;
  line-height: 1.65;
  overflow-x: auto;
  padding: 1.25rem 1.5rem;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* ── 15. Lists ──────────────────────────────────────────── */
ul, ol {
  color: var(--ips-mist);
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.35rem;
  line-height: 1.7;
}

ul li::marker {
  color: var(--ips-amethyst);
}

/* ── 16. HR / divider ───────────────────────────────────── */
hr,
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--ips-amethyst-dark);
  margin: 2rem 0;
  opacity: 1;
}

/* ── 17. Sidebar / widgets ──────────────────────────────── */
.widget {
  background-color: var(--ips-deep-indigo);
  border: 1px solid var(--ips-amethyst-dark);
  border-radius: var(--ips-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.widget-title {
  color: var(--ips-ghost);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ips-amethyst-dark);
}

.widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget ul li {
  border-bottom: 1px solid var(--ips-amethyst-dark);
  padding: 0.4rem 0;
  margin: 0;
  font-size: 0.875rem;
}

.widget ul li:last-child {
  border-bottom: none;
}

.widget a {
  color: var(--ips-lavender);
  text-decoration: none;
}

.widget a:hover {
  color: var(--ips-rose);
}

/* ── 18. Breadcrumbs ────────────────────────────────────── */
.breadcrumb {
  background: transparent;
  padding: 0;
  font-size: 0.8rem;
  margin-bottom: 1.5rem;
}

.breadcrumb-item {
  color: var(--ips-dusk);
}

.breadcrumb-item a {
  color: var(--ips-lavender);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--ips-rose);
}

.breadcrumb-item.active {
  color: var(--ips-dusk);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ips-amethyst-dark);
}

/* ── 19. Pagination ─────────────────────────────────────── */
.pagination .page-link {
  background-color: var(--ips-deep-indigo);
  border-color: var(--ips-amethyst-dark);
  color: var(--ips-lavender);
}

.pagination .page-link:hover {
  background-color: var(--ips-iris);
  border-color: var(--ips-amethyst);
  color: var(--ips-ghost);
}

.pagination .page-item.active .page-link {
  background-color: var(--ips-magenta);
  border-color: var(--ips-rose);
  color: var(--ips-star-white);
}

.pagination .page-item.disabled .page-link {
  background-color: var(--ips-midnight);
  border-color: var(--ips-amethyst-dark);
  color: var(--ips-dusk);
}

/* ── 20. Alerts ─────────────────────────────────────────── */
.alert {
  border-radius: var(--ips-radius-md);
  border: 1px solid;
  font-size: 0.875rem;
  padding: 0.875rem 1.125rem;
}

.alert-info {
  background-color: rgba(92, 72, 168, 0.15);
  border-color: var(--ips-amethyst);
  color: var(--ips-mist);
}

.alert-warning {
  background-color: rgba(192, 53, 144, 0.12);
  border-color: var(--ips-magenta);
  color: var(--ips-blush);
}

.alert-success {
  background-color: rgba(139, 114, 208, 0.15);
  border-color: var(--ips-lavender);
  color: var(--ips-ghost);
}

/* ── 21. Featured image ─────────────────────────────────── */
.post-thumbnail img,
.entry-content img {
  border-radius: var(--ips-radius-md);
  max-width: 100%;
  height: auto;
}

/* ── 22. Comments ───────────────────────────────────────── */
.comment-list .comment {
  border-bottom: 1px solid var(--ips-amethyst-dark);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.comment-meta,
.comment-metadata {
  font-size: 0.78rem;
  color: var(--ips-dusk);
  margin-bottom: 0.5rem;
}

.comment-author .fn {
  color: var(--ips-ghost);
  font-weight: 600;
}

.comment-content p {
  color: var(--ips-mist);
  font-size: 0.9rem;
}

.comment-reply-link {
  font-size: 0.78rem;
  color: var(--ips-lavender);
  text-decoration: none;
}

.comment-reply-link:hover {
  color: var(--ips-rose);
}

#respond {
  background-color: var(--ips-deep-indigo);
  border: 1px solid var(--ips-amethyst-dark);
  border-radius: var(--ips-radius-lg);
  padding: 1.5rem;
  margin-top: 2rem;
}

#respond h3 {
  color: var(--ips-ghost);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* ── 23. Search form ────────────────────────────────────── */
.search-form .search-field {
  background-color: var(--ips-deep-indigo);
  border: 1px solid var(--ips-amethyst-dark);
  color: var(--ips-mist);
  border-radius: var(--ips-radius-md) 0 0 var(--ips-radius-md);
}

.search-form .search-submit {
  background-color: var(--ips-amethyst);
  border-color: var(--ips-amethyst);
  color: var(--ips-star-white);
  border-radius: 0 var(--ips-radius-md) var(--ips-radius-md) 0;
}

.search-form .search-submit:hover {
  background-color: var(--ips-magenta);
  border-color: var(--ips-rose);
}

/* ── 24. Skip link ──────────────────────────────────────── */
.skip-link {
  background: var(--ips-magenta);
  color: var(--ips-star-white);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--ips-radius-md) var(--ips-radius-md);
}

/* ── 25. Screen reader text ─────────────────────────────── */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  white-space: nowrap;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* ── 26. Utility classes ────────────────────────────────── */
.text-muted { color: var(--ips-dusk) !important; }
.text-primary { color: var(--ips-lavender) !important; }
.text-accent { color: var(--ips-rose) !important; }
.text-ghost { color: var(--ips-ghost) !important; }
.bg-midnight { background-color: var(--ips-midnight) !important; }
.bg-deep-indigo { background-color: var(--ips-deep-indigo) !important; }
.bg-iris { background-color: var(--ips-iris) !important; }
.border-amethyst { border-color: var(--ips-amethyst-dark) !important; }

/* ── 27. Bootstrap overrides ────────────────────────────── */
.bg-dark { background-color: var(--ips-midnight) !important; }
.bg-light { background-color: var(--ips-deep-indigo) !important; }
.text-dark { color: var(--ips-ghost) !important; }
.text-light { color: var(--ips-mist) !important; }
.border { border-color: var(--ips-amethyst-dark) !important; }
.list-group-item {
  background-color: var(--ips-deep-indigo);
  border-color: var(--ips-amethyst-dark);
  color: var(--ips-mist);
}
.list-group-item-action:hover {
  background-color: var(--ips-iris);
  color: var(--ips-ghost);
}

/* ── 28. Responsive adjustments ────────────────────────── */
@media (max-width: 991px) {
  .navbar-collapse {
    background-color: var(--ips-midnight);
    border-top: 1px solid var(--ips-amethyst-dark);
    padding: 1rem;
  }
}

@media (max-width: 575px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.2rem; }

  .entry-content,
  .entry-header {
    padding-left: 0;
    padding-right: 0;
  }
}