/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
  Author's custom styles
  ========================================================================== */
:root {
  --bg: #0f3f3d;
  --text: #eef2f7;
  --muted: #a5b0c2;
  --primary: #14b8a6;
  --primaryHover: #0f766e;
  --card: #161a2e;
  --radius: 14px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #0f3f3d;
    --text: #eef2f7;
    --muted: #a5b0c2;
    --card: #161a2e;
  }
}
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: radial-gradient(1000px 600px at 80% -10%, rgba(20,184,166,0.15), transparent 60%),
              radial-gradient(800px 500px at -10% 110%, rgba(20,184,166,0.20), transparent 60%),
              var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}
.container {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}
.container .card + .card {
  /* Increase spacing between main intro card and portfolio card */
  margin-top: 24px;
}
.card {
  width: 100%;
  max-width: 720px;
  background: #ffffff;
  /* Removed glassmorphism blur for a solid white card */
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 20px 60px rgba(0,0,0,0.12);
}

/* Width constraint wrapper to align with card */
.wrapper-constraint {
  width: 100%;
  max-width: 720px;
}

/* Laptop widening: 50% wider card and wrapper */
@media (min-width: 1024px) {
  .card { max-width: 1080px; }
  .wrapper-constraint { max-width: 1080px; }
}
.header {
  display: flex;
  align-items: center;
  gap: 18px;
}
h1 {
  /* Increased header text size by 40% (from 22px..28px to ~31px..39px equivalents) */
  font-size: clamp(34px, 4.2vw, 34px);
  line-height: 1.2;
  margin: 0;
  color: #0f172a;
}

/* Modal styles */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 30, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 40;
}
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 50;
}
.modal-card {
  max-width: 576px;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
/* Close button (X) styling */
.close-btn {
  font-size: 20px;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
}
.close-btn:hover { background: rgba(0,0,0,0.04); }
.close-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Lighten modal close button, Cancel (ghost) button, and CC me label (~15%) */
.modal .close-btn { color: #374151; border: none; }
.modal .ghost { color: #374151; border-color: rgba(0,0,0,0.25); }
.modal .ghost:hover { background: rgba(0,0,0,0.04); }
#cc-me + label { color: #374151; }
.modal-card h2 {
  margin: 0;
  color: #0f172a;
}
.modal-card textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  font-size: 15px;
  color: #111827;
}

/* Make the new inputs match the textarea and overall look */
.modal-card input[type="text"],
.modal-card input[type="email"],
.modal-card input[type="number"],
.modal-card input[type="password"],
.modal-card input[type="tel"] {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  font-size: 15px;
  color: #111827;
  background: #ffffff;
}
.modal-card input::placeholder,
.modal-card textarea::placeholder {
  color: #9ca3af; /* muted */
}
.modal-card input:focus,
.modal-card textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary), transparent 75%);
}

/* Field spacing inside the form: uniform spacing between Name, Email row, and Message */
#contact-form > input#name,
#contact-form > .email-row,
#contact-form > textarea#message {
  margin-top: 10px;
}

/* CAPTCHA layout and styling */
.captcha-row {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
#captcha-question {
  display: block;
  color: #374151; /* slate-700 */
  font-size: 14px;
}
#captcha-answer {
  width: 100%;
}

/* Error summary and invalid field styling */
.form-errors {
  margin-top: 10px;
  background: #f8fafc; /* slate-50 - subtler */
  border: 1px solid #cbd5e1; /* slate-300 */
  color: #334155; /* slate-700 */
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}
.form-errors ul {
  margin: 6px 0 0 18px;
  padding: 0;
}
.form-errors:empty { display: none; }
.invalid {
  border-color: #fca5a5 !important; /* red-300 - subtler */
  box-shadow: none !important; /* remove heavy glow */
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.char-count {
  color: #6b7280;
  font-size: 13px;
}
.hidden { display: none !important; }

/* Blur the background card when modal is open */
body.modal-open .container { filter: blur(2px); }
body.modal-open { overflow: hidden; }
.tagline {
  margin: 4px 0 0 0;
  color: #6b7280;
  font-size: 15px;
}
.body {
  margin-top: 18px;
  color: #111827;
  font-size: 16px;
}
.actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.btn {
  appearance: none;
  border: none;
  background: var(--primary);
  color: white;
  padding: 12px 18px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 10px 24px rgba(79,124,255,0.35);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn:hover { background: var(--primaryHover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}
.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--text), transparent 80%);
  box-shadow: none;
}
footer {
  margin-top: 18px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}
