/* =============================================================
   Namos brand styles
   Brand colours, custom visual classes, and animations.
   ============================================================= */

/* ----- Web fonts ------------------------------------------- */
/* Self-hosted Inter variable font (weight axis 100–900).
   Replaces the Google Fonts dependency; works offline. */
@font-face {
  font-family: 'Inter';
  src: url('/media/layout/fonts/inter/inter-variablefont_opszwght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ----- Custom properties ----------------------------------- */
:root {
  --color-bg:         #06183f;
  --color-blue-deep:  #0a2a66;
  --color-blue:       #0a3a8c;
  --color-red:        #d8232a;
  --color-light-blue: #8fb4ff;
  --color-red-soft:   #ff8a8e;

  --font-sans:    'Inter', sans-serif;

  --radius-card:  1.5rem;    /* 24px */
  --radius-pill:  9999px;
  --radius-icon:  0.875rem;  /* 14px */
}

/* ----- Base ------------------------------------------------ */
html,
body {
  background-color: var(--color-bg);
}

/* ----- Animations ------------------------------------------ */
@keyframes namos-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----- Utility visual classes ------------------------------ */

/* Gradient fill background — used on CTA banners and WP placeholders */
.namos-shimmer-fill {
  background: linear-gradient(120deg, #0a2a66 0%, #0a3a8c 45%, #d8232a 100%);
}

/* Gradient clipped text */
.namos-shimmer-text {
  background: linear-gradient(120deg, #ffffff 0%, #8fb4ff 55%, #ff8a8e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Horizontal accent line — bottom edge of hero and WP cards */
.namos-accent-line {
  background: linear-gradient(90deg, transparent, #0a3a8c, #d8232a, #0a3a8c, transparent);
}

/* Frosted-glass card surface */
.namos-glass {
  background: rgba(10, 42, 140, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(143, 180, 255, 0.18);
}

/* Subtle dot-grid overlay */
.namos-grid-bg {
  background-image:
    linear-gradient(rgba(143, 180, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 180, 255, 0.07) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* Rise-in entrance animation */
.namos-rise {
  animation: namos-rise 0.7s ease-out both;
}

/* ----- Print styles ---------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  header,
  footer,
  .hero-cta,
  .btn {
    display: none;
  }

  .namos-glass {
    background: transparent;
    border: 1px solid #ccc;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .namos-shimmer-text {
    -webkit-text-fill-color: #000;
    color: #000;
    background: none;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }
}

/* ----- Added manually ------------------ */
.stretched-link {
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
  }
}