/* Kabir Family Law - people profile pages, round-4 corrections.
   ==========================================================================
   Owned by the people-profile template only, and loaded after
   css/kfl-people-profile.css and css/kfl-mobile-qa.css so that source order,
   not a specificity war, decides every tie. Deleting this one file restores
   the round-3 page exactly.

   Art direction, as this page applies the settled direction:
     Concept    the credentialled individual, plainly presented - a named
                family law specialist on a navy ground with one gold action,
                so a reader in difficulty can see who will handle their matter
                and reach them in a single move.
     Palette    navy #17243E ground, one gold #B28E2E action, white text. No
                new colour is introduced here; the off-brand hover state is
                removed by lightening the same gold rather than darkening it.
     Typography site families only, 16px floor everywhere, no new text style.
     Imagery    the person's own photograph. A photograph inside the body copy
                is supporting material and is held to a supporting size.
     Density    balanced; the hero is spacious, the biography is close-set.
     Motion     transform and opacity only, under 200ms, reduced-motion
                honoured.
     Reference  an editorial staff page in a professional-services annual
                report: a portrait, a name, credentials, one way to make
                contact. No competitor site is referenced.

   Every number quoted below was measured on this staging site in a browser,
   at the width named. Contrast is computed by WCAG 2.1 relative luminance,
   not asserted.
   ========================================================================== */


/* ==========================================================================
   R3-01  A hidden bar that still takes keyboard focus
   --------------------------------------------------------------------------
   kfl-mobile-qa.js adds .kfl042-quiet AND aria-hidden="true" together when
   the page's own call to action is on screen, and kfl-mobile-qa.css fades the
   bar out with transform and opacity. Measured on hannah-overton at 375x812:
   the bar settles at opacity 0 with pointer-events:none, but visibility stays
   "visible" - and neither opacity nor pointer-events removes an element from
   the tab order. Two links inside it stayed focusable; calling .focus() on
   "Book Free Consultation" took focus while the container said aria-hidden.
   That is axe rule aria-hidden-focus (serious) and WCAG 4.1.2: a keyboard
   user lands on a control they cannot see, a screen-reader user is told
   nothing is there.

   visibility:hidden is the property that actually removes descendants from
   both the tab order and the accessibility tree, so it is the one applied.
   It is delayed by the length of the existing fade so the bar still animates
   out rather than vanishing mid-slide, and it is switched back the instant
   the quiet class is removed. Visibility is a discrete switch, not an
   animated property, so no paint or compositing cost is added.
   ========================================================================== */
body.single-our-people .sticky-footer{
  transition:transform 180ms ease,opacity 180ms ease,visibility 0s;
}
body.single-our-people .sticky-footer.kfl042-quiet{
  visibility:hidden;
  transition:transform 180ms ease,opacity 180ms ease,visibility 0s linear 180ms;
}
@media (prefers-reduced-motion:reduce){
  body.single-our-people .sticky-footer,
  body.single-our-people .sticky-footer.kfl042-quiet{transition:none}
}


/* ==========================================================================
   R3-02  The primary action lost contrast the moment it was touched
   --------------------------------------------------------------------------
   kfl-mobile-qa.css line 153 sets, with !important:
     .kflp-btn-primary:hover, .kflp-btn-primary:focus
       { background:#9C7B27; color:#fff }
   Measured on the focused aside button: white on #9C7B27 = 3.98:1, under the
   4.5:1 that 16px text needs. Every mouse user hovering the page's main call
   to action, and every keyboard user reaching it, read a sub-AA label.

   Darkening this gold cannot be rescued: #9C7B27 measures 3.98:1 against
   white AND 3.88:1 against the navy - it fails in both directions. A gold
   button has to brighten on interaction, not darken. So the fill lightens and
   the label stays navy at every state:
     rest   #17243E on #B28E2E = 5.01:1
     hover  #17243E on #C9A23C = 6.42:1
     focus  #17243E on #C9A23C = 6.42:1
   Contrast now improves on interaction instead of collapsing, and the label
   never changes colour - which is what a well-behaved button does. The edge
   stays #8A6E24: 4.43:1 on the card tint and 5.01:1 against the navy hero,
   both past the 3:1 a control boundary needs.

   !important is used here only because the declaration it answers uses it.
   ========================================================================== */