/* Site footer styled as a card with primary background */
.site-footer {
  margin-top: 20px;
  background: var(--primary);
  color: #f8fafc; /* light text for contrast */
  padding: 14px 16px;
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(79,124,255,0.25);
}

/* Customers footer card */
.clients-card {
  margin-top: 18px;
  padding: 14px 16px;
}
.clients-card .clients-header {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 8px 6px;
}
.logo-scroller {
  display: flex;
  align-items: center;
  gap: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 6px 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent 100%);
}
.logo-scroller::-webkit-scrollbar { display: none; }
.logo {
  flex: 0 0 auto;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
}
.logo img {
  max-height: 46px;
  max-width: 160px;
  /* Show logos exactly as provided, no filters or opacity adjustments */
  filter: none;
  opacity: 1;
  transition: opacity .15s ease, transform .15s ease;
}
.logo:hover img { opacity: 1; transform: translateY(-1px); }
/* Fallback label when an image is missing */
.logo .fallback {
  display: none;
  font-size: 13px;
  color: #111827;
  background: #f3f4f6;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Portfolio list (Clients & Projects) */
.portfolio-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 12px 12px 0;
  /* Ensure cards in the same row share the same height so footers align */
  align-items: stretch;
}
@media (min-width: 640px) {
  .portfolio-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .portfolio-list { grid-template-columns: 1fr 1fr 1fr; }
}
.portfolio-item {
  /* Stack content: top (body) and bottom (footer) */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  background: #ffffff;
  /* Fill the grid cell height so footers can sit at the bottom uniformly */
  height: 100%;
}
.portfolio-logo {
  height: 100px; /* +~40% from 72px */
  width: 100px;  /* +~40% from 72px */
  display: flex;
  align-items: center;
  justify-content: center;
  /* keep logo comfortably inside the item border */
  padding: 6px;
  line-height: 0; /* remove baseline gaps to ensure perfect centering */
}
.portfolio-logo img {
  display: block; /* avoid inline baseline affecting centering */
  max-height: 84px; /* +~40% from 60px */
  max-width: 84px;  /* +~40% from 60px */
  object-fit: contain;
  /* Show logos exactly as provided, no filters or opacity adjustments */
  filter: none;
  opacity: 1;
}
.portfolio-logo .fallback {
  /* Keep placeholder element present but invisible to preserve layout */
  display: inline-block;
  visibility: hidden;
  font-size: 12px;
  color: #111827;
  background: #f3f4f6;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 4px 8px;
  border-radius: 999px;
}
.portfolio-body {
  display: flex;
  flex-direction: column;
}
.portfolio-body h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #0f172a;
}
.portfolio-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
/* Right-align the status chip within the meta row */
.portfolio-meta .status-chip { margin-left: auto; }
.meta-type {
  font-size: 12px;
  color: #6b7280;
}
.status-chip {
  font-size: 10px; /* slightly smaller */
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 2px 6px; /* tighter chip */
  border-radius: 999px;
  border: 1px solid transparent;
}
.status-chip.launched {
  color: #065f46;
  background: #d1fae5;
  border-color: #a7f3d0;
}
.status-chip.prototyping {
  color: #4b5563;
  background: #e5e7eb;
  border-color: #d1d5db;
}
.portfolio-blurb {
  margin: 0 0 10px 0;
  color: #374151;
  font-size: 14px;
}
.portfolio-website { margin: 0 0 8px 0; }
.portfolio-website-link { display: inline-block; }
.portfolio-website-placeholder { display: inline-block; visibility: hidden; }
.item-actions {
  display: flex;
  gap: 8px;
}
.portfolio-body .item-actions { margin-top: auto; align-self: flex-end; }

/* Bottom row: logo (left) and actions (right) share space 50/50 */
.portfolio-footer {
  display: grid;
  grid-template-columns: 1fr auto; /* content area + button area */
  /* Align logo box and button to the bottom edge of the card */
  align-items: end;
  gap: 12px;
  /* Push the footer to the bottom of the card for consistent alignment across the row */
  margin-top: auto;
}
.portfolio-footer-left {
  display: flex;
  /* Bottom-align the logo wrapper within the footer */
  align-items: flex-end;
  justify-content: center; /* center logo within the left space up to the button */
}
.portfolio-footer-right {
  display: flex;
  justify-content: flex-end;
  /* Bottom-align the button within the footer */
  align-items: flex-end;
}

