/*
	TYPOGRAPHY STYLESHEET — using Akhil HE as primary font

	# rem	→ for font sizes and vertical spacing (consistent rhythm)
	# em	→ only for inline scaling relative to local font size
	# px	→ avoid, unless exact control is required for UI details

	Note: "Akhil HE" renders Latin text smaller than usual for same
	font-size in other fonts.	*/

/*
	The I M P O R T A N T note:

	Firefox does not allow us to load woff files from another domain; 
	read: Cross-Origin Resource Sharing - Fonts etc_.odt

	The folowing font-face 'Akhil HE' will not be in Anuchchhed.css.

	Whenever I edit this file, I have to edit Anuchchhed.css as well.

	Anuchchhed.css will only use default fonts, while this file 
	akhil-he-wof.css will use the font Akhil HE that I designed. 

	The skeleton.css that I downloaded will also have following font-face.
*/

/*	This file will have mainly 
	Semantic tags
	which not only style content 
	but also convey the meaning and structure of documents
	these tags don't style/define layouts of the documents. */

/*	This style sheet should not be used with
	Anuchchhed.css or saral-shailee.css
	they also contains similar tags! */

/*	Font face	*/

@font-face {
	font-family: 'Akhil HE';
	src: url('Akhil_HE.woff2') format('woff2'),
			 url('Akhil_HE.woff') format('woff');
	font-display: swap;
}

/*	Base text	*/

html {
	font-size: 16px; /*	root scaling reference	*/
}

body {
	font-family: 'Akhil HE', 'Noto Sans', 'Arial Unicode MS', Arial, sans-serif;
	font-size: 1.4rem;		 /*	~22px body text for balance	*/
	line-height: 1.30;		 /*	extra breathing space for Devanagari matras	*/
	color: #302010;
}

/*	Class that prefers Akhil HE but at present it is not needed 
	as the body has the same font-family	*/

.akhil-he {
	font-family: 'Akhil HE', 'Noto Sans', 'Arial Unicode MS', Arial, sans-serif;
}

/*	Class to prefer Unicode fallback fonts for displaying Unicode characters
	not present in Akhil HE
	It is not necessary in Anuchchhed but may keep it there to provide an easy switch 
	between these style sheets	*/

.uni-ch {
	font-family: 'Noto Sans', 'Arial Unicode MS', Arial, sans-serif;
	font-size: 0.75em; /*	75% of parent text size; that is why 'em' is used	*/
}

/*	Paragraphs	*/

p {
	margin: 0.4rem 0;
	font-size: 1.4rem;
	text-align: left;
}

