/*
 Theme Name:   Oilfield Pros
 Theme URI:    https://www.oilfieldpros.com/
 Description:  Child theme for the Oilfield Pros directory rebuild. The design system
               is carried over verbatim from the live PHP site so the eventual swap
               changes neither the URLs nor the look. Layout is built in Bricks; data
               rendering lives in mu-plugins as shortcodes, never here.
 Author:       Basin Hosting
 Author URI:   https://basinhosting.com/
 Template:     bricks
 Version:      0.2.0
 Text Domain:  oilfieldpros
*/

/* The design system itself is assets/design-system.css, an exact copy of the live
   site's assets/style.css. Keep it that way: edits belong upstream until the swap
   happens, or the two sites drift apart and the swap stops being seamless.

   This file is for WordPress-only corrections - things the PHP site never had to
   deal with, like Bricks' own wrappers and the admin bar. */

/* Bricks wraps page content in #brx-content. The live site's <main> carries no
   styling of its own, so this only has to not fight the design system. */
#brx-content { display: block; }

/* The live header is fixed-position over a hero on some pages; with the WordPress
   admin bar present that would sit under it. */
body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* Bricks requires every template's root element to be a section, but the
   shortcodes below emit the live site's own <section> markup. display:contents
   removes the redundant Bricks wrapper from the box model, so the rendered page
   matches the live one element for element while the builder still shows an
   editable structure. */
.op-bare { display: contents; }

/* The article and page reading column.
   The live stylesheet sets .reading to 76rem. On the rebuild's wider page furniture
   that reads tight, so it is widened here rather than edited upstream - the design
   system file stays a byte-for-byte copy of the live one, which is what keeps the
   two comparable at swap time. */
.reading { max-width: 88rem; }

/* Admin edit link on a company profile.
   edit_post_link() renders nothing for a visitor who cannot edit, so this styling
   is only ever seen signed in. Deliberately quiet: it sits above the contact card
   without competing with the phone number, which is what the page is for. */
.op-editlink { margin: 0 0 var(--space-s); }
.op-editlink__a {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px dashed var(--border-primary);
  border-radius: var(--radius-s);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-surface);
}
.op-editlink__a:hover { color: var(--primary); border-color: var(--primary); }


/* The Directory Report band.
   Trimmed on request: smaller heading, tighter field and button, less section
   padding. Overrides live here rather than in design-system.css, which stays a
   byte-for-byte copy of the live stylesheet. */
.newsletter__inner { padding-block: var(--space-l); }
.newsletter__title { font-size: var(--text-l); }
.newsletter__note { font-size: var(--text-s); }
.newsletter__input { padding: 0.9rem 1.4rem; font-size: var(--text-s); }
.newsletter__btn { padding: 0.9rem 2rem; font-size: var(--text-s); }

/* Event cards beside a sidebar.
   The live .evgrid goes two-up above 760px, which is right on the live events page
   because it is full width. This one sits in .termlayout__main next to a 26rem
   sidebar, so two-up leaves each card too narrow to read. One per row until the
   viewport is genuinely wide enough for two of them AND the sidebar. */
.termlayout__main .evgrid { grid-template-columns: 1fr; }
@media (min-width: 1500px) {
  .termlayout__main .evgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Event imagery.
   The organiser's flyer, shown on the event page, the calendar card and the home
   strip. .evcard and .ev are FLEX, not grid, so the image is sized as a flex item -
   a grid-template-columns rule here does nothing at all. */
.evcover { margin: 0 0 var(--space-l); }
.evcover__img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-primary);
}
.evcard__img { flex: none; width: 14rem; align-self: stretch; overflow: hidden; display: block; }
.evcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev__img { flex: none; width: 9rem; align-self: stretch; overflow: hidden; display: block; border-radius: var(--radius-s); }
.ev__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .evcard--img, .ev--img { grid-template-columns: auto 1fr; }
  .evcard__img, .ev__img { display: none; }
}

/* Textarea height.
   The design system sets .field__textarea to a 14rem minimum. Four of those stacked
   on the event form pushes the submit button off the screen, and even one is more
   empty box than anyone needs to start typing into. Three or four lines, and the
   control still resizes for anyone who wants more. */
.field__textarea { min-height: 6rem; }
.field__textarea--compact { min-height: 5rem; }

/* Contact Form 7 with autop off leaves the field markup alone, so the field's own
   spacing applies. These two only exist because CF7 wraps its control in a span. */
.field .wpcf7-form-control-wrap { display: block; }
.field .wpcf7-not-valid-tip { font-size: var(--text-xs); color: var(--primary-bright); font-weight: 600; margin-top: 0.4rem; display: block; }

/* Sidebar width.
   The live layout gives the aside 26rem, which was sized for the Refine lists on a
   category page - short label, small count. The shared sidebar carries article
   titles and a call to action, and those wrap badly at 26rem. 30rem, and the main
   column still holds a listing row comfortably. */
@media (min-width: 900px) {
  .termlayout { grid-template-columns: minmax(0, 1fr) 30rem; }
}

/* Footer legal line.
   The design system gives .footer__legal-left a column gap of --space-l, which is
   sized for two independent blocks. Here it separates a copyright, a middot and the
   "Made in Texas" mark, and the middot ends up floating a long way from both. The
   smaller gap keeps them reading as one sentence. */
.footer__legal-left { gap: var(--space-s) var(--space-s); }

/* Select arrows.
   Bricks' frontend layer sets `select { appearance: none }` and draws its own
   chevron with two background gradients. The design system then sets
   `background: var(--bg-body)` on .field__select - the shorthand, which resets
   background-image to none. Bricks' arrow is wiped, and the native one cannot come
   back because appearance is still none. So every dropdown on the site rendered as
   a plain box with no affordance at all.

   Drawn here explicitly rather than by unsetting Bricks: an own arrow cannot be
   removed again by a theme update, and it can match the design system's ink. */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.4rem center;
  background-size: 1.2rem 0.8rem;
}
.field__select:disabled { opacity: 0.6; }

/* Checkboxes inside Contact Form 7.
   The design system styles `<label class="check">`, which is what the live forms
   emit. CF7 emits its own nesting instead - a wrapper span, a label, the input,
   then a label span - so the terms and newsletter boxes were the only unstyled
   controls on the site: no alignment between box and text, and the text sat on its
   own line. This maps CF7's markup onto the same rule rather than restyling it. */
.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-acceptance .wpcf7-list-item { margin: 0; display: block; }
.wpcf7-checkbox .wpcf7-list-item label,
.wpcf7-acceptance .wpcf7-list-item label {
  display: flex; gap: 0.8rem; align-items: baseline; font-size: var(--text-s); cursor: pointer;
}
.wpcf7-checkbox .wpcf7-list-item input[type="checkbox"],
.wpcf7-acceptance .wpcf7-list-item input[type="checkbox"] {
  width: 1.6rem; height: 1.6rem; accent-color: var(--primary); flex: none; transform: translateY(0.2rem);
}
.wpcf7-list-item-label { display: block; }