/* PorbandarOnline — main.css
   Design tokens, CSS reset, base typography, layout utilities.
   ZERO component styles here — see components.css and tourism.css.
   ─────────────────────────────────────────────────────────────── */

/* ── DESIGN TOKENS ────────────────────────────────────────────── */
:root {
  /* Brand blues */
  --blue:    #0082C8;
  --blue-d:  #006AAA;
  --blue-dd: #004F85;
  --blue-l:  #E0F1FB;
  --blue-m:  #B8DDEF;

  /* Brand yellows */
  --yellow:   #FFB800;
  --yellow-d: #E09F00;
  --yellow-l: #FFF5CC;
  --yellow-m: #FFE080;

  /* Dark / backgrounds */
  --dark:   #041824;
  --dark-2: #0A2A3A;
  --bg:     #F7F5F1;
  --sand:   #EDE8E0;
  --white:  #FFFFFF;

  /* Borders */
  --border:   #DDD8D0;
  --border-l: #EDE8E2;

  /* Text */
  --text:  #1A1A1E;
  --muted: #6A6460;
  --light: #A09890;

  /* Semantic */
  --green:    #0A9B58;
  --green-l:  #D0F5E8;
  --red:      #D42B2B;
  --red-l:    #FDE8E8;
  --teal:     #0E7C7B;
  --teal-l:   #E0F4F4;
  --purple:   #6B3FA0;
  --purple-l: #EEE6F8;

  /* Shadows */
  --sh:    0 4px 20px rgba(0, 130, 200, 0.1);
  --sh-lg: 0 8px 40px rgba(0, 130, 200, 0.14);
  --sh-xl: 0 20px 60px rgba(0, 130, 200, 0.18);

  /* Shape & motion */
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --t:    0.2s ease;

  /* Typography */
  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-ui:   'Poppins', system-ui, sans-serif;
}

/* ── CSS RESET ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color var(--t);
}

a:hover {
  color: var(--blue-d);
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  color: var(--text);
}

/* ── BASE TYPOGRAPHY ──────────────────────────────────────────── */
h1 { font-family: var(--font-head); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; }
h2 { font-family: var(--font-head); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; }
h3 { font-family: var(--font-ui);   font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
h4 { font-family: var(--font-ui);   font-size: 1.1rem;  font-weight: 600; }
h5 { font-family: var(--font-ui);   font-size: 1rem;    font-weight: 600; }
h6 { font-family: var(--font-body); font-size: 0.9rem;  font-weight: 600; }

p {
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

/* ── LAYOUT ───────────────────────────────────────────────────── */
.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 24px;
}

.container-wide {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── GRID UTILITIES ───────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ── SPACING UTILITIES ────────────────────────────────────────── */
.py-56  { padding-block: 56px; }
.py-64  { padding-block: 64px; }
.py-72  { padding-block: 72px; }
.pt-56  { padding-top: 56px; }
.pb-56  { padding-bottom: 56px; }
.pt-64  { padding-top: 64px; }
.pb-64  { padding-bottom: 64px; }
.mt-24  { margin-top: 24px; }
.mt-32  { margin-top: 32px; }
.mt-48  { margin-top: 48px; }
.mb-24  { margin-bottom: 24px; }
.mb-32  { margin-bottom: 32px; }
.mb-48  { margin-bottom: 48px; }

/* ── COLOUR UTILITIES ─────────────────────────────────────────── */
.bg-white  { background: var(--white); }
.bg-sand   { background: var(--sand); }
.bg-blue-l { background: var(--blue-l); }
.bg-dark   { background: var(--dark); }
.text-white { color: var(--white); }
.text-blue  { color: var(--blue); }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ── FLEX UTILITIES ───────────────────────────────────────────── */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap   { flex-wrap: wrap; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

/* ── BODY TEXT UTILITY ────────────────────────────────────────── */
.body-text { line-height: 1.8; color: var(--text); }
.body-text p { margin-bottom: 1.1em; }
.body-text strong { color: var(--text); font-weight: 600; }

/* ── SCREEN-READER UTILITY ────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .py-72  { padding-block: 48px; }
  .py-64  { padding-block: 40px; }
  .py-56  { padding-block: 36px; }
  .container { padding-inline: 16px; }
}

@media (max-width: 600px) {
  .grid-4 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .py-72  { padding-block: 36px; }
  .py-64  { padding-block: 28px; }
  .py-56  { padding-block: 24px; }
}