/* ==========================================================================
   LIGHTHOUSE MARINE CANVAS, LLC  —  styles.css
   --------------------------------------------------------------------------
   Version : 1.0.0
   Updated : 2026-09-15
   Author  : Lighthouse Marine Canvas
   --------------------------------------------------------------------------
   HOW THIS FILE IS ORGANISED

     1. PALETTE        all colours, in one place — edit here, nowhere else
     2. TYPE SCALE     font stacks and sizes
     3. SPACING        the rhythm values used throughout
     4. RESET          browser default clean-up
     5. PAGE SHELL     body, main wrapper
     6. LOGO BANNER    the blue field at the top
     7. CONTENT        tagline, phone, email, services, location
     8. FOOTER
     9. RESPONSIVE     small-screen adjustments
    10. PRINT          what happens if someone prints the page

   EDITING TIP: everything in section 1 is a "CSS custom property" — a named
   value. Change it once at the top and every place that uses it updates.
   You never need to hunt through the file for a hex code.
   ========================================================================== */


/* ==========================================================================
   1. PALETTE
   --------------------------------------------------------------------------
   These are the only colour definitions in the whole site. The names describe
   the JOB the colour does, not the colour itself — so if the accent changes
   from green to red later, the name `--accent` still makes sense.
   ========================================================================== */

:root {

  /* --- Brand colours, taken from the v3 business card ------------------- */

  /* The pale blue field behind the logo. Sampled from the printed card. */
  --sea:        #b0def2;

  /* The navy the logo and all body text are drawn in. Also from the card. */
  --ink:        #1d2545;

  /* A lighter navy for secondary text — service list, captions, footer.
     This is --ink lightened, not a new brand colour. */
  --ink-soft:   #4a5372;

  /* The page background. Plain white, matching the white half of the card. */
  --paper:      #ffffff;


  /* --- Derived tones ---------------------------------------------------- */

  /* Hairline rules above and below the service list. A desaturated --sea. */
  --rule:       #c9dce7;

  /* A deeper blue used only for the underline beneath the phone number. */
  --sea-deep:   #7fbcd8;


  /* --- ACCENT — NOT YET CHOSEN ------------------------------------------
     Reserved for the Kirby Marine Topside colour picked in v2.
     Right now it is set to --ink so nothing looks wrong before a real
     value exists. When the hex is confirmed, replace this ONE line.

     Candidates discussed (names only — hex values not yet sourced):
       #14 Bronze Green      muted working-boat green
       #12 Bottle Green      darker, more formal
       #01 Green Gray        most restrained
       #34 Slate             blue-grey, sits close to the existing palette
       #23 Russet            warm counterpoint to all the blue
       #08 See Red           traditional marine red, high contrast
     ---------------------------------------------------------------------- */
  --accent:     var(--ink);


  /* ========================================================================
     2. TYPE SCALE
     ------------------------------------------------------------------------
     One font stack, no web fonts to download. These are old-style serifs
     already present on almost every device — warm, slightly historical,
     and they render instantly because nothing has to load.

     The order matters: the browser uses the first one it finds.
       Iowan Old Style  — Apple devices
       Palatino         — most Macs and Windows machines with Office
       Georgia          — effectively universal
       serif            — last-resort fallback
     ======================================================================== */

  --font-body:  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                "Times New Roman", serif;

  /* Sizes. rem units scale with the reader's own browser setting, which
     matters for a client base that skews older. Never use px for text. */
  --size-phone:   2.25rem;   /* the phone number — largest thing on the page */
  --size-tagline: 1.3125rem;
  --size-body:    1.0625rem;
  --size-small:   0.9375rem;


  /* ========================================================================
     3. SPACING
     ------------------------------------------------------------------------
     A small set of repeated values keeps vertical rhythm consistent.
     ======================================================================== */

  --space-xs:   0.6rem;
  --space-sm:   1rem;
  --space-md:   1.75rem;
  --space-lg:   2.75rem;
  --space-xl:   3.5rem;

  /* Maximum line length for readable text. Roughly 60-70 characters, which
     is the range where prose is easiest to read. */
  --measure:    34rem;
}


/* ==========================================================================
   4. RESET
   --------------------------------------------------------------------------
   Browsers apply their own default margins and sizing rules. These three
   declarations neutralise the ones that cause layout surprises.
   ========================================================================== */

/* border-box means padding and borders count INSIDE an element's declared
   width, rather than being added to it. Far more predictable. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Stops mobile Safari inflating text sizes when a phone is rotated. */
html {
  -webkit-text-size-adjust: 100%;
}


/* ==========================================================================
   5. PAGE SHELL
   ========================================================================== */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;

  /* Turns on proper letter-pairing (kerning and ligatures) in the serif. */
  text-rendering: optimizeLegibility;
}

