/* ================================================================
  VYASA BRANDING - EARTHY HERITAGE PALETTE
  ================================================================
  ROLE              | HEX CODE   | DESCRIPTION
  ------------------|------------|------------------------------
  Primary Brand     | #894327    | Headings, Active Tabs, Bold UI
  Primary Action    | #b2603b    | Buttons, Links, Main Callouts
  Highlight/Accent  | #ba8075    | Placeholders, Hover accents
  Soft Accent       | #e8c47c    | Item highlights, Selected states
  Page Background   | #e7e5db    | Body background, Main canvas
  UI Background     | #c6c4ab    | Inactive tabs, Dropdown headers
  Borders/Muted     | #9c9b7e    | Textarea borders, Dividers
  Deep Text/UI      | #5b5a42    | Main body text, Tooltips
  ================================================================
*/


:root {
  --color-primary: #894327;
  --color-action: #b2603b;
  --color-highlight: #ba8075;
  --color-accent: #e8c47c;
  --color-bg-page: #e7e5db;
  --color-bg-ui: #c6c4ab;
  --color-border: #9c9b7e;
  --color-text-deep: #5b5a42;
}

/* To use these variables later in your file, you can write:
  color: var(--color-primary); 
  border: 1px solid var(--color-border);
*/

/* ------------------- Navigation Bar -------------*/

/* The sticky bar at the top */
.top-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: var(--color-bg-page); /* Matches your page background */
    border-bottom: 1px solid var(--color-bg-ui); /* Subtle moss/grey border */
    display: flex;
    justify-content: center; /* Centers the links horizontally */
    align-items: center;
    z-index: 1000; /* Ensures it stays above all other content */
}

.nav-links {
    display: flex;
    gap: 40px; /* Space between the links */
}

.nav-links a {
    text-decoration: none;
    font-family: "urw_palladio_itu", serif;
    font-size: 16px;
    color: var(--color-text-deep);
    letter-spacing: 2px;
    transition: opacity 0.3s ease;
}

.nav-links a:hover {
    opacity: 0.6;
    text-decoration: none !important; /* Ensures no hover underline */
}


body {
    padding-top: 60px; 
}


/* ------------------ Fonts -----------------*/

@font-face { 
    
 src: url('../fonts/shobhika-regular.eot') format('embedded-opentype'),
         url('../fonts/shobhika-regular.woff2') format('woff2'),
         url('../fonts/shobhika-regular.woff') format('woff'),
         url('../fonts/shobhika-regular.ttf') format('truetype'),
         url('../fonts/shobhika-regular.svg') format('svg');
	src: url('../fonts/shobhika-regular.otf') format('opentype');
    
	font-family: 'shobhika-regular';
	font-weight: normal;
	font-style: normal;
}

@font-face { 
    
 src: url('../fonts/Sanskrit_2003.eot') format('embedded-opentype'),
         url('../fonts/Sanskrit_2003.woff2') format('woff2'),
         url('../fonts/Sanskrit_2003.woff') format('woff'),
         url('../fonts/Sanskrit_2003.svg') format('svg');
    src: url('../fonts/Sanskrit_2003.ttf') format('truetype');
   
    
	font-family: 'Sanskrit_2003';
	font-weight: normal;
	font-style: normal;
}

@font-face {  

  src: url('../fonts/urw_palladio_itu.eot') format('embedded-opentype'),
         url('../fonts/urw_palladio_itu.woff2') format('woff2'),
         url('../fonts/urw_palladio_itu.woff') format('woff'),
         url('../fonts/urw_palladio_itu.svg') format('svg');
	src: url('../fonts/urw_palladio_itu.ttf') format('truetype');

	font-family: 'urw_palladio_itu';
	font-weight: normal;
	font-style: normal;
}

/* ------------------ Headings -----------------*/

.app-header {
    width: 100%;
    margin: 60px 0 40px 0;
    display: flex;
    justify-content: center;
}

