/* ==========================================================================
   WordPress + Bricks adjustments (only in the theme, not in the prototype).
   Bricks defaults: html{font-size:62.5%}, containers 1100px wide flex columns,
   blocks flex columns with align-items:flex-start. All theme sizes are in px,
   so the 62.5% root size does not affect the design.
   ========================================================================== */

/* ---------- Header & footer wrappers ---------- */
#brx-header { position: sticky; top: 0; z-index: 100; }
#brx-header .na-header { position: relative; }
#brx-header .na-header--overlay { position: fixed; inset: 0 0 auto; }
.admin-bar #brx-header, .admin-bar #brx-header .na-header--overlay { top: 32px; }
@media (max-width: 782px) { .admin-bar #brx-header, .admin-bar #brx-header .na-header--overlay { top: 46px; } }
@media (max-width: 600px) { .admin-bar #brx-header, .admin-bar #brx-header .na-header--overlay { top: 0; } }
#brx-footer { margin-top: auto; }

/* ---------- Naveed Awan elements always use the full width of their container ---------- */
.na-el { width: 100%; }
.brxe-na-hero { width: 100%; }

/* ---------- Native Bricks layout elements with theme classes ---------- */
.brxe-section.na-section,
.brxe-section.na-page-head { align-items: stretch; }
.brxe-container.na-container,
.brxe-container.na-container--wide,
.brxe-container.na-container--narrow { align-items: stretch; flex-wrap: nowrap; }
.brxe-container.na-intro,
.brxe-container.na-about,
.brxe-container.na-contact,
.brxe-container.na-cta { display: grid; }
.brxe-block.na-section-head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
.na-section-head > .brxe-block { width: auto; }
.na-section-head .brxe-heading { margin: 0; }
.brxe-block.na-cta__actions,
.brxe-container.na-cta__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.brxe-block.na-cta__text { width: auto; }
.brxe-block.na-center,
.brxe-block.na-center-row { align-items: center; width: 100%; margin-top: 36px; }
.na-section--gallery { padding-top: 0; }

/* ---------- v2: language switch, 360° ---------- */
#brx-header .na-lang { margin-left: 4px; }
.na-el-pano-teaser,
.brxe-na-pano-teaser { width: 100%; }
.brxe-block.na-about__aside { width: auto; }
.brxe-text.na-prose > :first-child { margin-top: 0; }
.brxe-text.na-prose { width: 100%; }

/* Bricks buttons that carry theme classes */
.bricks-button.na-btn { letter-spacing: 0.08em; }
.bricks-button.na-link-arrow { padding: 0; min-height: 0; border: 0; background: none; letter-spacing: 0.08em; }

/* ---------- Photo header built from a Bricks image element ---------- */
.brxe-section.na-page-hero { display: grid; align-items: end; }
.na-page-hero > .na-page-hero__img,
.na-page-hero > .brxe-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; margin: 0; }
img.na-page-hero__img,
.na-page-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.na-page-hero .na-page-hero__content { z-index: 1; }

/* Portrait image element on the about page */
.brxe-image.na-about__portrait,
.na-about__portrait img { width: 144px; height: 144px; border-radius: 50%; object-fit: cover; }

/* ---------- Bricks form with the class "na-form" (contact page) ---------- */
.brxe-form.na-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; padding: clamp(20px, 3vw, 40px); background: var(--na-mist); border-top: 4px solid var(--na-yellow); }
.na-form .form-group { padding: 0 8px 18px 0; }
.na-form label { display: block; margin-bottom: 6px; color: var(--na-ink); font-family: var(--na-font-display); font-size: 15.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.na-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.na-form textarea,
.na-form select { width: 100%; padding: 13px 15px; border: 1.5px solid var(--na-line-strong); border-radius: var(--na-radius); background: #fff; color: var(--na-text); font-family: var(--na-font-body); font-size: 16px; line-height: 1.5; }
.na-form textarea { min-height: 160px; resize: vertical; }
.na-form input:focus-visible,
.na-form textarea:focus-visible,
.na-form select:focus-visible { border-color: var(--na-ink); outline: none; box-shadow: 0 0 0 4px var(--na-yellow); }
.na-form .options-wrapper label,
.na-form input[type="checkbox"] + label { display: inline; font-family: var(--na-font-body); font-size: 14.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.na-form input[type="checkbox"] { width: 19px; height: 19px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--na-ink); }
.na-form button[type="submit"],
.na-form .bricks-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border: 2px solid transparent; border-radius: var(--na-radius);
  background: var(--na-yellow); color: var(--na-ink);
  font-family: var(--na-font-display); font-size: 17px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
}
.na-form button[type="submit"]:hover,
.na-form .bricks-button:hover { background: var(--na-ink); color: var(--na-yellow); }
.na-form .message { width: 100%; margin-top: 12px; padding: 12px 16px; border-radius: var(--na-radius); background: #e3f7e6; color: #1d5b2a; font-family: var(--na-font-mono); font-size: 13px; }
.na-form .message.error { background: #fde8e8; color: #8a1c1c; }

/* ---------- WordPress content inside posts ---------- */
.na-prose .wp-block-image,
.na-prose figure { margin-block: 32px; }
.na-prose figcaption { margin-top: 8px; color: var(--na-muted); font-family: var(--na-font-mono); font-size: 12.5px; letter-spacing: 0.04em; }
.na-prose .wp-block-quote { margin-inline: 0; }
.na-prose .alignwide,
.na-prose .alignfull { max-width: none; }

/* Pagination (blog archive) */
.navigation.pagination { margin-top: 56px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.navigation.pagination .page-numbers { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; padding: 0 14px; border-radius: var(--na-radius); background: var(--na-mist); color: var(--na-ink); text-decoration: none; font-family: var(--na-font-display); font-size: 17px; font-weight: 600; }
.navigation.pagination .page-numbers.current { background: var(--na-yellow); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Bricks skip link in brand colours */
.skip-link:focus, .bricks-skip-link:focus { background: var(--na-yellow); color: var(--na-ink); }

/* ==========================================================================
   Gallery plugin "NA Folder Gallery" in the colours and fonts of naveedawan.com
   (a Bricks element can still change every value in its Style tab)
   ========================================================================== */
:root {
  --nafg-accent: var(--na-yellow);
  --nafg-accent-text: var(--na-ink);
  --nafg-ink: var(--na-ink);
  --nafg-muted: var(--na-muted);
  --nafg-line: var(--na-line);
  --nafg-line-strong: var(--na-line-strong);
  --nafg-chip-bg: var(--na-mist);
  --nafg-tile-bg: var(--na-mist);
  --nafg-radius: var(--na-radius);
  --nafg-gap: var(--na-gallery-gap);
  --nafg-font-title: var(--na-font-display);
  --nafg-font-meta: var(--na-font-mono);
  --nafg-sticky-top: var(--na-header-h);
  --nafg-gutter: var(--na-gutter);
  --nafg-pano-badge: var(--na-blue);
  --nafg-link: var(--na-blue-deep);
  --nafg-dark: var(--na-board);
  --nafg-lightbox-text: var(--na-on-dark);
  --nafg-lightbox-muted: var(--na-on-dark-muted);
  --nafg-ease: var(--na-ease);
}
.brxe-nafg-gallery, .brxe-nafg-pano, .brxe-nafg-folders { width: 100%; }
.nafg-folders .nafg-folder__name { letter-spacing: 0.01em; }
.na-intro__me--text { grid-template-columns: 1fr; }
.na-contact__privacy { margin-top: 24px; }
.na-contact__privacy a { color: inherit; text-decoration: underline; text-decoration-color: var(--na-yellow); text-underline-offset: 3px; }