/* Adapted From https://codepen.io/Tomik23/pen/YzyJdRZ    Dark / Light theme on the page   Greg */

/* Sun and moon idea and svg code from: https://codepen.io/joyshaheb/pen/gOwOGQE  Dark-Light Theme
JoyShaheb */


/* DEFINING THE CSS VARIABLES */
/* Notes re how these variables work.  If a variable is defined in :root (i.e. for light colours), and not in html (i.e. dark colours), then the property value (e.g. purple) defined for light colours will apply to pages when they are toggled to light and dark.  But if a variable is undefined/unspecified in :root (for light mode), and it is defined in html (for dark mode), then only the toggled dark mode will show the value; in the toggled light mode, there will no property value showing itself (the value originally set in the css files, before I did light/dark toggling, will NOT show itself 'by default' - as perhaps could be expected*/

/* Ordinary/original (light) colours) */
:root {

--ContainerBackgroundColour: -webkit-linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png');
--ContainerBackgroundColour: linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png');

--SectionBackgroundColour:  #d1fdfe;
--TextColour_Sections: black;
--TextColour_AnimalCharity: black;
--TextColour_FaqUlLi: purple;

--SpewMore_SickColour: -webkit-linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(58,255,58,1) 100%);
--SpewMore_SickColour: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(58,255,58,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

--photo_border: solid;
/*For transition from dark to light.  Note this is slightly longer than light to dark; this was needed to give to the eye what looks like an equivalent transition time */
--BackgroundColour_Transition: background-color 0.6s linear;

/* 'webkit' is the only vendor prefix that will make this rule work here.  And just 'linear-gradient...' doesn't work.  (As viewed on chrome.) */
--DivideTaperGroupStyle2_Toggled: -webkit-linear-gradient(left, hsl(214, 12%, 22%), lime, hsl(213, 13%, 40%));

--FormFieldsColour: azure;
--FormFieldsFocusColour: lightcyan;

--Dynabox_BorderLeftColor: darkgreen;
--Dynabox_background: paleturquoise ;
--Dynabox_TextColour: black;


--NatHypSoc_logo_BackgroundColor: none;

}
/*END: Ordinary (light) colours) */


/*Dark colours) */
html[data-theme=dark] {

/*Alternative purple scheme.  The#280044 (hsl(275, 100%, 13%)is as used header in HPcom.  Second colour is this lightened a bit.*/
/*
--ContainerBackgroundColour: linear-gradient(to right, #280044 0%, hsl(275, 100%, 23%) 100%);
*/

--ContainerBackgroundColour: -webkit-linear-gradient(to right, rgb(87, 20, 87) 0%, rebeccapurple 100%), url('seigaiha.png');
--ContainerBackgroundColour: linear-gradient(to right, rgb(87, 20, 87) 0%, rebeccapurple 100%), url('seigaiha.png');

--SectionBackgroundColour: black;
--TextColour_Sections: rgb(238, 228, 211);
/* This is the same colour as that for 'Light Colours'.  A colour (black) is specified to override the white that this section would otherwise get - due to all sections being made light for dark mode*/
--TextColour_AnimalCharity: black;

--TextColour_FaqUlLi: #95d2fb;

--SpewMore_SickColour: -webkit-linear-gradient(to bottom,  rgba(255,255,255,0) 0%, green 100%);
--SpewMore_SickColour: linear-gradient(to bottom,  rgba(255,255,255,0) 0%, green 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

--photo_border: none;
/* For transition from light to dark.
Note such as:
 div {
div {
transition: width 2s linear 1s;
}
}
is shorthand for 
div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
} 
And it is the 'transition property' of 'background-color' that I need to sepcify in my shorthand rule  below.  Did have 'all' instead, but then the gradual transition is also seen (and not wanted) when resizing the windows
*/
--BackgroundColour_Transition: background-color 0.4s linear;

/* 'webkit' is the only vendor prefix that will make this rule work here.  And just 'linear-gradient...' doesn't work.  (As viewed on chrome.) */
--DivideTaperGroupStyle2_Toggled: -webkit-linear-gradient(left, rgb(40, 0, 68), #ff00ff, rgb(40, 0, 68));

--FormFieldsColour: #999;
/* Mustard colour
--FormFieldsFocusColour: rgb(238, 181, 75);
*/
/* Light grey 
--FormFieldsFocusColour:lightsteelblue;
*/
--FormFieldsFocusColour: rgb(97, 212, 97);

--Dynabox_BorderLeftColor:hsl(264, 22%, 44%);
/*My nice grape #8470a3 / hsl(264, 22%, 54%, but darker*/
--Dynabox_background:hsl(264, 22%, 24%);
--Dynabox_TextColour: hsl(0, 0%, 95%);


--NatHypSoc_logo_BackgroundColor: rgba(255, 255, 0, 0.63);

}
/*END: Dark colours) */

/* END: DEFINING THE CSS VARIABLES */



/* APPLYING THE CSS VARIABLES */

#index_body, #services_body, #approach_body, #about_body, #faq_body, #contact_body {
background: var(--ContainerBackgroundColour);
/* This transition isn't working because it is trying to transition a backgound made up of a gradient and an image; I think*/
/*
transition: all 1s ease ;
*/
}

section, .paired_sections_intro, .gap_filler {
background-color: var(--SectionBackgroundColour);
transition: var(--BackgroundColour_Transition);
}

section, .paired_sections_intro, .flex_module {
color: var(--TextColour_Sections);
}


.charity_section {
color: var(--TextColour_AnimalCharity);
}

.FAQ ul li {
color: var(--TextColour_FaqUlLi);
}

.expandMoreContent {
background: var(--SpewMore_SickColour);
}

.inline-photo  {
border-style: var(--photo_border);
}

/*Oddly, this selector doesn't work if there's a space betweeb hr and .divide_taper_groupstyle2.  And it will work just with .divide_taper_groupstyle2*/
hr.divide_taper_groupstyle2 {
background-image: var(--DivideTaperGroupStyle2_Toggled);
}

#namerinput, #emailerinput, #phoneinput, textarea {
background-color: var(--FormFieldsColour);
}

