/* =========================================================
   base.css — Structure + Typography (palette-agnostic)
   - No hard-coded colors; colors live in odgreen.css.
   - Cards keep 1px outline (var(--divider-color)) and var(--box-shadow).
   - Footer nav remains centered.
   ========================================================= */

/* ---------- Global rhythm & tokens ---------- */
:root{
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  --radius-lg: 0.75rem;
  --card-max-width: 640px;

  --shadow-var: var(--box-shadow, 0 1px 2px rgba(0,0,0,.1));
}

/* ---------- Global typography ---------- */
html { font-size: 16px; }

body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
  background-color: var(--page-bg);   /* palette-driven */
  color: var(--page-text);            /* palette-driven */
}

/* Headings */
h1{ font-size: 1.75rem; line-height: 1.2; margin: var(--space-6) 0 var(--space-3); font-weight: 700; }
h2{ font-size: 1.375rem; line-height: 1.3; margin: var(--space-5) 0 var(--space-3); font-weight: 700; }
h3{ font-size: 1.125rem; line-height: 1.3; margin: var(--space-4) 0 var(--space-2); font-weight: 700; }
h4{ font-size: 1rem;     line-height: 1.3; margin: var(--space-3) 0 var(--space-2); font-weight: 600; }

/* Links — structural only (colors come from odgreen.css) */
a{
  text-decoration: none;
  transition: opacity 0.2s ease-in-out;
}
a:hover,
a:focus{ opacity: 0.75; }

/* ---------- Page scaffolding ---------- */
.container{
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-4);
}

select, .select{
  width: 100%;
  display: block;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
}

/* ---------- Card ---------- */
.card{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--divider-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-var);
  padding: var(--space-4);
  max-width: var(--card-max-width);
  margin: var(--space-4) auto;
}

/* Title (any heading or .name) */
.card :is(h1,h2,h3,h4,.name){
  order: -2;                  /* title first in visual order */
  font-weight: 700;
  line-height: 1.25;
  margin: var(--space-0);
}
.card h3,
.card .name{ font-size: 1.25rem; }

/* Category line */
.card .category{
  order: -1;                  /* comes just after title */
  font-size: 0.95rem;
  margin: var(--space-0);
  opacity: 0.9;
}

/* Description / Location / Phone */
/* Description */
.card .description {
  margin: var(--space-1) 0 var(--space-0);
  line-height: 1.5;
}

.biz-description {
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-color);
}

.biz-address {
  margin: 1rem 0;
  font-weight: bold;
  color: var(--text-color);
}

/* Address (location) — pulled up a bit closer to description */
.card .location {
  font-style: italic;
  margin-top: -2px;      /* tighter gap above */
  margin-bottom: var(--space-0);
}

/* Phone — stays spaced below address */
.card .phone {
  margin-top: var(--space-1);
}

/* ---------- Action row (buttons/links under category) ---------- */
.card .actions,
.card .card-actions{
  order: -0.5;                /* just below category */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 16px;           /* spacing between action groups */
  row-gap: 8px;
  margin-top: var(--space-1);
}

.card .actions a,
.card .card-actions a{
  display: inline-flex;       /* icon + label behave as a single unit */
  align-items: center;
  column-gap: 8px;            /* default spacing between icon and label */
  margin: 0;
  text-decoration: none;
}

/* Normalize all icons so Website/Pin/Info align visually */
.card .actions .icon,
.card .card-actions .icon{
  display: inline-block;
  width: 1.1em;               /* equal width box evens out emoji side-bearings */
  text-align: center;
}

/* Label text in actions */
.card .actions .label,
.card .card-actions .label{
  line-height: 1;
  margin: 0;
}

/* --- Fine-tune: Directions link only --- */
/* Slightly tighter icon–text gap for Pin + "Directions" */
.card .actions a[data-action="directions"],
.card .card-actions a[data-action="directions"]{
  column-gap: 2px;            /* overrides the default 8px gap */
  margin-left: -8px;          /* shift the pair left as a unit */
}

/* ---------- Footer nav ---------- */
.site-footer{
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-top: 1px solid var(--divider-color);
}

/* Pipe separator between footer links */
.site-footer a:not(:last-child)::after {
  content: " | ";
  color: var(--accent-color);
  margin: 0 var(--space-2);
}



/* --- Card detail spacing: tighten Description ↔ Address, keep Phone spacing --- */

/* Ensure description can collapse margin properly */
.card .business-desc {
  margin-bottom: 2px;  /* tighter gap above address */
  line-height: 1.5;
}

/* Business address: closer to description, italicized */
.card .business-address {
  display: block;      /* ensure vertical margins apply */
  font-style: italic;
  margin-top: 2px;     /* closer to description */
  margin-bottom: 0;
}

/* Business phone: keep consistent distance below address */
.card .business-phone {
  display: block;
  margin-top: var(--space-1); /* original spacing preserved */
}



/* Category dropdown menu styling */
select {
  appearance: none;                /* remove OS default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: var(--card-bg);
  color: var(--card-text);

  border: 1px solid var(--divider-color);
  border-radius: var(--radius-lg);

  padding: var(--space-2) var(--space-4);
  font-size: 1rem;
  line-height: 1.4;

  background-image: url("data:image/svg+xml;utf8,<svg fill='%23444' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

/* When focused */
select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(58,110,165,0.2); /* accent halo */
}

/* Bold font styling for the site name */
.site-title {
  text-align: center;
  line-height: 1.2;
  word-wrap: break-word;
}

.site-title span {
  display: block;   /* Makes each word a block element */
  font-size: 2rem;
}




/* Announcement Banner */
.announcement-banner {
  background-color: var(--accent-color);  /* Use your accent color */
  color: #fff;                           /* White text for contrast */
  padding: var(--space-2) var(--space-4);
  text-align: center;
  margin-bottom: var(--space-4);           /* Space below the banner */
  border-radius: var(--radius-lg);
}

/* Announcement link styling */
.announcement-link {
  color: #fff;                           /* White text */
  font-weight: 600;
  font-size: 1.25rem;
  text-decoration: none;
  display: block;                        /* Make the link block-level */
}

.announcement-link:hover {
  text-decoration: underline;            /* Subtle hover effect */
  color: var(--accent-hover);             /* Change color on hover */
}




/* Ensures that the link in the banner has the correct color on page load */
.announcement-link {
  color: #fff !important;  /* Make sure it remains white */
}

/* In case it's within a section where links have other colors */
body a {
  color: inherit;   /* Inherit color from body to ensure it doesn't mess with the banner link */
}