.app-header a {
    display: flex;
    flex-direction: column; /* Stacks H1 above P */
    align-items: center;    /* Centers them both horizontally */
    text-decoration: none;
    color: inherit;
}

.app-header a:hover {
    text-decoration: none !important;
}

/* Dominant Title */
.app-header h1 {
    margin: 0;
    font-family: "urw_palladio_itu", serif;
    font-weight: 400;
    font-size: 80px;        /* Massive size for dominance */
    font-style: italic;
    line-height: 0.9;       /* Tighten line height for impact */
    color: var(--color-text-deep) !important;
    letter-spacing: -2px;    /* Optional: slightly tighter letters for a logo look */
}

/* Tagline */
.tagline {
    margin: 25px 0 0 0;      /* Increased from 10px to 25px */
    font-family: "urw_palladio_itu", serif;
    font-weight: 400;
    font-size: 28px;         /* Smaller, clean size */
    letter-spacing: 4px;     /* Spaced out letters for a modern "tagline" feel */
    color: var(--color-text-deep);
    opacity: 0.8;            /* Slightly faded to keep the focus on Vyāsa */
}

/* Responsive adjustment for phones */
@media (max-width: 768px) {
    .app-header h1 {
        font-size: 60px;
    }
    .tagline {
        font-size: 16px;
        letter-spacing: 2px;
    }
}

/* ------------------ Input and Output -----------------*/

#devin{
color: black;
font-family: "Sanskrit_2003";
font-size: 22px;
white-space: pre-line;
padding: 15px;
line-height: 1.5;
}

#romin{
color: black;
font-family: "urw_palladio_itu";
font-size: 20px;
white-space: pre-line;
padding: 15px;
line-height: 1.5;
}


#devout{
color: black;
font-family: "Sanskrit_2003";
font-size: 20px;
white-space: pre-line;
word-wrap: break-word;
padding: 15px;
line-height: 1.5;
width: 100%;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
resize: both;
margin-top: 0px;
margin-right: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

border: 1px solid var(--color-border); /* Was #ccc - Muted Moss */
background-color: #fcfaf5; /* Subtle off-white for the background */

}

#romout{
color: black;
font-family: "urw_palladio_itu";
font-size: 20px;
white-space: pre-line;
word-wrap: break-word;
padding: 15px;
line-height: 1.5;
width: 100%;
height: 200px;
overflow-x: none;
overflow-y: auto;
resize: both;
margin-top: 0px;
margin-right: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

border: 1px solid var(--color-border); /* Was #ccc - Muted Moss */
background-color: #fcfaf5; /* Subtle off-white for the background */
}

/*-------Other-------*/

#container {
	width: 60%;  
   	margin: 40px auto;
}
	@media screen and (max-width:780px) {
		/* This media query makes the tool fill 90% of screen width on smaller devices, not just 60% */
#container {
	width:90%
}
}

textarea {
	margin-top: 28px;
    /*margin-bottom: 24px;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 200px;
    /*margin-right: 24px;*/
    
    border: 1px solid var(--color-border); /* Was #ccc - Muted Moss */
    background-color: #fcfaf5; /* Subtle off-white for the background */
}


textarea:focus {   
    border-color: var(--color-action); /* Was #188181 - Burnt Orange */
    outline: 0 none;
}

/* Nav links */
a:link, a:visited {
 	color: var(--color-action); /* Was #188181 */
 	text-decoration: none;
}

a:hover, a:active { 
	color: var(--color-primary); /* Was #22B2B2 */
	text-decoration: underline;
}


/*------------- placeholder font -------------------- */


