/* ==========================================================================
   08-utilities.css — Utility osztályok

   Kis, atomi segédosztályok. TW v4 névadással — AI-tervezőből (v0, Lovable)
   származó osztályneveket közvetlenül használhatod a markupban.

   NE szaporítsd túl. Ha új utility 5+ helyen kell, ide bekerülhet.
   ========================================================================== */

@layer utilities {

  /* ========================================================================
     ACCESSIBILITY
     ======================================================================== */

  /* Screen-reader-only — vizuálisan rejtett, de képernyőolvasónak elérhető.
     A `screen-reader-text` a WP core osztálya: a the_posts_pagination(),
     a kereső űrlap és a komment sablonok ezt teszik a rejtett címsorokra.
     Ha nincs stílusa, a "Bejegyzések navigációja" felirat láthatóvá válik. */
  .sr-only,
  .screen-reader-text,
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Skip link — vizuálisan rejtett, DE billentyűzet-fókuszra láthatóvá válik.
     A `visually-hidden` önmagában fókuszban is rejtve maradna, ezért kell külön. */
  .skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transform: translateY(-200%);
  }

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

  /* Alpine.js x-cloak — rejti az elemet amíg Alpine inicializálódik */
  [x-cloak] { display: none !important; }

  /* Mobil menü scroll-lock (Alpine állítja a body-ra) */
  body.menu-locked {
    overflow: hidden;
  }

  /* ========================================================================
     DISPLAY
     ======================================================================== */

  .hidden       { display: none; }
  .block        { display: block; }
  .inline-block { display: inline-block; }
  .inline       { display: inline; }
  .flex         { display: flex; }
  .inline-flex  { display: inline-flex; }
  .grid         { display: grid; }

  /* Csak mobilon / desktopon látható */
  @media (max-width: 767px) {
    .hidden-mobile { display: none !important; }
  }
  @media (min-width: 768px) {
    .hidden-desktop { display: none !important; }
  }

  /* ========================================================================
     FLEX
     ======================================================================== */

  .flex-row     { flex-direction: row; }
  .flex-col     { flex-direction: column; }
  .flex-wrap    { flex-wrap: wrap; }
  .flex-nowrap  { flex-wrap: nowrap; }
  .flex-1       { flex: 1 1 0%; }
  .flex-auto    { flex: 1 1 auto; }
  .flex-none    { flex: none; }

  .items-start    { align-items: flex-start; }
  .items-center   { align-items: center; }
  .items-end      { align-items: flex-end; }
  .items-stretch  { align-items: stretch; }
  .items-baseline { align-items: baseline; }

  .justify-start    { justify-content: flex-start; }
  .justify-center   { justify-content: center; }
  .justify-end      { justify-content: flex-end; }
  .justify-between  { justify-content: space-between; }
  .justify-around   { justify-content: space-around; }

  /* ========================================================================
     GRID
     ======================================================================== */

  .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

  /* ========================================================================
     GAP — spacing skálához
     ======================================================================== */

  .gap-0  { gap: 0; }
  .gap-1  { gap: var(--space-1); }
  .gap-2  { gap: var(--space-2); }
  .gap-3  { gap: var(--space-3); }
  .gap-4  { gap: var(--space-4); }
  .gap-6  { gap: var(--space-6); }
  .gap-8  { gap: var(--space-8); }
  .gap-12 { gap: var(--space-12); }
  .gap-16 { gap: var(--space-16); }

  /* ========================================================================
     PADDING — spacing skálához

     p-N    → minden irány
     px-N   → padding-inline (left+right)
     py-N   → padding-block (top+bottom)
     pt/pb/pl/pr-N → egy irány
     ======================================================================== */

  .p-0  { padding: 0; }
  .p-1  { padding: var(--space-1); }
  .p-2  { padding: var(--space-2); }
  .p-3  { padding: var(--space-3); }
  .p-4  { padding: var(--space-4); }
  .p-6  { padding: var(--space-6); }
  .p-8  { padding: var(--space-8); }
  .p-12 { padding: var(--space-12); }

  .px-0 { padding-inline: 0; }
  .px-2 { padding-inline: var(--space-2); }
  .px-3 { padding-inline: var(--space-3); }
  .px-4 { padding-inline: var(--space-4); }
  .px-6 { padding-inline: var(--space-6); }
  .px-8 { padding-inline: var(--space-8); }

  .py-0 { padding-block: 0; }
  .py-2 { padding-block: var(--space-2); }
  .py-3 { padding-block: var(--space-3); }
  .py-4 { padding-block: var(--space-4); }
  .py-6 { padding-block: var(--space-6); }
  .py-8 { padding-block: var(--space-8); }
  .py-12 { padding-block: var(--space-12); }
  .py-16 { padding-block: var(--space-16); }

  /* ========================================================================
     MARGIN — spacing skálához (fizikai irányok, TW match)
     ======================================================================== */

  .m-0    { margin: 0; }
  .mx-auto { margin-inline: auto; }

  .mt-0  { margin-top: 0; }
  .mt-1  { margin-top: var(--space-1); }
  .mt-2  { margin-top: var(--space-2); }
  .mt-3  { margin-top: var(--space-3); }
  .mt-4  { margin-top: var(--space-4); }
  .mt-6  { margin-top: var(--space-6); }
  .mt-8  { margin-top: var(--space-8); }
  .mt-12 { margin-top: var(--space-12); }
  .mt-16 { margin-top: var(--space-16); }

  .mb-0  { margin-bottom: 0; }
  .mb-1  { margin-bottom: var(--space-1); }
  .mb-2  { margin-bottom: var(--space-2); }
  .mb-3  { margin-bottom: var(--space-3); }
  .mb-4  { margin-bottom: var(--space-4); }
  .mb-6  { margin-bottom: var(--space-6); }
  .mb-8  { margin-bottom: var(--space-8); }
  .mb-12 { margin-bottom: var(--space-12); }
  .mb-16 { margin-bottom: var(--space-16); }

  /* ========================================================================
     TEXT — alignment, wrap, transform
     ======================================================================== */

  .text-left   { text-align: start; }
  .text-center { text-align: center; }
  .text-right  { text-align: end; }

  .text-balance { text-wrap: balance; }
  .text-pretty  { text-wrap: pretty; }
  .text-nowrap  { white-space: nowrap; }

  .uppercase  { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
  .lowercase  { text-transform: lowercase; }
  .capitalize { text-transform: capitalize; }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Line clamp — n sor után ... */
  .line-clamp-2,
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
  .line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

  /* ========================================================================
     TEXT — font size, weight, leading, tracking
     ======================================================================== */

  .text-xs   { font-size: var(--text-xs); }
  .text-sm   { font-size: var(--text-sm); }
  .text-base { font-size: var(--text-base); }
  .text-lg   { font-size: var(--text-lg); }
  .text-xl   { font-size: var(--text-xl); }
  .text-2xl  { font-size: var(--text-2xl); }
  .text-3xl  { font-size: var(--text-3xl); }
  .text-4xl  { font-size: var(--text-4xl); }
  .text-5xl  { font-size: var(--text-5xl); }
  .text-6xl  { font-size: var(--text-6xl); }
  .text-7xl  { font-size: var(--text-7xl); }
  .text-8xl  { font-size: var(--text-8xl); }
  .text-9xl  { font-size: var(--text-9xl); }

  .font-light    { font-weight: var(--fw-light); }
  .font-normal   { font-weight: var(--fw-regular); }
  .font-medium   { font-weight: var(--fw-medium); }
  .font-semibold { font-weight: var(--fw-semibold); }
  .font-bold     { font-weight: var(--fw-bold); }
  .font-black    { font-weight: var(--fw-black); }

  .leading-none    { line-height: var(--lh-none); }
  .leading-tight   { line-height: var(--lh-tight); }
  .leading-snug    { line-height: var(--lh-snug); }
  .leading-normal  { line-height: var(--lh-normal); }
  .leading-relaxed { line-height: var(--lh-relaxed); }
  .leading-loose   { line-height: var(--lh-loose); }

  .tracking-tighter { letter-spacing: var(--tracking-tighter); }
  .tracking-tight   { letter-spacing: var(--tracking-tight); }
  .tracking-normal  { letter-spacing: var(--tracking-normal); }
  .tracking-wide    { letter-spacing: var(--tracking-wide); }
  .tracking-wider   { letter-spacing: var(--tracking-wider); }
  .tracking-widest  { letter-spacing: var(--tracking-widest); }

  /* ========================================================================
     COLOR — text & background (a leggyakoribbak)
     ======================================================================== */

  .text-muted   { color: var(--color-text-muted); }
  .text-subtle  { color: var(--color-text-subtle); }
  .text-invert  { color: var(--color-text-invert); }
  .text-primary { color: var(--color-primary); }
  .text-success { color: var(--color-success); }
  .text-warning { color: var(--color-warning); }
  .text-error   { color: var(--color-error); }

  .bg-default { background-color: var(--color-bg); }
  .bg-alt     { background-color: var(--color-bg-alt); }
  .bg-muted   { background-color: var(--color-bg-muted); }
  .bg-invert  { background-color: var(--color-bg-invert); color: var(--color-text-invert); }
  .bg-primary { background-color: var(--color-primary); color: var(--color-text-invert); }

  /* ========================================================================
     BORDER RADIUS
     ======================================================================== */

  .rounded-none { border-radius: 0; }
  .rounded-sm   { border-radius: var(--radius-sm); }
  .rounded      { border-radius: var(--radius); }
  .rounded-md   { border-radius: var(--radius-md); }
  .rounded-lg   { border-radius: var(--radius-lg); }
  .rounded-xl   { border-radius: var(--radius-xl); }
  .rounded-2xl  { border-radius: var(--radius-2xl); }
  .rounded-3xl  { border-radius: var(--radius-3xl); }
  .rounded-full { border-radius: var(--radius-full); }

  /* ========================================================================
     SHADOW
     ======================================================================== */

  .shadow-none { box-shadow: none; }
  .shadow-sm   { box-shadow: var(--shadow-sm); }
  .shadow      { box-shadow: var(--shadow); }
  .shadow-md   { box-shadow: var(--shadow-md); }
  .shadow-lg   { box-shadow: var(--shadow-lg); }
  .shadow-xl   { box-shadow: var(--shadow-xl); }
  .shadow-2xl  { box-shadow: var(--shadow-2xl); }
  .shadow-inner { box-shadow: var(--shadow-inner); }

  /* ========================================================================
     WIDTH / HEIGHT
     ======================================================================== */

  .w-full { width: 100%; }
  .w-auto { width: auto; }
  .h-full { height: 100%; }
  .h-auto { height: auto; }
  .h-screen { height: 100vh; height: 100dvh; }

  /* ========================================================================
     FULL BLEED — kitör a containerből, full viewport szélességig
     ======================================================================== */

  .full-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  /* ========================================================================
     ASPECT RATIO
     ======================================================================== */

  .aspect-square    { aspect-ratio: 1 / 1; }
  .aspect-video     { aspect-ratio: 16 / 9; }
  .aspect-portrait  { aspect-ratio: 4 / 5; }
  .aspect-wide      { aspect-ratio: 21 / 9; }

  /* ========================================================================
     OBJECT-FIT képekhez
     ======================================================================== */

  .object-cover    { object-fit: cover; }
  .object-contain  { object-fit: contain; }

  /* ========================================================================
     FLOW — bekezdés-szerű függőleges ritmus (em-alapú)

     Prose tartalomhoz, em-ben (sortávolsággal arányos).
     ======================================================================== */

  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  /* ========================================================================
     ICON segédosztályok

     A dg_icon() helper által beillesztett SVG-k egységes méretezéséhez.
     stroke="currentColor" miatt CSS color-ral színezhetők.

     Használat:
     <?php echo dg_icon( 'mail', ['class' => 'icon icon--md icon--primary'] ); ?>
     ======================================================================== */

  .icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.125em;
  }

  .icon--xs  { width: 14px; height: 14px; }
  .icon--sm  { width: 16px; height: 16px; }
  .icon--md  { width: 20px; height: 20px; }
  .icon--lg  { width: 24px; height: 24px; }
  .icon--xl  { width: 32px; height: 32px; }
  .icon--2xl { width: 48px; height: 48px; }

  .icon--primary { color: var(--color-primary); }
  .icon--muted   { color: var(--color-text-muted); }
  .icon--subtle  { color: var(--color-text-subtle); }
  .icon--success { color: var(--color-success); }
  .icon--warning { color: var(--color-warning); }
  .icon--error   { color: var(--color-error); }
  .icon--invert  { color: var(--color-text-invert); }

  .icon--rotate-45  { transform: rotate(45deg); }
  .icon--rotate-90  { transform: rotate(90deg); }
  .icon--rotate-180 { transform: rotate(180deg); }
  .icon--rotate-270 { transform: rotate(270deg); }

  .icon--animated {
    transition: transform var(--duration-base) var(--ease);
  }

}