/* ===========================
   ComelyArt - Page Overrides
   =========================== */

:root {
  --overlay: rgba(0, 0, 0, 0.6);
  --accent: #c85e51; /* theme accent used for links in dark sections */
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------------------------
   Accessibility
   --------------------------- */

.visually-hidden-focusable {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: .5rem 1rem;
  background: #000;
  color: #fff;
  z-index: 1000;
}

/* ---------------------------
   Header / Primary Menu
   --------------------------- */

#primary-menu-trigger {
  cursor: pointer;
  border: 0;
  background: none;
}

@media (max-width: 991.98px) {
  .primary-menu { display: none; }
  .primary-menu.open { display: block; }

  .primary-menu .menu-container {
    padding: 0;
    margin: 1rem 0 0;
    list-style: none;
  }
  .primary-menu .menu-item + .menu-item { margin-top: .25rem; }
  .primary-menu .menu-link { display: block; padding: .5rem 0; }
}

/* ---------------------------
   Gallery (grid + description)
   - Mobile/Tablet: description visible under image
   - Desktop: description as hover overlay
   --------------------------- */

.img-wrap {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;      /* for overlay */
  overflow: hidden;        /* clip overlay corners */
}
.img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Default (mobile/tablet) — show description as normal block */
.description.description-grid {
  margin-top: .5rem;
  padding: 0;
  background: transparent;
  color: inherit;
}
.description.description-grid h3 {
  font-size: 1rem;
  margin: .25rem 0 .25rem;
}
.description.description-grid p {
  font-size: .875rem;
  margin: 0;
  line-height: 1.35;
}

/* Desktop overlay on hover/focus */
@media (min-width: 992px) {
  .description.description-grid {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: .5rem .75rem;
    background: var(--overlay);
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .img-wrap:hover .description.description-grid,
  .img-wrap:focus .description.description-grid {
    opacity: 1;
    transform: translateY(0);
  }
}

/* spacing for grid items if template grid lacks bottom gap */
.grid .grid-item { margin-bottom: 20px; }

/* ===== Contact Table — centered, no outer border, title row ===== */

.contact-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;        /* overridden in .dark below */
  color: #222;
  margin-top: 1rem;
  border: 0;               /* remove outer border -> fixes stray line */
}

/* show caption on mobile only (so title is visible when thead is hidden) */
.contact-table caption {
  text-align: center;
  font-weight: 700;
  padding: 12px 16px;
  display: none;
}

.contact-table th,
.contact-table td {
  padding: 16px;
  vertical-align: top;
  text-align: center;      /* center both headers and body cells */
  border: 1px solid #ddd;  /* cell borders only */
}

.contact-table thead th {
  font-weight: 700;
}

/* full-width title row inside table */
.contact-table .contact-title {
  font-size: 1rem;
  letter-spacing: .2px;
}

/* Dark section variant */
.dark .contact-table {
  background: transparent;
  color: #e9e9e9;
}
.dark .contact-table th,
.dark .contact-table td {
  border-color: rgba(255,255,255,.16);
}
.dark .contact-table a { color: var(--accent); }

/* Responsive stacking */
@media (max-width: 640px) {
  .contact-table,
  .contact-table thead,
  .contact-table tbody,
  .contact-table th,
  .contact-table td,
  .contact-table tr {
    display: block;
    width: 100%;
  }

  /* hide table title row on mobile; use caption instead */
  .contact-table .contact-title { display: none; }
  .contact-table caption { display: block; }

  .contact-table thead {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }

  .contact-table td {
    border-top: 0; /* prevent double borders while stacked */
    padding: 12px 16px 16px;
    text-align: left; /* nicer reading on phones */
  }

  .contact-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: inherit;
  }
}


/* ---------------------------
   Dark Section Overrides
   Use when the table sits inside a .dark section.
   --------------------------- */

.dark .contact-table {
  background: transparent;                    /* remove white card */
  color: #e9e9e9;
  border-color: rgba(255,255,255,.16);
}
.dark .contact-table caption { color: #e9e9e9; }
.dark .contact-table thead th {
  color: #f2f2f2;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.dark .contact-table th + th,
.dark .contact-table td + td {
  border-left: 1px solid rgba(255,255,255,.16);
}
.dark .contact-table tbody td {
  border-top: 1px solid rgba(255,255,255,.08);
}
.dark .contact-table a {
  color: var(--accent);
  text-decoration: none;
}
.dark .contact-table a:hover,
.dark .contact-table a:focus { text-decoration: underline; }

@media (max-width: 640px) {
  .dark .contact-table tr { border-top: 1px solid rgba(255,255,255,.16); }
  .dark .contact-table td { border-left: 0; border-top: 0; }
  .dark .contact-table td::before { color: #fff; }
}

/* ---------------------------
   Minor utility helpers
   --------------------------- */

img[loading="lazy"] { background: #f7f7f7; } /* prevent flash before load */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #2aa1ff;
  outline-offset: 2px;
  border-radius: 2px;
}