/* =====================================================================
   WESTWARD PORTRAITS: STYLE SHEET

   HOW TO USE THIS FILE
   1. Change the values in PART 1 ("YOUR SETTINGS") to restyle the whole site.
      That is the only part you need for colors, fonts, and sizes.
   2. Parts 2 to 12 style one box each. The name in each heading matches
      the class="..." in index.html, so you can find any box quickly.
   3. Save this file, then refresh index.html in your browser to see changes.

   QUICK TIPS
   - A color looks like #b54a42. Search "color picker" online to find one.
   - "px" means pixels. A bigger number means bigger.
   - To try something, change one value at a time. To undo, change it back.
   ===================================================================== */


/* =====================================================================
   PART 1: YOUR SETTINGS
   ===================================================================== */
:root {

  /* ----- COLORS ----- */
  --page-color: #f7efe1;          /* background of the whole page */
  --text-color: #2c4446;          /* main text (a blue-green, not black) */
  --soft-text-color: #587274;     /* lighter text, like small notes */
  --line-color: #587274;          /* thin lines around boxes */
  --accent-color: #b54a42;        /* buttons, prices, title underlines */
  --button-text-color: #fdf6ea;   /* words on the buttons */
  --highlight-color: #efd48a;     /* yellow badge and number circles */
  --green-color: #dfe8de;         /* green section background */
  --pink-color: #f2d8cf;          /* pink boxes */
  --yellow-color: #f5e7bd;        /* yellow section background */
  --card-color: #fbf5e8;          /* background of the white-ish cards */
  --footer-color: #2c4446;        /* bottom bar */
  --footer-text-color: #f1e8d6;

  /* ----- FONTS ----- */
  --heading-font: "Special Elite", "Courier New", monospace;
  --body-font: "Libre Baskerville", "Times New Roman", serif;

  /* ----- SIZES ----- */
  --text-size: 17px;              /* normal writing */
  --title-size: 34px;             /* section titles like "Sessions" */
  --site-name-size: 64px;         /* "Westward Portraits" at the top */
  --page-width: 960px;            /* how wide the content gets on a big screen */
  --section-space: 60px;          /* empty space above and below each section */
  --roundness: 18px;              /* how round the box corners are (0 = square) */
  --photo-tilt: 1deg;             /* how much the photos lean (0deg = straight) */
  --photo-min-width: 240px;       /* smallest a photo gets before moving to the next row */
}


/* =====================================================================
   PART 2: THE PAGE BASICS
   ===================================================================== */
body {
  margin: 0;                              /* removes the default gap around the page */
  background-color: var(--page-color);
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--text-size);
  line-height: 1.8;                       /* space between lines of text */
}

/* .container keeps the writing in a neat column in the middle of the page.
   It also sits above the scattered drawings (Part 3b), so your writing is always on top and readable. */
.container {
  position: relative;
  z-index: 2;
  max-width: var(--page-width);
  margin: 0 auto;                         /* "auto" centers it */
  padding: 0 22px;                        /* keeps text off the screen edge on phones */
}

a { color: var(--accent-color); }         /* normal links */


/* =====================================================================
   PART 3: THE TOP OF THE PAGE  (.header)
   ===================================================================== */
.header {
  position: relative;                     /* lets scattered drawings (Part 3b) sit inside this section */
  text-align: center;
  padding: 56px 0 60px;                   /* top and bottom space */
  background-color: var(--yellow-color);  /* try var(--green-color) or var(--pink-color) */
  overflow: hidden;                       /* keeps drawings from spilling past the section edge */
}

/* "Westward Portraits" typed name */
.site-name {
  font-family: var(--heading-font);
  font-size: var(--site-name-size);
  font-weight: normal;
  line-height: 1.1;
  margin: 0;
}

/* Your drawn name, if you use one (see index.html) */
.wordmark {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 560px;                           /* how wide the drawing shows */
}

.tagline {
  font-style: italic;
  color: var(--soft-text-color);
  margin-top: 8px;
}

/* The box with the sentence and the button */
.intro {
  max-width: 540px;
  margin: 32px auto 0;
}

.intro-title {
  font-family: var(--heading-font);
  font-weight: normal;
  font-size: 28px;
  line-height: 1.3;
  margin: 0 0 8px;
}


