/* ABOUTME: Custom font declarations and layout overrides for abdodaoud.com */
/* ABOUTME: Adapted from abdo.wtf — keeps abdodaoud.com on stock tabi with project-level customisations */

/* Cartridge - Display font for titles and banners */
@font-face {
  font-family: "Cartridge";
  src:
    local("Cartridge"),
    url("/fonts/Cartridge-BoldSoft.woff2") format("woff2");
  font-display: swap;
}

/* Atkinson Hyperlegible - Body font (regular) */
@font-face {
  font-family: "Atkinson-Hyperlegible";
  src:
    local("Atkinson-Hyperlegible-Regular"),
    url("/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Regular.woff2")
      format("woff2");
  font-style: normal;
  font-display: swap;
}

/* Atkinson Hyperlegible - Body font (italic) */
@font-face {
  font-family: "Atkinson-Hyperlegible";
  src:
    local("Atkinson-Hyperlegible-Italic"),
    url("/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Italic.woff2")
      format("woff2");
  font-style: italic;
  font-display: swap;
}

/* Atkinson Hyperlegible - Body font (bold) */
@font-face {
  font-family: "Atkinson-Hyperlegible";
  src:
    local("Atkinson-Hyperlegible-Bold"),
    url("/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Bold.woff2")
      format("woff2");
  font-weight: bold;
  font-display: swap;
}

/* Atkinson Hyperlegible - Body font (bold italic) */
@font-face {
  font-family: "Atkinson-Hyperlegible";
  src:
    local("Atkinson-Hyperlegible-BoldItalic"),
    url("/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-BoldItalic.woff2")
      format("woff2");
  font-style: italic;
  font-weight: bold;
  font-display: swap;
}