#namerinput:focus, #emailerinput:focus, #phoneinput:focus, textarea:focus {
background-color: var(--FormFieldsFocusColour);
}


.module5e_dynabox {
border-left-color: var(--Dynabox_BorderLeftColor);
}
.module5e_dynabox {
background: var(--Dynabox_background);
}
.module5e_dynabox {
color: var(--Dynabox_TextColour);
}



.NatHypSoc_logo {
background-color: var(--NatHypSoc_logo_BackgroundColor);
}



/* END: APPLYING THE CSS VARIABLES */




/* FOR TOGGLE SWITCH; PART 1*/

.theme-switch {
  display: inline-block;
  position: relative;
/*Background plate vertical height*/
  height: 34px;
/*Background plate horizontal width. Original 60px.*/
  width: 66px;
}
.theme-switch input {
  display: none;
}
.theme-switch-wrapper {

  display: flex;
  align-items: center;
  justify-content: flex-end;
/*Original: 20px;*/
  margin-top: 0px;

/*PN*/
margin-right: 20px;
margin-bottom: 10px;
}

/*PN. This enables in large screen size the toggler to be alongside all_sections_container.  With smaller widths, it'll be above the horizontal top of all_sections_container*/
@media screen and (min-width:1068px) {
.theme-switch-wrapper {
margin-right:0;
margin-bottom: 0;
position: absolute;
right: 20px;
}
}








.theme-switch-wrapper em {
  margin-left: 10px;
  font-size: 1rem;
}

.slider {
/*background plate colour, light mode*/
 background-color: rebeccapurple;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

/*ball control*/
.slider:before {
/*ball colour, light mode*/
 
/*background-color: #c6e2ff;*/
/* Original: 4px.  Need bottom 30x cos I've made ball slightly bigger*/
  
bottom: -39px;
  content: url(toggle_button2_92px.svg);

/*ball height.  Original: 26px*/
  /*height: 28px;*/

/*ball width. Original 26px*/
  /*width: 28px;*/

/*Original 4px*/
  left: 3px;
  position: absolute;
  transition: 0.4s;

/*
box-sizing: border-box;
border: 3px solid red;*/
}

.slider.round {
  border-radius: 34px;
}

/*
.slider.round:before {
  border-radius: 50%;
}
*/

input:checked + .slider {
/*background plate colour, dark mode*/
/* Colour used in #index_body, #services_body, etc, in gradient (#c6e2ff /  hsl(211, 100%, 89%)), but with reduced lightess, so sun's rays can be better seen*/
background-color: #c6e2ff;
background-color: hsl(211, 100%, 79%);
}

input:checked + .slider:before {
/*Amount of horizontal ball movement.  Originally 26px, which matches originalk ball size; so ball moves the same distance as its own width*/
  transform: translateX(32px);

/*PN*/
/*ball colour, dark mode*/

/*
background-color: black;
*/
/*
box-sizing: border-box;
border: 3px solid green;
*/
}

/* END: FOR TOGGLE SWITCH; PART 1 */

/* For adding moon and sun to toggle switch */


/* FOR TOGGLE SWITCH; PART 2: adding moon and sun to toggle switch */
.sun {
height: 22px;
width: 22px;
display:inline-block;
/* /* PN experimenting.  Could have positioned the sun and moon with absolute positioning
position:absolute
position: absolute;
top: 5px;
right: 24px;
*/
margin-left: 6px;
}

.moon {
height: 22px;
width: 22px;
display:inline-block;
/* PN experimenting.  Could have positioned the sun and moon with absolute positioning
position:absolute;
top: 5px;
right: 2px;
*/

/*This margin top styles the moon too; not sure why; perhaps cos sun and moon divs are both inline block, within the same div*/
margin-top: 6px;
margin-left: 6px;
}

/* END: FOR TOGGLE SWITCH; PART 2: adding moon and sun to toggle switch */