/* ═══════════════════════════════════════════════════════════════════════════
   GTA TV Wall Mounting — base stylesheet.

   Replaces the two Hello Elementor theme stylesheets that used to load on every
   page of this site:

     /assets/css/theme/hello-elementor/assets/css/reset.css@ver=3.4.6.css
     /assets/css/theme/hello-elementor/assets/css/theme.css@ver=3.4.6.css

   ── WHY IT WAS REPLACED RATHER THAN JUST DELETED ───────────────────────────
   reset.css is a normalize layer, and the site leans on it hard. Measured on
   2026-09-14 by toggling both stylesheets off in a real browser on all 101
   published URLs and diffing every computed property of every element:
   191,540 differences. The load-bearing ones are box-sizing: border-box
   (4,879 elements, plus every width and height that follows from it),
   img { max-width: 100% } (2,170), the list reset that zeroes ul/ol/li margins
   (7,999 outline + margin diffs), p and h1-h6 margins, the whole table layer,
   the button and form-control layer, and figcaption's italics. Deleting
   reset.css outright would have broken the layout of every page on the site.

   theme.css was the opposite: almost all of it is WordPress furniture with no
   markup behind it here. Of its rules, exactly four match anything this site
   renders — they are kept in section 9 below and the rest is gone: comment
   threads, pingbacks, the post-password form, wp-caption, gallery-caption,
   pagination, .sticky, .bypostauthor, .hide, .alignwide/.alignfull/.alignleft/
   .alignright, .post .wp-post-image, .page-header, .site-header/.site-footer
   inner wrappers, and `.site-header + .elementor`. Verified by extracting every
   class= attribute across all 101 rendered pages and intersecting with the
   stylesheet's selectors; none of the above appears in the markup.

   ── THE ONE DELIBERATE BEHAVIOUR CHANGE ────────────────────────────────────
   theme.css also carried:

     body:not([class*=elementor-page-]) .site-main {
       max-width: 1140px  (>=1200px)  /  800px (>=992px)  /  600px (>=768px)
                                      /  500px (>=576px)
     }

   That is NOT reproduced here, on purpose. It clamped any page whose <main>
   carried `site-main` — stopping full-bleed bands short with white gutters and
   squeezing the content to 800px on a laptop. Fourteen pages were affected.
   They now render edge to edge like every other page on the site. If a page
   ever needs a narrower column again, give it a page-scoped max-width rather
   than reviving a theme-wide clamp.

   ── WHAT THE COLOURS IN HERE ARE ───────────────────────────────────────────
   #c36 / #336 / #333 are Hello Elementor's own defaults, carried over verbatim
   so the cascade is byte-for-byte what it was. They are inert: a sweep of all
   101 pages for computed rgb(204,51,102) and rgb(51,51,102) on colour,
   background-color and border-colour returned zero elements — the Elementor
   kit and this site's own scoped components cover every link and button that
   is actually rendered. They are the fallback for anything unstyled, not part
   of the brand palette. Brand values live in DESIGN_LANGUAGE.md.

   Rule ORDER below is the original order of the two files, concatenated in the
   order they used to load (reset then theme). Several rules here tie on
   specificity with rules in the Elementor kit and in the scoped component
   stylesheets, so re-ordering this file can change what wins. Don't sort it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. document ────────────────────────────────────────────────────────── */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
