/* ==========================================================================
   RM Psychology - site customisations

   Copied to output/css/site-custom.css and linked from <head> on every page
   by scripts/customize.py, which runs after convert.py.

   IMPORTANT, on !important: Pagelayer writes its per-element CSS into <style>
   blocks in the BODY, so those rules come AFTER this file in source order and
   win every tie. Overriding them requires !important. It is used below only
   for that reason - never as a shortcut around specificity.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Email address colour

   Cloudflare's email obfuscation wraps the address in an <a>, which then picks
   up the theme's base rule  a { color:#e49497 }  from immersion-style.css.
   The author typed plain text into the card, so it should read like its
   siblings: the phone number and street address in the same block are NOT
   links and render #012233, set by .pagelayer-service-heading.

   The only anchor inside a service heading anywhere on the site is this email,
   on the five pages that carry the contact card, so the selector is exact.
   -------------------------------------------------------------------------- */

.pagelayer-service-heading a,
a.__cf_email__ {
  color: #012233;
}

.pagelayer-service-heading a:hover,
.pagelayer-service-heading a:focus-visible,
a.__cf_email__:hover,
a.__cf_email__:focus-visible {
  color: #03539a; /* the blue already used on the card's shadow */
}


/* --------------------------------------------------------------------------
   2. Responsive layout

   Pagelayer's own breakpoints are desktop >780px, tablet 361-780px and mobile
   <=360px. That mobile figure predates modern handsets, so a 390-430px phone
   is served "tablet" styling. Combined with fixed pixel widths that have no
   fluid fallback - the header menu is width:814px !important at EVERY
   viewport - the page scrolls sideways on every phone and most tablets.

   max-width beats width in the CSS box model, so capping is enough to rein in
   an !important width without restating each value.
   -------------------------------------------------------------------------- */

/* Media never exceeds its container. */
img,
svg,
video,
iframe,
embed,
object {
  max-width: 100%;
}

/* Keep intrinsic aspect ratio when a width attribute is capped. */
img,
video {
  height: auto;
}

@media (max-width: 1024px) {
  /* Every Pagelayer element sits as a direct child of a column holder, so this
     catches the fixed widths generically: the 814px menu, the 823/563px text
     blocks, and anything similar added later. */
  .pagelayer-col-holder > div,
  .pagelayer-col,
  .pagelayer-row-holder,
  .pagelayer-wp-menu-container,
  .pagelayer-accordion,
  .pagelayer-accordion-tabs {
    max-width: 100% !important;
  }

  /* Long words and the email address must not force the page wider. */
  .pagelayer-service-heading,
  .pagelayer-heading,
  .pagelayer-text {
    overflow-wrap: break-word;
  }
}


/* --------------------------------------------------------------------------
   3. Collapsed navigation

   customize.py flips the nav's data-drop_breakpoint from "mobile" (<=360px,
   which no real phone hits) to "tablet", so Pagelayer's own JS collapses the
   menu at <=780px. That covers every handset and tablet portrait.

   Two of the author's collapsed-menu rules contain unresolved Pagelayer
   template text - "padding:8 {{val[1]}}". The braces there are balanced, so
   only that one declaration is dropped and the rules after it still apply;
   the effect is that the hamburger loses its padding at exactly the sizes
   where it becomes the only way to navigate. Hence the explicit touch target
   below. The panel widths are restated for a different reason: 30-60% of a
   phone viewport is 117-234px, which is too narrow to use.
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {
  /* A 30-60% panel is 117-234px on a phone. Give it a usable width. */
  .pagelayer-wp-menu-container.pagelayer-menu-type-dropdown {
    width: min(320px, 85vw) !important;
  }

  .pagelayer-menu-type-dropdown .pagelayer-wp_menu-ul {
    width: 100% !important;
    /* The author's rule nudges the list up by 8%, which clips the first item
       on a short screen once the panel is full height. */
    top: 0 !important;
    transform: none !important;
    padding-top: 3.5rem !important;
    box-sizing: border-box !important;
  }

  /* Full-width tap targets, comfortably above the 44px minimum. */
  .pagelayer-menu-type-dropdown .pagelayer-wp_menu-ul > li > a,
  .pagelayer-menu-type-dropdown .pagelayer-wp_menu-ul .sub-menu li a {
    display: block !important;
    padding: 0.85rem 1.25rem !important;
  }

  /* Submenus read as nested rather than floating over the panel. */
  .pagelayer-menu-type-dropdown .pagelayer-wp_menu-ul .sub-menu {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
  }

  .pagelayer-menu-type-dropdown .pagelayer-wp_menu-ul .sub-menu li a {
    padding-left: 2.25rem !important;
  }

  /* Hamburger: right-aligned and a real touch target. */
  .pagelayer-primary-menu-bar {
    text-align: right !important;
  }

  .pagelayer-primary-menu-bar i,
  .pagelayer-wp_menu-close i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }
}


/* --------------------------------------------------------------------------
   4. Sideways-scroll backstop

   The caps above remove the known overflow sources. This stops any remaining
   one from sliding the whole page sideways. `clip` rather than `hidden` so it
   does not create a scroll container and break position:sticky.

   If you are chasing a layout bug, comment this out first - it hides the
   symptom, and you want to see it.
   -------------------------------------------------------------------------- */

html {
  overflow-x: clip;
  max-width: 100%;
}
