/* PS Colour Scheme: the light palette for philipsamarets.com.
   Dark is BeTheme's own styling for this site and is left alone. The plugin's head script sets
   data-ps-scheme="light" on <html> (the device setting) and every rule
   here hangs off that attribute. Greys are BeTheme's defaults (#FCFCFC page, #626262 text,
   #161922 headings); the site's terracotta (#DE6D49) and periwinkle (#5b5e9b) stay as they are.
   The homepage's own light rules live in that page's CSS (BeBuilder > page options). */

/* Page */
html[data-ps-scheme="light"]{background-color:#FCFCFC}
html[data-ps-scheme="light"] #Wrapper,
html[data-ps-scheme="light"] #Content,
html[data-ps-scheme="light"] #Header_wrapper,
html[data-ps-scheme="light"] .mfn-popup .mfn-popup-content,
html[data-ps-scheme="light"] .mfn-off-canvas-sidebar .mfn-off-canvas-content-wrapper,
html[data-ps-scheme="light"] #Top_bar .search_wrap{background-color:#FCFCFC}

/* Text */
html[data-ps-scheme="light"] body,
html[data-ps-scheme="light"] ul.timeline_items,
html[data-ps-scheme="light"] .icon_box .desc,
html[data-ps-scheme="light"] .icon_box a .desc,
html[data-ps-scheme="light"] .icon_box a:hover .desc,
html[data-ps-scheme="light"] .feature_list ul li a,
html[data-ps-scheme="light"] .list_item a,
html[data-ps-scheme="light"] .blockquote p.author span,
html[data-ps-scheme="light"] .article_box .desc_wrapper p,
html[data-ps-scheme="light"] .team .desc_wrapper p.subtitle,
html[data-ps-scheme="light"] .wp-caption-text{color:#626262}
html[data-ps-scheme="light"] h3,
html[data-ps-scheme="light"] h3 a,
html[data-ps-scheme="light"] h3 a:hover,
html[data-ps-scheme="light"] blockquote,
html[data-ps-scheme="light"] blockquote a,
html[data-ps-scheme="light"] blockquote a:hover{color:#161922}
html[data-ps-scheme="light"] body{--mfn-woo-body-color:#626262;--mfn-woo-heading-color:#161922}

/* Header */
html[data-ps-scheme="light"] .header-classic #Top_bar,
html[data-ps-scheme="light"] #Header .top_bar_left,
html[data-ps-scheme="light"] #Header .top_bar_right,
html[data-ps-scheme="light"] #Top_bar .top_bar_right:before,
html[data-ps-scheme="light"] #Top_bar .wpml-languages a.active,
html[data-ps-scheme="light"] #Top_bar .wpml-languages ul.wpml-lang-dropdown{background-color:#FCFCFC}
html[data-ps-scheme="light"] #Top_bar.is-sticky{background-color:rgba(252,252,252,.96);box-shadow:0 1px 0 rgba(0,0,0,.06)}
html[data-ps-scheme="light"] #Top_bar .menu > li > a,
html[data-ps-scheme="light"] #Top_bar #menu ul li.submenu .menu-toggle,
html[data-ps-scheme="light"] #Top_bar .top_bar_right .top-bar-right-icon{color:#161922}
html[data-ps-scheme="light"] #Top_bar .menu > li > a:hover,
html[data-ps-scheme="light"] #Top_bar .menu > li.hover > a,
html[data-ps-scheme="light"] #Top_bar .menu > li.current-menu-item > a,
html[data-ps-scheme="light"] #Top_bar .menu > li.current_page_item > a,
html[data-ps-scheme="light"] #Top_bar .menu > li.current-menu-parent > a,
html[data-ps-scheme="light"] #Top_bar .menu > li.current-menu-ancestor > a{color:#DE6D49}
html[data-ps-scheme="light"] #Top_bar .menu > li ul{background-color:#FFFFFF}
html[data-ps-scheme="light"] #Top_bar #logo img{filter:brightness(0);opacity:.92}   /* the logo file is white */
@media only screen and (max-width:767px){   /* the theme's phone header colour is written with !important */
  html[data-ps-scheme="light"] #Top_bar{background-color:#FCFCFC!important}
  html[data-ps-scheme="light"] #Top_bar.is-sticky{box-shadow:0 1px 0 rgba(0,0,0,.06)}
}

/* Footer */
html[data-ps-scheme="light"] #Footer{background-color:#F3F3F6}
html[data-ps-scheme="light"] .mfn-footer,
html[data-ps-scheme="light"] .mfn-footer .widget_recent_entries ul li a{color:#6b6b6b}
html[data-ps-scheme="light"] .mfn-footer .footer_copy{border-top-color:rgba(0,0,0,.08)}
html[data-ps-scheme="light"] .mfn-footer a:not(.button,.icon_bar,.mfn-btn,.mfn-option-btn):hover,
html[data-ps-scheme="light"] .mfn-footer .footer_copy .social li a:hover,
html[data-ps-scheme="light"] .mfn-footer .footer_copy .social-menu a:hover{color:#DE6D49}
html[data-ps-scheme="light"] .mfn-footer h1,
html[data-ps-scheme="light"] .mfn-footer h2,
html[data-ps-scheme="light"] .mfn-footer h3,
html[data-ps-scheme="light"] .mfn-footer h4,
html[data-ps-scheme="light"] .mfn-footer h5,
html[data-ps-scheme="light"] .mfn-footer h6{color:#161922}

/* Phone menu (the side slide) */
html[data-ps-scheme="light"] #Side_slide{background-color:#FFFFFF;border-color:#FFFFFF}
html[data-ps-scheme="light"] #Side_slide,
html[data-ps-scheme="light"] #Side_slide #menu ul li.submenu .menu-toggle,
html[data-ps-scheme="light"] #Side_slide .search-wrapper input.field,
html[data-ps-scheme="light"] #Side_slide a:not(.button){color:#161922}
html[data-ps-scheme="light"] #Side_slide #menu ul li{border-top-color:rgba(0,0,0,.07)}
html[data-ps-scheme="light"] #Side_slide #menu > ul:last-child > li:last-child{border-bottom-color:rgba(0,0,0,.07)}
html[data-ps-scheme="light"] #Side_slide a:not(.button):hover,
html[data-ps-scheme="light"] #Side_slide a.active,
html[data-ps-scheme="light"] #Side_slide #menu ul li.current-menu-item > a,
html[data-ps-scheme="light"] #Side_slide #menu ul li.current_page_item > a{color:#DE6D49}
html[data-ps-scheme="light"] #Side_slide .extras .extras-wrapper a svg .path{stroke:#161922}

/* The LinkedIn button: a round "in", like the one in the hero. switch.js puts one in the desktop
   header (before the Connect button) and one in the phone header (left of the burger, which BeTheme
   places at top:30px / right:10px with a -17px margin). */
.ps-linkedin{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 14px 0 0;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#e6e6e6;font-size:16px;font-weight:700;line-height:1;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:border-color .2s,color .2s}
.ps-linkedin:hover{border-color:rgba(255,255,255,.5);color:#ffffff;text-decoration:none}
.ps-linkedin:focus-visible{outline:2px solid #DE6D49;outline-offset:2px}
html[data-ps-scheme="light"] .ps-linkedin{border-color:rgba(0,0,0,.18);color:#161922}
html[data-ps-scheme="light"] .ps-linkedin:hover{border-color:rgba(0,0,0,.45);color:#07070f}
.ps-linkedin-mobile{display:none}
@media only screen and (max-width:767px){
  #Top_bar .ps-linkedin-mobile{display:inline-flex;position:absolute;top:30px;right:54px;margin:-17px 0 0;width:34px;height:34px;font-size:14px;z-index:200}
  .ps-linkedin-desktop{display:none}
}

/* A short cross-fade when the device setting changes while the page is open (switch.js adds the class for 350ms) */
html.ps-scheme-anim,
html.ps-scheme-anim body,
html.ps-scheme-anim #Wrapper,
html.ps-scheme-anim #Content,
html.ps-scheme-anim #Top_bar,
html.ps-scheme-anim #Footer,
html.ps-scheme-anim #Side_slide,
html.ps-scheme-anim section,
html.ps-scheme-anim h1,html.ps-scheme-anim h2,html.ps-scheme-anim h3,html.ps-scheme-anim h4,html.ps-scheme-anim h5,
html.ps-scheme-anim p,html.ps-scheme-anim li,html.ps-scheme-anim a,html.ps-scheme-anim hr{transition:background-color .3s ease,color .3s ease,border-color .3s ease}
@media (prefers-reduced-motion:reduce){
  html.ps-scheme-anim,html.ps-scheme-anim *{transition:none}
}