@layer reset, tokens, base, layout, components, utilities;

@layer reset {

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

  summary,
  ul {
    list-style: none;
  }

  html {
    scroll-behavior: smooth;
  }
}

@layer tokens {
  /* Design Tokens */

  :root {

    /* Typography */
    --ff-base: "Poppins", sans-serif;

    /* Fluid type scale */
    --fs-xl: clamp(2rem, 4vw, 2.668rem);
    --fs-lg: clamp(1.3rem, 2.5vw, 1.5rem);
    --fs-md: clamp(0.95rem, 1.5vw, 1rem);
    --fs-sm: clamp(0.75rem, 1vw, 0.8rem);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    --lh-base: 24px;

    /* Spacing */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: clamp(1.5rem, 3vw, 2rem);
    --space-section: clamp(2.5rem, 6vw, 5rem);
    --space-page: clamp(1.5rem, 4vw, 3rem);

    /* Colors */
    --clr-bg-page: #e5e5e5;
    --clr-bg-surface: #fff;
    --clr-bg-surface-alpha: #ffffffba;
    --clr-accent: #5867eb;
    --clr-accent-soft: #6070ff;
    --clr-tag-bg: #ebebff;
    --clr-text-heading: #172b4d;
    --clr-text-primary: #344563;
    --clr-text-muted: #6b7687;
    --clr-border-muted: #dfe1e6;

    /* Card Media width */
    --card-media-width: 0.75fr;

    /* Shadow */
    --shadow-soft: 0 4px 6px rgba(64, 83, 252, 0.24);

    /* Layout */
    --vh-offset: calc(100svh - 56px);

    /* transition */
    --motion-theme: 250ms cubic-bezier(.4, 0, .2, 1);
    --duration-slow: 750ms;
  }

  /* SYSTEM DARK MODE */
  @media (prefers-color-scheme: dark) {
    body:not(:has(.theme-switch input:checked)) {

      --clr-bg-page: #0f1214;
      --clr-bg-surface: #171b1e;
      --clr-bg-surface-alpha: #171b1ecc;

      --clr-text-heading: #f2f4f8;
      --clr-text-primary: #e6e6e6;
      --clr-text-muted: #a8a8a8;

      --clr-accent: #4cc9f0;
      --clr-accent-soft: #7ddcff;

      --clr-border-muted: #2a2f33;
      --clr-tag-bg: #20262b;

      --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.6);
    }
  }

  /* MANUAL THEME DARK OVERRIDE */

  body:has(#theme-dark:checked) {

    --clr-bg-page: #0f1214;
    --clr-bg-surface: #171b1e;
    --clr-bg-surface-alpha: #171b1ecc;

    --clr-text-heading: #f2f4f8;
    --clr-text-primary: #e6e6e6;
    --clr-text-muted: #a8a8a8;

    --clr-accent: #4cc9f0;
    --clr-accent-soft: #7ddcff;

    --clr-border-muted: #2a2f33;

    --clr-tag-bg: #20262b;

    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.6);
  }

  /* BRAND THEME */
  body:has(#theme-brand:checked) {
    --clr-bg-page: #eee7dc;
    --clr-bg-surface: #fffaf2;
    --clr-bg-surface-alpha: #fffaf2cc;

    --clr-text-heading: #2b1f14;
    --clr-text-primary: #3b2f2f;
    --clr-text-muted: #7a5c3d;

    --clr-border-muted: #f2d9b1;

    --clr-tag-bg: #fff1d6;

    --clr-accent: #f59e0b;
    --clr-accent-soft: #fbbf24;

    --shadow-soft: 0 10px 25px rgba(245, 158, 11, 0.25);
  }

  /* HIGH CONTRAST THEME */
  body:has(#theme-contrast:checked) {

    --clr-bg-page: #000000;
    --clr-bg-surface: #0f0f0f;
    --clr-bg-surface-alpha: #0f0f0fcc;

    --clr-text-heading: #ffffff;
    --clr-text-primary: #ffffff;
    --clr-text-muted: #e5e5e5;

    --clr-border-muted: #ffffff;

    --clr-accent: #ffff00;
    --clr-accent-soft: #ffff00;

    --clr-tag-bg: #000000;
    --shadow-soft: none;
  }

}

