/*
 * Parkers Gates & Fencing: what the design's stylesheet (site.css) does not already cover for the
 * theme's Elementor widgets (inc/widgets, agent E1). Loaded after site.css.
 *
 * 1. The container layouts the page trees in inc/widgets/CONTRACT.md need under Elementor.
 * 2. The design's inline styles, as classes the build puts on containers.
 * 3. The widgets' own few extras (the hero video, the photo viewer, the honeypot ...).
 */

/* ---------------------------------------------------------------------------------------------
 * 1. Containers: Elementor stacks a container's contents in a column; these are rows in the design
 * ------------------------------------------------------------------------------------------- */
.e-con.head{--flex-direction:row;--justify-content:space-between;--align-items:flex-end;--flex-wrap:wrap;--row-gap:30px;--column-gap:30px}
.e-con.ctas{--flex-direction:row;--flex-wrap:wrap;--row-gap:12px;--column-gap:12px}
.e-con.workfoot{--flex-direction:row;--justify-content:space-between;--align-items:center;--flex-wrap:wrap;--row-gap:20px;--column-gap:20px}
.e-con.workfoot>.e-con{--width:auto}
.e-con.rcta{--flex-direction:row;--justify-content:space-between;--align-items:center;--flex-wrap:wrap;--row-gap:24px;--column-gap:24px}
.e-con.rcta>.e-con{--width:auto}
/* Elementor gives every widget its own box, so a paragraph's bottom margin no longer collapses into
   the next widget's top margin: the gap became the sum (14 + 22 above the ticks, 16 + 32 above the
   facts) instead of the larger of the two. These are the only such pairs in the page trees, and in
   both the widget's own margin is the larger, so the paragraph's goes. */
.elementor-widget-text-editor:has(+ .elementor-widget-parkers-facts, + .elementor-widget-parkers-ticks) > :last-child,
.elementor-widget-text-editor:has(+ .elementor-widget-parkers-facts, + .elementor-widget-parkers-ticks) > .elementor-widget-container > :last-child{margin-bottom:0}

/* ---------------------------------------------------------------------------------------------
 * 2. The design's inline styles
 * ------------------------------------------------------------------------------------------- */