p.imp	{ color: #DD4400; }
p.right { text-align: right; }
p.big	{ font-size: 1.6rem; }
p.small { font-size: 1.2rem; margin: 0.3rem 0; }

p.sheerSh { font-size: 1.3rem; margin: 0.3rem 0 0.4rem; }
p.paaNnv  { font-size: 1.3rem; margin: 0.4rem 0 0.3rem; }

p.tiny { font-size: 1rem; margin: 0.2rem 0; }

/* a tiny paragraph inside #menu for copyright messages 
   requires extra padding mainly on left side to avoid 
   touching to the edge. */

#menu p.tiny { padding-left: 0.8rem; }

/*	Headings	*/

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

/*	Sizes tuned for Akhil HE	*/

h1 { font-size: 2.3rem; margin: 0.9rem 0 0.35rem; }
h2 { font-size: 2.0rem; margin: 0.8rem 0 0.3rem; }
h3 { font-size: 1.8rem; margin: 0.7rem 0 0.25rem; }
h4 { font-size: 1.6rem; margin: 0.6rem 0 0.2rem; }
h5 { font-size: 1.5rem; margin: 0.5rem 0 0.2rem; }
h6 { font-size: 1.4rem; margin: 0.4rem 0 0.2rem; }

/*	Consecutive headings → tighter gap	*/
/*	if any heading is followed immediately by any other heading → remove margin	*/

:is(h1,h2,h3,h4,h5,h6) + :is(h1,h2,h3,h4,h5,h6) {
	margin-top: 0.4rem;
}

/* Smaller variants */
h1.small { font-size: 1.9rem; margin: 0.7rem 0 0.3rem; }
h2.small { font-size: 1.6rem; margin: 0.6rem 0 0.25rem; }
h3.small { font-size: 1.4rem; margin: 0.5rem 0 0.2rem; }


/*	Decorative gradient headings (h1–h4 only)	*/

h1, h2, h3, h4 {
	background: linear-gradient(180deg, #884400, #AA5500);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*	Lists	*/

ul, ol {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	/* padding-inline-start: 1.4rem; ? */
	font-size: 1.4rem;
}

li {
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
}

/*	Tables	*/

table {
	font-size: 1.4rem;
	margin-left: 0.6rem;
	margin-right: 0.4rem;
}

.big-table { font-size: 1.6rem; }

th, td { vertical-align: top; }

/*	Inline text	*/

em {
	font-style: normal;
	color: #884444;
}

strong {
	font-weight: normal;
	background-color: #faff70;	/* Greenish-yellow highlight */
	color: #000;
	padding: 0.1em 0.2em;
	border-radius: 0.12em;
}

span.underline { text-decoration: underline; }

.dim { opacity: 0.75; font-style: italic; }

/*	Links - Hypertext styles	*/

a:link {
	color: #663333; text-decoration: none; }

a:visited {
	color: #996666; text-decoration: none; }

a:hover {
	color: #880088; text-decoration: none; }

a:active {
	color: blue; background-color: #BBBBBB; text-decoration: none; }
	/* generally not consistently visible due to their momentary nature */

/*	Forms	*/

/* Browsers often apply default system fonts for form elements (like textarea, input, select), 
ignoring parent or body font-family unless explicitly set or inherit(ed) */

textarea, input, button, select {
	font-family: inherit;
}

textarea {
	width: 100%;
	margin: 0.2rem 0;
	padding: 0.3rem;
	font-size: 2rem;
	border: 0.1em solid #7b00ff;
	border-radius: 0.12em;
	box-sizing: border-box;
	resize: vertical;
}

/* Optional: Add hover effect */

textarea:hover {
	border-color: #0056b3;
}

/* Form styles */

form {
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
}


label {
	font-size: 1.5rem;
	margin: 0.3rem 0.6rem 0.5rem 0;
	color: #333;
}

/* Style for the OK button */

input[type="submit"] {
	background-color: #007bff;
	color: #fff;
	border: none;
	padding: 0.6em 1em;
	font-size: 1.5rem;
	cursor: pointer;
	margin-top: 0.31em;
	margin-bottom: 0.31em;
	margin-right: 0;
	margin-left: 0;
}

input[type="submit"]:hover {
	background-color: #0056b3; }

input[type="text"],
input[type="email"] {
	border: 0.06em solid #ccc;
	border-radius: 0.25em;
	padding: 0.4em 0.6em;
	font-size: 1.4rem;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	margin-right: 0.4em;
	margin-left: 0;
}
input[type="text"]:hover,
input[type="text"]:focus {
	border-color: #007bff;
}
input[type="email"] { width: 24ch; }

/*	Input container (URL field width)	*/

.input-container {
	width: 37rem; /* was 600px → 600/16 = 37.5rem */
}

.input-container input[type="text"] {
	width: 100%;
}

/*	Utility classes	*/
/*	'center' to be deleted in future and only 'madhya' is to be used	*/
.center, .madhya { text-align: center; }

.vspace-1 { height: 0.5rem; }
.vspace-2 { height: 1.0rem; }
.vspace-3 { height: 1.5rem; }
.vspace-4 { height: 2.0rem; }

/* AdhoAntar = margin-bottom */

.AdhoAntar {
  margin-bottom: 1rem;
}

.AdhoAntar-0_2in {
  margin-bottom: 1.2rem;
}

.AdhoAntar-0_3in {
  margin-bottom: 1.8rem;
}

/* OONnchaaEE line-heights
	to be removed and newer once to be introduced to remove references of inch (in) */

.OONnchaaEE-0_2in {
  line-height: 1.2rem;
}

.OONnchaaEE-0_3in {
  line-height: 1.8rem;
}

/* .smaller { font-size: smaller; } - to be deleted in 2026! */

.smaller {
  font-size: smaller; /* one step smaller = about 87.5% */
}

.smaller-1 {
  font-size: 0.875em; /* one step smaller = 87.5% */
}

.smaller-2 {
  font-size: 0.75em;  /* two steps smaller = 75% */
}

/*	Letter spacing
	increases space between characters	*/

.loose-letter-spacing-1 { letter-spacing: 0.05em; }
.loose-letter-spacing-2 { letter-spacing: 0.1em; }
.loose-letter-spacing-3 { letter-spacing: 0.15em; }

/*	Definition lists	*/

dl { margin: 0; padding: 0; }

dt {
	font-weight: bold;
	font-size: 1.5rem;	/* whether should be em */
	margin-top: 0.5rem;
}

dd {
	color: #333;
	font-size: 1.3rem;
	margin: 0.2rem 0 0.6rem 1.5rem;
}

/* Words within lang="hi-Latn" will only break at explicit spaces 
                                 (not within long words or at syllables) */
/* If we ever want to add a manual line break, we can use <wbr> or &shy (soft hyphens); */

[lang="hi-Latn"] {
	word-break: keep-all;
	hyphens: manual;
}

/*	Responsive text switching	*/
/* Show/hide alternative text lengths:
   - By default, show the longer version and hide the short one
   - On smaller screens (≤400px), swap: show short, hide long
   This keeps both texts in HTML for SEO + accessibility */

.short { display: none; }
.long	{ display: inline; }

@media (max-width: 500px) {
	.short { display: inline; }
	.long	{ display: none; }
}

/* though -f is for footer; but we may use these classes anywhere we wish */

.short-f { display: none; }
.long-f	{ display: inline; }

@media (max-width: 600px) {
	.short-f { display: inline; }
	.long-f	{ display: none; }
}

/* PureCSS overrides (menus)	*/
/* common overrides to Pure (for Side-menu layout) are in:
   our-overrides-on-pure.css
   even these styles can be shifted there
   
   following are overrides to reduce space between list item which 
   increases because of selection of Akhil HE
   
   So this will not be in the Anuchchhed.css.
*/

.pure-menu-link {
	padding-top: 0;
	padding-bottom: 0;
}
.pure-menu-list {
	margin: 0;
	padding: 0;
}


/*	For our Font

	Slightly Increase line-height for Devanagari text runs [on multiple lines].
	Devanagari characters have matras above and below the baseline,
	so extra vertical spacing (1.36 × font-size) improves readability.
	Latin text is usually fine with tighter spacing.

span.incr-ln-ht-nagari {
  line-height: 1.4;
}

*/