/*
Theme Name: Brayford
Theme URI: https://example.com/brayford
Author: Two Shores Online
Author URI: https://twoshoresonline.com
Description: A classic WordPress theme for construction firms — general contractors doing commercial and residential work. Video hero, project case studies with a during/after slider, service pages with real delivery detail, and a built-in enquiry form. No plugin dependencies: post types, meta boxes, theme options and the form handler all live in the theme.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brayford
Tags: construction, business, custom-logo, custom-menu, featured-images, theme-options, translation-ready

All layout styles live in assets/css/site.css. This file carries the theme
header and the WordPress-specific classes core expects a theme to style.
*/

/* --------------------------------------------------------------------------
   WordPress core classes
   -------------------------------------------------------------------------- */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.screen-reader-text:focus{
  position:fixed !important; top:12px; left:12px; z-index:200;
  width:auto; height:auto; clip:auto; margin:0;
  padding:.9rem 1.3rem; background:var(--ink); color:var(--paper);
  font-size:.8rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
}

.alignleft{ float:left; margin:.4rem 1.6rem 1.2rem 0; }
.alignright{ float:right; margin:.4rem 0 1.2rem 1.6rem; }
.aligncenter{ display:block; margin-inline:auto; }
.alignwide{ width:min(100%,1100px); margin-inline:auto; }
.alignfull{ width:100%; }

.wp-caption{ max-width:100%; }
.wp-caption-text,
.wp-element-caption,
figcaption{ margin-top:.8rem; font-size:var(--fs-sm); color:var(--text-muted); }

.sticky{ position:relative; }
.bypostauthor{ display:block; }
.gallery-caption{ font-size:var(--fs-sm); color:var(--text-muted); }

.admin-bar .hdr{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .hdr{ top:46px; } }

/* --------------------------------------------------------------------------
   Editor / post content
   -------------------------------------------------------------------------- */
.entry-content{ max-width:var(--maxw-text); }
.entry-content > * + *{ margin-top:1.1em; }
.entry-content h2{ font-size:var(--fs-h2); margin-top:2.4em; }
.entry-content h3{ font-size:var(--fs-h3); margin-top:2em; }
.entry-content a{ border-bottom:1px solid var(--line); }
.entry-content a:hover{ color:var(--oxide); border-color:var(--oxide); }
.entry-content ul,
.entry-content ol{ padding-left:1.4em; }
.entry-content ul{ list-style:disc; }
.entry-content ol{ list-style:decimal; }
.entry-content li{ margin-bottom:.5em; }
.entry-content blockquote{
  margin:2em 0; padding-left:1.6rem; border-left:2px solid var(--oxide);
  font-family:var(--serif); font-size:1.35rem; line-height:1.34;
}
.entry-content img{ height:auto; }
.entry-content table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.entry-content th,
.entry-content td{ padding:.8rem 0; border-bottom:1px solid var(--line); text-align:left; }

/* --------------------------------------------------------------------------
   Pagination, form feedback, small additions
   -------------------------------------------------------------------------- */
.pager{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:clamp(40px,5vw,72px); }
.pager .page-numbers{
  min-width:44px; padding:.62rem .9rem; border:1px solid var(--line);
  text-align:center; font-size:var(--fs-xs); font-weight:600; letter-spacing:.1em;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pager .page-numbers:hover{ border-color:var(--ink); }
.pager .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.form__err{
  border:1px solid var(--oxide); border-left-width:3px; padding:1rem 1.2rem;
  font-size:var(--fs-sm); background:var(--paper-2);
}
.form__err ul{ margin:.5rem 0 0; padding-left:1.1rem; list-style:disc; }
.hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.tso__mark{ height:22px; width:auto; display:block; }

.ftr__legal li{ display:inline; margin:0; }
.ftr__legal li + li::before{ content:'·'; margin:0 .55rem; opacity:.55; }
.ftr__legal ul{ display:inline; }

.empty-state{ padding-block:clamp(40px,6vw,88px); border-top:1px solid var(--line); }

/* --------------------------------------------------------------------------
   Image placeholders

   The theme ships with no photography. Every image slot renders an obvious
   labelled box until you set a real image, so nothing looks "finished" by
   accident and you can see exactly what to drop where.
   -------------------------------------------------------------------------- */
.ph{
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.5rem; width:100%; min-height:120px;
  padding:1.4rem 1.2rem; text-align:center;
  background:
    repeating-linear-gradient(45deg,
      var(--paper-2) 0 12px, var(--paper-3) 12px 24px);
  border:2px dashed var(--oxide);
  color:var(--text-muted);
}
.ph::before{
  content:''; position:absolute; inset:6px; border:1px solid rgba(169,73,31,.28);
  pointer-events:none;
}
.ph__ico{ color:var(--oxide); flex:none; }
.ph__name{
  font-size:.82rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--oxide); line-height:1.3;
}
.ph__size{ font-size:var(--fs-xs); letter-spacing:.09em; font-variant-numeric:tabular-nums; }
.ph__where{ font-size:var(--fs-xs); line-height:1.45; max-width:34ch; }
.ph__where b{ color:var(--text); font-weight:600; }

