Template:MainHeader

/* Main Header Box - Minimalist and No Background */ .tg-mainpage-header {

 /* REMOVED: Background is removed, now transparent */
 background: none;
 /* Vertical padding sets the distance of elements from the top of the page */
 padding: 4rem 2rem;
 /* Default text color set for light theme */
 color: #222222; 
 text-align: center;
 user-select: none;
 transition: background-color 0.3s ease;

}

/* Content Area */ .tg-mainpage-content {

 max-width: 900px;
 margin: 0 auto;

}

/* Wiki Wordmark */ .tg-mainpage-header-wordmark {

 font-family: 'Inter', sans-serif;
 font-weight: 800;
 font-size: 3.5rem;
 margin-bottom: 0.5rem;
 /* ADJUSTED: Text color changed to be dark for light backgrounds */
 color: #1a1a1a; 
 /* REMOVED: Shadow effect is unnecessary in light theme */
 text-shadow: none; 

}

/* Tagline */ .tg-mainpage-header-tagline {

 font-family: 'Inter', sans-serif;
 font-size: 1.1rem;
 /* ADJUSTED: Text color changed to a standard gray */
 color: #555555; 
 margin-bottom: 2rem;
 font-weight: 400;

}

/* Search Button - Size Reduced */ .tg-mainpage-header-search {

 font-family: 'Inter', sans-serif;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 background-color: #FF5733; /* Orange accent color is kept */
 color: #ffffff;
 font-weight: 600;
 /* REDUCED: Font size and inner padding decreased */
 font-size: 0.9rem;
 padding: 0.6rem 1.5rem; 
 border-radius: 9999px;
 cursor: pointer;
 user-select: none;
 border: none;
 transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
 /* ADJUSTED: Shadow adapted for a light background */
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 

}

/* Button Interactions */ .tg-mainpage-header-search:hover, .tg-mainpage-header-search:focus {

 background-color: #ff6f4e;
 transform: scale(1.05); /* Scale effect is kept */
 outline: none;
 /* ADJUSTED: More prominent shadow suitable for light theme */
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);

}

.tg-mainpage-header-search:active {

 background-color: #e64a2e;
 transform: scale(1);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}

/* Search Icon */ .home-header__searchIcon {

 display: inline-block;
 width: 16px;
 height: 16px;
 mask-image: url('/w/images/a/a5/WikimediaUI-Search.svg');
 mask-repeat: no-repeat;
 mask-size: contain;
 background-color: currentColor;

}

/* --- DARK MODE (Activates if user's system is in dark mode) --- */ @media (prefers-color-scheme: dark) {

 /* In dark mode, there will also be no background, only text colors will change */
 .tg-mainpage-header-wordmark {
   color: #ffffff;
   /* Let's bring back the glow effect in dark mode */
   text-shadow: 0 0 12px rgba(255, 87, 51, 0.25);
 }

 .tg-mainpage-header-tagline {
   color: #a0a0a0;
 }
 
 .tg-mainpage-header-search {
   /* Let's update the button's shadow to an orange glow for dark mode */
   box-shadow: 0 4px 15px rgba(255, 87, 51, 0.2);
 }

 .tg-mainpage-header-search:hover,
 .tg-mainpage-header-search:focus {
   box-shadow: 0 6px 20px rgba(255, 87, 51, 0.4);
 }

 .tg-mainpage-header-search:active {
   box-shadow: 0 4px 15px rgba(255, 87, 51, 0.2);
 }

}