/* ============================================================
   AGS CMS — UI/UX refinements layered on top of clean.css
   ============================================================ */

/* ---- Hero: lift content up (was anchored to the bottom) ---- */
.hero-video { align-items: center; }
.hero-video__content { padding-bottom: 0; padding-top: 40px; }
@media (max-width: 768px) {
  .hero-video__content { padding-top: 24px; }
}

/* ---- Compact service cards (replace the giant aspect-ratio cards) ---- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 22px;
  margin-top: 8px;
}
.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  border: 1px solid var(--grey-light, #e6e8ec);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(15,25,35,.13);
  border-color: var(--blue, #0B47BA);
}
.svc-card__media {
  position: relative;
  height: 168px;
  overflow: hidden;
  background: var(--dark-bg, #11161d);
}
.svc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .92;
  transition: transform .5s ease;
}
.svc-card:hover .svc-card__media img { transform: scale(1.07); }
.svc-card__icon {
  position: absolute; left: 14px; bottom: 14px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--blue, #0B47BA);
  color: #fff; font-size: 1.05rem;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(11,71,186,.4);
}
.svc-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.svc-card__tag {
  font-family: var(--font-mono, monospace);
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue, #0B47BA);
}
.svc-card__title { font-size: 1.16rem; font-weight: 700; margin: 0; line-height: 1.25; }
.svc-card__desc { font-size: .92rem; line-height: 1.6; color: var(--grey-mid, #5a626e); margin: 0; }
.svc-card__hl {
  list-style: none;
  margin: 4px 0 2px;
  padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.svc-card__hl li {
  position: relative;
  padding-left: 20px;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--grey-mid, #5a626e);
}
.svc-card__hl li::before {
  content: "";
  position: absolute; left: 2px; top: 7px;
  width: 6px; height: 6px;
  background: var(--blue, #0B47BA);
  border-radius: 50%;
}
.svc-card__arrow {
  margin-top: auto; padding-top: 10px;
  font-weight: 600; font-size: .9rem; color: var(--blue, #0B47BA);
}

/* Highlights on the service detail hero */
.svc-detail-hl {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; gap: 10px;
}
.svc-detail-hl li {
  display: flex; align-items: flex-start; gap: 10px;
  color: rgba(255,255,255,.9); font-size: 1rem;
}
.svc-detail-hl li i { color: var(--blue-light, #6ea2ff); margin-top: 4px; }

/* When a card has no image, lead with a tall icon header */
.svc-card--noimg .svc-card__media {
  height: 96px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(11,71,186,.12), rgba(11,71,186,.04));
}
.svc-card--noimg .svc-card__media i { font-size: 2rem; color: var(--blue, #0B47BA); opacity: .9; }

/* ---- Long buttons must not overflow the screen (.btn has white-space:nowrap) ---- */
.btn { max-width: 100%; }
@media (max-width: 600px) {
  .btn { white-space: normal; } /* let long labels wrap instead of overflowing */
}

/* ---- Hero action buttons spacing (was missing → buttons stuck together) ---- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
@media (max-width: 600px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ---- Brand lockup: emblem + wordmark (header & footer) ---- */
.logo { gap: 11px; }
.logo img { height: 40px; width: 40px; flex-shrink: 0; border-radius: 50%; }
.logo-wordmark {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--grey-dark, #2a3038);
  white-space: nowrap;
}
.logo-wordmark span {
  font-weight: 400;
  color: var(--grey-mid, #6b7280);
}
@media (max-width: 420px) {
  .logo img { height: 34px; width: 34px; }
  .logo-wordmark { font-size: 1.02rem; letter-spacing: 0.03em; }
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-bottom: 16px;
}
.footer__logo img { height: 46px; width: 46px; flex-shrink: 0; border-radius: 50%; }
.footer__wordmark {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.footer__wordmark span {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
}

/* Livro de Reclamações link (legal requirement in Portugal) */
.footer__complaints {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-sm, 4px);
  color: #fff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.footer__complaints:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}
.footer__complaints i { color: #5b9bff; }

/* ---- Outline button for LIGHT backgrounds (the white .btn--outline is invisible there) ---- */
.btn--line {
  background: transparent;
  color: var(--blue, #0B47BA) !important;
  border: 2px solid var(--blue, #0B47BA);
}
.btn--line:hover {
  background: var(--blue, #0B47BA);
  color: #fff !important;
  box-shadow: none;
}

/* ---- Materials section ---- */
.materials-section { padding: 84px 0; background: var(--white, #fff); }
.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 14px;
  margin-top: 36px;
}
.material-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: var(--grey-bg, #f5f6f8);
  border: 1px solid var(--grey-light, #e6e8ec);
  border-radius: 6px;
  transition: border-color .2s ease, transform .2s ease;
}
.material-chip:hover { border-color: var(--blue, #0B47BA); transform: translateY(-2px); }
.material-chip__icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: rgba(11,71,186,.1); color: var(--blue, #0B47BA);
  border-radius: 8px; font-size: 1.05rem;
}
.material-chip__name { font-weight: 600; font-size: .95rem; }

/* ---- Client logos carousel (image support) ---- */
.logo-item__img { max-height: 38px; max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.logo-item:hover .logo-item__img { filter: grayscale(0); opacity: 1; }

/* ---- Service detail page ---- */
.svc-detail-hero {
  background: var(--dark-bg, #11161d);
  color: #fff;
  padding: 120px 0 70px;
  position: relative;
}
.svc-detail-hero__eyebrow {
  font-family: var(--font-mono, monospace); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light, #6ea2ff);
}
.svc-detail-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 14px 0 16px; line-height: 1.05; }
.svc-detail-hero p { max-width: 640px; color: rgba(255,255,255,.78); font-size: 1.08rem; line-height: 1.6; }
.svc-detail-body { padding: 72px 0; }
.svc-prose { max-width: 760px; font-size: 1.05rem; line-height: 1.8; color: var(--grey-dark, #2a3038); }
.svc-prose h2 { font-size: 1.5rem; margin: 36px 0 12px; }
.svc-prose h3 { font-size: 1.2rem; margin: 28px 0 10px; }
.svc-prose p { margin: 0 0 18px; }
.svc-prose ul { margin: 0 0 18px; padding-left: 22px; }
.svc-prose li { margin-bottom: 8px; }
.svc-related { border-top: 1px solid var(--grey-light, #e6e8ec); padding: 56px 0 0; margin-top: 56px; }

/* ---- FAQ (cnc page, SEO) ---- */
.faq-section { padding: 84px 0; background: var(--grey-bg, #f5f6f8); }
.faq-list { max-width: 820px; margin: 36px auto 0; }
.faq-item { background: #fff; border: 1px solid var(--grey-light, #e6e8ec); border-radius: 6px; margin-bottom: 12px; padding: 22px 24px; }
.faq-item h3 { font-size: 1.08rem; margin: 0 0 8px; display: flex; gap: 10px; align-items: flex-start; }
.faq-item h3 i { color: var(--blue, #0B47BA); margin-top: 3px; }
.faq-item p { margin: 0; color: var(--grey-mid, #5a626e); line-height: 1.65; }

/* ---- Intro / rich-text block (formatting comes from the editor) ---- */
.seo-intro { padding: 72px 0 0; }
.seo-intro__text {
  max-width: 820px; margin: 0;       /* left-aligned with the rest of the page (was centred) */
  font-size: 1.1rem; line-height: 1.75;
  color: var(--grey-dark, #2a3038); /* normal text — editor chooses colours */
  text-align: left;                 /* editor chooses alignment */
}

/* ---- Rich-text content: honour what was set in the Quill editor ---- */
.seo-intro__text img,
.svc-prose img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px 0; }
.seo-intro__text a,
.svc-prose a { color: var(--blue, #0B47BA); text-decoration: underline; }
.seo-intro__text h2, .seo-intro__text h3, .seo-intro__text h4 { line-height: 1.25; margin: 26px 0 10px; }
.seo-intro__text ul, .seo-intro__text ol { margin: 0 0 16px; padding-left: 22px; }
.seo-intro__text blockquote,
.svc-prose blockquote { border-left: 3px solid var(--blue, #0B47BA); margin: 18px 0; padding: 4px 0 4px 18px; color: var(--grey-mid, #5a626e); }

/* Quill alignment / size / indent classes (editor output) — for all rich content */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-size-small { font-size: 0.8em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge { font-size: 2.2em; }
.ql-indent-1 { padding-left: 3em; }
.ql-indent-2 { padding-left: 6em; }
.ql-indent-3 { padding-left: 9em; }

@media (max-width: 768px) {
  .materials-section, .faq-section { padding: 56px 0; }
  .svc-detail-hero { padding: 96px 0 52px; }

  /* ---- Mobile menu: float the close (X) above the full-screen overlay ---- */
  .nav-links.active { animation: navFade .25s ease; }
  @keyframes navFade { from { opacity: 0; } to { opacity: 1; } }

  .hamburger.active {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 400;            /* above the z-index:300 menu overlay */
    width: 46px; height: 46px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: var(--off-white, #f1f3f6);
    border: 1px solid var(--grey-light, #e6e8ec);
    box-shadow: 0 6px 18px rgba(15,25,35,.12);
  }
  .hamburger.active span { width: 24px; }

  /* Show the logo at the top of the open menu for orientation */
  .nav-links.active::before {
    content: "AGS Machining";
    position: fixed;
    top: 22px; left: 20px;
    font-family: var(--font-mono, monospace);
    font-weight: 700; letter-spacing: .04em;
    color: var(--blue, #0B47BA);
    z-index: 401;
  }
}