@layer base {

  html {
    interpolate-size: allow-keywords;
  }

  body {
    font-family: var(--ff-base);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-surface);
    transition:
      background-color var(--motion-theme),
      color var(--motion-theme);
  }

  h1,
  h2,
  h3 {
    font-weight: var(--fw-bold);
    color: var(--clr-text-heading);
    line-height: 1.25;
    margin: 0;
  }

  /* Font-size Utilities (Fluid) */

  .fs-xl {
    font-size: var(--fs-xl);
  }

  .fs-lg {
    font-size: var(--fs-lg);
  }

  .fs-md {
    font-size: var(--fs-md);
  }

  .fs-sm {
    font-size: var(--fs-sm);
  }

  /* Text Color Utilities */

  .text-accent {
    color: var(--clr-accent);
  }

  .bg-accent {
    background-color: var(--clr-accent);
  }

  main {
    background-color: var(--clr-bg-page);
  }

  a {
    text-decoration: none;
  }

  @media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }

    .mobile-menu {
      transition: none;
    }
  }

}

@layer layout {

  /* Container System */

  .container {
    max-width: 1100px;
    margin-inline: auto;
    padding: var(--space-3);

    &.container--narrow {
      max-width: 650px;
    }
  }

  /* multiple cards grid */

  .card-grid {
    display: grid;
    gap: var(--space-section);
    padding-block: var(--space-section);
  }

  /* The context for the container query */
  .card-item {
    container-type: inline-size;
    container-name: card-container;
    width: 100%;
  }

  /* HEADER */

  header {
    position: sticky;
    display: flex;
    top: 0;
    background-color: var(--clr-bg-surface-alpha);
    backdrop-filter: blur(6px);
    padding: var(--space-2);
    gap: var(--space-1);
    align-items: center;

    nav {
      margin-left: auto;
    }
  }

  nav>ul {
    display: none;
  }

  #headlines {
    display: grid;
    background-image: url(images/topL.png), url(images/topC.png), url(images/topR.png),
      url(images/bottomL.png), url(images/bottomC.png), url(images/bottomR.png);
    background-position: left top, center top, right top,
      left bottom, center 95%, right bottom;
    background-repeat: no-repeat;
    min-height: calc(var(--vh-offset));
    border-bottom-left-radius: 100px;
    place-items: center;
  }

  #about {
    min-height: 80svh;
    padding-block: var(--space-section);
  }

  #contact {
    display: grid;
    place-items: center;
    color: #fff;
    background-color: var(--clr-accent);
    border-top-left-radius: 100px;
    width: 100%;
    background-image: url(images/contact-bg_01.png), url(images/contact-bg_03.png);
    background-position: center top, right top;
    background-repeat: no-repeat;
    gap: var(--space-3);
    padding-block: var(--space-page);

    h2 {
      color: inherit;
    }

    h2,
    p {
      text-align: center;
    }
  }

  :is(#headlines, #contact)>div {
    display: grid;
    gap: var(--space-3);
  }

  .radius-tr {
    border-top-right-radius: 100px;
  }

  .border-b {
    border-bottom: 1px solid var(--clr-border-muted);
  }

}