body.single-our-people .kflp .kflp-btn-primary,
body.single-our-people .kflp a.kflp-btn-primary{
  background:#B28E2E !important;
  border-color:#8A6E24 !important;
  color:#17243E !important;
}
body.single-our-people .kflp .kflp-btn-primary:hover,
body.single-our-people .kflp .kflp-btn-primary:focus,
body.single-our-people .kflp .kflp-btn-primary:focus-visible,
body.single-our-people .kflp .kflp-btn-primary:active,
body.single-our-people .kflp a.kflp-btn-primary:hover,
body.single-our-people .kflp a.kflp-btn-primary:focus{
  background:#C9A23C !important;
  border-color:#8A6E24 !important;
  color:#17243E !important;
}


/* ==========================================================================
   R3-03  150px of empty navy above the photograph on a tablet
   --------------------------------------------------------------------------
   --kflp-navclear:140px was calibrated against a 121px header at 375px, then
   applied to every width up to 899.98px. Measured header heights on this
   site:  320px -> 158.0 | 375-700px -> 117.0 | 768-1199px -> 82.4 |
   1200px and up -> 70.4.

   The reason 768px differs is not the header shrinking on its own:
   header.logo-buttons carries Bootstrap's .hidden-xs, so from 768px up it
   becomes an 88px block in normal flow that already pushes the hero clear of
   the 82.4px fixed bar. Measured at 768x1024: heroTop 88, navH 82.4 - the
   hero was ALREADY clear, and the 144px of padding on top of it was entirely
   dead. Result: header, then a blank navy slab, then a photograph, with the
   hero filling 984 of 1024px and only 32px of the 48px primary button above
   the fold.

   Below 768px .hidden-xs collapses to zero height and the clearance is
   genuinely needed, so 140px and 164px are left exactly as they are. From
   768px up the hero simply takes an ordinary tablet rhythm.
   ========================================================================== */
@media (min-width:768px) and (max-width:899.98px){
  .kflp-hero{padding-top:40px;padding-bottom:40px}
}

/* The anchor offset is a separate question from the hero's padding, and tying
   both to one variable got it wrong at every width above 767px. Both calls to
   action jump to #enquiry, and the header is fixed at EVERY width - including
   desktop, where the old rule resolved to 16px against a 70.4px bar, so the
   heading a reader jumped to landed underneath it. Each value below is the
   measured header height at that width plus a 16px breathing gap. */
.kflp-enquiry,
.kflp-enquiry .wpsal-anchor{scroll-margin-top:88px}                 /* nav 70.4 */
@media (max-width:1199.98px){
  .kflp-enquiry,
  .kflp-enquiry .wpsal-anchor{scroll-margin-top:100px}              /* nav 82.4 */
}
@media (max-width:767.98px){
  .kflp-enquiry,
  .kflp-enquiry .wpsal-anchor{scroll-margin-top:134px}              /* nav 117  */
}
@media (max-width:359.98px){
  .kflp-enquiry,
  .kflp-enquiry .wpsal-anchor{scroll-margin-top:176px}              /* nav 158  */
}


/* ==========================================================================
   R3-04  The sticky contact card scrolled under the fixed header
   --------------------------------------------------------------------------
   .kflp-aside stuck at top:24px while nav.navbar-fixed-top is opaque and ends
   at y=70.4 (1200px and up) or y=82.4 (900-1199px). Measured at 1440 scrolled
   to y=2000: asideTop 24, navBottom 70.4 - 46.4px of a 215.5px card painted
   over, which is the "CONTACT <name>" label. Hit-tested rather than inferred:
   elementFromPoint at the card's own top-centre returned a header control.
   The card is the page's persistent contact surface, so it is the one element
   that must never be clipped. Header height plus the same 24px gutter it
   already had.
   ========================================================================== */
@media (min-width:900px){
  .kflp-aside{top:106px}      /* 82.4 + 24 */
}
@media (min-width:1200px){
  .kflp-aside{top:94px}       /* 70.4 + 24 */
}