::-webkit-textarea-placeholder { /* WebKit, Blink, Edge */
    font-family: "urw_palladio_itu";
  font-size: 16px;
    color: var(--color-highlight); /* Was #A7AFB2 - Warm Clay */ 
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   font-family: "urw_palladio_itu";
    font-size: 16px;
    color: var(--color-highlight); /* Was #A7AFB2 - Warm Clay */ 
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   font-family: "urw_palladio_itu";
    font-size: 16px;
    color: var(--color-highlight); /* Was #A7AFB2 - Warm Clay */
}
:-ms-textarea-placeholder { /* Internet Explorer 10-11 */
   font-family: "urw_palladio_itu";
    font-size: 16px;
    color: var(--color-highlight); /* Was #A7AFB2 - Warm Clay */  
}
::-ms-textarea-placeholder { /* Microsoft Edge */
   font-family: "urw_palladio_itu";
    font-size: 16px;
    color: var(--color-highlight); /* Was #A7AFB2 - Warm Clay */
}

::placeholder { /* Most modern browsers support this now. */
   font-family: "urw_palladio_itu";
  font-size: 16px;
    color: var(--color-highlight); /* Was #A7AFB2 - Warm Clay */
}


.OutputPlaceholder{
color: var(--color-highlight); /* Was #A7AFB2 - Warm Clay */
font-family: "urw_palladio_itu";
font-size: 16px;
white-space: pre-line;
line-height: 1.5;   
}

/* ------------------ Tool tip -----------------*/

.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-family: "urw_palladio_itu";
  font-size: 14px;
  
  background-color: var(--color-text-deep); /* Dark Olive background */
  color: var(--color-bg-page); /* Cream text */
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  font-family: "urw_palladio_itu";
  
  border-color: var(--color-text-deep) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  font-family: "urw_palladio_itu";
}

/* ------------------ Formatting of Tabs -----------------*/

#btnR {
	margin-left:-4px;
}
@media screen and (max-width:535px) {
		/* This media query stops vertical misalignment on small screens */
#btnR {
	margin-left:0;
	margin=top:-4px;
}
}

/* Style the tab */
.tab {
	overflow: hidden;
	display:inline;
	background-color: var(--color-bg-ui);
	width: 234px;
}
.tab:hover {
  	background-color: var(--color-border);
  	color: white; 
	border: none;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	width: 234px;
	height: 50px;
    border: 1px solid transparent;
    outline: none;
	cursor: pointer;
	padding: 14px;
	transition: 0.3s;
	font-family: "urw_palladio_itu";
	font-size: 20px;
	border-color: var(--color-border);
    color: var(--color-text-deep); /* Was #188181 - Dark Olive text */
}

.tab button.active {
    border: 1px solid transparent;
    background-color: var(--color-primary); /* Was #188181 - Deep Terracotta */
    color: var(--color-bg-page); /* Light Cream text for contrast */
    border-color: var(--color-primary);
}

.tabcontent {
  display: none;
}


/* ------------------ Positioning of Sections -----------------*/


.FOOTER {
    margin-top: 80px;
    width: 100%;
    border-top: 1px solid #b3b3b3; /* Slightly darker than #ccc for better visibility */
    padding-top: 25px;
    clear: both;                  /* Ensures it stays below any floated elements */
    display: block;
}

.FOOTER p {
    margin: 0;
    line-height: 1.6;
    color: #555;                  /* Muted color for footer text */
    text-align: center;           /* Matches your centered header */
}

/*Input and output*/

.BOX {
  margin-top: 30px;
  clear: both;
}

/* ------------------ Formatting of Select Transliteration -----------------*/


/* Adapted from https://www.w3schools.com/howto/howto_custom_select.asp */


/*the container must be positioned relative:*/

.custom-select {
  float:left;
  position: relative;
  font-family: "urw_palladio_itu";
  padding-right: 0px;
  top: 24px;
  width: 234px;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  font-size: 20px;
  background-color: var(--color-bg-ui); /* Was #e1eaea */
  color: var(--color-text-deep); /* Was #188181 */
  border-color: var(--color-border);
}

/*ARROW*/

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 24px;
  right: 14px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: var(--color-text-deep) transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