@layer components {

  /* Button Component (Normalized) */

  .btn {
    --btn-bg: var(--clr-bg-surface);
    --btn-color: var(--clr-accent);
    --btn-border: var(--clr-accent-soft);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.6em;
    border-radius: 0.4em;

    font-size: var(--fs-md);
    font-weight: var(--fw-medium);

    background-color: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);

    text-align: center;
    text-decoration: none;

    transition: transform var(--motion-theme);
  }

  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* social-media */

  .social-media {
    a {
      color: var(--clr-text-primary);
    }

    ul {
      display: flex;
      padding: 5px 0 0 30px;
      gap: var(--space-1);
    }
  }

  /* card */
  .card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--clr-border-muted);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    /* Mobile First: Stacked */
    grid-template-areas: "media" "body";
    grid-template-columns: 1fr;
  }

  .card-media {
    grid-area: media;
    width: 100%;
    aspect-ratio: 1.25;
    object-fit: cover;
    border-radius: inherit;
  }

  .card-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: var(--space-page);

    .card-details {
      display: grid;
      gap: 0.25em;
    }
  }

  /* Container Query: Switch to Side-by-Side if wider than 600px */
  @container card-container (min-width: 600px) {
    .card {
      grid-template-areas: "media body";
      grid-template-columns: var(--card-media-width) 1fr;
      padding: var(--space-2);

      &.card--reverse {
        grid-template-areas: "body media";
        grid-template-columns: 1fr var(--card-media-width);
      }

      &.card--about {
        grid-template-columns: 1fr 1fr;
        box-shadow: none;
        border: none;
      }
    }
  }

  .card-actions {
    display: inline-flex;
    gap: var(--space-1);

    a {
      gap: var(--space-1);
    }
  }

  .card-meta {
    display: inline-flex;
    gap: 2em;

    >li:not(:first-child) {
      list-style: disc;
      color: var(--clr-text-muted);
    }
  }

  /* Tag / Pill Component (Normalized)
========================= */

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .tag {
    display: grid;
    place-items: center;
    padding: 0.25rem;

    border-radius: var(--space-1);
    border: 1px solid var(--clr-tag-bg);
    background-color: var(--clr-tag-bg);
    color: var(--clr-accent);
    font-size: var(--fs-sm);
    line-height: 1;
    white-space: nowrap;
  }

  /* Form Field Component (Normalized) */

  form {
    width: 100%;
    display: grid;
    background-image: url(images/contact-bg_02.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    gap: var(--space-3);
    place-items: center;
  }

  .input__container {
    width: 100%;
    position: relative;
  }

  .form-input {
    --input-border: #cfd8dc;
    --input-focus: var(--clr-accent-soft);

    display: block;
    width: 100%;

    border: 1px solid var(--input-border);
    border-radius: 8px;

    padding: 0.5em 0.75em;

    font-size: var(--fs-md);
    font-family: inherit;
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-surface);

    transition:
      border-color var(--motion-theme),
      box-shadow var(--motion-theme);
  }

  .input-line {
    height: 2.5em;
  }

  .form-input::placeholder {
    color: transparent;
  }

  .form-input:focus {
    outline: none;
    border-color: var(--input-focus);
  }

  .input__label {
    position: absolute;
    z-index: 1;
    left: 12px;
    top: 5px;

    font-size: var(--fs-sm);
    color: var(--clr-text-muted);

    pointer-events: none;

    transition:
      top 0.4s ease,
      left 0.4s ease,
      font-size 0.4s ease,
      color 0.4s ease;
  }

  .form-input:is(:focus, :not(:placeholder-shown))+.input__label {
    font-size: 0.75em;
    font-weight: var(--fw-medium);
    top: -22px;
    left: 6px;
    color: var(--clr-text-primary);
  }

  /* Accordion Component
========================= */

  .accordion {
    summary {
      list-style: none;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    .accordion-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 48px;
      font-size: 1.2em;
      color: var(--clr-text-primary);

      .icon {
        transform: rotate(0deg);
        color: var(--clr-text-muted);
        transition:
          transform var(--motion-theme),
          color var(--motion-theme);
      }

    }

    .accordion-item[open]>summary .icon {
      transform: rotate(90deg);
      color: var(--clr-accent);
    }
  }

  /* =========================================
   Accordion smooth open / close
   (robust max-height animation)
========================================= */

  .accordion details {
    border-bottom: 1px solid var(--clr-border-muted);
    overflow: hidden;
  }

  .accordion details::details-content {
    max-height: 0;
    block-size: 0;
    overflow: hidden;

    opacity: 1;
    padding-block: 0;

    transition:
      block-size var(--motion-theme),
      max-height var(--motion-theme),
      opacity var(--motion-theme),
      padding var(--motion-theme),
      border var(--duration-slow) ease,
      content-visibility var(--duration-slow);
    transition-duration: var(--duration-slow);
    transition-behavior: allow-discrete;
  }

  .accordion details[open]::details-content {
    height: auto;
    max-height: max-content;
    opacity: 1;
    padding-block: var(--space-2);
  }

  .language-ul li {
    padding: 5px;
    line-height: 25px;
    background-color: var(--clr-tag-bg);
    text-align: center;
    align-items: center;
    gap: 20px;
    display: flex;
  }

  /* Theme Switcher */
  .theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;

    padding: 0.25rem;
    border-radius: 999px;

    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border-muted);
    box-shadow: var(--shadow-soft);

    .icon {
      appearance: none;
      -webkit-appearance: none;

      --size: 2.5rem;
      width: var(--size);
      height: var(--size);

      display: grid;
      place-items: center;
      border-radius: 50%;

      background-color: transparent;
      color: var(--clr-text-muted);

      transition:
        background-color var(--motion-theme),
        color var(--motion-theme),
        transform var(--motion-theme);

      &:checked {
        color: var(--clr-accent-soft);
      }
    }

    /* SYSTEM THEME VISUAL SYNC */

    @media (prefers-color-scheme: light) {
      .theme-switch:not(:has(input:checked)) #theme-light {
        background: var(--clr-accent);
      }
    }

    @media (prefers-color-scheme: dark) {
      .theme-switch:not(:has(input:checked)) #theme-dark {
        background: var(--clr-accent);
      }
    }
  }

  /* Theme Transition */

  .card,
  header,
  footer,
  section,
  .btn,
  .form-input {
    transition:
      background-color var(--motion-theme),
      color var(--motion-theme),
      border-color var(--motion-theme),
      box-shadow var(--motion-theme);
  }

  /* =========================================
   Mobile Menu — Off-canvas layout
========================================= */

  .mobile-menu {
    will-change: transform;
    width: clamp(240px, 60vw, 320px);
    height: 100svh;

    margin: 0;
    padding: var(--space-3);

    border: none;
    border-radius: 0;
    border-inline-end: 1px solid var(--clr-border-muted);

    background-color: color-mix(in srgb, var(--clr-bg-page), transparent 15%);
    box-shadow: var(--shadow-soft);

    position: fixed;
    inset-block: 0;

    transform: translateX(-100%);
    transition: transform var(--motion-theme);

    /* animated open state */
    &.is-visible {
      transform: translateX(0);

      /* reduce paint cost the dialog is closed */
      &:not([open]) {
        pointer-events: none;
      }
    }

    &::backdrop {
      background-color: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(4px);
    }

    .mobile-nav {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .mobile-menu-close {
      align-self: flex-end;
    }

    .mobile-nav-list {
      display: grid;
      flex-direction: column;
      gap: var(--space-2);
      padding-block: var(--space-section);

      a {
        display: block;
        /* width: max-content; */
        padding: 0.75rem 0.5rem;
        text-align: center;
        font-size: var(--fs-lg);
        color: var(--clr-text-primary);
        position: relative;
        background-color: var(--clr-bg-surface-alpha);
        width: 100%;
        --link-bg: var(--clr-text-muted);

        &.u-hover-accent {
          border-radius: 375px;
        }
      }
    }
  }

  /* =================================
   Icon Control Utility
   (shared by open / close / future)
================================= */

  .icon-btn {
    width: 2.5rem;
    height: 2.5rem;

    display: grid;
    place-items: center;
    color: var(--clr-accent);
    border-radius: 50%;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border-muted);

    box-shadow: var(--shadow-soft);
  }

  /* responsive */

  @media (width >=769px) {

    .mobile-menu,
    .mobile-menu-toggle {
      display: none;
    }

    nav>ul {
      display: flex;
      gap: 1rem;
    }

    .nav-links-desktop {
      color: var(--clr-text-primary);
      padding: 0 var(--space-1);
      border-radius: var(--space-1);
      position: relative;
      display: inline-flex;
      align-items: center;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.25rem;

        height: 2px;
        background-color: var(--clr-accent);

        transform: scaleX(0);
        transform-origin: center;
        transition: transform var(--motion-theme);
      }

    }

    .language-ul {
      display: grid;
      grid-template-columns: repeat(4, auto);
      gap: var(--space-1);
      padding: var(--space-2);
    }

    .language-ul>li {
      display: flex;
      flex-wrap: wrap;
      line-height: 0.8em;
      justify-content: center;
      padding: 0.4em;
    }

    #headlines {
      background-image: url(images/dtp-header-bg.svg);
    }

    .footer {
      background-image: url(images/dtp-contact-bg.svg);
    }

    form {
      background-image: none;
      flex-direction: column;
    }

    :is(#headlines, .footer) {
      background-position: 50% 50%;
      background-size: contain;
    }

    .tags {
      align-self: start;
    }
  }

}