/* =====================================================================
   PART 3b: SCATTERED DRAWINGS  (.doodle)
   Every scattered drawing in the HTML uses this one class. Its position,
   tilt and size are set individually on each image, right in the HTML
   (see the "style=" part of each <img class="doodle"> line), so you
   don't need to touch this part to add or move one.
   ===================================================================== */
.doodle {
  position: absolute;                     /* takes it out of the normal flow, placed by top/left instead */
  z-index: 1;                             /* behind your writing (z-index: 2), above the section color */
  transform: rotate(var(--rotate, 0deg)); /* uses the --rotate value set on each image */
  pointer-events: none;                   /* lets clicks pass through it to whatever is underneath */
  opacity: 0.9;                           /* try a lower number, like 0.6, for a fainter drawing */
}


/* =====================================================================
   PART 4: BUTTONS AND BADGE
   ===================================================================== */
.button {
  display: inline-block;
  position: relative;                     /* lets a drawn button image line up on top of this one */
  background-color: var(--accent-color);
  color: var(--button-text-color);
  font-family: var(--heading-font);
  font-size: 19px;
  text-decoration: none;                  /* removes the link underline */
  padding: 11px 28px;                     /* space inside the button */
  border-radius: var(--roundness);
}

/* A hand-drawn button, once you uncomment one in index.html.
   Your drawing should include its own lettering, since this replaces the typed word(s) entirely. */
.button-drawing {
  display: block;
  height: 54px;                           /* adjust to fit your drawing; width follows automatically */
  width: auto;
}

/* The little yellow tag under the button */
.badge {
  display: inline-block;
  margin-top: 22px;
  padding: 6px 18px;
  background-color: var(--highlight-color);
  border: 1.5px solid var(--line-color);
  border-radius: var(--roundness);
  font-size: 15px;
}


/* =====================================================================
   PART 5: SECTIONS  (.section, .section-title)
   Every part of the page below the top is a .section.
   ===================================================================== */
.section {
  position: relative;                     /* lets scattered drawings (Part 3b) sit inside this section */
  overflow: hidden;                       /* keeps drawings from spilling past the section edge */
  padding: var(--section-space) 0;
}

/* Add one of these next to "section" in index.html to give it a color */
.section-green  { background-color: var(--green-color); }
.section-yellow { background-color: var(--yellow-color); }

.section-title {
  display: inline-block;
  font-family: var(--heading-font);
  font-weight: normal;
  font-size: var(--title-size);
  line-height: 1.2;
  margin: 0 0 18px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--accent-color);   /* the line under each title */
}

.intro-text { margin: 0 0 32px; max-width: 600px; }

/* A hand-drawn heading image, once you uncomment one in index.html.
   Adjust the height to fit your drawing; width follows automatically. */
.heading-drawing {
  display: block;
  height: 52px;
  width: auto;
}


/* =====================================================================
   PART 6: PHOTOS  (.photos, .photo)
   ===================================================================== */
/* .photos lines the photos up in a grid.
   It fits as many as it can per row, then moves to the next row. */
.photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--photo-min-width), 1fr));
  gap: 32px;                              /* space between photos */
}

/* .photo is the white frame around each photo */
.photo {
  background-color: var(--card-color);
  border: 1.5px solid var(--line-color);
  padding: 10px;                          /* thickness of the white frame */
  box-shadow: 0 8px 20px rgba(44, 68, 70, 0.15);   /* soft shadow */
}

.photo img {
  display: block;
  width: 100%;
  height: 320px;                          /* make taller or shorter if you like */
  object-fit: cover;                      /* crops the photo to fit without stretching */
  background-color: var(--pink-color);    /* shows while a photo is missing */
}

/* Photos lean a little left or right */
.tilt-left  { transform: rotate(calc(var(--photo-tilt) * -1)); }
.tilt-right { transform: rotate(var(--photo-tilt)); }

/* Your photo in the About section. Reuses the same frame as the work photos above,
   just narrower and set to one side of the text. */
.about-photo {
  float: left;                            /* lets the paragraph text wrap around it */
  width: 200px;
  margin: 4px 24px 14px 0;
}
.about-photo img { height: 260px; }       /* taller than it is wide, like a portrait snapshot */


