/* ==========================
   GLOBAL VARIABLES
   ========================== */
:root {
    --primary: #C2A35D;
    --primary-dark: #6b5a31;
    --bg-light: #f4f6f8;
    --text-dark: #333;
    --card-bg: #ffffff;
    --subtitle: #ebebeb;
    --important: red;
}

.important-char {
    color: var(--important); /* your red color */
    font-weight: bold;        /* makes it bold */
    font-size: 1.5rem;        /* adjust size as needed */
}

.important-text {
    color: rgb(143, 143, 143);
}

/* ==========================
   GLOBAL TYPOGRAPHY
   ========================== */

p {
    margin-bottom: 16px;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 16px;
    line-height: 1.3;
}

ul {
    margin: 16px 0;
    padding-left: 20px;
}

li {
    margin-bottom: 10px;
}

/* ==========================
   GLOBAL RESET & BODY
   ========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);

    /* Page fade-in */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

body.loaded {
    opacity: 1;
}

input, button {
    font-family: inherit;
}

/* ==========================
   HEADER
   ========================== */
.header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.header-content {
    padding: 25px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    width: 70px;
}

.header-text h1 {
    font-size: 2rem;
    margin-bottom: 0;
}

.header-text p {
    opacity: 0.85;
    margin-bottom: 0;
}

/* ==========================
   NAV / BUTTONS
   ========================== */
.header-buttons {
    display: none;
    position: absolute;
    top: 70px;
    right: 24px;
    flex-direction: column;
    background: white;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.header-buttons.active {
    display: flex;
}

.header-button {
    background-color: white;
    color: var(--primary);
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.header-button:hover {
    background-color: #e6ecf5;
    transform: translateY(-3px);
}

.hamburger {
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease; /* smooth vertical movement */
    color: white;
}

/* Lift on hover */
.hamburger:hover {
    transform: translate(3px, -3px); /* move up 3px */
    font-weight: 900;
}


/* ==========================
   REUSABLE CARDS
   ========================== */
.card {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.status-message {
    margin-top: 15px;
    font-weight: bold;
    text-align: center;
    
    /* The core of the fade effect */
    opacity: 0;
    transition: opacity 1.2s ease-in-out; 
    pointer-events: none; /* Prevents invisible text from being clickable */
}

.status-message.show {
    opacity: 1;
}

.shrink-me {
  /* Using 'em' makes it relative to the H1 size */
  font-size: 0.4em; 
  
  /* Optional: move it up like a superscript */
  vertical-align: super; 
  
  /* Optional: make it less chunky than the H1 */
  font-weight: normal; 
  
  /* Optional: fade it slightly */
  color: rgb(207, 207, 207); 
}

.site-footer {
    background-color: #f8f9fa; /* Light grey background */
    color: #555;               /* Soft dark grey text */
    padding: 20px 0;           /* Space above and below */
    text-align: center;        /* Centers text for simple layouts */
    border-top: 1px solid #e1e1e1; /* Subtle line to separate from content */
    font-family: sans-serif;   /* Clean font */
    font-size: 14px;           /* Standard footer text size */
    width: 100%;
}

.site-footer p {
    margin: 0;                 /* Removes default paragraph spacing */
}

.site-footer a {
    color: #007bff;            /* Makes the phone number blue */
    text-decoration: none;     /* Removes underline */
    font-weight: bold;
}

.site-footer a:hover {
    text-decoration: underline; /* Adds underline back when hovering */
}

.logoFooter {
    /* Adjust this height to match your text size */
    height: 24px; 
    width: auto; /* Maintains the aspect ratio */
    
    /* This aligns the logo vertically with the middle of the text */
    vertical-align: middle; 
    
    /* Adds a little space between the logo and the word "Copyright" */
    margin-right: 10px; 
    
    /* Optional: If your logo is very bright, this softens it to match the footer */
    opacity: 0.8;
}

/* Ensure the footer paragraph handles the image and text together */
footer p {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Helps on small mobile screens */
    line-height: 1.5;
}