/* ============================================================
   HAIDN COMPUTERS — styles.css
   Structure:
     1. CSS Variables
     2. Reset & Base
     3. Header
     4. Language Toggle
     5. Navigation
     6. Page Container
     7. Intro Section
     8. Content Sections
     9. Service List
    10. Info Box
    11. Linux Table
    12. Steps
    13. About Section
    14. Contact Table
    15. Footer
    16. Scroll Reveal
    17. Responsive — Tablet (600px+)
    18. Responsive — Desktop (860px+)
   ============================================================ */


/* ── 1. CSS VARIABLES ── */

:root {
  --bg:         #f7f4ef;
  --ink:        #1e1e1e;
  --ink-mid:    #444444;
  --ink-light:  #777777;
  --rule:       #d8d2c8;
  --accent:     #2c5f8a;
  --accent-bg:  #edf3f8;
  --paper:      #fdfaf5;
}


/* ── 2. RESET & BASE ── */

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

html {
  scroll-behavior: smooth;
}

/* Mobile-first base font size (scales up at breakpoints) */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}


/* ── 3. HEADER ── */

header {
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  padding: 1.25rem 1rem 1rem;
}

.header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 860px;
  margin: 0 auto;
}

.header-left {
  flex: 1;
  min-width: 0; /* prevents flex overflow */
}

.site-name {
  font-family: 'Lora', serif;
  font-size: clamp(1.4rem, 5.5vw, 2.8rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-tagline {
  font-size: 0.82rem;
  color: var(--ink-light);
  border-top: 1px solid var(--rule);
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.site-tagline span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}


/* ── 4. LANGUAGE TOGGLE ── */

.lang-toggle {
  flex-shrink: 0;
  display: flex;
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 0.2rem;
  height: fit-content;
}

.lang-btn {
  padding: 0.5rem 0.85rem;
  background: transparent;
  color: var(--ink-light);
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  letter-spacing: 0.05em;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  /* Minimum tap target size for accessibility */
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-btn.active {
  background: var(--ink);
  color: #fff;
}

.lang-btn:not(.active):hover {
  background: var(--accent-bg);
  color: var(--accent);
}

.lang-divider {
  width: 2px;
  background: var(--ink);
}


/* ── 5. NAVIGATION ── */

nav {
  background: var(--ink);
}

/* Hamburger toggle — visible on mobile only */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  cursor: pointer;
  user-select: none;
}

.nav-toggle-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 0;
}

.nav-toggle-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.75rem 0;
}

.nav-toggle-icon span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  transition: transform 0.2s, opacity 0.2s;
}

/* Hidden checkbox powers the CSS-only hamburger toggle */
#nav-check {
  display: none;
}

/* Collapsed by default on mobile */
nav ul {
  list-style: none;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  display: none;
  flex-direction: column;
}

/* Show menu when checkbox is checked */
#nav-check:checked ~ ul {
  display: flex;
}

/* Animate burger bars → X when open */
#nav-check:checked ~ .nav-toggle .nav-toggle-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#nav-check:checked ~ .nav-toggle .nav-toggle-icon span:nth-child(2) {
  opacity: 0;
}
#nav-check:checked ~ .nav-toggle .nav-toggle-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

nav a {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.15s, background 0.15s;
  min-height: 48px; /* accessible tap target */
}

nav a:hover,
nav a:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}


/* ── 6. PAGE CONTAINER ── */

.page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1rem;
}


/* ── 7. INTRO SECTION ── */