*, ::after, ::before { box-sizing: border-box; }
body {
  background-color: #fff;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 2. prose ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: inherit;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  margin-block-end: 1rem;
  margin-block-start: .5rem;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p { margin-block-end: .9rem; margin-block-start: 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; }

/* ── 3. links and inline elements ───────────────────────────────────────── */
a { background-color: transparent; color: #c36; text-decoration: none; }
a:active, a:hover { color: #336; }
a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; }
a:not([href]):not([tabindex]):focus { outline: 0; }
abbr[title] { border-block-end: none; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }

/* ── 4. media and disclosure ────────────────────────────────────────────── */
img { border-style: none; height: auto; max-width: 100%; }
details { display: block; }
summary { display: list-item; }
figcaption { color: #333; font-size: 16px; font-style: italic; font-weight: 400; line-height: 1.4; }
[hidden], template { display: none; }

/* ── 5. print ───────────────────────────────────────────────────────────── */
@media print {
  *, ::after, ::before { background: transparent !important; box-shadow: none !important; color: #000 !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; }
  abbr[title]::after { content: " (" attr(title) ")"; }
  a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
  pre { white-space: pre-wrap !important; }
  blockquote, pre { -moz-column-break-inside: avoid; border: 1px solid #ccc; break-inside: avoid; }
  thead { display: table-header-group; }
  img, tr { -moz-column-break-inside: avoid; break-inside: avoid; }
  h2, h3, p { orphans: 3; widows: 3; }
  h2, h3 { -moz-column-break-after: avoid; break-after: avoid; }
}

/* ── 6. form controls ───────────────────────────────────────────────────── */
label { display: inline-block; line-height: 1; vertical-align: middle; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; }
input[type=date], input[type=email], input[type=number], input[type=password],
input[type=search], input[type=tel], input[type=text], input[type=url],
select, textarea {
  border: 1px solid #666;
  border-radius: 3px;
  padding: .5rem 1rem;
  transition: all .3s;
  width: 100%;
}
input[type=date]:focus, input[type=email]:focus, input[type=number]:focus,
input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus,
input[type=text]:focus, input[type=url]:focus, select:focus, textarea:focus { border-color: #333; }
button, input { overflow: visible; }
button, select { text-transform: none; }
[type=button], [type=reset], [type=submit], button { -webkit-appearance: button; width: auto; }
[type=button], [type=submit], button {
  background-color: transparent;
  border: 1px solid #c36;
  border-radius: 3px;
  color: #c36;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  padding: .5rem 1rem;
  text-align: center;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}
[type=button]:focus:not(:focus-visible), [type=submit]:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover { background-color: #c36; color: #fff; text-decoration: none; }
[type=button]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; }
fieldset { padding: .35em .75em .625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; resize: vertical; }
[type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px; }
[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
select { display: block; }

/* ── 7. tables ──────────────────────────────────────────────────────────── */
table {
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: .9em;
  margin-block-end: 15px;
  width: 100%;
}
table td, table th { border: 1px solid rgba(128, 128, 128, .502); line-height: 1.5; padding: 15px; vertical-align: top; }
table th { font-weight: 700; }
table tfoot th, table thead th { font-size: 1em; }
table caption + thead tr:first-child td, table caption + thead tr:first-child th,
table colgroup + thead tr:first-child td, table colgroup + thead tr:first-child th,
table thead:first-child tr:first-child td, table thead:first-child tr:first-child th { border-block-start: 1px solid rgba(128, 128, 128, .502); }
table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { background-color: rgba(128, 128, 128, .071); }
table tbody tr:hover > td, table tbody tr:hover > th { background-color: rgba(128, 128, 128, .102); }
table tbody + tbody { border-block-start: 2px solid rgba(128, 128, 128, .502); }
@media (max-width: 767px) {
  table table { font-size: .8em; }
  table table td, table table th { line-height: 1.3; padding: 7px; }
  table table th { font-weight: 400; }
}

/* ── 8. lists ───────────────────────────────────────────────────────────── */
dd, dl, dt, li, ol, ul {
  background: transparent;
  border: 0;
  font-size: 100%;
  margin-block-end: 0;
  margin-block-start: 0;
  outline: 0;
  vertical-align: baseline;
}

/* ── 9. the four rules kept from the old theme stylesheet ───────────────────
   Each one is here because markup on this site matches it:
     .page-content a  — /service-areas/ wraps its content in .page-content
     .aligncenter     — 15 blog posts centre an inline image with it
     .screen-reader-text — the "Skip to content" link on all 101 pages; this is
                        what keeps it out of sight but still reachable by
                        keyboard, so it is an accessibility rule, not cosmetics
     .post .entry-title a — /blog/ card headings
   Everything else in theme.css matched nothing and is gone. */
.comments-area a, .page-content a { text-decoration: underline; }
.aligncenter { clear: both; display: block; margin-inline: auto; }
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #333;
  display: block;
  font-size: 1rem;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 12px 24px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}
.post .entry-title a { text-decoration: none; }

/* ── 10. one carry-over from the removed width clamp ────────────────────────
   NOT part of the normalize layer. This is here because removing the theme
   changed one thing that was not an improvement.

   The ten /projects/ write-ups embed Photonic plugin galleries. Photonic lays
   a gallery out as a wrapping flex row, and a row only stretches its figures
   when it has enough of them to wrap — a gallery of two or three photos just
   sits at natural size and leaves whatever is left over as empty space on the
   right. Those galleries were authored inside the old 1140px `.site-main`
   clamp, i.e. an 1100px content box, and the leftover gutter was already
   visible there (measured 2026-09-14: the Frame TV gallery's three 150px
   thumbnails ended at x=944 inside an 1100px box). Widening the page to 1240px
   did not break them, but it did make that gutter 140px wider on four pages.

   So the gallery component alone keeps the width it was laid out for. Every
   other band on those pages goes full width. Verified: with this rule the
   computed geometry of every element inside .photonic-level-1-container is
   identical to what the theme produced.

   Real Photonic gallery markup exists ONLY on the ten /projects/ pages — every
   other page that mentions these class names does so inside a leftover inline
   <style> block, with no gallery in the markup — so this selector needs no
   further scoping. Checked across all 101 published URLs.

   The underlying one-sided gutter is a pre-existing Photonic layout weakness,
   not something this rule fixes. Fixing it properly means centring short rows
   or replacing these galleries with includes/gallery-grid.php. */
.photonic-level-1-container { max-width: 1100px; }