/* ==========================================================================
   NG PRODUCTION FILMS — WordPress layer
   --------------------------------------------------------------------------
   Everything the demo never had to style, because it had no WordPress output:
   editor content on the pages and posts nobody redesigned, Ninja Forms,
   pagination, the search form, and the admin bar.

   assets/styles.css stays byte-identical to the demo so design changes can be
   copied straight across (tools/build-theme.py does exactly that). Nothing in
   this file redefines a design token; it only maps WordPress markup onto the
   type, spacing and colour already defined there.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Admin bar
   --------------------------------------------------------------------------
   WordPress pushes the whole document down by the admin bar's height for
   logged-in users. The sticky header has to start below it or it hides
   underneath — which matters here because the theme is reviewed by admins in
   the theme preview before launch. */

body.admin-bar .nav { top: 32px }

@media screen and (max-width: 782px) {
  /* Below 782px WordPress makes the bar 46px tall and stops it being fixed. */
  body.admin-bar .nav { top: 46px }
}

/* --------------------------------------------------------------------------
   2. Editor content  (.entry-content)
   --------------------------------------------------------------------------
   Used by page.php for the 33 live pages the redesign did not cover, and by
   single.php for the 578 posts. Pages built with WPBakery bring their own
   markup and their own plugin stylesheet; these rules style the plain HTML
   underneath it and never fight a builder row. */

.entry-content {
  max-width: 820px;
  color: #c7cedb;
  font-size: 17px;
  line-height: 1.75;
}

.entry-content > * + * { margin-top: 1.1em }

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-top: 1.9em;
  margin-bottom: .55em;
}

.entry-content h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800 }
.entry-content h3 { font-size: clamp(21px, 2.2vw, 26px); font-weight: 700 }
.entry-content h4 { font-size: 19px; font-weight: 700 }

.entry-content a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .25s var(--ease-out), text-decoration-thickness .25s var(--ease-out);
}

.entry-content a:hover,
.entry-content a:focus-visible { color: var(--accent); text-decoration-thickness: 2px }

.entry-content strong { color: var(--text) }

.entry-content ul,
.entry-content ol { padding-left: 22px }
.entry-content li + li { margin-top: .4em }
.entry-content li::marker { color: var(--accent) }

.entry-content blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--text);
}

.entry-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aeb6c3;
}

.entry-content img,
.entry-content iframe,
.entry-content video {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.entry-content figure { margin: 1.6em 0 }

.entry-content figcaption,
.entry-content .wp-caption-text {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.entry-content hr {
  height: 1px;
  border: 0;
  margin: 2.4em 0;
  background: var(--line);
}

.entry-content code,
.entry-content kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--panel2);
}