@layer utilities {
  /* =================================
   Skip Link (Accessibility)
================================= */

  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-2);
    inset-block-start: var(--space-2);
    z-index: 999;

    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;

    background-color: var(--clr-bg-surface);
    color: var(--clr-text-primary);
    border: 1px solid var(--clr-border-muted);

    transform: translateY(-200%);
    transition: transform var(--motion-theme);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* Global Interaction Utilities */

  .sr-only {
    display: none;
  }

  .u-interactive {
    cursor: pointer;
  }

  .u-hover-accent,
  .u-hover-muted {
    transition:
      background-color var(--motion-theme),
      color var(--motion-theme),
      box-shadow var(--motion-theme),
      transform var(--motion-theme);
  }

  .u-hover-muted:is(:hover, :focus-visible) {
    transform: scale(1.15);
    color: var(--clr-text-muted);
    filter: drop-shadow(var(--shadow-soft));

    &:is(.icon) {
      color: var(--clr-accent-soft);
    }
  }

  /* Inset focus ring — safe inside clipped containers */
  .u-focus-inset:focus-visible {
    outline: none;
    box-shadow:
      inset 0 0 0 3px var(--clr-accent);
  }

  .u-hover-accent:is(:hover, :focus-visible) {
    &:not(a) {
      background-color: var(--clr-accent);
      color: var(--clr-bg-surface);
      box-shadow: var(--shadow-soft);
    }

    &:is(a) {
      color: var(--clr-accent);
      background-color: var(--link-bg, none);

      &::after {
        transform: scaleX(1);
      }
    }
  }


  /* Global SVG Icon Utility */

  .icon {
    --icon-size: 1.5rem;
    --icon-color: currentColor;

    width: var(--icon-size);
    height: var(--icon-size);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: var(--icon-color);

    /* Icon identity is provided by components via --icon-url */
    mask-image: var(--icon-url, none);
    -webkit-mask-image: var(--icon-url, none);

    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    flex-shrink: 0;

    /* Optional size variants (non-breaking) */
    &.icon--sm {
      --icon-size: 1.25rem;
    }

    &.icon--lg {
      --icon-size: 2rem;
    }
  }

  /* Margin-based Vertical Rhythm Utilities Use for spacing between siblings only */

  .space-sm {
    margin-block: var(--space-1);
  }

  .space-md {
    margin-block: var(--space-2);
  }

  .space-lg {
    margin-block: var(--space-page);
  }

  .pd-block-md {
    padding-block: var(--space-3);
  }

  /* || Utilities styles */

  .fw-medium {
    font-weight: var(--fw-medium);
  }

  .bg-surface {
    background-color: var(--clr-bg-surface);
  }

  .logo-text {
    font-size: 1.125em;
    color: var(--clr-accent);
  }

  :is(.logo, .logo:hover) {
    transform: rotateY(360deg);
    transition: all 10s ease-in-out 1s;
  }

}