/* on dark sections and over-image slots the box has to invert */
.sec--ink .ph,
.hero .ph,
.phero .ph,
.cta .ph{
  background:
    repeating-linear-gradient(45deg,
      #1B1D1E 0 12px, #232627 12px 24px);
  border-color:var(--oxide-lift);
  color:var(--text-on-ink-muted);
}
.sec--ink .ph::before,
.hero .ph::before,
.phero .ph::before,
.cta .ph::before{ border-color:rgba(194,90,42,.4); }
.sec--ink .ph__name,
.hero .ph__name,
.phero .ph__name,
.cta .ph__name{ color:var(--oxide-lift); }
.sec--ink .ph__where b,
.hero .ph__where b,
.phero .ph__where b,
.cta .ph__where b{ color:var(--text-on-ink); }

/* slots that fill a whole area rather than sitting in the flow */
.ph--fill{ position:absolute; inset:0; height:100%; }
.ph--sm{ min-height:0; padding:.7rem .5rem; gap:.25rem; }
.ph--sm .ph__name{ font-size:.6rem; letter-spacing:.1em; }
.ph--sm .ph__size,.ph--sm .ph__where,.ph--sm .ph__ico{ display:none; }

/* a video slot reads differently from a photo slot */
.ph--video{ border-style:solid; }

@media (max-width:680px){
  .ph__where{ display:none; }
}

/* the hero video slot marker, shown only when no video is set */
.hero-vid-slot{
  position:absolute; right:var(--gutter); top:clamp(96px,13vh,150px); z-index:4;
  width:min(320px,calc(100vw - var(--gutter) * 2));
}
.hero-vid-slot .ph{ min-height:0; padding:1rem; }
/* Never let the marker become a flex sibling of the hero copy — that squeezes
   the headline into half the screen on a phone. It stays out of the flow and
   shrinks instead. */
@media (max-width:900px){
  .hero-vid-slot{
    position:absolute; inset:auto var(--gutter) auto auto;
    top:calc(var(--hdr-h) + 12px); width:min(210px,50vw); margin:0;
  }
  .hero-vid-slot .ph{ margin-inline:0; padding:.75rem; }
  .hero-vid-slot .ph__size,.hero-vid-slot .ph__where{ display:none; }

  /* The poster marker shrinks to a single-line badge so the two markers sit
     side by side instead of on top of each other. */
  .hero .ph--fill{ padding-top:calc(var(--hdr-h) + 14px); }
  .hero .ph--fill .ph__size,.hero .ph--fill .ph__where{ display:none; }
  .hero .ph--fill .ph__name{ max-width:44vw; }
}

/* Full-bleed background slots sit behind a scrim and the headline, so their
   label moves to a legible corner badge rather than a centred box. */
/* No z-index here on purpose: these live inside the media layer, so the
   headline, scrim and buttons paint over them exactly as a photo would. */
.hero .ph--fill,
.phero .ph--fill,
.cta .ph--fill{
  justify-content:flex-start; align-items:flex-start;
  padding:14px; gap:0; border-width:2px;
}
.hero .ph--fill .ph__ico{ display:none; }
.hero .ph--fill > span,
.phero .ph--fill > span,
.cta .ph--fill > span{
  display:block; text-align:left; background:#0A0B0C;
  padding:5px 10px; max-width:42ch;
}
.hero .ph--fill .ph__name,
.phero .ph--fill .ph__name,
.cta .ph--fill .ph__name{ padding-bottom:2px; }
.hero .ph--fill .ph__where,
.phero .ph--fill .ph__where,
.cta .ph--fill .ph__where{ padding-top:2px; }

/* keep an empty slot the same shape the real image will be */
.ph--16x9{ aspect-ratio:16/9; min-height:0; }
.ph--4x3 { aspect-ratio:4/3;  min-height:0; }
.ph--3x2 { aspect-ratio:3/2;  min-height:0; }
.ph--4x5 { aspect-ratio:4/5;  min-height:0; }
.ph--3x4 { aspect-ratio:3/4;  min-height:0; }

/* the hero badge clears the sticky header */
.hero .ph--fill{ padding-top:calc(var(--hdr-h) + 16px); }

/* Footer legal menu: WordPress gives us list items, the template wants them
   inline with a middle dot between, the way the static footer reads. */
.ftr__legal .ftr__links{ list-style:none; margin:0; padding:0; display:inline; }
.ftr__legal .ftr__links li{ display:inline; }
.ftr__legal .ftr__links li + li::before{
  content:"·"; margin:0 .55rem; color:var(--text-on-ink-muted);
}