/* ==========================================================================
   R3-05  "Latest advice": ten of eleven articles unreachable
   --------------------------------------------------------------------------
   The carousel never initialises - window.Swiper is undefined although
   swiper-bundle.min.js downloads - so .swiper-wrapper stays a plain flex row
   of eleven 345px slides inside a container with overflow:hidden. One article
   is visible, ten are laid out off to the right and reachable by nobody, and
   the two arrow buttons are inert (clicking .swiper-next twice moved no
   slide).

   The script that fails belongs to the parent theme and is not this
   template's to repair - it is reported to its owner. What IS in scope is
   that this page must not depend on that script to be usable. Swiper stamps
   .swiper-initialized on the container the moment it takes over, so every
   rule here is gated on its absence: the row becomes an ordinary scroll-snap
   carousel that works with a finger, a trackpad, a scrollbar and the Tab key
   (focusing a link in slide 7 scrolls it into view, which an overflow:hidden
   box can never do), and the two buttons that do nothing are not shown
   pretending to. If the script is ever repaired, every rule below stops
   applying by itself, with nothing to undo.

   Slides are narrowed slightly so the next card peeks past the right edge -
   without that there is no visible signal that the row scrolls at all.
   ========================================================================== */
body.single-our-people .latest-advice .swiper.blog-slider:not(.swiper-initialized){
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
body.single-our-people .latest-advice .swiper.blog-slider:not(.swiper-initialized) .swiper-wrapper{
  transform:none;
}
body.single-our-people .latest-advice .swiper.blog-slider:not(.swiper-initialized) .swiper-slide{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:min(345px,86%);
  margin-right:16px;
}
/* The arrows live in .header .nav, a sibling of the slider, so the state has
   to be read from the container itself. */
body.single-our-people section.latest-advice:has(.swiper.blog-slider:not(.swiper-initialized)) .header .nav{
  display:none;
}


/* ==========================================================================
   R3-07  The contact card was deleted for every phone and tablet visitor
   --------------------------------------------------------------------------
   @media (max-width:899.98px){.kflp-aside{display:none}} removed it outright.
   Measured: display "none" at 320, 375, 640 and 768 on both profiles, so the
   "Send <name> a message" button rendered 0x0 and, because display:none also
   removes an element from the accessibility tree, no screen-reader user below
   900px knew the card existed. On Hannah's page that block is also the only
   place a phone visitor can reach the download-contact-card link.

   Below 900px it is not a sidebar - the grid is a single column, so it falls
   after the biography, which is exactly where a closing contact block belongs
   at the end of a long read. It is shown, not stuck: sticky belongs to a
   two-column layout. A hairline and a generous top margin separate it from
   the end of the prose so it reads as a deliberate close rather than a stray
   panel.
   ========================================================================== */
@media (max-width:899.98px){
  .kflp-aside{
    display:block;
    margin-top:8px;
    padding-top:32px;
    border-top:1px solid var(--kflp-hairline,#E3E6EC);
  }
  .kflp-aside .kflp-card{max-width:520px}
}


/* ==========================================================================
   R3-08  A second, larger photograph before a word of the biography
   --------------------------------------------------------------------------
   Under "About Hannah Overton", before any text, a duplicate portrait filled
   the column. Measured at 375x812: authored width 233px, rendered 343.3 x
   441.6 - 1.47x its authored size and 54.4% of the screen height.
   elementFromPoint at three separate depths all returned this one image: the
   entire visible content area was the photograph. Cause is kfl-mobile-qa.css
   D02, which releases floated body images to their intrinsic width below
   768px. That is right for a wide editorial picture and wrong for a portrait
   the editor deliberately sized small.

   The template already marked images authored at 200px or under so they could
   be held to a badge size; 233px fell just outside that guard. The template
   now marks every body image carrying an authored width, and anything above
   the badge threshold is capped by HEIGHT rather than width - height is what
   was actually wrong, and capping height keeps the editor's aspect ratio
   exactly. At 200px tall the 233x300 portrait renders about 155x200: under a
   quarter of an 812px screen instead of 54.4%, so the reader meets the person
   and then reads about them, rather than meeting the same face twice.
   The width and height attributes are untouched, so the reserved box still
   holds and no layout shift is introduced.
   ========================================================================== */
@media (max-width:767.98px){
  .kflp .kflp-prose img.kflp-inlineimg{
    width:auto;
    height:auto;
    max-height:200px;
    max-width:100%;
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
}


/* ==========================================================================
   R3-09  Two stacked buttons of different heights
   --------------------------------------------------------------------------
   Measured at 375: primary 48.00px, "Call ..." 45.19px, with identical
   padding, border, line-height and box-sizing - the whole difference is
   min-height. kfl-mobile-qa.css line 401 sets a[href^="tel:"] to
   min-height:var(--kfl-tap) (44px); at specificity (0,1,1) that outranks
   .kflp-btn at (0,1,0) whatever the file order. Small, but it is exactly the
   class of thing that reads as "doesn't quite look right" without a reader
   being able to name it. 48px is this template's own control height and is
   above the 44px quality bar either way.
   ========================================================================== */
body.single-our-people .kflp .kflp-actions .kflp-btn,
body.single-our-people .kflp .kflp-card .kflp-btn{min-height:48px}


/* ==========================================================================
   R3-10  The last 12px text on the page
   --------------------------------------------------------------------------
   Round 2 moved the hero eyebrow and the breadcrumb to the project's 16px
   floor and left the contact card's own label at 12px uppercase with .14em
   tracking, so one rule was applied in two places and not in a third.
   #7A6120 on the #F2F5F9 card tint measures 5.40:1, past the 4.5:1 that 16px
   text needs. Tracking eases to .08em because capitals at 16px with .14em
   shout over the list beneath them.
   ========================================================================== */
.kflp .kflp-card-title{font-size:16px;letter-spacing:.08em}


/* ==========================================================================
   R3-11  A 35 x 15px breadcrumb link
   --------------------------------------------------------------------------
   Measured at 375: the "Home" link is 34.7 x 15px. It is standalone
   navigation, not a link inside a sentence, so the WCAG 2.2 inline exception
   does not apply - it misses this project's 44px quality bar and also the
   24px AA minimum on height. kfl-mobile-qa.css does carry a rule for
   .breadcrumb li a and .breadcrumbs li a, but this markup is #breadcrumbs a
   inside .kflp-crumbs and matches neither.

   The row's own padding comes down as the links grow, so the bar ends up
   around 52px rather than 39px - 13px more, not 29px more - and the page
   below it does not move further down the screen.
   ========================================================================== */
.kflp-crumbs{padding-top:4px;padding-bottom:4px}
.kflp-crumbs #breadcrumbs a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  vertical-align:middle;
}


/* ==========================================================================
   R3-12  The desktop hero read unfinished
   --------------------------------------------------------------------------
   Measured at 1440: the portrait is 460 x 575 and the identity cluster beside
   it is 203px tall, correctly centred against it (both centres at y=468.5) -
   which leaves 186px of empty navy above the name and 186px below the button.
   On Iblal's page, with fewer credentials, a single button sits alone in a
   644px column.

   Nothing is invented to fill it: credentials are the firm's to supply, and
   inventing any would breach the truth rules outright. Instead the two
   columns are brought nearer in mass from both directions - the photograph is
   capped so it stops towering over the text, and the identity column takes a
   more generous desktop rhythm and a larger name, which is a better hero at
   any width. A 460 x 480 portrait is still the dominant element on the
   screen; it is simply no longer more than twice the height of everything
   beside it.
   ========================================================================== */
@media (min-width:900px){
  .kflp-portrait img{max-height:480px}
  .kflp-hero .kflp-name{font-size:clamp(30px,7.2vw,54px) !important}
  .kflp-name{margin-top:14px}
  .kflp-role{margin-top:14px;font-size:clamp(17px,2.4vw,24px)}
  .kflp-rule{margin-top:28px}
  .kflp-creds{margin-top:28px}
  .kflp-actions{margin-top:32px}
}


/* ==========================================================================
   R3-14 (the part that is this template's to fix)
   --------------------------------------------------------------------------
   The template now gives a bare-URL social link a readable accessible name -
   see the round-4 note in single-our-people.php. The visible text is the
   editor's and is left alone, so it still needs to be able to break rather
   than push the column wide on a phone. The rest of that block - the bare
   "T:", "E:" and "L:" prefixes and the unlinked contributions - is stored
   copy and belongs to whoever owns it.
   ========================================================================== */
.kflp .kflp-prose a{overflow-wrap:anywhere}


/* ==========================================================================
   R3-06 (support)  The qualifier on a fallback telephone number
   --------------------------------------------------------------------------
   Where a profile has no direct line of its own, the contact card now lists
   the firm switchboard the site header already publishes. It is labelled, so
   that a main line is never presented as somebody else's personal direct number.
   Kept at the 16px floor rather than shrunk to a caption size: it changes the
   meaning of the number above it, so it is not decoration.
   #525C70 on the F2F5F9 card tint measures 6.15:1.
   ========================================================================== */
.kflp .kflp-details .kflp-note{
  display:block;
  margin-top:2px;
  font-size:16px;
  font-weight:400;
  letter-spacing:0;
  color:var(--kflp-muted,#525C70);
}