/* Check TO DO */

:root {
	--itm_logo_color: #981006;
	--grey_color: #ddd;

	--navbar_height: 50px;
	--navbar_background: #ffffff; /* pure white */
	--navbar_color: black;
	--navbar_anchor_color: var(--navbar_color);
	--navbar_anchor_background: var(--navbar_background);
  	--navbar_anchor_hover_color: var(--itm_logo_color);
  	--navbar_anchor_hover_background: var(--navbar_anchor_background); /* TO DO: not changing the colour at this stage because I would need to adjust its height, maybe later */

  	--pageHeader_color: var(--itm_logo_color);
	--pageHeader_background: white;
	--header_font-weight: 600; /* bold */	
	
	--body_padding: 10px;
	--itm_scroll-margin-top: calc(var(--navbar_height) + var(--body_padding)); /* needed to counteract the fixed navigation bar when scrolling back to snap ids */

	--sectionHeader: var(--itm_logo_color);
  	--section_text_background: white;
  	--section_text_color: black;

  	/* boxes */
	--box_background:#A1FB8E  ; /*  #A1FB8E: light green; */
	--box_color: black;
	--alternate_box_background: #FFFFC5  ; /* #FFFFC5: light yellow for a better contrast with internal links and normal colours */
	--alternate_box_color: var(--itm_logo_color);
	--lace_pink: #FFD8F0;

	--button_background: var(--itm_logo_color); 
	--button_color: white;
	--button_border_color: var(--itm_logo_color); 
	--button_hover_background: var(--grey_color); 
	--button_hover_color: var(--navbar_anchor_hover_color); 

	--footer_background: var(--itm_logo_color);
	--footer_color: white;
}

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} /* Intuitive element sizing + component safety. Better option than: * {  box-sizing: border-box; } */
html{overflow-x:hidden}

html,body{font-family: "Garamond", serif;}

html{ scroll-padding-top: calc(var(--navbar_height) + var(--body_padding) );}
body {	padding-top: calc(var(--navbar_height) + var(--body_padding) ); /* Because the fixed navbar hovers over your page, you will need to add a padding-top equal to the navbar's height to your main page content to prevent the top of your text from being hidden behind the bar. */
  	padding-left: var(--body_padding);
	margin:0;
	font-size:100%; 
/* As a base font size for a document, 1em (or 100%) is equivalent to setting the font size to the user's preference. Many users prefer that designers do this because it means that the text size will follow user preferences. https://www.w3.org/QA/Tips/font-size (last accessed 16 July 2026)
*/
	line-height:1.125em;}
/* for font sizes it is even better to use em. The idea is (1) to not set the font size of the BODY element (in HTML), but use the default size of the device, because that is a size that the reader can comfortably read; and (2) express font sizes of other elements in em: H1 {font-size: 2.5em} to make the H1 2½ times as big as the normal, body font. 
https://www.w3.org/Style/Examples/007/units.en.html (last accessed 16 July 2026) */

a {color: inherit; } /* The inherit keyword specifies that a property should inherit its value from its parent element. Applying here to links. */
th, td { padding: 5px;}

/* -------------- Style images */

img {max-width:100%;height:auto; vertical-align:middle;text-align:left;} 
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  object-fit: cover; /* else the image was not resize properly. Using contain was leaving too much white space around the image */
}


/* 	----------------
	Style the header */

.c_pageHeader, .c_breadcrumbs { padding: 5px; line-height:1.125em; font-family: "Garamond", serif; }

.c_pageHeader { grid-area: pageHeader;  font-size: 1.5em; color: var(--pageHeader_color); 
			font-weight: var(--header_font-weight); background-color:var(--pageHeader_background); margin: auto; width: 100%; text-align: left;  
}

.c_breadcrumbs {grid-area: breadcrumbs; font-size: 1em; color: black;}

.c_note {font-size: 0.5em; line-height:1.125em; color: black;} /* Used for "Back to Top menu" note */