/* Sora - Heading font (subsetted: Latin, weights 400-600) */
@font-face {
  font-family: "Sora";
  src: url("/fonts/Sora.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Monolisa - Code font (normal) */
@font-face {
  font-family: "Monolisa";
  src:
    local("Monolisa"),
    url("/fonts/Monolisa-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007F;
}

/* Monolisa - Code font (italic) */
@font-face {
  font-family: "Monolisa";
  src:
    local("Monolisa"),
    url("/fonts/Monolisa-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007F;
}

/* Override tabi's default font variables */
:root {
  --sans-serif-font: "Atkinson-Hyperlegible", Helvetica, Arial, sans-serif;
  --serif-font: "Atkinson-Hyperlegible", "Georgia", serif;
  --code-font: "Monolisa", Monaco, monospace;
  --display-font: "Cartridge", Helvetica, serif;
  --heading-font: "Sora", Helvetica, sans-serif;
  --body-font: "Atkinson-Hyperlegible", Georgia, sans-serif;

  /* Tighter spacing overrides */
  --paragraph-spacing: max(0.8vmin, 10px);

  /* Narrower content width */
  --max-layout-width: 750px;
}

body {
  line-height: 150%;
}

/* Consistent content width (override tabi's narrower article) */
article {
  max-width: var(--max-layout-width);
}

/* Tighter horizontal rule spacing */
hr {
  margin: 1.5rem 0;
}

/* ===== FONT ASSIGNMENTS ===== */

/* Section titles like "Latest posts" - Cartridge font */
.section-title {
  font-family: var(--display-font);
}

/* Nav title - Cartridge font and orange colour with alternates */
.home-title {
  font-family: var(--display-font);
  color: #f56020;
  font-feature-settings: "aalt";
}

/* Add the * in the nav only (not in <title> or meta tags) */
.home-title::after {
  content: " *";
}

/* Copyright name - Cartridge font with alternates */
.copyright-name {
  font-family: var(--display-font);
  font-feature-settings: "aalt";
}

/* Apply heading font to all heading elements */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
}

/* ===== BASE LINK STYLES ===== */

/* Underline all links for a11y + primary colour */
a {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  color: var(--primary-color);
}

/* List item spacing */
ul li + li,
ol li + li {
  margin-top: 0.75em;
}

/* Footer link alignment */
footer a {
  vertical-align: baseline !important;
}

footer nav {
  align-items: baseline !important;
  gap: 0.5em;
}

footer nav a {
  line-height: 1 !important;
}

/* Remove ALL hover effects - keep primary colour only */
a:hover {
  background-color: transparent !important;
  color: var(--primary-color) !important;
}

a:hover::before {
  display: none !important;
}

/* ===== NAVIGATION ===== */

/* No underline on main site title */
.home-title,
.home-title a {
  text-decoration: none !important;
}

/* Align site title baseline with nav link baselines */
.navbar {
  align-items: baseline !important;
}

/* Search modal: darken backdrop so page orange doesn't bleed through */
.search-modal {
  background-color: rgb(0 0 0 / 30%) !important;
}

/* Search icon: scale down to match nav text */
.search-icon {
  width: 1.1rem !important;
  height: 1.1rem !important;
}

/* Consistent nav link styling and alignment */
.nav-navs ul {
  display: flex !important;
  align-items: baseline !important;
}

.nav-navs li {
  display: flex !important;
  align-items: baseline !important;
}

/* Restore centre alignment for the icon container (no text baseline to align to) */
.menu-icons-container {
  align-self: center !important;
}

.nav-links,
a.nav-links {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  line-height: 1 !important;
}

/* Navigation menu links - Cartridge font */
.nav-links {
  font-family: var(--display-font);
}

/* Tags: orange colour, no hover effect */
.tag a,
a.tag {
  color: var(--primary-color) !important;
  background-color: transparent !important;
}

.tag a:hover,
a.tag:hover {
  color: var(--primary-color) !important;
  background-color: transparent !important;
}

.tag a:hover::before,
a.tag:hover::before {
  display: none !important;
}

/* Social icons: orange on hover */
.social:hover {
  background-color: transparent !important;
}

.social:hover > img,
.social:hover svg {
  filter: none !important;
}

.social:hover svg path,
.social:hover svg {
  fill: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

/* Dark mode social hover */
[data-theme="dark"] .social:hover > img {
  filter: invert(48%) sepia(99%) saturate(1636%) hue-rotate(360deg)
    brightness(101%) contrast(93%) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .social:hover > img {
    filter: invert(48%) sepia(99%) saturate(1636%) hue-rotate(360deg)
      brightness(101%) contrast(93%) !important;
  }
}

/* Tiny superscript external link indicator */
main a.external:not(:has(img, svg, video, picture, figure))::after {
  content: "⌝" !important;
  background: none !important;
  mask-image: none !important;
  width: auto !important;
  height: auto !important;
  font-size: 0.6em;
  vertical-align: super;
  margin-inline-start: 0.1em;
  opacity: 1;
}

/* ===== PROJECT CARDS ===== */

/* Card: no underline on the card link itself (subtitle inherits it) */
a.card {
  text-decoration: none !important;
}

/* Card subtitle: no underline, muted colour */
.card-description {
  text-decoration: none !important;
}

/* Disable hover effects on cards */
a.card:hover {
  background-color: var(--bg-2) !important;
}

a.card:hover .card-description {
  color: var(--text-color) !important;
}

/* Keep title underlined and orange */
.card-title {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  color: var(--primary-color);
}

/* ===== CODE BLOCK OVERRIDES ===== */

/* Dark mode: black code block background */
[data-theme="dark"] {
  --codeblock-bg: black;
  --codeblock-highlight: #181818;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --codeblock-bg: black;
    --codeblock-highlight: #181818;
  }
}

/* ===== FOCUS STATES ===== */

/* Focus states for keyboard navigation */
a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== HOME BANNER LAYOUT OVERRIDES ===== */

#banner-container-home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#home-banner-grouped {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

@media only screen and (width <= 600px) {
  #home-banner-grouped {
    flex-direction: column;
    align-items: center;
  }
}

#home-banner-header,
#home-banner-header h1 {
  font-family: var(--display-font);
  color: var(--primary-color);
  margin: 0;
  font-weight: 550;
  font-size: 2.5rem;
  line-height: 3.2rem;
  margin-bottom: 1.5rem;
}

@media only screen and (width <= 1000px) {
  #home-banner-header {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}

@media only screen and (width <= 600px) {
  #home-banner-header {
    font-size: 1.94rem;
    width: 100%;
    order: 2;
    margin-bottom: 1rem;
  }
}

#banner-home-subtitle {
  color: var(--text-color);
  font-weight: 250;
  line-height: 1.75rem;
  font-size: 1.875rem;
  width: 100%;
}

#banner-home-subtitle p {
  font-size: 1rem;
}

#banner-home-subtitle a {
  font-weight: 400;
}

#image-container-home {
  position: relative;
  min-width: 9rem;
  min-height: 9rem;
  overflow: hidden;
  padding-left: 1rem;
  text-align: center;
  padding-bottom: 1rem;
  max-width: none !important;
}

#banner-home-img {
  border: none;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 12rem;
  height: auto;
  max-height: 12rem;
}

@media only screen and (width <= 600px) {
  #banner-home-img {
    max-width: 10rem;
    max-height: 10rem;
  }

  #image-container-home {
    padding-left: 0;
    order: 1;
  }
}