.sec.pt0{padding-top:0}
.sec.pt50{padding-top:50px}
.sec.pt60{padding-top:60px}
.galv{background:var(--galv)}
.split.al-start{align-items:start}
/* The review call to action: the design's inline flex box on its .cform */
.cform.rcta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.rcta p{color:#6c4a5d}
.cl-ctas{margin-top:28px}
.e-con.cl-ctas{--margin-top:28px}

/* The privacy policy and any other long text. Elementor's .elementor.elementor .e-con>.elementor-widget
   {max-width:100%} (0,4,0) beat a plain .prose, so the measure is set one class stronger: 37em is about
   75 characters a line (71 to 79 measured at 17px on /privacy-policy/). The column container keeps the
   block on the content edge. */
.prose,.elementor.elementor .e-con>.elementor-widget.prose{max-width:37em}
.prose{color:#4b4553}
/* Section headings on a policy page: modest, a step above the 17px text, held to the paragraph below. */
.prose h2{font-size:clamp(20px,1.5vw,23px);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:36px 0 8px;color:var(--ink)}
.prose h3{font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-.005em;margin:28px 0 6px;color:var(--ink)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:6px}
.prose a{color:var(--pink-deep);text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------------------------------------------------
 * 3. Widgets
 * ------------------------------------------------------------------------------------------- */

/* Home hero: the video over the still, the still's framing, the card's bar following the video */
.hero .media img.still{object-position:var(--pos,100% 40%)}
/* The phone frame (poster_mobile) comes in a <picture>; the img inside lays out as the design's img. */
.hero .media picture{display:contents}
.hero .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hero.vplaying .media video{opacity:1}
.hero.vplaying .media img.still{visibility:hidden}
.hero.has-video .vid .bar i{animation:none;width:0}
.vid .bar{display:block}
/* The design renders in quirks mode, where this line is 24px; in standards mode it would be 27px. */
.vid .row b{display:block}
@media (max-width:1024px){
  /* The design hides the card on tablets and phones; a moving background still needs a pause button. */
  /* Clear of the picket edge and its ball finials: the hero edge (pw 10, base 16, amp 64, a post every 12th)
     is at most max(48px, 5.556vw) tall at the ends (pickets.js: 80 x max(.6, width/1440)), plus 9.55px for a
     post's ball, so this leaves about 10px above the tallest point at every width up to 1024, and about 11px
     under the full-width phone buttons. */
  .hero .vid{display:block;width:auto;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:50%;right:var(--gutr);bottom:calc(max(48px, 5.556vw) + 17px)}
  .hero .vid .row>span:not(.play),.hero .vid .bar{display:none}
  .hero .vid .play{box-shadow:0 6px 18px -6px rgba(0,0,0,.5)}
}
@media (max-width:680px){
  .hero .media img.still{object-position:var(--pos-m,92% center)}
}

/* Google reviews badge (F-gbadge): Kit::google_badge(), under the buttons in both heroes (under the line
   below the heading when a hero has no buttons; a block, so its top margin folds into that line's). A white
   chip like Google's own: the four-colour G, the rating, Google's star gold over grey, the number of
   reviews. At least 44px tall to tap; --gs is the five stars' width, smaller on the narrowest phones. */
.gbadge{--gs:80px;display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;min-height:44px;margin-top:22px;padding:6px 18px 6px 12px;background:#fff;color:var(--ink);border-radius:999px;box-shadow:0 12px 26px -14px rgba(0,0,0,.75);font:500 14px/1.2 var(--body);white-space:nowrap;text-decoration:none}
.gbadge:focus-visible{border-radius:999px}
.gbadge-g{display:block;flex:none;width:22px;height:22px}
.gbadge-score{font:600 16px/1 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.gbadge-stars{position:relative;flex:none;width:var(--gs);height:calc(var(--gs) / 5)}
.gbadge-stars svg{position:absolute;left:0;top:0;display:block;width:var(--gs);height:calc(var(--gs) / 5);max-width:none}
.gbadge-base svg{fill:#DADCE0}
.gbadge-fill{position:absolute;left:0;top:0;height:100%;overflow:hidden}
.gbadge-fill svg{fill:#FBBC04}
.gbadge-count{color:var(--steel)}
@media (hover:hover){
  .gbadge:hover .gbadge-count{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
}
@media (max-width:400px){
  .gbadge{--gs:72px;gap:8px;padding:6px 14px 6px 10px}
}
@media (max-width:340px){
  .gbadge{--gs:64px;gap:6px;padding:6px 12px 6px 8px;font-size:13px}
  .gbadge-g{width:20px;height:20px}
}

/* Trust strip with other than five promises */
@media (min-width:1181px){
  .trust .row.n3{grid-template-columns:repeat(3,1fr)}
  .trust .row.n4{grid-template-columns:repeat(4,1fr)}
  .trust .row.n6{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:680px){
  .trust .row.n4 .it:last-child,.trust .row.n6 .it:last-child{grid-column:auto}
}

/* Trust strip as a marquee (F-marquee): the promises slide right to left, one line each, the icon
   tile on the left. Every rule for it is inside the motion query, so reduced motion, print and any
   failure show the static grid above. The widget prints the copies that close the loop
   (aria-hidden) and the pause button (hidden until widgets.js wires it up). widgets.js sets
   --pk-mq-t for about 40px a second; the track moves one row's width (1/--pk-mq-k of itself) a loop.
   Held still while hovered (a mouse), after a tap or click (.is-paused) and by the button;
   .is-playing is the button or a second click playing it anyway. Focus alone does not hold it: the
   button is the only thing in it that takes focus, and it should say what pressing it will do. */
.trust .pk-mq-copy,.trust .pk-mq-btn{display:none}
@media screen and (prefers-reduced-motion:no-preference){
  .trust .pk-mq{position:relative;border-top:1px solid var(--galv);border-bottom:1px solid var(--galv);--pk-mq-fade:40px}
  .trust .pk-mq-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--pk-mq-fade),#000 calc(100% - var(--pk-mq-fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--pk-mq-fade),#000 calc(100% - var(--pk-mq-fade)),transparent)}
  .trust .pk-mq-track{display:flex;width:max-content;animation:pk-mq var(--pk-mq-t,30s) linear infinite;will-change:transform}
  .trust .pk-mq .row,.trust .pk-mq .row.pk-mq-copy{display:flex;flex:none;border:0}
  .trust .pk-mq .row .it{flex:none;flex-direction:row;align-items:center;gap:12px;padding:16px 22px;border-top:0;border-right:1px solid var(--galv)!important;white-space:nowrap}
  .trust .pk-mq .row .it b,.trust .pk-mq .row .it small{white-space:nowrap}
  .trust .pk-mq.is-paused .pk-mq-track{animation-play-state:paused}
  .trust .pk-mq.is-playing .pk-mq-track{animation-play-state:running}
  /* The pause button: out of sight until it has keyboard focus, like the skip link. */
  .trust .pk-mq-btn:not([hidden]){display:inline-flex;align-items:center;gap:9px;position:absolute;left:12px;top:50%;z-index:2;transform:translateY(-50%);width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;border-radius:12px;background:var(--plum);color:#fff;font:600 15px/1.2 var(--font-display);cursor:pointer}
  .trust .pk-mq-btn:not([hidden]):focus{width:auto;height:auto;min-height:44px;padding:10px 18px 10px 15px;overflow:visible;clip-path:none;border-radius:12px;box-shadow:0 10px 26px -10px rgba(30,20,38,.6)}
  .trust .pk-mq-btn svg{width:12px;height:14px;flex:none}
  @keyframes pk-mq{to{transform:translateX(calc(-100% / var(--pk-mq-k,3)))}}
}
@media screen and (prefers-reduced-motion:no-preference) and (hover:hover){
  .trust .pk-mq:hover .pk-mq-track{animation-play-state:paused}
  .trust .pk-mq.is-playing:hover .pk-mq-track{animation-play-state:running}
}
@media screen and (prefers-reduced-motion:no-preference) and (max-width:680px){
  .trust .pk-mq{--pk-mq-fade:24px}
  .trust .pk-mq .row .it{padding:14px 18px}
}

/* Service tiles: a sixth tile starts a row as tall as the others */
@media (min-width:1025px){.bento{grid-auto-rows:320px}}
/* Access control tile on phones: the tile is 260px tall and its words wrap to two lines, so the design's
   250x210 rotated photo ran under "unlocking." (11 to 21px at 360 to 412). A smaller photo, same corner, same
   tilt, same shape (250:210), sits clear of the words by 15px or more from 360px up. */
@media (max-width:680px){.tile.pinkt .kp{width:210px;height:176px}}

/* Recent installs strip: Elementor zeroes the margin of every figure inside a widget at (0,4,1)
   (.elementor .elementor-widget:not(..):not(..) figure{margin:0}), which flattened the design's
   stagger. Put it back one class stronger. The design's own margin-top:0!important under 1024px
   still wins below that. The gallery's and the collage's figures have margin 0 in the design, so
   that rule changes nothing there, and the photo pair has no figure. */
.elementor .elementor-widget.elementor-widget-parkers-strip .strip figure:nth-child(2){margin-top:60px}
.elementor .elementor-widget.elementor-widget-parkers-strip .strip figure:nth-child(4){margin-top:30px}

/* Reviews: stars left empty, the link to all reviews. With more than two cards (the reviews page) the score
   box stays top left at the height of its row and the cards run three across under it (James, 22 Oct: it
   used to span every row, a tall empty plum block). A lone card on the last row sits in the middle. */
@media (min-width:1025px){
  .rev .g.more{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rev .g.more > :last-child:nth-child(3n+1){grid-column:2}
}
.stars svg.off{fill:var(--line)}
.score .stars svg.off{fill:rgba(255,255,255,.22)}
.score-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:#fff;font:600 15px var(--font-display)}
.score-link svg{width:16px;height:16px;flex:none}
.score-link:hover{color:var(--blush-2)}
.rcard .who small{display:block}
/* The reviewer's initial stays a 44px circle: a long name beside it no longer squeezes it (QA Q1b-07). */
.who i{flex:none}

/* Postcode checker and contact lines: links inside them */
.pcmsg a{color:#fff;text-decoration:underline;text-underline-offset:2px}
/* The design's row (box and button side by side) never fitted a phone: it ran out of the areas box,
   and once it fits, the box shows "Enter your". Under 480px the button goes under the box, full width,
   as the design's other phone buttons do. 16px stops iPhones zooming in when the box is tapped. */
@media (max-width:1024px),(pointer:coarse){.pc input{font-size:16px}}
@media (max-width:480px){
  .pc{flex-wrap:wrap}
  .pc input{flex:1 1 100%;padding:12px 10px}
  .pc .btn{flex:1 1 100%}
}
/* Areas map (the Kent silhouette and its pins): the SVG (560 units wide) shrinks with its box, and the town
   names with it. Up to 599px the names are drawn bigger in the map's units the narrower the screen (24 units
   at 360px, 13 from 578px; the bold home town 2 more, but no more than 25 so that its end stays clear of the
   Medway shore), so they show at 11.3px or more from 360px up (10.5px at 340, 9.6px at 320) with no name
   clipped or over another, a pin or the coast (QA Q1b-08, F-kentmap). From 1025 to 1180px the
   two-column box makes the map narrow again (436 to 509px wide), so they are 14.5 there. Elsewhere the
   widget's own 13 and 15 show at 11.6px or more. The pins keep their size; the names' places beside them
   are set in em, so they follow the size. */
@media (max-width:599px){
  .map .names text{font-size:clamp(13px,calc(42.2px - 5.05vw),24px)}
  .map .names .hq{font-size:clamp(15px,calc(44.2px - 5.05vw),25px)}
}
@media (min-width:1025px) and (max-width:1180px){
  .map .names text{font-size:14.5px}
  .map .names .hq{font-size:16.5px}
}
/* On paper: printed the usual way (no background graphics) the dark box drops out and Chrome darkens the
   page's text, but not the drawing's, so the light names (the home town's white one most of all) and the faint
   tint would all but vanish. Dark names with a thin white edge, a firmer tint and a pink edge to the county read
   on white paper and, with background graphics on, on the dark box as well. */
@media print{
  .map .kent{fill-opacity:.3;stroke:#b4527f;stroke-opacity:.75}
  .map .names text{fill:#2a1c34;stroke:#fff;stroke-width:3px;stroke-linejoin:round;paint-order:stroke}
}
.cline b a{color:inherit}
.cline b a:hover{color:var(--pink-deep)}
/* A long email address may break (after the @) rather than push the page sideways on a phone. */
.cline>div:not(.ic){min-width:0}
.cline b{overflow-wrap:anywhere}
.cline .copy{flex:none}
/* Under 375px the lines step down from 20px so "parkersgates.com" fits beside Copy whole: the address breaks
   only after the "@", never inside the name (QA Q1b-11). Breaking anywhere stays only as a last resort. */
@media (max-width:374px){.cline b{font-size:clamp(15px,calc(10.5vw - 19px),20px)}}

/* Gallery: the whole photo opens the viewer; no gaps when a filter hides photos */
.gal{grid-auto-flow:dense}
.gal figure .gal-open{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:zoom-in;border-radius:inherit;z-index:1}
.gal figure .gal-open:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}
.gal figure figcaption.cap{z-index:2;pointer-events:none}
.gal-more{display:flex;justify-content:center;margin-top:34px}
.gal-more[hidden]{display:none}
.pk-gallery{scroll-margin-top:100px}

/* The photo viewer (the design's .lb, with arrows) */
html.pk-lb-open{overflow:hidden}
.lb>div{max-width:min(1400px,100%);display:grid;justify-items:center}
.lb img{width:auto;height:auto;max-width:100%;object-fit:contain}
.lb .lb-cap small{color:#cbbfd3;font-family:var(--body)}
.lb .lb-prev,.lb .lb-next{top:50%;transform:translateY(-50%);color:#1E1426}
.lb .lb-prev{right:auto;left:max(20px,env(safe-area-inset-left,0px))}
.lb .lb-next{right:max(20px,env(safe-area-inset-right,0px))}
.lb .lb-prev svg,.lb .lb-next svg{width:22px;height:22px;fill:none;stroke:currentColor}
.lb button[hidden]{display:none}
@media (max-width:680px){
  .lb{padding:76px 12px 96px}
  .lb .lb-prev,.lb .lb-next{top:auto;bottom:max(24px,env(safe-area-inset-bottom,0px));transform:none}
  .lb .lb-prev{left:calc(50% - 58px)}
  .lb .lb-next{right:calc(50% - 58px)}
}

/* Contact form: the hidden spam trap, the sending state, links in the error */
.pk-hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.cform button[disabled]{opacity:.75;cursor:progress;transform:none}
.cform .ferr a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Quote builder without JavaScript */
.qb-noscript{grid-column:1/-1;background:#fff;border-radius:20px;padding:24px}
.qb-noscript a{color:var(--pink-deep);text-decoration:underline}

/* Only in the Elementor editor, when a widget has nothing to show yet */
.pk-editor-note{border:1.5px dashed #c9bfd1;border-radius:14px;padding:18px;color:#6b6773;font:500 14px/1.4 var(--body);text-align:center;background:#fbf9fc}

/* ---------- Tap targets (QA Q1b-09, Q1b-10) ----------
   Every link and control is at least 24x24 (WCAG 2.2 AA) and 44px tall where the room around it allows,
   with nothing moved or redrawn: a text link grows by padding cancelled by an equal negative margin, a
   drawn control (circle, pill) by an invisible ::after. Where links sit closer than 44px (the footer lists,
   28px apart) each takes the room up to its neighbour and no further, so no two hit areas overlap.
   This file loads last, so these win over the same selectors in site.css. */
/* Utility bar: the email and the number fill the strip; the 28px social circles answer to 44x44. */
.util .r > span a{display:inline-block;padding-block:14px;margin-block:-14px}
.soc a{position:relative}
.soc a::after{content:"";position:absolute;inset:-8px;border-radius:50%}
/* Header: the logo link at least 44px tall however small the logo gets; the call block's number 44px.
   ">" so it is the header row's logo link only, never the mega menu's first tile. */
header.site > .wrap > a:first-child{display:flex;align-items:center;min-height:44px}
.callblk b a{display:inline-block;padding-block:12px;margin-block:-12px}
/* Page hero breadcrumb links: 44px, inside the 22px gap above the heading. */
.crumb a{display:inline-block;padding:13.5px 3px;margin:-13.5px -3px}
/* "Read all our reviews": 44px; the margin keeps it exactly where it was (22px above, nothing below). */
.score-link{padding-block:10.5px;margin-block:11.5px -10.5px}
/* Postcode box: the field fills the pill's height beside its button (it was 36px on an iPad). */
.pc input{align-self:stretch}
/* Quote builder chips (37px) and gallery filters (41px): 45px and 44px, inside their 8px gaps (the ::after
   is placed from inside the 1.5px border, hence the extra 1.5px). */
.chip,.filters button{position:relative}
.chip::after{content:"";position:absolute;inset:-5.5px 0}
.filters button::after{content:"";position:absolute;inset:-3px 0}
/* Contact page: the number and the email 44px tall inside their padded rows; Copy (40px) 45px. */
.cline b a{display:inline-block;padding-block:8px;margin-block:-8px}
.copy{position:relative}
.copy::after{content:"";position:absolute;inset:-4.5px 0}
/* Band above the footer: the number 44px tall on phones (it was 33px); the line under it covers its foot. */
.cta .tel a{display:inline-block;padding-block:9px 6px;margin-block:-9px -6px}
/* Footer: 38px circles 44x44; list links 28px (each fills half the 9px gap to the next); the line at the foot 44px. */
footer.site .soc a::after{inset:-3px}
footer.site ul a{display:inline-block;padding-block:4.5px;margin-block:-4.5px}
footer.site .bottom a{display:inline-block;padding-block:14px;margin-block:-14px}