/* =====================================================================
   shared.css
   Styles shared across ALL pages: contact header, body defaults, fonts.
   Import this file into every HTML page with:
     <link rel="stylesheet" href="shared.css">
   ===================================================================== */

@font-face {
    font-family: 'Obra Letra';
    src: url('fonts/KCObraLetraRegular.ttf'), format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NotoSerifGeorgian';
    src: url('fonts/NotoSerifGeorgian-VariableFont_wdth,wght.ttf'), format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* --- CSS CUSTOM PROPERTIES (Variables) ---
   Define your color palette and fonts once here.
   To change the site's look, edit these values — they update everywhere. */
:root {
  --color-bg: #f1e9e6;
  /* Change this hex code to change the background on all pages at once. */

  --color-text: #1a1a1a;
  /* Near-black for all body text. Slightly softer than pure #000000. */

  --color-header-bg: #Cfc7c4;
  /* Slightly darker blush for the contact header bar.
     Original: #D6C5BF */

  --color-btn: #Cfc7c4;
  /* Change to any color to restyle the buttons. */

  --color-btn-hover: #bab3b0;
  /* Slightly darker version of --color-btn shown on mouse hover.
     To change the hover effect, edit this color. */

  --color-link: #1a1a1a;
  /* Color of links in the contact header. Change to e.g. #5a3e36 for a warm brown. */

  --font-display: 'Obra Letra', Georgia, serif;
  /* The dramatic font used for big headings. */

  --font-body: 'NotoSerifGeorgian', Georgia, serif;
  /* The refined serif font for body text and labels.
     Georgia and serif are fallbacks if the Google Font doesn't load. */
}


/* --- UNIVERSAL BOX SIZING ---
   Makes padding and borders included in element widths (easier layout math).
   Keep this — removing it can break spacing. */
*, *::before, *::after {
  box-sizing: border-box;
}


/* --- BODY BASE STYLES ---
   Sets the default look for the entire page. */
body {
  margin: 0;
  /* Removes the default browser margin around the page edges. */

  padding: 0;
  /* Removes default browser padding. */

  background-color: var(--color-bg);
  /* Uses the blush background color defined above. */

  color: var(--color-text);
  /* Uses the near-black text color defined above. */

  font-family: var(--font-body);
  /* Sets the default font for all body text. */

  font-size: 17px;
  /* Base font size. Increase (e.g. 19px) for larger text, decrease for smaller.
     All rem-based sizes scale relative to this value. */

  line-height: 1.7;
  /* Controls spacing between lines of text. 1.7 is comfortable for reading.
     Decrease to 1.4 for tighter text, increase to 2 for more airy spacing. */
}


/* =====================================================================
   CONTACT HEADER
   The top bar showing your email, phone, and social links.
   Appears on every page via shared.css.
   ===================================================================== */

.contact-header {
  background-color: var(--color-header-bg);
  /* Background color of the contact bar. Edit --color-header-bg in :root to change. */

  padding: 10px 24px;
  /* Top/bottom and left/right padding inside the bar.
     Increase the first number (10px) to make the bar taller.
     Increase the second (24px) to add more side padding. */

  text-align: center;
  /* Centers all the contact info. Change to "left" or "right" if preferred. */

  font-family: var(--font-body);
  /* Uses the body serif font. Change to var(--font-display) for the decorative font. */

  font-size: 16px;
  /* Size of text in the contact bar. Adjust as needed. */

  letter-spacing: 0.04em;
  /* Adds slight spacing between letters for elegance. 0 removes it. */

  border-bottom: 1px solid #BBA89F;
  /* A subtle bottom border separating the header from the page content.
     Change 1px to 0 to remove it, or increase to 2px for a bolder line.
     Change #BBA89F to any color. */

   display: flex;

   align-items: center;
}

.header-logo {
  /* The clickable logo container anchored to the left side of the header. */
 
  flex-shrink: 0;
  /* Prevents the logo from being squished if the header runs out of space. */
 
  display: flex;
  align-items: center;
  /* Centers the logo image or text vertically. */
 
  text-decoration: none;
  /* Removes underline if the logo is wrapped in an <a> tag. */

  width: 60px;
}
 
.header-logo-img {
  /* Styles for an image-based logo (e.g. a PNG or SVG file). */
 
  height: 36px;
  /* Controls how tall the logo image appears. Increase for a larger logo.
     Width adjusts automatically to preserve the image's proportions. */
 
  width: auto;
  /* Keeps the image proportions correct. Don't change this. */
 
  display: block;
  /* Removes the small gap that appears below inline images. Keep this. */
 
  object-fit: contain;
  /* Makes sure the whole logo is visible without cropping. Keep this. */
}

.header-logo-spacer {
  flex-shrink: 0;
  width: 60px;
  /* Must match the width value in .header-logo above.
     Change both to the same number if you need a wider logo slot. */
}

.contact-inner {
  display: flex;
  /* Lays out the contact items in a horizontal row. */

  justify-content: center;
  /* Centers the row of items horizontally. */

  align-items: center;
  /* Vertically centers items within the bar. */

  flex-wrap: wrap;
  /* Allows items to wrap to a new line on very small screens. */

  gap: 6px 14px;
  /* Spacing between items: 6px vertical (when wrapped), 14px horizontal.
     Increase 14px to spread items further apart. */

  flex: 1;

  text-align: center;
}

.contact-item {
  /* Each individual piece of contact info (email, phone, link). */
  white-space: nowrap;
  /* Prevents a single contact item from breaking across lines. */
}

.contact-item a {
  color: var(--color-link);
  /* Link color. Edit --color-link in :root to change. */

  text-decoration: none;
  /* Removes the default underline from links. */

  transition: opacity 0.2s;
  /* Smooth fade effect on hover. 0.2s is the speed — increase for slower fade. */
}

.contact-item a:hover {
  opacity: 0.65;
  /* Makes the link slightly transparent when hovered, as a hover indicator.
     0 = invisible, 1 = fully opaque. Adjust as desired. */
}

.contact-divider {
  color: #9e8880;
  /* Color of the "|" separator between contact items. */

  font-size: 14px;
  /* Size of the divider character. */

  user-select: none;
  /* Prevents the "|" from being accidentally selected when copying text. */
}

@media (max-width: 640px) {
  /* Applies when the screen is 540px wide or narrower (most phones).
     Increase to 640px if you also want tablets to use the stacked layout. */
 
  .contact-header {
    flex-direction: column;
    /* Stacks logo and contact info vertically instead of side by side. */
 
    align-items: center;
    /* Centers both rows horizontally. */
 
    padding: 10px 16px;
    /* Slightly more top/bottom padding, less side padding on mobile. */
 
    gap: 6px;
    /* Space between the logo row and the contact info row when stacked.
       Increase for more breathing room between them. */
  }
 
  .header-logo {
    width: auto;
    /* Release the fixed 60px width — not needed when stacked vertically. */
  }
 
  .header-logo-spacer {
    display: none;
    /* Hide the invisible spacer entirely — it's only needed for horizontal
       centering, which doesn't apply in the stacked mobile layout. */
  }
 
  .contact-inner {
    justify-content: center;
    /* Keep contact items centered in the full width on mobile. */
 
    gap: 4px 10px;
    /* Slightly tighter spacing on small screens. */
  }
 
  .contact-item {
    white-space: normal;
    /* Allow contact text to wrap onto a new line if the screen is very narrow.
       Remove this line if you'd rather keep items on one line. */
  }
}