.entry-content pre {
  overflow-x: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.entry-content pre code { padding: 0; background: none }

/* Tables can outrun a phone; they scroll inside their own box rather than
   widening the page. */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.entry-content th,
.entry-content td {
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.entry-content th { color: var(--text); font-weight: 700 }

/* WordPress alignment classes. */
.entry-content .aligncenter { display: block; margin-inline: auto }
.entry-content .alignleft { float: left; margin: 0 24px 18px 0 }
.entry-content .alignright { float: right; margin: 0 0 18px 24px }
.entry-content .alignwide { width: min(100%, 1100px) }
.entry-content .alignfull { width: 100% }

@media (max-width: 700px) {
  .entry-content .alignleft,
  .entry-content .alignright { float: none; margin: 1.2em 0 }
}

/* The post's own lead image, above the copy. */
.article-hero-image { margin-bottom: 34px }

.entry-foot { margin-top: 40px }

/* --------------------------------------------------------------------------
   3. Ninja Forms
   --------------------------------------------------------------------------
   The plugin ships its own markup, so these rules map it onto the demo's form
   styling. Scoped to .ng-form so a form placed anywhere else keeps the
   plugin's defaults. */

/* The card. In the design .quick-form IS the <form> element, with the panel
   on it. Here the plugin owns the form, so the panel goes on the wrapper
   the theme prints around the shortcode: template-parts/cta.php for the
   closing band, blocks/form/render.php for the contact page. */
.ng-form {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(13, 17, 24, .84);
  box-shadow: 0 35px 80px rgba(0, 0, 0, .3);
}

/* On the contact page the design's form carries .form as well as
   .quick-form, and .form adds a 36px top margin, so the card starts lower
   than the heading beside it. The closing band's form has no .form class
   and no margin, which is why this is scoped to the block's section. */
[data-section="form"] .ng-form { margin-top: 36px }

.ng-form .nf-form-content { padding: 0; max-width: none }

/* Two across, which the plugin cannot do on its own.
   -------------------------------------------------
   Free Ninja Forms draws one field per line: rows and cells are the paid
   Layout & Styles add-on. The design puts Name beside Email, so the grid is
   ours. Which fields are half width is set per field in the builder, under
   CSS Classes, as `ng-half`, rather than being listed by field type here:
   NG can rearrange his own form without a developer, and a form that says
   nothing still comes out one per line, which is the plugin's own default.

   nf-field is display:contents so the grid items are the containers that
   carry that class. ⚠ If the Layout & Styles add-on is ever installed, the
   plugin starts drawing its own rows and cells and this block should go. */
.ng-form .nf-form-content nf-fields-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ng-form .nf-form-content nf-field { display: contents }

.ng-form .nf-field-container {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.ng-form .nf-field-container.ng-half { grid-column: span 1 }

/* The plugin's own "Fields marked with an * are required" line. The design
   has nothing there and the card is 32px shorter without it, so it is moved
   off screen rather than removed: a screen reader still reads it, and the
   asterisk it explains is still beside every label it applies to. */
.ng-form .nf-form-fields-required {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The plugin puts 10px under the label block and another 8 under the label
   itself; the design has one 8px gap. Four classes deep because the rule
   being beaten, .nf-form-content .label-above .nf-field-label, is three,
   and the plugin's stylesheet may load after this one. */
.ng-form .nf-form-content .label-above .nf-field-label { margin: 0 }

/* An empty character-limit line still carries a 5px top margin. */
.ng-form .nf-input-limit:empty { display: none }

.ng-form .nf-field-label label {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c3cad5;
}

.ng-form .nf-field-label .ninja-forms-req-symbol { color: var(--accent) }

.ng-form input[type="text"],
.ng-form input[type="email"],
.ng-form input[type="tel"],
.ng-form input[type="url"],
.ng-form input[type="number"],
.ng-form select,
.ng-form textarea {
  width: 100%;
  background: #0c1119;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #fff;
  padding: 16px;
  font: inherit;
  transition: border-color .2s, box-shadow .2s;
}

/* Inside the card the inputs go a shade darker than the page, and the
   message box is shorter than a full-page one: .quick-form in the design. */
.ng-form input[type="text"],
.ng-form input[type="email"],
.ng-form input[type="tel"],
.ng-form input[type="url"],
.ng-form input[type="number"],
.ng-form select,
.ng-form textarea { background: #080c12 }

/* The plugin hard-codes height:200px on its textareas. The design's message
   box inside the card is 112. */
.ng-form textarea,
.ng-form .nf-field-element textarea {
  min-height: 112px;
  height: 112px;
  /* An inline textarea sits on the text baseline and leaves six pixels of
     descender space under it. The design's fields are flex columns and
     never showed it. */
  display: block;
}

.ng-form input:focus,
.ng-form select:focus,
.ng-form textarea:focus {
  outline: none;
  border-color: rgba(244, 185, 66, .55);
  box-shadow: 0 0 0 3px rgba(244, 185, 66, .12);
}

/* The same geometry as .btn.primary in the design: padding, border and the
   inherited type size. Guessed numbers here read as a different button on
   the one page where both appear. */
.ng-form input[type="button"],
.ng-form input[type="submit"],
.ng-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 13px 19px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: #090b10;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out),
              color .25s var(--ease-out), transform .25s var(--ease-out);
}

.ng-form input[type="submit"]:hover,
.ng-form button[type="submit"]:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b0d12;
  transform: translateY(-2px);
}

@media (max-width: 700px) {
  .ng-form { padding: 20px }
  .ng-form .nf-field-container.ng-half { grid-column: 1 / -1 }
}

/* The plugin's own error and success states, in this palette.
   ⚠ The two border rules carry !important because the plugin's do: it
   paints #e80000 on a field in error and, less expectedly, green on every
   field that passes. Neither colour is in this design. */
.ng-form .nf-error-msg,
.ng-form .ninja-forms-field-error { color: #f0a07f; font-size: 13px; margin-top: 7px }
.ng-form .nf-error .ninja-forms-field,
.ng-form .nf-error .nf-field-element input,
.ng-form .nf-error .nf-field-element textarea,
.ng-form .nf-error .nf-field-element select { border-color: rgba(240, 160, 127, .6) !important }
.ng-form .nf-pass .ninja-forms-field { border-color: var(--line) !important }

.ng-form .nf-response-msg,
.ng-form .nf-form-success-msg {
  padding: 18px;
  border: 1px solid rgba(111, 207, 151, .35);
  border-radius: 10px;
  background: rgba(111, 207, 151, .09);
  color: #dff3e6;
}

/* --------------------------------------------------------------------------
   4. Pagination and search
   -------------------------------------------------------------------------- */

.navigation.pagination {
  display: flex;
  justify-content: center;
  margin-top: 46px;
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #dfe6ef;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out);
}

.navigation.pagination .page-numbers:hover { border-color: rgba(255, 255, 255, .34); background: #0d121a }

.navigation.pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: #090b10;
}

.navigation.pagination .page-numbers.dots { border-color: transparent }

.page-links { margin-top: 26px; display: flex; gap: 8px; align-items: center }

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 520px;
}

.search-form label { flex: 1 1 240px }

.search-form .search-field {
  width: 100%;
  background: #0c1119;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #fff;
  padding: 14px 20px;
  font: inherit;
}

.search-form .search-field:focus {
  outline: none;
  border-color: rgba(244, 185, 66, .55);
  box-shadow: 0 0 0 3px rgba(244, 185, 66, .12);
}

.search-form .search-submit {
  padding: 14px 24px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: #090b10;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}

.search-form .search-submit:hover { background: var(--accent); border-color: var(--accent) }

/* --------------------------------------------------------------------------
   5. Article cards without a featured image
   --------------------------------------------------------------------------
   The demo always had one. A post with none must not collapse, so the body
   carries the card on its own. */

.article-card:not(:has(.article-media)) .article-body { min-height: 260px }

/* Older posts often have no excerpt and no image; the reading time keeps the
   meta row from reading as a lone date. */
.article-time { color: #8190a4 }