/* The centred column that holds all page content below the logo banner. */
.page {
  max-width: var(--measure);
  margin: 0 auto;                            /* auto side margins = centred */
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  text-align: center;
}


/* ==========================================================================
   6. LOGO BANNER
   --------------------------------------------------------------------------
   The pale blue field across the top, mirroring the front of the business
   card. The logo sits on it as a plain <img>, which keeps index.html short
   and readable rather than burying 79 KB of vector data inside it.
   ========================================================================== */

.banner {
  background: var(--sea);
  padding: var(--space-lg) var(--space-md);

  /* Flexbox here does one job: centre the logo horizontally. */
  display: flex;
  justify-content: center;
}

.banner__logo {
  /* Fill the available width, but never grow past 30rem — beyond that the
     logo starts to look oversized on a desktop monitor. */
  width: 100%;
  max-width: 30rem;

  /* `height: auto` preserves the logo's proportions at any width. */
  height: auto;

  /* `display: block` removes the few pixels of gap browsers add beneath
     inline images (a leftover from images being treated like text). */
  display: block;
}


/* ==========================================================================
   7. CONTENT
   ========================================================================== */

/* --- Tagline -------------------------------------------------------------
   The business's one-line description, straight from the card. */
.tagline {
  margin: 0 0 var(--space-lg);
  font-size: var(--size-tagline);
  line-height: 1.45;
  color: var(--ink);

  /* Distributes words evenly across lines instead of leaving one word
     stranded on the last line. Ignored by older browsers, harmless there. */
  text-wrap: balance;
}


/* --- Phone number --------------------------------------------------------
   This is the single most important element on the page. The business runs
   on phone calls, so it is the largest text and a tap target on mobile.
   The underline is a border rather than text-decoration so its colour and
   thickness can be controlled independently. */
.phone {
  display: inline-block;
  font-size: var(--size-phone);
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--sea-deep);
  padding-bottom: 0.1em;
}

.phone:hover,
.phone:focus-visible {
  border-bottom-color: var(--ink);
}

/* The line beneath the phone number — who answers, and what to expect. */
.phone-note {
  margin: var(--space-xs) 0 var(--space-md);
  font-size: var(--size-small);
}


/* --- Email --------------------------------------------------------------- */
.email {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);

  /* Long address, narrow phone screen: allow a break rather than forcing
     the page to scroll sideways. */
  word-break: break-word;
}

.email:hover,
.email:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink-soft);
}


/* --- Services list -------------------------------------------------------
   Three columns, matching the layout on the back of the business card.
   Hairline rules above and below rather than a box — lighter, and closer
   to how a letterpress card would set it. */
.services {
  margin: var(--space-lg) 0;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);

  /* CSS Grid: `repeat(3, 1fr)` means three columns of equal width.
     The gap value is `row-gap column-gap`. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs) var(--space-sm);

  color: var(--ink);
}

/* Keeps each service name on one line — no "Uphol-stery". */
.services span {
  white-space: nowrap;
}


/* --- Location ------------------------------------------------------------ */
.location {
  margin: 0 0 var(--space-xs);
  color: var(--ink);
}

.waters {
  margin: 0;
  font-size: var(--size-small);
}


/* --- Closing note --------------------------------------------------------
   The hand-patterning line. This is the differentiator the whole brand
   rests on, so it gets its own space at the end rather than being buried. */
.note {
  margin: var(--space-xl) 0 0;
  font-size: var(--size-small);
}


/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  font-size: var(--size-small);
  color: var(--ink-soft);
}


/* ==========================================================================
   ACCESSIBILITY
   --------------------------------------------------------------------------
   `:focus-visible` draws an outline when someone navigates by keyboard, but
   not when they click with a mouse. Removing focus outlines entirely makes
   a site unusable without a pointing device.
   ========================================================================== */

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}


/* ==========================================================================
   9. RESPONSIVE
   --------------------------------------------------------------------------
   A media query applies its rules only when the condition is met. This one
   fires at 26rem (about 416px) and narrower — small phones.

   Most visitors will arrive here by scanning the QR code on a business card,
   which means a phone held at arm's length. Small screens are the primary
   case, not an afterthought.
   ========================================================================== */

@media (max-width: 26rem) {

  .banner {
    padding: var(--space-md) var(--space-sm);
  }

  /* Slightly smaller so the number never wraps onto two lines. */
  .phone {
    font-size: 1.9375rem;
  }

  /* Three columns is too tight below ~400px; drop to two. */
  .services {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   10. PRINT
   --------------------------------------------------------------------------
   If someone prints this page — and boat owners do print things — drop the
   large blue ink block and make sure text is solid black on white.
   ========================================================================== */

@media print {

  .banner {
    background: none;
    padding: 0 0 var(--space-md);
  }

  body {
    color: #000;
    font-size: 11pt;
  }

  /* Underlines under links are meaningless on paper. */
  .phone,
  .email {
    border-bottom: none;
  }
}