/* custom.css
 *
 * This stylesheet provides site‑specific overrides for the iLab
 * interface.  In particular it removes the pill‑shaped backgrounds
 * behind the top navigation items and replaces them with a clean,
 * transparent appearance.  It also adds an underline on hover to
 * provide subtle feedback without altering the layout.  Additional
 * styles can be added here to customise new UI elements such as
 * the email/license widget.
 */

/* Remove background and border from nav chips.  We retain the
   padding and font sizing defined in styles.css for consistent
   spacing. */
.nav .chip {
    background: transparent;
    border: none;
    padding: 6px 10px;
    position: relative;
    color: inherit;
    text-decoration: none;
}

/* Add a pseudo‑element underline that animates on hover. */
.nav .chip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: transparent;
    transition: background 0.3s;
}

.nav .chip:hover::after {
    background: var(--brand);
}

/* Style for the email & license widget container.  We reuse the
   existing .card class defined in styles.css for consistent padding
   and border styling.  Additional spacing below the widget helps
   separate it from the rest of the controls. */
/*
 * Email & License widget positioning
 *
 * The widget is now presented as a horizontal bar immediately below the
 * application bar.  It uses a flexbox layout so the email, OTP and
 * license inputs sit next to each other, with the Continue button
 * aligned to the baseline.  When space is constrained (small
 * screens) the fields will wrap onto the next line.  The final
 * message line spans the full width.  The styling matches the
 * surrounding panels for a cohesive look.
 */
#email-license-widget {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    margin: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 12px;
}

/* Remove default margins on nested fields for compactness */
#email-license-widget .field {
    margin: 0;
    display: flex;
    flex-direction: column;
}

#email-license-widget label {
    font-size: 14px;
    margin-bottom: 4px;
}

#email-license-widget input {
    height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink);
}

#email-license-widget button {
    height: 36px;
    padding: 6px 16px;
    border-radius: 8px;
}

/* The message/hint spans the full width and sits on its own line */
#email-license-widget .hint,
#email-license-widget #al_message {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

/* Icon button used for file remove and lock/unlock controls */
.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 16px;
    line-height: 1;
    color: inherit;
}
.icon-btn:hover {
    color: var(--brand);
}
/*
 * Generic text centering helper.
 *
 * The upstream HTML includes elements (such as the footer on the
 * home page) which specify the class `text-center` to request
 * centered content.  However, no matching CSS rule existed so
 * browsers defaulted to left alignment.  Define a simple rule here
 * so any element with the `text-center` class will horizontally
 * centre its inline content.  The justify-content property helps when
 * flexbox layouts are applied, but has no adverse effect on static
 * elements.  See issue #2 on the task list.
 */
.text-center {
    text-align: center;
    justify-content: center;
}
.remote-row{display:grid;grid-template-columns:max-content 1fr max-content max-content;gap:10px;align-items:center;margin:8px 0 6px}
.remote-row .input{height:38px}

/* Remote image row:
   Show the optional remote image upload row so users can paste an external
   image URL directly.  Previously this row was hidden to simplify the UI,
   but the live site now requires a direct paste link option.  */

/*
 * Enhance the appearance of the “Buy Now” button in the purchase
 * section.  The default `.btn.primary` style in styles.css uses a
 * gradient but maintains a relatively small border radius and
 * padding.  To better match the provided design reference, we
 * override these properties specifically within the purchase actions
 * container.  Other buttons elsewhere on the site are unaffected.
 */
.purchase-actions .btn.primary {
    background: linear-gradient(90deg, #8b5cf6, #06b6d4);
    color: #fff;
    border: 0;
    border-radius: 24px;
    padding: 0 24px;
    height: 48px;
    font-size: 16px;
}

/*
 * Modern hero section styling
 *
 * The hero section is a new addition to the front page inspired by
 * modern landing page designs.  It introduces users to the core
 * capabilities of Image Lab – resizing, compressing and converting
 * images – and highlights key benefits such as quality, privacy and
 * speed.  The layout is responsive: on wider screens it displays the
 * feature summary to the right of the headline, while on narrow
 * screens the content stacks vertically.  Colours and spacing are
 * chosen to complement the existing palette defined in styles.css.
 */
/*
 * Adjustments to hero layout
 *
 * Reduce vertical margins to prevent the hero from dominating the page,
 * and ensure content looks balanced on both desktop and mobile.  Use
 * flexbox to align elements and allow wrapping when the screen is
 * narrow.  Gap spacing has been tightened for a more compact look.
 */
.hero {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px auto;
    max-width: 1200px;
    padding: 0 20px;
}

/* When the hero appears within the grid layout below the preview, span
   it across both columns so it takes the full width. */
.shell .hero {
    grid-column: 1 / -1;
}

.hero-header {
    flex: 1 1 600px;
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.hero-tags .tag {
    background: #f1f5f9;
    color: #111827;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
}

/*
 * The hero heading uses a responsive font size so that the phrase
 * “Resize, compress & convert images in your browser” stays on one
 * line for most viewport widths.  The clamp() function sets a
 * minimum, preferred (viewport‑based) and maximum value.
 */
.hero-header h1 {
    /* Reduce heading size so the phrase stays on a single line on most screens. */
    font-size: clamp(24px, 4.5vw, 32px);
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.2;
}

.hero-header p {
    /* Slightly smaller text and tighter spacing for description. */
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 20px;
    max-width: 520px;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.feature-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    flex: 1 1 180px;
    max-width: 260px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.feature-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.feature-card p {
    font-size: 14px;
    color: #6b7280;
}

/* Display the logo in the header next to the site title. */
.logo-icon {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    vertical-align: middle;
}

/*
 * Hero brand styling.
 * Displays the Image Lab icon alongside the brand name at the top of the
 * hero section.  Ensures the logo scales appropriately and the text
 * uses a moderate font size so it doesn’t overpower the main heading.
 */
.hero-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.hero-logo {
    width: 32px;
    height: 32px;
}
.hero-name {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.hero-side {
    flex: 1 1 300px;
    max-width: 340px;
}

.hero-side table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hero-side th,
.hero-side td {
    padding: 12px 16px;
    font-size: 14px;
}

.hero-side th {
    font-weight: 600;
    color: #111827;
}

.hero-side td {
    color: #6b7280;
    border-left: 1px solid #e5e7eb;
}

.hero-side tr + tr td,
.hero-side tr + tr th {
    border-top: 1px solid #e5e7eb;
}