/* ============================================================================
Base Styles | Patel Rebelo – Visual Artist
----------------------------------------------------------------------------
Purpose:
- Defines global resets and base typography
- Establishes responsive font scaling across breakpoints
- Provides shared layout primitives for all pages
- Normalizes touch and interaction behavior

Key Features:
- Global box-sizing reset
- Custom font-face declaration
- Responsive typography for mobile, tablet, and desktop
- Flexible layout system using flexbox
- Reusable navigation and banner styling
- Infinite horizontal scrolling banner animation

Scope:
- Applied site-wide across all pages
- Intended to be loaded before page-specific styles

Author:
Pedro Guerra – pnpguerra@gmail.com

Last Updated:
10-01-2026
============================================================================
*/




/* ============================================================================
   GLOBAL RESET & BASE SETTINGS
   ----------------------------------------------------------------------------
   - Ensures predictable box sizing
   - Defines base typography and color palette
   ============================================================================ */


/* ========================== FONT DECLARATION ========================== */
   
@font-face {
	font-family: 'Tex Gyre Heros';
	src: url('https://patelrebelo.com/fonts/texgyreheros-regular-webfont.woff2') format('woff2'),
       url('https://patelrebelo.com/fonts/texgyreheros-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
html,
body {
	font-family: 'Tex Gyre Heros', sans-serif;
	color: #000066;
	margin-left: 0px;
	font-size: 100%;
	margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}

/* ============================================================================
   INTERACTION NORMALIZATION
   ----------------------------------------------------------------------------
   - Removes tap highlight and text selection
   - Improves touch interaction on mobile devices
   ============================================================================ */
a img, img, a, button  {
  	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	outline: none;
}

/* ============================================================================
   RESPONSIVE TYPOGRAPHY
   ----------------------------------------------------------------------------
   - Scales base font size for tablets and desktop
   ============================================================================ */
@media (min-width: 600px) {
	body { font-size: 1.0625rem; }   /* 17px on small tablets */
}
@media (min-width: 1024px) {
	body { font-size: 1.125rem; }    /* 18px on desktop */
  
	.modal p {
		font-size: 0.9rem;
	}
	.fontSizeSmaller {
		font-size: 0.8rem;
	}
}

@media (max-width: 1024px) {
  .modal p {
    font-size: 0.85rem;
  }

  .fontSizeSmaller {
    font-size: 0.76rem;
  }
}

/* ============================================================================
   LINKS
   ----------------------------------------------------------------------------
   - Maintains consistent color and subtle hover feedback
   ============================================================================ */
a{
	color: #000066;
	transition: all 400ms ease;
}

a:hover{
	color: #000066;
	opacity: 0.8;
}

header a { 
	text-decoration: none;
}
header{ 
	margin: 0px 10px;
}

/* ============================================================================
   HORIZONTAL RULE
   ----------------------------------------------------------------------------
   - Custom divider styling
   ============================================================================ */
   
hr {
	display: block;
	height: 1px;
	background-color: #000066;
	border: none;
	box-sizing: border-box;
}

/* ============================================================================
   MAIN LAYOUT
   ----------------------------------------------------------------------------
   - Two-column layout on wide screens
   - Stack layout on smaller devices
   ============================================================================ */

.content-wrapper {
	display: flex; /* flexbox for horizontal alignment */
	gap: 3rem;  
	width: 100%; /* full width to ensure both elements align properly */
	padding: 1rem; 
	overflow: hidden;
}

/* disable text selection and tap highlight where needed */
.no-highlight {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	outline: none;
}

.inform {
  flex: 1;   
  
} 

.left{
	width: 50%;
	padding-right: 2%;
}
.right {
	width: 50%;	 
}
/* ========================== NAVIGATION ========================== */
nav {
	width: fit-content;
	padding-bottom: 1rem;
}

#homeDiv { 
	margin-bottom: 100%;
	line-height: 1;
  }

nav .nav-links {
	position: static;
	gap: 2rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	opacity: 1;
}

nav .link {
    text-decoration: none;
    font-weight: 500;
}

nav .nav-links .link:hover {
    opacity: 0.5;
}

/* ============================================================================
   MOVING TEXT BANNER
   ----------------------------------------------------------------------------
   - Fixed horizontal scrolling banner at bottom of viewport
   ============================================================================ */
@keyframes infiniteScroll {
	from {transform: translateX(0)}
	to {transform: translateX(calc(0px - 50%));}
}
.horizontal {
	z-index:100;
	font-size: 90%;
	position: fixed;
	bottom: 0;
	background-color: white;
	display: flex;
    width: 100vw;
    margin: 0px;
    padding: 0px;
	
}
#hsi{
	border-top: 1px solid #000066; 
}
.horizontal-scrolling-items {
	display: flex;
	animation-name: infiniteScroll;
	animation-duration: 45s; 
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.horizontal-scrolling-items__item {
	white-space: nowrap;
}

/* ========================== NARROW DEVICES LAYOUT ========================== */
@media screen and (max-width: 1200px){

	nav {
		width: 100%;
		margin: 0 auto 2rem;
	}
	
	.content-wrapper {
		flex-direction: column; /* stack nav and inform vertically on narrow screens */
	}
	
	#home {
		display: block; 
		width: 100%; 
		margin-left: 0%;
		text-align: left;
	}
	
	#homeDiv { 
		margin-top: 0%;
		margin-bottom: 15%;
	}
  
	nav .nav-links{
		position: static;
		width: 100%;
		margin-top: 2%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap; 
		width: 100%;
		justify-content: space-between; /* distribute links horizontally */
		gap: 1rem;

	}
	nav .nav-links .link {
		flex: 1;                 /* each link gets equal width */
		text-align: center;      /* center text */
	}
}