.intro {
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.intro h1 {
  font-family: 'Lora', serif;
  font-size: clamp(1.45rem, 5.5vw, 2.4rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.85rem;
  color: var(--ink);
}

.intro p {
  font-size: 1rem;
  color: var(--ink-mid);
  line-height: 1.8;
}

.intro p + p {
  margin-top: 0.65rem;
}


/* ── 8. CONTENT SECTIONS ── */

.content-section {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
}

.content-section:last-child {
  border-bottom: none;
}

.content-section h2 {
  font-family: 'Lora', serif;
  font-size: clamp(1.2rem, 4.5vw, 1.7rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.content-section p {
  font-size: 0.97rem;
  color: var(--ink-mid);
  line-height: 1.8;
}

.content-section p + p {
  margin-top: 0.65rem;
}


/* ── 9. SERVICE LIST ── */

.service-list {
  margin-top: 1.25rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}

/* Mobile: each service stacks as a card */
.service-row {
  display: block;
  border-bottom: 1px solid var(--rule);
  padding: 1rem;
  transition: background 0.15s;
}

.service-row:last-child {
  border-bottom: none;
}

.service-row:active {
  background: var(--accent-bg);
}

.service-label {
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
  display: block;
}

.service-desc {
  font-size: 0.93rem;
  color: var(--ink-mid);
  line-height: 1.7;
}


/* ── 10. INFO BOX ── */

.info-box {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  padding: 1.1rem 1.25rem;
  margin-top: 1rem;
  font-size: 0.93rem;
  color: var(--ink-mid);
  line-height: 1.8;
}

.info-box strong {
  color: var(--ink);
}


/* ── 11. LINUX TABLE ── */

.linux-table {
  margin-top: 1.25rem;
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  font-size: 0.93rem;
}

.linux-table th {
  text-align: left;
  padding: 0.65rem 0.9rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* Mobile: hide the header row, display each row as a labelled block */
.linux-table thead {
  display: none;
}

.linux-table tr {
  display: block;
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem;
}

.linux-table tr:last-child {
  border-bottom: none;
}

.linux-table td {
  display: block;
  padding: 0;
  border: none;
  color: var(--ink-mid);
  line-height: 1.7;
  font-size: 0.93rem;
}

/* First cell becomes an uppercase label on mobile */
.linux-table td:first-child {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
  width: auto;
}


/* ── 12. STEPS ── */

.steps {
  margin-top: 1.25rem;
}

.step-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
}

.step-item:last-child {
  border-bottom: none;
}

.step-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 0.1rem;
}

.step-body h4 {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.97rem;
  margin-bottom: 0.2rem;
}

.step-body p {
  font-size: 0.93rem;
  color: var(--ink-mid);
  line-height: 1.7;
}


/* ── 13. ABOUT SECTION ── */

/* Mobile: card shown above bio text (column-reverse) */
.about-grid {
  display: flex;
  flex-direction: column-reverse;
  gap: 1.5rem;
  margin-top: 1.1rem;
}

.about-text p {
  font-size: 0.97rem;
  color: var(--ink-mid);
  line-height: 1.8;
}

.about-text p + p {
  margin-top: 0.65rem;
}

.about-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-align: left;
}

.about-card .avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.about-card .name {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.1rem;
}

.about-card .role {
  font-size: 0.75rem;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.about-card .detail {
  font-size: 0.82rem;
  color: var(--ink-mid);
  line-height: 1.6;
}


/* ── 14. CONTACT TABLE ── */

.contact-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  font-size: 0.97rem;
  border: 1px solid var(--rule);
  margin-top: 1.25rem;
}

/* Mobile: stack label above value */
.contact-table tr {
  display: block;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule);
}

.contact-table tr:last-child {
  border-bottom: none;
}

.contact-table td {
  display: block;
  padding: 0;
  border: none;
}

.contact-table td:first-child {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
  width: auto;
  border-right: none;
  background: none;
}

.contact-table td:last-child {
  color: var(--ink-mid);
  font-size: 0.97rem;
}

.contact-table a {
  color: var(--accent);
  text-decoration: none;
}

.contact-table a:hover {
  text-decoration: underline;
}


/* ── 15. FOOTER ── */

footer {
  border-top: 3px solid var(--ink);
  background: var(--paper);
  padding: 1.25rem 1rem;
  margin-top: 2rem;
}

.footer-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--ink-light);
}