.c_error {color: #FF0000; } /* TO DO: Is this used anywhere? */

.c_contents{font-size:0.75em; font-weight: normal; line-height:1.125em; color: black;} /* used as font for the table of contents */

/* --------------  Style the Navigation Bar */
/* notes: 
	1. I removed the active link in the navbar to simply the site, they will be able to see the active page in the breadcrumbs
	2. There is no hamburger icon because the links are so few, they fit the min screen layout; I only stack the sections in the grid for the responsive layout.
*/

.c_navbar { grid-area: navbar; 
    position: fixed; /* Removes the navigation bar from the normal document flow and locks it to the viewport, ensuring it stays visible as the user scrolls. */
    top: 0; left: 0; width: 100%; height: var(--navbar_height);
    color: var(--navbar_color); background-color: var(--navbar_background);
    display: flex;
    justify-content: center; 
    align-items: center;
    padding: 0 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adds a subtle drop shadow */
    z-index: 1000; /* This creates a stacking context, ensuring your navigation bar stays layered above your webpage content when scrolling - assuming large enough an index */
}

.c_nav-links { list-style: none; display: flex; margin: 0; padding: 0; }

.c_nav-links li { margin-left: 30px; } /* padding in between the navigation links */

.c_nav-links a /* styles the links in their default, resting state */
	{ text-decoration: none; background: var(--navbar_anchor_background); color: var(--navbar_anchor_color); transition: color 0.3s ease; 
		font-family: "Lucida Sans Unicode","Trebuchet MS", Arial, sans-serif; font-weight: 300; font-size: 15px;
}

.c_nav-links a:hover { text-decoration: underline; color: var(--navbar_anchor_hover_color); background: var(--navbar_anchor_hove_background); }

.c_nav-logo img { 	height: 50px; /* Adjust this to fit ITM logo */
			width: auto;
}

/* 	----------------------------------------------
	Style all sections target of a snap-scrolling  */

.c_grid-container, .c_sh, .c_sb, ul { scroll-margin-top: var(--itm_scroll-margin-top); } /* This tells the browser to leave an explicit gap at the top only when snap-scrolling to an ID link, without altering your page's regular visual layout spacing. 
*/

span {
  display: inline-block; /* Required for scroll margins to work */
  scroll-margin-top: var(--itm_scroll-margin-top); /* Adjust the pixel value as needed */
}

/* 	-------------------------
	Style the section headers */

.c_sh { padding: 10px; font-size: 1.5em; line-height:1.125em; font-weight:var(--header_font-weight);
	background-color: var(--pageHeader_background); color: var(--sectionHeader); text-align: left; border-top: 1px solid var(--sectionHeader); 
}

.c_sh-1 { grid-area: sh-1; }
.c_sh-2 { grid-area: sh-2; } 
.c_sh-3 { grid-area: sh-3; }
.c_sh-4 { grid-area: sh-4; }
.c_sh-5 { grid-area: sh-5; }
.c_sh-6 { grid-area: sh-6; }

/* 	------------------------------------------------------------------------
	Style the section introductory text placed just below each section header */

.c_sb { padding: 30px; font-size: 1.125em; line-height:1.125em; 
	background-color:var(--section_background); color: var(--section_text_color); text-align: left;
}
.c_sb-1 { grid-area: sb-1}
.c_sb-2 { grid-area: sb-2}
.c_sb-3 { grid-area: sb-3}
.c_sb-4 { grid-area: sb-4}
.c_sb-5 { grid-area: sb-5}
.c_sb-6 { grid-area: sb-6}

/* 	-------------------------
	Style the section columns */ 

.c_sc { padding: 10px; margin: auto; width: 90%; border: 1px solid white; box-shadow: 10px 10px 5px #aaaaaa; 
	background-color: var(--navbar_background); color: var(--navbar_color); text-align: center;
}

.c_sc-h1-r1-c1 { grid-area: sc-h1-r1-c1; }
.c_sc-h1-r1-c2 { grid-area: sc-h1-r1-c2; }
.c_sc-h1-r1-c3 { grid-area: sc-h1-r1-c3; }
.c_sc-h1-r1-c4 { grid-area: sc-h1-r1-c4; }
.c_sc-h1-r1-c5 { grid-area: sc-h1-r1-c5; }
.c_sc-h1-r1-c6 { grid-area: sc-h1-r1-c6; }

.c_sc-h1-r1-c7 { grid-area: sc-h1-r1-c7; } /* added for the mixed bag resource to present small boxes */
.c_sc-h1-r1-c8 { grid-area: sc-h1-r1-c8; }
.c_sc-h1-r1-c9 { grid-area: sc-h1-r1-c9; }
.c_sc-h1-r1-c10 { grid-area: sc-h1-r1-c10; }
.c_sc-h1-r1-c11 { grid-area: sc-h1-r1-c11; }
.c_sc-h1-r1-c12 { grid-area: sc-h1-r1-c12; }
.c_sc-h1-r1-c13 { grid-area: sc-h1-r1-c13; }
.c_sc-h1-r1-c14 { grid-area: sc-h1-r1-c14; }
.c_sc-h1-r1-c15 { grid-area: sc-h1-r1-c15; }
.c_sc-h1-r1-c16 { grid-area: sc-h1-r1-c16; }
.c_sc-h1-r1-c17 { grid-area: sc-h1-r1-c17; }
.c_sc-h1-r1-c18 { grid-area: sc-h1-r1-c18; }

.c_sc-h2-r1-c1 { grid-area: sc-h2-r1-c1; }
.c_sc-h2-r1-c2 { grid-area: sc-h2-r1-c2; }
.c_sc-h2-r1-c3 { grid-area: sc-h2-r1-c3; }
.c_sc-h2-r1-c4 { grid-area: sc-h2-r1-c4; } /* added for the Stories of Healing */
.c_sc-h2-r1-c5 { grid-area: sc-h2-r1-c5; }
.c_sc-h2-r1-c6 { grid-area: sc-h2-r1-c6; }
.c_sc-h2-r1-c7 { grid-area: sc-h2-r1-c7; }
.c_sc-h2-r1-c8 { grid-area: sc-h2-r1-c8; }
.c_sc-h2-r1-c9 { grid-area: sc-h2-r1-c9; }
.c_sc-h2-r1-c10 { grid-area: sc-h2-r1-c10; }
.c_sc-h2-r1-c11 { grid-area: sc-h2-r1-c11; }
.c_sc-h2-r1-c12 { grid-area: sc-h2-r1-c12; }
.c_sc-h2-r1-c13 { grid-area: sc-h2-r1-c13; }
.c_sc-h2-r1-c14 { grid-area: sc-h2-r1-c14; }
.c_sc-h2-r1-c15 { grid-area: sc-h2-r1-c15; }
.c_sc-h2-r1-c16 { grid-area: sc-h2-r1-c16; }

.c_sc-h3-r1-c1 { grid-area: sc-h3-r1-c1; }
.c_sc-h3-r1-c2 { grid-area: sc-h3-r1-c2; }
.c_sc-h3-r1-c3 { grid-area: sc-h3-r1-c3; }
.c_sc-h3-r1-c4 { grid-area: sc-h3-r1-c4; }
.c_sc-h3-r1-c5 { grid-area: sc-h3-r1-c5; }
.c_sc-h3-r1-c6 { grid-area: sc-h3-r1-c6; }/* added for therapies.html */
.c_sc-h3-r1-c7 { grid-area: sc-h3-r1-c7; }
.c_sc-h3-r1-c8 { grid-area: sc-h3-r1-c8; }
.c_sc-h3-r1-c9 { grid-area: sc-h3-r1-c9; }
.c_sc-h3-r1-c10 { grid-area: sc-h3-r1-c10; }
.c_sc-h3-r1-c11 { grid-area: sc-h3-r1-c11; }
.c_sc-h3-r1-c12 { grid-area: sc-h3-r1-c12; }
.c_sc-h3-r1-c13 { grid-area: sc-h3-r1-c13; }
.c_sc-h3-r1-c14 { grid-area: sc-h3-r1-c14; }
.c_sc-h3-r1-c15 { grid-area: sc-h3-r1-c15; }

.c_sc-h4-r1-c1 { grid-area: sc-h4-r1-c1; }
.c_sc-h4-r1-c2 { grid-area: sc-h4-r1-c2; }
.c_sc-h4-r1-c3 { grid-area: sc-h4-r1-c3; }
.c_sc-h4-r1-c4 { grid-area: sc-h4-r1-c4; }
.c_sc-h4-r1-c5 { grid-area: sc-h4-r1-c5; }
.c_sc-h4-r1-c6 { grid-area: sc-h4-r1-c6; }
.c_sc-h4-r1-c7 { grid-area: sc-h4-r1-c7; }/* added for the healing page - therapies section */
.c_sc-h4-r1-c8 { grid-area: sc-h4-r1-c8; }
.c_sc-h4-r1-c9 { grid-area: sc-h4-r1-c9; }
.c_sc-h4-r1-c10 { grid-area: sc-h4-r1-c10; }
.c_sc-h4-r1-c11 { grid-area: sc-h4-r1-c11; }
.c_sc-h4-r1-c12 { grid-area: sc-h4-r1-c12; }

.c_sc-h5-r1-c1 { grid-area: sc-h5-r1-c1; } 
.c_sc-h5-r1-c2 { grid-area: sc-h5-r1-c2; }
.c_sc-h5-r1-c3 { grid-area: sc-h5-r1-c3; }
.c_sc-h5-r1-c4 { grid-area: sc-h5-r1-c4; }
.c_sc-h5-r1-c5 { grid-area: sc-h5-r1-c5; }

.c_sc-h6-r1-c1 { grid-area: sc-h6-r1-c1; } 
.c_sc-h6-r1-c2 { grid-area: sc-h6-r1-c2; }
.c_sc-h6-r1-c3 { grid-area: sc-h6-r1-c3; }
.c_sc-h6-r2-c1 { grid-area: sc-h6-r2-c1; } /* added for the healing page - in my experience */
.c_sc-h6-r2-c2 { grid-area: sc-h6-r2-c2; }
.c_sc-h6-r2-c3 { grid-area: sc-h6-r2-c3; }
.c_sc-h6-r3-c1 { grid-area: sc-h6-r3-c1; }
.c_sc-h6-r3-c2 { grid-area: sc-h6-r3-c2; }
.c_sc-h6-r3-c3 { grid-area: sc-h6-r3-c3; }
.c_sc-h6-r4-c1 { grid-area: sc-h6-r4-c1; }
.c_sc-h6-r4-c2 { grid-area: sc-h6-r4-c2; }
.c_sc-h6-r4-c3 { grid-area: sc-h6-r4-c3; }
.c_sc-h6-r5-c1 { grid-area: sc-h6-r5-c1; }
.c_sc-h6-r5-c2 { grid-area: sc-h6-r5-c2; }
.c_sc-h6-r5-c3 { grid-area: sc-h6-r5-c3; }
.c_sc-h6-r6-c1 { grid-area: sc-h6-r6-c1; }
.c_sc-h6-r6-c2 { grid-area: sc-h6-r6-c2; }
.c_sc-h6-r6-c3 { grid-area: sc-h6-r6-c3; }
.c_sc-h6-r7-c1 { grid-area: sc-h6-r7-c1; }
.c_sc-h6-r7-c2 { grid-area: sc-h6-r7-c2; }
.c_sc-h6-r7-c3 { grid-area: sc-h6-r7-c3; }
.c_sc-h6-r8-c1 { grid-area: sc-h6-r8-c1; }
.c_sc-h6-r8-c2 { grid-area: sc-h6-r8-c2; }
.c_sc-h6-r8-c3 { grid-area: sc-h6-r8-c3; }
.c_sc-h6-r9-c1 { grid-area: sc-h6-r9-c1; }
.c_sc-h6-r9-c2 { grid-area: sc-h6-r9-c2; }
.c_sc-h6-r9-c3 { grid-area: sc-h6-r9-c3; }
.c_sc-h6-r10-c1 { grid-area: sc-h6-r10-c1; }
.c_sc-h6-r10-c2 { grid-area: sc-h6-r10-c2; }
.c_sc-h6-r10-c3 { grid-area: sc-h6-r10-c3; }
.c_sc-h6-r11-c1 { grid-area: sc-h6-r11-c1; }
.c_sc-h6-r11-c2 { grid-area: sc-h6-r11-c2; }
.c_sc-h6-r11-c3 { grid-area: sc-h6-r11-c3; }
.c_sc-h6-r12-c1 { grid-area: sc-h6-r12-c1; }
.c_sc-h6-r12-c2 { grid-area: sc-h6-r12-c2; }
.c_sc-h6-r12-c3 { grid-area: sc-h6-r12-c3; }
.c_sc-h6-r13-c1 { grid-area: sc-h6-r13-c1; }
.c_sc-h6-r13-c2 { grid-area: sc-h6-r13-c2; }
.c_sc-h6-r13-c3 { grid-area: sc-h6-r13-c3; }
.c_sc-h6-r14-c1 { grid-area: sc-h6-r14-c1; }
.c_sc-h6-r14-c2 { grid-area: sc-h6-r14-c2; }
.c_sc-h6-r14-c3 { grid-area: sc-h6-r14-c3; }
.c_sc-h6-r15-c1 { grid-area: sc-h6-r15-c1; }
.c_sc-h6-r15-c2 { grid-area: sc-h6-r15-c2; }
.c_sc-h6-r15-c3 { grid-area: sc-h6-r15-c3; }
.c_sc-h6-r16-c1 { grid-area: sc-h6-r16-c1; }
.c_sc-h6-r16-c2 { grid-area: sc-h6-r16-c2; }
.c_sc-h6-r16-c3 { grid-area: sc-h6-r16-c3; }
.c_sc-h6-r17-c1 { grid-area: sc-h6-r17-c1; }
.c_sc-h6-r17-c2 { grid-area: sc-h6-r17-c2; }
.c_sc-h6-r17-c3 { grid-area: sc-h6-r17-c3; }
.c_sc-h6-r18-c1 { grid-area: sc-h6-r18-c1; }
.c_sc-h6-r18-c2 { grid-area: sc-h6-r18-c2; }
.c_sc-h6-r18-c3 { grid-area: sc-h6-r18-c3; }

/* 	----------------
	Style the footer */

.c_footer {padding: 10px; font-size: 1em; line-height:1.125em; background-color: var(--footer_background); color:var(--footer_color); }

.c_footer_termsOfUse { grid-area: footer_termsOfUse; text-align: left;}
.c_footer_copyright { grid-area: footer_copyright; text-align: center;}
.c_footer_lastUpdated { grid-area: footer_lastUpdated; text-align: right;}

/* 	---------------
	Style artefacts for buttons, internal, and external links */

.c_button_more, .c_button_action { 
	text-align: center; text-decoration: none;
	display: inline-block;
  	font-size: 0.75em; font-family: "Garamond", serif;font-weight: bold;
  	cursor: pointer;
  	border-radius: 10px; 
}

.c_button_more { /* accesses areas internal to the I.T.Matters website where there is more to know before taking an action */
  background-color: var(--button_background); color: var(--button_color); border: 2px solid var(--button_border_color); 
  padding: 5px 10px; margin: 2px 2px;
}

.c_button_action { /* accesses areas internal to the I.T.Matters website to take an action eg join a mailing list, download a file etc */
  background-color: var(--button_color); color:var(--button_background) ; /* swapped the colours to contrast with c_button_more */
	border: 2px solid var(--button_border_color); 
  padding: 4px 6px; margin: 2px 2px;
}

.c_button_more::before {
  content: "read more";
}

.c_button_more:hover {
  background-color: var(--button_hover_background);
  color: var(--button_hover_color);
}

.c_button_action:hover {
  background-color: var(--button_hover_background);
  color: var(--button_hover_color);
}

.c_internal_link { /* to highlight the internal links making them easier to identify at first sight; I did intend to highlight but appears to be too heavy against different backgrounds */
  cursor: pointer; 
}

.c_external_link { /* to highlight the external links; I did have a colour but did not prove right to read; visual cue is enough */
  cursor: url('exit_site_pointer.png'),pointer; /* visual cue of external URL - note: the path is relative to the css file */
}

.c_external_link::after { /* placing a visual cue after the link text */
  content: url('exit_site_icon.png'); /* Replace with your icon, an image url(), or an icon font character - note: the path is relative to the css file */
}