border-color: transparent transparent var(--color-text-deep) transparent;
  top: 20px;
}


/*style the items (options), including the selected item:*/
.select-items div{
  padding: 14px 0px 14px 24px;
  border: 1px solid var(--color-border);
  border-color: transparent transparent var(--color-border)  transparent;
  cursor: pointer;
  user-select: none;  
  transition: 0.3s;
  
  background-color: var(--color-bg-page); /* Light Cream */
  color: var(--color-text-deep);
  
}



.select-selected {
  color: var(--color-text-deep); 
  font-size: 20px;
  padding: 14px 0px 14px 24px;
  font-size: 20px;
  border: 1px solid transparent;
  border-color: var(--color-border);
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  font-size: 20px;
  background-color: var(--color-bg-ui);
  color: var(--color-text-deep); 
  font-family: "urw_palladio_itu";
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: var(--color-accent); /* Warm Sand highlight */
  color: var(--color-primary);
}


/* ------------------ Formatting of Select Sanskrit Font -----------------*/

.DevFont{
  float:left;
  margin-bottom: 51px;
}


/* ------------------------------------------------------------------------*/


/* ------------------ Landing Page: Earthy Palette ----------------- */

/*.hero {
    text-align: center;
    padding: 50px 20px;
    background-color: var(--color-bg-page);
    border-bottom: 2px solid var(--color-bg-ui);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Make the index H1 match the Vyāsa branding */
/*.hero h1 {
    margin: 50px;
    font-family: "urw_palladio_itu", serif;
    font-weight: 400;
    font-size: 80px;         /* Match the size we set for the app page */
/*    font-style: italic;
    line-height: 0.9;
    color: var(--color-text-deep) !important;
    letter-spacing: -2px;
    text-decoration: none;
}

.hero p {
    font-family: "urw_palladio_itu";
    font-size: 24px;
    color: var(--color-text-deep); /* Dark Olive for readability */
/*    margin-bottom: 50px;
    margin-top: 50px;
}

.cta-button {
    background-color: var(--color-action); /* Burnt Orange */
/*    color: var(--color-bg-page) !important; 
    padding: 18px 40px;
    font-family: "urw_palladio_itu";
    font-size: 22px;
    border-radius: 4px;
    border: none;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.cta-button:hover {
    background-color: var(--color-primary); /* Darken on hover */
/*    transform: translateY(-2px);
    text-decoration: none !important;
}

*/
/*
.feature-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 60px;
    padding-bottom: 60px;
    flex-wrap: wrap; /* Allows items to wrap to the next line on small screens */

/*}


.feature-item {
    flex: 1 1 300px; /* Grow to fill space, shrink if needed, base width of 300px */

/*    background: #f4f2e9; /* Slightly lighter than hero for contrast */
/*    padding: 25px;
    border-radius: 8px;
    border-bottom: 4px solid var(--color-highlight); /* Clay Accent */
/*    text-align: center;
}




/*.feature-item p {
    font-family: "urw_palladio_itu";
    font-size: 17px;
    color: var(--color-text-deep);
    line-height: 1.6;
}
*/


/* Links throughout the site */
/*a:link, a:visited {
    color: var(--color-action);
}

a:hover {
    color: var(--color-primary);
} */


/* -------------------------------- Table Formatting ------------------------- */

/* Container for the table */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
}

.mapping-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-family: "urw_palladio_itu";
}

/* -------------------------------- Table Formatting ------------------------- */

/* Header styling - Reduced padding from 18px to 10px */
.mapping-table th {
    background-color: #f8f5f2;
    color: var(--color-primary);
    padding: 10px 8px; /* Tighter vertical padding */
    text-align: center;
    border: 1px solid #eee;
    font-size: 16px;
    letter-spacing: 2px;
    font-family: "urw_palladio_itu";
}