/* Make portfolio item primary button a touch smaller */
.portfolio-item .btn {
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: 0 6px 16px rgba(79,124,255,0.28);
}

/* Text link styling (global, but exclude button-styled anchors) */
a:not(.btn) {
  color: #1f2a44; /* navy / gunmetal */
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:not(.btn):hover {
  color: #111827; /* darker on hover */
}
a:not(.btn):focus-visible {
  outline: 2px solid color-mix(in oklab, #1f2a44, white 40%);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Active navigation state styles */
.actions a.active,
.actions .btn.active,
.actions .ghost.active {
  background: var(--primary);
  color: #ffffff;
  border-color: transparent;
}
.actions a.active:hover,
.actions .btn.active:hover,
.actions .ghost.active:hover {
  background: var(--primaryHover);
}

/* 404 page layout overrides */
html.notfound, body.notfound {
  background: var(--bg);
  color: var(--text);
}
html.notfound {
  display: table;
  height: 100%;
  text-align: center;
}
body.notfound {
  display: table-cell;
  vertical-align: middle;
  margin: 2em auto;
}
body.notfound h1 {
  font-size: 2em;
  font-weight: 400;
  color: var(--text);
}
body.notfound p {
  margin: 0 auto;
  width: 280px;
  color: var(--muted);
}
@media only screen and (max-width: 280px) {
  body.notfound, body.notfound p {
    width: 95%;
  }
  body.notfound h1 {
    font-size: 1.5em;
    margin: 0 0 0.3em;
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}



/* Input with right-aligned icon toggle inside the field */
.input-with-icon {
  position: relative;
  margin: 12px 0; /* match overall input spacing */
}
.input-with-icon input[type="password"],
.input-with-icon input[type="text"] {
  width: 100%;
  padding-right: 40px; /* space for the icon button */
  box-sizing: border-box; /* ensure consistent sizing in both states */
  line-height: 1.2; /* normalize text line height */
  -webkit-appearance: none; /* avoid UA-specific styling differences */
  appearance: none;
  font-family: inherit; /* ensure same typography in both states */
  letter-spacing: inherit; /* avoid UA default letter spacing on password */
}
/* Hide the native Edge/IE password reveal and clear icons to avoid double icons */
.input-with-icon input[type="password"]::-ms-reveal,
.input-with-icon input[type="password"]::-ms-clear {
  display: none;
}
/* Also hide WebKit's cancel/reveal controls where applicable */
.input-with-icon input::-webkit-credentials-auto-fill-button,
.input-with-icon input::-webkit-clear-button,
.input-with-icon input::-webkit-textfield-decoration-container {
  display: none !important;
}
.icon-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.8;
  padding: 4px;
  cursor: pointer;
}
/* In modal context, ensure the eye icon matches the input text color (darker) */
.modal .input-with-icon .icon-btn {
  color: #111827; /* match modal input text color */
  opacity: 1;
}
.modal .input-with-icon .icon-btn:hover,
.modal .input-with-icon .icon-btn:focus {
  opacity: 1;
}
.modal .input-with-icon .icon-btn:focus-visible {
  /* Subtle focus ring on white modal */
  color: color-mix(in oklab, #111827, white 30%); /* 30% lighter than base icon color */
  outline: 2px solid rgba(17, 24, 39, 0.28); /* slate-900 at ~28% */
  outline-offset: 2px;
  border-radius: 4px;
}
.icon-btn:hover,
.icon-btn:focus {
  opacity: 1;
}
.icon-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Utility classes to replace inline styles in auth modal */
.mt-8 { margin-top: 8px; }
.text-right { text-align: right; }
.actions.start { justify-content: flex-start; }
.btn.link { padding: 0; }

/* Inline text link utility for consistent site styling */
.text-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.text-link:visited {
  color: var(--primary);
}
.text-link:hover,
.text-link:focus {
  color: var(--primaryHover);
  text-decoration: underline;
}
.text-link:focus-visible {
  outline: 2px solid rgba(255,255,255,0.3);
  outline-offset: 2px;
  border-radius: 2px;
}


/* Auth modal (login/register) consistent field spacing */
#login-modal .modal-card form > input,
#login-modal .modal-card form > .input-with-icon,
#login-modal .modal-card form > textarea,
#login-modal .modal-card form > .form-errors {
  margin-top: 10px;
}