/* =====================================================================
   PART 7: SESSION CARDS  (.cards, .card)
   ===================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));   /* two side by side, one on phones */
  gap: 28px;
}

.card {
  background-color: var(--card-color);    /* shows on its own, and also shows if a drawing below is missing */
  border: 1.5px solid var(--line-color);
  border-radius: var(--roundness);
  padding: 26px 28px;
}

/* EDIT (later): to use a hand-drawn background for a card, save your drawing (a photo of a
   piece of paper, or a scan works well) as one of the two file names in the block below.
   That block starts and ends with a line of its own, made of a star and a slash, which turns
   the two rules inside it off. Delete that whole start line and that whole end line to turn
   a rule on. Nothing breaks if the file doesn't exist yet, the plain color above just shows. */

/*
.card-sitting { background-image: url("images/card-bg-sitting.jpg"); background-size: cover; background-position: center; }
.card-extras  { background-image: url("images/card-bg-extras.jpg");  background-size: cover; background-position: center; }
*/

.card-title {
  font-family: var(--heading-font);
  font-weight: normal;
  font-size: 23px;
  margin: 0 0 12px;
}

.card ul, .pink-box ul { margin: 0; padding-left: 20px; }
.card li, .pink-box li { margin-bottom: 6px; }

/* One line of the price list: the name on the left, the price on the right */
.price-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 2px dotted var(--line-color);
}

.price {
  font-family: var(--heading-font);
  color: var(--accent-color);
}

.small-note {
  font-size: 15px;
  color: var(--soft-text-color);
  margin: 16px 0 0;
}


/* =====================================================================
   PART 8: HOW IT WORKS  (.steps, .step)
   ===================================================================== */
.steps { max-width: 700px; }

.step {
  display: flex;                          /* number on the left, words on the right */
  gap: 18px;
  margin-bottom: 22px;
}

/* The round number */
.step-number {
  flex-shrink: 0;                         /* keeps the circle from squishing */
  width: 46px;
  height: 46px;
  line-height: 46px;                      /* centers the number up and down */
  text-align: center;
  border-radius: 50%;                     /* 50% makes a circle */
  background-color: var(--highlight-color);
  border: 1.5px solid var(--line-color);
  font-family: var(--heading-font);
  font-size: 21px;
}

/* A hand-drawn number, once you uncomment one in index.html. It fills the same
   circle space as the typed number above, so your four drawings will line up evenly. */
.step-number img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;                    /* shows your whole drawing without stretching it */
}

.step-title {
  font-family: var(--heading-font);
  font-size: 19px;
}


/* =====================================================================
   PART 9: ABOUT  (.two-columns, .pink-box)
   ===================================================================== */
/* Two boxes side by side on a computer, stacked on a phone */
.two-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 40px;
  align-items: start;
}

.pink-box {
  background-color: var(--pink-color);    /* shows on its own, and also shows if the drawing below is missing */
  border: 1.5px solid var(--line-color);
  border-radius: var(--roundness);
  padding: 24px 28px;
}

/* EDIT (later): to use a hand-drawn background here too, save your drawing as
   images/card-bg-who.jpg, then delete the star-and-slash start line and the
   star-and-slash end line below to turn it on. */

/*
.pink-box { background-image: url("images/card-bg-who.jpg"); background-size: cover; background-position: center; }
*/


/* =====================================================================
   PART 10: CONTACT  (.contact)
   ===================================================================== */
.contact { text-align: center; }
.contact p { max-width: 520px; margin-left: auto; margin-right: auto; }
.instagram { margin-top: 24px; }


/* =====================================================================
   PART 11: FOOTER  (.footer)
   ===================================================================== */
.footer {
  background-color: var(--footer-color);
  color: var(--footer-text-color);
  text-align: center;
  padding: 26px 16px;
  font-size: 15px;
}


/* =====================================================================
   PART 12: PHONE ADJUSTMENTS
   Anything inside this block only applies on small screens.
   ===================================================================== */
@media (max-width: 600px) {
  :root {
    --site-name-size: 40px;
    --title-size: 28px;
    --section-space: 44px;
  }
}