/* ── 16. SCROLL REVEAL ── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}


/* ============================================================
   17. RESPONSIVE — TABLET (600px+)
   ============================================================ */

@media (min-width: 600px) {

  body {
    font-size: 18px;
  }

  header {
    padding: 1.5rem 1.5rem 1.25rem;
  }

  .page {
    padding: 0 1.5rem;
  }

  /* Tagline switches to horizontal row */
  .site-tagline {
    flex-direction: row;
    gap: 1.5rem;
  }

  /* Hide hamburger, show full nav */
  .nav-toggle {
    display: none;
  }

  nav ul {
    display: flex !important;
    flex-direction: row;
    padding: 0 1.5rem;
    flex-wrap: wrap;
  }

  nav a {
    border-top: none;
    font-size: 0.85rem;
    padding: 0.75rem 0.9rem;
    min-height: unset;
  }

  /* Service rows: label | description side by side */
  .service-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    padding: 0;
  }

  .service-label {
    padding: 1rem 1.1rem;
    border-right: 1px solid var(--rule);
    border-bottom: none;
    margin-bottom: 0;
  }

  .service-desc {
    padding: 1rem 1.1rem;
  }

  /* Linux table: restore proper table layout */
  .linux-table thead {
    display: table-header-group;
  }

  .linux-table tr {
    display: table-row;
    border-bottom: none;
    padding: 0;
  }

  .linux-table td {
    display: table-cell;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--rule);
    font-size: 0.93rem;
  }

  .linux-table tr:last-child td {
    border-bottom: none;
  }

  .linux-table td:first-child {
    width: 180px;
    font-size: 0.93rem;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 0;
  }

  .linux-table tr:hover td {
    background: var(--accent-bg);
  }

  /* Contact table: restore proper table layout */
  .contact-table tr {
    display: table-row;
    padding: 0;
    border-bottom: none;
  }

  .contact-table td {
    display: table-cell;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--rule);
  }

  .contact-table tr:last-child td {
    border-bottom: none;
  }

  .contact-table td:first-child {
    width: 150px;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: normal;
    border-right: 1px solid var(--rule);
    background: rgba(0, 0, 0, 0.02);
    margin-bottom: 0;
  }

  /* About: card sits beside the bio text */
  .about-grid {
    flex-direction: row;
    align-items: flex-start;
  }

  .about-card {
    flex-direction: column;
    text-align: center;
    width: 200px;
    flex-shrink: 0;
    gap: 0;
  }

  .about-card .avatar {
    margin: 0 auto 0.9rem;
  }

  footer {
    padding: 1.5rem;
  }

  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

}


/* ============================================================
   18. RESPONSIVE — DESKTOP (860px+)
   ============================================================ */

@media (min-width: 860px) {

  body {
    font-size: 19px;
  }

  header {
    padding: 2rem 2.5rem 1.5rem;
  }

  .page {
    padding: 0 2.5rem;
  }

  .site-tagline {
    font-size: 1rem;
    gap: 2rem;
  }

  nav ul {
    padding: 0 2.5rem;
  }

  nav a {
    font-size: 0.9rem;
    padding: 0.75rem 1.1rem;
  }

  .service-row {
    grid-template-columns: 220px 1fr;
  }

  .service-label {
    padding: 1.1rem 1.25rem;
  }

  .service-desc {
    padding: 1.1rem 1.25rem;
  }

  .linux-table td {
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
  }

  .linux-table td:first-child {
    width: 200px;
  }

  .about-card {
    width: 220px;
    padding: 1.5rem;
  }

  .contact-table td {
    padding: 0.9rem 1.1rem;
    font-size: 1rem;
  }

  .contact-table td:first-child {
    width: 160px;
  }

  .intro {
    padding: 3rem 0 2rem;
  }

  .content-section {
    padding: 2.5rem 0;
  }

  footer {
    padding: 1.5rem 2.5rem;
  }

}