/* Data cells - Reduced padding from 14px to 6px */
.mapping-table td {
    padding: 6px 14px; /* 6px top/bottom, 14px left/right */
    border: 1px solid #f0f0f0;
    text-align: center;
    font-size: 20px; 
    color: #5b5a42;
    font-family: "urw_palladio_itu";

    position: relative;
}

/* Tooltip text */
.mapping-table td:hover::after {
    content: "Click to copy to clipboard";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none; /* Prevents tooltip from interfering with clicks */

    background-color: var(--color-text-deep); /* Dark Olive background */
    color: var(--color-bg-page); /* Cream text */
}

/* Devanāgarī column - Reduced padding and set line-height */
.mapping-table td.dev {
    font-family: "Sanskrit_2003", "shobhika-regular";
    font-size: 22px;
    color: #000;
    line-height: 1.2; /* Tighter line height for the Sanskrit glyphs */
    vertical-align: middle;
    padding: 4px 14px; /* Even tighter because Devanagari glyphs are tall */
}

/* Category separator rows - Reduced padding from 20px to 12px */
.row-category td {
    background-color: #fdfdfd;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 3px;
    color: #5b5a42;
    text-align: left;
    padding: 12px 25px; /* Scaled down to match new table density */
    border-left: 5px solid var(--color-primary);
    font-family: "urw_palladio_itu";
}

/* Visual polish for rows */
.mapping-table tbody tr:nth-child(even):not(.row-category) {
    background-color: #fafafa;
}

.mapping-table tbody tr:not(.row-category):hover {
    background-color: #fffcf9;
}

.mapping-table td {
    cursor: pointer; 
    transition: background-color 0.2s;
}

.mapping-table td:hover:not(.row-category) {
    background-color: #f9f9f9; /* Subtle highlight on hover */
}


/* Verse in praise of Vyasa */

.about {
    max-width: 800px;
    padding: 10px 0;
}

.about p {
	font-family: "urw_palladio_itu";
    font-size: 15px;
    color: var(--color-text-deep);
    line-height: 1.6;
}


.verse-section {
    padding: 30px 20px;
    text-align: center;
    margin: 40px 0;
}

.verse-container {
    max-width: 800px;
    margin: 0 auto;
}

.verse-container h3 {
    color: var(--color-action);
    font-family: "urw_palladio_itu";
    font-size: 24px;
}

.devanagari {
	font-family: "Sanskrit_2003";
    font-size: 2.2rem;
    color: black; 
    margin: 10px 0;
    line-height: 1.5;
    font-weight: normal;
}

.iast {
    font-size: 1.1rem;
    font-style: italic;
    color: #7f8c8d;
    margin-bottom: 20px;
    font-family: "urw_palladio_itu", "Georgia", serif;
}

.translation {
    font-weight: 300;
    font-family: "Georgia", serif;
    font-size:  1.2rem;
    color: var(--color-text-deep);
    line-height: 1.6;
}

.source {
    display: block;
    margin-top: 15px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #95a5a6;
    font-family: "Georgia", serif;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .devanagari {
        font-size: 1.7rem;
    }
    .iast {
        font-size: 0.9rem;
    }
    .translation {
        font-size: 1.1rem;
    }
}


/* Copy to clipboard button */


.copy-button {
	min-width: 200px; 
    margin: 10px 0px;
    padding: 7.5px 20px;
    background-color: var(--color-bg-page); 
    color: var(--color-text-deep); /* Dark Olive background */
    /*color: var(--color-text-deep);  /* Cream text */
    border: 1px solid transparent;
    border-color: var(--color-text-deep)
    /*border-radius: 10px;*/
    cursor: pointer;
    font-family: "Georgia", serif;
    transition: background 0.2s;
    white-space: nowrap; /* Prevents "Copy" from wrapping */
}

.copy-button:hover {
    background-color: var(--color-text-deep); /* Dark Olive background */
    color: var(--color-bg-page); /* Cream text */
}

.copy-button:active {
    transform: scale(0.98); /* Tactile click feel */
}